/* ============================================================
   PROGETTO SERRAMENTI — PREMIUM EVOLUTION LAYER  (v5.0)
   ------------------------------------------------------------
   Additive refinement loaded AFTER main.css + pages.css.
   Goal: agency-grade cohesion — one consistent spatial rhythm,
   an editorial type system, and obsessive micro-detail — WITHOUT
   changing the gold/black identity or rewriting any component.

   Nothing here invents new colours: every value reuses the
   existing design tokens (--gold, --bg-*, --fg-*, --line-*).
   To roll back: simply stop enqueuing this file.
   ============================================================ */

/* ------------------------------------------------------------
   1. REFINED TOKENS
   Fluid rhythm is the single biggest cohesion fix: section
   padding and container gutters now scale smoothly with the
   viewport, so every breakpoint (320 → ultrawide) breathes the
   same way instead of snapping between fixed steps.
   ------------------------------------------------------------ */
:root {
  /* Editorial body face — warmer, more humanist than Inter,
     metrics close enough that the tight layout never reflows. */
  --font-body: 'Hanken Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid vertical rhythm (replaces the fixed sp-9 = 96px jump). */
  --sp-section: clamp(72px, 9vw, 128px);
  --sp-section-sm: clamp(56px, 7vw, 96px);

  /* Fluid page gutter — consistent margins on every device. */
  --gutter: clamp(20px, 5vw, 44px);

  /* Consistent editorial measures. */
  --measure: 62ch;
  --measure-tight: 34ch;

  /* One softer, warmer elevation ladder (kept subtle & on-brand). */
  --shadow-1: 0 1px 2px rgba(20,16,8,.06), 0 3px 8px -2px rgba(20,16,8,.10);
  --shadow-2: 0 4px 10px -4px rgba(20,16,8,.14), 0 18px 44px -20px rgba(20,16,8,.30);
  --shadow-3: 0 8px 20px -8px rgba(20,16,8,.18), 0 44px 96px -36px rgba(20,16,8,.44);

  /* Gold focus ring — reused across all interactive elements. */
  --ring: 0 0 0 2px var(--bg-paper), 0 0 0 4px var(--gold);
}

body {
  /* Slightly calmer body colour + crisper rendering. */
  letter-spacing: -0.006em;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   2. LAYOUT RHYTHM — consistent, fluid, cohesive
   ------------------------------------------------------------ */
.container,
.container-wide { padding-left: var(--gutter); padding-right: var(--gutter); }

.section { padding: var(--sp-section) 0; }
.section-sm { padding: var(--sp-section-sm) 0; }

/* Consecutive same-tone sections shouldn't double their air:
   collapse the seam so paper-on-paper reads as one composition. */
.is-paper + .is-paper { padding-top: 0; }

/* The hero → first band transition gets a touch more room to settle. */
.hero + .section { padding-top: clamp(64px, 8vw, 112px); }

/* ------------------------------------------------------------
   3. EDITORIAL TYPE SYSTEM
   Tighter optical tracking on display sizes, calmer leading,
   and a disciplined measure so text never sprawls.
   ------------------------------------------------------------ */
.display-xl { letter-spacing: -0.028em; line-height: 0.96; }
.display-lg { letter-spacing: -0.022em; line-height: 1.0; }
.display-md { letter-spacing: -0.016em; line-height: 1.04; }
.display-sm { letter-spacing: -0.01em; }

/* Italic accents: a hair more weight so the gold reads as intent. */
.display-xl em, .display-lg em, .display-md em, .display-sm em { font-weight: 400; }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.26em;
  /* A short gold tick before the eyebrow — a small, expensive signature. */
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.text-center .eyebrow { justify-content: center; }
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
  flex: none;
}

.lead {
  max-width: var(--measure);
  letter-spacing: -0.004em;
  color: var(--fg-on-light-2);
}
.text-center .lead { margin-left: auto; margin-right: auto; }

/* Body copy: consistent measure + optical tracking. */
.body { letter-spacing: -0.003em; }

/* ------------------------------------------------------------
   4. BUTTONS — crisper, more tactile, fully accessible
   ------------------------------------------------------------ */
.btn {
  padding: 15px 30px;
  letter-spacing: 0.16em;
  border-radius: 0;
  transition: background-color var(--dur-ui, 400ms) var(--ease),
              color var(--dur-ui, 400ms) var(--ease),
              border-color var(--dur-ui, 400ms) var(--ease),
              box-shadow var(--dur-ui, 400ms) var(--ease),
              transform var(--dur-press, 150ms) var(--ease-out);
  will-change: transform;
}
.btn-primary { box-shadow: var(--shadow-1); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
}
/* Magnetic buttons (JS sets --mx/--my); the translate is layered
   under the hover-lift via a wrapper transform, so both coexist. */
.btn.is-magnetic { transform: translate(var(--mx, 0), var(--my, 0)); }

/* Consistent, visible gold focus ring on ALL interactive elements
   (previously only the cookie banner had one). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-main a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 1px;
}
/* On dark grounds the inner ring uses the dark bg so the halo reads. */
.is-dark a:focus-visible, .is-deep a:focus-visible,
.hero a:focus-visible, .site-footer a:focus-visible,
.ecobonus-band a:focus-visible {
  box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 4px var(--gold);
}

/* ------------------------------------------------------------
   5. HEADER — steadier, more refined chrome
   ------------------------------------------------------------ */
.site-header { border-bottom-color: rgba(26,24,22,0.08); }
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--line-light), 0 10px 30px -22px rgba(20,16,8,.5);
}
/* v5.6.6 — rimosse le due regole su .header-inner: nessun template genera più
   quell'elemento (codice morto) e animavano una proprietà di layout, che
   costringe il browser a ricalcolare il layout a ogni frame. Se un giorno
   serve un header che si accorcia, usare grid-template-rows o transform. */
.nav-main a { transition: color var(--dur-ui, 400ms) var(--ease); }
/* Nav underline that grows from the centre on hover — quiet craft. */
@media (hover: hover) and (pointer: fine) {
  .nav-main > a::after,
  .nav-mega-trigger::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-ui, 400ms) var(--ease);
  }
  .nav-main > a:hover::after,
  .nav-mega-trigger:hover::after { transform: scaleX(1); }
  .nav-main > a.active::after { transform: scaleX(1); }
}

/* ------------------------------------------------------------
   6. PRODUCT GRID — tighter seams, uniform filmic hover
   Transform + filter share ONE slow, matched curve so the zoom
   feels considered and identical on every card (was 1.1s vs 0.6s).
   ------------------------------------------------------------ */
.product-grid { gap: 6px; }
.product-card { box-shadow: var(--shadow-1); }
.product-card img {
  transition: transform 1.4s var(--ease), filter 1.4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover { box-shadow: var(--shadow-2); }
  .product-card:hover img { transform: scale(1.045); }
}
.product-card .eyebrow::before { display: none; } /* keep card labels clean */

/* ------------------------------------------------------------
   7. METHOD / SERVICES — editorial number rhythm
   ------------------------------------------------------------ */
.service-item .num {
  color: var(--gold);
  font-style: italic;
  font-size: 20px;
  opacity: 0.9;
}
.service-item h4 { line-height: 1.1; letter-spacing: -0.01em; }
.service-item p { max-width: 30ch; }

/* ------------------------------------------------------------
   8. STATS — bigger, calmer, better aligned, tighter band.
   The stats sit directly under the dark Ecobonus band; their
   own 64px padding PLUS the section's 128px bottom made a huge
   dead zone. Tighten both so the two dark blocks read as one.
   ------------------------------------------------------------ */
.stat .lbl { color: var(--fg-on-dark-2); max-width: 18ch; margin: 12px auto 0; }
.stats { gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 3vw, 40px) 0; }
.is-dark:has(> .container > .stats) { padding-bottom: clamp(48px, 6vw, 72px) !important; }

/* ------------------------------------------------------------
   9. REVIEWS — softer cards, refined arrows
   ------------------------------------------------------------ */
.g-review-card { box-shadow: var(--shadow-1); transition: box-shadow var(--dur-ui, 400ms) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .g-review-card:hover { box-shadow: var(--shadow-2); }
}
.g-reviews-badge { box-shadow: var(--shadow-1); }

/* ------------------------------------------------------------
   10. ZONE / LOCAL SEO — quieter, more structured chips
   ------------------------------------------------------------ */
.zone-grid { gap: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 48px); }
.zone-grid h4 { letter-spacing: -0.01em; }

/* ------------------------------------------------------------
   11. FOOTER — more considered spacing
   ------------------------------------------------------------ */
.footer-grid { gap: clamp(32px, 4vw, 64px); }
.footer-col h5 { letter-spacing: 0.22em; color: var(--fg-on-dark-2); }

/* ------------------------------------------------------------
   12. IMAGES — no layout shift, graceful load.
   Progressive enhancement: images are VISIBLE by default. The
   fade only applies once JS has added .js-imgfade to <html>, so a
   slow/blocked script can never leave an image hidden.
   ------------------------------------------------------------ */
img { height: auto; }
.js-imgfade img[loading="lazy"]:not([data-loaded="1"]) {
  opacity: 0;
}
.js-imgfade img[loading="lazy"] {
  transition: opacity 0.6s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js-imgfade img[loading="lazy"] { opacity: 1 !important; transition: none; }
}
/* The generic fade transition above is opacity-only and would otherwise
   clobber the product-card zoom (higher specificity). Re-state the card's
   transform+filter transition WITH opacity so the zoom and fade coexist. */
.js-imgfade .product-card img {
  transition: transform 1.4s var(--ease), filter 1.4s var(--ease), opacity 0.6s var(--ease);
}

/* ------------------------------------------------------------
   13. REVEAL — a touch more refinement (opacity + lift only,
   perf-safe, honours reduced-motion which main.css already sets).
   ------------------------------------------------------------ */
[data-anim] { transition-duration: 0.8s; }
[data-anim="scale"] { transform: scale(0.97) translateY(14px); }

/* ------------------------------------------------------------
   14. RESPONSIVE COHESION
   Consistent gutters + type scaling so mobile reads as composed,
   not "thrown in".
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .hero-content { padding-bottom: clamp(48px, 12vw, 96px); }
  .hero .lead { max-width: 46ch; }
}
@media (max-width: 600px) {
  .section { padding: var(--sp-section-sm) 0; }
  .ecobonus-band { padding: var(--sp-section-sm) 0; }
  .is-paper + .is-paper { padding-top: 0; }
  .display-xl { line-height: 1.0; }
  .eyebrow::before { width: 16px; }
  /* Tighter, consistent card labels on phones. */
  .product-card-overlay { padding: var(--sp-5); }
  .service-item p { max-width: none; }
}
@media (max-width: 380px) {
  :root { --gutter: 18px; }
}

/* ------------------------------------------------------------
   15. ULTRAWIDE — keep the composition centred & intentional
   ------------------------------------------------------------ */
@media (min-width: 1800px) {
  .container { max-width: 1480px; }
  .container-wide { max-width: 1680px; }
}

/* ------------------------------------------------------------
   16. Selection + hairline flourishes — the last 1%.
   ------------------------------------------------------------ */
::selection { background: var(--gold); color: var(--bg-deep); }

/* ------------------------------------------------------------
   17. FIX PASS (feedback) — nav↔mega parity, balanced rhythm.
   ------------------------------------------------------------ */

/* (a) Mega-menu labels were 19px while the top nav shrinks per
   breakpoint (18 / 16 / 15). Match the dropdown label to the nav
   at every breakpoint so they read as the SAME menu, same size. */
@media (min-width: 1281px) {
  .nav-main { font-size: 18px; }
  .nm-label { font-size: 18px; }
}
@media (min-width: 1061px) and (max-width: 1280px) {
  .nm-label { font-size: 16px; }
}
@media (min-width: 901px) and (max-width: 1060px) {
  .nm-label { font-size: 15px; }
}
/* The dropdown descriptions track down a hair so the pairing stays balanced. */
@media (min-width: 901px) and (max-width: 1280px) {
  .nm-desc { font-size: 11.5px; }
}

/* (b) Balanced whitespace around the "Il nostro metodo" header.
   The product-grid band closes with an inline 128px bottom pad while
   the header's title only had ~64px below it — top-heavy and
   asymmetric. Trim that band's bottom to match, and let the seam with
   the following section collapse, so the gaps above and below the
   header read as a symmetric pair. */
section.is-paper:has(> .container-wide > .product-grid) {
  padding-bottom: var(--sp-8) !important; /* 64px — matches the .mb-8 below the title */
}

/* ------------------------------------------------------------
   18. SOGLIA CHROME UNIFICATION (header + footer only)
   header.php/footer.php now carry the Soglia markup (.sg-logo,
   .sg-nl, .sg-foot-grid) directly with inline colors, styled by
   assets/css/soglia.css (loaded globally — see inc/enqueue.php).
   A couple of old-theme classnames that survive alongside the new
   markup (.footer-col a underline, .btn-primary hover) still need
   a hover-color nudge here so they read as the same clay accent.
   ------------------------------------------------------------ */
.site-header .header-cta .btn-primary:hover { background: #7F4130 !important; }
.site-footer .footer-col a:hover { color: #A0563B; }
.site-footer .footer-col a::after { background: #A0563B; }
.site-header .nav-main a:hover,
.site-header .nav-main a.active { color: #A0563B !important; }
.site-header .nav-main a.active::after { background: #A0563B !important; }
/* .logo em{color:gold} (old theme) must not bleed into the plain "Serramenti"
   word — only the PS monogram's em (the "S") should be clay. */
.sg-logo-word em { color: inherit !important; }