/* =====================================================================
   classof2000.info — Garfield Heights BULLDOGS theme
   Bootstrap 5.3 override layer via CSS custom properties.
   Palette: school Blue (primary) + warm Gold (accent) on white/light.
   Load AFTER bootstrap.min.css so these tokens win the cascade.
   All text/background pairings target WCAG AA (>=4.5:1 body, >=3:1 large).
   ===================================================================== */

:root {
  /* ---- Brand core -------------------------------------------------- */
  --ghhs-blue:        #0B2C5C; /* deep royal/navy — school blue        */
  --ghhs-blue-600:    #123A72; /* hover / raised                        */
  --ghhs-blue-400:    #24568F; /* muted accents                         */
  --ghhs-blue-050:    #EAF0F8; /* tinted surfaces (alerts, table hover) */
  --ghhs-gold:        #C9A227; /* warm metallic gold — accent           */
  --ghhs-gold-bright: #FFC72C; /* spirit gold — highlights, focus       */
  --ghhs-gold-700:    #8A6E14; /* gold text on white — AA normal (4.86:1); was #9E7E17 (3.85:1) #54 */

  --ghhs-ink:         #14181F; /* near-black body text                  */
  --ghhs-muted:       #5B6470; /* secondary text                        */
  --ghhs-line:        #DEE3EA; /* borders / dividers                    */
  --ghhs-surface:     #FFFFFF;
  --ghhs-surface-2:   #F6F8FB; /* page background / subtle cards         */

  /* ---- Bootstrap theme-color remap --------------------------------- */
  --bs-primary:            var(--ghhs-blue);
  --bs-primary-rgb:        11, 44, 92;
  --bs-secondary:          #5B6470;
  --bs-secondary-rgb:      91, 100, 112;
  --bs-success:            #1E7E45;
  --bs-success-rgb:        30, 126, 69;
  --bs-danger:             #B32637;
  --bs-danger-rgb:         179, 38, 55;
  --bs-warning:            var(--ghhs-gold);
  --bs-warning-rgb:        201, 162, 39;
  --bs-info:               #24568F;
  --bs-info-rgb:           36, 86, 143;
  --bs-light:              var(--ghhs-surface-2);
  --bs-light-rgb:          246, 248, 251;
  --bs-dark:               var(--ghhs-blue);
  --bs-dark-rgb:           11, 44, 92;

  /* ---- Body / links ------------------------------------------------ */
  --bs-body-color:         var(--ghhs-ink);
  --bs-body-color-rgb:     20, 24, 31;
  --bs-body-bg:            var(--ghhs-surface-2);
  --bs-body-bg-rgb:        246, 248, 251;
  --bs-emphasis-color:     var(--ghhs-blue);
  --bs-border-color:       var(--ghhs-line);
  --bs-border-radius:      .5rem;
  --bs-border-radius-sm:   .35rem;
  --bs-border-radius-lg:   .75rem;

  --bs-link-color:         var(--ghhs-blue-600);
  --bs-link-color-rgb:     18, 58, 114;
  --bs-link-hover-color:   var(--ghhs-blue);
  --bs-link-hover-color-rgb: 11, 44, 92;

  /* Focus ring uses spirit gold for a visible, on-brand outline */
  --bs-focus-ring-color:   rgba(255, 199, 44, .55);

  --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, Roboto,
                        "Helvetica Neue", Arial, sans-serif;
}

/* =====================================================================
   Base
   ===================================================================== */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
  color: var(--ghhs-blue);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Section accent underline helper */
.title-accent {
  position: relative;
  padding-bottom: .5rem;
}
.title-accent::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 3rem; height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ghhs-gold) 0%, var(--ghhs-gold-bright) 100%);
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: var(--bs-border-radius); }

.btn-primary {
  --bs-btn-bg:            var(--ghhs-blue);
  --bs-btn-border-color:  var(--ghhs-blue);
  --bs-btn-hover-bg:      var(--ghhs-blue-600);
  --bs-btn-hover-border-color: var(--ghhs-blue-600);
  --bs-btn-active-bg:     #0A2650;
  --bs-btn-active-border-color: #0A2650;
  --bs-btn-color:         #fff;
  --bs-btn-hover-color:   #fff;
  --bs-btn-active-color:  #fff;
  --bs-btn-disabled-bg:   var(--ghhs-blue);
  --bs-btn-disabled-border-color: var(--ghhs-blue);
}

/* Gold call-to-action: dark ink text on gold = AA (>=4.5:1) */
.btn-accent,
.btn-warning {
  --bs-btn-color:            var(--ghhs-ink);
  --bs-btn-bg:               var(--ghhs-gold);
  --bs-btn-border-color:     var(--ghhs-gold);
  --bs-btn-hover-color:      var(--ghhs-ink);
  --bs-btn-hover-bg:         var(--ghhs-gold-bright);
  --bs-btn-hover-border-color: var(--ghhs-gold-bright);
  --bs-btn-active-color:     var(--ghhs-ink);
  --bs-btn-active-bg:        #B8901F;
  --bs-btn-active-border-color: #B8901F;
  --bs-btn-focus-shadow-rgb: 255, 199, 44;
}

.btn-outline-primary {
  --bs-btn-color:           var(--ghhs-blue);
  --bs-btn-border-color:    var(--ghhs-blue);
  --bs-btn-hover-bg:        var(--ghhs-blue);
  --bs-btn-hover-border-color: var(--ghhs-blue);
  --bs-btn-hover-color:     #fff;
  --bs-btn-active-bg:       var(--ghhs-blue);
  --bs-btn-active-border-color: var(--ghhs-blue);
}

/* Outline accent — gold border, gold-700 text for contrast on white */
.btn-outline-accent {
  --bs-btn-color:           var(--ghhs-gold-700);
  --bs-btn-border-color:    var(--ghhs-gold);
  --bs-btn-hover-bg:        var(--ghhs-gold);
  --bs-btn-hover-border-color: var(--ghhs-gold);
  --bs-btn-hover-color:     var(--ghhs-ink);
  --bs-btn-active-bg:       var(--ghhs-gold);
  --bs-btn-active-color:    var(--ghhs-ink);
  --bs-btn-active-border-color: var(--ghhs-gold);
  --bs-btn-border-width:    2px;
  --bs-btn-font-weight:     700;
}

/* =====================================================================
   Navbar — blue bar with gold accents
   ===================================================================== */
.navbar-brand-ghhs {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.navbar-brand-ghhs .brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ghhs-gold);
  color: var(--ghhs-blue);
  font-weight: 900;
  border: 2px solid var(--ghhs-gold-bright);
  flex: 0 0 auto;
}
.navbar-brand-ghhs .brand-text { line-height: 1.05; }
.navbar-brand-ghhs .brand-text small {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

.navbar-ghhs {
  background-color: var(--ghhs-blue);
  border-bottom: 3px solid var(--ghhs-gold);
  --bs-navbar-color:            rgba(255,255,255,.82);
  --bs-navbar-hover-color:      #fff;
  --bs-navbar-active-color:     #fff;
  --bs-navbar-brand-color:      #fff;
  --bs-navbar-brand-hover-color:#fff;
  --bs-navbar-toggler-border-color: rgba(255,255,255,.35);
  --bs-navbar-toggler-icon-bg:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-ghhs .nav-link {
  font-weight: 600;
  padding-inline: .85rem;
  border-bottom: 3px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.navbar-ghhs .nav-link:hover,
.navbar-ghhs .nav-link:focus-visible { color: #fff; border-bottom-color: var(--ghhs-gold-bright); }
.navbar-ghhs .nav-link.active { color: #fff; border-bottom-color: var(--ghhs-gold); }
.navbar-ghhs .dropdown-menu {
  --bs-dropdown-link-active-bg: var(--ghhs-blue);
  --bs-dropdown-border-color:   var(--ghhs-line);
  --bs-dropdown-border-radius:  var(--bs-border-radius);
  box-shadow: 0 12px 30px rgba(11,44,92,.16);
}

/* =====================================================================
   Cards
   ===================================================================== */
.card {
  --bs-card-border-color:   var(--ghhs-line);
  --bs-card-border-radius:  var(--bs-border-radius-lg);
  --bs-card-cap-bg:         var(--ghhs-surface);
  --bs-card-bg:             var(--ghhs-surface);
  box-shadow: 0 1px 2px rgba(11,44,92,.05), 0 6px 20px rgba(11,44,92,.05);
  transition: box-shadow .15s ease, transform .15s ease;
}
.card-hover:hover { box-shadow: 0 10px 30px rgba(11,44,92,.14); transform: translateY(-2px); }
.card-header {
  font-weight: 700;
  color: var(--ghhs-blue);
  border-bottom: 1px solid var(--ghhs-line);
}
/* Featured card with gold top rule */
.card-featured { border-top: 4px solid var(--ghhs-gold); }

/* =====================================================================
   Badges
   ===================================================================== */
.badge { --bs-badge-font-weight: 600; letter-spacing: .02em; }
.text-bg-primary { color: #fff !important; background-color: var(--ghhs-blue) !important; }
.badge-accent {
  color: var(--ghhs-ink);
  background-color: var(--ghhs-gold);
}
.badge-blue-soft {
  color: var(--ghhs-blue);
  background-color: var(--ghhs-blue-050);
}

/* =====================================================================
   Forms
   ===================================================================== */
.form-control, .form-select {
  border-color: var(--ghhs-line);
  border-radius: var(--bs-border-radius);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ghhs-blue-400);
  box-shadow: 0 0 0 .2rem rgba(11,44,92,.15);
}
.form-check-input:checked {
  background-color: var(--ghhs-blue);
  border-color: var(--ghhs-blue);
}
.form-check-input:focus { border-color: var(--ghhs-blue-400); box-shadow: 0 0 0 .2rem rgba(11,44,92,.15); }
.form-label { font-weight: 600; color: var(--ghhs-blue); }
.form-text { color: var(--ghhs-muted); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--bs-danger); }

/* Visible on-brand focus ring for keyboard nav */
:focus-visible { outline: none; }
.btn:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible {
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

/* =====================================================================
   Alerts / flash
   ===================================================================== */
.alert-primary {
  --bs-alert-color: var(--ghhs-blue);
  --bs-alert-bg: var(--ghhs-blue-050);
  --bs-alert-border-color: #C9D8ED;
}
.alert { border-radius: var(--bs-border-radius); border-left-width: 4px; }

/* =====================================================================
   Tables, pagination, misc
   ===================================================================== */
.table > thead { background: var(--ghhs-blue); color: #fff; }
.table > thead th { border-color: var(--ghhs-blue-600); font-weight: 600; }
.table-hover > tbody > tr:hover > * { background-color: var(--ghhs-blue-050); }
.page-link { color: var(--ghhs-blue-600); }
.active > .page-link, .page-link.active { background-color: var(--ghhs-blue); border-color: var(--ghhs-blue); }

/* =====================================================================
   Layout chrome — hero, footer, skip link
   ===================================================================== */
.hero-ghhs {
  background:
    linear-gradient(180deg, rgba(11,44,92,.92) 0%, rgba(11,44,92,.98) 100%),
    radial-gradient(circle at 85% 15%, rgba(255,199,44,.18), transparent 45%);
  color: #fff;
  border-bottom: 4px solid var(--ghhs-gold);
}
.hero-ghhs h1 { color: #fff; }
.hero-ghhs .lead { color: rgba(255,255,255,.9); }

.site-footer {
  background: var(--ghhs-blue);
  color: rgba(255,255,255,.82);
  border-top: 4px solid var(--ghhs-gold);
}
.site-footer h6 { color: var(--ghhs-gold-bright); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: #fff; }
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.15); }

/* Accessibility: skip-to-content link */
.skip-link {
  position: absolute;
  left: -999px; top: 0;
  z-index: 2000;
  background: var(--ghhs-gold);
  color: var(--ghhs-ink);
  padding: .6rem 1rem;
  font-weight: 700;
  border-radius: 0 0 .5rem 0;
}
.skip-link:focus { left: 0; }

/* Utility brand text/bg helpers */
.text-blue   { color: var(--ghhs-blue) !important; }
.text-gold   { color: var(--ghhs-gold-700) !important; }
.bg-blue     { background-color: var(--ghhs-blue) !important; color:#fff; }
.bg-gold     { background-color: var(--ghhs-gold) !important; color: var(--ghhs-ink); }
.bg-blue-050 { background-color: var(--ghhs-blue-050) !important; }