/* ============================================================
   BRAND.CSS — Pronto Intervento Eugenio (pin)
   Token + base + header + footer + sticky CTA
   ============================================================ */

:root {
  /* Neutri */
  --color-bg:           #F5F8FA;
  --color-surface:      #FFFFFF;
  --color-stone-light:  #E6EDF1;
  --color-ink:          #13181C;
  --color-ink-soft:     #48555C;
  /* Brand */
  --color-primary:      #0F4C5C;
  --color-primary-dark: #0A323C;
  /* Accent / CTA (testo scuro su accent, mai bianco) */
  --color-accent:       #F4A11D;
  --color-accent-hover: #D9850A;
  /* Stati */
  --color-success:      #1E8A4E;
  --color-error:        #C62B2B;
  /* HSL runtime */
  --hsl-primary: 193, 72%, 21%;
  --hsl-accent:   38, 91%, 53%;
  /* Tipografia */
  --font-headings: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* Layout */
  --container-max:     1240px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --radius:            10px;
}

/* --- Reset leggero / base --- */
*, *::before, *::after { box-sizing: border-box; }
body.custom-background, body {
  background: var(--color-bg) !important;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  font-size: 17px;
}
img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5 { font-family: var(--font-headings); color: var(--color-ink); line-height: 1.18; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 700; letter-spacing: -.5px; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 600; }
h3 { font-size: 1.35rem; font-weight: 600; }
p  { margin: 0 0 1.1rem; }
a  { color: var(--color-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--color-accent-hover); }
strong { font-weight: 600; }

/* --- Container --- */
.pin-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); }

/* ============================================================
   HEADER (Accelerate #masthead)
   ============================================================ */
#masthead, .header-main {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-stone-light);
  box-shadow: 0 2px 14px rgba(15, 76, 92, .05);
}
#masthead .container { max-width: var(--container-max); }
.site-branding img, .custom-logo-link img, .site-logo img { max-height: 64px; width: auto; }

/* Navigazione principale */
.main-navigation, #site-navigation { font-family: var(--font-headings); }
.main-navigation a, #site-navigation a { color: var(--color-ink); font-weight: 500; }
.main-navigation a:hover, .main-navigation .current-menu-item > a { color: var(--color-primary); }
.main-navigation ul ul { background: var(--color-surface); box-shadow: 0 10px 30px rgba(15,76,92,.12); border: 1px solid var(--color-stone-light); }

/* CTA telefono nell'header (aggiungere come voce menu con classe .pin-header-cta, oppure widget) */
.pin-header-cta a, a.pin-header-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--color-accent); color: var(--color-ink) !important;
  padding: .55rem 1.1rem; border-radius: 8px; font-weight: 600;
}
.pin-header-cta a:hover, a.pin-header-cta:hover { background: var(--color-accent-hover); }

/* ============================================================
   FOOTER (Accelerate #colophon)
   ============================================================ */
#colophon, .site-footer {
  background: var(--color-primary-dark) !important;
  color: rgba(255,255,255,.82);
  border-top: 4px solid var(--color-accent);
}
#colophon a, .site-footer a { color: rgba(255,255,255,.82); }
#colophon a:hover, .site-footer a:hover { color: var(--color-accent); }
#colophon h1, #colophon h2, #colophon h3, #colophon .widget-title { color: #fff; font-family: var(--font-headings); }
#colophon img { filter: none; }
.site-info, .footer-socket-wrapper { background: var(--color-primary-dark) !important; color: rgba(255,255,255,.6); }

/* ============================================================
   STICKY CTA MOBILE (telefono + WhatsApp)
   ============================================================ */
.pin-sticky-cta { display: none; }
@media (max-width: 767px) {
  .pin-sticky-cta {
    position: fixed; inset: auto 0 0 0; z-index: 9999;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--color-stone-light);
    box-shadow: 0 -4px 18px rgba(0,0,0,.16);
  }
  .pin-sticky-cta__btn {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .9rem 0; font-family: var(--font-headings); font-weight: 600; font-size: 1rem;
  }
  .pin-sticky-cta__btn svg { width: 20px; height: 20px; }
  .pin-sticky-cta__call { background: var(--color-accent); color: var(--color-ink); }
  .pin-sticky-cta__wa   { background: var(--color-primary); color: #fff; }
  /* spazio per non coprire il footer */
  body { padding-bottom: 60px; }
}

/* ============================================================
   ACCESSIBILITÀ (quality floor)
   ============================================================ */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}