/* =============================================================================
   STYLE.CSS — Dott.ssa Michela Lorenzini, Psicologa
   Palette e tipografia ispirate al biglietto da visita:
     • Sfondo fronte biglietto → blu navy scuro  (#1e2d4a)
     • Sfondo retro biglietto  → beige caldo     (#ede6db)
     • Testo chiaro su navy    → crema           (#ede6db)
   ============================================================================= */


/* =============================================================================
   1. VARIABILI GLOBALI (CSS Custom Properties)
   Definite su :root così sono accessibili ovunque nel foglio di stile.
   Modificare qui per aggiornare l'intera palette in un colpo solo.
   ============================================================================= */

:root {
    /* --- Colori --- */
    --navy:          #1e2d4a;          /* blu scuro principale (fronte biglietto) */
    --navy-hover:    #162038;          /* navy più scuro, usato per hover sulla navbar */
    --beige:         #c8b49a;          /* beige medio, usato per accenti e dot timeline */
    --beige-light:   #ede6db;          /* beige chiaro, sfondo sezione "Chi Sono" */
    --cream:         #f5f0ea;          /* crema quasi bianco, sfondo sezione "Cosa Faccio" */
    --text-dark:     #1e2d4a;          /* testo scuro su sfondi chiari */
    --text-muted:    #4a5f7a;          /* testo secondario, meno enfatico */
    --text-light:    #ede6db;          /* testo chiaro su sfondi scuri */
    --divider-dark:  #c8b49a;          /* linea separatrice su sfondi chiari */
    --divider-light: rgba(237,230,219,0.35); /* linea separatrice su sfondi scuri */
    --card-border:   #ddd4c6;          /* bordo delle card servizi */
    --card-shadow:   rgba(30,45,74,0.10);   /* ombra hover sulle card */

    /* --- Tipografia --- */
    --font-display: 'Times New Roman', serif;           /* nome/titoli, stile biglietto fronte */
    --font-script:  'Great Vibes', cursive;    /* "Psicologa" in corsivo elegante */
    --font-body:    'Cormorant Garamond', serif; /* testo corrente, leggibile ed elegante */

    /* --- Spaziature --- */
    --section-padding-v: 88px;   /* padding verticale delle sezioni principali */
    --section-padding-h: 24px;   /* padding orizzontale (mobile-safe) */
    --container-max:     860px;  /* larghezza massima del contenuto centrato */
}


/* =============================================================================
   2. RESET E BASE
   Normalizza il comportamento di default del browser.
   ============================================================================= */

/* Box model universale: padding e border inclusi nella larghezza dichiarata */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Scorrimento fluido quando si clicca un'ancora (#chi-sono, ecc.) */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1.15rem;
    line-height: 1.78;
    color: var(--text-dark);
    background-color: var(--cream);
}

/* Le immagini non superano mai il contenitore padre */
img {
    display: block;
    max-width: 100%;
}

/* I link non hanno sottolineatura di default (viene gestita caso per caso) */
a {
    color: inherit;
    text-decoration: none;
}

/* Rimuove i bullet di default dagli elenchi */
ul {
    list-style: none;
}


/* =============================================================================
   3. NAVBAR
   Barra di navigazione fissa in cima alla pagina.
   position: sticky → rimane visibile durante lo scroll senza lasciare buco.
   ============================================================================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 100; /* sopra qualsiasi altro elemento durante lo scroll */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;   /* su schermi stretti i link vanno a capo */
    gap: 8px;
    padding: 18px 36px;
    background-color: var(--navy);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.28);
}

/* Nome nella navbar — font display, piccolo, lettering largo */
.navbar-brand {
    font-family: var(--font-display);
    
    text-transform: uppercase;
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    color: var(--text-light);
    white-space: nowrap; /* non va mai a capo */
}

/* Contenitore dei link di navigazione */
.navbar-links {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

/* Singolo link di navigazione */
.navbar-links a {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--beige);
    transition: color 0.22s ease; /* transizione colore al passaggio mouse */
}

.navbar-links a:hover {
    color: #ffffff;
}


/* =============================================================================
   4. HERO — intestazione principale
   Riproduce il fronte del biglietto da visita:
   sfondo blu scuro, nome in Cinzel, titolo in Great Vibes.
   La foto dello studio è posizionata sotto il testo, a piena larghezza.
   ============================================================================= */

.hero {
    background-color: var(--navy);
}

/* Area testo del hero: centrata, con padding generoso */
.hero-text {
    padding: 72px var(--section-padding-h) 52px;
    text-align: center;
}

/* "DOTT.SSA MICHELA LORENZINI"
   clamp() adatta la dimensione del font alla larghezza dello schermo:
   min 1.4rem su mobile, ideale 4vw, max 2.7rem su desktop */
.hero-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 4vw, 2.7rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 14px;
}

/* "Psicologa" — corsivo calligrafico, più grande del nome per bilanciare il peso visivo */
.hero-title {
    font-family: var(--font-script);
    font-size: clamp(2.2rem, 6.5vw, 4rem);
    color: var(--beige);
    margin-bottom: 22px;
    line-height: 1.2;
}

/* Sottotitolo con i servizi principali — testo opaco per non competere col nome */
.hero-subtitle {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(0.88rem, 2.2vw, 1.05rem);
    letter-spacing: 0.05em;
    color: rgba(237, 230, 219, 0.70);
}

/* Contenitore della foto: larghezza cappata su desktop per evitare sgranatura.
   Il navy del hero rimane visibile ai lati, incorniciando la foto.
   margin: 0 auto → centrato; margin-bottom → spazio prima della sezione beige. */
.hero-photo-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
}

/* Citazione sovrapposta alla foto, angolo in basso a destra */
.hero-quote {
    position: absolute;
    bottom: 28px;
    right: 32px;
    max-width: 560px;
    text-align: right;
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(0.94rem, 2vw, 1.2rem);
    line-height: 1.7;
    color: rgba(237, 230, 219, 0.88);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
    margin: 0;
    padding: 0;
}

.hero-quote-name {
    font-style: italic;
    font-size: 1.8em;
    white-space: nowrap;
    color: var(--text-light);
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}

.hero-quote cite {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(200, 180, 154, 0.85);
}

/* La foto riempie il contenitore mantenendo le proporzioni (object-fit: cover) */
.hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 74%; /* mostra la parte centrale-bassa (le poltrone) */
    opacity: 0.45; /* leggera trasparenza per ammorbidire l'immagine */
}


/* =============================================================================
   5. LAYOUT COMUNE — sezioni e container
   ============================================================================= */

/* Offset scroll per compensare la navbar sticky su tutte le ancore */
#home,
#chi-sono,
#servizi,
#contatti {
    scroll-margin-top: 68px;
}

/* Classe base per tutte le sezioni di contenuto */
.section {
    padding: var(--section-padding-v) var(--section-padding-h);
}

/* Varianti di sfondo per le sezioni */
.section--beige { background-color: var(--beige-light); }
.section--cream { background-color: var(--cream); }
.section--navy  { background-color: var(--navy); }

/* Contenitore centrato con larghezza massima — usato dentro ogni sezione */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
}

/* Titolo di sezione: Cinzel maiuscolo, leggero, ampio lettering */
.section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.2rem, 3vw, 1.85rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--navy);
    margin-bottom: 14px;
}

/* Versione chiara del titolo di sezione (usata sulla sezione navy dei contatti) */
.section-title--light {
    color: var(--text-light);
}

/* Linea decorativa orizzontale sotto ogni titolo di sezione.
   Richiama il trattino divisore del retro del biglietto da visita. */
.section-divider {
    width: 52px;
    height: 1px;
    background-color: var(--divider-dark);
    margin: 0 auto 48px;
}

/* Versione chiara del divisore (su sfondo navy) */
.section-divider--light {
    background-color: var(--divider-light);
}


/* =============================================================================
   6. SEZIONE CHI SONO — intro e timeline formazione
   ============================================================================= */

/* Paragrafo introduttivo: corsivo, centrato, ton caldo */
.section-intro {
    font-size: 1.08rem;
    font-style: italic;
    line-height: 1.9;
    color: var(--text-dark);
    text-align: center;
    max-width: 800px;
    margin: 0 auto 56px;
}

/* Riga titolo + bottone toggle: griglia 3 colonne per centrare il titolo */
.section-title-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 14px;
}

.section-title-row .section-title {
    grid-column: 2;
    margin-bottom: 0;
}

.section-title-row .bio-toggle {
    grid-column: 3;
    justify-self: start;
    margin-left: 10px;
}

/* Titolo cliccabile */
.section-title-row .section-title {
    cursor: pointer;
}

/* Bottone chevron per aprire/chiudere la bio */
.bio-toggle {
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.bio-toggle::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border-right: 2px solid var(--beige);
    border-bottom: 2px solid var(--beige);
    transform: rotate(45deg);
    margin-top: -6px;
    transition: transform 0.3s ease, border-color 0.22s ease, margin-top 0.3s ease;
}

.bio-toggle:hover::after {
    border-color: var(--navy);
}

.bio-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg);
    margin-top: 6px;
}

/* Sezione Chi Sono: padding ridotto quando chiusa */
#chi-sono {
    padding-top: 48px;
    padding-bottom: 48px;
    transition: padding-top 0.45s ease, padding-bottom 0.45s ease;
}

#chi-sono.bio-open {
    padding-top: var(--section-padding-v);
    padding-bottom: var(--section-padding-v);
}

#chi-sono .section-divider {
    margin-bottom: 0;
    transition: margin-bottom 0.45s ease;
}

#chi-sono.bio-open .section-divider {
    margin-bottom: 48px;
}

/* Contenuto servizi — nascosto di default, visibile con .is-open */
.servizi-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.35s ease;
}

.servizi-content.is-open {
    max-height: 2000px;
    opacity: 1;
}

/* Sezione Servizi: padding ridotto quando chiusa */
#servizi {
    padding-top: 48px;
    padding-bottom: 48px;
    transition: padding-top 0.45s ease, padding-bottom 0.45s ease;
}

#servizi.servizi-open {
    padding-top: var(--section-padding-v);
    padding-bottom: var(--section-padding-v);
}

#servizi .section-divider {
    margin-bottom: 0;
    transition: margin-bottom 0.45s ease;
}

#servizi.servizi-open .section-divider {
    margin-bottom: 48px;
}

/* Blocco biografico — nascosto di default, visibile con .is-open */
.bio {
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.35s ease;
}

.bio.is-open {
    max-height: 2000px;
    opacity: 1;
}

.bio p {
    font-size: 1.3rem;
    line-height: 1.9;
    color: var(--text-dark);
    text-align: justify;
    margin-bottom: 1.6em;
}

.bio p:last-child {
    margin-bottom: 0;
}

/* Sottotitolo "Formazione" — più piccolo e leggero rispetto al titolo di sezione */
.subsection-title {
    font-family: var(--font-display);
    font-size: 0.76rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 36px;
}

/* --- Timeline --- */

/* Contenitore della timeline: padding sinistro per la linea verticale */
.timeline {
    position: relative;
    padding-left: 80px; /* spazio per l'anno e la linea */
    max-width: 680px;
    margin: 0 auto;
}

/* Linea verticale continua che unisce tutti i pallini della timeline */
.timeline::before {
    content: '';
    position: absolute;
    left: 52px;   /* allineata col centro dei pallini */
    top: 10px;
    bottom: 10px;
    width: 1px;
    background-color: var(--beige);
}

/* Singola voce della timeline */
.timeline-item {
    position: relative;
    margin-bottom: 32px;
    display: flex;
    align-items: flex-start;
}

/* Anno / segnaposto a sinistra della linea
   Sostituire "···" con l'anno effettivo (es. "2018") nell'HTML */
.timeline-year {
    position: absolute;
    left: -80px;
    top: 4px;
    width: 44px;
    text-align: right;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--beige);
    white-space: nowrap;
}

/* Pallino decorativo posizionato sopra la linea verticale */
.timeline-dot {
    position: absolute;
    left: -32px;    /* si sovrappone alla linea verticale */
    top: 8px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--navy);
    border: 2px solid var(--beige);
    flex-shrink: 0;
}

/* Testo della voce di timeline */
.timeline-content p {
    font-size: 1rem;
    line-height: 1.72;
    color: var(--text-dark);
}

/* Parti in corsivo (nome del corso, istituzione) — colore leggermente diverso */
.timeline-content em {
    font-style: italic;
    color: var(--text-muted);
}


/* =============================================================================
   7. SEZIONE DI COSA MI OCCUPO — tre card servizi
   ============================================================================= */

/* Griglia a tre colonne su desktop; si riduce a una colonna su mobile (media query) */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Singola card */
.card {
    background-color: #ffffff;
    border: 1px solid var(--card-border);
    padding: 40px 28px;
    text-align: center;
    /* Transizione per l'effetto hover: ombra + leggero sollevamento */
    transition: box-shadow 0.28s ease, transform 0.28s ease;
}

/* Effetto hover: la card si solleva leggermente e acquista ombra */
.card:hover {
    box-shadow: 0 10px 32px var(--card-shadow);
    transform: translateY(-4px);
}

/* Simbolo decorativo sopra il titolo della card */
.card-icon {
    display: block;
    font-size: 1.3rem;
    color: var(--beige);
    margin-bottom: 18px;
}

/* Titolo della card: Cinzel piccolo maiuscolo */
.card-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 16px;
}

/* Testo descrittivo della card */
.card-text {
    font-size: 1.1rem;
    line-height: 1.78;
    color: var(--text-muted);
}


/* =============================================================================
   8. SEZIONE CONTATTI — footer
   ============================================================================= */

/* Riga principale: contatti a sinistra, mappe a destra */
.contacts-row {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 48px;
}

/* Blocco contatti: colonna flex centrata come blocco, item allineati a sinistra */
.contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin: 0;
    gap: 15px;
}

/* Colonna delle due mappe */
.maps-column {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

/* Singolo blocco mappa: label + iframe */
.map-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-icon {
    width: 0.8em;
    height: 0.8em;
    vertical-align: middle;
    margin-bottom: 0.1em;
}

.map-label {
    font-family: var(--font-display);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--beige);
}

.map-frame {
    width: 400px;
    height: 209px;
    border: 3px solid var(--beige);
    border-radius: 15px;
    opacity: 0.7;
}

/* Singola riga: label + valore */
.contact-item {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

/* Etichetta ("Telefono", "E-mail", ecc.) */
.contact-label {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--beige);
    min-width: 130px;
    text-align: left;
    flex-shrink: 0;
}

/* Valore del contatto */
.contact-value {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--text-light);
}

/* Link cliccabili (telefono, email): sottolineatura sottile + transizione */
a.contact-value {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(237,230,219,0.35);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a.contact-value:hover {
    color: var(--beige);
    text-decoration-color: var(--beige);
}

#contatti .section-divider {
    margin-bottom: 20px;
}

/* "Riceve su appuntamento" — font script come il titolo hero */
.footer-note {
    font-family: var(--font-body);
    font-style: italic;
    
    font-size: 2.25rem;
    color: var(--beige);
    text-align: center;
    margin-bottom: 28px;
}

/* Riga copyright in fondo */
.footer-copy {
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(237,230,219,0.3);
    text-align: center;
}


/* =============================================================================
   9. RESPONSIVE — adattamento a schermi piccoli
   Breakpoint a 700px: copre la maggior parte degli smartphone moderni.
   ============================================================================= */

/* Hamburger nascosto su desktop */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    color: var(--beige);
}

.hamburger svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.hamburger.is-open svg {
    transform: rotate(180deg);
}

/* Sotto 400px la foto occupa tutta la larghezza (niente margini laterali) */
@media (max-width: 400px) {
    .hero-photo-wrapper {
        width: 100%;
        border-radius: 0;
    }
}

@media (max-width: 830px) {

    /* Offset scroll ridotto: navbar mobile più bassa */
    #home,
    #chi-sono,
    #servizi,
    #contatti {
        scroll-margin-top: 62px;
    }

    /* Navbar mobile: brand a sinistra, hamburger fisso a destra */
    .navbar {
        flex-wrap: nowrap;
        align-items: center;
        padding: 12px 56px 12px 20px;
        gap: 0;
    }

    .navbar-brand {
        font-size: 0.8rem;
    }

    .navbar-links {
        display: none;
    }

    .hamburger {
        display: flex;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .hamburger svg {
        stroke: #c8b49a;
    }

    .hero-photo-wrapper {
        width: 100%;
        height: 260px;
    }

    .hero-quote {
        font-size: 0.9rem;
        max-width: 230px;
        bottom: 16px;
        right: 16px;
    }

    .hero-quote-name {
        font-size: 1.2em;
        white-space: normal;
    }

    .hero-quote cite {
        font-size: 0.62rem;
    }

    /* Sezioni: padding verticale ridotto su mobile */
    .section {
        padding: 60px var(--section-padding-h);
    }

    /* La timeline perde gli anni a sinistra (non c'è spazio) */
    .timeline {
        padding-left: 28px;
    }

    .timeline::before {
        left: 4px;
    }

    .timeline-dot {
        left: -24px;
    }

    /* Gli anni vengono nascosti su mobile per semplicità */
    .timeline-year {
        display: none;
    }

    /* Le card passano da griglia 3 colonne a colonna singola */
    .cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contacts-row {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 48px;
    }

    .contacts {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: baseline;
        width: 100%;
        gap: 5px 16px;
    }

    .contact-item {
        display: contents;
    }

    .contact-label {
        min-width: unset;
        text-align: left;
        flex-shrink: unset;
    }

    .contact-value {
        line-height: 1.3;
    }

    .maps-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .map-block {
        width: 100%;
    }

    .map-frame {
        width: 100%;
    }

    .footer-note {
        font-size: 1.3rem;
    }

    .hero-quote-dash {
        display: none;
    }

    .cookie-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 20px;
        gap: 14px;
    }

    .cookie-text {
        font-size: 0.88rem;
    }

    .cookie-actions {
        width: 100%;
        justify-content: flex-end;
    }

}


/* =============================================================================
   HAMBURGER + SIDEBAR MOBILE
   ============================================================================= */

/* Overlay scuro dietro la sidebar */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 200;
}

.sidebar-overlay.is-open {
    display: block;
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    right: -260px;
    width: 240px;
    height: 100%;
    background-color: var(--navy);
    border-left: 1px solid rgba(200, 180, 154, 0.2);
    z-index: 201;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    padding-top: 10px;
}

.sidebar.is-open {
    right: 0;
}

.sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 28px;
    text-align: center;
}

.sidebar-links a {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--beige);
    transition: color 0.2s ease;
}

.sidebar-links a:hover {
    color: #ffffff;
}


/* =============================================================================
   COOKIE BANNER
   ============================================================================= */

.cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: var(--navy);
    border-top: 1px solid rgba(200, 180, 154, 0.3);
    padding: 18px 32px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.cookie-banner.is-visible {
    display: flex;
}

.cookie-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.5;
    flex: 1;
}

.cookie-text a {
    color: var(--beige);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.cookie-btn {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 8px 20px;
    border: 1px solid var(--beige);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cookie-btn--accept {
    background-color: var(--beige);
    color: var(--navy);
}

.cookie-btn--accept:hover {
    background-color: var(--beige-light);
    border-color: var(--beige-light);
}

.cookie-btn--decline {
    background-color: transparent;
    color: var(--beige);
}

.cookie-btn--decline:hover {
    background-color: rgba(200, 180, 154, 0.1);
}