/* Mobile-first, retro matrix / 8-bit aesthetic */
:root{
  --bg:#020402;
  --neon:#39ff14;
  --muted:rgba(255,255,255,0.65);
  --glass: rgba(0,0,0,0.35);
}

@font-face{
  font-family: 'Ailerons';
  src: url('../assets/fonts/Ailerons-Typeface.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Cascadia Code';
  src: url('../assets/fonts/Cascadia_Code/CascadiaCode-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}



html,body{height:100%;}
body{
  background: var(--bg);
  color: var(--muted);
  font-family: 'Cascadia Code', Ailerons, ui-monospace, SFMono-Regular, Menlo, Monaco, 'Segoe UI Mono', 'Roboto Mono', monospace;
  overflow-x:hidden;
}

/* Utility: opt an element into Ailerons when you explicitly want it */
.font-aileron { font-family: Ailerons, 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Segoe UI Mono', 'Roboto Mono', monospace; }

#window-meta{color: #39ff14; font-family: 'Cascadia Code', 'Courier New', ui-monospace, 'SFMono-Regular', Menlo, Monaco, 'Segoe UI Mono', 'Roboto Mono', monospace;}

/* Background image (fixed) sits underneath matrix */
#bg-image{position:fixed;inset:0;background-image:url('../assets/img/background/forAllHumanity_a2-virtual-background-a.png');background-size:cover;background-position:center;filter:contrast(110%) saturate(102%);z-index:0}

/* Matrix overlays the background image */
#matrix{position:fixed;left:0;top:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:0.25}

.container-fluid{position:relative;z-index:10}
.site-title{letter-spacing:0.25rem;font-weight:700;color:var(--neon);text-shadow:0 0 6px rgba(57,255,20,0.15)}
.site-tag{color:rgba(255,255,255,0.6)}
.accent{color:#fff}

.hero{background:transparent;border:none;padding:0;overflow:hidden}
.hero-image{
  position:relative;
  /* replace fixed height with a flexible min-height so content can grow on short screens */
  min-height:240px;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem 0;
}
.hero-overlay{position:absolute;inset:0;}
.hero-content{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);z-index:2;text-align:center;padding:2rem;max-width:90%}

/* Active step highlight for State B */
.active-step{background:linear-gradient(90deg, rgba(12,70,12,0.35), rgba(20,90,20,0.25));border-left:4px solid var(--neon);padding:1rem;border-radius:6px}
.active-step h6{color:var(--neon);margin-bottom:.5rem}

.prev-step, .next-step{background:transparent;padding:.5rem;border-radius:4px}

#cancelled-list li, #planned-list li{padding:.2rem 0}
#previous-step, #active-step, #next-steps{min-height:48px}

/* keep existing formatting for lists */
#steps-list .list-group-item{background:transparent;border:none;padding:.5rem 0;color:var(--muted)}
#steps-list .time{color:var(--neon);font-weight:700;margin-right:.6rem}
.countdown{
    font-family: Ailerons;
    font-size:2rem;
    color:var(--neon);
    font-weight:700;
    letter-spacing:0.1rem;
    text-shadow:0 0 8px rgba(57,255,20,0.2)
}
@media (min-width:768px){
  .countdown{font-size:3.5rem}
  .hero-image{height:360px}
}

.card-footer{background:transparent;border-top:none;padding:.5rem 1rem}

.next-action .card-body{background:var(--glass);border-radius:6px}
.steps .card-body, .windows .card-body{background:transparent}
#steps-list .list-group-item{background:transparent;border:none;padding:.5rem 0;color:var(--muted)}
#steps-list .time{color:var(--neon);font-weight:700;margin-right:.6rem}

/* Large screen cinematic styles */
@media (min-width:1200px){
  body{background:linear-gradient(180deg,#001010 0%, #020402 65%)}
  .hero-image{height:520px}
  .countdown{font-size:5rem}
  .site-title{font-size:2.6rem}
}

/* Accessibility: high contrast toggle helpers */
.btn-outline-light{color:#dfffe0;border-color:rgba(255,255,255,0.12)}

/* Small helper classes */
.lead{color:rgba(255,255,255,0.8)}

/* Make code blocks look retro */
code{background:rgba(0,0,0,0.35);padding:.12rem .3rem;border-radius:3px;color:var(--neon)}

/* Small-screen fixes to avoid the countdown being clipped (iPhone, small viewports) */
@media (max-width:480px){
  /* allow overflow so large countdowns won't be cut off */
  .hero { overflow: visible; }

  /* give the image area more room and allow content to start from top if needed */
  .hero-image{
    min-height:320px;
    padding:1.75rem 0;
    align-items:flex-start;
  }

  /* make hero content flow naturally and respect safe area insets on iPhones */
  .hero-content{
    position:relative;
    left:0;
    top:auto;
    transform:none;
    padding-top:0.75rem;
    padding-bottom:calc(0.75rem + env(safe-area-inset-bottom));
    max-width:95%;
  }

  /* responsive scaling for the countdown so it fits on narrow screens */
  .countdown{
    font-family: Ailerons;
    font-size: clamp(1.2rem, 7vw, 2.4rem);
    color:var(--neon);
    font-weight:700;
    letter-spacing:0.1rem;
    text-shadow:0 0 8px rgba(57,255,20,0.2);
    line-height:1;
  }
}