/* =============================================================================
   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 */
    --tsd-white:         #FCFCFC;
    --tsd-yellow:        #FAFECD;
    --tsd-magenta:       #B40D54;
    --tsd-blue:          #0A529C;
    --tsd-black:         #1F1F1F;

    /* Derived / hover states */
    --tsd-magenta-dark:  #970b47;
    --tsd-blue-dark:     #083e78;
    --tsd-black-dark:    #0a0a0a;
    --tsd-yellow-pale:   #fcffe0;

    /* 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-primary-rgb etc. must be comma-separated triplets (no #),
       Bootstrap uses them for rgba() focus-ring and shadow calculations.
    ──────────────────────────────────────────────────────────────────────── */
    --bs-primary:            var(--tsd-magenta);
    --bs-primary-rgb:        180, 13, 84;
    --bs-secondary:          var(--tsd-blue);
    --bs-secondary-rgb:      10, 82, 156;
    --bs-dark:               var(--tsd-black);
    --bs-dark-rgb:           31, 31, 31;
    --bs-light:              var(--tsd-white);
    --bs-light-rgb:          252, 252, 252;
    --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 {
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 18px;
}

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

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

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

/* ─── 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,
.btn-tsd {
    --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:    180, 13, 84;
    --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);
}

/* Outline magenta */
.btn-outline-tsd {
    --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:    180, 13, 84;
    --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:      var(--tsd-magenta);
    --bs-btn-disabled-bg:         transparent;
    --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:    10, 82, 156;
    --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:    31, 31, 31;
    --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:   180, 13, 84;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          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:   10, 82, 156;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          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);
}

/* 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; }
}