﻿:root {
    --chip-green: #e7f7ee;
    --chip-blue: #e8efff;
    --chip-amber: #fff3e0;
}

body {
    font-family: 'Inter', sans-serif;
}

.font-serif {
    font-family: 'Playfair Display', serif;
}

/* Stile per la transizione delle sezioni collassabili */
.details-content {
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.details-content.visible {
    max-height: 500px; /* Valore sufficientemente grande */
    opacity: 1;
}


h1 {
    font-size: 2rem !important;
    font-weight: bold !important;
    margin: .2rem 0 .75rem !important
}

h2 {
    font-size: 1.5rem !important;
    font-weight: bold !important;
    margin: .2rem 0 .75rem !important;
    line-height:1.20
}

h3 {
    font-size: 16px !important; /*1.1rem */
    font-weight: bold !important;
    margin: 16px 0 8px !important;
}


.badge-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(17,17,17,.08);
    font-size: .85rem
}

.chip.green {
    background: var(--chip-green)
}

.chip.blue {
    background: var(--chip-blue)
}

.chip.amber {
    background: var(--chip-amber)
}

/* modal */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(16,24,40,.45);
    z-index: 50;
    padding: 20px
}

.modal[open] {
    display: flex
}

.modal-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
    max-width: 720px;
    width: 100%;
    max-height: 70vh; /* altezza massima visibile */
    overflow-y: auto; /* scroll solo dentro */
    padding: 22px;
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.icon-btn {
    border:0 solid white;
    background: transparent;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1
}
