/* ==========================================================
   nav.css — Ocean Liner Curator
   Unified Stage System: one source of truth for page width
   ========================================================== */

/* =========================
   GLOBAL SAFETY
   ========================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }

/* ==========================================================
   OLC UNIFIED STAGE SYSTEM
   - Controls all “content column” widths site-wide
   - Header, hero, containers all align to the same stage
   ========================================================== */

:root{
  /* Stage width (default) */
  --olc-stage: min(780px, calc(100% - 1.5rem));

  /* Stage width (large screens) */
  --olc-stage-desktop: min(1080px, calc(100% - 3rem));

  /* When to widen (matches your older per-page pattern) */
  --olc-stage-break: 1300px;

  /* Shared horizontal padding for inner content */
  --olc-pad-x: 2.75rem;
  --olc-pad-x-mobile: 1.25rem;

  /* Global rounding */
  --olc-radius: 16px;
  --olc-radius-mobile: 14px;

  /* Prose measure (one knob) */
  --olc-measure: 72ch;

  /* Brass + panel tokens used in nav UI */
  --olc-accent: #bfa46a;
  --olc-accent-rgba-22: rgba(191,164,106,0.22);
  --olc-accent-rgba-24: rgba(191,164,106,0.24);
  --olc-accent-rgba-28: rgba(191,164,106,0.28);
  --olc-accent-rgba-35: rgba(191,164,106,0.35);
  --olc-accent-rgba-65: rgba(191,164,106,0.65);
  --olc-link: rgba(209,187,134,0.95);

  --olc-panel: rgba(15,27,25,0.96);
  --olc-header: rgba(15,27,25,0.55);
  --olc-text-hi: rgba(255,255,255,0.96);
}

/* Widen stage on large screens */
@media (min-width:1300px){
  :root{ --olc-stage: var(--olc-stage-desktop); }
}

/* Mobile tighten */
@media (max-width:520px){
  :root{
    --olc-pad-x: var(--olc-pad-x-mobile);
    --olc-radius: var(--olc-radius-mobile);
  }
}

/* Apply stage sizing to key alignment points */
.header-inner,
.container,
.hero,
.paths,
.page-container{
  width: var(--olc-stage) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Align header padding to main plates */
.header-inner{
  padding-left: var(--olc-pad-x) !important;
  padding-right: var(--olc-pad-x) !important;
}

/* Radius alignment */
.container,
.hero{
  border-radius: var(--olc-radius) !important;
}

/* Hero inner should fill hero */
.hero-inner{ width: 100% !important; }

/* Optional prose helper (if you use it on pages) */
.prose{
  max-width: var(--olc-measure);
  margin-left: auto;
  margin-right: auto;
}

/* =========================
   TOP MENU BAR
   ========================= */

.site-header{
  width: 100%;
  margin: 0;
  padding: 0.75rem 0;
  background: var(--olc-header);
  border-bottom: 1px solid var(--olc-accent-rgba-22);
  position: relative;
  z-index: 5000;

  /* Make header span full width even inside flex layouts */
  align-self: stretch;
  display: block;
}

/* Injected header container span full width */
#site-header{
  width: 100%;
  align-self: stretch;
}

/* Header inner container (stage-aligned via unified stage above) */
.header-inner{
  margin: 0 auto;
}

/* =========================
   NAV ROW
   ========================= */

.site-nav{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  font-size: 0.95rem;
  min-width: 0; /* iOS/Safari flex weirdness guard */
}

/* =========================
   TOP-LEVEL LINKS + SUMMARIES
   ========================= */

.nav-link{
  color: var(--olc-link);
  text-decoration: none;
  border-bottom: 1px solid var(--olc-accent-rgba-35);
  padding-bottom: 2px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.nav-link:hover{
  border-bottom-color: var(--olc-accent-rgba-65);
}

/* Keyboard focus */
.nav-link:focus-visible,
.nav-dropdown > summary:focus-visible,
.dropdown-link:focus-visible{
  outline: 2px solid var(--olc-accent-rgba-65);
  outline-offset: 3px;
  border-radius: 10px;
}

/* =========================
   DROPDOWNS (details/summary)
   ========================= */

.nav-dropdown{ position: relative; }

/* Make <summary> behave like the rest of nav */
.nav-dropdown > summary{
  cursor: pointer;
  list-style: none;
  display: inline-block;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-dropdown > summary::-webkit-details-marker{ display: none; }

/* Dropdown panel: hidden by default, shown when open */
.dropdown-panel{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;

  min-width: 320px;
  max-width: 420px;

  padding: 10px;
  z-index: 6000;

  background: var(--olc-panel);
  border: 1px solid var(--olc-accent-rgba-24);
  border-radius: 14px;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.02) inset;

  /* closed state */
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transform-origin: top left;
}

.nav-dropdown[open] > .dropdown-panel{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Hover-open for desktop pointer devices */
@media (hover:hover) and (pointer:fine){
  .nav-dropdown:hover > .dropdown-panel{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Animation */
@media (prefers-reduced-motion: no-preference){
  .dropdown-panel{
    transition: opacity 140ms ease, transform 140ms ease;
  }
}

/* Dropdown links */
.dropdown-link{
  display: block;
  padding: 8px 0;
  margin: 0 10px;

  color: var(--olc-link);
  text-decoration: none;

  border-bottom: 1px solid var(--olc-accent-rgba-28);
}

.dropdown-link:last-of-type{ border-bottom: none; }

.dropdown-link:hover,
.dropdown-link:focus-visible{
  border-bottom-color: var(--olc-accent-rgba-65);
  color: var(--olc-text-hi);
}

/* Mobile safety */
@media (max-width:520px){
  .dropdown-panel{
    min-width: 260px;
    max-width: calc(100vw - 24px);
  }
}

/* =========================
   SITE MARK (OceanLiners.net)
   ========================= */

.site-mark{
  margin-left: auto;
  font-family: "Libre Baskerville", Baskerville, serif;
  font-variant: small-caps;
  letter-spacing: 2px;
  font-size: 0.9rem;
  color: #e6dfcf;
  opacity: 0.9;
  text-shadow: 0 0 4px rgba(191,164,106,0.15);
  white-space: nowrap;
  flex-shrink: 0;
}

.site-star{
  font-size: 0.9rem;
  color: var(--olc-accent);
  opacity: 0.85;
  text-shadow: 0 0 3px rgba(191,164,106,0.25);
  display: inline-block;
  transform: translateY(-0.75px);
  margin-right: 8px;
}

/* =========================
   RESPONSIVE REFINEMENTS
   ========================= */

@media (max-width:900px){
  .site-mark{
    font-size: 0.82rem;
    letter-spacing: 1.5px;
  }
}

@media (max-width:520px){
  .site-header{ padding: 0.65rem 0; }

  /* Hide the text only (keep the star) */
  .site-mark{
    font-size: 0;
    letter-spacing: 0;
  }

  .site-star{
    font-size: 0.9rem;
    margin-right: 0;
  }
}

/* =========================
   SMALL SCREEN DROPDOWN FIX
   ========================= */

@media (max-width:520px){
  .nav-dropdown{
    position: static; /* prevent awkward absolute anchoring */
  }

  .dropdown-panel{
    position: absolute;
    left: 0;
    right: auto;

    min-width: unset;
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);

    margin-left: 0;
    max-height: 70vh;
    overflow-y: auto;

    padding: 10px 14px;
  }
}

/* =========================
   SUMMARY MARKER FIXES
   ========================= */

/* iPad Safari sometimes shows a tiny fallback marker for <summary> */
details > summary{
  list-style: none !important;
  display: inline-block;
}

details > summary::-webkit-details-marker{ display: none !important; }
details > summary::marker{ content: "" !important; }

summary{
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

summary:focus-visible{
  outline: 2px solid rgba(191,164,106,0.6);
  outline-offset: 3px;
}

summary:focus:not(:focus-visible){ outline: none; }

details{ display: block; }

details > summary{
  list-style: none !important;
  display: inline-block !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

details > summary::-webkit-details-marker{
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* If header injection hasn’t happened yet */
#site-header:empty{
  background: none;
  border-bottom: none;
}

a.button.secondary{
      background: linear-gradient(
        180deg,
        rgba(191,164,106,0.10) 0%,
        rgba(10,17,16,0.16) 55%,
        rgba(0,0,0,0.15) 100%
      ) !important;
      color:var(--link) !important;
      border:1px solid rgba(191,164,106,0.45);
      box-shadow:none;
    }
    
.button.secondary{
      background: linear-gradient(
        180deg,
        rgba(191,164,106,0.10) 0%,
        rgba(10,17,16,0.16) 55%,
        rgba(0,0,0,0.15) 100%
      ) !important;
      opacity: 1 !important;
      color:var(--link) !important;
      border:1px solid rgba(191,164,106,0.45);
      padding:0.9rem 1.35rem;
      border-radius:10px;
      text-decoration:none;
      transition: transform 0.15s ease, background 0.15s ease;
    }
    
.standards-badge a{
      display:inline-block;
      padding:0.3rem 0.7rem;
      font-size:0.9rem;
      letter-spacing:0.12em;
      text-transform:uppercase;
      color:var(--link) !important;
      border:1px solid rgba(191,164,106,0.45);
      border-radius:999px;
      text-decoration:none;
      background:rgba(191,164,106,0.05);
    }
    
    .secondary-nav a{
      background: linear-gradient(
        180deg,
        rgba(191,164,106,0.10) 0%,
        rgba(10,17,16,0.16) 55%,
        rgba(0,0,0,0.15) 100%
      ) !important;
    }
    
.scope h2::after{
  content:"";
  display:block;
  width:72px;
  height:1px;
  margin-top:0.45rem;
  background:linear-gradient(
    90deg,
    var(--accent),
    rgba(191,164,106,0.35),
    transparent
  );
}

h2::after{
      content:"";
      display:block;
      width:72px;
      height:1px;
      margin-top:0.45rem;
      background:linear-gradient(90deg, var(--accent), rgba(191,164,106,0.35), transparent);
    }
    
h1 {
      font-family: "Libre Baskerville", serif;
      font-variant: small-caps;
      letter-spacing: 0.08em;
      font-weight: 400;
    }
    
/* Global editorial column heading alignment */
.container h2{
  margin:2.25rem auto 0.7rem auto;
  max-width:var(--measure);
  text-align:left;
}