/* ── AppZip · components (Fase C) ────────────────────────────────────────────
   Header, menu, footer and buttons. Reads only tokens/theme/fontset, so every
   theme and fontset restyles these for free. Loaded after fontset.css and before
   site.css so the legacy element styling can still override page-body specifics. */

/* ── Skip link (a11y) — visible on focus only ───────────────────────────── */
.skip-link {
  position: absolute; left: var(--space-2); top: -3rem; z-index: 300;
  background: var(--primary); color: var(--on-primary);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  text-decoration: none; transition: top var(--motion-fast) var(--easing);
}
.skip-link:focus { top: var(--space-2); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-fast) var(--easing),
              border-color var(--motion-fast) var(--easing);
}
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--block { width: 100%; }
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--link); font: inherit; text-decoration: underline;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  transition: transform var(--motion-base) var(--easing),
              background-color var(--motion-base) var(--easing);
}
/* Past the hero (JS sets data-elevated="true"): solid surface + hairline. */
.site-header[data-elevated="true"] {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* Auto-hide on scroll down (JS toggles .is-hidden). */
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
  display: flex; align-items: center; gap: var(--space-5);
  height: 72px;
}
.site-header__actions { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }

.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); }
.brand__logo { max-height: 36px; display: block; }
.brand__word { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-h5); }
.brand__accent { color: var(--primary); }

/* ── Desktop nav ─────────────────────────────────────────────────────────── */
.site-nav--bar .site-nav__list {
  display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0;
}
.site-nav__link {
  position: relative; text-decoration: none; color: var(--text);
  font-weight: var(--fw-bold); padding-block: var(--space-2);
}
.site-nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--primary); transition: width var(--motion-fast) var(--easing);
}
.site-nav__link:hover { color: var(--primary); }
.site-nav__link:hover::after { width: 100%; }
.site-nav__link.is-current { color: var(--primary); }
.site-nav__link.is-current::after { width: 100%; }

/* ── Language switcher ───────────────────────────────────────────────────── */
.lang-switcher { display: inline-flex; gap: var(--space-2); font-size: var(--fs-small); }
.lang-switcher a { text-decoration: none; color: var(--text-muted); }
.lang-switcher a.is-current { color: var(--primary); font-weight: var(--fw-bold); }

/* ── Hamburger + mobile panel ────────────────────────────────────────────── */
.hamburger {
  display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  position: relative;
}
.hamburger__bar, .hamburger__bar::before, .hamburger__bar::after {
  content: ""; position: absolute; left: 10px; width: 24px; height: 2px; background: var(--text);
  transition: transform var(--motion-fast) var(--easing), opacity var(--motion-fast) var(--easing);
}
.hamburger__bar { top: 21px; }
.hamburger__bar::before { top: -7px; } .hamburger__bar::after { top: 7px; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  transform: translateX(100%); transition: transform var(--motion-base) var(--easing);
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__inner { display: flex; flex-direction: column; height: 100%; padding: var(--space-5); }
.mobile-menu__head { display: flex; justify-content: flex-end; }
.mobile-menu__close { width: 44px; height: 44px; border: 0; background: none; font-size: var(--fs-h3); cursor: pointer; color: var(--text); }
.site-nav--panel .site-nav__list { list-style: none; margin: var(--space-6) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.site-nav--panel .site-nav__link { font-size: var(--fs-h4); }
.mobile-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--secondary); color: var(--neutral-50); margin-top: var(--space-9); }
.site-footer__inner { padding-block: var(--space-8); }
.site-footer__cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  flex-wrap: wrap; padding-bottom: var(--space-7); border-bottom: 1px solid rgba(255,255,255,0.12);
}
.site-footer__cta-text { font-family: var(--font-heading); font-size: var(--fs-h4); margin: 0; }
.site-footer__cols {
  display: grid; gap: var(--space-6); padding-block: var(--space-7);
  grid-template-columns: repeat(2, 1fr);
}
/* Explicit light colour: the class beats the global `h2 { color: var(--indigo) }`
   (site.css) on specificity, so the titles stay legible on the dark footer. */
.footer-col__title { font-size: var(--fs-h6); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); color: var(--neutral-50); }
.footer-col__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col__list a, .footer-col__list .linklike { color: var(--neutral-200); text-decoration: none; font-size: var(--fs-small); }
.footer-col__list a:hover { color: #fff; }
.site-footer__company { font-style: normal; font-size: var(--fs-small); color: var(--neutral-300); padding-block: var(--space-5); }
.site-footer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.12);
}
.site-footer .social { display: flex; gap: var(--space-4); }
.site-footer .social a { color: var(--neutral-200); text-decoration: none; font-size: var(--fs-small); }
.copyright { font-size: var(--fs-small); color: var(--neutral-300); margin: 0; }

/* ── Plain page main ─────────────────────────────────────────────────────────
   For pages that carry no grid of content elements — the 404 and the two
   accessibility pages. The legacy `main { display: grid }` in site.css turns
   every <main> into a 12-column grid, which squeezed their single .container
   into one cell (the off-to-the-left 404). This class opts the page out of that
   grid back into normal flow; the qualifier `main.page-plain` outranks the bare
   `main` selector on specificity, so load order doesn't matter. The inner
   .container still handles max-width and side margins. */
main.page-plain { display: block; padding-block: var(--space-8); }

/* ── Responsive: swap desktop nav for hamburger below md (48em) ──────────── */
@media (max-width: 48em) {
  .site-nav--bar { display: none; }
  .hamburger { display: block; }
  .site-header__actions .btn--primary { display: none; } /* CTA lives in the panel on mobile */
}
@media (min-width: 48em) {
  .site-footer__cols { grid-template-columns: repeat(4, 1fr); }
}

/* ── Platform widgets (Phase E): FAB bar, chatbot, cookie banner, popovers ── */
/* The HTML 'hidden' attribute must win over the display:flex/grid these widgets
   set: a class-level 'display' otherwise overrides hidden's user-agent
   display:none, leaving an "empty box" on screen. Scoped to the widget components
   so it never fights the rest of the sheet. */
.az-privacy[hidden],
.az-share-menu[hidden],
.az-chat__panel[hidden] { display: none !important; }
/* The floating stack is pinned to the RIGHT EDGE OF THE CONTENT column, not the
   raw viewport edge: on wide screens it tucks in level with the page gutter
   instead of hugging the glass. --fab-right resolves to the plain gutter until the
   viewport grows past the content max-width, then tracks the content margin. All
   floating pieces (bar, share menu, chat, popover) share it so they stay aligned. */
:root { --fab-right: max(var(--space-4), calc((100vw - var(--container-max)) / 2 + var(--margin-side))); }
/* Left mirror of --fab-right (fixed18.2bis-C): same distance from the content edge,
   used by the share bar and its menu so they hug the left gutter symmetrically. */
:root { --fab-left: max(var(--space-4), calc((100vw - var(--container-max)) / 2 + var(--margin-side))); }
.az-fab-bar {
  position: fixed; right: var(--fab-right); bottom: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2); z-index: 150;
}
/* Left-hand share bar: same stack, mirrored to the left edge. */
.az-fab-bar--left { right: auto; left: var(--fab-left); }
.az-fab {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); cursor: pointer; font-size: var(--fs-body-l);
  box-shadow: var(--shadow-1);
}
.az-fab:hover { border-color: var(--primary); color: var(--primary); }
/* Inline-SVG icons (Phase E fix): the glyph now rides on currentColor, so it
   tracks the button's colour on hover and in every theme. The wrapper centres
   the SVG; the SVG itself carries no colour of its own. */
.az-icon { display: inline-flex; align-items: center; justify-content: center; }
.az-fab .az-icon svg { width: 20px; height: 20px; }
/* WhatsApp keeps its recognisable green; QR uses the neutral surface. Both pair
   the colour with an icon and an aria-label, so meaning never rests on colour. */
.az-fab--whats { background: #25D366; color: #fff; border-color: #1da851; }
.az-fab--whats:hover { background: #1da851; color: #fff; }
.az-fab--share { background: var(--surface); }
.az-fab--share:hover { border-color: var(--primary); color: var(--primary); }

/* Share menu: a small popover anchored above the FAB bar, aligned to the same
   content-edge as the bar. Channels sit in an icon row; the copy action sits on
   its own line below, so the icons read as a group and the text as an action. */
.az-share-menu {
  position: fixed; left: var(--fab-left); bottom: calc(var(--space-8) + 3rem);
  z-index: 160; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-2);
  padding: var(--space-2); overflow: hidden;
  display: flex; flex-wrap: wrap; gap: var(--space-1); max-width: 14rem;
}
.az-share-menu__item {
  padding: var(--space-3) var(--space-4); text-decoration: none;
  color: var(--text); background: none; border: 0; text-align: left;
  font: inherit; cursor: pointer; border-radius: var(--radius-sm);
}
.az-share-menu__item:hover { background: var(--surface); color: var(--primary); }
/* Channel icons: square tap targets in the row; icon inherits currentColor. */
.az-share-menu__channel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
}
.az-share-menu__channel .az-icon svg { width: 22px; height: 22px; }
/* Brand-filled channels (fixed18.3bis): each tile carries its app colour with a
   white glyph, mirroring the per-element share pills. data-channel is set by
   widgets.js from the channel key; the label lives on aria-label, so colour is a
   reinforcement, not the only cue. */
.az-share-menu__channel[data-channel] { color: #fff; border-radius: var(--radius-sm); }
.az-share-menu__channel[data-channel="facebook"] { background: #1877F2; }
.az-share-menu__channel[data-channel="x"]        { background: #000000; }
.az-share-menu__channel[data-channel="linkedin"] { background: #0A66C2; }
.az-share-menu__channel[data-channel="whatsapp"] { background: #25D366; }
/* Keep the brand fill on hover (the generic .item:hover would otherwise repaint it
   with --surface); we only dim slightly. Per-channel so background stays branded. */
.az-share-menu__channel[data-channel="facebook"]:hover { background: #1877F2; opacity: 0.88; color: #fff; }
.az-share-menu__channel[data-channel="x"]:hover        { background: #000000; opacity: 0.88; color: #fff; }
.az-share-menu__channel[data-channel="linkedin"]:hover { background: #0A66C2; opacity: 0.88; color: #fff; }
.az-share-menu__channel[data-channel="whatsapp"]:hover { background: #25D366; opacity: 0.88; color: #fff; }
/* Copy link takes the full row under the icons and keeps its text. */
.az-share-menu__copy {
  flex-basis: 100%; text-align: center; margin-top: var(--space-1);
  border-top: 1px solid var(--border); border-radius: 0;
}

.az-chat { position: fixed; right: var(--fab-right); bottom: var(--space-8); z-index: 160; }
.az-chat__fab {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary); color: var(--on-primary); font-size: var(--fs-h4);
  box-shadow: var(--shadow-2);
}
.az-chat__panel {
  position: absolute; right: 0; bottom: 68px; width: 320px; max-width: 90vw;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2); display: flex; flex-direction: column; overflow: hidden;
}
.az-chat__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3); background: var(--surface); border-bottom: 1px solid var(--border);
  font-weight: var(--fw-medium);
}
.az-chat__fab .az-icon svg { width: 26px; height: 26px; }
.az-chat__close { border: 0; background: none; font-size: var(--fs-h4); cursor: pointer; color: var(--text); }
.az-chat__close .az-icon svg { width: 20px; height: 20px; }
.az-chat__log { padding: var(--space-3); min-height: 8rem; max-height: 16rem; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); }
.az-chat__input { border: 0; border-top: 1px solid var(--border); padding: var(--space-3); font: inherit; }
.az-chat__input:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; }

/* Compliant cookie banner (pryspec). A bottom card, not a bar: it carries a title,
   intro, an optional policy link, a per-category toggle list and three symmetric
   actions. Constrained in width and pinned bottom-centre so it reads as a dialog. */
.az-privacy {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: var(--space-4); width: min(720px, calc(100% - 2 * var(--space-4)));
  z-index: 170; background: var(--secondary); color: var(--neutral-50);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
  box-shadow: var(--shadow-2);
}
/* .az-privacy[hidden] is handled by the shared widget rule near the top of this
   section, so it is not repeated here. */
.az-privacy__body { display: flex; flex-direction: column; gap: var(--space-2); }
.az-privacy__title { margin: 0; font-size: var(--fs-h5); font-weight: var(--fw-bold); }
.az-privacy__intro { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
.az-privacy__policy { color: var(--neutral-50); text-decoration: underline; font-size: var(--fs-small); }
.az-privacy__policy:hover { opacity: 0.85; }

/* Category toggles, wrapping so a short list stays on one line and a long one flows. */
.az-privacy__cats {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin-top: var(--space-1);
}
.az-privacy__cat {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-small); cursor: pointer;
}
.az-privacy__cat input[disabled] { cursor: not-allowed; }

/* Three symmetric actions, right-aligned; they wrap to full width on narrow screens. */
.az-privacy__actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3);
}
.az-privacy__actions .btn { flex: 0 1 auto; }
@media (max-width: 30rem) {
  .az-privacy__actions .btn { flex: 1 1 100%; }
}
/* (Removed in fixed17.6) .az-popover rules dropped with the QR popover. */

/* ── Chatbot conversation (Lotto F) ─────────────────────────────────────────
   Bubble thread, preset chips, intake form and the context/scope modal. Styled
   with the theme tokens so it sits inside the existing .az-chat panel. Motion is
   left to the panel's own transitions, already reduced-motion aware. */
.az-chat-bubble {
  max-width: 85%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  word-wrap: break-word;
}
.az-chat-bot {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.az-chat-user {
  align-self: flex-end;
  background: var(--primary);
  color: var(--on-primary);
}
.az-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.az-chat-chip {
  border: 1px solid var(--primary);
  background: var(--bg);
  color: var(--primary);
  border-radius: var(--radius-lg);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.az-chat-chip:hover { background: var(--primary); color: var(--on-primary); }
.az-chat-chip:focus-visible { outline: var(--focus-width) solid var(--focus-ring); }
.az-chat-form,
.az-chat-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.az-chat-modal-title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  color: var(--text);
}
.az-chat-field,
.az-chat-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font: inherit;
  font-size: var(--fs-small);
  background: var(--bg);
  color: var(--text);
}
.az-chat-field:focus-visible,
.az-chat-select:focus-visible { outline: var(--focus-width) solid var(--focus-ring); }
.az-chat-send {
  align-self: flex-end;
  border: 0;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.az-chat-send:hover { background: var(--primary-hover); }
.az-chat-send:focus-visible { outline: var(--focus-width) solid var(--focus-ring); }

/* ── Booking calendar (Lotto F / SCEGLIERE, PROPORRE) ───────────────────────
   The times free on a chosen day, as a wrap of buttons. Sized for a thumb:
   the widget is used on phones as much as anywhere. */
.az-chat-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.az-chat-slot {
  border: 1px solid var(--primary);
  background: var(--bg);
  color: var(--primary);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  min-height: 40px;
  cursor: pointer;
}
.az-chat-slot:hover { background: var(--primary); color: var(--on-primary); }
.az-chat-slot:focus-visible { outline: var(--focus-width) solid var(--focus-ring); }
.az-chat-send[disabled] { opacity: 0.6; cursor: default; }