/*
 * ODCC site-level Bootstrap theming.
 *
 * Applied on top of Bootswatch Flatly 5.3.8 (loaded immediately
 * before this stylesheet). Brings the Bootstrap palette in line with
 * the brand YAML (source of truth) and overrides Flatly's hardcoded
 * component colours where they bypass the CSS-variable system.
 *
 * Source of truth: brand-engine brand.yaml `brand-colours` section.
 */

:root {
    /* === Brand palette (mirrors brand-engine brand.yaml) === */
    --odcc-purple:  #3F264F;  /* DeepPurple   — primary brand   */
    --odcc-teal:    #32707E;  /* TealBlue     — primary brand   */
    --odcc-dgrey:   #3C3C3B;  /* DarkGray                       */
    --odcc-lgrey:   #C6C6C5;  /* WarmGray                       */

    --odcc-lilac:   #785A89;  /* MutedLilac                     */
    --odcc-cyan:    #5A9EA0;  /* SoftCyan                       */
    --odcc-rust:    #B35440;  /* DeepRust                       */
    --odcc-ochre:   #D1A75C;  /* GoldenOchre                    */
    --odcc-forest:  #43634A;  /* ForestGreen                    */
    --odcc-slate:   #4E6A92;  /* SlateBlue                      */

    /* === Bootstrap colour-token overrides ===
     * Map ODCC brand colours onto Bootstrap's semantic tokens.
     * Semantic choices preserve the original SCSS conventions
     * (success = brand purple, info = soft cyan, warning = ochre,
     * danger = deep rust). */
    --bs-blue:   #32707E;
    --bs-purple: #3F264F;
    --bs-green:  #3F264F;
    --bs-red:    #B35440;
    --bs-yellow: #D1A75C;
    --bs-cyan:   #5A9EA0;
    --bs-gray:        #C6C6C5;
    --bs-gray-600:    #C6C6C5;
    --bs-gray-700:    #3C3C3B;

    --bs-primary:       #32707E;
    --bs-primary-rgb:   50, 112, 126;
    --bs-secondary:     #3F264F;
    --bs-secondary-rgb: 63, 38, 79;
    --bs-success:       #3F264F;
    --bs-success-rgb:   63, 38, 79;
    --bs-info:          #5A9EA0;
    --bs-info-rgb:      90, 158, 160;
    --bs-warning:       #D1A75C;
    --bs-warning-rgb:   209, 167, 92;
    --bs-danger:        #B35440;
    --bs-danger-rgb:    179, 84, 64;
    --bs-light:         #ECF0F1;
    --bs-light-rgb:     236, 240, 241;
    --bs-dark:          #3C3C3B;
    --bs-dark-rgb:      60, 60, 59;

    /* === Links: brand teal default, brand purple on hover. === */
    --bs-link-color:           #32707E;
    --bs-link-color-rgb:       50, 112, 126;
    --bs-link-hover-color:     #3F264F;
    --bs-link-hover-color-rgb: 63, 38, 79;

    /* === Sharp corners + 2px borders === */
    --bs-border-radius:      0;
    --bs-border-radius-sm:   0;
    --bs-border-radius-lg:   0;
    --bs-border-radius-xl:   0;
    --bs-border-radius-xxl:  0;
    --bs-border-radius-pill: 0;
    --bs-border-width:       2px;

    /* === Typography — Open Sans + system fallback, no @font-face. === */
    --bs-font-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* === Headings: same family as body, fw-light per brand === */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bs-font-sans-serif);
    font-weight: 300;
}

/* === Navbar brand name: same font stack as body, bold === */
.brand-name {
    font-family: var(--bs-font-sans-serif);
    font-weight: 700;
}

/* === Paragraphs: slightly more breathing room === */
p {
    margin-bottom: 1.25rem;
}


/* ============================================================
 * Override Flatly's hardcoded component colours that bypass the
 * --bs-* variable system. Each rule fixes a specific selector
 * where Flatly bakes in #18bc9c (its success green), #2c3e50 (its
 * navy primary), or #95a5a6 (its grey secondary), and the
 * --bs-* variable override above isn't enough on its own.
 * ============================================================ */

/* Dark navbar — Flatly sets navbar-hover, navbar-active, and
 * brand-hover to #18bc9c. Restore the original ODCC convention:
 * white at varying opacities, no colour leak. */
.navbar-dark,
.navbar[data-bs-theme="dark"] {
    --bs-navbar-color:             rgba(255, 255, 255, 0.75);
    --bs-navbar-hover-color:       rgba(255, 255, 255, 0.85);
    --bs-navbar-active-color:      #FFF;
    --bs-navbar-disabled-color:    rgba(255, 255, 255, 0.45);
    --bs-navbar-brand-color:       #FFF;
    --bs-navbar-brand-hover-color: #FFF;
}

/* ============================================================
 * Top-of-page navigation: deep purple bar with a teal underline
 * accent on the active page link. The .bg-odcc-purple utility is
 * mirror-named on Bootstrap's bg-* utilities; only used on the
 * top nav today.
 * ============================================================ */

.bg-odcc-purple {
    background-color: var(--odcc-purple) !important;
}

/* Active nav item gets a teal underline. Using inset box-shadow
 * (not border-bottom) so neighbouring links don't shift when one
 * becomes active. */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
    color: #FFF;
    box-shadow: inset 0 -2px 0 var(--odcc-teal);
}

/* Primary button — Flatly hardcodes #2c3e50 (navy) + hover/active
 * derivatives. Wire to the brand teal. */
.btn-primary {
    --bs-btn-bg:                  var(--bs-primary);
    --bs-btn-border-color:        var(--bs-primary);
    --bs-btn-hover-bg:            #285A66;
    --bs-btn-hover-border-color:  #285A66;
    --bs-btn-active-bg:           #1F4751;
    --bs-btn-active-border-color: #1F4751;
    --bs-btn-disabled-bg:         var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb:    var(--bs-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color:               var(--bs-primary);
    --bs-btn-border-color:        var(--bs-primary);
    --bs-btn-hover-bg:            var(--bs-primary);
    --bs-btn-hover-border-color:  var(--bs-primary);
    --bs-btn-active-bg:           var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color:      var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb:    var(--bs-primary-rgb);
}

/* Secondary button — Flatly's #95a5a6 (grey) → brand purple. */
.btn-secondary {
    --bs-btn-bg:                  var(--bs-secondary);
    --bs-btn-border-color:        var(--bs-secondary);
    --bs-btn-hover-bg:            #2F1C3B;
    --bs-btn-hover-border-color:  #2F1C3B;
    --bs-btn-active-bg:           #1F1228;
    --bs-btn-active-border-color: #1F1228;
    --bs-btn-disabled-bg:         var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
    --bs-btn-focus-shadow-rgb:    var(--bs-secondary-rgb);
}

.btn-outline-secondary {
    --bs-btn-color:               var(--bs-secondary);
    --bs-btn-border-color:        var(--bs-secondary);
    --bs-btn-hover-bg:            var(--bs-secondary);
    --bs-btn-hover-border-color:  var(--bs-secondary);
    --bs-btn-active-bg:           var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-disabled-color:      var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
    --bs-btn-focus-shadow-rgb:    var(--bs-secondary-rgb);
}