/* Global vertical spacing tweaks.
   Goal: reduce whitespace above/below primary content across the site.
   Exceptions: roster + strategic plan keep the roomier, "full screen-ish" feel. */

:root {
  --rhq-page-header-padding-y: 5.25rem;
  --rhq-page-header-content-padding-top: 2.25rem;
  /* Match theme SCSS $footer-max-height — footer must not expand past this. */
  --rhq-footer-max-height: 9rem;
}

body[data-path^="/roster"],
body[data-path^="/schedule/strategic"] {
  --rhq-page-header-padding-y: 8rem;
  --rhq-page-header-content-padding-top: 0rem;
}

/* Tighten the background header area across most pages */
.rhq-page-header.page-header {
  padding-top: var(--rhq-page-header-padding-y) !important;
  padding-bottom: var(--rhq-page-header-padding-y) !important;
}

/* The layout previously added extra padding via pt-10; keep this neutral. */
.rhq-page-header-content {
  padding-top: var(--rhq-page-header-content-padding-top) !important;
}

/* Current events multi-region: width set inline from longest option label (+ch for padding/chevron) */
.rhq-summary-scope-region-select {
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Sticky layout: footer height is capped; any extra viewport height goes into
   the page-header (gradient) band, not the footer. Navbar is fixed-top so it
   does not consume flex space — the header is the main in-flow child of main.
   --------------------------------------------------------------------------- */
#layoutDefault #layoutDefault_content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

#layoutDefault #layoutDefault_content > main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Extra viewport height flexes into the header (min-height stays content-based so nothing clips). */
#layoutDefault #layoutDefault_content main > header.page-header {
  flex: 1 1 auto;
}

#layoutDefault #layoutDefault_footer {
  flex-shrink: 0;
  max-height: var(--rhq-footer-max-height);
  min-height: 0;
  overflow: hidden;
  max-width: 100%;
}

#layoutDefault #layoutDefault_footer .footer {
  max-height: var(--rhq-footer-max-height);
  overflow: hidden;
  box-sizing: border-box;
}

/* Main nav: more horizontal room than default .container (1320px cap); still bounded on ultra-wide. */
.navbar.navbar-marketing > .rhq-navbar-inner {
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

/* Collapsed (hamburger) nav — same max width as navbar-expand-xl.
   Theme (styles.css) only forces a solid bar below lg (991.98px), so 992–1199px
   stayed transparent: light nav links sat on the page card / gradient and looked
   “behind” content. Match solid bar + stacking to the full burger range. */
@media (max-width: 1199.98px) {
  .navbar-marketing.bg-transparent.navbar-dark {
    background-color: #1f2d41 !important;
  }

  .navbar-marketing.bg-transparent.navbar-light {
    background-color: #eff3f9 !important;
  }

  /* Below: z-index for marketing nav is unified above (all breakpoints). */

  .navbar.navbar-marketing > .rhq-navbar-inner .navbar-collapse {
    align-items: flex-end;
  }

  .navbar.navbar-marketing > .rhq-navbar-inner .navbar-collapse .navbar-nav {
    align-items: flex-end;
    width: 100%;
  }

  .navbar.navbar-marketing > .rhq-navbar-inner .navbar-collapse .nav-link {
    text-align: right;
  }
}

/* ---------------------------------------------------------------------------
   DataTables deployment / roster-style lists
   Add `rhq-datatable-list` on the table; add `rhq-datatable-list-action` on
   blue `btn text-blue` cells (buttons or anchor-as-button).

   Rows inherit the table’s own font sizing (typically `font-size: 90%` on the
   element); action controls use `inherit` so they match plain cells rather than
   Bootstrap’s default `.btn` size or stacked `smaller` keywords.

   --------------------------------------------------------------------------- */

table.rhq-datatable-list.table tbody td .rhq-datatable-list-action.btn.text-blue {
  font-size: inherit;
}

table.rhq-datatable-list.table tbody td a.rhq-datatable-list-action.btn.text-blue {
  text-decoration: none;
}

table.rhq-datatable-list.table tbody td a.rhq-datatable-list-action.btn.text-blue:hover,
table.rhq-datatable-list.table tbody td a.rhq-datatable-list-action.btn.text-blue:focus-visible {
  text-decoration: underline;
}

/* Role preview floating control — above typical sticky layers, below modals (1050+). */
.rhq-role-preview-widget-host {
  z-index: 1041;
}

/*
 * AOS leaves `transform: translateZ(0)` on .aos-animate elements after the entry animation.
 * A non-`none` transform makes that element a containing block for position:fixed descendants
 * AND a new stacking context — which traps any nested Bootstrap modal below the body-level
 * modal-backdrop, so the modal renders dimmed and unclickable. translateZ(0) and none are
 * visually identical at rest, so dropping the terminal transform restores normal modal
 * stacking without affecting the entry animation.
 */
[data-aos].aos-animate {
  transform: none !important;
}

/* Fixed marketing nav stacking (consistent above page content); collapsed breakpoint also sets colours. */
.navbar.navbar-marketing.fixed-top {
  z-index: 1040;
}

/* SweetAlert2 above fixed navbar (`1040`), widget host (`1041`), and Bootstrap modals (~`1055`). */
.swal2-container {
  z-index: 2080 !important;
}

/*
 * Persistent role-preview banner: match nav bar tone. The navbar is transparent on xl+ —
 * without this, Bootstrap `alert-info` reads as pale blue *through* the fixed nav behind the links.
 */
.rhq-role-preview-banner {
  margin-bottom: 0;
  /* Bootstrap 5.3 alert backgrounds use CSS variables — set vars and explicit BG. */
  --bs-alert-bg: #1f2d41;
  --bs-alert-color: #e9ecef;
  --bs-alert-border-color: transparent;
  border: none !important;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  background-color: #1f2d41 !important;
  background-image: none;
  color: #f8f9fa !important;
  font-size: 1rem;
  line-height: 1.5;
}

/*
 * Role preview: fixed nav uses solid fill so transparent corners don’t show the page
 * behind; banner strip is full-bleed (no px/pt gap revealing body background).
 */
body.rhq-role-preview-active .navbar.navbar-marketing.fixed-top.bg-transparent.navbar-dark {
  background-color: #1f2d41 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Full-width second row inside flex navbar (banner partial is sibling of .rhq-navbar-inner). */
.navbar.navbar-marketing.fixed-top > .rhq-role-preview-banner-host {
  flex-basis: 100%;
}

/* Match main nav inner width so preview copy + Exit align with the nav link column. */
.navbar.navbar-marketing.fixed-top > .rhq-role-preview-banner-host .rhq-role-preview-banner {
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/*
 * Role preview headline placement: under the logo below 2200px viewport width;
 * headline moves into the alert banner at 2200px+ (navbar stays expand-xl at 1200px).
 */
.rhq-navbar-brand-stack {
  min-width: 0;
}

.rhq-role-preview-banner-headline-slot {
  display: none !important;
}

.rhq-role-preview-under-brand {
  width: 100%;
  max-width: 160px;
}

@media (min-width: 2200px) {
  .rhq-role-preview-under-brand {
    display: none !important;
  }

  .rhq-role-preview-banner-headline-slot {
    display: block !important;
  }
}

.rhq-role-preview-under-brand .rhq-role-preview-banner-headline {
  font-size: 0.9375rem;
  line-height: 1.35;
}

@media (min-width: 576px) {
  .rhq-role-preview-under-brand .rhq-role-preview-banner-headline {
    font-size: 1rem;
  }
}

.rhq-role-preview-banner-headline {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
}

.rhq-role-preview-banner-role {
  font-weight: 700;
  color: #fff;
}

/* Slightly larger tap target; softer than `btn-sm` on dense headers. */
.rhq-role-preview-banner-exit {
  font-weight: 600;
  padding: 0.5rem 1rem;
}

@media (min-width: 768px) {
  .rhq-role-preview-banner-headline {
    font-size: 1.125rem;
  }
}

/* Desktop (xl+): compact preview strip beside nav links — do not inherit large banner headline sizing. */
.rhq-role-preview-navbar-inline-headline.rhq-role-preview-banner-headline {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  line-height: 1.2;
}

.rhq-role-preview-navbar-inline .rhq-role-preview-banner-exit {
  padding: 0.35rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
}