/* Load the brand wordmark font for every page (some pages never linked it,
   which left the header wordmark rendering in a fallback font). CSP already
   allows fonts.googleapis.com + fonts.gstatic.com globally. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.ace-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
}

.ace-mobile-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

.ace-mobile-toggle__icon {
  font-size: 1.35rem;
  line-height: 1;
}

.ace-simple-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ace-simple-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .nav-container,
  .site-header-inner,
  .ace-simple-nav {
    position: relative;
  }

  .ace-mobile-toggle,
  .menu-toggle {
    display: inline-flex !important;
  }

  .nav-container[data-ace-mobile-ready="1"] > .nav-links,
  .site-header-inner[data-ace-mobile-ready="1"] > .site-nav,
  .ace-simple-nav[data-ace-mobile-ready="1"] > .ace-simple-nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0.85rem 1rem;
    margin: 0;
    background: rgba(10, 14, 39, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    z-index: 1001;
  }

  .nav-container[data-ace-mobile-ready="1"] > .nav-links.active,
  .nav-container[data-ace-mobile-ready="1"] > .nav-links.ace-mobile-open,
  .site-header-inner[data-ace-mobile-ready="1"] > .site-nav.ace-mobile-open,
  .ace-simple-nav[data-ace-mobile-ready="1"] > .ace-simple-nav-links.ace-mobile-open {
    display: flex !important;
  }

  .nav-container[data-ace-mobile-ready="1"] > .nav-links li {
    list-style: none;
    margin: 0;
  }

  .nav-container[data-ace-mobile-ready="1"] > .nav-links li + li,
  .site-header-inner[data-ace-mobile-ready="1"] > .site-nav a + a,
  .ace-simple-nav[data-ace-mobile-ready="1"] > .ace-simple-nav-links a + a {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .nav-container[data-ace-mobile-ready="1"] > .nav-links a,
  .site-header-inner[data-ace-mobile-ready="1"] > .site-nav a,
  .ace-simple-nav[data-ace-mobile-ready="1"] > .ace-simple-nav-links a {
    display: block;
    width: 100%;
    padding: 0.8rem 0 !important;
    margin: 0 !important;
  }
}

@media (min-width: 981px) {
  .ace-mobile-toggle {
    display: none !important;
  }
}

/* ===================================================================== */
/* Canonical site header - single source of truth for ALL pages.         */
/* Defined here (not per-page) so the nav can never drift again.          */
/* Uses literal colors because some pages do not define CSS variables.   */
/* ===================================================================== */
.afb-header {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  background: #1a1f3a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 18px;
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  z-index: 1000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: #fff;
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}
.afb-header * {
  box-sizing: border-box;
}
.afb-header a,
.afb-header a:link,
.afb-header a:visited {
  margin: 0;
  text-decoration: none;
}
.afb-header__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
}
.afb-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  flex: 0 0 auto;
  padding: 0;
}
.afb-header__logo {
  /* The brand asset is a horizontal lockup (919x487, ~1.887:1) that already
     contains the words "NITRO FAT BURNERS". Height-constrained with auto width
     so it never distorts; no border-radius, which would clip the flame and
     lightning-bolt edges that run to the artwork bounds. */
  height: 40px;
  width: auto;
  display: block;
}
.afb-header__wordmark {
  /* The lockup renders the brand name itself, so showing this too printed
     "NITRO FAT BURNERS" twice in the header. Visually hidden rather than
     deleted so it stays available to assistive tech and to any markup that
     expects the node. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.afb-header__links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  margin: 0;
  padding: 0;
  text-align: left;
}
.afb-header__links a,
.afb-header__links a:link,
.afb-header__links a:visited {
  color: rgba(255, 255, 255, 0.78);
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
  padding: 0;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.afb-header__links a:hover,
.afb-header__links a:focus {
  color: #fff;
}
.afb-header__links a.active,
.afb-header__links a[aria-current="page"] {
  color: #fff;
}
.afb-header .ace-mobile-toggle {
  color: #fff;
}

@media (max-width: 980px) {
  .afb-header__inner {
    position: relative;
  }

  .afb-header__inner[data-ace-mobile-ready="1"] > .afb-header__links {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.85rem 1rem;
    margin: 0;
    background: rgba(10, 14, 39, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    z-index: 1001;
  }

  .afb-header__inner[data-ace-mobile-ready="1"] > .afb-header__links.ace-mobile-open {
    display: flex;
  }

  .afb-header__inner[data-ace-mobile-ready="1"] > .afb-header__links a {
    display: block;
    width: 100%;
    padding: 0.8rem 0;
  }

  .afb-header__inner[data-ace-mobile-ready="1"] > .afb-header__links a + a {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}