/* =============================================================
   LAYOUT — Header, Ticker, Footer, shared structural chrome
   ============================================================= */

/* ---- Site Header ---- */
.site-header {
  position:       fixed;
  inset-block-start: 0;
  inset-inline:   0;
  z-index:        200;
  background:     rgba(9,9,15,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom:  1px solid var(--clr-border);
}

.header-bar {
  height:      var(--header-h);
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         var(--sp-8);
  padding-inline: var(--px);
  max-width:   var(--max-w);
  margin-inline: auto;
}

/* Logo */
.site-logo {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  font-family: var(--ff-display);
  font-size:   1.5rem;
  letter-spacing: .03em;
  color:       var(--clr-text);
  transition:  color var(--t-fast);
  flex-shrink: 0;
}
.site-logo:hover { color: var(--clr-accent); }

.logo-hex {
  color:       var(--clr-accent);
  font-size:   1.25rem;
  line-height: 1;
}
.logo-em { color: var(--clr-accent); font-style: normal; }

/* Primary navigation */
.primary-nav {
  display:     flex;
  align-items: center;
  gap:         var(--sp-1);
}

.nav-item {
  position:    relative;
  padding:     .5rem 1rem;
  font-size:   var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color:       var(--clr-text-muted);
  border-radius: var(--radius);
  transition:  color var(--t-fast);
}
.nav-item::after {
  content:    '';
  position:   absolute;
  bottom:     4px; left: 1rem; right: 1rem;
  height:     2px;
  background: var(--clr-accent);
  transform:  scaleX(0);
  transition: transform var(--t-base);
}
.nav-item:hover          { color: var(--clr-text); }
.nav-item.is-active      { color: var(--clr-text); }
.nav-item.is-active::after,
.nav-item:hover::after   { transform: scaleX(1); }

/* Hamburger (mobile) */
.nav-toggle {
  display:        none;
  flex-direction: column;
  justify-content: center;
  gap:            5px;
  width:          36px;
  height:         36px;
  padding:        4px;
  background:     none;
  border:         1px solid var(--clr-border);
  border-radius:  var(--radius-sm);
  cursor:         pointer;
  transition:     border-color var(--t-fast);
}
.nav-toggle span {
  display:    block;
  height:     2px;
  background: var(--clr-text);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast), width var(--t-base);
}
.nav-toggle:hover { border-color: var(--clr-accent); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer (mobile nav) */
.nav-drawer {
  display:        none;   /* shown as flex when .is-open */
  flex-direction: column;
  background:     var(--clr-bg-raised);
  border-bottom:  1px solid var(--clr-border);
  padding:        var(--sp-4) var(--px) var(--sp-6);
  gap:            var(--sp-1);
}
.nav-drawer.is-open { display: flex; }

.nav-drawer .nav-item {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
  border-radius: 0;
}
.nav-drawer .nav-item:last-child { border-bottom: none; }

/* ---- News Ticker ---- */
.news-ticker {
  height:     var(--ticker-h);
  background: var(--clr-accent);
  display:    flex;
  align-items:center;
  overflow:   hidden;
}

.ticker-label {
  flex-shrink: 0;
  padding:     0 var(--sp-4);
  height:      100%;
  display:     flex;
  align-items: center;
  background:  rgba(0,0,0,.18);
  font-family: var(--ff-display);
  font-size:   var(--fs-xs);
  letter-spacing: .2em;
  color:       var(--clr-bg);
}

.ticker-track {
  display:    flex;
  gap:        0;
  white-space:nowrap;
  animation:  ticker-scroll 40s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }

.ticker-track span {
  font-size:   var(--fs-sm);
  font-weight: var(--fw-bold);
  color:       var(--clr-bg);
  padding-right: var(--sp-16);
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Site Footer ---- */
.site-footer {
  background:    var(--clr-bg-raised);
  border-top:    1px solid var(--clr-border);
  margin-top:    auto;
}

.footer-body {
  display:    grid;
  grid-template-columns: 1fr auto;
  gap:        var(--sp-16);
  padding:    var(--sp-16) var(--px);
  max-width:  var(--max-w);
  margin-inline: auto;
}

.footer-brand {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-4);
  max-width:      300px;
}
.footer-brand p { font-size: var(--fs-sm); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 10rem);
  gap: var(--sp-12);
}

.footer-col {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
}
.footer-col h4 {
  font-size:      var(--fs-sm);
  font-weight:    var(--fw-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
  color:          var(--clr-text);
  margin-bottom:  var(--sp-2);
}
.footer-col a {
  font-size:  var(--fs-sm);
  color:      var(--clr-text-muted);
  transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--clr-accent); }

.footer-bottom {
  border-top:    1px solid var(--clr-border);
  padding:       var(--sp-5) var(--px);
  max-width:     var(--max-w);
  margin-inline: auto;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  flex-wrap:     wrap;
  gap:           var(--sp-4);
  font-size:     var(--fs-sm);
  color:         var(--clr-text-muted);
}

/* ---- Responsive overrides ---- */
@media (max-width: 900px) {
  .primary-nav { display: none; }
  .nav-toggle  { display: flex; }

  .footer-body { grid-template-columns: 1fr; gap: var(--sp-10); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
  .footer-brand { max-width: 100%; }
}

@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr; }
}