/*
 * NSElite Club (nseliteclub.com) — shared design tokens + chrome.
 *
 * This is a plain, hand-written CSS file loaded via asset('css/nse.css'),
 * not a build artifact — see the Wave 0 frontend plan (Stage 1). It exists
 * to stop the same teal/seafoam palette from being copy-pasted into every
 * NSE view's own <style> block, and to give the shared footer markup one
 * place to live. The palette (`:root`) and the header chrome are in
 * css/nse-header.css, which every page loading this file also loads.
 *
 * Deliberately conservative: only rules that are byte-for-byte identical
 * (or safely mergeable) across every NSE view, and that carry no
 * responsive @media behaviour, live here. Page-specific layout, colour
 * variants that reuse a class name for a different visual treatment (e.g.
 * a "ghost" button styled differently on a dark hero vs. a light card),
 * and anything with a @media query stay in that page's own @section
 * ('styles') block — centralising those risks one page's responsive
 * behaviour silently leaking into another's.
 */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.7;
}

/* ── SHARED FOOTER CHROME ──
 * Only rendered by pages that override the layout's (empty by default)
 * footer section with real content — currently nse/home.blade.php.
 */
footer {
  background: #071A1A;
  color: rgba(255, 255, 255, 0.5);
}

.footer-top {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding: 4rem 2rem 3rem;
}

.footer-brand .nav-wordmark span:first-child {
  color: var(--seafoam);
}

.footer-brand .nav-wordmark span:last-child {
  color: rgba(255, 255, 255, 0.3);
}

.footer-brand p {
  font-size: 13px;
  margin-top: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.4);
}

.footer-col h4 {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--seafoam);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-col a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
}

.footer-col a:hover {
  color: var(--seafoam);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.4rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}