/*
Theme Name: Blue Horizons
Description: Custom authority-site theme for Blue Horizons Aides. Built by Sonic.
Author: Sonic
Version: 1.0
Text Domain: blue-horizons
*/

/* =========================================================
   DESIGN TOKENS (from STYLE-GUIDE.md)
   ========================================================= */
:root {
  --color-primary: #183172;      /* Horizon Navy — sampled from the client's live logo */
  --color-accent: #1B9CE4;       /* Horizon Blue — sampled from the client's live logo, for decorative/non-text use */
  --color-accent-text: #106699;  /* darker shade of the same blue — meets WCAG AA (6.2:1) for links & button text */
  --color-amber: #F2A93B;        /* Warm Amber — supporting highlight, not from logo */
  --color-white: #FFFFFF;
  --color-bg: #F7F8FA;
  --color-body: #000000;         /* sampled from the client's live site (rgb(0,0,0) body text) */
  --color-heading: #183172;      /* sampled from the client's live site (their heading navy) */
  --color-muted: #6E6E6E;        /* sampled from the client's live site (rgb(110,110,110)) */
  --color-success: #2E9E5B;
  --color-warning: #E0A339;
  --color-danger: #C74B4B;

  --font-display: "Poppins", sans-serif;  /* client's live site uses Poppins semibold for headings */
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;  /* client's live site uses Poppins for body text too */

  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --radius: 12px;
  --shadow-card: 0 2px 10px rgba(20, 51, 94, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(20, 51, 94, 0.14);
}

/* =========================================================
   RESET + BASE (mobile-first)
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-white);
  line-height: 1.6;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.15;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(1.9rem, 5vw, 3.125rem); }  /* desktop ceiling 50px, matches client's live site H1 */
h2 { font-size: clamp(1.4rem, 3.2vw, 2.375rem); } /* desktop ceiling 38px, matches client's live site H2 */
h3 { font-size: clamp(1.15rem, 2.2vw, 1.75rem); } /* desktop ceiling 28px, matches client's live site H3 */
p { margin: 0 0 1em; }
a { color: var(--color-accent-text); }

/* Responsive media baseline */
img, video, iframe, svg { max-width: 100%; height: auto; display: block; }

/* =========================================================
   RESPONSIVE FOUNDATION (build once, every page inherits)
   ========================================================= */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 48px);
}

.section { padding-block: clamp(40px, 8vw, 96px); }
.section--alt { background: var(--color-bg); }
.section--dark { background: var(--color-primary); color: var(--color-white); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-white); }

.grid-2, .grid-3, .grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
}
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Blog post cards (homepage "Recent Posts" section + /blog/ index) */
.blog-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.blog-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.blog-card__body { padding: 20px 24px 24px; }
.blog-card__date {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.blog-card__title {
  margin: 8px 0 10px;
  font-size: 1.15rem;
  color: var(--color-heading);
}
.blog-card:hover .blog-card__title { color: var(--color-accent-text); }
.blog-card__excerpt {
  font-size: 0.95rem;
  color: var(--color-muted);
  line-height: 1.6;
}

/* Native block support so authored page content (Gutenberg) inherits the foundation */
.wp-block-columns { gap: clamp(20px, 3vw, 32px); }
.wp-block-group { padding-block: clamp(16px, 2vw, 24px); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-button__link,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: var(--radius);
  text-decoration: none;
  min-height: 44px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary, .is-style-fill .wp-block-button__link {
  /* Matches the client's live site exactly: bg #1B9CE4 / hover #183172 / white text,
     sampled directly from their "Get Started" button's Wix CSS variables. */
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.btn-secondary, .is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-primary); color: var(--color-white); }

.wp-block-quote {
  border-left: 4px solid var(--color-amber);
  padding-left: 1.25em;
  margin: 0;
  font-style: italic;
  color: var(--color-heading);
}

/* Long-form article content (service/topic pages) — constrain line length for
   readability instead of stretching to the full container width, and give
   headings/lists real breathing room instead of running together. */
.entry-content {
  max-width: 760px;
  margin-inline: auto;
}
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 { margin-top: 2em; }
.entry-content h3 { margin-top: 1.5em; }
.entry-content p { line-height: 1.7; }
.entry-content ul, .entry-content ol {
  margin: 0 0 1.5em;
  padding-left: 1.4em;
}
.entry-content li { margin-bottom: 0.6em; line-height: 1.6; }
.entry-content .wp-block-columns { max-width: 100%; }
.entry-content img { border-radius: var(--radius); margin-block: 1.5em; }

/* =========================================================
   ICONS (hard size limits per STYLE-GUIDE)
   ========================================================= */
.icon-hero { max-width: 120px; max-height: 120px; }
@media (min-width: 1024px) { .icon-hero { max-width: 200px; max-height: 200px; } }
.icon-section { max-width: 48px; max-height: 48px; }
.icon-card { max-width: 80px; max-height: 80px; }
.icon-inline { max-width: 24px; max-height: 24px; display: inline-block; vertical-align: -4px; }
.icon-ui { max-width: 20px; max-height: 20px; }
.icon-avatar { max-width: 64px; max-height: 64px; border-radius: 50%; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  background: var(--color-white);
  border-bottom: 1px solid #EAECEF;
  position: sticky;
  top: 0;
  z-index: 40;
}
/* The nav has 8 top-level items (one with a long, client-specified label,
   "Screening and Training") plus a logo and a call-to-action button — that
   doesn't fit in the site's normal 1200px content container without either
   illegibly small text or overlapping the button. Give the header its own
   wider container instead of shrinking text to fit. */
.site-header .container { max-width: 1600px; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  gap: 16px;
}
.site-logo { display: inline-flex; align-items: center; text-decoration: none; max-height: 88px; flex-shrink: 0; }
.site-logo img { max-height: 76px; width: auto; max-width: 240px; }
.site-nav { display: none; }
@media (min-width: 1366px) {
  .site-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
  .header-cta { flex-shrink: 0; }
}
.site-nav__list { display: flex; flex-wrap: nowrap; gap: clamp(16px, 1.4vw, 28px); list-style: none; margin: 0; padding: 0; min-width: 0; }
.site-nav a { color: var(--color-heading); text-decoration: none; font-weight: 500; white-space: nowrap; font-size: 0.95rem; }
.site-nav a:hover { color: var(--color-accent-text); }
.header-cta { display: none; padding: 10px 18px; font-size: 0.9rem; min-height: 40px; }

/* Desktop dropdown */
.site-nav .has-dropdown { position: relative; }
/* Invisible hover-bridge: fills the gap between the link and the dropdown
   (created by the dropdown's margin-top) so :hover doesn't drop while the
   mouse crosses it on the way down — otherwise the menu closes mid-move. */
.site-nav .has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}
.site-nav .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--color-white);
  border: 1px solid #EAECEF;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  list-style: none;
  margin: 8px 0 0;
  padding: 8px;
  z-index: 50;
}
/* The last couple of nav items (Locations, Resources) sit near the right edge
   of the bar — a left-aligned 260px dropdown from there spills over the next
   trigger link (and sometimes the Call button), so clicks meant for a dropdown
   item land on whatever overlapping element is actually on top instead.
   Right-align those so they open inward, not off the edge. Flagged via a PHP-set
   class (header.php) rather than nth-last-child, since About/Contact are plain
   <li> siblings after the dropdown items and would throw off sibling counting. */
.site-nav .has-dropdown.dropdown-align-right .dropdown {
  left: auto;
  right: 0;
}
.site-nav .dropdown li { margin: 0; }
.site-nav .dropdown a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 400;
  font-size: 0.92rem;
  white-space: nowrap;
}
.site-nav .dropdown a:hover { background: var(--color-bg); color: var(--color-accent-text); }
.site-nav .has-dropdown:hover .dropdown,
.site-nav .has-dropdown:focus-within .dropdown { display: block; }

/* Mobile menu toggle + panel */
.mobile-nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.mobile-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  margin-inline: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  background: var(--color-white);
  border-top: 1px solid #EAECEF;
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px clamp(16px, 5vw, 48px);
}
.mobile-nav > ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav__section > a { font-weight: 600; color: var(--color-primary); }
.mobile-nav a { display: block; padding: 10px 0; text-decoration: none; color: var(--color-heading); min-height: 44px; display: flex; align-items: center; }
.mobile-nav__section ul { list-style: none; margin: 0 0 8px 12px; padding: 0; border-left: 2px solid var(--color-bg); padding-left: 12px; }
.mobile-nav__section ul a { font-weight: 400; font-size: 0.92rem; color: var(--color-body); min-height: 40px; }

@media (min-width: 1366px) {
  .header-cta { display: inline-flex; }
  .mobile-nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; gap: 48px; }
}
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg);
  border: 1px solid #E2E6EB;
  color: var(--color-heading);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
}

/* Hero trust row: icon + caption pairs (no pill/background chrome), matching
   the client's own live-site pattern under their hero CTA — reads as more
   authoritative/credentialed than a badge-pill row. */
.trust-row--hero {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(10px, 3vw, 36px);
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #E2E6EB;
}
.trust-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(6px, 2vw, 12px);
  flex: 1 1 0;
  min-width: 0;
  max-width: 180px;
}
.trust-item svg {
  max-width: clamp(20px, 6vw, 28px);
  max-height: clamp(20px, 6vw, 28px);
  width: clamp(20px, 6vw, 28px);
  height: clamp(20px, 6vw, 28px);
  color: var(--color-primary);
  flex-shrink: 0;
}
.trust-item span {
  font-size: clamp(0.62rem, 2.3vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1.25;
}
.hero-media img { border-radius: var(--radius); box-shadow: var(--shadow-card); }
.cta-row { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 24px; }
.cta-row .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 10px;
  font-size: 0.85rem;
  white-space: normal;
  text-align: center;
}
/* The secondary/white button's label tends to run longer ("See Our Vetting
   Process", "Call (747) 297-8119") than the primary's "Request an Aide" —
   give it a bit more of the row instead of splitting evenly. */
.cta-row .btn-secondary { flex-grow: 1.35; }
@media (min-width: 480px) {
  .cta-row .btn { padding: 14px 20px; font-size: 0.95rem; }
}
@media (min-width: 640px) {
  .cta-row { gap: 12px; }
  .cta-row .btn { flex: 0 1 auto; padding: 14px 28px; font-size: 1rem; white-space: nowrap; }
}

/* =========================================================
   CARDS (pain points, process, testimonials, services)
   ========================================================= */
.card {
  background: var(--color-white);
  border: 1px solid #EAECEF;
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.related-page-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 88px;
  font-weight: 600;
  color: var(--color-heading);
  text-decoration: none;
  border-top: 3px solid var(--color-accent-text);
}
.related-page-card:hover { color: var(--color-accent-text); }

.process-timeline { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.process-step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding-block: 20px;
  border-bottom: 1px solid #EAECEF;
}
.process-step:last-child { border-bottom: none; }
.process-step::before {
  content: counter(step);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 50%;
}

.testimonial-card { border-top: 3px solid var(--color-accent-text); text-align: center; }
.testimonial-card .review-flourish { max-width: 68px; max-height: 68px; width: auto; height: auto; margin: 0 auto 12px; display: block; }
.testimonial-card cite {
  display: block;
  margin-top: 16px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.5;
}
.testimonial-card cite .cite-name { display: block; color: var(--color-primary); }
.testimonial-card cite .cite-role { display: block; font-weight: 400; color: var(--color-muted); font-size: 0.9rem; }

/* =========================================================
   STICKY MOBILE CTA
   ========================================================= */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--color-primary);
  padding: 10px 16px;
  display: flex;
  gap: 10px;
}
.sticky-cta a {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  font-size: 0.88rem;
  font-weight: 500;
  min-height: 40px;
  white-space: nowrap;
}
.sticky-cta a:last-child { flex: 1.4; }
@media (min-width: 1024px) { .sticky-cta { display: none; } }
body { padding-bottom: 68px; }
@media (min-width: 1024px) { body { padding-bottom: 0; } }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--color-heading); color: #C9CFD8; padding-block: clamp(40px, 6vw, 64px); }
.site-footer a { color: #C9CFD8; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: #4FC3F7; text-decoration: underline; }
.site-footer .grid-4 { align-items: start; }
.site-footer h3 {
  color: var(--color-white);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.site-footer address { font-style: normal; line-height: 1.6; }
.footer-col p { margin-bottom: 12px; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 10px; }
.footer-list a { display: inline-block; min-height: 24px; }
.site-footer a.footer-cta {
  margin-top: 16px;
  font-size: 0.9rem;
  padding: 10px 20px;
  background: var(--color-white);
  color: var(--color-heading);
}
.site-footer a.footer-cta:hover { background: var(--color-bg); color: var(--color-heading); }
.footer-logo {
  display: inline-block;
  background: var(--color-white);
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.footer-logo img { display: block; height: 40px; width: auto; max-width: 160px; }

.footer-bottom {
  margin-top: clamp(32px, 5vw, 48px);
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
}
.footer-bottom p { margin: 0; color: #9CA6B4; }
.footer-bottom a { color: #9CA6B4; }
.footer-bottom a:hover, .footer-bottom a:focus-visible { color: #4FC3F7; }
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: 20px; }

/* =========================================================
   SCROLL REVEAL (purposeful, not gratuitous)
   ========================================================= */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* Contact page form */
.contact-form-wrap {
  max-width: 560px;
  margin-top: 24px;
  scroll-margin-top: 90px; /* clears the sticky header when jumped to via #contact-form */
}
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.contact-form__row label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-heading);
}
.contact-form__row input,
.contact-form__row textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 2px solid #D7DEE8;
  border-radius: var(--radius);
  color: var(--color-body);
  background: var(--color-white);
}
.contact-form__row input:focus,
.contact-form__row textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.contact-form__row textarea {
  resize: vertical;
  min-height: 120px;
}
.contact-form .btn {
  width: 100%;
}
@media (min-width: 640px) {
  .contact-form .btn { width: auto; }
}
.form-notice {
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-weight: 600;
}
.form-notice--success {
  background: #E4F5E9;
  color: #1B6B3A;
  border: 1px solid #B7E2C4;
}
.form-notice--error {
  background: #FBE8E8;
  color: #A32B2B;
  border: 1px solid #F0C2C2;
}

/* ============================================
   ACCESSIBILITY WIDGET
   ============================================ */
.a11y-launcher {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 70;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card-hover);
}
.a11y-launcher svg { width: 26px; height: 26px; }
.a11y-launcher:hover { background: var(--color-accent-text); }
@media (max-width: 1023px) { .a11y-launcher { bottom: 90px; } }

.a11y-panel {
  position: fixed;
  left: 20px;
  bottom: 88px;
  z-index: 71;
  width: min(320px, calc(100vw - 40px));
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  padding: 20px;
}
@media (max-width: 1023px) { .a11y-panel { bottom: 154px; } }
.a11y-panel[hidden] { display: none; }
.a11y-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.a11y-panel__header h2 { font-size: 1.05rem; margin: 0; color: var(--color-primary); }
.a11y-panel__close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
  padding: 4px 8px;
}
.a11y-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid #EAECEF;
  font-size: 0.92rem;
}
.a11y-panel__row:first-of-type { border-top: none; }
.a11y-panel__toggle { cursor: pointer; }
.a11y-panel__toggle input { width: 20px; height: 20px; cursor: pointer; }
.a11y-fontsize-controls { display: flex; gap: 6px; }
.a11y-fontsize-controls button {
  min-width: 36px;
  min-height: 32px;
  border: 1px solid #D7DEE8;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
}
.a11y-fontsize-controls button:hover { border-color: var(--color-accent-text); color: var(--color-accent-text); }
.a11y-panel__reset {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: #fff;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}
.a11y-panel__reset:hover { background: var(--color-primary); color: #fff; }
.a11y-panel__note { margin-top: 12px; font-size: 0.8rem; color: var(--color-muted); }

/* Effects the toggles above apply to <html> */
html.a11y-high-contrast { background: #000; }
html.a11y-high-contrast body { background: #000 !important; color: #fff !important; }
html.a11y-high-contrast a { color: #6FD3FF !important; }
html.a11y-high-contrast .card,
html.a11y-high-contrast .section--alt,
html.a11y-high-contrast .site-header,
html.a11y-high-contrast .site-footer { background: #111 !important; color: #fff !important; }
html.a11y-high-contrast .btn-primary { background: #fff !important; color: #000 !important; }

/* The accessibility panel itself has a hardcoded white background for
   normal use — without this, forcing body text to white (above) makes the
   panel's own text invisible (white on white) the moment high contrast
   is turned on from inside the panel. */
html.a11y-high-contrast .a11y-panel {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #fff;
}
html.a11y-high-contrast .a11y-panel__header h2,
html.a11y-high-contrast .a11y-panel__close,
html.a11y-high-contrast .a11y-panel__note { color: #fff !important; }
html.a11y-high-contrast .a11y-panel__note a { color: #6FD3FF !important; }
html.a11y-high-contrast .a11y-panel__row { border-top-color: rgba(255,255,255,0.25); }
html.a11y-high-contrast .a11y-fontsize-controls button,
html.a11y-high-contrast .a11y-panel__reset {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

html.a11y-underline-links a { text-decoration: underline !important; }

html.a11y-readable-font body,
html.a11y-readable-font h1,
html.a11y-readable-font h2,
html.a11y-readable-font h3,
html.a11y-readable-font p,
html.a11y-readable-font a,
html.a11y-readable-font li { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.01em; }

html.a11y-large-cursor,
html.a11y-large-cursor a,
html.a11y-large-cursor button { cursor: pointer; }
html.a11y-large-cursor * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><path d='M3 2l7 19 2.5-7.5L20 11z' fill='black' stroke='white' stroke-width='1.5'/></svg>") 4 4, auto !important; }

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

html.a11y-highlight-focus a { outline: 2px solid transparent; box-shadow: 0 0 0 2px rgba(27,156,228,0.35); border-radius: 2px; }
html.a11y-highlight-focus *:focus-visible { outline: 3px solid var(--color-accent) !important; outline-offset: 2px !important; }

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--color-primary);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
.cookie-banner--visible { transform: translateY(0); }
.cookie-banner--dismissed { transform: translateY(100%); }
@media (max-width: 1023px) { .cookie-banner { bottom: 60px; } }
.cookie-banner__text { flex: 1 1 320px; font-size: 0.9rem; line-height: 1.5; }
.cookie-banner__text a { color: #fff; text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner__actions .btn { min-height: 40px; padding: 10px 20px; font-size: 0.88rem; }
.cookie-banner__decline.btn-secondary { background: transparent; border-color: #fff; color: #fff; }
.cookie-banner__decline.btn-secondary:hover { background: rgba(255,255,255,0.15); }