/* ===============================================================
   eps-child / brand.css
   Design tokens, tipografia, header, logo, footer.
   Parent: Accelerate (ThemeGrill). Prefisso: eps.
   =============================================================== */

/* ---------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------- */
:root {
    /* Colori brand (dal logo EPC Solar Italia) */
    --eps-blue:        #1F4E79;
    --eps-blue-dark:   #163A5C;
    --eps-slate:       #2A323A;
    --eps-slate-deep:  #20262C;
    --eps-green:       #5E7B52;
    --eps-green-dark:  #4C6543;

    /* Neutri */
    --eps-text:        #232A30;
    --eps-text-soft:   #5A6066;
    --eps-bg:          #F7F9FA;
    --eps-stone:       #EEF2F5;
    --eps-white:       #FFFFFF;
    --eps-line:        rgba(42,50,58,0.12);
    --eps-line-soft:   rgba(42,50,58,0.07);

    /* Stati form */
    --eps-success:     #2E7D5B;
    --eps-error:       #C2272D;

    /* Accenti semantici */
    --eps-accent:      var(--eps-blue);
    --eps-accent-2:    var(--eps-green);

    /* Tipografia */
    --eps-font-head: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --eps-font-body: "Inter", system-ui, -apple-system, sans-serif;

    /* Layout */
    --eps-container: 1240px;
    --eps-pad: clamp(1rem, 4vw, 2rem);
    --eps-gap: clamp(1.5rem, 3vw, 2.5rem);
    --eps-section-y: clamp(3.5rem, 7vw, 6rem);

    /* Forma */
    --eps-radius:    12px;
    --eps-radius-sm: 7px;
    --eps-radius-lg: 18px;

    /* Ombre */
    --eps-shadow-sm: 0 1px 2px rgba(32,38,44,0.06), 0 2px 8px rgba(32,38,44,0.05);
    --eps-shadow:    0 4px 14px rgba(32,38,44,0.08), 0 2px 4px rgba(32,38,44,0.05);
    --eps-shadow-lg: 0 18px 50px rgba(22,58,92,0.16);

    /* Transizioni */
    --eps-t: 0.2s ease;
}

/* ---------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------- */
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }

body {
    font-family: var(--eps-font-body);
    color: var(--eps-text);
    background: var(--eps-bg);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.entry-content a { color: var(--eps-blue); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--eps-blue-dark); }

img { max-width: 100%; height: auto; }

::selection { background: rgba(31,78,121,0.16); }

/* ---------------------------------------------------------------
   3. TIPOGRAFIA — scala fluida
   --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
    font-family: var(--eps-font-head);
    color: var(--eps-slate);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 0 0 0.6em;
}

h1, .entry-content h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); letter-spacing: -0.02em; }
h2, .entry-content h2 { font-size: clamp(1.7rem, 3.4vw, 2.45rem); }
h3, .entry-content h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); }
h4, .entry-content h4 { font-size: 1.18rem; }

p { margin: 0 0 1.15rem; }
.entry-content p { font-weight: 400; }
.entry-content p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--eps-slate); }

.eps-lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--eps-text); font-weight: 400; }

/* Eyebrow / occhiello */
.eps-eyebrow {
    display: inline-block;
    font-family: var(--eps-font-head);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--eps-blue);
    margin: 0 0 0.8rem;
}
.eps-section.--ink .eps-eyebrow,
.eps-section.--slate .eps-eyebrow { color: var(--eps-green); }

/* ---------------------------------------------------------------
   4. MOTIVO "A RAMI" (eco del logo) — divider riusabile
   --------------------------------------------------------------- */
.eps-branch {
    display: flex; flex-direction: column; gap: 5px;
    width: 46px; margin: 0 0 1.4rem;
}
.eps-branch span { height: 3px; border-radius: 3px; display: block; }
.eps-branch span:nth-child(1) { width: 100%; background: var(--eps-blue); }
.eps-branch span:nth-child(2) { width: 72%;  background: var(--eps-slate); }
.eps-branch span:nth-child(3) { width: 44%;  background: var(--eps-green); }
.eps-section.--ink .eps-branch span:nth-child(2),
.eps-section.--slate .eps-branch span:nth-child(2) { background: #9AA6B0; }

/* ---------------------------------------------------------------
   5. HEADER / LOGO / NAV (parent Accelerate)
   --------------------------------------------------------------- */
#masthead.site-header {
    background: var(--eps-white);
    border-bottom: 1px solid var(--eps-line);
    box-shadow: var(--eps-shadow-sm);
}
#masthead .site-logo img,
#masthead .custom-logo { max-height: 56px; width: auto; }

#site-navigation .menu li a,
.main-navigation a {
    font-family: var(--eps-font-head);
    font-weight: 500;
    font-size: 0.97rem;
    color: var(--eps-slate);
    letter-spacing: 0.01em;
    transition: color var(--eps-t);
}
#site-navigation .menu li a:hover,
.main-navigation a:hover,
.main-navigation .current-menu-item > a { color: var(--eps-blue); }

/* Sottolineatura attiva sottile */
.main-navigation .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--eps-green); }

/* ---------------------------------------------------------------
   6. FOOTER (#colophon)
   --------------------------------------------------------------- */
#colophon.site-footer {
    background: var(--eps-slate-deep);
    color: #B7C0C8;
    font-size: 0.95rem;
}
#colophon a { color: #D6DCE2; text-decoration: none; }
#colophon a:hover { color: var(--eps-white); }
#colophon .widget-title,
#colophon h3 { color: var(--eps-white); font-family: var(--eps-font-head); font-size: 1.05rem; }
#colophon .footer-socket-wrapper,
#colophon .site-info {
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
    color: #8A949C;
}