/* =============================================================================
 * style.css — Vivetra marketing site (vivetra.vet) — global styles
 * Version: 1.1
 * Last Updated: 2026-08-02
 *
 * PROJECT: Vivetra (project v0.80) — vivetra-vet component (public marketing
 *          site). Companion: css/pages.css (page-specific styles, filled in by
 *          per-page agents). This file owns the global layer only.
 *
 * FILE CONTEXT:
 *   ROLE:   the site-wide stylesheet loaded on every page by html/header.php,
 *           BEFORE css/pages.css so page rules can override globals. Provides:
 *           reset, :root design tokens (light + dark), a simple grid, spacing
 *           utilities, the site chrome (header / nav / currency switcher /
 *           consent banner / footer) that header.php + footer.php render, the
 *           native <details class="faq-item"> accordion, and the .legal-note
 *           disclaimer block.
 *   SCOPE:  no external assets — the brand mark is text, the favicon is an
 *           inline data-URI in header.php. Nothing here fetches a font, image,
 *           or CDN resource (total-isolation rule + fast first paint).
 *
 * ARCHITECTURE:
 *   - THEME-AWARE. Tokens are defined light-first on :root, with a
 *     prefers-color-scheme: dark override — so the site reads correctly in
 *     either OS theme without a toggle to maintain.
 *   - SPACING SCALE MATCHES THE UTILITY NAMES. --space-N == N * 0.25rem, so
 *     .u-mt-4 (1rem) / .u-mb-8 (2rem) etc. line up with the token names and
 *     stay predictable — one scale, no magic numbers scattered in rules.
 *   - FAQ ACCORDION IS NATIVE <details>, NOT A CHECKBOX HACK. Keyboard- and
 *     screen-reader-correct for free; CSS only removes the default marker and
 *     rotates a chevron on [open]. No JS needed for it to work.
 *   - CONSENT ACCEPT/REJECT ARE VISUALLY EQUAL. Both use .btn--consent with
 *     identical weight — a deliberate no-dark-pattern choice (MARKETING-SITE.md
 *     §5), not an oversight.
 *
 * CHANGE LOG:
 * v1.0    2026-07-24  Claude  Initial global stylesheet: reset, light/dark
 *         tokens, container + grid, spacing/sr-only/margin utilities, site
 *         chrome (header, brand, nav + mobile toggle, module dropdown,
 *         currency switcher, buttons/CTA, consent banner, footer, skip link),
 *         native <details class="faq-item"> accordion, and .legal-note.
 * v1.0.1  2026-08-02  Claude  Matched --font-heading/--font-body to
 *         ardingate.com's own --font-sans stack ("Segoe UI", system-ui,
 *         -apple-system, sans-serif) at the user's request. Was Georgia/
 *         Times New Roman serif for headings, a differently-ordered sans
 *         stack for body (-apple-system first, so Mac/iOS rendered San
 *         Francisco, not Segoe UI). Same no-web-fonts, no-@font-face
 *         constraint as before — still a pure system stack, just the
 *         identical one ardingate.com uses, no shared code/file between
 *         the two sites (no-cross-reference-sites rule; this is a
 *         values-only match, not a dependency).
 * v1.1    2026-08-02  Claude  Aggressive mobile-hardening pass, matching
 *         ardingate.com's rigor (44px WCAG 2.5.5 touch targets, small-phone
 *         breakpoint) at the user's request.
 *         - -webkit-tap-highlight-color:transparent on body.
 *         - .btn gets min-height:44px globally (covers .btn--cta and
 *           .btn--consent, which both compose it).
 *         - Mobile-menu-scoped 44px targets for nav links, the module/
 *           service dropdown trigger and its menu items, and the currency
 *           switcher's select + go button — scoped inside the existing
 *           max-width:899px block so the desktop header's compact height is
 *           unaffected (matches ardingate's own header.css pattern of
 *           scoping nav-link touch-sizing to its mobile breakpoint only).
 *         - .nav-toggle bumped from 2.6rem (41.6px, under the 44px floor)
 *           to an explicit min-width/min-height:44px.
 *         - .faq-item summary gets an explicit min-height:44px.
 *         - New max-width:480px small-phone block: tighter container/
 *           header/footer/consent-banner side padding (claims back usable
 *           width rather than shrinking anything below a tappable size);
 *           .consent-banner__actions stacks its two buttons vertically
 *           instead of risking overflow when both min-width:8rem buttons +
 *           gap don't fit a 320-360px screen; .site-footer__inner stacks.
 * ========================================================================== */

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

ul[class], ol[class] { list-style: none; padding: 0; }

body {
  min-height: 100vh;
  min-width: 320px;
  overflow-x: hidden;               /* iOS Safari horizontal-overflow guard */
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-link-hover); }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-heading);
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }

:target { scroll-margin-top: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --color-primary:        #0f766e;   /* teal-700 */
  --color-primary-strong: #115e59;   /* teal-800 */
  --color-primary-soft:   #ccfbf1;   /* teal-100 */
  --color-accent:         #b45309;   /* amber-700, for occasional emphasis */

  /* Surfaces + text (light) */
  --color-bg:        #ffffff;
  --color-surface:   #f8fafc;
  --color-surface-2: #f1f5f9;
  --color-border:    #e2e8f0;
  --color-text:      #1f2933;
  --color-muted:     #52606d;
  --color-heading:   #0b1f24;
  --color-link:        var(--color-primary);
  --color-link-hover:  var(--color-primary-strong);

  /* Header/footer chrome */
  --header-bg:      rgba(255, 255, 255, 0.92);
  --header-border:  var(--color-border);
  --footer-bg:      #0b1f24;
  --footer-text:    #cbd5e1;
  --footer-link:    #e2e8f0;

  /* Type */
  --font-heading: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Spacing scale — --space-N == N * 0.25rem (matches .u-*-N utilities) */
  --space-0: 0;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radii + shadow + layout */
  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 1px 2px rgba(11, 31, 36, 0.06), 0 8px 24px rgba(11, 31, 36, 0.08);
  --shadow-sm: 0 1px 2px rgba(11, 31, 36, 0.08);
  --container: 1120px;
  --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary:        #2dd4bf;   /* teal-400 — lifts on dark */
    --color-primary-strong: #5eead4;
    --color-primary-soft:   #134e4a;
    --color-accent:         #fbbf24;

    --color-bg:        #0b1220;
    --color-surface:   #111a2b;
    --color-surface-2: #16233a;
    --color-border:    #263449;
    --color-text:      #e2e8f0;
    --color-muted:     #94a3b8;
    --color-heading:   #f1f5f9;
    --color-link:        var(--color-primary);
    --color-link-hover:  var(--color-primary-strong);

    --header-bg:      rgba(11, 18, 32, 0.92);
    --header-border:  var(--color-border);
    --footer-bg:      #060b14;
    --footer-text:    #94a3b8;
    --footer-link:    #cbd5e1;

    --shadow:    0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.5);
  }
}

/* Visible, consistent keyboard focus everywhere */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ── Layout: container + simple grid ───────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Any wide block (tables, matrices) scrolls inside itself, never the page */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Utilities ─────────────────────────────────────────────────────────────── */
.u-mt-0  { margin-top: var(--space-0); }
.u-mt-2  { margin-top: var(--space-2); }
.u-mt-4  { margin-top: var(--space-4); }
.u-mt-6  { margin-top: var(--space-6); }
.u-mt-8  { margin-top: var(--space-8); }
.u-mt-12 { margin-top: var(--space-12); }
.u-mt-16 { margin-top: var(--space-16); }

.u-mb-0  { margin-bottom: var(--space-0); }
.u-mb-2  { margin-bottom: var(--space-2); }
.u-mb-4  { margin-bottom: var(--space-4); }
.u-mb-6  { margin-bottom: var(--space-6); }
.u-mb-8  { margin-bottom: var(--space-8); }
.u-mb-12 { margin-bottom: var(--space-12); }
.u-mb-16 { margin-bottom: var(--space-16); }

.u-ml-4 { margin-left: var(--space-4); }
.u-ml-6 { margin-left: var(--space-6); }
.u-ml-8 { margin-left: var(--space-8); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Skip link ─────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3rem;
  z-index: 100;
  background: var(--color-primary);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-2); color: #fff; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;                 /* WCAG 2.5.5 touch-target minimum */
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn--cta {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--cta:hover { background: var(--color-primary-strong); color: #fff; }

/* ── Site header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--header-border);
}
.site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.65rem var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--color-heading);
  font-weight: 700;
  margin-right: auto;
}
.brand__mark {
  display: inline-grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 7px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1;
}
.brand__word {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}

/* Primary nav */
.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1 1 auto;
  justify-content: flex-end;
}
.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
}
.primary-nav__list a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  padding: 0.35rem 0;
  white-space: nowrap;
}
.primary-nav__list a:hover { color: var(--color-primary); }
.primary-nav__list a[aria-current="page"] {
  color: var(--color-primary);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Modules dropdown (native <details>) */
.nav-dropdown { position: relative; }
.nav-dropdown__details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  padding: 0.35rem 0;
  white-space: nowrap;
  color: var(--color-text);
}
.nav-dropdown__details > summary::-webkit-details-marker { display: none; }
.nav-dropdown__details > summary:hover { color: var(--color-primary); }
.nav-dropdown__summary[aria-current="true"] { color: var(--color-primary); }
.nav-dropdown__chevron {
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-top: -0.2rem;
}
.nav-dropdown__details[open] > summary .nav-dropdown__chevron { transform: rotate(-135deg); margin-top: 0.15rem; }
.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 12rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.4rem;
  display: grid;
  gap: 0.1rem;
  z-index: 60;
}
.nav-dropdown__menu a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
}
.nav-dropdown__menu a:hover { background: var(--color-surface-2); color: var(--color-primary); }
.nav-dropdown__menu a[aria-current="page"] { color: var(--color-primary); font-weight: 600; }

/* Currency switcher */
.currency-switcher { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.currency-switcher__select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 1.8rem 0.4rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 0.95rem) 55%,
    calc(100% - 0.6rem) 55%;
  background-size: 0.32rem 0.32rem, 0.32rem 0.32rem;
  background-repeat: no-repeat;
}
.currency-switcher__go {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

/* Mobile nav toggle — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 44px; min-height: 44px; /* WCAG 2.5.5 touch-target minimum */
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text);
  border-radius: 2px;
}

/* Mobile layout */
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
  }
  .site-header { position: sticky; }
  .site-header__inner { position: relative; }
  .site-header--nav-open .primary-nav { display: flex; }
  .primary-nav__list { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  /* Touch-target sizing (WCAG 2.5.5) — every tappable nav row is at least
     44px tall, scoped to the mobile menu only so the desktop nav stays at
     its normal compact height. */
  .primary-nav__list a,
  .nav-dropdown__details > summary,
  .nav-dropdown__menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-dropdown__menu {
    position: static;
    box-shadow: none;
    border: none;
    padding-left: var(--space-4);
    background: transparent;
  }
  .header-actions { flex-wrap: wrap; gap: var(--space-4); }
  .btn--cta { width: 100%; }
  .currency-switcher { width: 100%; }
  .currency-switcher__select { flex: 1 1 auto; min-height: 44px; }
  .currency-switcher__go { min-height: 44px; }
}

/* ── Consent banner (UK/IE only; equal-prominence buttons) ─────────────────── */
.consent-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}
.consent-banner__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}
.consent-banner__text { flex: 1 1 20rem; }
.consent-banner__title { font-weight: 700; color: var(--color-heading); margin-bottom: 0.25rem; }
.consent-banner__body { color: var(--color-muted); font-size: 0.95rem; }
.consent-banner__actions { display: flex; gap: var(--space-4); flex: 0 0 auto; }
@media (max-width: 480px) {
  /* Two min-width:8rem buttons + gap risk overflow on the narrowest phones —
     stack them instead of shrinking below a tappable size. */
  .consent-banner__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .btn--consent { min-width: 0; width: 100%; }
}
.btn--consent {
  background: var(--color-surface-2);
  color: var(--color-heading);
  border: 1px solid var(--color-border);
  min-width: 8rem;
  font-weight: 600;
}
.btn--consent:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: var(--space-16);
  background: var(--footer-bg);
  color: var(--footer-text);
}
.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.site-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0;
}
.site-footer__legal-list a { color: var(--footer-link); text-decoration: none; }
.site-footer__legal-list a:hover { color: #fff; text-decoration: underline; }
.site-footer__copyright { color: var(--footer-text); font-size: 0.9rem; }

/* ── FAQ accordion — native <details>, NOT a checkbox hack ─────────────────── */
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;                 /* WCAG 2.5.5 touch-target minimum */
  padding: var(--space-4) var(--space-6);
  font-weight: 600;
  color: var(--color-heading);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--color-primary); }
.faq-toggle {
  flex: 0 0 auto;
  width: 0.6rem; height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.faq-item[open] > summary .faq-toggle { transform: rotate(-135deg); }
.faq-item[open] > summary { color: var(--color-primary); }
.faq-item__body { padding: 0 var(--space-6) var(--space-6); color: var(--color-muted); }

/* ── Legal / compliance disclaimer block ───────────────────────────────────── */
.legal-note {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-muted);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-6);
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* ── Small-phone tightening (320-480px) ──────────────────────────────────────
   Everything above already reflows correctly at any width down to 320px (the
   body min-width floor) via the fluid grid/clamp() system — this block only
   claims back a bit more usable edge-to-edge width and fixes two components
   that use fixed padding wide enough to feel cramped on the smallest phones. */
@media (max-width: 480px) {
  .container,
  .site-header__inner,
  .site-footer__inner,
  .consent-banner__inner {
    padding-inline: var(--space-4);
  }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .faq-item > summary { padding: var(--space-4); }
  .faq-item__body { padding: 0 var(--space-4) var(--space-4); }
  .legal-note { padding: var(--space-4); }
}
.legal-note strong { color: var(--color-text); }