/* Crux V5 - Global site shell
 * Header, desktop nav + dropdown, mobile nav, footer, breadcrumb, announcement slot.
 * Reuses tokens + .btn + .container primitives (no primitive style duplication).
 * One responsive implementation. No user-agent redirect.
 */

/* ============ Announcement / status slot (CMP-005 deferred: inert by default) ============ */
.announce {
  background: var(--bg-surface);
  border-bottom: var(--border-1) solid var(--border);
  color: var(--text);
  font-size: var(--type-small);
}
.announce .container { padding-block: var(--space-2); display: flex; gap: var(--space-3); align-items: center; justify-content: center; }
.announce[hidden] { display: none; }

/* ============ Masthead ============ */
.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg-page) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-1) solid var(--border);
}
.masthead__inner {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  color: var(--text-strong);
  white-space: nowrap;
}
.brand__logo { height: 26px; width: auto; }
.brand .accent { color: var(--accent); }

/* ============ Desktop navigation ============ */
.mainnav { display: none; }
.mainnav__list { display: flex; align-items: center; gap: var(--space-5); }
.mainnav__link,
.menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--type-small);
  letter-spacing: 0.01em;
  color: var(--text-muted);
  padding: var(--space-2) 0;
  white-space: nowrap;
}
.mainnav__link:hover,
.menu__trigger:hover { color: var(--text-strong); }
.mainnav__link[aria-current="page"] { color: var(--text-strong); box-shadow: inset 0 -2px 0 var(--accent); }

/* Dropdown menu (CMP-004 simple dropdown) */
.menu { position: relative; }
.menu__trigger { cursor: pointer; }
.menu__caret { transition: transform var(--motion-fast) var(--ease-standard); }
.menu__trigger[aria-expanded="true"] .menu__caret { transform: rotate(180deg); }
.menu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 16rem;
  background: var(--bg-surface);
  border: var(--border-1) solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  padding: var(--space-2);
  z-index: var(--z-menu);
}
.menu__panel[hidden] { display: none; }
.menu__panel a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--type-small);
  color: var(--text-muted);
}
.menu__panel a:hover { background: var(--bg-raised); color: var(--text-strong); }

/* Nav CTA reuses .btn--primary; hidden on small screens (lives in mobile panel instead) */
.nav-cta { display: none; }

/* ============ Mobile nav toggle ============ */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-md);
  height: var(--control-md);
  border: var(--border-1) solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: '';
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after  { position: absolute; top: 6px; }

/* ============ Mobile navigation panel ============ */
.mobilenav { position: fixed; inset: 0; z-index: var(--z-overlay); }
.mobilenav[hidden] { display: none; }
.mobilenav__backdrop { position: absolute; inset: 0; background: var(--bg-overlay); }
.mobilenav__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(92vw, 26rem);
  background: var(--bg-page);
  border-left: var(--border-1) solid var(--border-strong);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  overflow-y: auto;
}
.mobilenav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.mobilenav__close {
  width: var(--control-md); height: var(--control-md);
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-1) solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-strong); font-size: 1.4rem; line-height: 1;
}
.mobilenav__list { display: flex; flex-direction: column; gap: var(--space-1); }
.mobilenav__link,
.mobilenav__group-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  min-height: var(--control-md);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--type-small);
  letter-spacing: 0.01em;
  color: var(--text);
  text-align: left;
}
.mobilenav__link:hover,
.mobilenav__group-trigger:hover { background: var(--bg-surface); color: var(--text-strong); }
.mobilenav__link[aria-current="page"] { color: var(--accent); }
.mobilenav__sublist { display: flex; flex-direction: column; padding-left: var(--space-3); }
.mobilenav__sublist[hidden] { display: none; }
.mobilenav__caret { transition: transform var(--motion-fast) var(--ease-standard); }
.mobilenav__group-trigger[aria-expanded="true"] .mobilenav__caret { transform: rotate(180deg); }
.mobilenav__cta { margin-top: var(--space-5); }

/* ============ Breadcrumb (CMP-006: Level-2 / editorial pages only) ============ */
.breadcrumb { padding-block: var(--space-3); border-bottom: var(--border-1) solid var(--border); }
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: 0.04em; }
.breadcrumb__list a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 0.15em; }
.breadcrumb__list a:hover { color: var(--text-strong); }
.breadcrumb__sep { color: var(--text-dim); }
.breadcrumb__current { color: var(--text); }

/* ============ Footer ============ */
.footer { border-top: var(--border-1) solid var(--border); padding-block: var(--space-8); }
.footer__cols {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
.footer__brand { grid-column: 1 / -1; }
.footer__contact { display: flex; flex-direction: column; gap: var(--space-1); font-style: normal; font-size: var(--type-small); color: var(--text-muted); }
.footer__contact a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.footer__contact a:hover { color: var(--text-strong); }
.footer__heading { font-family: var(--font-mono); font-size: var(--type-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); }
.footer__links { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__links a { font-size: var(--type-small); color: var(--text-muted); }
.footer__links a:hover { color: var(--text-strong); text-decoration: underline; text-underline-offset: 0.15em; }
.footer__legal { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--border-1) solid var(--border); font-size: var(--type-small); color: var(--text-muted); }

/* ============ Responsive: desktop >=1024px ============ */
@media (min-width: 64rem) {
  .mainnav { display: block; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
  .footer__legal { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: var(--space-6); }
  .footer__contact { flex-direction: row; gap: var(--space-4); }
  .footer__legal > p:first-of-type { text-align: right; }
  .footer__legal > p:last-of-type { grid-column: 1 / -1; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* Lock body scroll when mobile nav is open */
body.nav-open { overflow: hidden; }