/* ============ GLOBAL ============ */
:root { color-scheme: dark; }

body{
  font-family:"Segoe UI",sans-serif;
  background:#0f172a;
  color:#fceee3;
  text-align:center;
  margin:0;
  padding:2rem;
  /* room for fixed nav so it doesn't overlap the H1 */
  padding-top:84px;
}

h1,h2,h3,p{ font-family:'Cinzel',serif; color:#fceee3; }
h1,h2{ color:#f59e0b; }
h2{ margin-top:20px; }

.container{ max-width:1200px; margin:0 auto; padding:20px; }
section{ width:100%; max-width:960px; margin:0 auto; padding:2rem; }

/* ============ NAV WITH SCROLL & FLYOUT ============ */
#nav-bar{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:1rem;
  padding:10px 16px;
  background:#0f172a;
  color:#ecf0f1;
  border-radius:10px;
  border-bottom:2px solid #e74c3c;
  z-index:1000;
  transition:left .25s ease, transform .25s ease,
             background-color .2s ease, box-shadow .2s ease;
}

.nav-buttons{ 
  display:flex; 
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
}

.nav-link{ 
  color:#f59e0b; 
  text-decoration:none; 
  font-size:0.95rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  padding:8px 12px;
  border:2px solid transparent;
  border-radius:6px;
  transition:all .25s ease;
}

.nav-link:hover{ 
  background:#e74c3c;
  color:#fceee3;
  border-color:#e74c3c;
  transform:translateY(-2px);
}

/* Active page indicator */
.nav-link.active{
  background:rgba(231,76,60,.2);
  border-color:#e74c3c;
}

/* Hamburger (hidden on desktop until scrolled) */
#hamburger{
  display:none;
  font-size:28px;
  background:none;
  border:none;
  color:#ecf0f1;
  cursor:pointer;
  padding:8px 10px;
  border-radius:8px;
}

/* When collapsed (scrolled) move nav to the left */
#nav-bar.scrolled{ 
  left:16px; 
  transform:none; 
}
#nav-bar.scrolled #hamburger{ 
  display:block; 
}
#nav-bar.scrolled .nav-buttons{ 
  display:none; 
}

/* --- POP-OUT FLYOUT PANEL (centered) --- */
#nav-bar.expanded .nav-buttons{
  position:fixed;
  top:72px;
  left:50%;
  transform:translateX(-50%);
  width:min(90vw, 360px);
  background:rgba(10,14,18,.95);
  border:2px solid #e74c3c;
  backdrop-filter:blur(8px);
  padding:20px;
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:1200;
  animation:menu-pop .18s ease-out;
}

@keyframes menu-pop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Ensure pop-out still shows when scrolled + expanded */
#nav-bar.scrolled.expanded .nav-buttons{ 
  display:flex !important; 
}

/* Pill buttons inside the flyout */
#nav-bar.expanded .nav-buttons .nav-link{
  display:block;
  text-align:center;
  padding:12px 16px;
  background:rgba(231,76,60,.1);
  color:#f59e0b;
  border:2px solid #e74c3c;
  border-radius:8px;
  font-weight:700;
}

#nav-bar.expanded .nav-buttons .nav-link:hover{ 
  background:#e74c3c;
  color:#fceee3;
}

#nav-bar.expanded .nav-buttons .nav-link.active{
  background:#e74c3c;
  color:#fceee3;
}

/* Dim the page while the menu is open */
body.menu-open #site{
  opacity:.35;
  transition:opacity .2s ease;
  pointer-events:none;
}

body.menu-open #nav-bar{
  background:#2e3f52;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}

/* Small screens: always use burger; pop-out appears on expand */
@media (max-width:968px){
  #nav-bar{ 
    left:16px; 
    transform:none; 
  }
  #hamburger{ 
    display:block; 
  }
  #nav-bar .nav-buttons{ 
    display:none; 
  }
  #nav-bar.expanded .nav-buttons{ 
    display:flex; 
  }
}

/* Remove old dropdown styles - no longer needed */
.dropdown,
.dropdown-content{
  display:none !important;
}

/* ============ LISTS (Demand Accountability section) ============ */
#demand-accountability ul{
  list-style:disc;
  text-align:left;
  max-width:800px;
  margin:0 auto;
  padding-left:1.25rem;
}
#demand-accountability li{
  margin-bottom:.8rem;
  font-size:1.05rem;
}

/* ============ CTA + FORM PANELS ============ */
#cta,
#form{
  background:rgba(26,17,16,0.92);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  padding:28px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
  width:100%;
  max-width:800px;
  margin:40px auto;
}
#cta h2{ margin-bottom:12px; }

/* Form fields */
form input[type="text"],
form input[type="email"],
form textarea{
  width:100%;
  margin:12px 0;
  padding:12px 14px;
  font-size:1rem;
  color:#fceee3;
  background:#1f1514;
  border:1px solid #3b2b28;
  border-radius:8px;
  outline:none;
}
form input::placeholder{ color:#c9b7aa; opacity:.85; }
form input:focus,
form textarea:focus{
  border-color:#e1b382;
  box-shadow:0 0 0 3px rgba(225,179,130,.25);
}
textarea{ min-height:150px; resize:vertical; }

/* Buttons */
.btn-primary:not(.btn-lg) {
  background:#e1b382;
  color:#1a1110;
  padding:10px 20px;
  border-radius:6px;
  cursor:pointer;
  border:none;
  margin-top:20px;
}
.btn-primary:hover{ background:#f39c12; }

/* ============ FOOTER ============ */
footer{
  text-align:center;
  padding:1rem;
  background:#0f172a;
  color:#fceee3;
}

/* ============ MISC ============ */
a,button{ transition:all .25s ease; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* PingPlotter figure overlay */
.pingplotter-figure { position: sticky; top: 10vh; margin: 0; }
.pingplotter-figure img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.3));
}
.pingplotter-figure { position: relative; }
.pp-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}

/* Hotspots pick up your step-card color (rgb(225,179,130)) */
.pp-hotspot rect {
  fill: rgba(225, 179, 130, 0.28);
  stroke: rgba(225, 179, 130, 0.95);
  stroke-width: 2;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.pp-hotspot.active rect {
  opacity: 1;
  transform: translateZ(0);
}

/* Optional: subtle glow when active */
.pp-hotspot.active rect {
  filter: drop-shadow(0 0 12px rgba(225,179,130,.45));
}
/* Center the page content */
#site,
.container {
  max-width: 1100px;      /* pick your width */
  margin-inline: auto;    /* centers left/right */
  padding-inline: 1rem;   /* breathing room on small screens */
}

/* Optional: center the hero text only */
header .container {
  text-align: center;
}