/* =====================================================================
   PUGLIAI — site overrides on top of brand.css + landing.css
   Small, page-agnostic adjustments shared by every page.
   ===================================================================== */

/* Brand logo is full-colour; render it white where it sits on dark chrome. */
.nav__logo img,
.foot__brand img { filter: brightness(0) invert(1); }

/* Language switch is a pair of links (URL-based IT/EN), styled like the
   original toggle. */
.lang a {
  display: inline-flex; align-items: center;
  text-decoration: none; background: none; border: none;
  color: var(--txt-faint); cursor: pointer;
  padding: 6px 11px; font: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; transition: .2s;
}
.lang a:hover { color: #fff; }
.lang a.on { background: rgba(255,255,255,.12); color: #fff; }

/* Metaphor visual: the brand mark sits on the soft light card. */
.meta__tree { width: 70%; max-width: 320px; }

/* Make in-page anchored sections clear the fixed navbar when jumped to. */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* Skip-link for keyboard users. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--green); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-weight: 600; font-size: 14px; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* Accessibility: contrast bumps for small text on light sections
   (--mist on white lands ~4:1; --slate clears AA comfortably). */
.tcard__by .rl { color: var(--slate); }
.meta .mrow__k .it { color: var(--slate); }

/* Visible keyboard focus — green on dark chrome, blue on light sections. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--green-400);
  outline-offset: 3px;
  border-radius: 6px;
}
.sec--light :where(a, button):focus-visible,
.meta :where(a, button):focus-visible { outline-color: var(--blue); }

/* Larger touch targets for the always-on controls. */
.nav__burger { padding: 11px; }
.lang a { padding: 10px 13px; min-height: 40px; }

/* Honor reduced-motion for the remaining decorative animations.
   (.reveal + .aurora are already handled in landing.css; the canvas trees
   render a single static frame via tree-canvas.js.) */
@media (prefers-reduced-motion: reduce) {
  .scrollcue .mouse::before,
  .meta__halo,
  .meta__tree,
  .mnode { animation: none !important; }
}

/* =====================================================================
   INTERIOR PAGES — shared components on top of the landing system.
   Interior pages reuse nav / footer / .sec / .shead / .cards3 / .gcard /
   .pcard / .stats / .tcard from landing.css; these two are the only
   additions they need.
   ===================================================================== */

/* Compact page header (interior hero — no full-height canvas). */
.pagehead {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + 66px) 0 66px;
  background:
    radial-gradient(120% 90% at 85% -20%, rgba(19,92,169,.30), transparent 55%),
    radial-gradient(90% 80% at -10% 120%, rgba(27,144,50,.24), transparent 55%),
    var(--notte);
}
.pagehead .shell { position: relative; z-index: 3; }
.pagehead .eyebrow-lux { margin-bottom: 18px; }
.pagehead h1 {
  font-size: clamp(34px, 5vw, 60px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.04; max-width: 20ch; text-wrap: balance;
}
.pagehead h1 .serif { color: var(--green-400); }
.pagehead__lead {
  margin-top: 20px; font-size: clamp(17px, 1.6vw, 20px);
  color: var(--txt-dim); max-width: 62ch; line-height: 1.6; text-wrap: pretty;
}
.pagehead__cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.pagehead .stats { margin-top: 48px; }

/* FAQ accordion (works on dark and on .sec--light). */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details {
  border: 1px solid var(--hairline); border-radius: 14px;
  background: rgba(255,255,255,.03); overflow: hidden;
}
.sec--light .faq details { border-color: var(--line); background: var(--white); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 24px;
  font-weight: 600; font-size: 16.5px; color: #fff;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.sec--light .faq summary { color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--green-400); transition: transform .3s var(--ease); flex: none; }
.sec--light .faq summary::after { color: var(--green); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 24px 20px; color: var(--txt-dim); line-height: 1.65; font-size: 15px; }
.sec--light .faq__a { color: var(--slate); }

/* Forms — contact, application, login. Work on dark and on .sec--light. */
.form { max-width: 640px; margin: 0 auto; display: grid; gap: 18px; }
.form--wide { max-width: 840px; }
.field { display: grid; gap: 7px; }
.field > label { font-size: 13.5px; font-weight: 600; color: #fff; }
.sec--light .field > label { color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 15px; color: #fff;
  background: rgba(255,255,255,.04); border: 1px solid var(--hairline);
  border-radius: 11px; padding: 13px 15px; transition: border-color .2s, background .2s;
}
.sec--light .field input, .sec--light .field textarea, .sec--light .field select {
  color: var(--ink); background: var(--white); border-color: var(--line);
}
.field input::placeholder, .field textarea::placeholder { color: var(--txt-faint); }
.sec--light .field input::placeholder, .sec--light .field textarea::placeholder { color: var(--mist); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--green-400); background: rgba(255,255,255,.07);
}
.sec--light .field input:focus, .sec--light .field textarea:focus, .sec--light .field select:focus {
  border-color: var(--green); background: var(--white);
}
.field textarea { min-height: 130px; resize: vertical; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 11px; }
.field--check input { width: 18px; height: 18px; margin-top: 2px; }
.field--check label { font-weight: 400; font-size: 13.5px; color: var(--txt-dim); }
.sec--light .field--check label { color: var(--slate); }
.form .btn { justify-self: start; }
.form__note { font-size: 13px; color: var(--txt-faint); }

/* Long-form / legal prose. */
.prose { max-width: 768px; margin: 0 auto; }
.prose h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 44px 0 14px; }
.prose h3 { font-size: 19px; font-weight: 700; margin: 28px 0 10px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 16px; line-height: 1.72; color: var(--txt-dim); }
.sec--light .prose p, .sec--light .prose li { color: var(--slate); }
.prose ul, .prose ol { margin: 12px 0 16px 22px; display: grid; gap: 8px; }
.prose a { color: var(--green-400); text-decoration: underline; }
.sec--light .prose a { color: var(--blue); }
.prose strong, .prose b { color: #fff; font-weight: 600; }
.sec--light .prose strong, .sec--light .prose b { color: var(--ink); }
.prose .muted { color: var(--txt-faint); font-size: 14px; }

/* =====================================================================
   ARTICLE COMPONENTS — long-form guides (guida-ai/*).
   Reuse .prose for body copy; these cover the article-only pieces:
   breadcrumb + meta row (dark pagehead), tables, callouts, stat boxes
   and prev/next nav. Pair the article body section with .sec--light.
   ===================================================================== */

/* Breadcrumb + reading-meta inside the dark .pagehead. */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13.5px; color: var(--txt-faint); }
.crumb a { color: var(--txt-dim); text-decoration: none; transition: color .2s; }
.crumb a:hover { color: #fff; }
.crumb i { color: var(--green-400); font-style: normal; }
.pagehead__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; font-size: 14px; color: var(--txt-dim); }
.pagehead__meta span { display: inline-flex; align-items: center; gap: 7px; }
.pagehead__meta svg { width: 16px; height: 16px; flex: none; color: var(--green-400); }

/* Tables inside prose. */
.prose table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15px; }
.prose thead th { text-align: left; font-weight: 600; padding: 13px 16px; background: var(--notte); color: #fff; }
.prose thead th:first-child { border-top-left-radius: 12px; }
.prose thead th:last-child { border-top-right-radius: 12px; }
.prose td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--slate); vertical-align: top; }
.sec--light .prose tbody tr:nth-child(even) { background: rgba(11,26,45,.035); }

/* Callout / highlight boxes (info by default, warn variant). */
.callout { margin: 28px 0; padding: 22px 26px; border-radius: 14px; border-left: 4px solid var(--green); background: var(--grad-soft); }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout h3, .callout h4 { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: var(--ink); }
.callout--warn { border-left-color: var(--terra); background: linear-gradient(118deg, rgba(194,99,47,.10), rgba(194,99,47,.04)); }
.sec--dark .callout, .sec--panel .callout, .sec--darker .callout { background: rgba(255,255,255,.04); border-left-color: var(--green-400); }
.sec--dark .callout h3, .sec--dark .callout h4,
.sec--panel .callout h3, .sec--panel .callout h4 { color: #fff; }

/* Single big stat highlight (gradient panel). */
.statbox { margin: 28px 0; padding: 32px; border-radius: 18px; text-align: center; background: var(--grad); color: #fff; }
.statbox__n { display: block; font-size: clamp(40px, 6vw, 56px); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.statbox__l { display: block; margin-top: 10px; font-size: 16px; opacity: .92; }

/* Prev / next article navigation. */
.artnav { max-width: 768px; margin: 48px auto 0; padding-top: 32px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sec--dark .artnav, .sec--panel .artnav, .sec--darker .artnav { border-top-color: var(--hairline); }
.artnav a { display: block; padding: 20px 22px; border-radius: 14px; border: 1px solid var(--line); background: var(--white); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.artnav a:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.artnav__k { font-size: 12.5px; color: var(--mist); margin-bottom: 6px; }
.artnav__t { font-weight: 600; color: var(--ink); font-size: 15.5px; }
.artnav .next { text-align: right; }
@media (max-width: 640px) { .artnav { grid-template-columns: 1fr; } .artnav .next { text-align: left; } }

/* Landing components (.stats / .gcard / .proc / .pcard from landing.css)
   are styled for dark surfaces. The guides drop them into .sec--light
   reading bodies, so make them light-aware here (white cards, visible
   hairlines, dark body text). Numbers inherit --ink on light already. */
.sec--light .stats { background: var(--line); border-color: var(--line); }
.sec--light .stat { background: var(--white); }
.sec--light .stat .l { color: var(--ink); }
.sec--light .stat .s { color: var(--mist); }

.sec--light .gcard { background: var(--white); border-color: var(--line); }
.sec--light .gcard:hover { background: var(--white); box-shadow: var(--shadow-sm); }
.sec--light .gcard h3 { color: var(--ink); }
.sec--light .gcard p { color: var(--slate); }
.sec--light .gcard__link { color: var(--green); }

.sec--light .pstep h4 { color: var(--ink); }
.sec--light .pstep p { color: var(--slate); }

.sec--light .pcard h3 { color: var(--ink); }
.sec--light .pcard p, .sec--light .pcard li { color: var(--slate); }