/* ===============================================================
   HCBI main stylesheet
   Design tokens, reset, base typography, layout, header, footer.
   Component and interactive styles live in components.css.
   Media queries live in responsive.css.
   =============================================================== */

/* ---------------------------------------------------------------
   DESIGN TOKENS
--------------------------------------------------------------- */
:root {
  /* Colors */
  --navy: #0B0B45;
  --green: #6C9934;
  /* Was #5a7f2b. That is the colour of every link in body copy on the
     site, and it measured 4.66:1 on white, 4.43:1 on the panel grey and
     4.21:1 on the .alt-bg wash: one clear failure and no margin
     anywhere else. #4E7024 is the same hue darkened to clear 4.5:1 on
     every ground the site actually uses, 5.17:1 at worst.

     It is also used as a background in one place, .admin-btn:hover,
     where the text is --text-light. Darkening a background under white
     text moves contrast the other way, which here means up: 4.66 to
     5.73:1. Nothing puts dark text on it.

     Not to be confused with --sk-green-dark, which is undefined and
     whose two uses in pages.css resolve to their literal #5a7f2b
     fallback. Those are unaffected by this line. */
  --green-dark: #4E7024;
  --black: #0a0a0a;
  --white: #FFFFFF;
  --light-gray: #F5F5F5;
  --border-gray: #E5E5E5;
  --text-dark: #1a1a2e;
  --text-light: #FFFFFF;
  --text-muted: #5a5a6e;

  /* Typography */
  /* Headings are MONTSERRAT. Phase 1 put Sora here, replacing the
     Montserrat this site launched on; the brief for this pass puts
     Montserrat back. Inter still replaces Open Sans for body copy and is
     not touched. Swapped at the token level so every component that asks
     for a typeface follows without being edited: --font-heading is what
     the admin portal reads too, and admin/layout.php was already loading
     Montserrat 600/700 while --font-heading resolved to Sora, so the
     portal has been rendering a font it did not load. It now matches.
     Mono drops the webfont for a system stack, since it is only used for
     small UI details. */
  --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Font sizes */
  --fs-h1: clamp(2rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 4vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 3vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;

  /* Line heights */
  --lh-heading: 1.2;
  --lh-body: 1.7;
  --lh-ui: 1.5;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  /* One container for the whole site. These match --sk-container and
     --sk-container-pad exactly, so every .container lines up with the
     nav's .sk-w down to the pixel. Changing them here rather than
     overriding .container per page type is what keeps that true. */
  --container-max: 1360px;
  --container-pad: 40px;
  --radius: 4px;
  --header-height: 72px;

  /* Effects */
  --shadow-sm: 0 1px 3px rgba(11, 11, 69, 0.08);
  --shadow-md: 0 4px 16px rgba(11, 11, 69, 0.12);
  --transition: 0.2s ease;

  /* Card system (see components.css, solution.css, hub.css, home.css) */
  --radius-card: 12px;
  --radius-badge: 11px;
  --shadow-card: 0 1px 2px rgba(11,11,69,0.04), 0 4px 14px rgba(11,11,69,0.07);
  --shadow-card-hover: 0 2px 6px rgba(11,11,69,0.06), 0 10px 28px rgba(11,11,69,0.12);

  /* Blue sequence-card + tint tokens */
  --blue-card-bg: #E6F1FB;
  --blue-card-border: #B5D4F4;
  --blue-card-title: #042C53;
  --blue-card-text: #0C447C;
  --blue-tile-bg: #E6F1FB;
  --blue-tile-fg: #185FA5;
  --green-tile-bg: #EAF3DE;
  --green-tile-fg: #3B6D11;
}

/* chrome.css drops .container's padding to 24px at 900px. The token has
   to follow it, or anything sized from --container-pad, the content
   line inset in pages.css above all, keeps insetting by 40 while the
   text beside it has moved to 24.

   Floored at 768px on purpose: below that the brief is that nothing
   moves, and other rules read this token there. */
@media (min-width: 768px) and (max-width: 900px) {
  :root {
    --container-pad: 24px;
  }
}

/* ---------------------------------------------------------------
   RESET
--------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--green-dark);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--navy);
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  color: var(--navy);
  font-weight: 700;
}

h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { line-height: var(--lh-body); }

/* ---------------------------------------------------------------
   LAYOUT
--------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

main {
  display: block;
  min-height: 50vh;
}

section {
  padding: var(--space-xl) 0;
}

/* ---------------------------------------------------------------
   SKIP LINK
--------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: 1000;
  padding: var(--space-xs) var(--space-md);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  transition: top var(--transition);
}

.skip-link:focus {
  top: var(--space-sm);
  color: var(--white);
}

/* ---------------------------------------------------------------
   TRUST BAR (desktop only, hidden under 768px in responsive.css)
--------------------------------------------------------------- */
.trust-bar {
  background: var(--navy);
  color: var(--text-light);
  font-size: var(--fs-small);
}

.trust-bar__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
}

.trust-bar__item {
  position: relative;
  padding-left: var(--space-md);
  font-weight: 600;
}

.trust-bar__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--green);
  border-radius: 50%;
}

/* ---------------------------------------------------------------
   STICKY HEADER
--------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border-gray);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-height);
}

.site-header__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.site-header__logo img {
  width: auto;
  height: 44px;
}

/* Primary nav base layout. Dropdown visuals are in components.css. */
.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.primary-nav__item {
  position: relative;
}

.primary-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--navy);
  line-height: var(--lh-ui);
  border-radius: var(--radius);
  white-space: nowrap;
}

.primary-nav__link:hover,
.primary-nav__item.is-active > .primary-nav__link {
  color: var(--green-dark);
  background: var(--light-gray);
}

.primary-nav__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--transition);
}

.primary-nav__toggle[aria-expanded="true"] .primary-nav__caret {
  transform: rotate(180deg);
}

/* Header actions */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.site-header__phone {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  color: var(--navy);
  font-family: var(--font-heading);
}

.site-header__phone-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.site-header__phone-number {
  font-weight: 700;
  font-size: var(--fs-small);
}

/* Mobile toggle hidden on desktop, shown in responsive.css */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
}

.mobile-nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* ---------------------------------------------------------------
   FOOTER
--------------------------------------------------------------- */
.site-footer {
  background: var(--black);
  color: var(--text-light);
  padding: var(--space-xl) 0 var(--space-lg);
  font-size: var(--fs-small);
}

.site-footer a {
  color: var(--border-gray);
}

.site-footer a:hover {
  color: var(--green);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__logo img {
  height: 44px;
  width: auto;
  margin-bottom: var(--space-sm);
}

/* The NAP blocks use <address>, which browsers italicize by default.
   Normalize it so the address reads as ordinary body copy. */
address {
  font-style: normal;
}

.site-footer__contact-line {
  line-height: 1.9;
  margin-bottom: var(--space-sm);
}

.site-footer__nap-name {
  font-weight: 600;
  color: var(--white);
}

.site-footer__social {
  display: flex;
  gap: var(--space-sm);
}

.site-footer__heading {
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: var(--space-sm);
}

.site-footer__links li {
  margin-bottom: 0.5rem;
}

.site-footer__col--stack nav + nav {
  margin-top: var(--space-md);
}

.site-footer__credential {
  padding: var(--space-md) 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
}

.site-footer__legal {
  display: flex;
  gap: var(--space-md);
}

.site-footer__parent {
  color: var(--text-muted);
}

/* ---------------------------------------------------------------
   UTILITIES
--------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}