/* ============================================================
   Elderly-friendly typography overrides
   Loaded last so it takes precedence over welcome.css / bootstrap.
   Goals (WCAG-aligned legibility for older users):
   - Larger base text (18px) with generous line-height (1.6)
   - A loaded, highly legible sans-serif (Figtree) instead of the
     unloaded "Mulish" fallback
   - Bigger, easier-to-tap form controls and buttons
   - Stronger label/heading contrast and weight
   ============================================================ */

:root {
    --gxp-font: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
    /* User-adjustable text scale (1 = default). Controlled by the floating
       font-size widget; everything sized in rem scales with it. */
    --gxp-font-scale: 1;
}

html {
    /* Anchor rem-based sizing to a larger, readable base, multiplied by the
       user-chosen scale from the accessibility widget. */
    font-size: calc(112.5% * var(--gxp-font-scale)); /* ~18px at scale 1 */
}

body {
    font-family: var(--gxp-font) !important;
    font-size: 1.125rem;   /* ~18px regardless of cascade */
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: .005em;
    color: #1a1a1a;
}

/* Headings: keep hierarchy but ensure they read large and bold. */
h1, .h1 { font-size: 2.25rem; line-height: 1.25; font-weight: 700; }
h2, .h2 { font-size: 1.85rem; line-height: 1.3;  font-weight: 700; }
h3, .h3 { font-size: 1.55rem; line-height: 1.35; font-weight: 600; }
h4, .h4 { font-size: 1.3rem;  line-height: 1.4;  font-weight: 600; }
h5, .h5 { font-size: 1.15rem; font-weight: 600; }

p, li, td, th, span, label, a, dd, dt {
    font-size: inherit;
}

/* Avoid tiny text that's hard for older eyes; lift small/.small. */
small, .small {
    font-size: .9rem !important;
}

/* Form controls — larger touch targets and readable input text. */
.form-control,
.form-select,
select,
input,
textarea,
.choices__inner,
.select2-container .select2-selection {
    font-size: 1.05rem !important;
    min-height: 48px;
    line-height: 1.5;
}
textarea.form-control { min-height: 96px; }

.field-label,
label,
.form-label {
    font-size: 1.05rem !important;
    font-weight: 600;
}

/* Checkbox/radio labels are inline option text, not field titles — keep them
   at normal body weight/size so they don't look oversized next to the box. */
.form-check-label {
    font-size: 1rem !important;
    font-weight: 400 !important;
}
/* Preserve intentionally bold check labels (e.g. the round-trip toggle). */
.form-check-label.font-weight-bold {
    font-weight: 700 !important;
}

/* Lay the checkbox and its label out as a flex row so they stay vertically
   centered regardless of the larger body line-height above. */
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
}
.form-check .form-check-input {
    position: static;
    margin: 0;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}
.form-check .form-check-label {
    margin: 0;
    line-height: 1.3;
}

/* Buttons — bigger, easier to hit and read. */
.btn {
    font-size: 1.05rem;
    font-weight: 600;
    padding: .65rem 1.25rem;
}
.btn-sm { font-size: .95rem; padding: .5rem .9rem; }

/* Links: clearer affordance. */
a { text-decoration-thickness: from-font; }

/* ============================================================
   Floating font-size adjuster.
   Two always-visible controls stacked above the floating WhatsApp button.
   Canonical styles are inlined in layouts/frontend/app.blade.php; the
   rules below mirror them so the widget looks right even before this
   external file paints.
   ============================================================ */
.gxp-font-widget {
    /* Stacked directly above the floating WhatsApp button (bottom-right).
       Mobile-first: tighter offsets by default, wider from md (≥768px). */
    position: fixed;
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 1040;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
@media (min-width: 768px) {
    .gxp-font-widget {
        right: 48px;
        bottom: 124px;
    }
}
.gxp-font-widget__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #128c4a;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(18, 140, 74, .24);
    transition: background-color .15s ease, transform .15s ease;
}
.gxp-font-widget__btn:hover:not(:disabled) {
    background: #0f7a3f;
    transform: translateY(-1px);
}
.gxp-font-widget__btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.gxp-font-widget__btn--minus { font-size: 15px; }
.gxp-font-widget__btn--plus { font-size: 19px; }

@media print {
    .gxp-font-widget { display: none !important; }
}