/* ===== Pixel Overrides (FULL) ===== */

/* === Pagination: enforce brand gold, kill Pixel blue, square corners === */
:root{
  /* Bootstrap pagination tokens (global) */
  --bs-pagination-color: #000;
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: #b08a48;
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: #b08a48;
  --bs-pagination-hover-border-color: #b08a48;
  --bs-pagination-focus-color: #fff;
  --bs-pagination-focus-bg: #b08a48;
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(176,138,72,.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #b08a48;
  --bs-pagination-active-border-color: #b08a48;
  --bs-pagination-disabled-color: #6c757d;
  --bs-pagination-disabled-bg: #fff;
  --bs-pagination-disabled-border-color: #b08a48;
  --bs-pagination-border-radius: .5rem; /* match pills */
  --bs-btn-border-radius: .5rem;       /* keep buttons consistent */
}



/* Hard override for any Pixel styles */
.pagination .page-link{
  color: #000 !important;
  background-color: #fff !important;
  border: 1px solid #b08a48 !important;
  border-radius: .5rem !important;       /* match pill radius */
  line-height: 1.2 !important;
  padding: .25rem .6rem !important;
}
.pagination .page-item.active .page-link,
.pagination .page-link:hover,
.pagination .page-link:focus{
  color: #fff !important;
  background-color: #b08a48 !important;
  border-color: #b08a48 !important;
  box-shadow: 0 0 0 2px rgba(176,138,72,.18) !important;
  outline: none !important;
}

/* Prev/Next sometimes render as outline buttons (not .page-link) — enforce gold */
.pagination .btn-outline-primary,
.pagination .btn-outline-secondary,
.btn-outline-primary,
.btn-outline-secondary{
  color: #b08a48 !important;
  border-color: #b08a48 !important;
  background-color: #fff !important;
  border-radius: .5rem !important;
}
.pagination .btn-outline-primary:hover,
.pagination .btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover{
  color: #fff !important;
  background-color: #b08a48 !important;
  border-color: #b08a48 !important;
}

/* Small screens: keep Prev/Next readable and spaced */
@media (max-width:600px){
  .pagination{
    gap: .5rem !important;
  }
}

/* 0) Tokens */
:root{
  --bs-body-font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  --bs-primary:#b08a48;
  --bs-primary-rgb:176,138,72;
  --bs-link-color:var(--bs-primary);
  --bs-link-hover-color:#9a773f;

  --bs-body-color:#000;
  --bs-heading-color:#000;   /* Pixel headings now use this */
  --bs-body-bg:#fff;

  --brand-gold:#b08a48;

  /* Force Bootstrap close button to use brand gold (for any .btn-close) */
  --bs-btn-close-color: #b08a48;
  --bs-btn-close-opacity: 1;
  --bs-btn-close-hover-opacity: 1;
}


/* Secondary nav — single source of truth (size, spacing, states) */
.secondary-nav .nav { 
  gap: 0.24rem !important;
}

/* DESKTOP-ONLY: standardize secondary-nav pills to the smaller hub size */
@media (min-width: 601px){
  .secondary-nav .nav-pills .nav-link{
    padding: 0.18rem 0.48rem !important;
    font-size: 1rem !important; /* restore default-size text on desktop */
    line-height: 1.2 !important;
    min-height: 30px !important;
    border-radius: 0.5rem !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    box-sizing: border-box !important;
    background-clip: padding-box !important;
  }
}


.secondary-nav .nav-pills .nav-link.active{
  border-color: var(--brand-gold) !important;
}

.secondary-nav .nav-pills .nav-link:hover,
.secondary-nav .nav-pills .nav-link:focus,
.secondary-nav .nav-pills .nav-link:focus-visible{
  border-color: var(--brand-gold) !important;
  box-shadow: 0 0 0 2px rgba(176,138,72,.18);
  outline: none;
}

/* Mobile: stack vertically to save space */
@media (max-width: 768px){
  /* Secondary nav MUST be a multi-column grid on phones — match ANY .nav container shape */
  .secondary-nav .nav,
  .secondary-nav ul.nav,
  .secondary-nav ol.nav,
  nav.secondary-nav .nav,
  nav.secondary-nav ul.nav,
  nav.secondary-nav ol.nav{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
    justify-items: stretch !important;

    /* kill column utilities from Bootstrap/Pixel */
    flex-direction: initial !important;
    flex-wrap: initial !important;
  }

  /* Ensure items don't force full-width; cover <li> and generic children */
  .secondary-nav .nav > li.nav-item,
  .secondary-nav .nav > *{
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
  }

  /* Each pill fills its grid cell neatly */
  .secondary-nav .nav > * > .nav-link{
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 38px !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 0.9rem !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    border-radius: 0.5rem !important;
  }

  /* Footer keeps its compact row */
  .site-footer nav.secondary-nav .nav{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
  }
  .site-footer nav.secondary-nav .nav .nav-link{
    width: auto !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* Desktop: enforce horizontal */
@media (min-width: 769px){
  .secondary-nav .nav{
    flex-direction: row;
    align-items: center;
  }
}

/* Optional: force always-vertical when you add .vertical on the nav */
.secondary-nav.vertical .nav{
  flex-direction: column;
  align-items: stretch;
}
.secondary-nav.vertical .nav-pills .nav-link{
  width: 100%;
  text-align: left;
}
/* Footer pills — centered and slightly smaller (actual markup uses .secondary-nav) */
.site-footer nav.secondary-nav .nav{
  display: flex;
  justify-content: center;
  gap: 0.5rem !important;
}
.site-footer nav.secondary-nav .nav .nav-link{
  padding: 0.35rem 0.6rem;
  line-height: 1.2;
  min-height: 36px;
  border-radius: 0.6rem;
  border: 1px solid var(--brand-gold) !important;
}


/* 2) Dashboard scroller — gold image frames */
.dashboard-scroller .d-flex a img{
  box-sizing:border-box;                 /* keep total size the same */
  border:2px solid var(--brand-gold) !important;
  border-radius:0.5rem;                  /* matches Bootstrap rounded-3 look */
  box-shadow:0 1px 6px rgba(0,0,0,.12);
}
@media (min-width:768px){
  .dashboard-scroller .d-flex a img{border-width:3px;}
}
.dashboard-scroller .d-flex a:focus img,
.dashboard-scroller .d-flex a:hover img{
  border-color:var(--brand-gold);
  box-shadow:0 1px 8px rgba(0,0,0,.16);
  outline:none;
}

/* 3) Gold horizontal SCROLLBAR (the “gold bar”) — desktop/laptop only */
@media (hover:hover) and (pointer:fine){
  .dashboard-scroller .overflow-auto{
    scrollbar-width:thin;                          /* Firefox */
    scrollbar-color:var(--brand-gold) transparent; /* thumb / track */
  }
  .dashboard-scroller .overflow-auto::-webkit-scrollbar{height:10px;}
  .dashboard-scroller .overflow-auto::-webkit-scrollbar-track{background:transparent;}
  .dashboard-scroller .overflow-auto::-webkit-scrollbar-thumb{
    background:var(--brand-gold);
    border-radius:999px;
    border:2px solid transparent;                  /* pill shape */
    background-clip:content-box;
  }
}

/* 4) Touch devices — optional gold cue under the strip */
@media (hover:none),(pointer:coarse){
  /* Remove the under-strip line on touch */
  .dashboard-scroller .d-flex{border-bottom:0;}
}

/* === NAVBAR FIX: force dark bar + white links (override Pixel blue) === */

/* Size: make ALL navbar buttons use the small pill spec + hard centering */
.navbar .btn,
.navbar .nav-link.btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important; 
  height: 30px !important;              /* fixed height aligns outline + solid */
  padding: 0.18rem 0.48rem !important;
  font-size: 0.84rem !important;
  line-height: 1 !important;             /* kill tall nav-link line-height */
  border-radius: 0.5rem !important;
}

.navbar,
.navbar-main {
  background-color: #fff !important;   /* pick your dark tone */
}

/* Brand + links in the navbar */
.navbar .navbar-brand,
.navbar .nav-link {
  color: #000 !important;
}


/* Optional: highlight current page with a subtle gold underline */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  color: #b08a48 !important;
  box-shadow: inset 0 -2px 0 0 var(--brand-gold);
}
/* === NAVBAR BUTTON FIX (kills the blue) === */

/* Navbar buttons: hard-center contents (fixes outline anchor vertical offset) */
.navbar .btn,
.navbar .nav-link.btn,
.navbar-main .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;           /* prevents tall nav-link line-height */
  vertical-align: middle !important;    /* keeps inline alignment tidy */
}

/* Force small pill sizing for ALL header/nav buttons, even if .btn-lg or px-*/py-* are present */
.navbar .btn,
.navbar .nav-link.btn,
.navbar-main .btn,
.site-header .btn {
  --bs-btn-padding-y: 0.18rem !important;
  --bs-btn-padding-x: 0.48rem !important;
  --bs-btn-font-size: 0.84rem !important;
  --bs-btn-border-radius: 0.5rem !important;

  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
  font-size: var(--bs-btn-font-size) !important;
  line-height: 1.2 !important;
  min-height: 30px !important;
  border-radius: var(--bs-btn-border-radius) !important;
}

/* Neutralize Bootstrap size variants on header/nav buttons */
.navbar .btn.btn-lg,
.navbar-main .btn.btn-lg,
.site-header .btn.btn-lg,
.navbar .btn.btn-sm,
.navbar-main .btn.btn-sm,
.site-header .btn.btn-sm {
  --bs-btn-padding-y: 0.18rem !important;
  --bs-btn-padding-x: 0.48rem !important;
  --bs-btn-font-size: 0.84rem !important;
  --bs-btn-border-radius: 0.5rem !important;
}

/* Override spacing utilities that expand padding on header/nav buttons */
.navbar .btn[class*="px-"],
.navbar .btn[class*="py-"],
.navbar-main .btn[class*="px-"],
.navbar-main .btn[class*="py-"],
.site-header .btn[class*="px-"],
.site-header .btn[class*="py-"] {
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
}

/* 1) Make everything inside the navbar use gold as its "primary" */
.navbar {
  --bs-primary: var(--brand-gold);
  --bs-primary-rgb: 176,138,72;
}

/* 2) Solid primary button in navbar (e.g., your "Login" pill) */
.navbar .btn-primary,
.navbar .nav-link.btn.btn-primary {
  background-color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: #fff !important;
}
/* Compatibility: force "Login" to look like primary even if authoring missed .btn-primary */
.navbar a[href*="login" i],
.navbar a[href*="log-in" i],
.navbar a[href*="signin" i],
.navbar a[href*="sign-in" i],
.navbar a[aria-label="Login" i],
.navbar a[title="Login" i],
.navbar .nav-link[aria-label="Login" i],
.navbar .nav-link[title="Login" i]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.18rem 0.48rem !important;   /* matches your small pill */
  line-height: 1 !important;
  min-height: 30px !important;
  border-radius: 0.5rem !important;

  /* Solid gold like .btn-primary */
  background-color: var(--brand-gold, #b08a48) !important;
  border: 1px solid var(--brand-gold, #b08a48) !important;
  color: #fff !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.navbar a[href*="login" i]:hover,
.navbar a[href*="log-in" i]:hover,
.navbar a[href*="signin" i]:hover,
.navbar a[href*="sign-in" i]:hover,
.navbar a[aria-label="Login" i]:hover,
.navbar a[title="Login" i]:hover,
.navbar .nav-link[aria-label="Login" i]:hover,
.navbar .nav-link[title="Login" i]:hover,
.navbar a[href*="login" i]:focus,
.navbar a[href*="log-in" i]:focus,
.navbar a[href*="signin" i]:focus,
.navbar a[href*="sign-in" i]:focus,
.navbar a[aria-label="Login" i]:focus,
.navbar a[title="Login" i]:focus,
.navbar .nav-link[aria-label="Login" i]:focus,
.navbar .nav-link[title="Login" i]:focus{
  background-color: #9a773f !important;
  border-color: #9a773f !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25) !important;
}

/* Compatibility: treat common login classes as primary if authoring missed .btn-primary */
.navbar .nav-link.login,
.navbar .login,
.navbar .login-button,
.navbar .btn-login{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.18rem 0.48rem !important;
  line-height: 1 !important;
  min-height: 30px !important;
  border-radius: 0.5rem !important;

  /* Solid gold like .btn-primary */
  background-color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: #fff !important;
}
.navbar .nav-link.login:hover,
.navbar .login:hover,
.navbar .login-button:hover,
.navbar .btn-login:hover,
.navbar .nav-link.login:focus,
.navbar .login:focus,
.navbar .login-button:focus,
.navbar .btn-login:focus{
  background-color: #9a773f !important;
  border-color: #9a773f !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25) !important;
}

/* Hover/active/focus states */
.navbar .btn-primary:hover,
.navbar .btn-primary:focus,
.navbar .btn-primary:active,
.navbar .btn-primary:focus-visible {
  background-color: #9a773f !important;   /* slightly darker gold */
  border-color: #9a773f !important;
  color: #fff !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25) !important;
}

/* 3) Outline primary variant, in case you use it later */
.navbar .btn-outline-primary {
  color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  background-color: transparent !important;
}
.navbar .btn-outline-primary:hover,
.navbar .btn-outline-primary:focus {
  background-color: var(--brand-gold) !important;
  color: #fff !important;
  border-color: var(--brand-gold) !important;
}
/* 3b) Force ALL outline variants in the navbar to use brand gold
   (covers btn-outline-dark, -secondary, etc., not just -primary) */
.navbar .btn[class*="btn-outline-"],
.navbar .nav-link.btn[class*="btn-outline-"]{
  color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  background-color: transparent !important;
}

.navbar .btn[class*="btn-outline-"]:hover,
.navbar .btn[class*="btn-outline-"]:focus,
.navbar .btn[class*="btn-outline-"]:active,
.navbar .nav-link.btn[class*="btn-outline-"]:hover,
.navbar .nav-link.btn[class*="btn-outline-"]:focus,
.navbar .nav-link.btn[class*="btn-outline-"]:active{
  background-color: var(--brand-gold) !important;
  color: #fff !important;
  border-color: var(--brand-gold) !important;
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25) !important;
}

/* 4) Since your navbar is white, make sure link hovers aren't white */
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #000 !important;   /* readable on white */
  text-decoration: none;
}
.site-footer .footer-social {
  font-size: 1.2rem;
  color: #000;
  text-decoration: none;
}
.site-footer .footer-social:hover,
.site-footer .footer-social:focus {
  color: var(--brand-gold);
}
/* ===== Hero stack spacing: banner → slider → pills ===== */

/* Give the top banner a touch more room below (safe, no visual shift elsewhere) */
header[role="banner"],
.site-header {
  /* More breathing room below the hero */
  padding-bottom: 4.5rem;
  /* Remove Pixel’s subtle header divider */
  border-bottom: 0 !important;
  box-shadow: none !important;
}


/* Horizontal dashboard slider wrapper:
   Add vertical padding (prevents margin-collapsing) and modest margins */
section[aria-label="Dashboard shortcuts"] {
  /* Extra air around the slider */
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;

  /* Kill the thin grey rules above/below this strip */
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Remove Pixel section dividers that render as thin grey lines */
.section,
.content-section,
.page-section,
.site-main > section {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.section::before,
.section::after,
.content-section::before,
.content-section::after,
.page-section::before,
.page-section::after {
  display: none !important;
}

/* Hide any HR-based separators in the hero stack area */
.site-main > hr,
main > hr,
section[aria-label="Dashboard shortcuts"] hr {
  display: none !important;
}


/* Tweak for narrow screens so it doesn’t feel cramped */
@media (max-width: 576px) {
  section[aria-label="Dashboard shortcuts"] {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
  }
  #hubNav {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
  }
}

/* ---- Secondary nav pill sizing (page-scoped, enforced) ---- */
#hubNav .nav {
  gap: 0.20rem !important;                /* tighter spacing between pills */
}

/* Desktop-only pill sizing inside Hub nav */
@media (min-width: 601px) {
  #hubNav .nav-pills .nav-link {
    padding: 0.18rem 0.48rem !important;
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
    min-height: 30px !important;
    border-radius: 0.5rem !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    box-sizing: border-box !important;
    background-clip: padding-box !important;
  }
}

/* Mobile: tiles, not pills */
@media (max-width: 600px) {
  /* Mobile tiles: fixed 72px grid cells */
  #hubNav,
  #hubNav .nav,
  #hubNav > ul,
  #hubNav > div{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
    grid-auto-rows: minmax(72px, 1fr) !important;
    gap: 8px !important;
    align-content: start !important;
  }

  /* Each tile fills its grid cell */
  #hubNav .nav-pills .nav-link,
  #hubNav .hub-btn,
  #hubNav button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0.5rem !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
    border-radius: 8px !important;
    border: 1px solid var(--brand-gold, #b08a48) !important;
    background: #fff !important;
    color: #000 !important;
    box-sizing: border-box !important;
  }
}


/* High-specificity selectors so this beats Pixel + utilities */
header[role="banner"] .navbar .btn.btn,
header[role="banner"] .navbar .nav-link.nav-link,
.site-header .navbar .btn.btn,
.site-header .navbar .nav-link.nav-link,
.navbar.navbar .btn.btn,
.navbar.navbar .nav-link.nav-link {
  --bs-btn-padding-y: 0.18rem !important;
  --bs-btn-padding-x: 0.48rem !important;
  --bs-btn-font-size: 0.84rem !important;
  --bs-btn-border-radius: 0.5rem !important;

  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
  font-size: var(--bs-btn-font-size) !important;
  line-height: 1.2 !important;
  min-height: 30px !important;
  border-radius: var(--bs-btn-border-radius) !important;
}

/* Neutralize size variants specifically in header/nav */
header[role="banner"] .navbar .btn.btn-lg,
.site-header .navbar .btn.btn-lg,
.navbar.navbar .btn.btn-lg,
header[role="banner"] .navbar .btn.btn-sm,
.site-header .navbar .btn.btn-sm,
.navbar.navbar .btn.btn-sm {
  --bs-btn-padding-y: 0.18rem !important;
  --bs-btn-padding-x: 0.48rem !important;
  --bs-btn-font-size: 0.84rem !important;
  --bs-btn-border-radius: 0.5rem !important;
}

/* Kill padding utilities on header/nav buttons & links */
header[role="banner"] .navbar .btn[class*="px-"],
header[role="banner"] .navbar .btn[class*="py-"],
header[role="banner"] .navbar .nav-link[class*="px-"],
header[role="banner"] .navbar .nav-link[class*="py-"],
.site-header .navbar .btn[class*="px-"],
.site-header .navbar .btn[class*="py-"],
.site-header .navbar .nav-link[class*="px-"],
.site-header .navbar .nav-link[class*="py-"],
.navbar.navbar .btn[class*="px-"],
.navbar.navbar .btn[class*="py-"],
.navbar.navbar .nav-link[class*="px-"],
.navbar.navbar .nav-link[class*="py-"] {
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
}
/* Brand mark next to wordmark — match small pill height */
.navbar .navbar-brand .brand-mark{
  height: 35px;           /* same as min-height of small pills */
  width: auto;
  display: inline-block;
  vertical-align: middle; /* keeps baseline tidy with text */
}
/* Global spacing for the secondary pills row */
#hubNav {
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}


/* Mobile/Tablet (below lg): force actions visible, remove hamburger, row layout with spacing */
@media (max-width: 991.98px){
  /* 1) Remove the hamburger entirely */
  nav.navbar .navbar-toggler,
  nav.navbar .navbar-toggler .navbar-toggler-icon{
    display: none !important;
  }

  /* 2) Keep the nav actions visible even without .collapse/.show and neutralize Pixel's absolute/opacity */
  nav.navbar #mainNav{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    position: static !important;
    width: auto !important;
  }

  /* 3) Make the inner container a horizontal row aligned right */
  nav.navbar #mainNav.navbar-collapse{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* 4) Bootstrap defaults .navbar-nav to column on mobile — override to row with gap */
  nav.navbar #mainNav .navbar-nav{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-left: auto !important; /* mimic .ms-auto on small screens */
  }

  /* 5) Ensure actions remain compact, not full-width */
  nav.navbar #mainNav .navbar-nav .nav-item{
    display: inline-flex !important;
  }
  nav.navbar #mainNav .navbar-nav .btn,
  nav.navbar #mainNav .navbar-nav .nav-link.btn{
    width: auto !important;
    white-space: nowrap !important;
  }
}
/* XS safeguard: some stacks still hide or offset the collapse region below 576px */
@media (max-width: 575.98px){
  nav.navbar #mainNav{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    position: static !important;
    width: auto !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }
  nav.navbar #mainNav .navbar-nav{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    overflow: visible !important;
  }
}
/* Force hub button text to black on desktop only */
@media (min-width: 992px) {
  #hubNav .hub-btn,
  #hubNav .btn,
  #hubNav .nav-link.btn,
  #hubNav button.hub-btn {
    color: #000 !important;
  }
}

/* Force secondary-nav pill text to black on DESKTOP only */
@media (min-width: 992px){
  .secondary-nav .nav-pills .nav-link{
    color: #000 !important;
  }
  .secondary-nav .nav-pills .nav-link.active,
  .secondary-nav .nav-pills .nav-link:focus,
  .secondary-nav .nav-pills .nav-link:hover{
    color: #000 !important;
  }
}
/* === Perfect Secondary Navbar Pill — DESKTOP ONLY === */
@media (min-width: 601px) {
  #hubNav .nav-pills .nav-link,
  .secondary-nav .nav-pills .nav-link{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.24rem !important;

    /* Thin, uniform internal whitespace */
    padding: 0.18rem 0.48rem !important;
    min-height: 30px !important;
    line-height: 1.2 !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;

    /* Visuals */
    border: 1px solid var(--brand-gold, #b08a48) !important;
    border-radius: 0.5rem !important;
    background: #fff !important;

    /* Behavior */
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
}

/* Keep the same thin look on hover/focus/active without thickening */
#hubNav .nav-pills .nav-link:hover,
#hubNav .nav-pills .nav-link:focus,
#hubNav .nav-pills .nav-link.active,
.secondary-nav .nav-pills .nav-link:hover,
.secondary-nav .nav-pills .nav-link:focus,
.secondary-nav .nav-pills .nav-link.active{
  background: #fff !important;
  border-color: var(--brand-gold, #b08a48) !important;
  outline: none !important;
}

/* Desktop-only: force black pill text so PixelCSS greys can't leak in */
@media (min-width: 992px){
  #hubNav .nav-pills .nav-link,
  #hubNav .nav-pills .nav-link:hover,
  #hubNav .nav-pills .nav-link:focus,
  #hubNav .nav-pills .nav-link.active,
  .secondary-nav .nav-pills .nav-link,
  .secondary-nav .nav-pills .nav-link:hover,
  .secondary-nav .nav-pills .nav-link:focus,
  .secondary-nav .nav-pills .nav-link.active{
    color: #000 !important;
  }
}
@media (min-width: 992px){
  #hubNav .nav-pills,
  .secondary-nav .nav-pills{
    gap: 0.50rem !important; /* space between buttons (desktop) */
  }
}


/* DASHBOARD SHORTCUT STRIP NORMALIZER
   Goal: make every dashboard icon tile uniform height, one horizontal row,
   scrollable with the thin gold scrollbar instead of wrapping into 2 lines.
   This affects the row shown under "WELCOME TO YOUR CLARIIA CONSOLE".
*/

/* Outer scroll area: force horizontal scroll only */
.dashboard-scroller .overflow-auto {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
  /* prevent Pixel/Bootstrap from deciding its own white-space/height */
  white-space: nowrap;
  padding-bottom: 0.5rem;
}

/* Inner flex row: never wrap, keep items aligned to the top */
.dashboard-scroller .d-flex {
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  /* make sure nothing here decides to stretch vertically */
  align-content: flex-start !important;
}

/* Each shortcut block (the little icon + label) */
.dashboard-scroller .d-flex > * {
  flex: 0 0 auto !important;
  width: 73px !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: normal !important; /* allow 2-line labels like "Vision Mapping" */
  color: #000 !important;
  font-size: 0.9rem !important;
  font-weight: 500;
}

/* Thumbnail frame itself */
.dashboard-scroller .d-flex > * img {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border: 2px solid var(--brand-gold, #b08a48) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.5rem;
}

/* Hover/focus keeps the gold frame clean */
.dashboard-scroller .d-flex > *:hover img,
.dashboard-scroller .d-flex > *:focus img {
  border-color: var(--brand-gold, #b08a48) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.16);
  outline: none;
}

/* Label text under each icon */
.dashboard-scroller .d-flex > * .shortcut-label,
.dashboard-scroller .d-flex > * .label,
.dashboard-scroller .d-flex > * .text-center,
.dashboard-scroller .d-flex > * .small,
.dashboard-scroller .d-flex > * div:last-child {
  color: #000 !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all;
}

/* Make sure desktop keeps the thin gold scrollbar you already defined */
@media (hover:hover) and (pointer:fine) {
  .dashboard-scroller .overflow-auto {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-gold) transparent;
  }
  .dashboard-scroller .overflow-auto::-webkit-scrollbar {
    height: 10px;
  }
  .dashboard-scroller .overflow-auto::-webkit-scrollbar-track {
    background: transparent;
  }
  .dashboard-scroller .overflow-auto::-webkit-scrollbar-thumb {
    background: var(--brand-gold);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
}

/* Touch devices should not double-wrap or stack weirdly;
   we still keep it horizontal but we allow swipe instead of scrollbar bar */
@media (hover:none), (pointer:coarse) {
  .dashboard-scroller .overflow-auto {
    scrollbar-width: none;
  }
  .dashboard-scroller .overflow-auto::-webkit-scrollbar {
    display: none;
  }
}

/* Vision Mapping mobile containment overrides */
@media (max-width: 575.98px){
  /* 1. The gold bordered wrapper itself */
  .visionmapping__panel {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* 2. The header row that holds:
        - Delivery:
        - Section:
        - Pull Card
     Force it to be a vertical stack and keep each child at 100% width.
     visionmapping.css defines this row as .vm-form-row. :contentReference[oaicite:2]{index=2}
  */
  .visionmapping__panel .vm-form-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: var(--vm-gap-sm);
    max-width: 100%;
    box-sizing: border-box;
  }

  .visionmapping__panel .vm-form-row > * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 3. The CardRenderer output.
        CardRenderer.js mounts a <div class="card"> with .section blocks,
        a textarea per block, and the .actions row at the bottom. :contentReference[oaicite:3]{index=3}
        We force that whole stack to live fully inside the panel width.
  */
  .visionmapping__panel .card,
  .visionmapping__panel .card > * {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* 4. Action row (Save / Close).
        Make sure wrapping these buttons cannot push horizontal overflow.
        CardRenderer.js gives this row class "actions". :contentReference[oaicite:4]{index=4}
  */
  .visionmapping__panel .actions {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
}


/* === Standardize panel headings (Vision Mapping + Gratitude) === */
.visionmapping__panel h1,
.visionmapping__panel .h1,
.visionmapping__panel h2,
.visionmapping__panel .h2,
.visionmapping__panel h3,
.visionmapping__panel .h3,
.visionmapping__panel h4,
.visionmapping__panel .h4,
.visionmapping__panel h5,
.visionmapping__panel .h5,
.visionmapping__panel h6,
.visionmapping__panel .h6,
.gratitude h1,
.gratitude .h1,
.gratitude h2,
.gratitude .h2,
.gratitude h3,
.gratitude .h3,
.gratitude h4,
.gratitude .h4,
.gratitude h5,
.gratitude .h5,
.gratitude h6,
.gratitude .h6 {
  margin: 0 0 12px 0;
  font-size: 1.1rem;             /* one size across both modules */
  font-weight: 500;
  line-height: 1.3;
  color: var(--bs-heading-color, #000);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--brand-gold, #b08a48);
  padding-bottom: 8px;
}

/* === Headings weight override (standardize sitewide) === */
/* Pixel sets h1–h6 to 600 in pixel.css; force a consistent 500 here. */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: 500 !important;
}

/* Pixel override: ensure rail uses the brick grid rules */
#rightColumn .rr-brick-grid,
#apothecaryButtons{ all: unset; }
#rightColumn .rr-brick-grid,
#apothecaryButtons{ display: grid !important; } /* rest comes from the imported file */


/* FINAL MOBILE HUB GRID SAFEGUARD */
@media (max-width: 600px) {
  #hubNav,
  #hubNav .nav,
  #hubNav > ul,
  #hubNav > div {
    display: grid !important;
  }
  /* neutralize any Bootstrap/Pixel flex-column utilities that might leak in */
  #hubNav .nav,
  #hubNav > ul,
  #hubNav > div {
    flex-direction: initial !important;
    flex-wrap: initial !important;
  }
}

/* ---- Kill Bootstrap blue on buttons globally; enforce brand gold ---- */
:root {
  --bs-primary: #b08a48;
  --bs-primary-rgb: 176, 138, 72;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: color-mix(in oklab, var(--bs-primary) 85%, black);
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .25);
}

/* Solid primary */
.btn-primary {
  /* Bootstrap-style variables, still using your brand gold token */
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-primary) 92%, black);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-primary) 88%, black);
  --bs-btn-active-bg: color-mix(in oklab, var(--bs-primary) 84%, black);
  --bs-btn-active-border-color: color-mix(in oklab, var(--bs-primary) 80%, black);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);

  /* REAL overrides to kill Pixel navy everywhere */
  color: #fff !important;
  background-color: var(--bs-btn-bg, var(--bs-primary)) !important;
  border-color: var(--bs-btn-border-color, var(--bs-primary)) !important;
  border-radius: 0.5rem !important;  /* your rectangle with slight corners */
}



/* Outline primary — white fill, gold outline, rectangle corners */
.btn-outline-primary {
  --bs-btn-color: var(--brand-gold);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--brand-gold);

  --bs-btn-hover-bg: color-mix(in oklab, var(--brand-gold) 8%, white);
  --bs-btn-hover-border-color: var(--brand-gold);

  --bs-btn-active-bg: color-mix(in oklab, var(--brand-gold) 15%, white);
  --bs-btn-active-border-color: color-mix(in oklab, var(--brand-gold) 85%, black);

  --bs-btn-disabled-color: var(--brand-gold);
  --bs-btn-disabled-border-color: var(--brand-gold);

  --bs-btn-focus-shadow-rgb: var(--brand-gold-rgb);

  /* Your shape */
  --bs-btn-border-radius: 0.5rem;
}

/* Standalone page Back buttons — match Brain Dump solid gold,
   kill default blue on To-Do, Projects, Journal */
.braindump-page header .btn.btn-primary.btn-sm,
.todo-page header .btn.btn-primary.btn-sm,
.projects-page header .btn.btn-primary.btn-sm,
.journal-page header .btn.btn-primary.btn-sm {
  background-color: var(--brand-gold) !important;
  border-color: var(--brand-gold) !important;
  color: #fff !important;
  border-radius: 0.5rem !important; /* your standard rectangle with slight corners */
}

/* ===== End ===== */