/*
Theme Name:     Facile Energy
Theme URI:      https://facile.energy
Author:         Facile.Energy
Author URI:     https://facile.energy
Description:    Tema WordPress custom per Facile.Energy — luce e gas per casa e impresa. È così facile risparmiare. Conforme ARERA e GDPR. Solo Gutenberg + blocchi custom, nessun page builder.
Version:        1.2.8
Requires at least: 6.0
Tested up to:   6.5
Requires PHP:   7.4
License:        GPL v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    rete-energia-italia
Tags:           energy, utility, business, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   CSS VARIABLES — Palette facile.energy (verde petrolio + lime, replica live)
   I NOMI delle variabili restano quelli storici REI, i VALORI sono rimappati.
   ========================================================================== */
:root {
    /* Brand colors */
    --rei-green: #20A47B;
    --rei-green-dark: #157155;
    --rei-green-deep: #157155;
    --rei-green-light: #29D8A1;
    --rei-green-vlight: #E4F6F0;
    --rei-green-bg: #D2F0E6;

    /* La famiglia "red" è rimappata sul verde scuro: il sito facile.energy
       non usa rosso (gli accenti "gas" sono verdi). Il rosso resta solo
       per gli errori di validazione form, hardcoded #D63638 dove serve. */
    --rei-red: #157155;
    --rei-red-dark: #157155;
    --rei-red-light: #157155;
    --rei-red-vlight: #E4F6F0;
    --rei-red-bg: #D2F0E6;

    /* Accent lime/giallo */
    --rei-yellow: #D1E000;
    --rei-yellow-dark: #B5C400;
    --rei-yellow-light: #E4EE4D;

    /* "Navy" per pulsanti CTA principali → verde scuro */
    --rei-navy: #157155;
    --rei-navy-dark: #157155;

    /* Neutrals (bianco + grigio-verde leggerissimo) */
    --rei-cream: #FFFFFF;
    --rei-cream-dark: #F4F8F6;
    --rei-sand: #F4F8F6;
    --rei-offwhite: #FFFFFF;
    --rei-white: #FFFFFF;

    /* Inks */
    --rei-ink: #3C3C3B;
    --rei-ink-soft: #555555;
    --rei-gray-text: #6B6B6A;
    --rei-gray: #6E6E6E;
    --rei-gray-light: #B5B5B5;
    --rei-gray-vlight: #E5E5E5;

    /* Spacing scale */
    --rei-space-1: 4px;
    --rei-space-2: 8px;
    --rei-space-3: 12px;
    --rei-space-4: 16px;
    --rei-space-5: 24px;
    --rei-space-6: 32px;
    --rei-space-7: 48px;
    --rei-space-8: 64px;
    --rei-space-9: 80px;
    --rei-space-10: 120px;

    /* Border radius */
    --rei-radius-sm: 6px;
    --rei-radius-md: 10px;
    --rei-radius-lg: 14px;
    --rei-radius-xl: 20px;
    --rei-radius-2xl: 28px;
    --rei-radius-pill: 999px;

    /* Shadows */
    --rei-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --rei-shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --rei-shadow-lg: 0 8px 32px rgba(0,0,0,0.18);
    --rei-shadow-xl: 0 16px 48px rgba(0,0,0,0.25);

    /* Typography */
    --rei-font-family: 'Raleway', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rei-font-mono: 'Fira Code', 'Courier New', monospace;

    /* Type scale (desktop) */
    --rei-h1: clamp(2.5rem, 5vw, 4.75rem);
    --rei-h2: clamp(2.5rem, 5vw, 4.25rem);
    --rei-h3: clamp(1.5rem, 3vw, 2rem);
    --rei-h4: 1.25rem;
    --rei-body-lg: 1.125rem;
    --rei-body: 1rem;
    --rei-body-sm: 0.875rem;
    --rei-caption: 0.75rem;

    /* Container */
    --rei-container-max: 1440px;
    --rei-container-padding: 24px;
    --rei-section-padding-y: 80px;

    /* Transitions */
    --rei-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--rei-font-family);
    font-size: var(--rei-body);
    line-height: 1.5;
    color: var(--rei-gray-text);
    background: var(--rei-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rei-green-deep); text-decoration: none; transition: var(--rei-transition); }
a:hover { color: var(--rei-green-dark); }
button { font-family: inherit; cursor: pointer; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--rei-font-family);
    font-weight: 700;
    color: var(--rei-ink);
    margin: 0 0 var(--rei-space-4);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
h1 { font-size: var(--rei-h1); }
h2 { font-size: var(--rei-h2); }
h3 { font-size: var(--rei-h3); }
h4 { font-size: var(--rei-h4); }

p { margin: 0 0 var(--rei-space-4); }

/* Skip link (accessibility) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 999;
    padding: 12px 20px;
    background: var(--rei-ink);
    color: var(--rei-white);
    text-decoration: none;
    border-radius: var(--rei-radius-md);
}
.skip-link:focus { left: 8px; color: var(--rei-white); }

/* Focus state accessibile */
*:focus-visible {
    outline: 3px solid var(--rei-yellow);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ==========================================================================
   LAYOUT — Container & Section
   ========================================================================== */
.rei-container {
    max-width: var(--rei-container-max);
    margin: 0 auto;
    padding: 0 var(--rei-container-padding);
}
.rei-section {
    padding: var(--rei-section-padding-y) 0;
    position: relative;
    overflow: hidden; /* per contenere i glow agli angoli */
}

/* v2.2 — FIX "fascia bianca sopra l'hero": l'header è sticky (resta nel
   flusso), quindi il main NON deve avere padding-top e il primo blocco
   (hero immagine in home / fascia gradiente nelle pagine interne) parte
   a filo sotto l'header, full-bleed, con le pillole flottanti (position:
   fixed) in sovraimpressione. Gli !important neutralizzano padding/margini
   residui di vecchie versioni in cache o iniettati da plugin. */
.rei-main {
    padding-top: 0 !important;
}
.rei-main > :first-child,
.rei-main > article:first-child > :first-child {
    margin-top: 0 !important;
}
.rei-section--cream { background: var(--rei-cream); }
.rei-section--cream-dark { background: var(--rei-cream-dark); }
.rei-section--sand { background: var(--rei-sand); }
.rei-section--offwhite { background: var(--rei-offwhite); }
.rei-section--green-bg { background: var(--rei-green-bg); }
.rei-section--ink { background: var(--rei-ink); color: var(--rei-white); }

/* ==========================================================================
   v0.8.0: GLOW CIRCLES ANGOLARI SFUMATI
   Ogni sezione ha 2 cerchi colorati sfumati ai 2 angoli opposti
   per riempire visivamente i bordi vuoti.
   ========================================================================== */
.rei-section::before,
.rei-section::after {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    z-index: 0;
    filter: blur(60px);
    opacity: 0.55;
    pointer-events: none;
}

/* Hero — giallo + verde */
.rei-hero::before { background: var(--rei-yellow); top: -180px; right: -120px; }
.rei-hero::after { background: var(--rei-green-light); bottom: -180px; left: -120px; }

/* Servizi — giallo + verde */
.rei-services::before { background: var(--rei-yellow); top: -180px; right: -120px; }
.rei-services::after { background: var(--rei-green-light); bottom: -180px; left: -120px; }

/* Offerta luce (cream-dark) — verde + giallo */
.rei-offer--luce::before { background: var(--rei-green-light); top: -180px; left: -120px; }
.rei-offer--luce::after { background: var(--rei-yellow); bottom: -180px; right: -120px; }

/* Offerta gas (sand) — verde chiaro + lime */
.rei-offer--gas::before { background: #29D8A1; top: -180px; right: -120px; }
.rei-offer--gas::after { background: var(--rei-yellow); bottom: -180px; left: -120px; }

/* Chiamate (offwhite) — verde chiaro + verde */
.rei-chiamate::before { background: #29D8A1; top: -180px; left: -120px; }
.rei-chiamate::after { background: var(--rei-green-light); bottom: -180px; right: -120px; }

/* App (green-bg) — giallo + verde più scuro */
.rei-app-section::before { background: var(--rei-yellow); top: -180px; right: -120px; }
.rei-app-section::after { background: var(--rei-green); bottom: -180px; left: -120px; opacity: 0.35; }

/* Magazine (cream) — giallo + verde */
.rei-magazine-section::before { background: var(--rei-yellow-light); top: -180px; left: -120px; }
.rei-magazine-section::after { background: var(--rei-green-light); bottom: -180px; right: -120px; }

/* Tutto il contenuto sezione resta sopra ai glow */
.rei-section > .rei-container {
    position: relative;
    z-index: 1;
}

/* Su mobile glow più piccoli per non occupare schermo */
@media (max-width: 768px) {
    .rei-section::before,
    .rei-section::after {
        width: 220px;
        height: 220px;
        filter: blur(50px);
        opacity: 0.45;
    }
}

/* ==========================================================================
   BUTTONS — v0.5.0: pill arrotondata + navy come default primario
   ========================================================================== */
.rei-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rei-space-2);
    padding: 16px 36px;
    border-radius: var(--rei-radius-pill); /* pill arrotondata */
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.rei-btn:hover { transform: translateY(-2px); box-shadow: var(--rei-shadow-md); }
.rei-btn:active { transform: translateY(0); }
.rei-btn--lg { padding: 20px 40px; font-size: 1.0625rem; }
.rei-btn--sm { padding: 12px 24px; font-size: 0.875rem; }

/* Primary = NAVY scuro (default per CTA principali) */
.rei-btn--primary {
    background: var(--rei-navy);
    color: var(--rei-white);
}
.rei-btn--primary:hover {
    background: var(--rei-navy-dark);
    color: var(--rei-white);
}

/* Secondary = rosso */
.rei-btn--secondary { background: var(--rei-red); color: var(--rei-white); }
.rei-btn--secondary:hover { background: var(--rei-red-dark); color: var(--rei-white); }

/* Accent = giallo (Attiva ora, Scarica l'app) */
.rei-btn--accent { background: var(--rei-yellow); color: var(--rei-ink); }
.rei-btn--accent:hover { background: var(--rei-yellow-dark); color: var(--rei-ink); }

/* Ink = nero */
.rei-btn--ink { background: var(--rei-ink); color: var(--rei-white); }
.rei-btn--ink:hover { background: var(--rei-ink-soft); color: var(--rei-white); }

/* Green = verde (per "Voglio attivarla" luce) */
.rei-btn--green { background: var(--rei-green); color: var(--rei-white); }
.rei-btn--green:hover { background: var(--rei-green-dark); color: var(--rei-white); }

/* Outline navy (default) */
.rei-btn--outline {
    background: transparent;
    border-color: var(--rei-navy);
    color: var(--rei-navy);
}
.rei-btn--outline:hover { background: var(--rei-navy); color: var(--rei-white); }

.rei-btn--outline-green {
    background: transparent;
    border-color: var(--rei-green);
    color: var(--rei-green-deep);
}
.rei-btn--outline-green:hover { background: var(--rei-green); color: var(--rei-white); }

/* Full width on mobile */
.rei-btn--full { width: 100%; }

/* ==========================================================================
   v1.91.0 — Pulse su TUTTI i pulsanti del sito (come eSIM/Community).
   Anello che si espande e svanisce; colore per variante via --btn-ring.
   ========================================================================== */
@keyframes rei-btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--btn-ring, rgba(21, 113, 85, 0.45)); }
    50%      { box-shadow: 0 0 0 11px rgba(0, 0, 0, 0); }
}
.rei-btn { animation: rei-btn-pulse 2.1s ease-in-out infinite; }
.rei-btn--primary, .rei-btn--outline { --btn-ring: rgba(21, 113, 85, 0.45); }
.rei-btn--secondary { --btn-ring: rgba(21, 113, 85, 0.45); }
.rei-btn--accent { --btn-ring: rgba(209, 224, 0, 0.60); }
.rei-btn--ink { --btn-ring: rgba(60, 60, 59, 0.45); }
.rei-btn--green, .rei-btn--outline-green { --btn-ring: rgba(32, 164, 123, 0.50); }
@media (prefers-reduced-motion: reduce) {
    .rei-btn { animation: none; }
}

/* ==========================================================================
   HIGHLIGHT PILL — Pillola evidenziatore stile Lene
   ========================================================================== */
.rei-pill {
    display: inline-block;
    padding: 4px 18px;
    border-radius: var(--rei-radius-lg);
    line-height: 1.15;
}
.rei-pill--yellow { background: var(--rei-yellow); color: var(--rei-ink); }
.rei-pill--green { background: var(--rei-green); color: var(--rei-white); }
.rei-pill--red { background: var(--rei-red); color: var(--rei-white); }
.rei-pill--ink { background: var(--rei-ink); color: var(--rei-yellow); }

/* ==========================================================================
   UNDERLINE HIGHLIGHTER — v0.5.0
   Sottolineato che si "accende" al scroll quando la sezione entra nel viewport.
   A riposo: fondo grigio chiaro neutro
   Attivo: fondo colorato che si "dipinge" da sinistra a destra
   ========================================================================== */
.rei-underline {
    /* v0.10.0: tecnica background-image che funziona su testo multi-line */
    display: inline;
    background-image:
        linear-gradient(var(--rei-underline-color-active, var(--rei-green-light)), var(--rei-underline-color-active, var(--rei-green-light))),
        linear-gradient(rgba(150, 150, 150, 0.22), rgba(150, 150, 150, 0.22));
    background-size: 0% 38%, 100% 38%;
    background-position: 0% 100%, 0% 100%;
    background-repeat: no-repeat, no-repeat;
    /* Clone background su ogni riga quando il testo va a capo */
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
    padding: 0 4px;
    transition: background-size 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Stato "acceso" — IntersectionObserver in main.js */
.rei-underline.is-visible {
    background-size: 100% 38%, 100% 38%;
}

/* Varianti colore */
.rei-underline--green  { --rei-underline-color-active: var(--rei-green-light); }
.rei-underline--yellow { --rei-underline-color-active: var(--rei-yellow-light); }
.rei-underline--red    { --rei-underline-color-active: #29D8A1; }

/* Title underline (versione grande per H2 servizi)
   Anche qui background-image per supporto multi-line */
.rei-services-h2-underline {
    display: inline;
    background-image:
        linear-gradient(var(--rei-yellow-light), var(--rei-yellow-light)),
        linear-gradient(rgba(150, 150, 150, 0.22), rgba(150, 150, 150, 0.22));
    background-size: 0% 50%, 100% 50%;
    background-position: 0% 92%, 0% 92%;
    background-repeat: no-repeat, no-repeat;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
    padding: 0 10px 0 6px;
    transition: background-size 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.rei-services-h2-underline.is-visible {
    background-size: 100% 50%, 100% 50%;
}

/* Riduce animazione su prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .rei-underline,
    .rei-services-h2-underline {
        transition: none;
        background-size: 100% 38%, 100% 38%;
    }
    .rei-services-h2-underline {
        background-size: 100% 50%, 100% 50%;
    }
}

/* ==========================================================================
   ICONS / DECORATIVE
   ========================================================================== */
.rei-eyebrow {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rei-green-deep);
    margin-bottom: var(--rei-space-4);
}
.rei-eyebrow--red { color: var(--rei-red-dark); }
.rei-eyebrow--yellow { color: var(--rei-yellow-dark); }

/* v0.6.0: eyebrow grande per il "Benvenuto in Facile.Energy" del hero */
.rei-eyebrow--big {
    font-size: 1.625rem;
    line-height: 1.35;
    letter-spacing: 0.04em;
    margin-bottom: var(--rei-space-6);
}
@media (max-width: 768px) {
    .rei-eyebrow--big { font-size: 1.25rem; }
}

/* Stars decorative */
.rei-star {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--rei-yellow);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    pointer-events: none;
}
.rei-star--green { background: var(--rei-green); }
.rei-star--red { background: var(--rei-red-light); }
.rei-star--lg { width: 24px; height: 24px; }

/* Squiggle decorative */
.rei-squiggle { display: inline-block; color: var(--rei-red); }

/* ==========================================================================
   CARD generic
   ========================================================================== */
.rei-card {
    background: var(--rei-white);
    border-radius: var(--rei-radius-xl);
    padding: var(--rei-space-6);
    box-shadow: var(--rei-shadow-md);
    transition: var(--rei-transition);
}
.rei-card:hover { transform: translateY(-4px); box-shadow: var(--rei-shadow-lg); }

/* ==========================================================================
   ACCESSIBILITY HELPERS
   ========================================================================== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: var(--rei-yellow);
    clip: auto !important;
    clip-path: none;
    color: var(--rei-ink);
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ==========================================================================
   RESPONSIVE — Mobile first override
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --rei-section-padding-y: 28px; /* v0.15.2: era 36px → ridotto per compattare distanze tra foto e sezione successiva */
        --rei-container-padding: 16px;
    }
    .rei-btn { width: 100%; padding: 16px 24px; }
    .rei-btn--lg { padding: 18px 24px; }
}

/* Stylesheet modules will be loaded separately:
   - header.css
   - footer.css
   - home.css (front-page)
   - blocks.css (custom Gutenberg blocks)
*/