/* fixes.css
   Loaded after app.css. app.css is a compiled Tailwind build that cannot be
   regenerated here, so corrections that need utilities the build never emitted
   live in this file instead. Everything below fixes a verified defect. */

/* --- Keyboard focus -------------------------------------------------------
   app.css ships `focus-visible:ring-ring` but never compiled it, and --ring is
   undefined, so 238 buttons and inputs had no visible focus at all.

   This rule wins over app.css's `focus-visible:outline-none` for a reason worth
   knowing before editing either file: app.css puts every utility inside
   `@layer utilities`, and this file is unlayered. Unlayered styles beat layered
   ones outright, whatever the specificity. So the outline holds -- but only for
   as long as fixes.css stays out of a layer. Do not wrap this file in @layer.

   The three focus utilities the pages used to carry are now stripped, since
   none of them did anything: `ring-ring` was never compiled, so --tw-ring-color
   stayed unset and `ring-1` fell back to currentcolor -- a 1px ring in the text
   colour, which on a solid button is no focus indicator at all -- and
   `outline-none` was already losing to this rule. verify.py fails the build if
   any of them comes back. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid hsl(165 40% 32%);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (prefers-color-scheme: dark) {
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline-color: hsl(165 45% 62%);
  }
}

/* --- The phone number on mobile -------------------------------------------
   The top bar carrying (805) 966-4900 was `hidden md:block`, so the single
   most important conversion action disappeared on the most common device.
   Show it, stacked and compact, and drop the email to keep it to one line. */
@media (max-width: 767px) {
  .bg-primary.text-primary-foreground.py-2.px-4.text-sm.hidden {
    display: block !important;
    padding-top: .45rem;
    padding-bottom: .45rem;
    font-size: .8125rem;
  }
  .bg-primary.text-primary-foreground.py-2.px-4.text-sm.hidden .container {
    justify-content: center;
  }
  /* the service-area line and the email are noise on a small screen */
  .bg-primary.text-primary-foreground.py-2.px-4.text-sm.hidden .container > span,
  .bg-primary.text-primary-foreground.py-2.px-4.text-sm.hidden a[href^="mailto:"] {
    display: none;
  }
  .bg-primary.text-primary-foreground.py-2.px-4.text-sm.hidden a[href^="tel:"] {
    font-weight: 700;
    font-size: .9375rem;
  }
}

/* --- Horizontal overflow at 390px -----------------------------------------
   Long CTA labels such as "Call (805) 966-4900" forced the page to 401-411px
   against a 390px viewport. Let them wrap instead of pushing the layout. */
@media (max-width: 480px) {
  .whitespace-nowrap { white-space: normal; }
  button, .btn { max-width: 100%; }
}

/* --- Call-to-action anchors -----------------------------------------------
   282 CTAs shipped as `<a><button>...</button></a>`. Interactive content
   cannot nest: it is invalid HTML, it gives keyboard users two tab stops per
   CTA, and screen readers announce an ambiguous nested control. They are now
   single anchors carrying `.btn` plus the classes the button used to hold.
   `.btn` exists so the mobile rules below, which used to key off the `button`
   element, still reach them. */
.btn { text-decoration: none; }

/* --- Legibility for a 65+ audience ----------------------------------------
   28% of text rendered at 14px or smaller, with one element at 10.4px, and
   body copy ran 82-92 characters per line. */
body { font-size: 17px; }
.text-sm  { font-size: .9375rem; }
.text-xs  { font-size: .8438rem; }
.text-\[0\.65rem\] { font-size: .75rem; }

/* Cap the measure on long-form prose without touching grid or card layouts. */
main p:not([class*="text-center"]) { max-width: 72ch; }

/* --- Contrast -------------------------------------------------------------
   Measured failures: white on the sage button at 3.70:1, the CMS-required
   Medicare disclaimer at 4.30:1, the copyright line at 3.31:1. */
.bg-secondary { background-color: hsl(165 32% 34%) !important; }
.hover\:bg-secondary\/90:hover { background-color: hsl(165 34% 29%) !important; }
.text-primary-foreground\/50 { color: rgba(255, 255, 255, .78) !important; }
.text-primary-foreground\/40 { color: rgba(255, 255, 255, .72) !important; }
.text-primary-foreground\/70 { color: rgba(255, 255, 255, .86) !important; }

/* The disclaimer is legally required text and was the least readable on the
   page. Give it a normal reading size. */
footer .text-xs { font-size: .875rem; line-height: 1.6; }

/* --- Tap targets ----------------------------------------------------------
   WCAG 2.2 asks for 24px minimum; comfortable for this audience is nearer 44. */
@media (max-width: 767px) {
  header nav a, footer a, .md\:hidden a { min-height: 44px; display: inline-flex; align-items: center; }
  button, .btn { min-height: 44px; }
  /* Form controls ship at h-9, which is 36px. Same reasoning as the buttons
     above, and it matters more here: a mis-tap on a form field is a visitor
     who gives up on the enquiry. */
  input, select, textarea { min-height: 44px; }
}

/* --- Skip link ------------------------------------------------------------
   Every page put the visitor through the top bar, the logo and the whole nav
   before reaching content, with no way past it from the keyboard. This is the
   first focusable element on the page and stays out of sight until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: hsl(165 40% 32%);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}
/* main gets tabindex="-1" so focus actually lands there when the link is used;
   it must never show a focus ring of its own for that. */
main:focus { outline: none; }

/* --- Form field boundaries -------------------------------------------------
   --border and --input are both 215 20% 90%, which is 1.27:1 against white,
   well under the 3:1 WCAG 1.4.11 asks for a control boundary. On a card the
   fields read as flat grey areas rather than something you can type in, which
   is worst for exactly this audience. Card outlines and dividers keep the light
   value; only the controls are darkened. */
   The audit suggested 65% lightness for roughly 3.2:1. Measured, 65% is well
   under 3:1 and even 60% only reaches 3.02, so this uses 56% for 3.48:1 and
   some margin. Worth measuring rather than taking the estimate. */
input, select, textarea {
  border-color: hsl(215 20% 56%) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: hsl(165 40% 32%) !important;
}

/* --- The guided path stays in view ----------------------------------------
   The sidebar carries the 12-item path and computed to position: static, so on
   a several-thousand-word page it scrolled away and never came back. The path
   is the site's best idea for this audience; losing it halfway down the page
   discards the benefit exactly where the reader is deepest in the material. */
@media (min-width: 768px) {
  main aside {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    /* A flex item defaults to min-width:auto, so it refuses to go below its
       min-content width. Wrapping the path in a <details> pushed that above
       w-64 and the sidebar grew from 256px to 288px. Pin the basis and allow
       the item to reach it; the links wrapped fine at 256px before. */
    flex: 0 0 16rem;
    min-width: 0;
  }
}

/* --- The guided-path disclosure shows its state ---------------------------
   `list-none` removes the native triangle and the hand-rolled chevron never
   moved, so the arrow pointed down whether the panel was open or shut. Someone
   who opens it saw the same arrow and could reasonably conclude nothing
   happened. The FAQ accordions keep their native marker and are left alone. */
details[open] > summary .lucide-chevron-down {
  transform: rotate(180deg);
}
summary .lucide-chevron-down {
  transition: transform .2s ease;
}

/* --- Buttons acknowledge the pointer --------------------------------------
   hover-elevate and active-elevate-2 were never compiled, so most buttons had
   no hover or active feedback at all. The colour-shifting ones already do;
   this covers the rest and gives every button a press. */
.btn, button {
  transition: filter .15s ease, transform .05s ease;
}
.btn:hover, button:not(:disabled):hover {
  filter: brightness(0.94);
}
.btn:active, button:not(:disabled):active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .btn:active, button:active { transform: none; }
}