/* =========================================================
   VirtaMove — base.css
   Reset + design tokens from the VirtaMove style guide.
   Primary:   #005AA4  #00A8C5  #10416B  #0E122F
   Secondary: #45B64B  #FBE734  #50BE97  #6CC8CA
   Signature gradient: linear-gradient(120deg, #005AA4, #00A8C5 55%, #50BE97)
   Fonts:  Lato Heavy 900 (headings) + Poppins 400/500/600 (body / UI)
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;   /* stop iOS Safari inflating text in landscape */
  text-size-adjust: 100%;
  scroll-padding-top: 7.5rem;        /* keep #anchor targets clear of the sticky header */
  -webkit-tap-highlight-color: transparent;
}
html:focus-within { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;                 /* guard against incidental horizontal scroll (keeps sticky working) */
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }

:root {
  /* Brand palette — style guide */
  --color-primary:       #005AA4;
  --color-primary-cyan:  #00A8C5;
  --color-primary-deep:  #10416B;
  --color-navy:          #0E122F;

  --color-green:         #45B64B;  /* conversion / confirmation only */
  --color-yellow:        #FBE734;  /* one urgency badge per page — never body text */
  --color-mint:          #50BE97;
  --color-cyan-soft:     #6CC8CA;

  --gradient-signature:  linear-gradient(120deg, #005AA4, #00A8C5 55%, #50BE97);
  --gradient-hero:       linear-gradient(180deg, #10416B 0%, #1A5C92 100%);

  /* Semantic aliases — balanced tone: dark anchors, light content body. */
  --color-bg-dark:      var(--color-navy);        /* hero / footer / article header */
  --color-header:       var(--color-primary-deep);/* sticky header bar */
  --color-header-2:     #0b2a48;
  --color-accent:       var(--color-primary);     /* interactive text on LIGHT surfaces */
  --color-accent-dark:  #003f75;                  /* its hover */
  --color-accent-on-dark: #6CC8CA;                /* eyebrows / links on DARK surfaces */

  /* Neutrals */
  --color-ink:          var(--color-navy);
  --color-body:         #33384a;
  --color-body-invert:  #cfd6e4;   /* light text on the dark anchor bands */
  --color-muted:        #5b6472;
  --color-line:         #dde4ec;
  --color-line-dark:    rgba(255,255,255,0.12);
  --color-surface:      #ffffff;
  --color-surface-alt:  #f4f7fb;   /* light grey-blue section */
  --color-surface-tint: #e9f1f8;   /* light blue feature band (former navy .section--dark) */

  /* calculator.css / pagination aliases */
  --color-heading:      var(--color-ink);
  --color-border:       var(--color-line);
  --font-heading:       var(--font-display);
  --radius-sm:          0.375rem;
  --radius-md:          0.75rem;

  /* Type — Lato Heavy 900 headings, Poppins body */
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Lato", "Poppins", system-ui, sans-serif;

  --fs-100: 0.875rem;
  --fs-200: 1rem;
  --fs-300: 1.125rem;
  --fs-400: 1.25rem;
  --fs-500: 1.5rem;
  --fs-600: 2rem;
  --fs-700: 2.5rem;
  --fs-800: 3.25rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Fluid rhythm — scales smoothly from phone to desktop */
  --section-pad:  clamp(2.75rem, 6vw, 6rem);
  --section-pad-tight: clamp(2rem, 4vw, 3rem);
  --gutter:       clamp(1rem, 4vw, 2rem);

  --container: 72rem;
  --container-narrow: var(--container);   /* inner pages share the homepage width */
  --radius: 0.5rem;
  --radius-lg: 1rem;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(11, 20, 47, 0.12);

  --transition: 180ms ease;
}

body {
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-surface);
  font-size: var(--fs-200);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, var(--fs-800)); }
h2 { font-size: clamp(1.5rem, 2vw + 1rem, var(--fs-700)); }
h3 { font-size: clamp(1.25rem, 1vw + 1rem, var(--fs-500)); }
h4 { font-size: clamp(1.125rem, 0.5vw + 1rem, var(--fs-400)); }

p + p, p + ul, p + ol { margin-top: var(--space-4); }

a {
  color: var(--color-header);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
a:hover { color: var(--color-accent-dark); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Skip link (and any focusable sr-only control) becomes visible on keyboard focus */
a.sr-only:focus {
  position: fixed; top: var(--space-3); left: var(--space-3);
  width: auto; height: auto; margin: 0; clip: auto; white-space: normal;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-header); color: #fff;
  border-radius: var(--radius); text-decoration: none;
  box-shadow: var(--shadow-md);
}
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

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