/* ==============================
   Design tokens
============================== */
:root{
  --bg:#324a68;            /* page background */
  --surface:#f8fafc;       /* cards / hero / chapters (light) */
  --surface-2:#eef4fb;     /* subtle alt surface */
  --text:#1f2937;          /* primary text */
  --muted:#6b7280;         /* secondary text */

  --brand:#0a7bd3;         /* brand */
  --brand-600:#086bb6;     /* hover */
  --brand-700:#075a97;     /* active */
  --accent:#22c55e;        /* optional accent */
  --ring:rgba(10,123,211,.25);

  --radius:12px;
  --shadow:0 8px 24px rgba(2,16,43,.12);
  --shadow-sm:0 2px 10px rgba(2,16,43,.08);

  --maxw:1000px;
  --leading:1.6;
  --space-1:.5rem;  --space-2:.75rem; --space-3:1rem;
  --space-4:1.25rem; --space-5:2rem; --space-6:3rem;
}
header { position: relative; z-index: 10; }
.island-toc { z-index: 4000; }

.logo { z-index: 10000; }
html { scroll-behavior: smooth; }


/* ==============================
   Base / reset
============================== */
*{box-sizing:border-box}
html,body{height:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  line-height:var(--leading);
  color:var(--text);
  background:linear-gradient(180deg, var(--bg) 0%, #3f6490 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit; text-decoration:none; transition: color .2s ease, opacity .2s ease}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ==============================
   Layout
============================== */
header{
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
  color:#fff;
  padding:var(--space-5) var(--space-3);
  text-align:center;
  box-shadow:var(--shadow-sm);
}
header h1{
  margin:0 0 var(--space-2);
  letter-spacing:.3px;
  font-size:clamp(1.5rem, 2vw + 1rem, 2.25rem);
  font-weight:800;
}
header p{ margin:0; color:#e7f3ff }


/* ==============================
   Navigation buttons
============================== */
nav{
  background:#0c4577;
  display:flex; justify-content:center; gap:clamp(.25rem,1.5vw,1.25rem);
  padding:.65rem var(--space-3);
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(6px);
}
nav a{
  --pad:.35rem .75rem;
  color:#eaf6ff; font-weight:600; padding:var(--pad);
  border-radius:999px; position:relative;
  transition: transform .12s ease, background .2s ease, color .2s ease;
}
nav a::after{
  content:""; position:absolute; left:12%; right:12%; bottom:2px; height:2px;
  background: currentColor; opacity:.75; transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
nav a:hover{ background:rgba(255,255,255,.08); transform:translateY(-1px) }
nav a:hover::after{ transform:scaleX(1) }

main{ max-width:var(--maxw); margin:var(--space-6) auto; padding:0 var(--space-3); text-align:left }

/* ==============================
   Hero
============================== */
.hero{
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  padding:var(--space-6) var(--space-5);
  border-radius:var(--radius);
  margin-bottom:var(--space-6);
  box-shadow:var(--shadow);
  text-align:center;
}
.hero h2{ color:var(--brand); margin:0 0 var(--space-2); font-size:clamp(1.25rem, 1.2vw + 1rem, 1.75rem) }
.hero p{ margin:0 auto var(--space-4); max-width:60ch; color:var(--muted) }

/* ==============================
   Buttons
============================== */
.btn{
  display:inline-block; padding:.7rem 1rem; border-radius:10px; font-weight:700;
  border:1px solid transparent; box-shadow:var(--shadow-sm);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{ background:var(--brand); color:#fff }
.btn-primary:hover{ background:var(--brand-600); transform:translateY(-1px); box-shadow:var(--shadow) }
.btn-outline{ background:transparent; color:var(--brand-600); border-color:var(--brand-600) }
.btn-outline:hover{ background:rgba(10,123,211,.08) }

/* ==============================
   Grid & Cards
============================== */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.75rem,1.6vw,1.25rem) }
.card{
  grid-column:span 12;
  background:#fff; border-radius:var(--radius);
  padding:var(--space-4); box-shadow:var(--shadow-sm);
}
.card h3{ margin:0 0 .4rem; font-size:1.1rem }
.card p{ margin:0; color:var(--muted) }

/* ==============================
   Island TOC + Chapters
============================== */
.island-toc{
  position:sticky; top:.5rem; z-index:99; margin:1rem auto;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  max-width:var(--maxw); padding:.5rem .75rem;
  border-radius:999px; background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  overflow-x:auto; scrollbar-width:thin;
}
.island-toc a{
  white-space:nowrap; font-weight:600; padding:.4rem .8rem;
  border-radius:999px; border:1px solid rgba(10,123,211,.25);
}
.island-toc a:hover{ background:rgba(10,123,211,.08) }

.chapter{
  scroll-margin-top:90px;
  background:var(--surface);
  color:var(--text);
  border-radius:var(--radius);
  padding:var(--space-4);
  margin:1rem auto var(--space-4);
  max-width:var(--maxw);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.chapter h2{ margin-top:.25rem }

/* ==============================
   Forms
============================== */
input,select,textarea{
  width:100%; padding:.7rem .85rem; border:1px solid #dbe2ea;
  border-radius:10px; background:#fff; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,select:focus,textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 6px var(--ring) }



/* ==============================
   Responsive
============================== */
@media (min-width:720px){
  .card{ grid-column:span 6 }
  .hero{ text-align:left }
}
@media (min-width:1000px){
  .card{ grid-column:span 4 }
}



/* ==============================
   Dark mode (single override block)
============================== */
@media (prefers-color-scheme: dark){
  :root{
    --surface:#0f172a;
    --surface-2:#0b1222;
    --text:#e5e7eb;
    --muted:#a3adc2;
  }

  .hero, .card, .chapter{
    background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    box-shadow:none;
    border:1px solid rgba(255,255,255,.06);
  }

  input,select,textarea{ background:#0b1222; color:var(--text); border-color:#1e293b }
  footer{ background:#0a1426; color:#c7d2fe }

  .island-toc{
    background:rgba(17,24,39,.78);
    border:1px solid rgba(255,255,255,.06);
  }
}
.island-toc {
  transition: transform 1s ease, opacity .6s ease, box-shadow .6s ease;
}

/* ==============================
    Team scroll
============================== */
/* ===== Scrollable team row ===== */
.team-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-top: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.team-scroll::-webkit-scrollbar {
  height: 8px;
}
.team-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: 10px;
}
.team-scroll .card {
  flex: 0 0 auto;
  min-width: 220px;
  scroll-snap-align: start;
}



/* Floating quick links (bottom-right) */
.quick-links{
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  z-index: 120; /* above the island */
}
.ql-btn{
  display: inline-block;
  padding: .6rem .9rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow);
  border: 1px solid transparent;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.ql-btn:hover{
  background: var(--brand-600);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(2,16,43,.18);
}
.ql-outline{
  background: rgba(255,255,255,.92);
  color: var(--brand-700);
  border-color: rgba(10,123,211,.25);
}
.ql-outline:hover{
  background: rgba(10,123,211,.08);
}

/* Dark mode tweak */
@media (prefers-color-scheme: dark){
  .ql-outline{
    background: rgba(17,24,39,.85);
    color: #e2eefc;
    border-color: rgba(255,255,255,.15);
  }
}





/* Back Button */
.back-button {
  display: inline-block;
  margin-bottom: 1.5rem;
  background-color: #1b5fc2;
  color: white;
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.back-button:hover {
  background-color: #144a96;
  transform: translateY(-2px);
}

/* Smooth logo float on idle */
@keyframes logoFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}


/* When the logo lives inside the island, it should behave like an inline item */
.island-toc .logo{
  position: static;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  animation: none;          /* stop floating animation inside island */
  transform: none;
  box-shadow: none;
}









/* Reduced motion: disable animations/transitions */
@media (prefers-reduced-motion: reduce){
  .logo, .island-toc { transition: none !important; animation: none !important; }
}

/* ==============================
   Footer
============================== */
footer{
  background:#0f1f33; color:#cbd5e1; text-align:center;
  padding:var(--space-5) var(--space-3); font-size:.95rem; margin-top:var(--space-6);
}
footer a{ color:#e2eefc; border-bottom:1px dashed rgba(226,238,252,.6) }
footer a:hover{ border-bottom-color:#e2eefc }













.logo{
  position: fixed;
  top: 20px; right: 20px;
  width: 80px; height: 80px;
  border-radius: 10px; z-index: 1000;
  will-change: transform, opacity;
  transition: transform .6s ease, opacity .5s ease;
}
.island-toc{
  will-change: transform;
  transition: transform .6s ease, opacity .6s ease, box-shadow .6s ease;
}

.island-toc .logo{
  position: static;
  width: 36px; height: 36px;
  border-radius: 8px;
  animation: none;
  transform: none;
}
.island-toc .logo { position: relative; z-index: 1; }


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

.island-toc .logo{
  width: 36px !important;
  height: 36px !important;
}

/* --- FINAL OVERRIDE: keep island centered, kill any inline pin/transform --- */
.island-toc,
.island-toc.merged {
  position: sticky !important;
  top: .5rem !important;

  /* hard center */
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: max-content;                /* so centering is about content width */
  margin: 1rem 0 !important;
  justify-content: center !important;
}

/* if JS injects an inline transform, override it */
.island-toc[style*="transform"] {
  transform: translateX(-50%) !important;
}

.island-toc a:has(img),
.island-toc a:has(.logo) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}