/*  ============================================================================
    Food Pantry Helper - UI redesign theme layer (Bootstrap 5.3)
    ----------------------------------------------------------------------------
    This file does three jobs without touching any controller/model logic:
      1. THEMES   - 3 selectable, warm & friendly themes via CSS variables.
      2. COMPAT   - restyles legacy Bootstrap 3 markup (panel/well/btn-default,
                    col-xs-*, pull-*, .label, .img-responsive, input-group-addon)
                    so the existing ~400 views look right under Bootstrap 5.
      3. A11Y     - visible focus, accessible contrast, skip link, reduced motion.
    Loaded AFTER bootstrap.min.css so these rules win.
    ============================================================================ */

/* The friendly "Nunito" typeface is loaded via <link> in _Layout.cshtml so it
   works correctly when this file is bundled/minified; a system fallback stack
   keeps things readable offline. */

/* ---------------------------------------------------------------------------
   1. THEME DEFINITIONS
   --------------------------------------------------------------------------- */

/* ---- Theme A: "Warm Harvest" (default) — cream, terracotta & sage --------- */
:root,
[data-fph-theme="warm"] {
    --fph-font: "Nunito", "Nunito Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fph-base-size: 1rem;            /* 16px */
    --fph-radius: .85rem;

    --fph-bg: #fbf6ef;                /* warm cream page */
    --fph-surface: #ffffff;           /* cards/panels */
    --fph-surface-alt: #f4ece1;       /* subtle warm fill */
    --fph-text: #3b3127;              /* warm near-black */
    --fph-muted: #6f6354;
    --fph-border: #e4d8c7;

    --fph-primary: #c1572d;           /* terracotta */
    --fph-primary-dark: #a4441f;
    --fph-primary-contrast: #ffffff;
    --fph-accent: #5b8c5a;            /* sage green */
    --fph-accent-dark: #46703f;
    --fph-link: #a4441f;

    --fph-navbar-bg: #7a3b22;         /* deep cocoa */
    --fph-navbar-text: #fcefe2;
    --fph-navbar-hover-bg: #92492b;
    --fph-footer-bg: #efe4d4;

    --fph-focus: #1d6fb8;
}

/* ---- Theme B: "Coastal" — blue & orange, high-contrast / accessible ------- */
[data-fph-theme="blueorange"] {
    --fph-font: "Nunito", "Nunito Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fph-base-size: 1rem;
    --fph-radius: .85rem;

    --fph-bg: #f3f7fb;                /* soft warm-tinted blue-white */
    --fph-surface: #ffffff;
    --fph-surface-alt: #e7f0f8;
    --fph-text: #14202b;              /* very dark slate — strong contrast */
    --fph-muted: #4a5763;
    --fph-border: #c5d6e6;

    --fph-primary: #d2691e;           /* friendly orange */
    --fph-primary-dark: #a8500f;
    --fph-primary-contrast: #ffffff;
    --fph-accent: #1565a8;            /* clear blue */
    --fph-accent-dark: #0d4c83;
    --fph-link: #0d4c83;             /* AA on white */

    --fph-navbar-bg: #0d4c83;         /* deep blue, white text = AAA */
    --fph-navbar-text: #ffffff;
    --fph-navbar-hover-bg: #15609e;
    --fph-footer-bg: #e1ebf5;

    --fph-focus: #d2691e;
}

/* ---- Theme C: "Cozy Large" — warm, larger font for easy reading ---------- */
[data-fph-theme="large"] {
    --fph-font: "Nunito", "Nunito Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fph-base-size: 1.18rem;         /* ~19px base — noticeably larger */
    --fph-radius: 1rem;

    --fph-bg: #fdf7f0;
    --fph-surface: #ffffff;
    --fph-surface-alt: #f6ebde;
    --fph-text: #2f2a23;              /* high contrast for readability */
    --fph-muted: #5f564a;
    --fph-border: #e6d9c8;

    --fph-primary: #b9542b;
    --fph-primary-dark: #97401d;
    --fph-primary-contrast: #ffffff;
    --fph-accent: #4f7d4a;
    --fph-accent-dark: #3c6238;
    --fph-link: #97401d;

    --fph-navbar-bg: #6d4a2f;
    --fph-navbar-text: #fbf1e6;
    --fph-navbar-hover-bg: #835838;
    --fph-footer-bg: #f1e6d6;

    --fph-focus: #1d6fb8;
}

/* ---------------------------------------------------------------------------
   2. MAP THEME VARS INTO BOOTSTRAP + BASE ELEMENTS
   --------------------------------------------------------------------------- */
:root {
    --bs-font-sans-serif: var(--fph-font);
    --bs-body-font-family: var(--fph-font);
    --bs-body-bg: var(--fph-bg);
    --bs-body-color: var(--fph-text);
    --bs-border-color: var(--fph-border);
    --bs-link-color: var(--fph-link);
    --bs-link-hover-color: var(--fph-primary-dark);
    --bs-secondary-color: var(--fph-muted);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--fph-font);
    font-size: var(--fph-base-size);
    background-color: var(--fph-bg);
    color: var(--fph-text);
    /* header is sticky / in normal flow, so no fixed-navbar offset is needed
       (overrides Site.css padding-top:50px) */
    padding-top: 0;
    line-height: 1.6;
}

/* Two-level sticky header (top utility bar + section bar) */
.fph-header { box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.fph-header .fph-navbar { box-shadow: none; }

a { color: var(--fph-link); }
a:hover { color: var(--fph-primary-dark); }

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--fph-text); }

/* The large-font theme scales headings & controls up a touch too. */
[data-fph-theme="large"] body { line-height: 1.7; }
[data-fph-theme="large"] .btn,
[data-fph-theme="large"] .form-control,
[data-fph-theme="large"] .form-select { font-size: 1.05rem; }

/* ---------------------------------------------------------------------------
   3. NAVBAR (used by the redesigned _Layout)
   --------------------------------------------------------------------------- */
.fph-navbar {
    background-color: var(--fph-navbar-bg) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.fph-navbar .navbar-brand,
.fph-navbar .nav-link {
    color: var(--fph-navbar-text) !important;
    font-weight: 600;
}
.fph-navbar .navbar-brand { font-weight: 800; letter-spacing: .2px; }
.fph-navbar .nav-link { border-radius: .5rem; padding: .45rem .8rem; transition: background-color .15s ease; }
.fph-navbar .nav-link:hover,
.fph-navbar .nav-link:focus { background-color: var(--fph-navbar-hover-bg); }
.fph-navbar .nav-link.active { background-color: var(--fph-navbar-hover-bg); text-decoration: underline; }
.fph-navbar .dropdown-menu { border-radius: var(--fph-radius); border-color: var(--fph-border); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.fph-navbar .navbar-toggler { border-color: rgba(255,255,255,.4); }
.fph-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .25rem rgba(255,255,255,.35); }
/* Small separators between top nav items (only when the bar is horizontal). */
@media (min-width: 992px) {
    .fph-navbar .navbar-nav > .nav-item + .nav-item {
        border-left: 1px solid rgba(255, 255, 255, .28);
    }
}
.fph-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Second-level section navigation bar (sits below the utility bar) */
.fph-subnav {
    background-color: var(--fph-navbar-hover-bg);
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.fph-subnav-list {
    margin: 0;
    padding: .25rem 0;
    -webkit-overflow-scrolling: touch;
}
.fph-subnav .nav-link {
    color: var(--fph-navbar-text);
    font-weight: 600;
    white-space: nowrap;
    border-radius: .5rem;
    padding: .45rem .85rem;
    transition: background-color .15s ease;
}
.fph-subnav .nav-link:hover,
.fph-subnav .nav-link:focus { background-color: rgba(255, 255, 255, .14); }
.fph-subnav .nav-link.active { background-color: rgba(255, 255, 255, .2); text-decoration: underline; }
/* small separators between section items on wide screens */
@media (min-width: 992px) {
    .fph-subnav-list > .nav-item + .nav-item { border-left: 1px solid rgba(255, 255, 255, .22); }
}
/* slim scrollbar for the horizontal section strip on narrow screens */
.fph-subnav-list::-webkit-scrollbar { height: 6px; }
.fph-subnav-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 3px; }

/* ---------------------------------------------------------------------------
   4. THEME SWITCHER widget
   --------------------------------------------------------------------------- */
.fph-theme-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.fph-swatch {
    width: 1.1rem; height: 1.1rem; border-radius: 50%;
    border: 1px solid rgba(0,0,0,.2); display: inline-block; flex: 0 0 auto;
}
.fph-swatch-warm { background: linear-gradient(135deg, #c1572d 50%, #5b8c5a 50%); }
.fph-swatch-blueorange { background: linear-gradient(135deg, #1565a8 50%, #d2691e 50%); }
.fph-swatch-large { background: linear-gradient(135deg, #b9542b 50%, #4f7d4a 50%); }
.fph-theme-menu .dropdown-item.active,
.fph-theme-menu .dropdown-item:active { background-color: var(--fph-surface-alt); color: var(--fph-text); }

/* ---------------------------------------------------------------------------
   5. BUTTONS (theme-aware, incl. legacy .btn-default)
   --------------------------------------------------------------------------- */
.btn { border-radius: .6rem; font-weight: 600; }
.btn-primary {
    --bs-btn-bg: var(--fph-primary);
    --bs-btn-border-color: var(--fph-primary);
    --bs-btn-hover-bg: var(--fph-primary-dark);
    --bs-btn-hover-border-color: var(--fph-primary-dark);
    --bs-btn-active-bg: var(--fph-primary-dark);
    --bs-btn-active-border-color: var(--fph-primary-dark);
    --bs-btn-color: var(--fph-primary-contrast);
    --bs-btn-hover-color: var(--fph-primary-contrast);
    --bs-btn-active-color: var(--fph-primary-contrast);
    --bs-btn-disabled-bg: var(--fph-primary);
    --bs-btn-disabled-border-color: var(--fph-primary);
}
.btn-success {
    --bs-btn-bg: var(--fph-accent);
    --bs-btn-border-color: var(--fph-accent);
    --bs-btn-hover-bg: var(--fph-accent-dark);
    --bs-btn-hover-border-color: var(--fph-accent-dark);
    --bs-btn-active-bg: var(--fph-accent-dark);
    --bs-btn-active-border-color: var(--fph-accent-dark);
}
.btn-info {
    --bs-btn-bg: var(--fph-accent);
    --bs-btn-border-color: var(--fph-accent);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--fph-accent-dark);
    --bs-btn-hover-border-color: var(--fph-accent-dark);
    --bs-btn-hover-color: #fff;
}
/* Legacy BS3 default button → friendly light button */
.btn-default {
    --bs-btn-color: var(--fph-text);
    --bs-btn-bg: var(--fph-surface);
    --bs-btn-border-color: var(--fph-border);
    --bs-btn-hover-color: var(--fph-text);
    --bs-btn-hover-bg: var(--fph-surface-alt);
    --bs-btn-hover-border-color: var(--fph-primary);
    --bs-btn-active-bg: var(--fph-surface-alt);
    --bs-btn-active-border-color: var(--fph-primary);
    color: var(--fph-text);
    background-color: var(--fph-surface);
    border: 1px solid var(--fph-border);
    border-radius: .6rem;
    padding: .375rem .75rem;
    display: inline-block;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none;
}
.btn-default:hover { background-color: var(--fph-surface-alt); border-color: var(--fph-primary); color: var(--fph-text); }
/* BS3 .btn-xs removed in BS5 */
.btn-xs { padding: .15rem .4rem; font-size: .78rem; border-radius: .4rem; }
/* BS3/BS4 .btn-block removed in BS5 */
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: .5rem; }

/* ---- Fix "white text on white button" ---------------------------------
   Many views use <div class="btn btn-primary btn-default"> with an inner
   link forced to white (style="color:white"). Under BS5 the later-defined
   .btn-default made the background white, so the white text vanished.
   Treat the primary+default combo as a real (coloured) primary button. */
.btn.btn-primary.btn-default {
    --bs-btn-color: var(--fph-primary-contrast);
    --bs-btn-bg: var(--fph-primary);
    --bs-btn-border-color: var(--fph-primary);
    --bs-btn-hover-color: var(--fph-primary-contrast);
    --bs-btn-hover-bg: var(--fph-primary-dark);
    --bs-btn-hover-border-color: var(--fph-primary-dark);
    color: var(--fph-primary-contrast);
    background-color: var(--fph-primary);
    border-color: var(--fph-primary);
}
.btn.btn-primary.btn-default:hover {
    color: var(--fph-primary-contrast);
    background-color: var(--fph-primary-dark);
    border-color: var(--fph-primary-dark);
}

/* Links forced white inline that now sit on a LIGHT background become
   unreadable -> make them use the readable link colour instead... */
a[style*="color:white"], a[style*="color: white"],
a[style*="color:#fff"], a[style*="color: #fff"] {
    color: var(--fph-link) !important;
}
/* ...but keep them white when they really are inside a coloured button. */
.btn-primary a, .btn-success a, .btn-info a,
.btn-danger a, .btn-secondary a {
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   6. CARDS + LEGACY PANELS / WELLS
   --------------------------------------------------------------------------- */
.card { border-radius: var(--fph-radius); border-color: var(--fph-border); background-color: var(--fph-surface); box-shadow: 0 4px 14px rgba(0,0,0,.05); }

/* BS3 .panel -> card look */
.panel {
    background-color: var(--fph-surface);
    border: 1px solid var(--fph-border);
    border-radius: var(--fph-radius);
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
    margin-bottom: 1.25rem;
}
.panel > .panel-heading {
    background-color: var(--fph-surface-alt);
    color: var(--fph-text);
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--fph-border);
    border-radius: var(--fph-radius) var(--fph-radius) 0 0;
    font-weight: 700;
}
.panel > .panel-body { padding: 1.1rem; }
.panel > .panel-footer {
    background-color: var(--fph-surface-alt);
    padding: .75rem 1.1rem;
    border-top: 1px solid var(--fph-border);
    border-radius: 0 0 var(--fph-radius) var(--fph-radius);
}
.panel-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.panel-primary > .panel-heading { background-color: var(--fph-primary); color: var(--fph-primary-contrast); border-color: var(--fph-primary); }
.panel-success > .panel-heading { background-color: var(--fph-accent); color: #fff; border-color: var(--fph-accent); }
.panel-info > .panel-heading { background-color: var(--fph-surface-alt); }

/* BS3 .well -> soft inset surface */
.well {
    background-color: var(--fph-surface-alt);
    border: 1px solid var(--fph-border);
    border-radius: var(--fph-radius);
    padding: 1.1rem;
    margin-bottom: 1.25rem;
}

/* BS3/BS4 .jumbotron (removed in BS5) -> friendly hero box */
.jumbotron {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
    background-color: var(--fph-surface);
    background-image: linear-gradient(160deg, var(--fph-surface) 0%, var(--fph-surface-alt) 100%);
    border: 1px solid var(--fph-border);
    border-radius: var(--fph-radius);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .07);
}
.jumbotron h1 { font-weight: 800; color: var(--fph-primary-dark); }
@media (min-width: 768px) {
    .jumbotron { padding: 3.25rem 3rem; }
}
/* When a hero is built as a Bootstrap card, let .card-body own the padding. */
.card.jumbotron { padding: 0; }
.fph-hero {
    background-image: linear-gradient(160deg, var(--fph-surface) 0%, var(--fph-surface-alt) 100%);
    border-color: var(--fph-border);
}
.fph-hero h1 { font-size: 2.4rem; font-weight: 800; color: var(--fph-primary-dark); }

/* BS3 .thumbnail (removed in BS5) -> bordered content/image box */
.thumbnail {
    display: block;
    padding: 1rem;
    margin-bottom: 1.25rem;
    background-color: var(--fph-surface);
    border: 1px solid var(--fph-border);
    border-radius: var(--fph-radius);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
}
.thumbnail > img,
.thumbnail a > img { display: block; max-width: 100%; height: auto; border-radius: calc(var(--fph-radius) - .25rem); }
.thumbnail .caption { padding: .6rem .25rem 0; color: var(--fph-text); }

/* BS3 .page-header (removed in BS5) -> underlined section heading */
.page-header {
    padding-bottom: .6rem;
    margin: 1.5rem 0 1.25rem;
    border-bottom: 2px solid var(--fph-border);
}

/* ---------------------------------------------------------------------------
   7. FORMS (legacy BS3 helpers BS5 dropped)
   --------------------------------------------------------------------------- */
.form-group { margin-bottom: 1rem; }
.control-label { font-weight: 600; margin-bottom: .3rem; display: inline-block; }
.help-block { color: var(--fph-muted); font-size: .9em; display: block; margin-top: .25rem; }
.checkbox, .radio { margin-bottom: .5rem; }
.form-control, .form-select {
    border-radius: .55rem;
    border-color: var(--fph-border);
    background-color: var(--fph-surface);
    color: var(--fph-text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--fph-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--fph-primary) 30%, transparent);
}
/* The legacy Site.css caps all inputs at max-width:280px. On the redesigned Register
   form we want each field to fill its Bootstrap grid column, so lift that cap there. */
.fph-register-form .form-control,
.fph-register-form .form-select {
    max-width: 100%;
}
/* Inputs inside an input-group (the search boxes, etc.) are meant to fill their
   container, so lift the legacy Site.css 280px cap for them too. */
.input-group > .form-control,
.input-group > .form-select {
    max-width: 100%;
}
/* BS3 input-group-addon -> input-group-text look */
.input-group-addon {
    display: flex; align-items: center;
    padding: .375rem .75rem;
    background-color: var(--fph-surface-alt);
    border: 1px solid var(--fph-border);
    color: var(--fph-text);
}

/* ---------------------------------------------------------------------------
   8. TABLES, LABELS, ALERTS, BADGES
   --------------------------------------------------------------------------- */
.table { --bs-table-color: var(--fph-text); }
.table > thead { background-color: var(--fph-surface-alt); }
.table > thead th { border-bottom: 2px solid var(--fph-border); font-weight: 700; }

/* BS3 .label (inline badge) was renamed .badge in BS4+ */
.label {
    display: inline-block; padding: .3em .55em;
    font-size: .75em; font-weight: 700; line-height: 1;
    color: #fff; text-align: center; white-space: nowrap;
    vertical-align: baseline; border-radius: .4rem;
}
.label-default { background-color: var(--fph-muted); }
.label-primary { background-color: var(--fph-primary); }
.label-success { background-color: var(--fph-accent); }
.label-info { background-color: var(--fph-accent); }
.label-warning { background-color: #c98a1e; }
.label-danger { background-color: #b23b2e; }

.alert { border-radius: var(--fph-radius); }

/* ---------------------------------------------------------------------------
   9. LEGACY BOOTSTRAP 3 GRID / UTILITY SHIMS
   BS5 removed the -xs- infix, pull-*, center-block, img-responsive, hidden-*.
   --------------------------------------------------------------------------- */
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,
.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 {
    position: relative; width: 100%; padding-right: .75rem; padding-left: .75rem; float: left;
}
.col-xs-1  { width: 8.3333%; }
.col-xs-2  { width: 16.6667%; }
.col-xs-3  { width: 25%; }
.col-xs-4  { width: 33.3333%; }
.col-xs-5  { width: 41.6667%; }
.col-xs-6  { width: 50%; }
.col-xs-7  { width: 58.3333%; }
.col-xs-8  { width: 66.6667%; }
.col-xs-9  { width: 75%; }
.col-xs-10 { width: 83.3333%; }
.col-xs-11 { width: 91.6667%; }
.col-xs-12 { width: 100%; }
.col-xs-offset-1 { margin-left: 8.3333%; }
.col-xs-offset-2 { margin-left: 16.6667%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-4 { margin-left: 33.3333%; }
.col-xs-offset-6 { margin-left: 50%; }

.pull-right { float: right !important; }
.pull-left { float: left !important; }
.center-block { display: block; margin-right: auto; margin-left: auto; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-rounded { border-radius: var(--fph-radius); }
.img-circle { border-radius: 50%; }
.hidden { display: none !important; }
.show { display: block !important; }

/* BS3 responsive visibility helpers */
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
@media (max-width: 767.98px) { .hidden-xs { display: none !important; } .visible-xs { display: block !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .hidden-sm { display: none !important; } .visible-sm { display: block !important; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .hidden-md { display: none !important; } .visible-md { display: block !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } .visible-lg { display: block !important; } }

/* ---------------------------------------------------------------------------
   10. LAYOUT / CONTENT POLISH
   --------------------------------------------------------------------------- */
.body-content { padding-left: 15px; padding-right: 15px; }
main:focus { outline: none; }

/* Page-title rows: the big icon and the title were cramped together. Centre the
   title against the icon and add breathing room so they aren't crowded (site-wide).
   Matches the common pattern: <span class="glyphicon ..."></span> <span class="h2">Title</span> */
.glyphicon:has(+ .h1), .glyphicon:has(+ h1),
.glyphicon:has(+ .h2), .glyphicon:has(+ h2),
.glyphicon:has(+ .h3), .glyphicon:has(+ h3) {
    vertical-align: middle;
    margin-right: .15rem;
}
.glyphicon + .h1, .glyphicon + h1,
.glyphicon + .h2, .glyphicon + h2,
.glyphicon + .h3, .glyphicon + h3 {
    display: inline-block;
    margin-left: .5rem;       /* horizontal gap from the icon */
    margin-top: .5rem;        /* a little vertical breathing room */
    vertical-align: middle;
}

footer.fph-footer {
    background-color: var(--fph-footer-bg);
    border-top: 1px solid var(--fph-border);
    margin-top: 2.5rem;
    padding: 1.75rem 0 1.25rem;
    border-radius: var(--fph-radius) var(--fph-radius) 0 0;
}
.fph-footer .nav-link { color: var(--fph-link); padding: .25rem .65rem; font-weight: 600; }
.fph-footer .nav-link:hover { color: var(--fph-primary-dark); text-decoration: underline; }
.fph-footer .fph-copyright { color: var(--fph-muted); font-size: .85rem; }
.fph-footer .fph-copyright a { color: var(--fph-muted); text-decoration: none; }

/* ---------------------------------------------------------------------------
   11. ACCESSIBILITY
   --------------------------------------------------------------------------- */
/* Strong, visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--fph-focus);
    outline-offset: 2px;
    border-radius: .35rem;
}

/* Skip-to-content link (visually hidden until focused) */
.fph-skip-link {
    position: absolute; left: .5rem; top: -3rem; z-index: 2000;
    background: var(--fph-primary); color: #fff;
    padding: .6rem 1rem; border-radius: .5rem; font-weight: 700;
    text-decoration: none; transition: top .15s ease;
}
.fph-skip-link:focus { top: .5rem; color: #fff; }

/* Honor user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Honor OS high-contrast / forced colors */
@media (forced-colors: active) {
    .btn, .panel, .card, .well { border: 1px solid; }
}