/* =============================================================
   ADAPPT — Cassiopeia child design layer
   Direction: botanical greens, clean all-sans, restrained editorial.
   Load path: media/templates/site/<child>/css/user.css

   APPROACH: drive the template through the CSS variables it already
   consumes (--cassiopeia-color-*, --link-color, --heading-color,
   font families). These are defined in colors_standard.css, which
   loads BEFORE user.css, so overriding them here wins with zero
   specificity fights. The header gradient, footer, .btn-primary,
   the nav underline marker and back-to-top all recolour from this
   one block — no need to restyle those components by hand.
   ============================================================= */

:root {
    /* --- Brand (drives header/footer gradient, buttons, nav marker) --- */
    --cassiopeia-color-primary: #21402f;  /* deep forest — gradient start */
    --cassiopeia-color-hover:   #2f5d43;  /* mid green — gradient end / hover */
    --cassiopeia-color-brand:   #ffffff;  /* brand text on the green header */

    /* --- Content links --- */
    --link-color:       #2e5d43;          /* AA on white (~6.9:1) */
    --link-hover-color: #1c3527;

    /* --- Headings (Bootstrap reads --heading-color) --- */
    --heading-color: #21402f;

    /* --- Typography: all-sans. Inter if self-hosted, else system. --- */
    --cassiopeia-font-family-body: "Inter", "Inter var", system-ui, -apple-system,
                                   "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cassiopeia-font-family-headings: var(--cassiopeia-font-family-body);
    --cassiopeia-font-weight-headings: 700;
}

/* Footer sits on the green band, so keep its module titles white
   (otherwise the global --heading-color would turn them dark green). */
.container-footer { --heading-color: #ffffff; }

/* Uncomment once Inter is self-hosted under the child's fonts folder. */
/*
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
*/

/* -------------------------------------------------------------
   Header layout — the only structural change.
   .header-bar is the single .grid-child that now wraps brand + nav
   (from the index.php override). .grid-child is already display:flex,
   and the stock rule `.container-header .navbar-brand { margin-inline-end:auto }`
   pushes the nav to the right — so this just centres them vertically.
   ------------------------------------------------------------- */
.header-bar {
    align-items: center;
    gap: 1rem 2rem;
}
.header-bar .container-nav { padding-bottom: 0; }

/* -------------------------------------------------------------
   Skip link (Cassiopeia ships none) — hidden until focused.
   ------------------------------------------------------------- */
.skip-link:focus {
    position: fixed;
    inset: 0.5rem auto auto 0.5rem;
    z-index: 1080;
    padding: 0.6rem 1rem;
    background: var(--cassiopeia-color-primary);
    color: #fff;
    border-radius: 0.25rem;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* -------------------------------------------------------------
   Visible keyboard focus — WCAG 2.4.7 / 2.4.11.
   ------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--cassiopeia-color-hover);
    outline-offset: 2px;
}

/* -------------------------------------------------------------
   Light editorial touches (kept minimal, no specificity fights).
   ------------------------------------------------------------- */
main p, main li { max-width: 68ch; }

main dl dt { font-weight: 600; margin-top: 1.25rem; }
main dl dt a { text-decoration: none; }
main dl dt a:hover { text-decoration: underline; }
main dl dd { margin: 0.25rem 0 0; }