/*
 * Marketingsitets navigation.
 * ────────────────────────────────────────────────────────────────────────────
 * Own file, and a deliberate one. Three constraints shaped it:
 *
 * 1. CASCADE. Propshaft's `stylesheet_link_tag :app` includes every sheet in
 *    app/assets/stylesheets alphabetically, so the order is
 *        … marketing.css → marketing_nav.css → motion.css → navbar.css →
 *          notarium.css → tailwind.css
 *    This file therefore loses every equal-specificity fight with
 *    notarium.css. The answer is not `!important` — it is to stop borrowing
 *    the classes we need to change. The desktop bar uses .mk-nav-desktop, not
 *    .nt-nav-links, because .nt-nav-links drags .nt-nav-hideable along, and
 *    .nt-nav-hideable is the bug: it hid Stiftelse, Begivenheder, Priser, Om
 *    *and the primary CTA* below 800px with nothing in their place. Where a
 *    notarium.css component genuinely fits unchanged (.nt-nav, .nt-cta-btn,
 *    .nt-menu, .nt-mark-lockup, .nt-panel-close) we use it as-is.
 *
 * 2. ONE BREAKPOINT. 52rem, written once, in one @media block that swaps the
 *    whole navigation over: the desktop row out, the burger and the panel in.
 *    Two queries with a gap between them is how a viewport ends up with
 *    neither. The JS does NOT repeat the number — marketing_nav_controller
 *    asks whether the burger is rendered, which is the same question.
 *
 * 3. THE PANEL IS NEVER A HIDDEN TAB STOP. A menu that is only translated off
 *    screen still takes focus and is still read aloud; the people that trap
 *    hurts most are exactly the ones the panel exists for. It is `visibility:
 *    hidden` when closed (and display:none above the breakpoint), which
 *    removes it from both the tab order and the accessibility tree while
 *    still allowing the slide to animate.
 *
 * Prefix: .mk-nav-  — note that marketing.css owns a bare, unused `.mk-nav`
 * from an earlier header; class selectors match whole tokens, so `.mk-nav a`
 * cannot reach anything here.
 */

/* ══════════════════════════════════════════════════════════════════════
   1. THE DESKTOP ROW
   ══════════════════════════════════════════════════════════════════════ */

.mk-nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.mk-nav-desktop {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.9rem;
}

/* Shared by the links and by the Begivenheder trigger, which is a <button>:
   the reset is what keeps the two indistinguishable in the row. */
.mk-nav-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--nt-ink-soft);
  font-family: var(--nt-font-body);
  font-size: inherit;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--nt-motion-fast) var(--nt-ease-out);
}

.mk-nav-link:hover { color: var(--nt-ink); }

.mk-nav-link[aria-current="page"],
.mk-nav-link.is-active {
  color: var(--nt-ink);
  font-weight: 600;
}

/* The .nt-underline sweep is a hover affordance; on the page you are already
   on it stays drawn, in seal rather than ink, so the bar says where you are
   without a second mechanism. */
.mk-nav-link[aria-current="page"].nt-underline::after {
  transform: scaleX(1);
  background: var(--nt-seal);
}

/* ── Begivenheder: a menu, not a link ──────────────────────────────────── */

.mk-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.mk-nav-chevron {
  transition: transform var(--nt-motion-fast) var(--nt-ease-out);
}

.mk-nav-trigger[aria-expanded="true"] .mk-nav-chevron { transform: rotate(180deg); }

/* .nt-menu's 12rem is sized for "Indstillinger"; "Ordinær generalforsamling"
   is twice that. Doubled specificity because notarium.css loads after us. */
.nt-menu.mk-nav-menu {
  min-width: 15.5rem;
  padding: 0.35rem;
}

.nt-menu.mk-nav-menu .nt-menu-item {
  padding: 0.5rem 0.65rem;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   2. THE BURGER
   ══════════════════════════════════════════════════════════════════════
   Three bars that do NOT morph into an X. The scrim (z = overlay) covers the
   sticky bar (z = 50), so the burger is behind a dimmed sheet the moment the
   panel opens — animating a state nobody can see. The panel's own close
   button lands in almost the same place on screen and does that job. */

.mk-nav-burger {
  display: none; /* → inline-flex inside the breakpoint block below */
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  /* Pulls the optical edge of the icon out to the gutter; the button's own
     touch target stays 42px. */
  margin-right: -0.55rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--nt-radius);
  background: transparent;
  color: var(--nt-ink);
  cursor: pointer;
  transition:
    background-color var(--nt-motion-fast) var(--nt-ease-out),
    border-color var(--nt-motion-fast) var(--nt-ease-out);
}

.mk-nav-burger:hover {
  background: var(--nt-surface);
  border-color: var(--nt-hairline);
}

.mk-nav-burger-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.mk-nav-burger-bars > span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.mk-nav-burger-bars > span:nth-child(1) { top: 0; }
.mk-nav-burger-bars > span:nth-child(2) { top: 6px; }
.mk-nav-burger-bars > span:nth-child(3) { top: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   3. THE PANEL
   ══════════════════════════════════════════════════════════════════════
   One state class on <html> drives scrim, panel and page lock together, so
   the controller has exactly one thing to toggle and the three can never
   disagree. */

html.mk-nav-open { overflow: hidden; }

.mk-nav-scrim {
  display: none; /* → block inside the breakpoint block below */
  position: fixed;
  inset: 0;
  z-index: var(--nt-z-overlay);
  background: var(--nt-scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  /* The visibility flip waits out the fade on the way closed and happens
     immediately on the way open — otherwise the scrim is either unclickable
     for its first frame or still swallowing clicks after it is invisible. */
  transition:
    opacity var(--nt-motion-base) var(--nt-ease-out),
    visibility 0s linear var(--nt-motion-base);
}

html.mk-nav-open .mk-nav-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--nt-motion-base) var(--nt-ease-out);
}

.mk-nav-panel {
  display: none; /* → flex inside the breakpoint block below */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--nt-z-overlay) + 1);
  width: min(21rem, 88vw);
  flex-direction: column;
  background: var(--nt-paper);
  border-left: 1px solid var(--nt-hairline);
  box-shadow: var(--nt-shadow-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--nt-motion-slow) var(--nt-ease-out),
    visibility 0s linear var(--nt-motion-slow);
}

html.mk-nav-open .mk-nav-panel {
  transform: none;
  visibility: visible;
  transition: transform var(--nt-motion-slow) var(--nt-ease-out);
}

.mk-nav-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem 0.9rem 1.25rem;
  border-bottom: 1px solid var(--nt-hairline);
}

.mk-nav-panel-head .nt-mark-name { font-size: 1.12rem; }

.mk-nav-panel-body {
  flex: 1;
  padding: 0.65rem 0.6rem 1rem;
}

.mk-nav-panel-link {
  display: block;
  padding: 0.72rem 0.85rem;
  border-radius: var(--nt-radius);
  color: var(--nt-ink-soft);
  font-family: var(--nt-font-body);
  font-size: 1rem;
  font-weight: 550;
  text-decoration: none;
  transition:
    background-color var(--nt-motion-fast) var(--nt-ease-out),
    color var(--nt-motion-fast) var(--nt-ease-out);
}

.mk-nav-panel-link:hover {
  background: var(--nt-surface);
  color: var(--nt-ink);
}

.mk-nav-panel-link.is-active {
  background: var(--nt-seal-soft);
  color: var(--nt-seal-text);
  box-shadow: inset 3px 0 0 var(--nt-seal);
}

/* The five event landings are one rung down from the four top-level pages —
   same list, lighter voice. */
.mk-nav-panel-link-quiet {
  font-size: 0.94rem;
  font-weight: 450;
}

.mk-nav-panel-section {
  padding: 1.15rem 0.85rem 0.3rem;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nt-ink-faint);
}

.mk-nav-panel-foot {
  display: grid;
  gap: 0.6rem;
  /* safe-area: on a notched phone in portrait the home indicator sits over the
     last 34px, which is exactly where the primary CTA would otherwise land. */
  padding: 0.9rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--nt-hairline);
}

.mk-nav-panel-cta { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   4. THE SWAP
   ══════════════════════════════════════════════════════════════════════
   52rem ≈ 832px. The old bar broke at 800px with six items; the Begivenheder
   chevron and a heavier "Gå til Notarium" need the extra breathing room.
   Written once — every rule that depends on the breakpoint lives here. */

@media (max-width: 52rem) {
  .mk-nav-desktop { display: none; }
  .mk-nav-burger { display: inline-flex; }
  .mk-nav-scrim { display: block; }
  .mk-nav-panel { display: flex; }
}

/* Nothing here is load-bearing motion: the panel arrives, it does not explain
   anything by arriving. Reduced motion gets the end state instantly. */
@media (prefers-reduced-motion: reduce) {
  .mk-nav-scrim,
  html.mk-nav-open .mk-nav-scrim,
  .mk-nav-panel,
  html.mk-nav-open .mk-nav-panel,
  .mk-nav-chevron {
    transition: none;
  }
}