/* ==========================================================================
   Athena Peptides Education — navigation

   One header, six items, on every page:

       Home | Peptides ▾ | Dosing | Calculator | Safety | Free Guide

   The site has four hand-written nav variants (`.nav-links`, `.nav-right`,
   `.nk`, `.apx-navrow`), each with its own idea of padding, gaps and hover
   treatment. tools/build-nav.mjs tags all four with `.apx-navlist` and writes
   the same six links into each, and this sheet then styles that one hook — so
   the header looks and behaves identically everywhere instead of four ways.
   Loading last is what lets it win over the per-page rules.

   Existing brand values reused here:
     deep navy   #0C1927      navy card   #152A42
     teal        #2CB5D6      orange      #F58232
     snow        #EEF2F7      snow 60%    rgba(238,242,247,.6)
     teal glow   rgba(44,181,214,.15)

   Light content palette (from athena-light.css), used by the parts of this
   sheet that sit in the page rather than in the chrome:
     ink #12263F   ink-2 #40566F   wash #F2F7FC   line #D9E4F0
     teal ink #0F7490   orange ink #B4530C

   THE DRAWER BREAKPOINT IS 1079px. athena-nav.js repeats that number; the two
   have to agree, or the tap-to-open dropdowns and the bar disagree about which
   one is on screen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The row of links
   -------------------------------------------------------------------------- */
.apx-navlist {
  display: flex;
  align-items: center;
  gap: .15rem;
}

/* `:visited` is spelled out because two of the four variants set a visited
   colour at a specificity this would otherwise lose to. */
.apx-navlist > a,
.apx-navlist > a:visited,
.apx-navlist .apx-dd > a,
.apx-navlist .apx-dd > a:visited {
  font-size: .82rem;
  font-weight: 500;
  padding: .5rem .85rem;
  border-radius: 6px;
  color: rgba(238, 242, 247, .6);
  background: transparent;
  transition: color .2s, background .2s;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

.apx-navlist > a:hover,
.apx-navlist > a:focus-visible,
.apx-navlist .apx-dd > a:hover,
.apx-navlist .apx-dd > a:focus-visible {
  color: #EEF2F7;
  background: rgba(44, 181, 214, .08);
}

.apx-navlist > a.active,
.apx-navlist > a.active:visited,
.apx-navlist .apx-dd > a.active,
.apx-navlist .apx-dd > a.active:visited {
  color: #EEF2F7;
  background: rgba(44, 181, 214, .1);
}

/* The Free Guide button. One rule instead of the three different CTA classes
   the pages used to carry. */
.apx-navlist > a.apx-cta,
.apx-navlist > a.apx-cta:visited {
  background: #F58232;
  color: #0C1927;
  font-weight: 600;
  margin-left: .5rem;
}

.apx-navlist > a.apx-cta:hover,
.apx-navlist > a.apx-cta:focus-visible {
  background: #E0741F;
  color: #0C1927;
}

/* The wordmark stays on one line. */
.nav-logo,
.nl {
  white-space: nowrap;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   2. The Peptides dropdown

   The only menu in the header. Its caret is the cue that it opens rather than
   navigates; every other item is a plain link and gets no caret.
   -------------------------------------------------------------------------- */
.apx-dd {
  position: relative;
}

.apx-dd-peptides > a::after {
  content: '▾';
  font-size: .7em;
  margin-left: .35rem;
  transition: transform .2s;
}

.apx-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #152A42;
  border: 1px solid rgba(44, 181, 214, .15);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  z-index: 100;
}

/* Hover keeps working with the script blocked; `.open` is what the script
   drives on touch, where hover sticks. */
.apx-dd:hover > .apx-dd-menu,
.apx-dd.open > .apx-dd-menu,
.apx-dd:focus-within > .apx-dd-menu {
  display: flex;
}

.apx-pep-menu {
  flex-direction: column;
  width: 19rem;
  padding: .5rem;
  max-height: calc(100vh - 5rem);
}

/* The list area. A backstop only: each group's own list is capped below, so
   this scrolls just on viewports too short for even that. The "browse all" row
   above it is outside this box, so it stays put. */
.apx-pep-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(44, 181, 214, .35) transparent;
}

.apx-pep-scroll::-webkit-scrollbar {
  width: 8px;
}

.apx-pep-scroll::-webkit-scrollbar-thumb {
  background: rgba(44, 181, 214, .3);
  border-radius: 4px;
}

.apx-pep-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* "Browse All Peptides A–Z", pinned above the list. */
.apx-dd-lead,
.apx-dd-lead:visited {
  display: block;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #F58232;
  text-decoration: none;
  padding: .35rem .65rem .55rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid rgba(44, 181, 214, .12);
  transition: color .2s;
}

.apx-dd-lead:hover,
.apx-dd-lead:focus-visible {
  color: #2CB5D6;
  background: transparent;
}

/* --- the three groups -------------------------------------------------- */

/* Each heading sits above its own list. On a viewport too short for even the
   capped lists the whole panel scrolls instead, and these pin to the top of it
   so it stays clear which of the three you are reading. */
.apx-pep-head,
.apx-pep-head:visited {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  background: #152A42;
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(238, 242, 247, .75);
  text-decoration: none;
  padding: .5rem .65rem;
  border-bottom: 1px solid rgba(44, 181, 214, .12);
  transition: color .2s;
}

.apx-pep-head:hover,
.apx-pep-head:focus-visible {
  color: #2CB5D6;
}

.apx-pep-count {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: rgba(238, 242, 247, .35);
  background: rgba(44, 181, 214, .1);
  border-radius: 100px;
  padding: .1rem .45rem;
}

/* One continuous alphabetical column, however long it gets. Never split into
   columns: a single top-to-bottom A–Z is what people expect to scan, and it
   is the same shape the mobile accordion uses, so there is one behaviour to
   learn instead of two.

   Each group scrolls inside its own box rather than the panel scrolling as a
   whole, so all three headings — Single Peptides, Blends, Stacks — are visible
   the moment the panel opens. Only the A–Z is long enough for the cap to bite;
   a reader after Blends does not have to scroll past 28 names to find it. */
.apx-pep-list {
  display: flex;
  flex-direction: column;
  max-height: 20rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(44, 181, 214, .35) transparent;
  /* Closes the box, so a name clipped by the cap reads as "there is more
     below" rather than as a rendering fault. */
  border-bottom: 1px solid rgba(44, 181, 214, .12);
  padding: .25rem 0 .6rem;
}

.apx-pep-list::-webkit-scrollbar {
  width: 8px;
}

.apx-pep-list::-webkit-scrollbar-thumb {
  background: rgba(44, 181, 214, .3);
  border-radius: 4px;
}

.apx-pep-list::-webkit-scrollbar-track {
  background: transparent;
}

.apx-pep-list a,
.apx-pep-list a:visited {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  padding: .4rem .65rem;
  border-radius: 6px;
  color: rgba(238, 242, 247, .6);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, background .2s;
}

.apx-pep-list a:hover,
.apx-pep-list a:focus-visible {
  background: rgba(44, 181, 214, .15);
  color: #2CB5D6;
}

/* Placeholder shown while a group has no pages yet. */
.apx-dd-empty {
  font-size: .74rem;
  line-height: 1.5;
  color: rgba(238, 242, 247, .3);
  padding: .35rem .65rem .5rem;
}

/* --------------------------------------------------------------------------
   3. Phones, tablets and small laptops: the drawer

   Below 1080px the bar becomes a hamburger drawer. Inside it the Peptides item
   expands to the three group names, and each of those expands to its own
   vertical list — two taps to any compound, no horizontal scrolling, and the
   same A–Z order as the desktop panel.
   -------------------------------------------------------------------------- */
@media (max-width: 1079px) {
  /* Two of the four variants carry `display:flex` inline, which only
     `!important` can reach. */
  .apx-navlist {
    display: none !important;
  }

  .apx-navlist.open {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: .25rem !important;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #152A42;
    padding: 1rem;
    border-bottom: 1px solid rgba(44, 181, 214, .1);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .apx-navlist > a,
  .apx-navlist > a:visited,
  .apx-navlist .apx-dd > a,
  .apx-navlist .apx-dd > a:visited {
    width: 100%;
    justify-content: space-between;
    padding: .7rem .85rem;
    font-size: .9rem;
  }

  .apx-navlist > a.apx-cta {
    margin: .35rem 0 0;
    justify-content: center;
  }

  /* A few pages carry wide dosing and comparison tables that overflow
     horizontally on a phone, and a fixed bar stretched by left:0/right:0 grows
     with them — taking the menu button off the right edge of the screen.
     Capping the bar at the viewport keeps it on screen. A cap rather than a
     width, so on a window with a classic scrollbar the bar still measures
     itself against its container and cannot overhang by the scrollbar. */
  .nav {
    max-width: 100vw;
  }

  .nav-inner,
  .ni {
    max-width: 100%;
  }

  .apx-dd {
    width: 100%;
  }

  /* Touch devices keep hover states stuck on, so the panel is driven purely
     by the `.open` class the script toggles. */
  .apx-dd:hover > .apx-dd-menu,
  .apx-dd:focus-within > .apx-dd-menu {
    display: none;
  }

  .apx-dd.open > .apx-dd-menu {
    display: flex;
  }

  .apx-dd.open > a::after {
    transform: rotate(180deg);
  }

  .apx-dd-menu {
    position: static;
    transform: none;
    box-shadow: none;
    background: rgba(12, 25, 39, .45);
    border-color: rgba(44, 181, 214, .1);
    margin: .2rem 0 .4rem;
  }

  /* The drawer itself is what scrolls, so the panel releases its own height
     cap and the list area stops being a scroll container. */
  .apx-pep-menu {
    width: auto;
    max-height: none;
    padding: .35rem;
  }

  .apx-pep-scroll {
    overflow: visible;
    max-height: none;
  }

  /* Collapsed by default: the first tap on Peptides shows three rows, not
     thirty. `.apx-pep-group.open` is what the script sets. */
  .apx-pep-group .apx-pep-list {
    display: none;
  }

  .apx-pep-group.open .apx-pep-list {
    display: flex;
    max-height: none;
    overflow: visible;
    border-bottom: none;
  }

  .apx-pep-head,
  .apx-pep-head:visited {
    position: static;
    background: transparent;
    font-size: .74rem;
    padding: .7rem .65rem;
    color: rgba(238, 242, 247, .8);
  }

  /* Plain ASCII: the fullwidth forms are not in DM Sans and fall back to a
     missing-glyph box. */
  .apx-pep-head::after {
    content: '+';
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1.15em;
    font-weight: 500;
    line-height: 1;
    color: rgba(238, 242, 247, .45);
    margin-left: auto;
    padding-left: .5rem;
  }

  .apx-pep-group.open > .apx-pep-head::after {
    content: '–';
  }

  .apx-pep-count {
    margin-left: auto;
  }

  .apx-pep-list a,
  .apx-pep-list a:visited {
    white-space: normal;
    font-size: .85rem;
    padding: .55rem .9rem;
  }

  .apx-dd-lead,
  .apx-dd-lead:visited {
    padding: .5rem .65rem .6rem;
  }
}

/* --- narrow phones -----------------------------------------------------
   The wordmark and the menu button share one 64px row, and the wordmark is 25
   monospaced characters wide. At full size it needs more room than a 360px
   screen has, and because it must stay on one line it cannot give any back —
   so it pushed the button past the right edge, where it could not be tapped.
   Stepping the type down and trimming the bar's side padding brings the button
   back on screen. The wording and the colours are unchanged. */
@media (max-width: 430px) {
  .nav-inner,
  .ni {
    padding: 0 1.15rem;
  }

  .nav-logo,
  .nl {
    font-size: .72rem;
    letter-spacing: .1em;
  }
}

@media (max-width: 360px) {
  .nav-inner,
  .ni {
    padding: 0 .9rem;
  }

  .nav-logo,
  .nl {
    font-size: .64rem;
  }
}

/* --- the menu button ---------------------------------------------------
   Every nav uses the same button. Pages that shipped their own inline-onclick
   one keep it, having gained the `apx-ham` hook. */
.apx-ham {
  display: none;
  background: none;
  border: none;
  color: #EEF2F7;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

@media (max-width: 1079px) {
  .apx-ham {
    display: block;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }
}

/* --------------------------------------------------------------------------
   4. On-page navigation for compound profiles

   A jump menu written below each profile's title by tools/build-page-nav.mjs.
   It sits in the light content area, so it uses the light palette. It wraps
   rather than scrolling sideways, and drops its label on narrow screens so the
   five destinations keep as much room as possible.
   -------------------------------------------------------------------------- */
.apx-pagenav {
  background: #F2F7FC;
  border-top: 1px solid #D9E4F0;
  border-bottom: 1px solid #D9E4F0;
}

.apx-pagenav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .7rem 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}

.apx-pagenav-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #40566F;
  margin-right: .5rem;
}

.apx-pagenav a,
.apx-pagenav a:visited {
  display: inline-block;
  background: #FFFFFF;
  border: 1px solid #D9E4F0;
  border-radius: 100px;
  padding: .4rem .9rem;
  font-size: .8rem;
  font-weight: 500;
  color: #12263F;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}

.apx-pagenav a:hover,
.apx-pagenav a:focus-visible {
  border-color: #F58232;
  color: #B4530C;
  background: #FFFFFF;
}

/* Room for the fixed 64px bar, so a jump does not land with the heading
   tucked underneath it. */
#overview,
#dosage,
#research,
#research-timeline,
#safety,
#references,
#contraindications {
  scroll-margin-top: 5.5rem;
}

@media (max-width: 700px) {
  .apx-pagenav-inner {
    padding: .6rem 1.1rem;
    gap: .35rem;
  }

  .apx-pagenav-label {
    display: none;
  }

  .apx-pagenav a,
  .apx-pagenav a:visited {
    font-size: .82rem;
    padding: .45rem .8rem;
  }
}

/* --------------------------------------------------------------------------
   5. Category hub pages

   These sit in the light content area, so they use the light palette rather
   than the dark card treatment the chrome above uses.
   -------------------------------------------------------------------------- */
.apx-hub-empty {
  background: #F5F9FD;
  border: 1px dashed rgba(15, 116, 144, .35);
  border-radius: 14px;
  padding: 3rem 2rem;
  text-align: center;
  margin-top: 1rem;
}

.apx-hub-empty h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: .6rem;
  color: #12263F;
}

.apx-hub-empty p {
  color: #40566F;
  font-size: .88rem;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

.apx-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .5rem;
  margin-top: 1rem;
}

.apx-index a {
  display: block;
  background: #FFFFFF;
  border: 1px solid #D9E4F0;
  border-left: 3px solid rgba(15, 116, 144, .4);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  font-size: .88rem;
  font-weight: 500;
  color: #12263F;
  transition: all .25s;
}

.apx-index a:hover {
  border-color: #F58232;
  border-left-color: #F58232;
  color: #B4530C;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(18, 38, 63, .09);
}

.apx-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.5rem;
}

/* The pages that used to hold their own header tab. They lost the tab, not
   the link. */
.apx-more {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #D9E4F0;
}

.apx-more h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: #40566F;
  margin-bottom: .9rem;
}

.apx-more-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.apx-more-links a,
.apx-more-links a:visited {
  font-size: .82rem;
  font-weight: 500;
  color: #0F7490;
  text-decoration: none;
  border: 1px solid #D9E4F0;
  border-radius: 100px;
  padding: .4rem .9rem;
  transition: border-color .2s, color .2s;
}

.apx-more-links a:hover,
.apx-more-links a:focus-visible {
  border-color: #F58232;
  color: #B4530C;
}