/*
  TRAILASAUR — Dino News Shared Theme
  ------------------------------------
  Global tokens, nav, hamburger menu, and shared utilities.
  All sections import this file. Section-specific overrides go in ./styles.css.
*/

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg-main:       #11130E;
  --bg-card:       #1A1C15;
  --bg-card-hover: #22251D;

  --accentMain:      #379392;
  --accentGold:      #D8B67F;
  --accentOrange:    #FF5722;

  --textWhite: rgba(255, 255, 255, 0.90);
  --textMuted: rgba(255, 255, 255, 0.55);

  --borderDim:       rgba(255, 255, 255, 0.08);
  --borderHighlight: #379392;
}

html, body {
  background-color: var(--bg-main);
  color: var(--textWhite);
  margin: 0;
  transition: background-color 250ms ease, color 250ms ease;
}

.site-nav,
.site-nav__links,
.navlink,
.site-nav__burger span {
  transition:
    background-color 250ms ease,
    border-color 250ms ease,
    color 250ms ease;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container-max {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.accent-bar {
  width: 40px;
  height: 4px;
  background: var(--accentMain);
  margin-bottom: 8px;
}

/* ── Construction banner ────────────────────────────────────────────────── */
@keyframes pulse-border {
  0%, 100% { border-color: rgba(55, 147, 146, 0.6); }
  50%       { border-color: rgba(55, 147, 146, 0.1); }
}
.construction-banner { animation: pulse-border 2s infinite; }

/* ── Shared nav ─────────────────────────────────────────────────────────── */
/*
  Usage — paste this block into every section index.html + detail.html,
  changing only the navlink--active class to match the current section:

  <nav class="site-nav">
    <div class="site-nav__inner container-max">
      <a href="../../index.html" class="site-nav__logo">TRAILASAUR</a>

      <button class="site-nav__burger" aria-label="Toggle menu" aria-expanded="false">
        <span></span><span></span><span></span>
      </button>

      <div class="site-nav__links">
        <a href="../home/index.html"          class="navlink">Dino News</a>
        <a href="../discoveries/index.html"   class="navlink">Discoveries</a>
        <a href="../breakthroughs/index.html" class="navlink">Breakthroughs</a>
        <a href="../museums/index.html"       class="navlink">Museums</a>
        <a href="../media/index.html"         class="navlink">Media</a>
        <a href="../dinopedia/index.html"     class="navlink">Dinopedia</a>
      </div>
    </div>
  </nav>
*/
/* ── REPLACE the entire mobile nav section in theme.css with this ── */

/* Force the nav to be the positioning parent for the dropdown */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-main);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borderDim);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  position: relative; /* ← required for dropdown positioning */
}

.site-nav__logo {
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--textWhite);
  text-decoration: none;
  flex-shrink: 0;
  z-index: 101;
}
.site-nav__logo:hover { opacity: 0.85; }

/* ── Desktop links ───────────────────────────────────────────────── */
.site-nav__links {
  display: flex;
  gap: 24px;
  align-items: center;
}

.navlink {
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--textMuted);
  text-decoration: none;
  transition: color 140ms ease;
  white-space: nowrap;
}
.navlink:hover   { color: var(--textWhite); }
.navlink--active { color: var(--textWhite); }

/* ── Hamburger button ────────────────────────────────────────────── */
.site-nav__burger {
  display: none; /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;
  border: 1px solid var(--borderDim);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 101;
}
.site-nav__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--textWhite);
  border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease;
}
.site-nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.site-nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Show the burger, hide the links by default */
  .site-nav__burger {
    display: flex !important;
  }

  .site-nav__links {
    display: none !important; /* hidden until .is-open */
    position: absolute;
    top: 56px;     /* flush below the 56px nav bar */
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--borderDim);
    padding: 8px 0;
    z-index: 100;
    /* Subtle slide-in */
    animation: none;
  }

  .site-nav__links.is-open {
    display: flex !important; /* override the display:none above */
  }

  .navlink {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border-bottom: 1px solid var(--borderDim);
    font-size: 12px;
    white-space: normal;
  }

  .navlink:last-child {
    border-bottom: none;
  }
}

/* ── Shared utilities ───────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.hidden { display: none !important; }
/* ── In-app nav logo swap ─────────────────────────────────────────── */

/* Hidden by default on desktop and mobile browser */
.site-nav__logo-app {
  display: none;
}

@media (max-width: 768px) {
  html.is-app .site-nav__logo-app {
    display: inline;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,0.92);
    text-decoration: none;
  }

  /* Hide the original logo link in-app on mobile */
  html.is-app .site-nav__logo {
    display: none;
  }

  /* Inert version — no tap behavior */
  html.is-app .site-nav__logo-app--inert {
    pointer-events: none;
    cursor: default;
  }
}