/* ==========================================================================
   FIXED TOP BAR AND HEADER
   Desktop: fixed positioning; Mobile: static.
   ========================================================================== */

/*
 * Set header height variables on :root so the first paint uses correct body
 * padding and the header does not jump when JS (numart_main.js) runs.
 * JS will override these with measured values on DOMContentLoaded/resize.
 */
:root {
  --top-bar-height: 22px;
  --header-height: 67px;
  --total-header-height: 89px;
}

/* Fixed Top Bar and Header - Desktop only */
@media (min-width: 769px) {
  .region-top-bar,
  section.region.region-top-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1001 !important;
    background: var(--nm-header-bg) !important;
  }

  /* Header fixed immediately below top bar (uses JS-set --top-bar-height or design token) */
  header[role="banner"] {
    position: fixed !important;
    top: 22px;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: var(--nm-header-bg) !important;
  }

  /* Lower header and top bar z-index when image gallery modal is open */
  body.image-gallery-modal-open header[role="banner"],
  body.image-gallery-modal-open .region-top-bar,
  body.image-gallery-modal-open section.region.region-top-bar {
    z-index: 1 !important;
  }

  /* Region header styles */
  .region-header,
  section.region.region-header {
    background: var(--nm-header-bg) !important;
    box-shadow: 0 2px 10px var(--nm-border-color-dark);
    border-bottom: 1px solid var(--nm-border-color);
  }

  /* Body padding: uses --total-header-height (set in :root above, then by JS) */
  body {
    padding-top: var(--total-header-height, 89px) !important;
  }
}


/* Mobile - Static positioning (not fixed) */
@media (max-width: 768px) {
  /* Top bar - NOT fixed on mobile, NO z-index */
  .region-top-bar,
  section.region.region-top-bar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    background: var(--nm-header-bg) !important;
  }

  /* Header - NOT fixed on mobile */
  header[role="banner"] {
    position: relative !important;
    top: auto !important;
  }
  
  .region-header,
  section.region.region-header {
    position: relative !important;
    background: var(--nm-header-bg) !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    border-bottom: 1px solid var(--nm-border-color);
  }

  /* No body padding needed since header is not fixed */
  body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}