/* =============================================================================
   QuickCare Design System — BOOTSTRAP COEXISTENCE  (intentionally UNLAYERED)
   -----------------------------------------------------------------------------
   The design system's structural CSS lives in @layer qc.*. By the cascade rules,
   ANY layered rule loses to an UNLAYERED rule regardless of specificity — so
   Bootstrap's unlayered base styles (notably `a { color:#0d6efd; text-decoration:
   underline }`) steal the colour of every qc- component that renders as an <a>
   (buttons, note links, …). The homepage worked around this with `.home`-scoped
   reasserts and the footer with scoped `!important`; this file is the GLOBAL,
   reusable version so any migrated page's qc- links render correctly without a
   per-page shim.

   Rules here are deliberately UNLAYERED (and loaded last) so they outrank
   Bootstrap by ordinary specificity. They re-assert only the few properties
   Bootstrap's base rules touch, and stay engine-variable-driven so every button
   variant/hover state keeps working. DELETE this file when Bootstrap is retired.
   ========================================================================== */

/* Buttons-as-links: keep the engine's resolved foreground colour, drop the
   Bootstrap underline. Variable-driven, so primary/secondary/accent/outline/
   ghost/on-dark/light and their hover states all stay correct. */
.qc-btn { color: var(--_qc-btn-fg); text-decoration: none; }
.qc-btn:hover,
.qc-btn:focus { color: var(--_qc-btn-fg); text-decoration: none; }

/* Inline links inside design-system note callouts stay on-brand, not Bootstrap blue. */
.qc-note a { color: var(--qc-color-primary); }
.qc-note a:hover { color: var(--qc-color-primary-dark); }

/* Arrow links keep the brand colour; footnote markers inherit surrounding text
   (so a † reads correctly on both light and dark bands) — not Bootstrap blue/underline. */
.qc-arrowlink { color: var(--qc-color-primary); text-decoration: none; }
.qc-footnote-link { color: inherit; text-decoration: none; }

/* Whole-card navigation links (hub grids): when a .qc-card is itself an <a>, keep the
   card's own text colours (title inherits the surface foreground, body stays muted) and
   drop Bootstrap's link blue/underline. The inner .qc-arrowlink affordance stays on-brand
   via its own rule above. */
a.qc-card,
a.qc-card:hover,
a.qc-card:focus { color: inherit; text-decoration: none; }

/* Global navigation (header bar, mega panels, mobile drawer): the qc- nav link classes
   set their colours in @layer qc.components, but Bootstrap's unlayered `a { color;
   text-decoration: underline }` steals both. Re-assert unlayered — links take their nav
   surface's foreground (via inherit; the local --_nav-* vars resolve from the layered
   container) and never underline. The few links/buttons that need a specific colour are
   restored below. */
.qc-site-header a,
.qc-mega a,
.qc-mobile-nav a { color: inherit; text-decoration: none; }
.qc-site-header a:hover,
.qc-mega a:hover,
.qc-mobile-nav a:hover { text-decoration: none; }

/* Exceptions that carry their own colour rather than the surface foreground.
   Selectors are kept more specific than the `.qc-<surface> a` rules above so they win. */
.qc-site-header a.qc-nav-cta { color: var(--qc-color-primary-dark); }        /* dark text on the white pill */
.qc-mega a.qc-mega-panel__head-link { color: var(--qc-color-secondary); }    /* cyan "view all" affordance */
.qc-mobile-nav a.qc-mobile-nav__sublink { color: var(--_nav-text-muted); }   /* keep the muted hierarchy */

/* Buttons inside nav surfaces: .qc-btn resolves its own foreground via
   --_qc-btn-fg (light/on-dark/etc.), but `.qc-mega a` / `.qc-site-header a` /
   `.qc-mobile-nav a` above win on specificity and force color:inherit, which
   resolves to near-white nav text — invisible on a white .qc-btn--light pill.
   Re-assert at higher specificity so the button's own engine variable wins. */
.qc-mega a.qc-btn,
.qc-site-header a.qc-btn,
.qc-mobile-nav a.qc-btn { color: var(--_qc-btn-fg); }
.qc-mega a.qc-btn:hover,
.qc-site-header a.qc-btn:hover,
.qc-mobile-nav a.qc-btn:hover,
.qc-mega a.qc-btn:focus,
.qc-site-header a.qc-btn:focus,
.qc-mobile-nav a.qc-btn:focus { color: var(--_qc-btn-fg); }

/* Bootstrap's unlayered `ul, ol { margin-bottom: 1rem }` reboot rule beats the
   layered `margin: 0` resets on these nav/mega-panel lists (unlayered always
   wins over layered, regardless of specificity) — producing a phantom 16px+4px
   gap that pushes the header's primary nav out of vertical center and adds
   unintended whitespace inside every mega-panel group. Re-assert unlayered. */
.qc-main-nav,
.qc-main-nav__item,
.qc-mega-group__list,
.qc-mega-group__list li { margin: 0; }

/* Same root cause, different tags: Bootstrap's unlayered `p { margin-bottom:
   1rem }` and `h4 { margin-bottom: 0.5rem }` reboot rules beat every layered
   margin on the <p>/<h4> elements mega panels are built from — silently
   adding ~16px under the head title/description, every group title, and the
   CTA heading/body, on every single panel. This was the single largest
   uncontrolled contributor to "panels feel taller than they need to be."
   Re-assert the margins the layered rules already intended. */
.qc-mega .qc-mega-panel__head-title { margin: 0; }
.qc-mega .qc-mega-panel__head-desc { margin: var(--qc-space-1) 0 0; }
.qc-mega .qc-mega-group__title { margin: 0 0 var(--qc-space-2); }
.qc-mega .qc-mega-panel__cta-text h4 { margin: 0; }
.qc-mega .qc-mega-panel__cta-text p { margin: 2px 0 0; }