/* ============================================================
   accessible.css — elderly-friendly + mobile accessibility layer
   Loaded LAST, after styles.css and multipage.css.
   Everything here is an override. Delete this file and the
   link tags to return to the original design exactly.

   Design targets:
   - WCAG 2.2 AA contrast (4.5:1 body, 3:1 large text/UI)
   - Minimum 17px text anywhere, 19px body copy
   - 48x48px minimum touch targets (WCAG 2.5.8 / Apple HIG)
   - Calm motion, no essential information conveyed by hover
   - Comfortable reading measure and line spacing
   ============================================================ */

:root {
  /* Accessible text colours. The bright brand red is kept for
     large elements and fills; text-red is darkened so red type
     on white passes AA (6.4:1 instead of 4.3:1). */
  --red-text: #b0100f;
  --slate: #4a4d53;          /* darkened from #55585f -> 8.2:1 on white */
  --slate-soft: #5c6067;     /* for genuinely secondary text */
  --line: #c9ccce;           /* stronger borders */
  --focus: #0b57d0;          /* high-visibility focus, distinct from brand red */

  /* Type scale: everything steps up. */
  --fs-body: 1.19rem;        /* ~19px */
  --fs-small: 1.06rem;       /* ~17px — the floor */
  --tap: 48px;
}

/* ---------- 1. Base typography ---------- */

body {
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: .003em;
  color: #1a1c1e;
}

p { line-height: 1.75; }

/* Comfortable reading measure — long lines are the single biggest
   readability problem for older eyes. */
.hero-intro,
.home-intro-copy p,
.about-columns p,
.about-lead,
.care-needs-heading > p,
.section-heading > p,
.faq-answer p,
.contact-copy > p,
.page-hero p {
  max-width: 62ch;
}

/* Nothing below 17px anywhere on the site. */
.section-index,
.decision-grid p,
.group-trust-facts span,
.group-attribution,
.coverage-note,
.map-key,
.home-scope-note span,
.testimonial-track footer span,
.profile-card small,
.modal-disclaimer,
.footer-bottom span,
.footer-brand p,
.group-signature,
.consent,
.consent span,
.enquiry-form label,
.form-note,
.modal-skills span,
.profile-tags span,
.hero-kicker,
.button-small,
.desktop-nav,
.nav-dropdown small,
.blog-card time,
.faq-item summary,
.area-readout span,
.area-directory button {
  font-size: var(--fs-small);
}

/* Headings: keep the editorial scale but pull back the extremes so
   headline and body sit in a sensible relationship and long words
   don't overflow on phones. */
h1 { font-size: clamp(2.9rem, 5.4vw, 4.5rem); line-height: 1.1; }
.section-heading h2,
.about-copy h2,
.contact-copy h2 { font-size: clamp(2.3rem, 3.9vw, 3.5rem); line-height: 1.15; }
h3 { font-size: 1.42rem; line-height: 1.35; }

/* Small caps labels were 0.78rem with heavy tracking — hard to read.
   Bigger, less tracking. */
.section-index { letter-spacing: .1em; font-weight: 700; color: var(--red-text); }

/* ---------- 2. Contrast fixes ---------- */

/* Red type on light backgrounds uses the darkened red. */
.section-index,
.text-link.dark,
.desktop-nav > a[aria-current="page"],
.nav-group.active > button,
.faq-item[open] > summary,
.profile-card .view-biodata,
.contact-copy a[href^="tel:"],
.contact-copy a[href^="mailto:"] { color: var(--red-text); }

/* Muted greys lifted to AA — light backgrounds only. */
.nav-dropdown small,
.group-attribution,
.modal-disclaimer,
.form-note,
.feature-row p,
.service-detail-card p { color: var(--slate); }

/* Card eyebrow labels were 0.73rem uppercase in bright red on cream —
   the smallest and lowest-contrast text on the site. */
.care-need > span,
.service-detail-card > span,
.feature-row > span {
  font-size: var(--fs-small);
  letter-spacing: .05em;
  color: var(--red-text);
}

/* Dark and green sections need light text, not the darkened greys.
   These were failing badly: the coverage note sat at 1.1:1. */
.coverage-section .section-index,
.coverage-copy .section-index { color: #ffb3b2; }
.coverage-note { color: #d3e0da; }
.coverage-copy .section-heading > p:not(.section-index) { color: #e2ebe6; }
.map-key { color: var(--slate); }

.testimonial-heading .section-index,
.section-heading.inverse .section-index,
.page-hero.green .section-index,
.page-hero.dark .section-index { color: #ff9b9a; }
.testimonial-track footer { color: #d7d9db; }
.testimonial-track footer strong { color: #ff9b9a; }

.contact-copy > p:not(.section-index) { color: rgba(255,255,255,.94); }

/* Light text on the red band and dark sections. */
.decision-grid p,
.home-cta p { color: rgba(255,255,255,.95); }
.footer-brand p,
.footer-bottom span { color: rgba(255,255,255,.86); }

/* The hero overlay is strengthened so white copy stays readable
   over any photo the client later swaps in. */
.hero-shade {
  background:
    linear-gradient(90deg, rgba(18,17,16,.86) 0%, rgba(18,17,16,.72) 38%, rgba(18,17,16,.24) 68%, rgba(18,17,16,.10) 100%),
    linear-gradient(0deg, rgba(0,0,0,.42), transparent 50%);
}
.hero-intro { color: #fff; }

/* On the homepage the header is transparent over the hero photo, so the
   white nav had no guaranteed contrast — on the bright right-hand side
   of the image it effectively disappeared. A top scrim gives every
   header item a fixed dark backing regardless of the photo used. */
body[data-page="home"] .inner-header:not(.scrolled):not(.menu-open) {
  background: linear-gradient(180deg, rgba(14,13,12,.72) 0%, rgba(14,13,12,.42) 60%, rgba(14,13,12,0) 100%);
}

/* Language switcher was 12px — below the legibility floor. */
.language-toggle { font-size: var(--fs-small); font-weight: 700; gap: 8px; }
.language-toggle span[aria-hidden="true"] { font-size: 1rem; }
.language-options button { font-size: var(--fs-small); }

/* ---------- 3. Links: never colour alone ---------- */

.faq-answer a,
.about-columns a,
.home-intro-copy a,
main p a:not(.button):not(.text-link) {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 2px;
}

/* Inline arrow links get a permanent underline rather than a
   hover-only one, so the affordance is visible at rest. */
.text-link { border-bottom: 2px solid currentColor; padding-bottom: 3px; }

/* ---------- 4. Touch targets ---------- */

.button { min-height: 56px; padding: 0 30px; font-size: 1.12rem; border-radius: 10px; }
.button-small { min-height: var(--tap); padding: 0 22px; }

.desktop-nav a,
.nav-group > button {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  padding-inline: 4px;
}

.area-directory button {
  min-height: var(--tap);
  padding: 0 20px;
  border-width: 2px;
}

.faq-item summary { min-height: 64px; display: flex; align-items: center; gap: 16px; padding-block: 18px; }

.language-toggle { min-height: var(--tap); min-width: 64px; }
.language-options button { min-height: var(--tap); padding-inline: 18px; }

.menu-toggle { width: 52px; height: 52px; }
.menu-toggle span { height: 3px; }

.footer-nav a,
.footer-address a { display: inline-flex; align-items: center; min-height: var(--tap); }
.group-trust-inner > a,
.footer-brand .group-signature { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------- 5. Focus visibility ---------- */

:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.button:focus-visible,
.whatsapp-bubble:focus-visible { outline-offset: 4px; }

/* ---------- 6. Forms ---------- */

.enquiry-form label { gap: 10px; margin-bottom: 26px; font-size: var(--fs-small); font-weight: 700; }
.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
  min-height: 58px;
  padding: 15px 17px;
  font-size: 1.12rem;
  border: 2px solid #a9aeb2;
  border-radius: 12px;
}
.enquiry-form textarea { min-height: 150px; line-height: 1.65; }
.enquiry-form input::placeholder,
.enquiry-form textarea::placeholder { color: #6b6f75; opacity: 1; }
.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(11,87,208,.22);
}
/* Call / email cards: labels were 0.7rem uppercase and the values
   0.85rem — the two things a family most needs to read. */
.contact-methods a { flex: 1 1 260px; min-height: 78px; align-content: center; border-width: 2px; }
.contact-methods span { font-size: var(--fs-small); letter-spacing: .05em; color: var(--slate); }
.contact-methods strong { font-size: 1.2rem; }
.contact-licence { font-size: var(--fs-small); }

.consent { align-items: flex-start; gap: 14px; line-height: 1.6; }
.consent input { width: 26px; height: 26px; margin-top: 2px; flex: 0 0 26px; }
.enquiry-form .button { width: 100%; }

/* ---------- 7. Calmer motion ---------- */

/* The site animated the hero and revealed cards on scroll. Motion is
   kept but halved in distance and duration — movement in peripheral
   vision is disorienting for older users and anyone with vestibular
   sensitivity. */
.hero-image { animation-duration: .8s; transform: scale(1.01); }
.hero-copy > * { animation-duration: .45s; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .1s; }
.hero-copy > :nth-child(3) { animation-delay: .15s; }
.hero-copy > :nth-child(4) { animation-delay: .2s; }
.reveal-item { transform: translateY(10px); transition-duration: .4s; }
.button:hover { transform: none; }
.map-rings span { animation-duration: 6s; }

/* ---------- 8. Structural clarity ---------- */

/* Cards get visible edges rather than relying on subtle tonal shifts. */
.care-need,
.blog-card,
.profile-card,
.group-proof-item { border: 1px solid var(--line); }

.care-need span,
.home-steps span { font-size: 1.15rem; font-weight: 700; color: var(--red-text); }

/* Floating WhatsApp bubble (desktop only now) — darkened to pass AA and
   lifted clear of the hero assurance card it used to sit on top of. */
.whatsapp-bubble { background: #0b7239; min-height: 62px; font-size: var(--fs-small); }
body[data-page="home"] .whatsapp-bubble { bottom: 110px; }

.hero-assurance strong { font-size: 1.1rem; }
.hero-assurance span { font-size: var(--fs-small); line-height: 1.5; }

/* FAQ open/closed state gets a clearer marker. */
.faq-item summary span[aria-hidden="true"] { width: 34px; height: 34px; flex: 0 0 34px; }

/* "Good to know" note — an important disclaimer, previously low contrast. */
.home-scope-note { align-items: center; gap: 14px; }
.home-scope-note span { color: rgba(255,255,255,.94); }
.home-scope-note a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: 4px;
  border-bottom: 2px solid currentColor;
}

/* ---------- 9. Tablet ---------- */

@media (max-width: 1020px) {
  .hero { min-height: 640px; }
  .hero-assurance { width: auto; max-width: min(430px, 78vw); }
}

/* ---------- 10. Phone ---------- */

@media (max-width: 760px) {
  :root { --fs-body: 1.16rem; --fs-small: 1.05rem; }

  /* Hero, restructured for phones.

     The original laid white copy over a photo inside a 760px-tall
     block, so the headline started below the fold and every line of
     text competed with the image behind it. Text over photography is
     the most common legibility failure for older readers.

     On phones the hero is unstacked instead: solid dark panel for the
     words, then the photograph as its own full-width band, then the
     assurance card. Nothing overlaps, contrast is fixed rather than
     dependent on whatever image is behind it, and the headline and
     primary button are both above the fold. */
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    padding: 112px 0 0;
    background: #191d1b;
    overflow: visible;
  }
  .hero-shade { display: none; }
  .hero-copy { order: 1; position: static; padding-top: 0; padding-bottom: 34px; }
  .hero-image {
    order: 2;
    position: static;
    width: 100%;
    height: 260px;
    object-position: 62% 34%;
    transform: none;
    animation: none;
  }
  .hero-assurance {
    order: 3;
    position: static;
    width: 100%;
    max-width: none;
    inset: auto;
    margin: 0;
    border-radius: 0;
    padding: 20px 24px;
  }

  h1 { font-size: clamp(2.35rem, 8.6vw, 3.05rem); }
  .hero-intro { font-size: 1.12rem; margin: 18px 0 28px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 14px; width: 100%; }
  .hero-actions .button,
  .hero-actions .text-link { width: 100%; justify-content: center; text-align: center; }
  .hero-actions .text-link { min-height: var(--tap); display: inline-flex; align-items: center; border-bottom-color: rgba(255,255,255,.5); }

  .section { padding: 62px 0; }
  .section-heading h2,
  .about-copy h2,
  .contact-copy h2 { font-size: clamp(2rem, 7.6vw, 2.6rem); }

  /* Single column everywhere, generous spacing. */
  .care-needs-grid,
  .group-proof-grid,
  .blog-grid,
  .profile-grid { grid-template-columns: 1fr; gap: 18px; }
  .care-need { padding: 26px 22px; }

  .group-trust-facts { grid-template-columns: 1fr; gap: 4px; }
  .group-trust-inner { gap: 20px; }

  .area-directory { gap: 10px; }
  .area-directory button { flex: 1 1 auto; }

  /* Wide content scrolls inside itself rather than pushing the page. */
  .map-card { overflow-x: auto; }

  /* Room for the sticky contact bar. */
  body { padding-bottom: 82px; }
  .site-toast { bottom: 96px; }

  /* The floating WhatsApp bubble is redundant once the bar exists. */
  .whatsapp-bubble { display: none; }
}

/* ---------- 11. Mobile navigation ---------- */

/* The header dropdowns were hover-driven on desktop and the mobile
   menu used 12px rows. Both are reworked for finger use. */
.mobile-nav { padding: 8px 20px 28px; }
.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 10px 0;
  font-size: 1.16rem;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-of-type { border-bottom: 0; }
.mobile-nav .mobile-child {
  padding-left: 20px;
  font-weight: 500;
  border-left: 3px solid var(--line);
}
.mobile-nav p {
  margin: 22px 0 4px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
}
.mobile-languages { margin-top: 24px; gap: 10px; }
.mobile-languages button { min-height: var(--tap); min-width: 68px; border-width: 2px; font-size: var(--fs-small); }

/* A phone-call row at the top of the open menu — the action most
   people over 65 actually want. */
.mobile-nav-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  margin: 10px 0 16px;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 1.14rem;
}
.mobile-nav-call svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- 12. Sticky contact bar (phones) ---------- */

.contact-bar {
  position: fixed;
  z-index: 95;
  inset: auto 0 0 0;
  display: none;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  padding-bottom: env(safe-area-inset-bottom);
}
.contact-bar a,
.contact-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 66px;
  border: 0;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
}
.contact-bar .bar-call { background: var(--red); }
.contact-bar .bar-call:active { background: var(--red-deep); }
/* Darkened from WhatsApp's brand green so white text clears 4.5:1. */
.contact-bar .bar-whatsapp { background: #0b7239; }
.contact-bar .bar-whatsapp:active { background: #085a2d; }
.contact-bar svg { width: 24px; height: 24px; flex: 0 0 24px; fill: currentColor; }

@media (max-width: 760px) {
  .contact-bar { display: grid; }
}

/* ---------- 13. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-image { animation: none; transform: none; }
  .hero-copy > * { animation: none; opacity: 1; transform: none; }
  .map-rings span { animation: none; }
}

/* ---------- 14. Forced colours / high contrast mode ---------- */

@media (forced-colors: active) {
  .button,
  .contact-bar a,
  .contact-bar button { border: 2px solid ButtonText; }
  .hero-shade { display: none; }
}