/**
 * EPCM Child Theme — design system
 *
 * Tokens from the Figma style guide, plus the base element styles that apply
 * them. Component styles are built per-feature as the markup is written.
 */

:root {
  /* Brand colours */
  --epcm-navy: #121b3c;
  --epcm-green: #75af00;
  --epcm-blue: #2c5075;
  --epcm-blue-light: #0097e9;
  --epcm-teal: #27c0b7;
  --epcm-gray: #777777;
  --epcm-gray-light: #d0d0d1;
  --epcm-off-white: #f9f9f9;
  --epcm-white: #ffffff;

  --epcm-gradient-hero: linear-gradient(135deg, #121b3c 0%, #2c5075 100%);
  --epcm-gradient-nav: linear-gradient(180deg,
      rgba(18, 27, 60, 0.95) 0%,
      rgba(44, 80, 117, 0.9) 100%);
  /* --epcm-gradient-cta: linear-gradient(90deg, #0097e9 0%, #75af00 100%); */
  --epcm-gradient-cta: linear-gradient(90deg, #0097E9 0%, #0097E9 11.58%, #27C0B7 61.46%, #63B32A 100%);

  /* Typography */
  --font-primary: "Poppins", sans-serif;
  --font-secondary: "Inter", sans-serif;

  --fs-display: 36px;
  --fs-h1: 28px;
  --fs-h2: 26px;
  --fs-h3: 23px;
  --fs-h4: 22px;
  --fs-h5: 20px;
  --fs-h6: 17px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-micro: 12px;

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 146px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  /* Layout */
  --container-max: 1320px;
  --container-wide: 1920px;
  --gutter: 30px;
  --card-gap: 25px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(18, 27, 60, 0.08);
  --shadow-hover: 0 6px 24px rgba(18, 27, 60, 0.14);

  --ease-default: 180ms ease-out;

  /* Accessibility: the keyboard focus ring. Light blue shows against both the
     white pages (3.2:1) and the navy header and footer (5.3:1). */
  --epcm-focus: var(--epcm-blue-light);
  --epcm-focus-ring: 3px solid var(--epcm-focus);
}

/* Mobile scale */

@media (max-width: 768px) {
  :root {
    --fs-display: 28px;
    --fs-h1: 24px;
    --fs-h2: 22px;
    --fs-h3: 20px;
    --fs-h4: 18px;
    --gutter: 16px;
    --card-gap: 16px;
  }
}

/* Base elements
   Delete this block if the team would rather drive typography and colour from
   the Astra Customizer. The tokens above stand on their own either way. */

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--epcm-navy);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--epcm-blue-light);
  transition: color var(--ease-default);
}

a:hover,
a:focus {
  color: var(--epcm-teal);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  font-weight: 600;
  line-height: var(--lh-tight);
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
}

h5 {
  font-size: var(--fs-h5);
}

h6 {
  font-size: var(--fs-h6);
}

/* Accessibility
   Keyboard users must always see where they are on the page. Astra removes
   the outline from buttons and submit inputs, so these selectors are written
   out plainly (not inside :where()) to be strong enough to put it back.
   :focus-visible only shows the ring for the keyboard, not for mouse clicks.
   Elements with tabindex="-1" are skipped: scripts focus those (a results
   list, a message) to move screen readers, and a ring there looks broken. */

a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
input[type="submit"]:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--epcm-focus-ring);
  outline-offset: 2px;
}

/* Visitors who ask their device for less motion get instant scrolling and
   near-instant transitions everywhere. (0.01ms rather than 0, so scripts
   waiting for a "transitionend" event still get it.) The carousel's own
   scrolling is handled in assets/js/carousel.js. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}