/* =========================================================
   Falls Medications Review — Full CSS (Senior-friendly)
   ========================================================= */

/* -----------------------------
   0) Root tokens & resets
   ----------------------------- */
:root {
    /* Colors */
    --text: #222222; /* stronger body text */
    --muted: #4a4f55; /* readable secondary */
    --primary: #0a58ca; /* AA-compliant link/button */
    --primary-hover: #0949a8;
    --border: rgba(0,0,0,0.12);
    --bg-soft: #f5f7fb;
    /* Spacing scale */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    /* Typography */
    --font-base: 18px; /* larger default for seniors */
    --lh-base: 1.68;
    --lh-heading: 1.22;
    /* Radius & effects */
    --radius: 12px;
    --shadow-sm: 0 4px 16px rgba(16,24,40,.08);
    --focus-ring: 0 0 0 4px rgba(10,88,202,.18);
}

/* Basic reset */
* {
    box-sizing: border-box;
}

html {
    font-size: var(--font-base);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    color: var(--text);
    background: #ffffff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    line-height: var(--lh-base);
    letter-spacing: .01em;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
    border-style: none;
}

a {
    color: var(--primary);
    text-decoration: none;
}

    a:hover, a:focus {
        color: var(--primary-hover);
        text-decoration: underline;
    }

/* Utility text (to match markup) */
.text-primary {
    color: var(--primary) !important;
}

.text-muted {
    color: var(--muted) !important;
}

.fw-bold {
    font-weight: 700;
}

.lead {
    font-size: 1.1rem;
}

.display-5 {
    font-size: clamp(2.2rem, 3.2vw + 1rem, 2.9rem);
    line-height: var(--lh-heading);
}

.small {
    font-size: .95rem;
}

/* Common margin utilities */
.mb-0 {
    margin-bottom: 0 !important;
}

.mb-2 {
    margin-bottom: var(--space-4) !important;
}

.mb-3 {
    margin-bottom: var(--space-5) !important;
}

.mb-4 {
    margin-bottom: var(--space-6) !important;
}

.mb-5 {
    margin-bottom: var(--space-7) !important;
}

/* -----------------------------
   1) Page container & grid
   ----------------------------- */
.container-split {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

@media (min-width: 1200px) {
    .container-split {
        max-width: 1360px;
        padding-left: 44px;
        padding-right: 44px;
    }
}

@media (min-width: 1600px) {
    .container-split {
        max-width: 1440px;
    }
}

/* Grid uses character-based left track to keep story roomy */
.split-grid {
    display: grid;
    gap: var(--space-7);
}

@media (min-width: 992px) {
    .split-grid {
        /* Left track stays between 72–92 characters; right track takes the rest */
        grid-template-columns: minmax(72ch, 92ch) minmax(640px, 1fr);
        column-gap: 3.25rem;
        row-gap: 2.5rem;
        align-items: start;
    }
}

/* Right column hook if needed */
.form-side {
    width: 100%;
    max-width: 860px;
}

/* -----------------------------
   2) Story (left) column: readability
   ----------------------------- */
.info-side {
    max-width: 92ch;
}

    .info-side h1 {
        margin: 0 0 1.1rem 0;
        line-height: 1.2;
    }

    .info-side p,
    .info-side li {
        font-size: 1.08rem;
        line-height: 1.7;
        max-width: 92ch;
    }

    .info-side ul {
        margin: .9rem 0 1.35rem 1.25rem;
    }

    .info-side li {
        margin-bottom: 0.6rem;
    }

    /* Callout */
    .info-side .fst-italic {
        font-style: italic;
        color: #2d3135;
        background: #f6f9ff;
        border-left: 4px solid var(--primary);
        border-radius: 6px;
        padding: .7rem 1rem;
    }

/* Gentle stickiness on large screens */
@media (min-width: 1200px) {
    .info-side {
        position: sticky;
        top: 2rem;
    }
}

/* -----------------------------
   3) Cards, panels, trust box
   ----------------------------- */
.card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

    .card.border-0 {
        border-color: transparent;
    }

.card-body {
    padding: 1.5rem 1.5rem;
}

@media (min-width: 1200px) {
    .card-body {
        padding: 1.75rem 1.75rem;
    }
}

/* Trust section: single column by default, two columns only on very wide screens */
.trust-box .row {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
}

.trust-box .card-body {
    max-width: 100ch;
}

@media (min-width: 1500px) {
    .trust-box .row {
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem;
    }
}

/* -----------------------------
   4) Forms & controls
   ----------------------------- */
.form-label {
    display: block;
    margin-bottom: .35rem;
    font-size: 1rem;
    color: #2b2f33;
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: .65rem .85rem;
    font-size: 1rem;
    color: var(--text);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .form-control::placeholder {
        color: #8a9096;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary);
        box-shadow: var(--focus-ring);
        outline: none;
    }

.form-section {
    margin-bottom: 1.25rem;
}

.form-hint {
    color: #51565b;
    font-size: .95rem;
    margin-top: .25rem;
}

.form-error {
    color: #a2000a;
    font-weight: 600;
}

.form-control.is-invalid {
    border-color: #a2000a;
    box-shadow: 0 0 0 4px rgba(162,0,10,.15);
}

/* Optional two-column field groups on desktop */
@media (min-width: 992px) {
    .form-section.grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 1.25rem;
    }
}

/* Buttons */
.btn, button, [role="button"] {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: .8rem 1.3rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

    .btn-primary:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
    }

/* Payment note / disclaimers */
.disclaimer-text,
.payment-note {
    margin-top: .75rem;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--muted);
    background: #f9fbff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .75rem .9rem;
}

/* -----------------------------
   5) Autocomplete / suggestions
   ----------------------------- */
#drugResults,
.suggestion-list {
    width: min(720px, 100%);
    max-height: 320px;
    overflow: auto;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.suggestion-item {
    padding: 14px 16px;
    line-height: 1.4;
    cursor: pointer;
}

    .suggestion-item:hover,
    .suggestion-item.active {
        background: #e3e7ee;
        color: var(--primary);
    }

/* -----------------------------
   6) Accessibility & interaction
   ----------------------------- */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

@media (forced-colors: active) {
    * {
        outline: 1px solid CanvasText;
    }

    a {
        text-decoration: underline;
    }
}

/* -----------------------------
   7) Header, footer (light touch)
   ----------------------------- */
.site-header, .site-footer {
    padding: var(--space-5) 0;
    color: #5a6066;
}

.site-footer {
    font-size: .95rem;
}

/* -----------------------------
   8) Small screens
   ----------------------------- */
@media (max-width: 991.98px) {
    .split-grid {
        grid-template-columns: 1fr;
    }

    .info-side {
        max-width: 82ch;
    }
    /* slightly wider when stacked */
    .container-split {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }
}

/* -----------------------------
   9) Icon list helpers (if used)
   ----------------------------- */
.icon-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .icon-list li {
        display: flex;
        gap: .5rem;
        margin-bottom: .6rem;
    }

    .icon-list i {
        margin-top: .15rem;
        color: var(--primary);
    }

html, body {
    height: 100%;
}
.page-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-content {
    flex: 1 0 auto; /* fill remaining space */
}

.site-footer {
    margin-top: auto; /* push to bottom when content short */
    /* your footer styling */
    padding: 1rem 0;
    border-top: 1px solid rgba(0,0,0,.1);
    background: #fff;
}

/* End of full CSS */