/* ============================================================================
 * chrome.css — shared header + footer for the Sella Farmaceutici form pages.
 *
 * PROVENANCE
 *   Source URL : https://demo2.sellafarmaceutici.it/  (demo home web/index.html —
 *                carries the site-wide header + footer)
 *   Pulled     : 2026-06-23  (by bin/pull-prod, into the disposable web/)
 *   Demo bundle: web/assets/index-vmVLlGsH.css  (Tailwind v3 build; the -vmVLlGsH
 *                hash rotates on every demo rebuild — this file is the de-hashed,
 *                stable copy our partials depend on instead)
 *   Baseline   : raw markup + tokens snapshotted in docs/design-baseline/
 *
 *   The demo styles its chrome with Tailwind utility classes on the markup (it has
 *   NO .css-a1b2c3 CSS-in-JS hashes). The utility bundles below are re-authored as
 *   stable semantic classes; token values are copied verbatim from the demo :root.
 *
 * SELECTORS EXTRACTED  (demo utilities  ->  semantic class here)
 *   <header> fixed top-0 z-50 bg-transparent          -> .site-header
 *   header inner mx-auto flex max-w-[1280px] px-4 py-2.5 lg:px-6 -> .site-header__bar
 *   logo a relative z-10 flex / img h-14 brightness-0 invert     -> .site-header__logo (+ img)
 *   nav hidden items-center lg:flex                    -> .site-nav
 *   nav a px-3 py-1.5 font-display text-[14px] font-bold uppercase tracking-wider -> .site-nav__link
 *   actions hidden gap-1.5 lg:flex / icon buttons      -> .site-header__actions / __icon-btn / __lang
 *   mobile toggle rounded-lg p-2 lg:hidden             -> .site-header__toggle
 *   <footer> bg-[hsl(228_50%_11%)]                     -> .site-footer
 *   inner mx-auto max-w-[var(--max-width)] px-6 lg:px-8 -> .site-footer__inner (+ --section)
 *   top flex border-b border-white/8 py-12 md:flex-row -> .site-footer__top
 *   brand flex gap-5 / img h-11 / divider / tagline    -> .site-footer__brand (+ __divider, __tagline)
 *   social flex gap-4 / h-9 w-9 rounded-sm text-white/70 -> .site-footer__social / __social-icon
 *   grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-10   -> .site-footer__grid
 *   heading mb-5 font-display text-[11px] tracking-[0.2em] -> .site-footer__heading
 *   list space-y-3 / link link-underline text-[13px] white/75 -> .site-footer__list / __link
 *   bottom border-t border-white/6 py-6 / copyright / legal   -> .site-footer__bottom (+ __copyright, __legal, __legal-link)
 *   back-to-top group text-[10px] tracking-[0.15em] / icon box -> .site-footer__totop / __totop-icon
 * ============================================================================ */

/* Base layer — the design tokens (:root), the self-hosted @font-face rules, and the
 * preflight/reset defaults this chrome depends on now live in base.css, which every
 * page must load BEFORE this file. Four of those defaults are load-bearing for parity
 * (without them the chrome drifts from the demo): box-sizing (container widths),
 * border-color = --border (footer dividers), img max-width (footer logo shrink), and
 * root line-height 1.5 (footer column rhythm). See base.css for provenance + the notes. */

/* ---------------------------------------------------------------- header --- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  transition: all .3s;
}

/* Solid variant. The demo's home header sits over a hero and stays transparent
 * until its React scroll handler swaps in a solid background; our form pages have
 * no hero, so partials opt into this solid state. The demo DOES define a solid
 * header on its hero-less inner pages (web/contatti/, web/azienda/) — its exact
 * text colors are copied below. The surface (bg/border/shadow) stays token-derived
 * (the demo uses bg-card/95 + shadow-md); revisit when the chrome partials land. */
.site-header--solid {
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-sm);
}
/* MATCHED to the demo's solid inner-page header: nav links, search icon and the
 * mobile toggle carry .text-sella-blue-deep = hsl(var(--blue-deep)) = 228 62% 25%
 * in the demo bundle (web/assets/index-*.css) — NOT --foreground. Hover stays the
 * demo's opacity-75 (see .site-nav__link:hover). */
.site-header--solid .site-nav__link,
.site-header--solid .site-header__icon-btn,
.site-header--solid .site-header__toggle {
  color: hsl(228 62% 25%);
}
.site-header--solid .site-header__lang {
  color: hsl(var(--foreground)); /* demo: lang switch keeps .text-foreground */
}
.site-header--solid .site-header__logo img {
  filter: none;
}

.site-header__bar {
  margin-inline: auto;
  display: flex;
  max-width: 1280px;
  align-items: center;
  justify-content: space-between;
  padding: .625rem 1rem;
}

.site-header__logo {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.site-header__logo img {
  pointer-events: none;
  height: 3.5rem;
  width: auto;
  filter: brightness(0) invert(100%);
  transition: all .3s;
}

.site-nav {
  display: none;
  align-items: center;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .125rem;
  padding: .375rem .75rem;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: hsl(var(--primary-foreground));
  text-decoration: none;
  transition: color .15s, opacity .15s;
}
.site-nav__link:hover {
  opacity: .75;
}
.site-nav__link svg {
  width: .75rem;
  height: .75rem;
}

.site-header__actions {
  display: none;
  align-items: center;
  gap: .375rem;
}

/* Search affordance — E7 (Trello ZFLTHJ6D): the header search control is now a
 * plain <a> to the homepage (no overlay/site-search). It keeps the .site-header__icon-btn
 * look (same icon, same hover), so it stays visually identical to the old inert button;
 * text-decoration:none guards the anchor against underlines. */
.site-header__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: hsl(var(--primary-foreground));
  cursor: pointer;
  transition: background-color .15s, color .15s;
  border-radius: .375rem;
  padding: .375rem;
  text-decoration: none;
}
/* Language selector — matches the demo: a single flag + current-locale button (the
 * "trigger") that opens a small menu of locale options on click. Native
 * <details>/<summary> reproduces the demo's click-to-open dropdown with ZERO JS and
 * full keyboard operability; the E7 interactive-chrome epic can later swap in the
 * richer JS dropdown behind the same markup + look. */
.site-header__lang {
  position: relative;
  color: hsl(var(--primary-foreground));
}
/* closed-state button — demo: flex items-center gap-1.5 rounded-md px-2 py-1.5
 * text-sm hover:bg-primary/10 text-primary-foreground */
.site-header__lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border-radius: .375rem;
  padding: .375rem .5rem;
  font-size: .875rem;
  color: inherit;
  cursor: pointer;
  user-select: none;
  list-style: none;               /* strip the default disclosure triangle */
  transition: background-color .15s;
}
.site-header__lang-trigger::-webkit-details-marker { display: none; }
.site-header__lang-trigger:hover,
.site-header__lang-trigger:focus-visible {
  background: hsl(var(--primary) / .1);
}
/* the "IT"/"EN" label on the button — demo: font-display text-[11px] font-bold
 * uppercase tracking-wider */
.site-header__lang-current {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* open menu — a card panel dropping below the button, right-aligned */
.site-header__lang-menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 60;
  min-width: 9rem;
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .375rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.site-header__lang-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: .375rem;
  padding: .375rem .5rem;
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: background-color .15s;
}
.site-header__lang-option:hover,
.site-header__lang-option:focus-visible {
  background: hsl(var(--primary) / .1);
}
.site-header__lang-option.is-active {
  color: hsl(var(--foreground));
}
/* active-language indicator dot (demo: ml-auto h-1.5 w-1.5 rounded-full bg-primary) */
.site-header__lang-dot {
  margin-left: auto;
  width: .375rem;
  height: .375rem;
  border-radius: 9999px;
  background: hsl(var(--primary));
}
/* lang inner spans — the flag glyph and the "IT-IT"/"GB-EN" label (demo utilities) */
.site-header__lang-flag {
  font-size: 1rem;   /* text-base */
  line-height: 1;    /* leading-none */
}
.site-header__lang-label {
  font-family: var(--font-display); /* font-display (Syne) */
  font-size: 11px;                  /* text-[11px] */
  font-weight: 700;                 /* font-bold */
  text-transform: uppercase;        /* uppercase */
  letter-spacing: .05em;            /* tracking-wider */
}
.site-header__icon-btn:hover {
  background: hsl(var(--primary) / .1);
}
.site-header__icon-btn svg {
  width: 1rem;
  height: 1rem;
}

.site-header__toggle {
  display: inline-flex;
  border: 0;
  background: transparent;
  border-radius: .5rem;
  padding: .5rem;
  color: hsl(var(--primary-foreground));
  cursor: pointer;
}
.site-header__toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ------------------------------------------------ desktop dropdown panels --- */
/* E7 (Trello hqJBOccJ). Each chevron parent is wrapped in a .site-nav__item so a
 * .site-nav__panel can be absolutely positioned beneath it; behaviour (hover/focus
 * open, Escape close) lives in chrome.js, which toggles the panel's `hidden`
 * attribute. The wrapper is a zero-chrome inline-flex box, so the CLOSED nav row is
 * pixel-identical to the pre-E7 flat-anchor row. Panel look reuses the same card
 * tokens as the language menu (--card / --border / --radius / --shadow-md). */
.site-nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Panel to demo parity: absolute top-full mt-0.5 min-w-[190px] rounded-lg
 * border-border bg-card p-1.5 shadow-sella-lg (→ our --shadow-lg). */
.site-nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  margin-top: .125rem;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .375rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: .5rem;
  box-shadow: var(--shadow-lg);
}
/* an explicit display above would defeat the UA `[hidden]{display:none}`, so restore it */
.site-nav__panel[hidden] {
  display: none;
}
/* Item to demo parity: block rounded-md px-3 py-2.5 font-display text-[12px]
 * font-bold uppercase tracking-wider, foreground navy, hover:bg-accent (→ --muted). */
.site-nav__panel-link {
  display: block;
  border-radius: .375rem;
  padding: .625rem .75rem;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.site-nav__panel-link:hover,
.site-nav__panel-link:focus-visible {
  background: hsl(var(--muted));
}

/* ---------------------------------------------------- mobile nav drawer --- */
/* E7 (Trello QGcC76tI). Right-side panel to demo parity: a fixed overlay whose
 * .site-drawer__panel is a right-anchored sheet (w-[85vw] max-w-[420px]) that slides
 * in from the right over a blurred foreground/40 backdrop. Opened by
 * .site-header__toggle (only shown below lg → mobile-only). chrome.js toggles the
 * `hidden` attribute + the .is-open class that drives the slide/fade, traps focus,
 * and locks body scroll (scrollbar-compensated → no layout shift). The nav is
 * FLAT/fully-expanded — top-level headings each followed by their children under a
 * left rule, no accordions — with a primary-pill CONTATTACI/CONTACT US CTA pinned
 * to the bottom. */
.site-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.site-drawer[hidden] {
  display: none;
}
.site-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: hsl(var(--foreground) / .4);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s;
}
.site-drawer.is-open .site-drawer__backdrop {
  opacity: 1;
}
.site-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 85vw;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  overflow-y: auto;
  background: hsl(var(--card));
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.site-drawer.is-open .site-drawer__panel {
  transform: translateX(0);
}

.site-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.site-drawer__head-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}
/* drawer language switch — rests on a subtle rounded --muted pill (demo polish);
 * hover still lifts to the shared trigger's primary/.1 tint */
.site-drawer__lang .site-header__lang-trigger {
  background: hsl(var(--muted));
}
.site-drawer__logo {
  display: flex;
  align-items: center;
}
/* demo drawer logo is h-7 (smaller than the header's h-14) */
.site-drawer__logo img {
  height: 1.75rem;
  width: auto;
}
.site-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: .5rem;
  padding: .5rem;
  color: hsl(228 62% 25%);
  cursor: pointer;
  transition: background-color .15s;
}
.site-drawer__close:hover,
.site-drawer__close:focus-visible {
  background: hsl(var(--muted));
}
.site-drawer__close svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Search-as-link — the demo drawer's "Cerca…" search field, kept visually but wired
 * as a homepage LINK (search isn't a feature; mirrors the header lens icon). Styled
 * like the demo input: full-width rounded box, border, card bg, muted placeholder
 * text + lens icon. Sits below the head row, above the nav list. */
.site-drawer__search {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
  padding: .6rem .9rem;
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  background: hsl(var(--card));
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.site-drawer__search:hover,
.site-drawer__search:focus-visible {
  background: hsl(var(--muted));
}
.site-drawer__search svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  color: hsl(var(--muted-foreground));
}
.site-drawer__search-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: hsl(var(--muted-foreground));
}

.site-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.site-drawer__section {
  display: flex;
  flex-direction: column;
}
/* top-level heading — demo parity: font-display text-[12px] font-bold uppercase
 * tracking-wider, py-2.5 px-3, foreground navy, hover:bg-accent (→ --muted). */
.site-drawer__heading {
  display: block;
  padding: .625rem .75rem;
  border-radius: .5rem;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.site-drawer__heading:hover,
.site-drawer__heading:focus-visible {
  background: hsl(var(--muted));
}
/* children — demo parity: ml-3 border-l-2 border-border pl-3, muted uppercase 11px */
.site-drawer__children {
  display: flex;
  flex-direction: column;
  margin-top: .25rem;
  margin-left: .75rem;
  padding-left: .75rem;
  border-left: 2px solid hsl(var(--border));
}
.site-drawer__sublink {
  padding: .375rem 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color .15s;
}
.site-drawer__sublink:hover,
.site-drawer__sublink:focus-visible {
  color: hsl(var(--primary));
}

/* bottom CTA — full-width primary pill, pushed to the panel foot via margin-top:auto
 * (min 1.5rem gap kept by the panel's own bottom padding + this margin) */
.site-drawer__cta {
  margin-top: auto;
  display: block;
  padding: .75rem;
  border-radius: 9999px;
  background: hsl(var(--primary));
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  color: hsl(var(--primary-foreground));
  text-decoration: none;
  transition: opacity .15s;
}
.site-drawer__cta:hover,
.site-drawer__cta:focus-visible {
  opacity: .9;
}

/* ---------------------------------------------------------------- footer --- */

.site-footer {
  background: hsl(228 50% 11%);
  color: rgb(255 255 255 / .75);
}

.site-footer__inner {
  margin-inline: auto;
  max-width: var(--max-width);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.site-footer__inner--section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  /* Divider renders as hsl(var(--border)) — a soft near-white. The demo markup says
   * `border-white/8`, but that is a DEAD class: the demo bundle only compiles
   * border-white /10 and /15, so /8 produces no rule and the border falls through to
   * shadcn's base `* { border-color: hsl(var(--border)) }`. Translating the class name
   * literally to 8% white made our divider invisible. (Verified: web/assets/index-*.css.) */
  border-bottom: 1px solid hsl(var(--border));
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.site-footer__brand img {
  height: 2.75rem;
  width: auto;
  filter: brightness(0) invert(100%);
}
.site-footer__divider {
  height: 1.5rem;
  width: 1px;
  background: rgb(255 255 255 / .15);
}
.site-footer__tagline {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: rgb(255 255 255 / .75);
}

.site-footer__social {
  display: flex;
  gap: 1rem;
}
.site-footer__social-icon {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: .125rem;
  color: rgb(255 255 255 / .7);
  transition: color .15s;
}
a.site-footer__social-icon:hover {
  color: #fff;
}
.site-footer__social-icon svg {
  width: 1rem;
  height: 1rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 2.5rem;
}

.site-footer__heading {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #fff;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__list li + li {
  margin-top: .75rem;
}

.site-footer__link {
  position: relative;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgb(255 255 255 / .75);
  text-decoration: none;
  transition: color .15s;
}
.site-footer__link:hover {
  color: #fff;
}
/* animated underline, from the demo's .link-underline */
.site-footer__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.site-footer__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid hsl(var(--border)); /* dead `border-white/6` → shadcn base --border; see .site-footer__top */
}
.site-footer__copyright {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgb(255 255 255 / .6);
}
.site-footer__legal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.site-footer__legal-link {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgb(255 255 255 / .6);
  text-decoration: none;
  transition: color .15s;
}

.site-footer__totop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: rgb(255 255 255 / .7);
  cursor: pointer;
  transition: color .15s;
}
.site-footer__totop:hover {
  color: #fff;
}
.site-footer__totop-icon {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: .125rem;
  border: 1px solid rgb(255 255 255 / .15);
  transition: all .3s;
}
.site-footer__totop-icon svg {
  width: .875rem;
  height: .875rem;
}
/* The demo's totop-icon hover (`group-hover:border-white/40` + `group-hover:bg-white/10`)
 * is dead — neither utility is compiled — so the demo shows NO hover change on the icon
 * box (only the button text goes to white, via .site-footer__totop:hover). Matched here. */

/* ------------------------------------------------- responsive (Tailwind) --- */

/* lg: >= 1024px — desktop nav/actions appear, mobile toggle hides */
@media (min-width: 1024px) {
  .site-header__bar {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .site-nav,
  .site-header__actions {
    display: flex;
  }
  .site-header__toggle {
    display: none;
  }
  .site-footer__inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* md: >= 768px — footer rows go horizontal, link grid widens to 4 columns */
@media (min-width: 768px) {
  .site-footer__top,
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .site-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}