/* ---- Topbar ---- */
.topbar {
  background: var(--color-primary-dark);
  color: var(--color-on-dark);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.topbar__inner { padding-block: var(--space-2); }

.topbar__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  color: rgba(255, 255, 255, 0.82);
}

.topbar__contact a { color: rgba(255, 255, 255, 0.92); }

/* ---- Header ---- */
.site-header {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Browsers without color-mix, and viewers who have asked for reduced
   transparency, get a solid header instead of a translucent one. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: var(--color-surface); }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--color-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

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

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: opacity 0.2s var(--ease-out);
}

.brand:hover { opacity: 0.85; }
.brand__mark { flex-shrink: 0; }

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }

.brand__name {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  color: var(--color-heading);
}

.brand__tagline {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---- Nav toggle (mobile) ---- */
/* 44x44 minimum. The visible bars stay 24px wide; the button around them is
   padded out to a full touch target, since this is the primary navigation
   control on a phone and it was previously only 40x18. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  cursor: pointer;
  transition: background 0.15s var(--ease-out);
}

/* Bars are --color-heading, which measures 5.56:1 on the lime - well past
   the 3:1 a non-text control needs, so they need no restyling. */
.nav-toggle:hover { background: var(--color-highlight); }

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-heading);
  transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease-out),
              background 0.2s var(--ease-out);
}

.nav-toggle__bar::before { transform: translateY(-7px); }
.nav-toggle__bar::after { transform: translateY(5px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(0) rotate(-45deg); }

/* ---- Primary nav ---- */
/* Direct child only. The submenu is itself a <ul> inside .primary-nav, and
   the descendant form (`.primary-nav ul`, specificity 0-0-1-1) outranks
   `.submenu` (0-0-1-0) - which meant this row's `display: flex` overrode the
   submenu's `display: none` and left the four service links permanently
   expanded on mobile. Scoping to `>` keeps this rule on the top-level row. */
.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* :not(.btn) throughout, because `.primary-nav a` (0-0-1-1) outranks `.btn`
   (0-0-1-0) and would otherwise strip the Contact Us button of its pill
   radius and padding, leaving one rounded-rectangle button in a site full of
   pills. */
.primary-nav a:not(.btn) {
  position: relative;
  display: block;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color 0.18s var(--ease-out), background 0.18s var(--ease-out);
}

/* ---- The lime hover ----
   The logo's lime is the hover colour across the site, but it can only be
   applied one of two ways, and which one depends on what it is sitting on:

     on a LIGHT surface  it is a FILL with ink text on top   10.70:1
     on a DARK surface   it is the TEXT itself                8.04:1

   What it can never be is text on a light surface: lime on the page
   background measures 1.36:1 and on white 1.44:1, so a hovered link set in
   it would simply vanish. Every rule below picks whichever of the two forms
   its surface allows. Focus-visible is paired with hover throughout so a
   keyboard gets the same affordance as a mouse. */
.primary-nav a:not(.btn):hover,
.primary-nav a:not(.btn):focus-visible {
  color: var(--color-on-highlight);
  background: var(--color-highlight);
}

/* Active page gets a short accent underline rather than a full border, so the
   nav row keeps an even baseline. */
.primary-nav a[aria-current="page"]:not(.btn) { color: var(--color-accent); }

.primary-nav a[aria-current="page"]:not(.btn)::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
}

/* ---- Submenu ----
   Opening is driven by the .is-open class (set by main.js on click/tap), NOT
   by :hover alone. Hover-opening is additionally gated behind a mouse-device
   media query: on a touchscreen there is no real hover, so a hover-only
   dropdown either never opens or sticks open after a tap. */
.has-submenu { position: relative; }

.submenu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 232px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out),
              visibility 0.18s;
}

.has-submenu.is-open > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .has-submenu:hover > .submenu,
  .has-submenu:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.submenu a {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
}

.submenu a:hover,
.submenu a:focus-visible {
  background: var(--color-highlight);
  color: var(--color-on-highlight);
}

/* Caret button injected by main.js so the Services parent link stays
   navigable while the caret opens the submenu. */
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  padding: var(--space-1);
  margin-left: calc(var(--space-2) * -1);
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}

.submenu-toggle:hover { color: var(--color-heading); }

.submenu-toggle svg { transition: transform 0.2s var(--ease-out); }
.has-submenu.is-open .submenu-toggle svg { transform: rotate(180deg); }

/* The link and its caret share one row at every width. Without this the
   injected wrapper is a block element and stacks them, making the Services
   item taller than every other nav item. */
.has-submenu__row {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Collapse point for the primary nav, set by measurement rather than taken
   from the shared 900px breakpoint. With labels on one line the brand plus
   the full nav needs a 1049px viewport; between 900 and 1049 the items were
   wrapping inside themselves ("Supported / Living" on two lines, the row
   growing to 64-88px). 1080 leaves a margin. Re-measure if a nav label is
   added or lengthened. The footer and touch-target rules further down keep
   900px on purpose - they are about phones, not about this row fitting. */
@media (max-width: 1080px) {
  .nav-toggle { display: flex; }

  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }

  .primary-nav.is-open { display: block; }
  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }

  .primary-nav > ul > li:not(:last-child) { border-bottom: 1px solid var(--color-border); }

  .primary-nav a:not(.btn) {
    padding: var(--space-4) var(--space-3);
    font-size: 1rem;
  }

  .primary-nav a[aria-current="page"]:not(.btn) {
    background: var(--color-primary-light);
    border-left: 3px solid var(--color-accent);
    padding-left: calc(var(--space-3) - 3px);
  }

  .primary-nav a[aria-current="page"]:not(.btn)::after { content: none; }

  /* On mobile the submenu becomes an inline expanding block instead of a
     floating panel. */
  .submenu {
    position: static;
    box-shadow: none;
    border: 0;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    margin: 0 0 var(--space-3) var(--space-4);
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .has-submenu.is-open > .submenu { display: flex; }

  .has-submenu > a { flex: 1; }
  .has-submenu__row { justify-content: space-between; }
  .submenu-toggle { padding: var(--space-3); }

  .primary-nav .btn { display: flex; margin-top: var(--space-3); }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out),
              background 0.18s var(--ease-out), border-color 0.18s var(--ease-out),
              color 0.18s var(--ease-out);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-highlight);
  color: var(--color-on-highlight);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-on-dark);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: rgba(212, 224, 80, 0.14);
  border-color: var(--color-highlight);
  color: var(--color-highlight);
  transform: translateY(-2px);
}

.btn--dark-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-heading);
}

.btn--dark-outline:hover,
.btn--dark-outline:focus-visible {
  background: var(--color-highlight);
  border-color: var(--color-highlight);
  color: var(--color-on-highlight);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn--sm { padding: var(--space-2) var(--space-4); font-size: 0.85rem; }
.btn--lg { padding: var(--space-4) var(--space-6); font-size: 1.02rem; }
.btn:active { transform: translateY(0) scale(0.985); }

/* ---- Badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  background: var(--color-primary-light);
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* ---- Cards ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  overflow: hidden;
  transition: box-shadow 0.28s var(--ease-out), transform 0.28s var(--ease-out),
              border-color 0.28s var(--ease-out);
}

/* Accent rule that grows across the card top on hover, replacing the static
   4px border. Communicates which card is focused without moving layout. */
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-highlight);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.service-card:hover,
.service-card:focus-visible {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-border));
}

.service-card:hover::before,
.service-card:focus-visible::before { transform: scaleX(1); }

/* Card titles are sized by their role, not by their heading level. On
   /services these are h2 (they sit directly under the page h1, so that is
   the correct hierarchy) and would otherwise inherit the 40px display size
   into a 200px card - "Companionship Care" overflowed its card by 95px.
   Semantic level and visual size are separate concerns. */
.service-card :is(h2, h3, h4) {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  transition: color 0.2s var(--ease-out);
}

.service-card:hover :is(h2, h3, h4) { color: var(--color-accent); }

/* The one service the site leads with. Same card and the same hover as the
   others, but on the pale brand tint, with more room and a display-size
   title, so it reads as the headline service rather than a fifth equal
   option. Placed after the base .service-card title rule: both selectors
   are 0-1-1, so source order is what lets this size win. */
.service-card--featured {
  background: var(--color-primary-light);
  padding: var(--space-7);
}

.service-card--featured :is(h2, h3) {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.service-card--featured p { max-width: 62ch; font-size: 1.05rem; }

@media (max-width: 640px) {
  .service-card--featured { padding: var(--space-5); }
}

.testimonial-card :is(h2, h3, h4) { font-size: 1.15rem; line-height: 1.3; }

.service-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.testimonial-card__quote {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-text);
}

.testimonial-card__author {
  margin-top: var(--space-5);
  font-weight: 700;
  color: var(--color-heading);
}

.testimonial-card__role { color: var(--color-text-muted); font-size: 0.85rem; }

.news-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}

.news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

/* The card clips, so the image scales inside its frame rather than pushing
   the layout around. Same 0.7s curve as the hero images, so every zoom on
   the site feels like one behaviour. */
.news-card__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  background: var(--color-surface-2);
  transition: transform 0.7s var(--ease-out);
}

.news-card:hover .news-card__image,
.news-card:focus-within .news-card__image { transform: scale(1.06); }

.news-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.news-card__date {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.news-card__title { font-size: 1.12rem; }

.news-card__link {
  margin-top: auto;
  padding-top: var(--space-3);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-accent);
}

.news-card__link:hover { text-decoration: underline; }

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  text-align: center;
}

.stat-card__value {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-accent);
}

.stat-card__label { color: var(--color-text-muted); font-weight: 500; }

/* ---- Forms ---- */
.form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 640px; }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }

.form-field label {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-heading);
}

.form-field input,
.form-field textarea,
.form-field select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--color-text-muted); }

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.form-field textarea { min-height: 150px; resize: vertical; }

.form-field--error input,
.form-field--error textarea,
.form-field--error select { border-color: #C0392B; }

.form-field__error { color: #C0392B; font-size: 0.85rem; font-weight: 600; }

/* Tied to the opt-in dark theme, not to the OS setting. Left on
   prefers-color-scheme these would have fired for anyone whose system is
   dark, painting dark-theme form messages onto the light page. */
:root[data-theme="dark"] .form-field--error input,
:root[data-theme="dark"] .form-field--error textarea,
:root[data-theme="dark"] .form-field--error select { border-color: #F1877C; }
:root[data-theme="dark"] .form-field__error { color: #F1877C; }

.form-field--honeypot { position: absolute; left: -9999px; top: -9999px; }

.form-success, .form-error {
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-weight: 600;
  border: 1px solid transparent;
}

.form-success { background: #E4F5EE; color: #14563C; border-color: #B8E3D0; }
.form-error { background: #FBEAEA; color: #8E1F17; border-color: #F0C4C0; }

:root[data-theme="dark"] .form-success { background: #10281F; color: #7FD9B4; border-color: #1D4736; }
:root[data-theme="dark"] .form-error { background: #2A1512; color: #F1877C; border-color: #4A2320; }

/* ---- Footer ---- */
.site-footer {
  background: var(--color-primary-dark);
  color: var(--color-on-dark);
  margin-top: var(--space-9);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: var(--space-7);
  padding-block: var(--space-9);
}

.footer__col .brand__name { color: var(--color-on-dark); }
.footer__col .text-muted { color: rgba(255, 255, 255, 0.7); }

.footer__col h2 {
  color: var(--color-on-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.footer__col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__col li { color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; }
.footer__col a { color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; transition: color 0.18s var(--ease-out); }
.footer__col a:hover,
.footer__col a:focus-visible { color: var(--color-highlight); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer__legal { display: flex; gap: var(--space-5); }
.footer__legal a { transition: color 0.18s var(--ease-out); }
.footer__legal a:hover,
.footer__legal a:focus-visible { color: var(--color-highlight); }

/* ---- Touch targets ----
   Below 900px the site is on a phone or tablet, where an 18px-tall link is
   genuinely hard to hit. These rules raise every tappable item to the 44px
   guideline. Applied at the breakpoint rather than globally so the desktop
   footer and topbar stay visually compact for mouse users. */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }

  .footer__col ul { gap: 0; }

  /* width:100% so the whole row is tappable, not just the width of the
     text. "Terms" is a 38px-wide word; the row it sits in is not. */
  .footer__col li,
  .footer__col li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
  }

  .footer__legal { gap: var(--space-4); }
  .footer__legal a { display: flex; align-items: center; min-height: 44px; }

  .topbar__contact { gap: var(--space-3) var(--space-5); }
  .topbar__contact li,
  .topbar__contact a { display: flex; align-items: center; min-height: 44px; }

  .news-card__link { min-height: 44px; display: flex; align-items: center; }

  .btn--sm { padding: var(--space-3) var(--space-4); }
}

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

/* ---- reCAPTCHA ----
   Google renders the widget in a fixed-size iframe (302x76). It cannot be
   restyled, so the job here is just to let it sit in the form rhythm and
   scale down on narrow phones rather than pushing the layout sideways. */
.form-field--captcha { gap: var(--space-2); }

.form-field--captcha .g-recaptcha {
  /* the widget has its own internal padding; nudge it into line with the
     inputs above it */
  margin-left: -2px;
}

@media (max-width: 360px) {
  .form-field--captcha .g-recaptcha {
    transform: scale(0.88);
    transform-origin: 0 0;
    height: 68px;
  }
}

.form-field__error[hidden] { display: none; }

/* ---- Brand highlight on dark surfaces ----
   The logo's lime is unusable on the light page (1.36:1 against the
   background), so in light mode it would otherwise never appear at all and
   the site would not read as the brand. These are the surfaces that are dark
   in BOTH themes, where it is not only legible but the strongest colour
   available - the same role it plays in the logo, where it is the spark
   against the blue sphere rather than the sphere itself. */
.cta-band .btn--primary {
  background: var(--color-highlight);
  color: var(--color-on-highlight);   /* 10.70:1 */
}

.cta-band .btn--primary:hover {
  background: #E2ED72;
  color: var(--color-on-highlight);
}

/* Footer section labels pick up the lime at 8.04:1 on the navy. */
.footer__col h2 { color: var(--color-highlight); }

.topbar__contact a:hover { color: var(--color-highlight); text-decoration: underline; }