/* ============================================================
   HOTEL LIBERTY — SANREMO
   landing.css — unico file di stile della landing
   Palette dall'identita' grafica (logo + illustrazione villa):
     verde petrolio  #1E4B3E   (testi, titoli)
     oro             #A8843C   (dettagli, bordi)
     avorio          #F5F0E6   (sfondo pagina)
     inchiostro      #22302B   (testo corpo)
   Mobile-first: gli stili base valgono per smartphone,
   poi un solo @media allarga per schermi grandi.
   ============================================================ */

/* ---- @font-face: registriamo i font variabili (woff2, auto-ospitati) ----
   font-display: swap = il testo si mostra subito con un font di sistema
   mentre il nostro finisce di caricare. Nessun testo invisibile. */
@font-face {
    font-family: 'Cinzel';
    src: url('../assets/fonts/cinzel-var.woff2') format('woff2-variations');
    font-weight: 400 900;      /* intervallo dell'asse wght del font variabile */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../assets/fonts/cormorant-var.woff2') format('woff2-variations');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* ---- Variabili CSS: un punto solo dove toccare i colori ---- */
:root {
    --verde:   #1E4B3E;
    --oro:     #A8843C;
    --avorio:  #F5F0E6;
    --carta:   #FDFBF6;
    --inchiostro: #22302B;
}

/* ---- Reset minimo: niente margini a sorpresa, misure prevedibili ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--avorio);
    color: var(--inchiostro);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25rem;          /* il Cormorant ha x-height piccola: serve grande */
    line-height: 1.6;
}

/* ---- Link: mai sottolineati di default; la sottolineatura appare in :hover ---- */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Testata: logo centrato, sfondo chiaro tipo carta ---- */
.site-header {
    background: var(--carta);
    border-bottom: 1px solid var(--oro);
    padding: 1.2rem 1rem;
    text-align: center;
}
.logo { max-width: 220px; width: 60%; height: auto; }

/* ---- Hero: illustrazione grande + nome + bottone telefono ---- */
.hero {
    text-align: center;
    padding: 2.5rem 1rem 3rem;
}

.hero-img {
    max-width: 420px;            /* da smartphone l'illustrazione non invade */
    width: 85%;
    height: auto;
    display: block;
    margin: 0 auto 1.5rem;
}

.hero-titolo img {
    width: min(90%, 560px);
    height: auto; display: block;
    margin: 0 auto;
}

.tagline {
    font-style: italic;
    font-size: 1.35rem;
    color: var(--verde);
    margin: .4rem 0 1.8rem;
}

/* bottone telefono: LA call to action della pagina */
.cta-telefono {
    display: inline-block;
    background: var(--verde);
    color: var(--carta);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.15rem;
    padding: .9rem 2rem;
    border-radius: 3px;
    border: 2px solid var(--verde);
}
.cta-telefono:hover { background: transparent; color: var(--verde); }

/* bottone "Prenota ora": rimanda al motore RoomCloud — stesso peso del telefono, oro per distinguerlo */
.cta-prenota {
    display: inline-block;
    background: transparent;
    color: var(--verde);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.15rem;
    padding: .9rem 2rem;
    border-radius: 3px;
    border: 2px solid var(--oro);
    margin-top: .8rem;
}
.cta-prenota:hover { background: var(--oro); color: var(--carta); }


/* ---- Sezioni: colonna unica, larghezza di lettura comoda ---- */
.sezione {
    max-width: 680px;
    margin: 0 auto;
    padding: 2.2rem 1.2rem;
}
h2 {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--verde);
    margin-bottom: 1rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--oro);
}
.sezione p + p { margin-top: .8rem; }   /* solo tra paragrafi consecutivi */
.sezione p + h2 { margin-top: 1.8rem; }

/* elenco camere: numeri grandi e oro */
.elenco-camere {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 2 colonne anche su mobile */
    gap: .5rem 1.2rem;
    margin: 1rem 0;
}
.elenco-camere strong {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    color: var(--oro);
    margin-right: .3rem;
}
.nota { font-style: italic; font-size: 1.05rem; }

/* ---- Struttura: facciata a mezza colonna + info pratiche ---- */
.struttura .facciata {
    max-width: 340px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1.2rem;
    border: 1px solid var(--oro);
}
.info-pratiche {
    list-style: none;
    text-align: center;
}
.info-pratiche li { padding: .25rem 0; }

/* ---- Contatti ---- */
.contatti { text-align: center; }
address { font-style: normal; }
.contatti a { color: var(--verde); }
.telefono {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.8rem;
    text-decoration: none;
}
.contatti p + p { margin-top: .7rem; }

/* ---- Footer: legale + credito ---- */
.site-footer {
    background: var(--verde);
    color: var(--avorio);
    text-align: center;
    font-size: .95rem;
    padding: 1.6rem 1rem 2rem;
}
.site-footer p + p { margin-top: .35rem; }
.site-footer a { color: var(--avorio); }

.whatsapp {
    font-size: 1.8rem;
    font-weight: 600;
}

/* accesso admin: il simbolo © e' un link quasi invisibile, si rivela al passaggio */
.admin-link {
    color: inherit;
    cursor: text;
}

.admin-link:hover {
    color: var(--oro);
    cursor: pointer;
}

.logo-rws {
    height: 1.2rem; width: auto;
    vertical-align: middle;
}

/* ---- Schermi grandi: poco, e solo dove serve ---- */
@media (min-width: 700px) {
    .hero-img { max-width: 560px; }
    .struttura .facciata { max-width: 420px; }
}