/* ==========================================================================
   Accessibility & Dyslexia‑Friendly Styling (Pro Build)
   - WCAG-conscious palette
   - Robust typography & spacing
   - Keyboard focus, motion safety, high-contrast
   - Polished components (navbar, buttons, cards, forms, media)
   ========================================================================== */

/* ------------------------------
   0) Fonts
------------------------------ */
@font-face{
  font-family: "OpenDyslexic";
  font-style: normal;
  font-weight: 400;
  src: local("OpenDyslexic-Regular"),
       url("https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic/alternatives/OpenDyslexicAlta-Regular.woff2") format("woff2");
}

/* ------------------------------
   1) Design Tokens
------------------------------ */
:root{
  /* Color system (dark base) */
  --bg: #0b1020;
  --bg-soft: #0e1630;
  --surface: #111a2f;
  --surface-2: #0e162b;
  --text: #e8eef7;
  --muted: #a9b6ca;

  --primary: #6aa8ff;
  --primary-2: #9fc6ff;
  --accent: #21c085;
  --accent-2: #9af0cf;
  --warning: #ffb155;
  --danger: #ff6b7d;

  /* Typography scale */
  --fs-hero: clamp(2.2rem, 2.6vw + 1rem, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.2vw + .8rem, 2.2rem);
  --fs-lead: clamp(1.05rem, .4vw + 1rem, 1.35rem);
  --fs-base: 18px;
  --lh: 1.7;

  /* Spacing scale */
  --s-1: 4px;
  --s0: 8px;
  --s1: 12px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 72px;
  --s7: 96px;

  /* Radius & effects */
  --radius: 18px;
  --ring: 0 0 0 3px rgba(106,168,255,.35);
  --sh-1: 0 10px 35px rgba(0,0,0,.35);
  --sh-2: 0 26px 64px rgba(18,26,50,.55);
}

html{ scroll-behavior: smooth; }
body{
  background:
    radial-gradient(60% 50% at 20% -10%, rgba(106,168,255,.12), transparent),
    radial-gradient(40% 40% at 110% 20%, rgba(33,192,133,.10), transparent),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh);
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dyslexia-friendly font & high-contrast modes */
body.dyslexia-font, .dyslexia-font *{
  font-family: "OpenDyslexic", "Atkinson Hyperlegible", Arial, sans-serif !important;
  letter-spacing: 0.02em;
  word-spacing: 0.06em;
}
body.access-high-contrast{
  filter: contrast(115%);
}

/* ------------------------------
   2) Global Typographic Rhythm
------------------------------ */
h1{ font-size: var(--fs-hero); font-weight: 800; margin: .2rem 0 var(--s2); }
h2{ font-size: var(--fs-h2); font-weight: 700; margin: 0 0 var(--s2); }
h3{ font-weight: 700; margin: 0 0 var(--s2); }
.lead{ font-size: var(--fs-lead); color: var(--text); }
p{ margin: 0 0 var(--s2); }
.small, .muted{ color: var(--muted); }
.readable{ font-size: var(--fs-base); line-height: var(--lh); }
.large-text{ font-size: calc(var(--fs-base) * 1.2); }
.xlarge-text{ font-size: calc(var(--fs-base) * 1.4); }

/* Content sections */
.section{ padding: var(--s6) 0; }
.section.sm{ padding: var(--s4) 0; }
.section.lg{ padding: var(--s7) 0; }
.section.alt{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); }

/* ------------------------------
   3) Navbar (Horizontal links with spacing)
------------------------------ */
.navbar{
  padding: var(--s2) 0;
  background: linear-gradient(180deg, rgba(15,26,51,.85), rgba(15,26,51,.55));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Force nav list to be horizontal with spacing on all viewports;
   allow wrap for very small screens instead of stacking vertically */
.navbar .navbar-nav{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  align-items: center;
  margin-left: auto;
}
.navbar .nav-link{
  color: var(--muted);
  font-weight: 600;
  padding: .25rem .5rem;
  position: relative;
}
.navbar .nav-link:hover{ color: var(--primary); text-decoration: none; }
.navbar .nav-link:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 8px; }
.navbar .nav-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: right .25s ease;
}
.navbar .nav-link:hover::after{ right:0; }

/* ------------------------------
   4) Focus Visibility & Skip Link
------------------------------ */
:focus-visible{ outline: 3px solid var(--primary); outline-offset: 3px; }
.skip-link{
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus{
  position: fixed; left: 16px; top: 16px; width: auto; height: auto; padding: 8px 12px;
  background: var(--surface); color: var(--text); border-radius: 8px; z-index: 99999;
}

/* ------------------------------
   5) Buttons
------------------------------ */
.btn-cta{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: none; color: #fff; padding: .9rem 1.25rem; border-radius: 14px; font-weight: 700;
  box-shadow: 0 10px 26px rgba(106,168,255,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-cta:hover{ transform: translateY(-2px); }
.btn-ghost{
  background: transparent; color: var(--primary); border: 2px solid var(--primary);
  padding: .75rem 1.1rem; border-radius: 14px; font-weight: 700;
}
.btn-ghost:hover{ background: rgba(106,168,255,.1); }

/* ------------------------------
   6) Cards & Surfaces
------------------------------ */
.card{
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.card.hover{ transition: transform .25s ease, box-shadow .25s ease; }
.card.hover:hover{ transform: translateY(-6px); box-shadow: var(--sh-2); }
.card img{ width: 100%; height: auto; display: block; }
.card .p{ padding: var(--s3); }
.badge{ display:inline-block; padding:.25rem .6rem; border-radius: 999px; background: rgba(106,168,255,.18); color:#cfe6ff; font-weight:600; }

/* ------------------------------
   7) Forms
------------------------------ */
.form-control, input, textarea, select{
  background: var(--surface-2); color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: .8rem 1rem;
}
.form-control:focus, input:focus, textarea:focus, select:focus{
  outline: none; box-shadow: var(--ring); border-color: var(--primary);
}
label{ font-weight: 600; margin-bottom: 6px; }

/* ------------------------------
   8) Media & Ratios
------------------------------ */
.embed-responsive, .ratio-16x9{
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--sh-1);
}
.embed-responsive > iframe,
.embed-responsive > video,
.ratio-16x9 > iframe,
.ratio-16x9 > video,
.ratio-16x9 > img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ------------------------------
   9) Utilities
------------------------------ */
.grid-gap > .row > [class^="col-"]{ margin-bottom: var(--s3); }
.hr{ height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); margin: var(--s4) 0; }
.text-center{ text-align: center; }
.mt-1{ margin-top: var(--s1); } .mt-2{ margin-top: var(--s2); } .mt-3{ margin-top: var(--s3); } .mt-4{ margin-top: var(--s4); }
.mb-1{ margin-bottom: var(--s1); } .mb-2{ margin-bottom: var(--s2); } .mb-3{ margin-bottom: var(--s3); } .mb-4{ margin-bottom: var(--s4); }

/* ------------------------------
   10) Motion Safety
------------------------------ */
.reveal{ opacity: 0; transform: translateY(10px); transition: all .6s ease; }
.reveal.visible{ opacity: 1; transform: none; }
.float-in{ animation: floatIn .8s ease both; }
@keyframes floatIn{ from{ opacity:0; transform: translateY(12px) } to{ opacity:1; transform: none } }
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .reveal{ opacity: 1; transform: none; }
}

/* ------------------------------
   11) Footer
------------------------------ */
footer{ border-top: 1px solid rgba(255,255,255,.06); }
footer a{ color: var(--primary); }
footer a:hover{ text-decoration: underline; }

/* ------------------------------
   12) High Contrast Overrides
------------------------------ */
body.access-high-contrast{
  --bg: #000;
  --bg-soft: #000;
  --surface: #0b0b0b;
  --surface-2: #111;
  --text: #fff;
  --muted: #d0d7e2;
  --primary: #7fbdff;
  --accent: #3be39f;
  filter: none;
}
body.access-high-contrast .navbar{ border-bottom-color: #444; }
body.access-high-contrast .card{ border-color: #444; box-shadow: none; }
/* Assist Bar (Persistent Floating TTS Controls) */
#assist-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 99999; /* ensure it always floats above */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(18,26,50,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease;
}

#assist-bar:hover {
  background: rgba(18,26,50,0.98);
}

#assist-bar button {
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: #e8eef7;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}

#assist-bar button:hover {
  background: rgba(106,168,255,0.15);
  transform: translateY(-1px);
}

#assist-bar .rate {
  color: #e8eef7;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

#assist-bar input[type="range"] {
  width: 120px;
}

#assist-bar .sep {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.18);
  margin: 0 4px;
}

/* Mobile optimization */
@media (max-width: 540px) {
  #assist-bar {
    left: 8px;
    right: 8px;
    transform: none;
    justify-content: center;
    flex-wrap: wrap;
  }
}