/*
Theme Name:   Icelander Child - OATA Starter
Theme URI:    https://example.com/
Description:  Starter child-theme stylesheet for the new one-page OATA site, adapted from the TAP template and OATA mockup.
Author:       OpenAI
Template:     icelander
Version:      1.0.0
Text Domain:  icelander-child
*/

/* ================================================================
   OATA Single-Page Mockup — TAP design language
   WCAG 2.2 AA compliant
   ================================================================
   Palette notes:
   - OATA Blue  #0170B9 on white  = 5.22:1 ✓ AA
   - OATA Orange #F36F36 on white = 2.94:1 ✗  (decorative only)
   - Button Orange #C44E15        = 4.72:1 ✓ AA (accessible variant)
   - Navy #1B1E34 on white        = 16.4:1 ✓ AAA
   - Body ink #1F2937 on white    = 14.7:1 ✓ AAA
   ================================================================ */

:root {
  --color-primary: #0170B9;               /* OATA blue */
  --color-primary-dark: #015a95;          /* hover */
  --color-primary-light: #E6F1F8;         /* wash */

  --color-accent: #F36F36;                /* decorative OATA orange */
  --color-accent-dark: #C44E15;           /* accessible button/text orange */
  --color-accent-darker: #A53D0C;         /* hover for orange buttons */
  --color-accent-light: #FFF1E8;          /* wash */

  --color-navy: #1B1E34;
  --color-navy-soft: #2A2E48;

  --color-ink: #1F2937;
  --color-ink-muted: #4B4F58;
  --color-ink-subtle: #6B7280;

  --color-bg: #FFFFFF;
  --color-bg-alt: #F8F9FB;
  --color-bg-soft: #F2F5F7;
  --color-border: #E5E7EB;
  --color-divider: #EEF0F2;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(17,24,39,.06);
  --shadow-md: 0 6px 16px rgba(17,24,39,.08);
  --shadow-lg: 0 20px 40px -20px rgba(17,24,39,.25);

  --ff-display: "Oswald", "Arial Narrow", sans-serif;
  --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-eyebrow: 0.8125rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-h3: 1.375rem;
  --fs-h2: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 3.5vw, 3.75rem);

  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 3vw, 2rem);
  --section-pad-y: clamp(3rem, 5vw, 5.5rem);
}

/* ----------------------------------------------------------------
   Reset & base
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, iframe { max-width: 100%; display: block; }
iframe { border: 0; }
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--color-primary-dark); text-decoration-thickness: 2px; }
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: -.01em;
  margin: 0 0 .6em;
  line-height: 1.1;
}
p { margin: 0 0 1em; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: .75rem 1rem;
  background: var(--color-navy);
  color: #fff;
  z-index: 1000;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ----------------------------------------------------------------
   Typography utilities
   ---------------------------------------------------------------- */
.eyebrow {
  font-family: var(--ff-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 .5rem;
}
.eyebrow--orange { color: var(--color-accent-darker); }
.eyebrow--on-navy { color: #FFB98E; }           /* lighter orange for contrast on navy */
.eyebrow--on-orange { color: #FFF; opacity: 1; }

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .75rem 1.5rem;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-accent-dark);
  color: #FFF;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent-darker);
  color: #FFF;
  text-decoration: none;
}
.btn--secondary {
  background: var(--color-primary);
  color: #FFF;
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--color-primary-dark);
  color: #FFF;
  text-decoration: none;
}
.btn--ghost {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--color-navy);
  color: #FFF;
  text-decoration: none;
}
.btn--on-orange {
  background: #FFF;
  color: var(--color-accent-darker);
}
.btn--on-orange:hover,
.btn--on-orange:focus-visible {
  background: var(--color-navy);
  color: #FFF;
  text-decoration: none;
}
.btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: .9375rem; }
.btn--lg { min-height: 52px; padding: .9rem 1.9rem; font-size: 1.0625rem; }

/* ----------------------------------------------------------------
   Site Header
   ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #FFF;
  border-bottom: 1px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--color-navy);
}
.site-header__brand:hover { color: var(--color-primary); }
.site-header__logo { display: inline-flex; }
.site-header__wordmark {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: .04em;
  color: inherit;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.site-nav__list {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list a {
  display: inline-block;
  padding: .5rem 0;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
  font-size: .9375rem;
  border-bottom: 2px solid transparent;
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-sm);
  padding: .5rem;
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.menu-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-navy);
  transition: transform .15s ease, opacity .15s ease;
}
.menu-toggle.is-active .menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-active .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  background: #FFF;
  border-top: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md);
}
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: .5rem 0;
}
.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: .75rem var(--container-pad);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--color-divider);
}
.mobile-menu li:last-child a { border-bottom: 0; }
.mobile-menu a:hover,
.mobile-menu a:focus-visible {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.mobile-menu__cta {
  background: var(--color-accent-dark);
  color: #FFF !important;
  margin: .5rem 1rem;
  border-radius: var(--radius-sm);
}
.mobile-menu__cta:hover,
.mobile-menu__cta:focus-visible {
  background: var(--color-accent-darker) !important;
  color: #FFF !important;
}

@media (max-width: 820px) {
  .site-nav__list,
  .site-nav__cta { display: none; }
  .menu-toggle { display: flex; }
}

/* ----------------------------------------------------------------
   Hero
   ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(3rem, 5vw, 5rem) 0 clamp(3rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 85% 20%, rgba(243,111,54,.08), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(1,112,185,.07), transparent 55%),
    linear-gradient(180deg, var(--color-bg-alt), #FFF);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.hero__title {
  font-size: var(--fs-h1);
  margin-bottom: 1rem;
  color: var(--color-navy);
}
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--color-ink-muted);
  max-width: 55ch;
  margin-bottom: 1.75rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.75rem;
}
.hero__note {
  font-size: .875rem;
  color: var(--color-ink-muted);
  background: #FFF;
  border-left: 3px solid var(--color-accent-dark);
  padding: .75rem 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0;
}
.hero__note a { font-weight: 600; }
.hero__note strong { color: var(--color-navy); }

.hero__media { position: relative; }
.hero__video {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
  background: var(--color-navy);
}
.hero__video iframe {
  width: 100%;
  height: 100%;
}

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   Generic Section Shell
   ---------------------------------------------------------------- */
.section {
  padding: var(--section-pad-y) 0;
  background: var(--color-bg);
}
.section--alt { background: var(--color-bg-alt); }
.section--navy {
  background:
    radial-gradient(circle at 80% 10%, rgba(243,111,54,.12), transparent 60%),
    linear-gradient(180deg, var(--color-navy), var(--color-navy-soft));
  color: #FFF;
}
.section--orange {
  background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent-darker));
  color: #FFF;
}
.section__header { margin-bottom: 2.5rem; }
.section__header--center {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.section__title { font-size: var(--fs-h2); margin-bottom: .5rem; }
.section__title--on-navy,
.section__title--on-orange { color: #FFF; }
.section__lead {
  font-size: var(--fs-lead);
  color: var(--color-ink-muted);
  max-width: 65ch;
  margin-bottom: 0;
}
.section__header--center .section__lead { margin-left: auto; margin-right: auto; }
.section__lead--on-navy { color: rgba(255,255,255,.85); }
.section__footnote {
  margin-top: 2rem;
  text-align: center;
  font-size: .9375rem;
  color: var(--color-ink-muted);
}
.section__footnote--on-navy { color: rgba(255,255,255,.8); }

/* ----------------------------------------------------------------
   Split section (text + media)
   ---------------------------------------------------------------- */
.section__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.section__split--reverse .section__split-text { order: 2; }
.section__split--reverse .section__split-media { order: 1; }
@media (max-width: 860px) {
  .section__split { grid-template-columns: 1fr; }
  .section__split--reverse .section__split-text { order: initial; }
  .section__split--reverse .section__split-media { order: initial; }
}

/* ----------------------------------------------------------------
   Check list
   ---------------------------------------------------------------- */
.check-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.check-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--color-ink);
  font-size: 1.0625rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .35rem;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M7.5 13.6 4.2 10.3l1.4-1.4 1.9 1.9 5.9-5.9 1.4 1.4z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.check-list--compact li { font-size: 1rem; padding-left: 1.75rem; }

/* ----------------------------------------------------------------
   Info card (services right column)
   ---------------------------------------------------------------- */
.info-card {
  background: #FFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-md);
}
.info-card__kicker {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--color-navy);
  margin: 0 0 1rem;
}
.info-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-divider);
}

/* ----------------------------------------------------------------
   Stat stack (appointment right column)
   ---------------------------------------------------------------- */
.stat-stack {
  display: grid;
  gap: 1rem;
}
.stat-card {
  background: #FFF;
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.stat-card--orange { border-left-color: var(--color-accent-dark); }
.stat-card__value {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-navy);
  margin: 0 0 .25rem;
}
.stat-card--orange .stat-card__value { color: var(--color-accent-dark); }
.stat-card__label {
  margin: 0;
  font-weight: 500;
  color: var(--color-ink-muted);
  font-size: .9375rem;
}

/* ----------------------------------------------------------------
   Locations grid
   ---------------------------------------------------------------- */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 880px) {
  .locations-grid { grid-template-columns: 1fr; }
}
.location-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  color: #FFF;
  backdrop-filter: blur(4px);
}
.location-card__name {
  font-size: 1.5rem;
  color: #FFF;
  margin-bottom: .5rem;
  border-bottom: 3px solid var(--color-accent);
  padding-bottom: .5rem;
  display: inline-block;
}
.location-card__addr {
  font-style: normal;
  margin: 0 0 1rem;
  color: rgba(255,255,255,.9);
  line-height: 1.5;
}
.location-card__hours {
  margin: 0 0 1rem;
  display: grid;
  gap: .35rem;
}
.location-card__hours > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: .5rem;
  font-size: .9375rem;
}
.location-card__hours dt {
  color: #FFB98E;
  font-weight: 600;
}
.location-card__hours dd {
  margin: 0;
  color: rgba(255,255,255,.95);
}
.location-card__tag {
  display: inline-block;
  margin: 0;
  padding: .25rem .65rem;
  background: rgba(243,111,54,.2);
  color: #FFD3B8;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(255,185,142,.4);
}

/* ----------------------------------------------------------------
   Map grid
   ---------------------------------------------------------------- */
.map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 980px) {
  .map-grid { grid-template-columns: 1fr; }
}
.map-card {
  margin: 0;
  background: #FFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.map-card__caption {
  padding: 1.25rem 1.25rem .5rem;
  order: 1;
}
.map-card__caption h3 {
  font-size: 1.25rem;
  margin-bottom: .15rem;
}
.map-card__caption p {
  margin: 0 0 1rem;
  color: var(--color-ink-muted);
  font-size: .9375rem;
}
.map-card__frame {
  position: relative;
  order: 2;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-soft);
}
.map-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------------------------
   4 Corners feature
   ---------------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; }
}
.feature__callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  background: #FFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-top: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.feature__qr {
  background: #FFF;
  padding: .5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.feature__hours {
  font-weight: 600;
  color: var(--color-accent-dark);
  margin: .25rem 0 0;
}
.feature__callout-text p { margin: 0; }

/* License plate */
.feature__plate {
  display: flex;
  justify-content: center;
  align-items: center;
}
.plate {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 12 / 7;
  background: linear-gradient(180deg, #F5FBF5 0%, #D9EED8 55%, #B8DCB4 100%);
  border: 6px solid #FFF;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 #C1D8BE inset, var(--shadow-lg);
  padding: 1rem 1.5rem;
  color: var(--color-navy);
  text-align: center;
  position: relative;
  font-family: var(--ff-display);
}
.plate__state {
  font-size: .75rem;
  letter-spacing: .2em;
  font-weight: 600;
  color: #2d7235;
  margin: 0;
}
.plate__line1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin: .35rem 0 0;
  letter-spacing: .1em;
  color: #1a3e1d;
}
.plate__line2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: .08em;
  color: var(--color-navy);
  line-height: 1;
}
.plate__badge {
  display: inline-block;
  margin: .65rem 0 0;
  padding: .3rem .9rem;
  background: var(--color-accent-dark);
  color: #FFF;
  font-size: .8125rem;
  letter-spacing: .14em;
  font-weight: 600;
  border-radius: 999px;
}
.plate__footer {
  font-size: .6875rem;
  letter-spacing: .18em;
  color: #2d7235;
  margin: .5rem 0 0;
  font-weight: 600;
}

/* ----------------------------------------------------------------
   Documents numbered list
   ---------------------------------------------------------------- */
.docs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
@media (max-width: 1080px) { .docs-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .docs-list { grid-template-columns: 1fr; } }
.docs-list li {
  background: #FFF;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.docs-list li:nth-child(even) { border-top-color: var(--color-accent-dark); }
.docs-list__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFF;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: .75rem;
}
.docs-list li:nth-child(even) .docs-list__num { background: var(--color-accent-dark); }
.docs-list h3 {
  font-size: 1.125rem;
  margin-bottom: .35rem;
}
.docs-list p {
  margin: 0;
  font-size: .9375rem;
  color: var(--color-ink-muted);
}

/* ----------------------------------------------------------------
   About (orange)
   ---------------------------------------------------------------- */
.about {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  color: #FFF;
}
.about .section__title { color: #FFF; margin-bottom: 1.5rem; }
.about__body { text-align: left; }
.about__body p { color: rgba(255,255,255,.95); font-size: 1.0625rem; }
.about .btn { margin-top: 1.25rem; }

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.site-footer {
  background: var(--color-navy);
  color: rgba(255,255,255,.85);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.3fr;
  gap: 2.5rem;
  padding-top: 3.5rem;
  padding-bottom: 2.5rem;
}
@media (max-width: 780px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.site-footer__name {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFF;
  margin: 0;
}
.site-footer__tag {
  margin: 0;
  font-size: .9375rem;
  color: #FFB98E;
  letter-spacing: .04em;
}
.site-footer__heading {
  font-family: var(--ff-display);
  font-size: 1.0625rem;
  color: #FFF;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.site-footer__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .6rem;
}
.site-footer__nav a,
.site-footer__legal a {
  color: #FFB98E;
  text-decoration: none;
  font-weight: 500;
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible,
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: #FFF;
  text-decoration: underline;
}
.site-footer__contact address {
  font-style: normal;
  display: grid;
  gap: .75rem;
}
.site-footer__contact p { margin: 0; font-size: .9375rem; line-height: 1.55; }
.site-footer__contact strong { color: #FFF; }

.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 1.25rem 0;
  font-size: .875rem;
}
.site-footer__legal .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.site-footer__legal p { margin: 0; }

/* ----------------------------------------------------------------
   Responsive tweaks
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero__note { font-size: .875rem; }
  .btn--lg { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; }
}

/* ================================================================
   FINAL HEADER / MOBILE OVERRIDES
   ================================================================ */

/* Hide theme-injected search UI and duplicate phone/menu item */
.search-toggle,
.site-search-toggle,
.header-search-toggle,
.mobile-search-toggle,
.mobile-search-form,
.site-nav .mobile-search-form,
#mobile-menu .mobile-search-form,
.site-header .search-form,
.site-header .search-toggle,
.site-header .site-search,
.site-header .header-search,
.site-header .search-field,
.site-header .search-submit,
.site-header .widget_search,
.site-header .menu-item-search,
.site-header .search-container,
.site-nav .menu-phone,
#mobile-menu .menu-phone {
  display: none !important;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff !important;
  border-bottom: 1px solid var(--color-divider) !important;
  box-shadow: 0 1px 2px rgba(17,24,39,.06) !important;
}

.site-header .container.site-header__inner {
  width: 100% !important;              /* fill the header so margin:0 auto + max-width centers the content column (fixes logo/nav bunching) */
  max-width: var(--container-max) !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding-left: var(--container-pad) !important;
  padding-right: var(--container-pad) !important;
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2rem !important;
}

.site-header__brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: .75rem !important;
  text-decoration: none !important;
  color: var(--color-navy) !important;
  flex: 0 0 auto !important;
  margin-right: 0 !important;
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
  color: var(--color-primary) !important;
  text-decoration: none !important;
}

.site-header__brand .custom-logo-link,
.site-header__brand .site-header__logo {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
}

.site-header__brand .custom-logo {
  display: block !important;
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
}

.site-nav {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}

.site-nav .menu,
.site-nav__list {
  display: flex !important;
  align-items: center !important;
  gap: 1.75rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-nav .menu li,
.site-nav__list li {
  margin: 0 !important;
  list-style: none !important;
}

.site-nav .menu a,
.site-nav__list a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: .5rem 0 !important;
  color: var(--color-ink) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: .9375rem !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}

.site-nav .menu a:hover,
.site-nav .menu a:focus-visible,
.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
  text-decoration: none !important;
}

.site-nav__cta,
.site-header .site-nav__cta,
.site-header a.site-nav__cta,
.site-header .btn.site-nav__cta,
.site-header .btn.btn--primary.site-nav__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: .5rem 1rem !important;
  margin-left: 1rem !important;
  background: var(--color-accent-dark) !important;
  border: 2px solid var(--color-accent-dark) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: .9375rem !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.site-nav__cta:hover,
.site-nav__cta:focus-visible,
.site-header a.site-nav__cta:hover,
.site-header a.site-nav__cta:focus-visible {
  background: var(--color-accent-darker) !important;
  border-color: var(--color-accent-darker) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.menu-toggle,
.site-header .menu-toggle,
.site-nav .menu-toggle,
button.menu-toggle {
  display: none !important;
  background: transparent !important;
  border: 2px solid var(--color-navy) !important;
  border-radius: 6px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  flex: 0 0 44px !important;
}

.menu-toggle__bar {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  background: var(--color-navy) !important;
  transition: transform .15s ease, opacity .15s ease !important;
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-active .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  background: #ffffff !important;
  border-top: 1px solid var(--color-divider) !important;
  box-shadow: var(--shadow-md) !important;
}

.mobile-menu[hidden] {
  display: none !important;
}

.mobile-menu:not([hidden]) {
  display: block !important;
}

.mobile-menu__list,
.mobile-menu ul {
  list-style: none !important;
  margin: 0 !important;
  padding: .5rem 0 !important;
}

.mobile-menu a {
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
  padding: .75rem var(--container-pad) !important;
  color: var(--color-ink) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--color-divider) !important;
}

.mobile-menu li:last-child a {
  border-bottom: 0 !important;
}

.mobile-menu a:hover,
.mobile-menu a:focus-visible {
  background: var(--color-primary-light) !important;
  color: var(--color-primary-dark) !important;
}

.mobile-menu__footer {
  padding: .5rem 1rem 1rem !important;
}

.mobile-menu__cta,
.mobile-menu a.mobile-menu__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: .75rem 1.25rem !important;
  background: var(--color-accent-dark) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  text-decoration: none !important;
}

.mobile-menu__cta:hover,
.mobile-menu__cta:focus-visible {
  background: var(--color-accent-darker) !important;
  color: #ffffff !important;
}

@media (max-width: 820px) {
  .site-header__inner {
    gap: 1rem !important;
  }

  .site-nav .menu,
  .site-nav__list,
  .site-nav__cta {
    display: none !important;
  }

  .menu-toggle,
  .site-header .menu-toggle,
  .site-nav .menu-toggle,
  button.menu-toggle {
    display: inline-flex !important;
    margin-left: auto !important;
  }
}

/* Footer */
.site-footer {
  background: var(--color-navy) !important;
  color: rgba(255,255,255,.88) !important;
  margin-top: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
  border-top: 0 !important;
}

.site-footer::before,
.site-footer::after,
.site-footer-area,
.site-footer-area::before,
.site-footer-area::after,
.footer-area-site-info,
.footer-area-site-info::before,
.footer-area-site-info::after {
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.site-footer__topbar {
  height: 82px;
  background: var(--color-accent-dark) !important;
  box-shadow: none !important;
  border: 0 !important;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-top: 3.5rem;
  padding-bottom: 3rem;
  align-items: start;
  border-top: 0 !important;
}

.site-footer__brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: .75rem !important;
}

.site-footer__logo,
.site-footer__logo .custom-logo-link,
.site-footer__logo a {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
}

.site-footer__logo .custom-logo,
.site-footer__logo img {
  display: block !important;
  max-height: 42px !important;
  width: auto !important;
  height: auto !important;
}

.site-footer__brand-copy {
  display: block !important;
}

.site-footer__name {
  display: none !important;
}

.site-footer__tag {
  display: block !important;
  margin: 0 !important;
  color: #FFB98E !important;
  font-size: 1.125rem !important;
  line-height: 1.3 !important;
}

.site-footer__heading {
  margin: 0 0 1rem;
  font-family: var(--ff-display);
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffffff;
}

.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.site-footer__nav li {
  margin: 0;
}

.site-footer__nav a,
.site-footer__legal a {
  color: #FFB98E;
  text-decoration: none;
  font-weight: 500;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible,
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__contact address {
  margin: 0;
  font-style: normal;
  display: grid;
  gap: 1rem;
}

.site-footer__contact p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(255,255,255,.88);
}

.site-footer__contact strong {
  color: #ffffff;
  font-weight: 700;
}

.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,.12) !important;
  padding: 1.25rem 0;
}

.site-footer__legal-inner,
.site-footer__legal .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-footer__legal p {
  margin: 0;
  font-size: .95rem;
  color: rgba(255,255,255,.88);
}

@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .site-footer__topbar {
    height: 56px;
  }
}
/* ================================================================
   WCAG 2.2 AA Remediation — append to the end of style.css
   Addresses all issues found in the 4/23 audit.
   ================================================================ */

/* ----------------------------------------------------------------
   FIX #1  — Reflow @ 320px (WCAG 1.4.10)
   The !important CTA rule outranks the mobile hide rule, so the
   "Book Appointment" button stays visible < 820px and pushes the
   header 44px wider than the viewport. Re-assert a more specific
   selector inside the media query so the CTA hides on mobile
   and only the hamburger is shown.
   ---------------------------------------------------------------- */
@media (max-width: 820px) {
  .site-header .site-nav__cta,
  .site-header a.site-nav__cta,
  .site-header .btn.site-nav__cta,
  .site-header .btn.btn--primary.site-nav__cta {
    display: none !important;
  }
}

/* ----------------------------------------------------------------
   FIX #2  — Target Size Minimum (WCAG 2.2, 2.5.8)
   Footer nav links render at 17px tall with 17px gap (34px stride),
   which fails both the 24×24 size rule and the spacing-circle
   exception. Give each footer link a 44px hit target while keeping
   the visible text where it is.
   Applies to: Services, Appointment, Locations, 4 Corners, Book Online
   ---------------------------------------------------------------- */
.site-footer__nav a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  /* gap reduction: the existing .7rem grid gap + 44px hit areas
     means hit zones will slightly overlap visually, but that's OK
     for 2.5.8 — spacing only needs 24px circles not to overlap
     other targets; 44px targets with .7rem gap leave 11px of pure
     spacing so we also add margin to guarantee the circle rule. */
}
.site-footer__nav ul { gap: .25rem !important; } /* retains vertical rhythm, avoids circle-overlap with larger hit areas */

/* Bottom-row "Find your Florida Tax Collector" footer link sits alone
   in its own <p> (not inline), so it's not exempt. Bump its hit area. */
.site-footer__contact p > a[href*="floridataxcollectors"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ----------------------------------------------------------------
   FIX #3  — Contrast on orange About section (WCAG 1.4.3)
   rgba(255,255,255,.95) against the lighter end of the orange
   gradient (#C44E15) = 4.41:1, just below the 4.5:1 requirement.
   Drop the alpha so white is solid → 4.72:1 ✓
   ---------------------------------------------------------------- */
.about__body p {
  color: #ffffff !important;       /* was: rgba(255,255,255,.95) → 4.41:1 fail */
}

/* ----------------------------------------------------------------
   FIX #4  — Contrast on license-plate small text (WCAG 1.4.3)
   "FLORIDA · SUNSHINE STATE" and "TAG AGENCY PROFESSIONALS" use
   #2d7235 on a light-green gradient. Ratio drops to 3.9:1 at the
   bottom of the gradient (#B8DCB4). Darken the text to #1f5a24 so
   it clears 4.5:1 at every point of the gradient.
   ---------------------------------------------------------------- */
.plate__state,
.plate__footer {
  color: #1f5a24 !important;       /* was: #2d7235 → ~3.9:1 at darkest bg */
}

/* ----------------------------------------------------------------
   FIX #5  — Focus Not Obscured (WCAG 2.2, 2.4.11) — defensive
   The sticky header is 72px tall. When a keyboard user follows an
   in-page #anchor, add scroll padding so the target lands below
   the header rather than under it. Currently works by luck of
   section padding; this makes it explicit and future-proof.
   ---------------------------------------------------------------- */
:root {
  scroll-padding-top: 88px;         /* header 72 + breathing room */
}

/* ----------------------------------------------------------------
   FIX #6  — Decorative logo alt text (WCAG 1.1.1) — polish
   The header logo <img alt=""> inside a branded <a> is handled
   correctly because the anchor has an aria-label. But the duplicate
   logo in the footer's .site-footer__logo also has alt="" and is
   NOT wrapped in a link with aria-label. Add a semantic alt or
   hide it from AT. Preferred: make decorative and rely on the
   nearby "DMV on Your Time" tagline text for brand identification.
   No CSS needed — this is a PHP/markup change (see audit notes).
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   FIX #7  — Aside nesting (axe: landmark-complementary-is-top-level)
   The "4 Corners" license-plate panel uses <aside> but it's nested
   inside <main>. Best practice: <aside> at top level OR switch to
   a generic <div>/<figure>. Since the panel is decorative/supporting
   content inside a feature section, <figure> is the correct element.
   No CSS needed — this is a PHP/markup change (see audit notes).
   ---------------------------------------------------------------- */