/* nav.css */
/* jdtool.com */
/* July 20th, 2026 */

/* Skip link */

.skip-link {
  position: fixed;
  top: -100px;
  left: 0;
  z-index: 1000;
  background-color: var(--color-primary);
  color: var(--color-text-cta);
  padding: 12px 20px;
  font-weight: bold;
  text-decoration: none;
  transition: var(--transition-header-speed);
}

.skip-link:focus {
  top: 0;
}

/* Header */

header {
  position: fixed;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--color-footer-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.header-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-header-top) var(--content-edge-spacing) var(--padding-header-bottom);
  max-width: var(--max-page-width);
  height: var(--height-header);
  margin-left: auto;
  margin-right: auto;
}

.header-buttons-wrapper {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* TODO: Put a wrapper to limit how much the header content can move on large screens */

/* Navigation */

header nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

header nav a {
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  transition: var(--transition-header-speed);
}

/* Logo */

header .logo {
  height: var(--logo-height);
  transition: var(--transition-header-speed);
}

header .logo:hover {
  box-shadow: var(--glow-hover);
}

/* CTA Button */
header .cta-button {
  margin-left: 30px;
  margin-top: 0px;
  align-self: flex-start;
}

main {
  padding-top: calc(var(--padding-header-top) + var(--padding-header-bottom) + var(--height-header));
}

/* Mobile */

/* Not in the tab order at desktop sizes - the hamburger button it controls
   is display:none there too, so leaving it focusable would create a stray,
   invisible tab stop between the logo and the nav links. It's restored
   (visually hidden but still focusable/operable via keyboard - native
   checkbox Space-toggle) inside the mobile media query below, where the
   hamburger button actually becomes visible. Do not use the `hidden`
   attribute for the mobile state, that removes it from the tab order
   entirely regardless of screen size. */
.menu-toggle {
  display: none;
}

.menu-toggle:focus-visible + .hamburger-button {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.hamburger-button {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  border: none;
  height: 24px;
  width: 30px;
  padding: 0px;
  background-color: transparent;
  cursor: pointer;
}

.hamburger-line {
  height: 3px;
  width: 100%;
  border-radius: 2px;
  background-color: var(--color-text);
  transition: var(--transition-hamburger-speed);
}

/* The middle line fades out faster than the outer two finish rotating, so
   it's gone before the rotating lines cross through its position - if it
   fades at the same speed as the rotation, Safari's rendering can show it
   still fading out right as the other two lines sweep past that point,
   producing a brief ghosting/flicker at the crossing (X) point. */
.hamburger-line:nth-child(2) {
  transition: background-color var(--transition-hamburger-fade-speed);
}

.hamburger-button:hover .hamburger-line {
  background-color: var(--color-text-hover);
}

/* Animation when toggled */

/* Top Hamburger Line */
.menu-toggle:checked + .hamburger-button .hamburger-line:nth-child(1) {
  transform: translateY(10.5px) rotate(45deg);
  transform-origin: center;
}
/* Middle Hamburger Line */
/* background-color instead of opacity: WebKit can leave faint artifacts at
   this line's rounded corners when fading via opacity while the other two
   lines are simultaneously transforming. */
.menu-toggle:checked + .hamburger-button .hamburger-line:nth-child(2) {
  background-color: transparent;
}
/* Bottom Hamburger Line */
.menu-toggle:checked + .hamburger-button .hamburger-line:nth-child(3) {
  transform: translateY(-10.5px) rotate(-45deg);
  transform-origin: center;
}

/* TODO: Make variable */
@media (max-width: 46rem) { /* 620px */

  .menu-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hamburger-button {
    display: flex;
  }

  /* Stays in the DOM (not display:none) so height can be transitioned -
     display can't be animated. Collapsed via max-height:0 plus
     overflow:hidden, and visibility:hidden keeps its links out of the tab
     order while closed (overflow:hidden alone would still allow keyboard
     focus to land on them). visibility flips instantly on open but only
     after the close transition finishes, via the delay below.
     max-height (a fixed guess) is the universal fallback here, since
     animating to/from height:auto isn't supported everywhere yet. The
     @supports block below upgrades to the exact, always-correct
     height:auto version in browsers that do support it.
     Kept close to the real content height (currently 2 links, ~130px) on
     purpose, not padded out to a large round number: the rendered box is
     always min(animated max-height, actual content height), so any extra
     headroom beyond the real height becomes a stretch of the transition
     where nothing visibly moves. Open eats that dead stretch AFTER the
     content is already fully visible (looks fine), but close has to burn
     through it FIRST, before any visible collapse can start - the bigger
     the gap between this number and actual content height, the longer
     closing stalls before it appears to do anything. If more links get
     added, bump this to roughly (number of links * 65px) rather than
     jumping back to a large safety margin. */
  .header-buttons-wrapper {
    display: flex;
    align-items: start;
    justify-content: center;
    position: fixed;
    top: calc(var(--height-header) + var(--padding-header-bottom) + var(--padding-header-top));
    left: 0px;
    right: 0px;
    background-color: var(--color-footer-secondary);
    overflow: hidden;
    max-height: 0;
    visibility: hidden;
    transition: max-height var(--transition-header-speed) ease,
                visibility 0s linear var(--transition-header-speed);
  }

  /* Hamburger Menu Checkbox is Checked */

  .menu-toggle:checked ~ .header-buttons-wrapper {
    max-height: 220px;
    visibility: visible;
    transition: max-height var(--transition-header-speed) ease, visibility 0s;
  }

  /* Upgrade to animating the exact content height where supported, so this
     always matches however many links are actually in the list instead of
     the fixed max-height guess above. */
  @supports (interpolate-size: allow-keywords) {

    .header-buttons-wrapper {
      interpolate-size: allow-keywords;
      max-height: none;
      height: 0;
      transition: height var(--transition-header-speed) ease,
                  visibility 0s linear var(--transition-header-speed);
    }

    .menu-toggle:checked ~ .header-buttons-wrapper {
      max-height: none;
      height: auto;
      transition: height var(--transition-header-speed) ease, visibility 0s;
    }

  }

  /* Unconditional (not gated behind :checked) since .header-buttons-wrapper
     stays rendered while closed now - if this stayed :checked-only, the
     column layout would snap back to the desktop row layout the instant
     the box is unchecked, flashing a row for the whole closing transition. */
  .header-buttons-wrapper nav {
    width: 100%;
  }

  .header-buttons-wrapper nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: unset;
    justify-content: flex-end;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .header-buttons-wrapper nav li {
    width: 100%;
  }

  .header-buttons-wrapper nav a {
    display: block;
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
    border-bottom: 0.5px solid var(--color-text-hover);
  }

  .header-buttons-wrapper nav li:last-child a {
    border-bottom: none;
  }

  /* TODO: Set mobile nav a background-color on hover */

  header .cta-button {
    display: none;
  }

}