:root{
  --brand:#0ea5e9;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#f8fafc;
  --ring:#e2e8f0;
}

/* Smooth scroll for anchor links */
html { scroll-behavior: smooth; }

/* Ensure site background stays light */
html, body {
  background: #f8fafc !important;  /* same family as your cards */
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

html {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

body{
  margin:0;
  background:#f8fafc !important;  /* override any CSS variable that might be dark */
  color:var(--ink);
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:24px;
}

.site-header{
  background:#fff;
  border-bottom:1px solid #e2e8f0;
  position:fixed;
  top:26px;
  left:0;
  right:0;
  z-index:60;
  width:100%;
  margin:0;
  padding:0;
}

main#content{
  padding-bottom:24px;
  padding-top:90px; /* Space for topstrip (~26px) + navbar (~64px) */
  flex: 1 0 auto;
}

h1,h2,h3{
  line-height:1.2;
}

a{
  color:inherit;
}

.topstrip{
  position:sticky;
  top:0;
  z-index:70;
  background:#0b1220;
  color:#cbd5e1;
  border-bottom:1px solid #1e293b;
}

.topstrip-inner{
  padding:6px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.topstrip-text{
  font-size:.82rem;
  color:#cbd5e1;
  opacity:.85;
  flex:1;
}

.topstrip-link{
  font-size:.82rem;
  color:#cbd5e1;
  text-decoration:none;
  opacity:.85;
  white-space:nowrap;
}

.topstrip-link:hover{
  opacity:1;
  text-decoration:underline;
}

@media (max-width:768px){
  .topstrip-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:8px 24px;
  }
  .topstrip-text{
    font-size:.75rem;
  }
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  font-weight:800;
  font-size:1.8rem;
  color:var(--brand);
  text-decoration:none;
}

.nav-links{
  display:flex;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-links a{
  text-decoration:none;
  color:var(--ink);
  transition:color .2s ease;
}

.nav-links a:hover{
  color:var(--brand);
}

/* ===== HAMBURGER TOGGLE ===== */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:36px;
  height:22px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
}

.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
  transform-origin:center;
}

/* ===== MOBILE SLIDE-DOWN MENU ===== */
.nav-mobile-menu{
  display:none;
  background:#fff;
  border-top:1px solid var(--ring);
  overflow:hidden;
  max-height:0;
  transition:max-height .3s ease;
}

.nav-mobile-menu ul{
  list-style:none;
  margin:0;
  padding:6px 0 10px;
}

.nav-mobile-menu li a{
  display:block;
  padding:14px 24px;
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid #f1f5f9;
  transition:background .15s, color .15s;
}

.nav-mobile-menu li:last-child a{
  border-bottom:none;
}

.nav-mobile-menu li a:hover,
.nav-mobile-menu li a:active{
  background:#f0f9ff;
  color:var(--brand);
}

.lede{
  color:var(--muted);
}

.wysiwyg p{
  margin:0 0 12px;
}

.disclosure-callout{
  background:#fff8e1;
  border:1px solid #facc15;
  padding:12px;
  border-radius:8px;
}

hr.section-divider{
  border:0; height:1px; background:#e5e7eb; margin:16px 0 18px 0;
}

/* ===== MOBILE OVERRIDES ===== */
@media (max-width: 720px){
  /* Topstrip: compact single-line on mobile — just show the link */
  .topstrip{
    position:relative;
  }

  .topstrip-inner{
    flex-direction:row;
    align-items:center;
    padding:6px 18px;
  }

  /* Hide verbose text on mobile — disclosure link stays visible */
  .topstrip-text{
    display:none;
  }

  /* Nav sticks to very top on mobile (topstrip already scrolled past) */
  .site-header{
    top:0;
    position:sticky;
  }

  /* Less vertical padding on mobile nav to keep it compact */
  .site-header .container.nav{
    padding-top:12px;
    padding-bottom:12px;
    padding-left:18px;
    padding-right:18px;
  }

  /* No extra padding needed — sticky nav stays in document flow */
  main#content{
    padding-top:8px;
  }

  .container{ padding: 18px; }

  /* Show hamburger, hide desktop nav links */
  .nav-toggle{
    display:flex;
  }

  .nav-links{
    display:none;
  }

  /* Mobile menu is visible (starts collapsed via max-height:0) */
  .nav-mobile-menu{
    display:block;
  }

  /* Open state — expand menu */
  .site-header.nav-open .nav-mobile-menu{
    max-height:220px;
  }

  /* Hamburger → X animation */
  .site-header.nav-open .nav-toggle span:nth-child(1){
    transform:translateY(10px) rotate(45deg);
  }
  .site-header.nav-open .nav-toggle span:nth-child(2){
    opacity:0;
    transform:scaleX(0);
  }
  .site-header.nav-open .nav-toggle span:nth-child(3){
    transform:translateY(-10px) rotate(-45deg);
  }
}