/* =============================================================================
   shell.css – page chrome (header, nav, main, footer) containment for _Layout.cshtml
   Load after style.css and dbim-theme.css.  Keeps everything inside the page width.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }
iframe { max-width: 100%; }

/* Template wrappers: undo fixed widths, floats and offsets that push content outside the page */
body #content, body #page-content.wrapper, body .content-wrapper {
  width: auto; max-width: none; float: none; margin: 0; padding: 0;
}
body #main-content { display: block; min-height: 40vh; }

/* ----- Top bar ----- */
body .dbim-user-controls .wrap { min-width: 0; }
body .dbim-user-controls .wrap > * { min-width: 0; }
body #gigw-a11y-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 100%; }

/* ----- Brand bar: logo lock-up, co-brand logos, search ----- */
body .dbim-brand .wrap { min-width: 0; }
body .dbim-lockup { flex: 1 1 320px; min-width: 0; }
body .dbim-lockup img { flex: none; max-width: none; }
body .dbim-lockup .gov { font-size: 14px; }
body .dbim-lockup .org { font-size: clamp(16px, 1.6vw + 10px, 20px); overflow-wrap: anywhere; }
body .dbim-cobrand { flex: 0 0 auto; margin-left: 0; }
body .dbim-cobrand img { width: auto; max-width: 100%; }
body .itms-menu-search { flex: 1 1 240px; width: auto; max-width: 340px; min-width: 0; }
body .itms-menu-search-input { min-width: 0; }

/* ----- Main navigation: stays in flow (no overlap with the brand bar), sticks while scrolling ----- */
body #header.header-inner-pages {
  position: sticky; top: 0; z-index: 1000; width: 100%; left: auto; right: auto;
  height: auto; padding: 0; background: #162F6A;
}
body #header.header-inner-pages .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
body .nav-menu > ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
/* Dropdowns never run past the right edge of the window: the last two open leftwards */
body .nav-menu > ul > li.drop-down:nth-last-child(-n+3) > ul { left: auto; right: 0; }
body .nav-menu .drop-down ul { max-width: min(320px, 90vw); }
body .nav-menu .drop-down ul a { white-space: normal; overflow-wrap: anywhere; }

/* ----- Footer ----- */
body .gigw-footer .wrap { min-width: 0; }
body .gigw-footer .cols > * { min-width: 0; }
body .gigw-footer, body .gigw-footer a { overflow-wrap: anywhere; }
body .gigw-footer .meta > * { min-width: 0; flex: 1 1 280px; }

@media (max-width: 575.98px) {
  body .dbim-lockup img { height: 48px; width: auto; }
  body .dbim-cobrand img { height: 48px; }
  body .itms-menu-search { max-width: none; flex-basis: 100%; }
}

@media print {
  body #header.header-inner-pages, body .dbim-user-controls, body .itms-menu-search, body .back-to-top { display: none !important; }
}

/* =============================================================================
   Main menu – desktop bar  ↔  mobile hamburger (breakpoint 992px, same as Bootstrap "lg")
   The template's own cloned mobile nav is switched off so there is never a second menu.
   ========================================================================== */
body .mobile-nav, body .mobile-nav-toggle, body .mobile-nav-overly { display: none !important; }

body .nav-toggle {
  display: none;                                   /* desktop: hidden */
  align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; margin: 0;
  background: transparent; color: #fff; border: 0; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
body .nav-toggle i { font-size: 26px; line-height: 1; }
body .nav-toggle:focus-visible { outline: 3px solid #FFC107; outline-offset: -3px; }

@media (max-width: 991.98px) {
  body #header.header-inner-pages .container { flex-wrap: wrap; padding: 0; }
  body .nav-toggle { display: inline-flex; width: 100%; justify-content: flex-start; padding: 8px 16px; }

  /* Collapsed only when JS is available to reopen it (progressive enhancement) */
  html.js body .nav-menu { display: none; }
  html.js body .nav-menu.is-open { display: block; }
  body .nav-menu {
    width: 100%; max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain;
    background: #0F2050; border-top: 1px solid rgba(255,255,255,.25);
  }
  body .nav-menu > ul { display: block; }
  body .nav-menu li { display: block; width: 100%; border-bottom: 1px solid rgba(255,255,255,.15); }
  body .nav-menu a {
    display: flex; align-items: center; min-height: 48px; padding: 10px 16px; color: #fff; background: transparent;
    text-decoration: none; white-space: normal; overflow-wrap: anywhere;
  }
  body .nav-menu a:hover, body .nav-menu a:focus-visible { background: rgba(255,255,255,.12); }
  body .nav-menu a:focus-visible { outline: 3px solid #FFC107; outline-offset: -3px; }

  /* Sub-menus become an accordion: in flow, closed until the parent is opened */
  body .nav-menu .drop-down > a[aria-haspopup]::after { content: "+"; margin-left: auto; font-size: 20px; font-weight: 700; }
  body .nav-menu .drop-down > a[aria-expanded="true"]::after { content: "\2212"; }
  body .nav-menu .drop-down > ul,
  body .nav-menu .drop-down .drop-down > ul {
    position: static; display: none; opacity: 1; visibility: visible; width: 100%; max-width: none; min-width: 0;
    margin: 0; padding: 0; box-shadow: none; border: 0; background: rgba(0,0,0,.18); transform: none;
  }
  body .nav-menu .drop-down.drop-down-open > ul { display: block; }
  body .nav-menu .drop-down > ul a { padding-left: 32px; color: #fff; }
  body .nav-menu .drop-down .drop-down > ul a { padding-left: 48px; }
  body .nav-menu .drop-down > ul li:last-child { border-bottom: 0; }
}

@media (min-width: 992px) {
  body .nav-menu { display: block; }
}