/* ============================================================
   NIU Bootstrap 5 Theme
   Refactored: colors, typography, nav, components
   Load AFTER bootstrap.min.css
   ============================================================ */

/* ------------------------------------------------------------
   1. Root brand tokens & Bootstrap variable mapping
   ------------------------------------------------------------ */

:root {
  /* Core NIU brand colors */

  /* NIU primary color */
  --bs-primary: #c8102e;
  --bs-primary-rgb: 200, 16, 46; /* RGB of #C8102E */
  --niu-red: #c8102e;
  --niu-black: #000000;
  --niu-gray: #747678;
  --niu-light-gray: #efefef;
  --niu-white: #ffffff;

  /* Secondary palette */
  --niu-orange: #e35205;
  --niu-gold: #fedb00;
  --niu-green: #43b02a;
  --niu-teal: #00968f;
  --niu-blue: #00a9e0;
  
  /* lighter variants */
  --niu-blue-light:  #ddf2fb;   /* tint for backgrounds / callouts  */ 
  --niu-green-light: #e4f5de;   /* tint for backgrounds / callouts  */

  /* Darker variants */
  --niu-red-dark: #a60d27;
  --niu-red-darker: #8d0b22;
  --niu-orange-dark: #b33f04;
  --niu-green-dark: #33841f;
  --niu-blue-dark: #0082ad;

  /* Map to Bootstrap theme color variables */
  --bs-primary: var(--niu-red);
  --bs-secondary: var(--niu-gray);
  --bs-success: var(--niu-green);
  --bs-info: var(--niu-blue);
  --bs-warning: var(--niu-gold);
  --bs-danger: #ba0c2f;
  --bs-light: var(--niu-light-gray);
  --bs-light-rgb: 239, 239, 239;
  --bs-dark: var(--niu-black);
  /* --bs-light-rgb: 220, 220, 220; */

  /* Global text & background */
  --bs-body-color: #212529;
  --bs-body-bg: #ffffff;

  /* Links (content areas) */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--niu-red-dark);
  --bs-navbar-active-color: var(--niu-red-dark);

  /* Typography: Montserrat as global body font */
  --bs-body-font-family: "Montserrat", system-ui, Arial, sans-serif;

  /* Body text stays standard */
  --fs-body-min: 1rem;
  --fs-body-fluid: 0.25vw + 0.95rem;
  --fs-body-max: 1.0625rem; /* slight lift on large screens */

  /* Scale factors (tune these, not every clamp) */
  --fs-h1-min: 2.25rem;
  --fs-h1-fluid: 2.2vw + 1.7rem;
  --fs-h1-max: 3.25rem;

  --fs-h2-min: 1.875rem;
  --fs-h2-fluid: 1.6vw + 1.45rem;
  --fs-h2-max: 2.5rem;

  --fs-h3-min: 1.5rem;
  --fs-h3-fluid: 1.1vw + 1.25rem;
  --fs-h3-max: 1.875rem;

  /* Intentionally close to body */
  --fs-h4-min: 1rem;
  --fs-h4-fluid: 0.35vw + 0.95rem;
  --fs-h4-max: 1.125rem;

  --fs-h5-min: 0.9375rem;
  --fs-h5-fluid: 0.2vw + 0.9rem;
  --fs-h5-max: 1rem;

  --fs-h6-min: 0.875rem;
  --fs-h6-fluid: 0.15vw + 0.85rem;
  --fs-h6-max: 0.9375rem;

  /* Border Radius set to Zero */
  --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;
}

/* For Tabbed Panels */
.nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: var(--niu-red);
}

/* ------------------------------------------------------------
     2. Typography: headings & body
     ------------------------------------------------------------ */

/* Body + default text elements */
body,
p,
li,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
}

p,
li {
  line-height: 1.55;
}

.small,
small {
  font-size: 0.875rem;
}

/* h1 & h2 use Georgia; h3+ use Montserrat (above) */
h1,
h2 {
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: normal;
}

/* Brand heading color: h1–h3 in NIU red */
h1,
h2,
h3,
h4 {
  color: var(--niu-red);
}

/* Apply to HTML elements */
p,
li,
blockquote,
.table,
.form-control,
.btn {
  font-size: clamp(
    var(--fs-body-min),
    var(--fs-body-fluid),
    var(--fs-body-max)
  );
}

.lead {
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.25rem);
}

h1,
.h1 {
  font-size: clamp(var(--fs-h1-min), var(--fs-h1-fluid), var(--fs-h1-max));
}
h2,
.h2 {
  font-size: clamp(var(--fs-h2-min), var(--fs-h2-fluid), var(--fs-h2-max));
}
h3,
.h3 {
  font-size: clamp(var(--fs-h3-min), var(--fs-h3-fluid), var(--fs-h3-max));
}
h4,
.h4 {
  font-size: clamp(var(--fs-h4-min), var(--fs-h4-fluid), var(--fs-h4-max));
}
h5,
.h5 {
  font-size: clamp(var(--fs-h5-min), var(--fs-h5-fluid), var(--fs-h5-max));
}
h6,
.h6 {
  font-size: clamp(var(--fs-h6-min), var(--fs-h6-fluid), var(--fs-h6-max));
}

/* Keep headings feeling distinct even when h4 ~ body */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.15; /* consider looser for h1/h2 if desired */
}

h1,
h2,
h3 {
  letter-spacing: -0.01em;
}

/* This is where h4 can feel like a heading even at ~1rem */
h4,
h5,
h6 {
  letter-spacing: 0.01em;
}

/* Optional: spacing rhythm (usually more important than size for hierarchy) */
h1 {
  margin-bottom: 0.75rem;
}
h2 {
  margin-bottom: 0.625rem;
}
h3 {
  margin-bottom: 0.5rem;
}
h4 {
  margin-bottom: 0.5rem;
}

/* Other Heading Attributes */

h3,
.h3,
h4,
.h4 {
  font-weight: 700;
}

h4,
.h4,
h5,
.h5 {
  text-transform: uppercase;
}

/* Display, eyebrow classes keep Montserrat, slightly bolder */
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
}

/* Display heading size refinements (≈15% reduction)  */

.display-1 {
  font-size: clamp(var(--fs-h1-min), var(--fs-h1-fluid), var(--fs-h1-max));
}
.display-2 {
  font-size: clamp(var(--fs-h2-min), var(--fs-h2-fluid), var(--fs-h2-max));
}
.display-3 {
  font-size: clamp(var(--fs-h3-min), var(--fs-h3-fluid), var(--fs-h3-max));
}
.display-4 {
  font-size: clamp(var(--fs-h4-min), var(--fs-h4-fluid), var(--fs-h4-max));
}
.display-5 {
  font-size: clamp(var(--fs-h5-min), var(--fs-h5-fluid), var(--fs-h5-max));
}
.display-6 {
  font-size: clamp(var(--fs-h6-min), var(--fs-h6-fluid), var(--fs-h6-max));
}

/* ------------------------------------------------------------
     3. Links & navigation
     ------------------------------------------------------------ */

/* 3a. Content links (main, article, etc.) */
main a,
.article a,
.content a {
  color: var(--bs-link-color);
  text-decoration: underline;
}

main a:hover,
.article a:hover,
.content a:hover,
main a:focus,
.article a:focus,
.content a:focus {
  color: var(--bs-link-hover-color);
  text-decoration: none;
}

/* 3b. Navigation links (navbar, navbars on bg-primary, etc.) */

/* Slight tracking on navbar text */
.navbar-brand,
.navbar-nav .nav-link {
  letter-spacing: 0.02em;
}

/* Dark navbars (Bootstrap’s .navbar-dark) use white-ish text by default */
.navbar-dark,
.navbar-primary {
  --bs-navbar-color: rgba(255, 255, 255, 0.85);
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-brand-hover-color: #ffffff;
}

/* NIU black for .navbar-dark.bg-dark */
.navbar-dark.bg-dark {
  background-color: #000000 !important;
}

/* Force bg-primary to use NIU red and white text globally */
.bg-primary {
  background-color: var(--niu-red) !important;
  color: #ffffff !important;
}

/* Links and nav-links inside bg-primary stay white */
/* .bg-primary a, */
.bg-primary .navbar-brand,
.bg-primary .navbar-nav .nav-link {
  color: #ffffff !important;
}

/* Hover/focus on primary background gets an underline for affordance */
.bg-primary .navbar-nav .nav-link:hover,
.bg-primary .navbar-nav .nav-link:focus,
.bg-primary a:hover,
.bg-primary a:focus {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Active nav links on primary background */
.bg-primary .navbar-nav .nav-link.active,
.bg-primary .nav-link.active {
  color: #ffffff !important;
  text-decoration: underline;
}

/* ------------------------------------------------------------
     4. Buttons (primary + other theme colors)
     ------------------------------------------------------------ */

/* Primary button in NIU red using BS5’s button variables */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #c8102e;
  --bs-btn-border-color: #c8102e;

  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #a60d27;
  --bs-btn-hover-border-color: #a60d27;

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #8d0b22;
  --bs-btn-active-border-color: #8d0b22;

  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #c8102e;
  --bs-btn-disabled-border-color: #c8102e;
}

/* Outline primary in NIU red */
.btn-outline-primary {
  --bs-btn-color: #c8102e;
  --bs-btn-border-color: #c8102e;

  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #c8102e;
  --bs-btn-hover-border-color: #c8102e;

  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #8d0b22;
  --bs-btn-active-border-color: #8d0b22;

  --bs-btn-disabled-color: #c8102e;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #c8102e;
}

/* Secondary button based on NIU gray */
.btn-secondary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--niu-black);
  --bs-btn-border-color: var(--niu-black);

  --bs-btn-hover-color: #222222;
  --bs-btn-hover-bg: #a5a7a8;
  --bs-btn-hover-border-color: #8d8f90;

  --bs-btn-active-color: #222222;
  --bs-btn-active-bg: #a5a7a8;
  --bs-btn-active-border-color: #747678;

  --bs-btn-disabled-color: #999999;
  --bs-btn-disabled-bg: var(--niu-gray);
  --bs-btn-disabled-border-color: var(--niu-gray);
}

/* Alternate button based on NIU gray */
.btn-alternate {
  --bs-btn-color: #000000;
  --bs-btn-bg: var(--niu-gray);
  --bs-btn-border-color: var(--niu-gray);

  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #8d8f90;
  --bs-btn-hover-border-color: #8d8f90;

  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #747678;
  --bs-btn-active-border-color: #747678;

  --bs-btn-disabled-color: #000000;
  --bs-btn-disabled-bg: var(--niu-gray);
  --bs-btn-disabled-border-color: var(--niu-gray);
}

/* Success, Info, Warning, Danger mapped to NIU palette */

.btn-success {
  --bs-btn-bg: var(--niu-green);
  --bs-btn-border-color: var(--niu-green);
  --bs-btn-hover-bg: var(--niu-green-dark);
  --bs-btn-hover-border-color: var(--niu-green-dark);
  --bs-btn-active-bg: #276316;
  --bs-btn-active-border-color: #276316;
}

.btn-info {
  --bs-btn-bg: var(--niu-blue);
  --bs-btn-border-color: var(--niu-blue);
  --bs-btn-hover-bg: var(--niu-blue-dark);
  --bs-btn-hover-border-color: var(--niu-blue-dark);
  --bs-btn-active-bg: #006684;
  --bs-btn-active-border-color: #006684;
}

.btn-warning {
  --bs-btn-color: #000000;
  --bs-btn-bg: var(--niu-gold);
  --bs-btn-border-color: var(--niu-gold);
  --bs-btn-hover-bg: #d9b800;
  --bs-btn-hover-border-color: #d9b800;
  --bs-btn-active-bg: #b39600;
  --bs-btn-active-border-color: #b39600;
}

.btn-danger {
  --bs-btn-bg: #ba0c2f;
  --bs-btn-border-color: #ba0c2f;
  --bs-btn-hover-bg: #8f0a24;
  --bs-btn-hover-border-color: #8f0a24;
  --bs-btn-active-bg: #6b071b;
  --bs-btn-active-border-color: #6b071b;
}

/* ------------------------------------------------------------
     5. Dropdowns
     ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Global nav dropdown (non-mega) styling
   For patterns like:
   <ul class="dropdown-menu"> <a class="list-group-item">...</a> </ul>
   ------------------------------------------------------------ */

/* Base dropdown menu background in global nav */
.navbar .dropdown-menu:not(.mega) {
  background-color: #f2f2f2;
  border: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

/* Make the links look like proper dropdown items */
.navbar .dropdown-menu:not(.mega) a.list-group-item {
  display: block;
  padding: 0.25rem 1rem; /* tweak as needed */
  background-color: #f2f2f2;
  color: #212529;
  border: 0;
  border-radius: 0;
  text-decoration: none;
}

/* Hover + focus: light gray background, dark text */
.navbar .dropdown-menu:not(.mega) a.list-group-item:hover,
.navbar .dropdown-menu:not(.mega) a.list-group-item:focus {
  background-color: #ffffff; /* subtle gray hover */
  color: #212529;
  text-decoration: none;
}

/* Active (mouse down) */
.navbar .dropdown-menu:not(.mega) a.list-group-item:active {
  background-color: #e6e6e6;
  color: #212529;
}

/* If you ever mark one as .active, keep it simple/neutral */
.navbar .dropdown-menu:not(.mega) a.list-group-item.active {
  background-color: #ffffff;
  color: #212529;
}

/* ------------------------------------------------------------
     6. Accordions
     ------------------------------------------------------------ */

/* Global accordion variable overrides */
.accordion {
  --bs-accordion-bg: #f2f2f2; /* Light neutral gray */
  --bs-accordion-border-color: var(--niu-gray);
  --bs-accordion-btn-bg: #f2f2f2;
  --bs-accordion-btn-color: #212529;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(200, 16, 46, 0.25);
}

/* Ensure accordion body also uses the new gray */
.accordion-item .accordion-body {
  background-color: #ffffff;
}

/* Open/active accordion header: slightly darker gray + red text */
.accordion-button:not(.collapsed) {
  color: #c8102e;
  background-color: #e6e6e6;
  border-bottom: 1px solid var(--niu-gray);
}

/* Other accordion customizations */
.accordion h2 {
  font-family: "Montserrat", sans-serif !important;
}

/* ------------------------------------------------------------
     7. Utility helpers (background + text color)
     ------------------------------------------------------------ */

.bg-niu-red {
  background-color: var(--niu-red) !important;
}
.bg-niu-black {
  background-color: var(--niu-black) !important;
}
.bg-niu-gray,
.bg-light {
  background-color: var(--niu-light-gray) !important;
}
.bg-niu-orange {
  background-color: var(--niu-orange) !important;
}
.bg-niu-gold {
  background-color: var(--niu-gold) !important;
}
.bg-niu-green {
  background-color: var(--niu-green) !important;
}
.bg-niu-blue {
  background-color: var(--niu-blue) !important;
}

.text-niu-red {
  color: var(--niu-red) !important;
}
.text-niu-black {
  color: var(--niu-black) !important;
}
.text-niu-gray {
  color: var(--niu-gray) !important;
}
.text-niu-orange {
  color: var(--niu-orange) !important;
}
.text-niu-gold {
  color: var(--niu-gold) !important;
}
.text-niu-green {
  color: var(--niu-green) !important;
}
.text-niu-blue {
  color: var(--niu-blue) !important;
}

/* Optional helpers for borders */
.border-niu-red {
  border-color: var(--niu-red) !important;
}
.border-niu-black {
  border-color: var(--niu-black) !important;
}
.border-niu-gray {
  border-color: var(--niu-gray) !important;
}

/* ------------------------------------------------------------
     8. Misc component tweaks
     ------------------------------------------------------------ */

.card {
  border-radius: 0rem;
}

.card-title {
  font-size: 150%;
  word-wrap: normal;
}

.alert {
  border-radius: 0.35rem;
}

/* Square buttons */
.btn,
.btn-sm,
.btn-lg {
  text-transform: uppercase;
  font-size: 85%;
  font-weight: 500;
}

/* Square buttons */
.btn {
  font-size: 85%;
}

.btn-sm {
  font-size: 70%;
}

.btn-lg {
  font-size: 100%;
}

/* Square cards */
.card,
.card-header,
.card-footer,
.card-img-top,
.card-img-bottom {
  border-radius: 0 !important;
}

/* Contact module frame: defaults work whether bg-light, bg-white, or bg-primary */
.niu-contact .card-header {
  background: transparent; /* let the card's bg show through */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.niu-module-title {
  font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.25rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.niu-subhead {
  font-size: clamp(0.9375rem, 0.2vw + 0.9rem, 1.0625rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Slightly nicer address rhythm */
.niu-contact address {
  margin-bottom: 1rem;
  font-size: var(--fs-body, 1rem);
}
.niu-contact address a {
  text-decoration-thickness: from-font;
}

/* Social links: bigger tap targets + clearer focus */
.niu-contact .social .icon-link {
  padding: 0.5rem;
  border-radius: var(--bs-border-radius);
  text-decoration: none;
}
.niu-contact .social .icon-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ------------------------------------------------------------
  9. Mega menu list-groups inside .dropdown-menu.mega
   ------------------------------------------------------------ */

/* Base list-group variables for mega menus */
.dropdown-menu.mega .list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: transparent;
  --bs-list-group-color: var(--bs-body-color);

  /* Active state colors */
  --bs-list-group-active-bg: var(--niu-red);
  --bs-list-group-active-color: #efefef;
  --bs-list-group-active-border-color: var(--niu-red);
}

/* Base item reset: clean, menu-like appearance */
.dropdown-menu.mega .list-group-item,
.dropdown-menu.mega .dropdown-item {
  border: 0;
  background-color: transparent;
  padding: 0.5rem 0.5rem;
  border-radius: 0;
  color: var(--bs-body-color) !important;
}

/* Hover + focus (mouse + keyboard) */
.dropdown-menu.mega .list-group-item:hover,
.dropdown-menu.mega .list-group-item:focus,
.dropdown-menu.mega .dropdown-item:hover,
.dropdown-menu.mega .dropdown-item:focus {
  background-color: var(--niu-white);
  color: var(--bs-body-color);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.dropdown-menu.mega .list-group-item:focus {
  background-color: var(--niu-white);
  box-shadow: none;
}

.dropdown-menu.mega a.list-group-item:focus-visible,
.dropdown-menu.mega a.dropdown-item:focus-visible {
  outline: 3px solid var(--niu-red);
  outline-offset: 2px;
}

/* Pressed (active interaction) */
.dropdown-menu.mega .list-group-item:active {
  background-color: var(--niu-white);
  color: var(--bs-body-color);
}

/* .active class (explicitly marked current item) */
.dropdown-menu.mega .list-group-item.active,
.dropdown-menu.mega .list-group-item[aria-current="page"] {
  background-color: var(--niu-white);
  border-left: 4px solid var(--niu-red);
  padding-left: calc(0.5rem - 4px);
  color: var(--bs-body-color);
}