/*
Theme Name: Lucciola Child
Theme URI: https://albergolucciola.com
Description: Child theme di Divi per Albergo Lucciola — Santo Stefano al Mare (IM). Implementa il sistema di design v1.1: palette "mediterraneo solare", tipografia a tre voci (Tenor Sans / Public Sans / Homemade Apple), regole identità (oro caldo) vs funzione (terracotta).
Author: Giovanni Nicosia
Author URI: https://giovanninicosia.com
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lucciola-child
*/

/* =========================================================================
   01 — DESIGN TOKENS (CSS custom properties)
   Riferimento: brief §1.1 (palette) e §1.2 (tipografia).
   ========================================================================= */
:root {
    /* --- Palette: ruoli --- */
    --luc-blu-mediterraneo: #1E5680;   /* brand voice: titoli, testo, wordmark */
    --luc-oro: #E8C56A;                /* identità: solo dove c'è il marchio */
    --luc-terracotta: #B85A3F;         /* funzione: CTA, link, "scopri →"   */
    --luc-terracotta-hover: #9C3D2E;

    /* --- Palette: sfondi e superfici --- */
    --luc-avorio: #FBF5E5;             /* sfondo body */
    --luc-sabbia: #F5E9CC;             /* card, riquadri */
    --luc-azzurro-neutro: #E5EDF5;     /* bande chiare alternate */
    --luc-blu-notte: #143E60;          /* footer, hover scuri */

    /* --- Palette: accenti e dettagli --- */
    --luc-verde-uliveto: #7E8F62;      /* badge, tag, dettagli territoriali */
    --luc-rosa-terracotta: #E8B89E;    /* kicker su fondo scuro */
    --luc-beige-divider: #E5D4A8;      /* bordi, divisori */

    /* --- Testo su fondi scuri --- */
    --luc-testo-scuro: var(--luc-blu-mediterraneo);
    --luc-testo-chiaro: var(--luc-avorio);
    --luc-testo-chiaro-soft: #DCEEF1;

    /* --- Tipografia: famiglie --- */
    --luc-font-display: "Tenor Sans", "Cormorant Garamond", Georgia, serif;
    --luc-font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --luc-font-script: "Homemade Apple", "Caveat", cursive;

    /* --- Tipografia: scale (desktop) --- */
    --luc-fs-hero: 72px;
    --luc-fs-h1: 56px;
    --luc-fs-h2: 40px;
    --luc-fs-h3: 28px;
    --luc-fs-h4: 22px;
    --luc-fs-body: 16px;
    --luc-fs-body-lg: 18px;
    --luc-fs-small: 13px;
    --luc-fs-micro: 11px;
    --luc-fs-script-min: 30px;  /* la calligrafia non scende mai sotto */

    /* --- Spaziature --- */
    --luc-space-xs: 8px;
    --luc-space-sm: 14px;
    --luc-space-md: 22px;
    --luc-space-lg: 36px;
    --luc-space-xl: 60px;
    --luc-space-xxl: 90px;

    /* --- Padding sezioni --- */
    --luc-section-py-desktop: 60px;
    --luc-section-py-mobile: 40px;
    --luc-section-px-desktop: 36px;
    --luc-section-px-mobile: 20px;

    /* --- Tracking (letter-spacing) --- */
    --luc-tracking-caps: 0.18em;   /* 2.5–3px su 14-16px = ~0.18em */
    --luc-tracking-cta: 0.025em;
    --luc-tracking-titoli: 0.005em;

    /* --- Line-heights --- */
    --luc-lh-display: 1.15;
    --luc-lh-titoli: 1.25;
    --luc-lh-body: 1.7;

    /* --- Border-radius --- */
    --luc-radius-sm: 4px;
    --luc-radius-md: 8px;
    --luc-radius-lg: 12px;

    /* --- Ombre --- */
    --luc-shadow-cartiglio: 0 8px 40px rgba(20, 62, 96, 0.18);

    /* --- Bordi --- */
    --luc-border-sottile: 0.5px solid var(--luc-beige-divider);
}

/* =========================================================================
   02 — FONT LOADING
   Strategia: in dev usiamo Google Fonts via <link> (vedi functions.php).
   In produzione (pre go-live) i .woff2 vanno self-hostati: rimettere i file
   in /assets/fonts/ e decommentare le @font-face qui sotto, rimuovendo il
   wp_enqueue_style del CSS di Google Fonts dal functions.php.
   ========================================================================= */
/*
@font-face {
    font-family: "Tenor Sans";
    src: url("assets/fonts/tenor-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Public Sans";
    src: url("assets/fonts/public-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Public Sans";
    src: url("assets/fonts/public-sans-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Public Sans";
    src: url("assets/fonts/public-sans-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Public Sans";
    src: url("assets/fonts/public-sans-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Homemade Apple";
    src: url("assets/fonts/homemade-apple-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
*/

/* =========================================================================
   03 — RESET / BASE
   Override leggeri su Divi: non riscriviamo Divi, ci innestiamo.
   ========================================================================= */
body,
body.et_pb_pagebuilder_layout {
    background-color: var(--luc-avorio);
    color: var(--luc-blu-mediterraneo);
    font-family: var(--luc-font-body);
    font-size: var(--luc-fs-body);
    line-height: var(--luc-lh-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================================================
   04 — TIPOGRAFIA
   ========================================================================= */
h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
    font-family: var(--luc-font-display);
    font-weight: 400;
    color: var(--luc-blu-mediterraneo);
    line-height: var(--luc-lh-titoli);
    letter-spacing: var(--luc-tracking-titoli);
}

h1, .et_pb_module h1 { font-size: var(--luc-fs-h1); line-height: var(--luc-lh-display); }
h2, .et_pb_module h2 { font-size: var(--luc-fs-h2); }
h3, .et_pb_module h3 { font-size: var(--luc-fs-h3); }
h4, .et_pb_module h4 { font-size: var(--luc-fs-h4); }

p {
    font-family: var(--luc-font-body);
    color: var(--luc-blu-mediterraneo);
    line-height: var(--luc-lh-body);
}

em, i, .luc-italic {
    font-family: var(--luc-font-body);
    font-style: italic;
    color: var(--luc-blu-mediterraneo);
}

a {
    color: var(--luc-terracotta);
    text-decoration: none;
    transition: opacity 0.2s ease, color 0.2s ease;
}
a:hover {
    color: var(--luc-terracotta-hover);
    opacity: 0.85;
}

/* =========================================================================
   05 — KICKER (etichette caps spaziate sopra i titoli)
   Riferimento brief §1.2.
   ========================================================================= */
.luc-kicker {
    font-family: var(--luc-font-body);
    font-weight: 500;
    font-size: var(--luc-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--luc-tracking-caps);
    color: var(--luc-terracotta);
    display: inline-block;
    margin-bottom: var(--luc-space-sm);
}

.luc-kicker--scuro {
    color: var(--luc-oro);   /* su sfondo scuro, mai terracotta */
}

.luc-kicker--verde {
    color: var(--luc-verde-uliveto);
}

/* =========================================================================
   06 — CALLIGRAFIA (Homemade Apple)
   Regola: solo sopra i 30px. Mai per body/footer/etichette.
   ========================================================================= */
.luc-script {
    font-family: var(--luc-font-script);
    font-weight: 400;
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1.2;
    color: var(--luc-blu-mediterraneo);
    display: inline-block;
    transform: rotate(-1deg);  /* dà il gesto manoscritto */
}

.luc-script--scuro {
    color: var(--luc-avorio);
}

.luc-script--oro {
    color: var(--luc-oro);
}

/* =========================================================================
   07 — CTA / PULSANTI
   ========================================================================= */
.luc-cta,
.luc-cta:visited,
.et_pb_button.luc-cta,
.et_pb_button.luc-cta:visited {
    display: inline-block;
    background-color: var(--luc-terracotta);
    color: var(--luc-avorio) !important;
    font-family: var(--luc-font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: var(--luc-tracking-cta);
    padding: 11px 22px;
    border-radius: var(--luc-radius-md);
    border: 0;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
    line-height: 1.2;
}
.luc-cta:hover,
.et_pb_button.luc-cta:hover {
    background-color: var(--luc-terracotta-hover);
    color: var(--luc-avorio) !important;
    transform: translateY(-1px);
}
.luc-cta:focus-visible {
    outline: 2px solid var(--luc-oro);
    outline-offset: 3px;
}

/* CTA secondario: link sottolineato */
.luc-link,
.luc-link:visited {
    display: inline-block;
    font-family: var(--luc-font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--luc-terracotta);
    border-bottom: 1px solid currentColor;
    padding: 9px 0;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.luc-link:hover { opacity: 0.7; }
.luc-link--scuro { color: var(--luc-oro); }
.luc-link--scuro:hover { color: var(--luc-rosa-terracotta); }

/* =========================================================================
   08 — CARD / BOX RIQUADRATI
   ========================================================================= */
.luc-card {
    background-color: var(--luc-sabbia);
    border: var(--luc-border-sottile);
    border-radius: var(--luc-radius-md);
    padding: var(--luc-space-lg);
}

.luc-card--avorio {
    background-color: var(--luc-avorio);
}

.luc-card--scuro {
    background-color: var(--luc-blu-mediterraneo);
    border: none;
    color: var(--luc-avorio);
}
.luc-card--scuro h1,
.luc-card--scuro h2,
.luc-card--scuro h3,
.luc-card--scuro p { color: var(--luc-avorio); }

/* Cartiglio centrale dell'hero (Home) */
.luc-cartiglio {
    background-color: var(--luc-avorio);
    border-radius: var(--luc-radius-lg);
    box-shadow: var(--luc-shadow-cartiglio);
    padding: var(--luc-space-xl) var(--luc-space-lg);
    text-align: center;
}

/* =========================================================================
   09 — SEZIONI E LAYOUT
   ========================================================================= */
.luc-section {
    padding-top: var(--luc-section-py-desktop);
    padding-bottom: var(--luc-section-py-desktop);
    padding-left: var(--luc-section-px-desktop);
    padding-right: var(--luc-section-px-desktop);
}

.luc-section--avorio { background-color: var(--luc-avorio); }
.luc-section--sabbia { background-color: var(--luc-sabbia); }
.luc-section--azzurro-neutro { background-color: var(--luc-azzurro-neutro); }

/* Sezioni scure: blu mediterraneo o blu notte */
.luc-section--scuro {
    background-color: var(--luc-blu-mediterraneo);
    color: var(--luc-avorio);
}
.luc-section--scuro h1,
.luc-section--scuro h2,
.luc-section--scuro h3,
.luc-section--scuro h4,
.luc-section--scuro p { color: var(--luc-avorio); }

.luc-section--notte {
    background-color: var(--luc-blu-notte);
    color: var(--luc-avorio);
}
.luc-section--notte h1,
.luc-section--notte h2,
.luc-section--notte h3,
.luc-section--notte h4,
.luc-section--notte p { color: var(--luc-avorio); }

/* =========================================================================
   10 — HEADER (Divi Theme Builder override)
   Riferimento brief §5.1.
   ========================================================================= */
#main-header,
.et_header_style_left #main-header,
.et_header_style_centered #main-header {
    background-color: var(--luc-avorio) !important;
    box-shadow: none;
    border-bottom: var(--luc-border-sottile);
    padding-top: 8px;
    padding-bottom: 8px;
}

#top-menu li a,
.et_header_style_left #top-menu li a {
    font-family: var(--luc-font-body) !important;
    font-size: 11px !important;
    font-weight: 400;
    color: var(--luc-blu-notte) !important;
    text-transform: none;
    letter-spacing: 0.02em;
    padding: 16px 14px;
}

#top-menu li.current-menu-item > a {
    color: var(--luc-terracotta) !important;
    font-weight: 500;
}

#top-menu li a:hover {
    color: var(--luc-terracotta) !important;
    opacity: 1;
}

/* Selettore lingua (Polylang) nell'header */
.lang-item a,
#top-menu .lang-item a {
    text-transform: uppercase !important;
    letter-spacing: var(--luc-tracking-caps);
    font-size: 10px !important;
    color: var(--luc-terracotta) !important;
    padding-left: 14px !important;
    border-left: var(--luc-border-sottile);
}

/* =========================================================================
   11 — FOOTER (Divi Theme Builder override)
   Riferimento brief §5.2.
   ========================================================================= */
#main-footer,
#footer-bottom {
    background-color: var(--luc-blu-notte) !important;
    color: var(--luc-testo-chiaro-soft);
    padding-top: 32px;
    padding-bottom: 32px;
    border-top: none;
}

#main-footer h1,
#main-footer h2,
#main-footer h3,
#main-footer h4,
#main-footer p,
#main-footer li,
#main-footer a {
    color: var(--luc-testo-chiaro-soft);
    font-family: var(--luc-font-body);
    font-size: 11px;
}

#main-footer a:hover,
#footer-bottom a:hover { color: var(--luc-oro); }

.luc-footer-tagline {
    text-transform: uppercase;
    letter-spacing: var(--luc-tracking-caps);
    color: var(--luc-oro);
    font-size: 10px;
}

/* =========================================================================
   12 — BLOCCO "TRE NUMERI" (Home — brief testi §HOME)
   ========================================================================= */
.luc-numeri {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--luc-space-xl);
    text-align: center;
    padding: var(--luc-space-xl) 0;
}
.luc-numeri__num {
    font-family: var(--luc-font-display);
    font-size: clamp(48px, 6vw, 80px);
    color: var(--luc-blu-mediterraneo);
    line-height: 1;
    margin-bottom: var(--luc-space-xs);
}
.luc-numeri__lbl {
    font-style: italic;
    color: var(--luc-blu-mediterraneo);
    font-size: var(--luc-fs-body);
}

/* =========================================================================
   13 — BULLET PRATICI (simbolo ↬ — testi §ESPERIENZE note)
   ========================================================================= */
.luc-bullet {
    list-style: none;
    padding-left: 0;
}
.luc-bullet li {
    position: relative;
    padding-left: 22px;
    margin-bottom: var(--luc-space-xs);
    font-style: italic;
    color: var(--luc-blu-mediterraneo);
}
.luc-bullet li::before {
    content: "↬";
    position: absolute;
    left: 0;
    color: var(--luc-verde-uliveto);
    font-style: normal;
}

/* =========================================================================
   14 — UTILITY
   ========================================================================= */
.luc-text-center { text-align: center; }
.luc-text-right { text-align: right; }
.luc-italic { font-style: italic; }

.luc-color-blu { color: var(--luc-blu-mediterraneo); }
.luc-color-oro { color: var(--luc-oro); }
.luc-color-terracotta { color: var(--luc-terracotta); }
.luc-color-verde { color: var(--luc-verde-uliveto); }
.luc-color-avorio { color: var(--luc-avorio); }

.luc-bg-avorio { background-color: var(--luc-avorio); }
.luc-bg-sabbia { background-color: var(--luc-sabbia); }
.luc-bg-azzurro { background-color: var(--luc-azzurro-neutro); }
.luc-bg-blu { background-color: var(--luc-blu-mediterraneo); }
.luc-bg-notte { background-color: var(--luc-blu-notte); }

/* =========================================================================
   15 — RESPONSIVE (mobile)
   ========================================================================= */
@media (max-width: 980px) {
    :root {
        --luc-fs-h1: 40px;
        --luc-fs-h2: 30px;
        --luc-fs-h3: 24px;
    }

    .luc-section {
        padding-top: var(--luc-section-py-mobile);
        padding-bottom: var(--luc-section-py-mobile);
        padding-left: var(--luc-section-px-mobile);
        padding-right: var(--luc-section-px-mobile);
    }

    .luc-numeri {
        grid-template-columns: 1fr;
        gap: var(--luc-space-lg);
    }

    .luc-cartiglio {
        padding: var(--luc-space-lg) var(--luc-space-md);
    }
}

/* =========================================================================
   16 — PRINT
   Pulizia stampe (per chi stampa la pagina contatti, indicazioni, ecc.)
   ========================================================================= */
@media print {
    body { background: #fff; color: #000; }
    .et_pb_section, .luc-section { padding: 16px 0; }
    a { color: #000; text-decoration: underline; }
    .luc-cta { background: transparent; color: #000 !important; border: 1px solid #000; }
}