/* Senior-friendly typography & interaction overrides
   Loaded after input.css so utility-class sizes are reliably bumped.
   - Larger base font size and small-text utility classes
   - Tighter contrast on muted/secondary text
   - Comfortable line-height for paragraphs
   - Larger, easier-to-tap form controls and buttons
   - Layout containment: reinforce centered wrappers and kill horizontal overflow
*/

/* Layout: ensure no horizontal scrollbar and reinforce centered wrappers. */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
.max-w-7xl {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Baseline: 18px body on desktop with comfortable leading.
   Headings are intentionally NOT bumped — Tailwind heading classes already
   render at readable sizes and the user asked to keep them tasteful. */
body {
    font-size: 18px !important;
    line-height: 1.65 !important;
}
p {
    line-height: 1.65;
}

/* Small text utility overrides — every body-text class lands at 16px or more */
.text-xs { font-size: 0.875rem !important; line-height: 1.55 !important; }   /* 12px -> 14px (fine print only) */
.text-sm { font-size: 1rem !important; line-height: 1.6 !important; }        /* 14px -> 16px (footer/cards/lists) */
.text-base { font-size: 1.125rem !important; line-height: 1.65 !important; } /* 16px -> 18px (matches body) */

/* Custom arbitrary text sizes used inline in the markup */
.text-\[10px\] { font-size: 0.875rem !important; }    /* 10px -> 14px */
.text-\[11px\] { font-size: 0.9375rem !important; }   /* 11px -> 15px */
.text-\[15px\] { font-size: 1.0625rem !important; }   /* 15px -> 17px */

/* FAQ: questions at 18px, answers at 17px */
details summary {
    font-size: 1.125rem !important;       /* 18px */
    line-height: 1.5 !important;
    font-weight: 600;
}
details summary span:not(.material-symbols-outlined) {
    font-size: inherit !important;
}
details p {
    font-size: 1.0625rem !important;      /* 17px */
    line-height: 1.65 !important;
}

/* Mobile readability: keep paragraphs spacious, never cramped */
@media (max-width: 640px) {
    body { font-size: 17px !important; }
    p, li { line-height: 1.65 !important; }
    .text-base { font-size: 1.0625rem !important; }   /* 17px on mobile */
}

/* Stronger contrast on secondary / muted text — easier to read */
.text-on-surface-variant { color: #3f4f63 !important; }
.text-slate-400 { color: #64748b !important; }
.text-slate-500 { color: #475569 !important; }
.text-slate-600 { color: #334155 !important; }

/* Form controls: larger font and taller hit-areas */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
    font-size: 1.0625rem !important;       /* 17px */
    min-height: 48px;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}
textarea {
    min-height: 120px !important;
    line-height: 1.55 !important;
}

/* Buttons & button-style anchors: comfortable tap target + min 16px text */
button,
[type="button"],
[type="submit"] {
    min-height: 46px;
    font-size: max(1rem, 1em);                 /* never below 16px */
}
/* Button-style anchors: keep them in the 16-18px range and add padding floor */
a[class*="bg-red-"],
a[class*="bg-primary"],
a[class*="bg-blue-"],
a.inline-flex[class*="rounded-"] {
    min-height: 46px;
    padding-top: max(0.625rem, var(--tw-pad-y, 0px));
    padding-bottom: max(0.625rem, var(--tw-pad-y, 0px));
}

/* Footer: nothing smaller than 16px (overrides text-xs legal disclaimer too) */
footer { font-size: 1rem; }
footer .text-xs { font-size: 1rem !important; line-height: 1.55 !important; }
footer p, footer a, footer span, footer div { line-height: 1.6; }

/* <address> element default italic is undesirable in our footer / contact card.
   Tailwind's .not-italic utility isn't in the compiled CSS, so override here. */
address,
.not-italic {
    font-style: normal !important;
}
/* Slightly wider gap between "Address:" label and the address value so they
   don't visually touch in narrow footer columns */
footer .flex.gap-1\.5,
footer div.text-sm.flex {
    gap: 0.5rem !important;
}

/* FAQ disclosure rows: bump readability of the summary */
details summary {
    font-size: 1rem;
    line-height: 1.55;
}

/* Header nav links: slightly larger for easier reading */
header nav a {
    font-size: 1rem;
}

/* Focus rings are larger and more visible for keyboard / low-vision users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 3px solid #1e3a8a;
    outline-offset: 2px;
}