/* =====================================================
   SEELS MASTER STYLE.CSS
   Stable • Unified • Production-Safe
   ===================================================== */

@charset "UTF-8";

/* =====================================================
   1. ROOT VARIABLES (Branding + Z-Index Lock)
   ===================================================== */
:root{
  /* Brand */
  --primary:#0057b7;
  --accent:#ffd300;
  --dark:#0d1b2a;
  --light:#f6f7fb;

  /* Z-Index System (LOCKED) */
  --z-base: 0;
  --z-content: 10;
  --z-overlay: 20;
  --z-hero: 30;
  --z-navbar: 9000;
  --z-footer: 9500;
  --z-modal: 10000;
}

/* =====================================================
   2. GLOBAL SAFETY & RESET
   ===================================================== */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--light);
  color:var(--dark);
  line-height:1.6;

  /* CRITICAL FIXES */
  position:relative;
  isolation:isolate;
  z-index:var(--z-base);

  /* For fixed navbar + footer */
  padding-top:80px;
  padding-bottom:70px;
}

/* =====================================================
   3. CONTAINER
   ===================================================== */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* =====================================================
   NAVBAR — SOLID SEELS BLUE (UNIFORM)
   ===================================================== */

.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:var(--z-navbar);

  background:var(--primary) !important; /* SEELS BLUE */
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* Brand + links */
.navbar-brand,
.nav-link{
  color:#ffffff !important;
  font-weight:600;
}

/* Hover */
.nav-link:hover{
  color:var(--accent) !important;
}

/* Toggler icon (mobile) */
.navbar-toggler-icon{
  filter:invert(1);
}

/* =====================================================
   5. LANGUAGE SWITCH
   ===================================================== */
.lang-switch a{
  color:#fff;
  font-weight:600;
  text-decoration:none;
  margin:0 4px;
  opacity:.75;
}

.lang-switch a.active{
  opacity:1;
  color:var(--accent);
  text-decoration:underline;
}

/* =====================================================
   6. SEELS HERO SYSTEM (UNIFIED)
   ===================================================== */
.seels-hero{
  position:relative;
  isolation:isolate;
  z-index:var(--z-hero);

  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;

  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

.seels-hero.fullscreen{
  min-height:100vh;
}

/* Hero overlay */
.seels-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:var(--z-overlay);
  pointer-events:none;
}

/* Hero content */
.seels-hero-content{
  position:relative;
  z-index:var(--z-content);
  color:#fff;
  text-align:center;
  max-width:960px;
  padding:20px;
}

.seels-hero h1{
  font-weight:800;
  line-height:1.2;
}

.seels-hero p{
  font-size:1.15rem;
  opacity:.95;
}

/* =====================================================
   7. BACKWARD COMPATIBILITY
   (Keeps old pages working safely)
   ===================================================== */
.hero,
.image-section,
.hero-slide,
.fullwidth-carousel{
  position:relative;
  isolation:isolate;
  z-index:var(--z-hero);
}

/* Overlay safety */
.hero::before,
.image-section::before,
.hero-slide::before{
  pointer-events:none;
}

/* =====================================================
   8. BODY CONTENT GUARANTEE
   (PREVENTS TEXT DISAPPEARING)
   ===================================================== */
section,
.section,
.bg-white,
.phonics-section,
.dx-section{
  position:relative;
  z-index:var(--z-content);
  background:#fff;
}




/* =====================================================
   9. STANDARD SECTIONS
   ===================================================== */
.section{
  padding:80px 20px;
}

.section-title{
  font-size:2.2rem;
  font-weight:800;
  margin-bottom:20px;
  text-align:center;
}

.section-subtitle,
.section-sub{
  max-width:900px;
  margin:auto;
  font-size:1.1rem;
  text-align:center;
  color:#444;
}

/* =====================================================
   10. BOX / CARD COMPONENTS
   ===================================================== */
.box,
.dx-card{
  background:#fff;
  padding:30px;
  border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  height:100%;
  transition:transform .3s ease;
}

.box:hover,
.dx-card:hover{
  transform:translateY(-6px);
}

/* =====================================================
   11. ACCORDION
   ===================================================== */
.accordion-item{
  margin-bottom:10px;
  border-radius:6px;
  border:1px solid #ddd;
  overflow:hidden;
}

.accordion-button:not(.collapsed){
  background:#ebf5ff;
  color:var(--primary);
  font-weight:bold;
  border-left:4px solid var(--primary);
}

/* =====================================================
   12. DX CTA SECTION
   ===================================================== */
.dx-cta,
.cta-image{
  position:relative;
  isolation:isolate;
  background-size:cover !important;
  background-position:center !important;
  padding:100px 20px;
  text-align:center;
  color:#fff;
}

.dx-cta::before,
.cta-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  z-index:var(--z-overlay);
}

.dx-cta-content,
.cta-content{
  position:relative;
  z-index:var(--z-content);
}

/* =====================================================
   13. STICKY FOOTER
   ===================================================== */
.footer-sticky,
.footer-floating{
  position:fixed;
  bottom:0; left:0;
  width:100%;
  z-index:var(--z-footer);

  background:#0b1328;
  color:#fff;
  text-align:center;
  padding:8px 10px;
  font-size:14px;

  box-shadow:0 -2px 8px rgba(0,0,0,.25);
}

.footer-sticky a,
.footer-floating a{
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
  margin:0 6px;
}

.footer-sticky a:hover,
.footer-floating a:hover{
  text-decoration:underline;
}

/* =====================================================
   14. UTILITIES
   ===================================================== */
.highlight{
  color:var(--primary);
  font-weight:800;
}

.show-controls button{
  margin:5px;
}
/* =====================================================
   15. LANGUAGE SWITCH — HIGH VISIBILITY
   ===================================================== */

.lang-switch a{
  color:#ffffff;
  font-weight:700;
  text-decoration:none;
  margin:0 4px;
  padding:6px 10px;
  border-radius:6px;
  opacity:1; /* REMOVE mute effect */
  transition:all .2s ease;
}

/* Hover */
.lang-switch a:hover{
  background:rgba(255,255,255,0.2);
  color:#ffffff;
}

/* Active language */
.lang-switch a.active{
  background:var(--accent);
  color:#000;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
/* Mobile language dropdown */
.dropdown-menu{
  background:#ffffff;
  border-radius:8px;
  overflow:hidden;
}

.dropdown-item{
  font-weight:600;
}

.dropdown-item.active{
  background:var(--accent);
  color:#000;
  font-weight:700;
}

/* =====================================================
   16. SEELS Hero text visibility
   ===================================================== */
.seels-hero{
  position: relative;
  isolation: isolate;          /* 🔑 creates safe stacking context */
  z-index: var(--z-hero);

  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;

  background-size:cover !important;
  background-position:center !important;
}

/* OVERLAY */
.seels-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index: 1;                  /* 👈 BELOW text */
}

/* CONTENT */
.seels-hero-content{
  position: relative;
  z-index: 2;                  /* 👈 ABOVE overlay */
  color:#fff;
  text-align:center;
  max-width:960px;
  padding:20px;
}
/* =====================================================
   16. SEELS CTA text visibility
   ===================================================== */
.dx-cta,
.cta-image{
  position: relative;
  isolation: isolate;          /* 🔑 */
  background-size:cover !important;
  background-position:center !important;
  padding:100px 20px;
  text-align:center;
  color:#fff;
}

/* OVERLAY */
.dx-cta::before,
.cta-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  z-index: 1;                  /* 👈 BELOW text */
}

/* CONTENT */
.dx-cta-content,
.cta-content{
  position: relative;
  z-index: 2;                  /* 👈 ABOVE overlay */
}
/* === STICKY TOC LAYOUT === */
.page-wrap {
  display: flex;
  max-width: 1200px;
  margin: auto;
}

.toc {
  width: 260px;
  position: sticky;
  top: 20px;
  height: fit-content;
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin-right: 30px;
  font-size: 0.95rem;
}

.toc h3 {
  margin-top: 0;
  color: #0b3c5d;
  font-size: 1rem;
}

.toc ul {
  list-style: none;
  padding-left: 0;
}

.toc li {
  margin-bottom: 10px;
}

.toc a {
  text-decoration: none;
  color: #0b3c5d;
  font-weight: bold;
}

.toc a:hover {
  text-decoration: underline;
}

/* === MAIN CONTENT === */
.content {
  flex: 1;
}

/* === MOBILE HANDLING === */
@media (max-width: 900px) {
  .page-wrap {
    flex-direction: column;
  }
  .toc {
    width: 100%;
    margin-bottom: 30px;
    position: relative;
  }
}

/* =====================================================
   BUTTON — Speak & Code Primary CTA
   ===================================================== */

.btn,
.btn-main{
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #000000 !important;   /* default text = black */
  font-weight: 800;
  transition: color .2s ease; /* smooth text change */
}

/* Hover / Focus / Active */
.btn-main:hover,
.btn-main:focus,
.btn-main:active{
  background-color: var(--primary) !important; /* stays blue */
  border-color: var(--primary) !important;
  color: #ffffff !important;  /* text turns white */
}