/*!
 * Author: mishuno - https://criticalfun.org
 * Copyright (c) 2025
 */
@charset "UTF-8";

/* =======================================================
   1) Brand Palette (as provided)
   ======================================================= */
:root {
  /* Regular Colors */
  --slate: rgba(41, 50, 65, 1);
  --ocean-blue: rgba(61, 90, 128, 1);
  --dark-cyan: rgba(95, 168, 211, 1);
  --tiffany-blue: rgba(202, 233, 255, 1);
  --vanilla: rgba(233, 216, 166, 1);
  --gamboge: rgba(238, 155, 0, 1);
  --alloy-orange: rgba(202, 103, 2, 1);
  --rust: rgba(187, 62, 3, 1);
  --rufous: rgba(174, 32, 18, 1);
  --auburn: rgba(155, 34, 38, 1);
}

/* =======================================================
   2) Background Utilities (as provided)
   ======================================================= */
.bg-slate { background-color: rgba(41, 50, 65, 1) !important; }
.bg-ocean-blue { background-color: rgba(61, 90, 128, 1) !important; }
.bg-dark-cyan { background-color: rgba(95, 168, 211, 1) !important; }
.bg-tiffany-blue { background-color: rgba(202, 233, 255, 1) !important; }
.bg-vanilla { background-color: rgba(233, 216, 166, 1) !important; }
.bg-gamboge { background-color: rgba(238, 155, 0, 1) !important; }
.bg-alloy-orange { background-color: rgba(202, 103, 2, 1) !important; }
.bg-rust { background-color: rgba(187, 62, 3, 1) !important; }
.bg-rufous { background-color: rgba(174, 32, 18, 1) !important; }
.bg-auburn { background-color: rgba(155, 34, 38, 1) !important; }

/* =======================================================
   3) Text Utilities (as provided)
   ======================================================= */
.text-slate { color: rgba(41, 50, 65, 1) !important; }
.text-ocean-blue { color: rgba(61, 90, 128, 1) !important; }
.text-dark-cyan { color: rgba(95, 168, 211, 1) !important; }
.text-tiffany-blue { color: rgba(202, 233, 255, 1) !important; }
.text-vanilla { color: rgba(233, 216, 166, 1) !important; }
.text-gamboge { color: rgba(238, 155, 0, 1) !important; }
.text-alloy-orange { color: rgba(202, 103, 2, 1) !important; }
.text-rust { color: rgba(187, 62, 3, 1) !important; }
.text-auburn { color: rgba(155, 34, 38, 1) !important; }

/* =======================================================
   4) Button Variants (as provided)
   ======================================================= */
.btn-slate {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(41, 50, 65, 1) !important;
  --bs-btn-border-color: rgba(41, 50, 65, 1) !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(51, 65, 71, 1) !important;
  --bs-btn-hover-border-color: rgba(51, 65, 71, 1) !important;
  --bs-btn-focus-shadow-rgb: 68, 111, 221;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(41, 50, 65, 1) !important;
  --bs-btn-active-border-color: rgba(51, 65, 71, 1) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(133, 141, 145, 1) !important;
  --bs-btn-disabled-border-color: rgba(133, 141, 145, 1) !important;
}

.btn-ocean-blue {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(61, 90, 128, 1) !important;
  --bs-btn-border-color: rgba(61, 90, 128, 1) !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(66, 100, 121, 1) !important;
  --bs-btn-hover-border-color: rgba(66, 100, 121, 1) !important;
  --bs-btn-focus-shadow-rgb: 68, 111, 221;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(61, 90, 128, 1) !important;
  --bs-btn-active-border-color: rgba(66, 100, 121, 1) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(133, 141, 145, 1) !important;
  --bs-btn-disabled-border-color: rgba(133, 141, 145, 1) !important;
}

.btn-dark-cyan {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(95, 168, 211, 1) !important;
  --bs-btn-border-color: rgba(95, 168, 211, 1) !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(138, 192, 218, 1) !important;
  --bs-btn-hover-border-color: rgba(138, 192, 218, 1) !important;
  --bs-btn-focus-shadow-rgb: 68, 111, 221;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(95, 168, 211, 1) !important;
  --bs-btn-active-border-color: rgba(138, 192, 218, 1) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(133, 141, 145, 1) !important;
  --bs-btn-disabled-border-color: rgba(133, 141, 145, 1) !important;
}

.btn-tiffany-blue {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(202, 233, 255, 1) !important;
  --bs-btn-border-color: rgba(202, 233, 255, 1) !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(229, 244, 255, 1) !important;
  --bs-btn-hover-border-color: rgba(229, 244, 255, 1) !important;
  --bs-btn-focus-shadow-rgb: 68, 111, 221;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(202, 233, 255, 1) !important;
  --bs-btn-active-border-color: rgba(229, 244, 255, 1) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(133, 141, 145, 1) !important;
  --bs-btn-disabled-border-color: rgba(133, 141, 145, 1) !important;
}

.btn-vanilla {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(233, 216, 166, 1) !important;
  --bs-btn-border-color: rgba(233, 216, 166, 1) !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(244, 235, 204, 1) !important;
  --bs-btn-hover-border-color: rgba(244, 235, 204, 1) !important;
  --bs-btn-focus-shadow-rgb: 68, 111, 221;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(233, 216, 166, 1) !important;
  --bs-btn-active-border-color: rgba(244, 235, 204, 1) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(133, 141, 145, 1) !important;
  --bs-btn-disabled-border-color: rgba(133, 141, 145, 1) !important;
}

.btn-gamboge {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(238, 155, 0, 1) !important;
  --bs-btn-border-color: rgba(238, 155, 0, 1) !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 177, 51, 1) !important;
  --bs-btn-hover-border-color: rgba(255, 177, 51, 1) !important;
  --bs-btn-focus-shadow-rgb: 68, 111, 221;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(238, 155, 0, 1) !important;
  --bs-btn-active-border-color: rgba(255, 177, 51, 1) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(133, 141, 145, 1) !important;
  --bs-btn-disabled-border-color: rgba(133, 141, 145, 1) !important;
}

.btn-alloy-orange {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(202, 103, 2, 1) !important;
  --bs-btn-border-color: rgba(202, 103, 2, 1) !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(223, 135, 51, 1) !important;
  --bs-btn-hover-border-color: rgba(223, 135, 51, 1) !important;
  --bs-btn-focus-shadow-rgb: 68, 111, 221;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(202, 103, 2, 1) !important;
  --bs-btn-active-border-color: rgba(223, 135, 51, 1) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(133, 141, 145, 1) !important;
  --bs-btn-disabled-border-color: rgba(133, 141, 145, 1) !important;
}

.btn-rust {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(187, 62, 3, 1) !important;
  --bs-btn-border-color: rgba(187, 62, 3, 1) !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(208, 91, 51, 1) !important;
  --bs-btn-hover-border-color: rgba(208, 91, 51, 1) !important;
  --bs-btn-focus-shadow-rgb: 68, 111, 221;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(187, 62, 3, 1) !important;
  --bs-btn-active-border-color: rgba(208, 91, 51, 1) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(133, 141, 145, 1) !important;
  --bs-btn-disabled-border-color: rgba(133, 141, 145, 1) !important;
}

.btn-rufous {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(174, 32, 18, 1) !important;
  --bs-btn-border-color: rgba(174, 32, 18, 1) !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(194, 66, 51, 1) !important;
  --bs-btn-hover-border-color: rgba(194, 66, 51, 1) !important;
  --bs-btn-focus-shadow-rgb: 68, 111, 221;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(174, 32, 18, 1) !important;
  --bs-btn-active-border-color: rgba(194, 66, 51, 1) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(133, 141, 145, 1) !important;
  --bs-btn-disabled-border-color: rgba(133, 141, 145, 1) !important;
}

.btn-auburn {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(155, 34, 38, 1) !important;
  --bs-btn-border-color: rgba(155, 34, 38, 1) !important;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(175, 71, 71, 1) !important;
  --bs-btn-hover-border-color: rgba(175, 71, 71, 1) !important;
  --bs-btn-focus-shadow-rgb: 68, 111, 221;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(155, 34, 38, 1) !important;
  --bs-btn-active-border-color: rgba(175, 71, 71, 1) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(133, 141, 145, 1) !important;
  --bs-btn-disabled-border-color: rgba(133, 141, 145, 1) !important;
}

/* =======================================================
   5) Select2 & Typography (as provided)
   ======================================================= */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 0.25rem 0.25rem 0.25rem 0;
  height: 1.375rem;
  line-height: 1.375rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: rgba(187, 62, 3, 1) !important;
  border: none;
  border-radius: 0.375rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(187, 62, 3, 1) !important;
}

.nunito {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

:root {
  --bs-font-sans-serif: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* =======================================================
   6) Floating Alert (legacy single alert block, as provided)
   ======================================================= */
.floating-alert {
  position: fixed;             /* Float above content */
  top: 20%;                    /* Top third of the page */
  left: 50%;                   /* Center horizontally */
  transform: translateX(-50%); /* Center alignment */
  z-index: 2000;               /* Above all page elements */
  display: none;               /* Hidden until fade-in */
  max-width: 500px;
  width: 90%;                  /* Mobile-friendly width */
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.floating-alert h4 { margin-bottom: 10px; }
.floating-alert .btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* =======================================================
   7) Layout Helpers (as provided)
   ======================================================= */
#page-container.page-header-fixed #main-container {
  padding-top: var(--header-offset, 0px) !important; /* fallback 0 if JS fails */
}

/* Game card sizing */
.game-card { 
  height: 100%;
  min-height: 320px;           /* base for mobile/tablet */
  display: flex;
  flex-direction: column;
}
@media (min-width: 1200px) {   /* xl and up */
  .game-card { min-height: 360px; }
}

/* Keep the dark overlay area a steady height */
.overlay-info {
  min-height: 110px;           /* adjust to taste */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Clamp long lead text to 2 lines */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Center horizontal nav, reduce shift */
@media (min-width: 992px) {
  #main-nav .nav-main.nav-main-horizontal {
    display: flex;
    justify-content: center !important;
    flex-wrap: wrap;
  }
  #main-nav .nav-main .nav-main-item { margin: 0 .25rem; }
}

/* Stop scrollbar-induced width shifts — no extra side gutters */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; } /* fallback */
}

/* Reserve border space to avoid link jiggle */
.nav-main .nav-main-item .nav-main-link {
  box-sizing: border-box;
  padding: .5rem .75rem;
  border-bottom: 2px solid transparent; /* reserve space */
}
.nav-main .nav-main-item.active > .nav-main-link,
.nav-main .nav-main-item.open > .nav-main-link {
  border-bottom-color: currentColor; /* shows underline without reflow */
}
/* Reserve left/right borders too */
.nav-main .nav-main-item .nav-main-link {
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
}
.nav-main .nav-main-item.active > .nav-main-link {
  border-left-color: currentColor;
  border-right-color: currentColor;
}

/* Keep nav height stable */
#main-nav { min-height: 48px; } /* adjust to your nav height */

/* Prevent page shift when modal opens */
body.modal-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

/* Gray avatar box helper */
.avatar-box {
  background: #f1f3f5;              /* light gray */
  min-height: 180px;                 /* gives it some presence on mobile */
}
/* Always show the light gray box and center the avatar */
.avatar-box {
  background-color: #f1f3f5 !important; /* beat any bg- utilities */
  min-height: 180px;
  width: 100%;
  display: flex;                 /* ensure centering works everywhere */
  align-items: center;
  justify-content: center;
}
/* On md+ let it stretch full height of its grid cell */
@media (min-width: 768px) {
  .avatar-box { height: 100%; }
}

/* =======================================================
   8) Avatar Picker (as provided)
   ======================================================= */
#avatar-grid {
  max-height: 60vh;
  overflow: auto;
}
#avatar-grid .col {
  display: flex;
}
#avatar-grid .avatar-tile {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  border: 1px solid #dee2e6 !important;
  border-radius: .25rem;
  background-color: #f8f9fa;
  padding: .5rem;
}
#avatar-grid .avatar-tile.selected {
  background-color: #e0e0e0 !important;
  border-color: #666 !important;
}
#avatar-grid .avatar-tile img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
}
.avatar-preview-wrap {
  width: 84px;
  height: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}
.avatar-preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: transparent;
}

/* =======================================================
   9) NEW: Floating Alerts Container (for multiple alerts)
   -------------------------------------------------------
   Used by onboard.php JS (`#float-alerts`, `.alert-float`)
   Keeps your original `.floating-alert` intact above.
   ======================================================= */
#float-alerts {
  position: fixed;
  top: 1rem;
  right: 1rem;
  left: 1rem;                 /* mobile: full width with margins */
  z-index: 1080;              /* above modal backdrop */
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;       /* clicks pass through except alert bodies */
}
@media (min-width: 576px) {
  #float-alerts { left: auto; width: 420px; } /* desktop: fixed width */
}
.alert.alert-float {
  pointer-events: auto;       /* enable close button click */
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
  margin: 0;
}
/* ensure readable text on rust alerts */
.alert.bg-rust,
.bg-rust.alert { color: #fff; }

/* =======================================================
   10) NEW: Validation Helpers (inline fallback)
   -------------------------------------------------------
   If you ever show Bootstrap `.invalid-feedback`, this
   ensures it becomes visible once the form is validated.
   ======================================================= */
.needs-validation.was-validated .form-control:invalid ~ .invalid-feedback {
  display: block;
}
.invalid-feedback { font-size: 0.9rem; }

/* ===== Floating Alerts: centered + mobile-safe ===== */
#float-alerts {
  position: fixed;
  /* Respect safe areas (iOS notch) and keep a bit of space */
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 520px);      /* full-ish width on mobile, capped on desktop */
  z-index: 2147483647;          /* above everything, incl. fixed headers/modals */
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;         /* container lets clicks pass through */
  -webkit-transform: translateX(-50%) translateZ(0); /* iOS paint fix */
  transform: translateX(-50%) translateZ(0);
}

.alert.alert-float {
  pointer-events: auto;         /* allow close button click */
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Ensure rust alerts are readable */
.alert.bg-rust,
.bg-rust.alert { color: #fff; }

/* Optional: center text in the alert body */
.alert.alert-float .alert-body-center { text-align: center; }

/* ============================
   Fix: Game-night equal heights
   (hard-lock overlay band + pin footer)
   ============================ */

/* 1) Make every card truly equal-height */
.game-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* 2) Hard-lock the dark center band height (no growth on wrap) */
.block-content.overlay-info {
  height: 120px !important;    /* adjust 110–140px to taste */
  min-height: 120px !important;
  max-height: 120px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* 3) Clamp title/lead inside the band so overflow is hidden */
.block-content.overlay-info h4,
.block-content.overlay-info p {
  margin: 0 !important;
}

.block-content.overlay-info h4 {
  display: -webkit-box;
  -webkit-line-clamp: 1;       /* keep titles to 1 line */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.block-content.overlay-info p,
.block-content.overlay-info .clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;  /* keep leads to 2 lines */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 4) Keep the controls/footer stuck to the bottom of the card */
.game-card > .block-content:last-child {
  margin-top: auto !important;
}

/* 5) If your grid columns aren’t stretching, force the col to flex the card */
.row > [class*="col-"] > .game-card {
  height: 100% !important;
}

/* ============================
   Members grid: equal-height cards + aligned badges
   ============================ */

/* Card fills its grid column */
.member-card.block {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Fixed-height avatar band, centered image */
.member-avatar-fixed {
  height: 160px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Body is a column; badges stick to the bottom via margin-top:auto */
.member-body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 1px;
}

/* Text stack reserve (1 line username + 2 lines mantra) */
.member-text {
  min-height: 4.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .25rem !important;
}
@media (min-width: 1200px) {
  .member-text { min-height: 4.5rem !important; }
}

/* Username & mantra: clamp and prevent overflow */
.member-username {
  font-size: 1rem !important;
  line-height: 1.25rem !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.member-mantra {
  font-size: .875rem !important;
  line-height: 1.25rem !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Badges row: consistent height, centered content */
.member-badges {
  margin-top: auto !important;         /* push to bottom of card */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .5rem !important;
  flex-wrap: nowrap !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  overflow: hidden !important;
}
.member-badges .badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  line-height: 1 !important;
  padding: 0 .6rem !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  font-size: .875rem !important;
}

/* Equalize card heights within rows that opt-in via .equalize-row */
.equalize-row { align-items: stretch !important; }
.equalize-row > [class*="col-"] { display: flex !important; }
.equalize-row > [class*="col-"] > .member-card {
  flex: 1 1 auto !important;
  height: 100% !important;
}

/* ============================
   NAV: true vertical centering (OneUI)
   ============================ */

/* Lock the bar height and center the whole row */
#main-nav .nav-main.nav-main-horizontal {
  min-height: 48px;                 /* your chosen height */
  align-items: center !important;   /* center the ul within the bar */
  display: flex !important;
}

/* Make each item a flex container so its link can fill vertically */
#main-nav .nav-main.nav-main-horizontal .nav-main-item {
  display: flex !important;
  align-items: stretch !important;
}

/* The actual clickable link: fill the bar height and center contents */
#main-nav .nav-main.nav-main-horizontal .nav-main-item > .nav-main-link {
  display: flex !important;
  align-items: center !important;
  height: 48px !important;          /* match the bar */
  line-height: 1 !important;        /* avoid fake vertical centering */
  padding-top: 0 !important;         /* kill OneUI’s default padding */
  padding-bottom: 0 !important;
}

/* If you have icons + label, make that row centered too */
#main-nav .nav-main.nav-main-horizontal .nav-main-link .nav-main-link-icon,
#main-nav .nav-main.nav-main-horizontal .nav-main-link .nav-main-link-name {
  display: inline-flex !important;
  align-items: center !important;
}

/* Keep underline/border-space logic you added, but ensure its height doesn't push things */
#main-nav .nav-main.nav-main-horizontal .nav-main-item > .nav-main-link {
  box-sizing: border-box !important;
  border-top: 2px solid transparent !important;
  border-bottom: 2px solid transparent !important;
}

/* Dropdown toggles (if used) should also center */
#main-nav .nav-main.nav-main-horizontal .nav-main-item > .nav-main-link.nav-main-link-submenu {
  display: flex !important;
  align-items: center !important;
}

/* ============================
   NAV: desktop vs mobile alignment
   ============================ */

/* Desktop (≥992px): keep vertical centering in the bar */
@media (min-width: 992px) {
  #main-nav .nav-main.nav-main-horizontal {
    min-height: 48px;
    display: flex !important;
    align-items: center !important;    /* center links vertically */
  }
  #main-nav .nav-main.nav-main-horizontal .nav-main-item {
    display: flex !important;
    align-items: stretch !important;
  }
  #main-nav .nav-main.nav-main-horizontal .nav-main-item > .nav-main-link {
    display: flex !important;
    align-items: center !important;
    height: 48px !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Mobile (<992px): left-justify stacked items */
@media (max-width: 991.98px) {
  /* Let the list and items stretch full width */
  #main-nav .nav-main {
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  #main-nav .nav-main .nav-main-item {
    align-items: stretch !important;
  }
  /* Left-align the link contents and allow natural height */
  #main-nav .nav-main .nav-main-item > .nav-main-link {
    display: flex !important;
    justify-content: flex-start !important; /* <-- left */
    align-items: center !important;
    text-align: left !important;
    height: auto !important;               /* stacked rows can grow */
    padding-top: .5rem !important;         /* restore comfy touch area */
    padding-bottom: .5rem !important;
  }
}

/* =======================================================
   MOBILE NAV: force true left alignment (catch all menus)
   ======================================================= */
@media (max-width: 991.98px) {
  /* Make the list left-aligned and full width */
  .nav-main {
    justify-content: flex-start !important;
    align-items: stretch !important;
    text-align: left !important;
  }

  /* Each item takes full row width */
  .nav-main .nav-main-item {
    display: block !important;
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* The actual links: left-justify content and span full width */
  .nav-main .nav-main-item > .nav-main-link {
    display: flex !important;
    justify-content: flex-start !important; /* left */
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
    height: auto !important;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    padding-left: 1rem !important; /* give it some left padding */
  }

  /* If icons/names exist, make sure they don't center themselves */
  .nav-main .nav-main-link .nav-main-link-icon,
  .nav-main .nav-main-link .nav-main-link-name {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* Nuke any centering utilities that might be on the markup */
  .nav-main,
  .nav-main * {
    text-align: left !important;
  }
}

/* ===== Edge-to-edge breakout for boxed layouts ===== */
/* Use on any full-bleed strip (headers, nav, hero bars, footers) */
.edge-to-edge {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
}

/* Avoid accidental rounding/shadows on full-bleed bars */
.edge-to-edge,
.edge-to-edge .block,
.edge-to-edge .content {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Body background should reach the edges as well */
html, body { background-color: var(--slate); }

/* In case a parent adds horizontal padding */
.edge-to-edge > .content,
.edge-to-edge > .container,
.edge-to-edge > .content-full {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 767.98px) {
  .slick-prev,
  .slick-next {
    display: none !important;
  }
}

.accordion-button.bg-dark-cyan:not(.collapsed) {
  background-color: var(--bs-dark-cyan, #006d6f);
  color: #fff;
}