/* =============================================================================
   THE SPIRIT DOG — overrides.css
   Bootstrap overrides: CSS custom property tokens, base resets, button
   variants, and navbar styles. Must load after Bootstrap.
   =============================================================================*/

/* ─── 1. BRAND PALETTE ────────────────────────────────────────────────────── */
/*
   Brand colours defined here as --tsd-* variables.
   Key Bootstrap colours then wired to them via --bs-* overrides so that
   Bootstrap components (badges, focus rings, alerts, etc.) use the brand.
*/
:root {
    /* Brand colours and derived states — all injected by PHP (head.php from config.php). */

    /* Border tokens */
    --tsd-border-light:  rgba(0, 0, 0, 0.10);
    --tsd-border-dark:   rgba(255, 255, 255, 0.15);

    /* ── Bootstrap semantic token overrides ─────────────────────────────────
       --bs-*-rgb vars must resolve to comma-separated triplets (no #) because
       Bootstrap uses them inside rgba(), e.g. rgba(var(--bs-primary-rgb), .5).
       We point them at --tsd-*-rgb vars (injected by PHP as plain triplets).
    ──────────────────────────────────────────────────────────────────────── */
    --bs-primary:            var(--tsd-magenta);
    --bs-primary-rgb:        var(--tsd-magenta-rgb);
    --bs-secondary:          var(--tsd-blue);
    --bs-secondary-rgb:      var(--tsd-blue-rgb);
    --bs-dark:               var(--tsd-black);
    --bs-dark-rgb:           var(--tsd-black-rgb);
    --bs-light:              var(--tsd-white);
    --bs-light-rgb:          var(--tsd-white-rgb);
    --bs-body-bg:            var(--tsd-white);
    --bs-body-color:         var(--tsd-black);
    --bs-link-color:         var(--tsd-magenta);
    --bs-link-hover-color:   var(--tsd-magenta-dark);

    /* ── Font stacks ────────────────────────────────────────────────────────
       Bootstrap 5.3 reads --bs-body-font-family for all component text.
       Headings use Georgia; body/UI uses Open Sans.
    ──────────────────────────────────────────────────────────────────────── */
    --tsd-font-heading: Georgia, serif;
    --tsd-font-body:    'Open Sans', sans-serif;

    --bs-body-font-family:    var(--tsd-font-body);
    --bs-heading-font-family: var(--tsd-font-heading);
}

/* ─── 2. BASE ────────────────────────────────────────────────────────────── */
html, body {
    margin: 0;
    padding: 0;
    font-size: 18px;
}

html {
    background-color: var(--tsd-yellow);
}

body {
    background-color: var(--tsd-blue);
    color: var(--tsd-black);
    font-family: var(--tsd-font-body);
    min-height: 100vh;
}

main {
    background-color: var(--tsd-yellow);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tsd-font-heading);
}

hr {
    border-color: var(--tsd-border-light);
    opacity: 1;
}

.lead {
    font-weight: 400;
}

/* ─── 3. BUTTON OVERRIDES ────────────────────────────────────────────────────
   Bootstrap 5.3 scopes --bs-btn-* to the component element, so overriding
   them here replaces the compiled SASS defaults without touching Bootstrap.
────────────────────────────────────────────────────────────────────────────── */

/* Primary — magenta */
.btn-primary {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  var(--tsd-magenta);
    --bs-btn-border-color:        var(--tsd-magenta);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-magenta-dark);
    --bs-btn-hover-border-color:  var(--tsd-magenta-dark);
    --bs-btn-focus-shadow-rgb:    var(--tsd-magenta-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-magenta-dark);
    --bs-btn-active-border-color: var(--tsd-magenta-dark);
    --bs-btn-disabled-color:      #fff;
    --bs-btn-disabled-bg:         var(--tsd-magenta);
    --bs-btn-disabled-border-color: var(--tsd-magenta);
}

/* Secondary — dark blue */
.btn-secondary {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  var(--tsd-blue);
    --bs-btn-border-color:        var(--tsd-blue);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-blue-dark);
    --bs-btn-hover-border-color:  var(--tsd-blue-dark);
    --bs-btn-focus-shadow-rgb:    var(--tsd-blue-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-blue-dark);
    --bs-btn-active-border-color: var(--tsd-blue-dark);
    --bs-btn-disabled-color:      #fff;
    --bs-btn-disabled-bg:         var(--tsd-blue);
    --bs-btn-disabled-border-color: var(--tsd-blue);
}

/* Tertiary — black (.btn-dark) */
.btn-dark {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  var(--tsd-black);
    --bs-btn-border-color:        var(--tsd-black);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-black-dark);
    --bs-btn-hover-border-color:  var(--tsd-black-dark);
    --bs-btn-focus-shadow-rgb:    var(--tsd-black-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-black-dark);
    --bs-btn-active-border-color: var(--tsd-black-dark);
}

/* Outline variants */
.btn-outline-primary {
    --bs-btn-color:               var(--tsd-magenta);
    --bs-btn-border-color:        var(--tsd-magenta);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-magenta);
    --bs-btn-hover-border-color:  var(--tsd-magenta);
    --bs-btn-focus-shadow-rgb:    var(--tsd-magenta-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-magenta);
    --bs-btn-active-border-color: var(--tsd-magenta);
}

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

.btn-outline-dark {
    --bs-btn-color:               var(--tsd-black);
    --bs-btn-border-color:        var(--tsd-black);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-black);
    --bs-btn-hover-border-color:  var(--tsd-black);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-black);
    --bs-btn-active-border-color: var(--tsd-black);
}

/* Magenta (alias for primary) */
.btn-magenta {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  var(--tsd-magenta);
    --bs-btn-border-color:        var(--tsd-magenta);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-magenta-dark);
    --bs-btn-hover-border-color:  var(--tsd-magenta-dark);
    --bs-btn-focus-shadow-rgb:    var(--tsd-magenta-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-magenta-dark);
    --bs-btn-active-border-color: var(--tsd-magenta-dark);
    --bs-btn-disabled-color:      #fff;
    --bs-btn-disabled-bg:         var(--tsd-magenta);
    --bs-btn-disabled-border-color: var(--tsd-magenta);
}

.btn-outline-magenta {
    --bs-btn-color:               var(--tsd-magenta);
    --bs-btn-border-color:        var(--tsd-magenta);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-magenta);
    --bs-btn-hover-border-color:  var(--tsd-magenta);
    --bs-btn-focus-shadow-rgb:    var(--tsd-magenta-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-magenta);
    --bs-btn-active-border-color: var(--tsd-magenta);
}

/* Blue (alias for secondary) */
.btn-blue {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  var(--tsd-blue);
    --bs-btn-border-color:        var(--tsd-blue);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-blue-dark);
    --bs-btn-hover-border-color:  var(--tsd-blue-dark);
    --bs-btn-focus-shadow-rgb:    var(--tsd-blue-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-blue-dark);
    --bs-btn-active-border-color: var(--tsd-blue-dark);
    --bs-btn-disabled-color:      #fff;
    --bs-btn-disabled-bg:         var(--tsd-blue);
    --bs-btn-disabled-border-color: var(--tsd-blue);
}

.btn-outline-blue {
    --bs-btn-color:               var(--tsd-blue);
    --bs-btn-border-color:        var(--tsd-blue);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-blue);
    --bs-btn-hover-border-color:  var(--tsd-blue);
    --bs-btn-focus-shadow-rgb:    var(--tsd-blue-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-blue);
    --bs-btn-active-border-color: var(--tsd-blue);
}

/* Black (alias for dark) */
.btn-black {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  var(--tsd-black);
    --bs-btn-border-color:        var(--tsd-black);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-black-dark);
    --bs-btn-hover-border-color:  var(--tsd-black-dark);
    --bs-btn-focus-shadow-rgb:    var(--tsd-black-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-black-dark);
    --bs-btn-active-border-color: var(--tsd-black-dark);
    --bs-btn-disabled-color:      #fff;
    --bs-btn-disabled-bg:         var(--tsd-black);
    --bs-btn-disabled-border-color: var(--tsd-black);
}

.btn-outline-black {
    --bs-btn-color:               var(--tsd-black);
    --bs-btn-border-color:        var(--tsd-black);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-black);
    --bs-btn-hover-border-color:  var(--tsd-black);
    --bs-btn-focus-shadow-rgb:    var(--tsd-black-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-black);
    --bs-btn-active-border-color: var(--tsd-black);
}

/* Orange */
.btn-orange {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  var(--tsd-orange);
    --bs-btn-border-color:        var(--tsd-orange);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-orange-dark);
    --bs-btn-hover-border-color:  var(--tsd-orange-dark);
    --bs-btn-focus-shadow-rgb:    var(--tsd-orange-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-orange-dark);
    --bs-btn-active-border-color: var(--tsd-orange-dark);
    --bs-btn-disabled-color:      #fff;
    --bs-btn-disabled-bg:         var(--tsd-orange);
    --bs-btn-disabled-border-color: var(--tsd-orange);
}

.btn-outline-orange {
    --bs-btn-color:               var(--tsd-orange);
    --bs-btn-border-color:        var(--tsd-orange);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-orange);
    --bs-btn-hover-border-color:  var(--tsd-orange);
    --bs-btn-focus-shadow-rgb:    var(--tsd-orange-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-orange);
    --bs-btn-active-border-color: var(--tsd-orange);
}

/* Green */
.btn-green {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  var(--tsd-green);
    --bs-btn-border-color:        var(--tsd-green);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-green-dark);
    --bs-btn-hover-border-color:  var(--tsd-green-dark);
    --bs-btn-focus-shadow-rgb:    var(--tsd-green-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-green-dark);
    --bs-btn-active-border-color: var(--tsd-green-dark);
    --bs-btn-disabled-color:      #fff;
    --bs-btn-disabled-bg:         var(--tsd-green);
    --bs-btn-disabled-border-color: var(--tsd-green);
}

.btn-outline-green {
    --bs-btn-color:               var(--tsd-green);
    --bs-btn-border-color:        var(--tsd-green);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tsd-green);
    --bs-btn-hover-border-color:  var(--tsd-green);
    --bs-btn-focus-shadow-rgb:    var(--tsd-green-rgb);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tsd-green);
    --bs-btn-active-border-color: var(--tsd-green);
}

/* Yellow */
.btn-yellow {
    --bs-btn-color:               var(--tsd-black);
    --bs-btn-bg:                  var(--tsd-yellow);
    --bs-btn-border-color:        var(--tsd-yellow);
    --bs-btn-hover-color:         var(--tsd-black);
    --bs-btn-hover-bg:            var(--tsd-yellow-pale);
    --bs-btn-hover-border-color:  var(--tsd-yellow-pale);
    --bs-btn-focus-shadow-rgb:    var(--tsd-yellow-rgb);
    --bs-btn-active-color:        var(--tsd-black);
    --bs-btn-active-bg:           var(--tsd-yellow-pale);
    --bs-btn-active-border-color: var(--tsd-yellow-pale);
    --bs-btn-disabled-color:      var(--tsd-black);
    --bs-btn-disabled-bg:         var(--tsd-yellow);
    --bs-btn-disabled-border-color: var(--tsd-yellow);
}

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

/* ─── 4. BRAND BACKGROUND UTILITIES ─────────────────────────────────────────
   Mirrors Bootstrap's bg-* pattern for all TSD brand colours.
   Use: bg-yellow, bg-magenta, bg-blue, bg-green, bg-orange, bg-black, bg-white,
        bg-yellow-pale, bg-magenta-dark, bg-blue-dark, bg-green-dark,
        bg-orange-dark, bg-black-dark
────────────────────────────────────────────────────────────────────────────── */
.bg-yellow       { background-color: var(--tsd-yellow)       !important; }
.bg-yellow-pale  { background-color: var(--tsd-yellow-pale)  !important; }
.bg-green        { background-color: var(--tsd-green)        !important; }
.bg-green-dark   { background-color: var(--tsd-green-dark)   !important; }
.bg-orange       { background-color: var(--tsd-orange)       !important; }
.bg-orange-dark  { background-color: var(--tsd-orange-dark)  !important; }
.bg-magenta      { background-color: var(--tsd-magenta)      !important; }
.bg-magenta-dark { background-color: var(--tsd-magenta-dark) !important; }
.bg-blue         { background-color: var(--tsd-blue)         !important; }
.bg-blue-dark    { background-color: var(--tsd-blue-dark)    !important; }
.bg-black        { background-color: var(--tsd-black)        !important; }
.bg-black-dark   { background-color: var(--tsd-black-dark)   !important; }
.bg-white        { background-color: var(--tsd-white)        !important; }

/* Nav link padding — Bootstrap token override */
.navbar-tsd {
    --bs-navbar-nav-link-padding-x: 1.1rem;
}
/* Tighter at XL only (navbar just expanded, space is tighter) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-tsd { --bs-navbar-nav-link-padding-x: 0.75rem; }
}

/* ─── 6. ACCORDION OVERRIDES ─────────────────────────────────────────────────
   Component-scoped — only affects .accordion elements.
   Active chevron SVG recoloured to magenta (%23B40D54 = #B40D54).
────────────────────────────────────────────────────────────────────────────── */
.accordion {
    --bs-accordion-bg:               var(--tsd-white);
    --bs-accordion-border-color:     var(--tsd-border-light);
    --bs-accordion-btn-color:        var(--tsd-black);
    --bs-accordion-btn-bg:           var(--tsd-white);
    --bs-accordion-active-color:     var(--tsd-magenta);
    --bs-accordion-active-bg:        var(--tsd-yellow-pale);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--tsd-magenta-rgb), 0.2);
    --bs-accordion-btn-active-icon:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23B40D54'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}