/* ============================================================

   FONT — Carica il font calligrafico Edwardian

============================================================ */

@font-face {

    font-family: 'Edwardian';

    src: url('edwardian.woff2') format('woff2'),

         url('edwardian.woff') format('woff');

}



/* ============================================================

   COLORI DI BASE DEL SITO (palette champagne + verde)

============================================================ */

:root {

    --green: #2a3d26;         /* Verde scuro elegante per testo */

    --gold: #C4A676;          /* Oro tenue – accenti */

    --cream: #F3E6C6;         /* Sfondo champagnino principale */

    --cream-dark: #e8d8b4;    /* Sfondo più scuro per FAQ body */

}



/* ============================================================

   RESET GENERALE DI PAGINA

============================================================ */

html, body {

    margin: 0;

    padding: 0;

    background: var(--cream);               /* Sfondo generale champagne */

    font-family: "Cormorant Garamond", serif; /* Font testo principale */

    color: var(--green);                     /* Colore testo generale */

    overflow-x: hidden;                      /* Evita scroll laterale */

    font-style: italic;                      /* Stile elegante per il corpo */

}



a {

    color: inherit;                          /* I link ereditano il colore */

    text-decoration: none;                   /* Nessuna sottolineatura */

    border-bottom: 1px solid rgba(0,0,0,.25);/* Linea elegante sotto i link */

}



/* ============================================================

   HERO — La prima schermata con i nomi

============================================================ */

.hero {

    min-height: 100vh;                        /* Occupa tutta la pagina */

    background: url("pergamena-hero.jpg") center/cover no-repeat;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 120px 20px 80px;                 /* Spaziatura */

}



.hero-names {

    font-size: clamp(38px, 7vw, 72px);        /* Dimensione responsive */

    line-height: 1.3;

}



.hero-names .and {

    font-family: 'Edwardian';                /* Font “and” calligrafico */

    font-size: clamp(40px, 7vw, 66px);

    color: var(--gold);

}



/* ============================================================

   BOTTONE MENU

============================================================ */

.menu-btn {

    position: fixed;

    top: 22px;

    right: 24px;

    font-size: 22px;

    color: var(--gold);

    cursor: pointer;

    z-index: 9999;                           /* Sempre davanti */

}



/* ============================================================

   TOP BAR — Barra fissa quando si scrolla

============================================================ */

.top-bar {

    position: fixed;

    top: 0; left: 0; right: 0;

    background: rgba(243,230,198,0.95);

    padding: 18px 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;                               /* Invisibile finché non scrolla */

    pointer-events: none;

    transition: .3s;

    z-index: 9998;

}



/* Quando si scrolla, appare */

.top-bar.visible {

    opacity: 1;

    pointer-events: auto;

}



/* ============================================================

   FIX FONT TOP BAR (solo per DRISHTI KARUMBAYA and VIJAY TOKE)

============================================================ */

.top-bar-name {

    font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif'serif !important;  /* Applica il font giusto */

    font-size: 28px;                             /* Grandezza elegante */

    line-height: 1.2;

    letter-spacing: 4px;

    font-weight: normal;

    font-style: normal;

    color: var(--green);

    white-space: nowrap;                         /* Evita che vada su due righe */

}



/* VERSIONE MOBILE DELLA TOP BAR */

@media(max-width:900px){

    .top-bar-name {

        font-size: 13px;

        letter-spacing: 3px;

        white-space: normal !important;

        text-align: left !important;

        line-height: 1.1;

        margin-right: 15vw;   /* ← LIMITA SOLO LA PARTE DESTRA */

    }

}



/* ============================================================

   SIDE MENU — Menu a comparsa

============================================================ */

.side-menu {

    position: fixed;

    top: 0; left: 0;

    width: 100%;                               /* FIX overflow mobile */

    height: 100vh;

    background: var(--cream);

    display: flex;

    overflow-y: auto;                           /* Permette scroll verticale */

    overflow-x: hidden !important;              /* Evita sfasamenti a destra */

    transform: translateX(100%);                /* Nascosto fuori schermo */

    transition: transform .4s ease;

    z-index: 99999;

}



/* Quando attivo, entra */

.side-menu.active {

    transform: translateX(0);

}



/* Colonna sinistra con immagine */

.side-menu-left,

.side-menu-right {

    width: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

}



/* Immagine sinistra del menù */

.side-menu-left img {

    width: 75%;

    border-radius: 18px;

    box-shadow: 0 20px 50px rgba(0,0,0,.25);

}



/* Lista menu */

.side-menu-right ul {

    list-style: none;

    padding: 0;

}



/* Spaziatura menu */

.side-menu-right li {

    margin: 14px 0;

}



/* Stile link menu */

.side-menu-right a {

    font-size: 22px;

    font-style: italic;       /* Elegante */

}



/* Bottone chiusura */

.close-btn {

    position: absolute;

    top: 22px;

    right: 26px;

    font-size: 40px;

    cursor: pointer;

}



/* ============================================================

   SECTION WRAPPER — Margini tra sezioni

============================================================ */

.section-wrapper {

    text-align: center;

    padding: 20px 20px;         /* Spaziatura verticale tra le sezioni */

}



/* Titoli sezioni */

.section-title {

    font-family: 'Edwardian';

    font-size: clamp(62px, 9vw, 105px);

    margin-bottom: 40px;

    font-weight: normal;

}



/* ============================================================

   DUO BLOCK — Immagine + Testo alternati

============================================================ */

.duo-block {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 40px;

    margin-bottom: 80px;

}



/* Alternanza */

.duo-block.reverse {

    flex-direction: row-reverse;

}



/* Immagini */

.duo-image img {

    width: 100%;

    max-width: 450px;

    border-radius: 18px;

    box-shadow: 0 20px 45px rgba(0,0,0,.18);

}



.duo-text {

    max-width: 420px;

    text-align: center;

}



/* ============================================================

   MOBILE DUO BLOCK

============================================================ */

@media(max-width: 900px) {

    .duo-block {

        flex-direction: column !important;

        gap: 25px;

        margin-bottom: 60px;

    }

}



/* ============================================================

   FAQ — Titolo e contenuti (CENTRATI)

============================================================ */

.faq-header {

    background: url("pergamena-hero.jpg") center/cover no-repeat;

    padding: 150px 20px 110px;

    text-align: center;

}



.faq-title {

    font-family: 'Edwardian';

    font-size: clamp(80px, 11vw, 160px);

    letter-spacing: .5px;

    margin: 0 auto;

    max-width: 90%;

    line-height: 1.05;

}



/* Corpo FAQ */

.faq-body {

    background: var(--cream-dark);

    padding: 90px 20px 120px;

    text-align: center;            /* <-- CENTRA TUTTO */

}



/* Singolo blocco FAQ */

.faq-block {

    max-width: 700px;

    margin: 0 auto 55px;

}



/* Domanda FAQ */

.faq-block h3 {

    font-size: 28px;

    text-align: center;            /* <-- CENTRA LE DOMANDE */

}



/* Risposta FAQ */

.faq-block p {

    font-size: 19px;

    line-height: 1.65;

    text-align: center;            /* <-- CENTRA IL TESTO */

}



/* ============================================================

   ⚠️ MODIFICA RICHIESTA — ACTIVITIES: testo centrato + font +2pt

============================================================ */



/* Centro tutto il testo della sezione Activities */

#activities .duo-text {

    text-align: center;            /* <-- TESTO CENTRATO */

}



/* Ingrandisco i paragrafi solo in questa sezione */

#activities .duo-text p {

    font-size: 21px;               /* <-- AUMENTATO DI +2pt (da 19px a 21px) */

}



/* ============================================================

   FOOTER

============================================================ */

.site-footer {

    text-align: center;

    padding: 55px 20px;

}