/* ================================================================
   TekExplorers — Home (index.html) Stylesheet (Refactored)
   Keeps ONLY the CSS used by index.html
   ================================================================ */

:root{
  --jamaica-green:#009B3A;
  --jamaica-gold:#FED100;
  --tech-blue:#0F5FFF;
  --black:#141414;
  --white:#ffffff;

  /* Matches the green card tone in index1.jpg */
  --card-green:#215a2a;
  --card-border:rgba(255,255,255,0.08);
  --shadow:rgba(0,0,0,0.40);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins','Nunito',sans-serif;
}

body{
  background:var(--black);
  color:var(--white);
  line-height:1.6;
  overflow-x:hidden;

  /* fixed header spacing */
  padding-top:72px;
}

img{ max-width:100%; display:block; }

a{
  color:var(--jamaica-gold);
  text-decoration:none;
  font-weight:600;
  transition:color .25s ease, text-shadow .25s ease;
}
a:hover,
a:focus{
  color:var(--tech-blue);
  text-shadow:0 0 10px rgba(0,0,0,0.6);
  text-decoration:underline;
}

/* ============================================================
   Layout helpers
   ============================================================ */
.container{
  width:min(1200px, 100%);
  margin:0 auto;
}

/* ============================================================
   Header / Navigation
   ============================================================ */
.topbar{
  position:fixed;
  top:0;
  width:100%;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(6px);
  z-index:999;
}
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.7rem 1.4rem;
  gap:1rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.7rem;
}
.brand img{ width:50px; height:50px; }
.brand-title{ color:var(--jamaica-gold); font-weight:800; }
.brand-tagline{ font-size:0.8rem; opacity:0.85; display:block; }

.nav-links a{
  color:#fff;
  margin:0 0.7rem;
  font-weight:600;
  transition:0.3s;
}
.nav-links a:hover,
.nav-links a.active,
.nav-links a.nav-active{
  color:var(--jamaica-gold);
  text-shadow:0 0 10px var(--jamaica-gold);
}

.menu-toggle{
  display:none;
  color:var(--jamaica-gold);
  font-size:1.8rem;
  cursor:pointer;
}

@media (max-width:768px){
  .menu-toggle{ display:block; }
  .nav-links{
    display:none;
    flex-direction:column;
    background:rgba(0,0,0,0.92);
    width:100%;
    text-align:center;
    padding:0.8rem 0;
  }
  .nav-links.show{ display:flex; }
  .nav-links a{ margin:0.5rem 0; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  min-height:85vh;
  width:100%;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center top;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    rgba(15,95,255,0.25),
    rgba(0,155,58,0.35),
    rgba(254,209,0,0.25)
  );
  z-index:0;
}
.hero-content{
  position:relative;
  z-index:1;
  max-width:860px;
  padding:2rem;
  background:rgba(0,0,0,0.30);
  border-radius:1rem;
}
.hero-title{
  font-size:2.6rem;
  font-weight:800;
  color:var(--white);
  text-shadow:0 0 12px rgba(254,209,0,0.6);
  margin-bottom:1rem;
}
.hero-subtitle{
  font-size:1rem;
  letter-spacing:1px;
  color:var(--jamaica-gold);
}
.hero-text{
  margin-top:0.5rem;
  color:rgba(255,255,255,0.88);
  font-size:1.1rem;
}

.btn-row{
  margin-top:1.4rem;
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

@media (max-width:768px){
  .hero{
    min-height:70vh;
    background-size:cover;
    background-position:center center;
  }
  .hero-title{ font-size:2.1rem; }
}

/* ============================================================
   Sections
   ============================================================ */
.section{
  padding:6rem 1.4rem;
  text-align:center;
}

.section-title{
  font-size:2rem;
  color:var(--jamaica-gold);
  text-shadow:0 0 10px rgba(254,209,0,0.40);
  margin-bottom:1.5rem;
}

.section p{
  max-width:900px;
  margin:0 auto 1.5rem auto;
  font-size:1.05rem;
  color:rgba(255,255,255,0.92);
  line-height:1.75;
}

/* ============================================================
   Core Learning Tracks (4 / 2 / 1 layout)
   ============================================================ */
.tracks-section{
  background:linear-gradient(135deg, rgba(0,155,58,0.14), rgba(15,95,255,0.18));
}

/* Wider container for the 4-card row on large screens */
.tracks-section .container{
  width:min(1700px, 96vw);
  margin:0 auto;
}

.program-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1.8rem;
  margin-top:2.2rem;
}

/* Homepage: center the 4-card row and let cards stretch edge-to-edge */
.tracks-section .program-grid{
  width:100%;
  justify-content:center;
  justify-items:stretch;
  align-items:stretch;
}

@media (max-width:1024px){
  .program-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:640px){
  .program-grid{ grid-template-columns:1fr; }
}

.program-card{
  background:var(--card-green);
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:1.9rem 1.5rem;
  text-align:center;
  box-shadow:0 14px 28px var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
  min-height:260px;

  /* Stretch to fill the grid column */
  width:100%;
  justify-self:stretch;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.program-card h3{
  font-size:1.15rem;
  font-weight:800;
  color:var(--jamaica-gold);
  margin-bottom:1rem;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.6rem;
}

.program-card p{
  font-size:0.98rem;
  color:rgba(255,255,255,0.88);
  line-height:1.75;
}

.program-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 0 0 3px rgba(254,209,0,0.35),
    0 18px 34px rgba(0,0,0,0.48);
}


/* ============================================================
   About page cards (Mission / Vision / Values)
   - Centers the 3 cards (no empty 4th column)
   - Cards stretch to fill the available row width
   - Responsive naturally: 3 → 2 → 1 as the screen narrows
   ============================================================ */
.program-grid.about-grid{
  /* auto-fit collapses empty columns so 3 cards are centered and evenly spaced */
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  justify-items:stretch;
  align-items:stretch;
}

.program-grid.about-grid .program-card{
  width:100%;
  justify-self:stretch;
}


/* Inline emoji-sized </> icon rgba(254,209,0,0.40) */
.emoji-inline{
  width:1em;
  height:1em;
  vertical-align:-0.15em;
  display:inline-block;
  background-color:transparent !important;
}

/* ============================================================
   Workshop preview grid (Home page)
   ============================================================ */
.workshop-photos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1rem;
  margin-top:1.6rem;
}
.workshop-photos figure{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:rgba(255,255,255,0.05);
  padding:0.6rem;
}
.workshop-photos img{
  width:100%;
  border-radius:12px;
  transition:transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
  filter:brightness(0.9);
}
.workshop-photos img:hover{
  transform:scale(1.05);
  box-shadow:0 0 25px var(--jamaica-gold);
  filter:brightness(1);
}
.workshop-photos figcaption{
  text-align:center;
  margin-top:0.5rem;
  font-size:0.9rem;
  opacity:0.85;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-block;
  background:var(--tech-blue);
  color:#fff;
  padding:0.7rem 1.5rem;
  border-radius:8px;
  font-weight:700;
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}
.btn:hover{
  background:var(--jamaica-green);
  box-shadow:0 0 15px var(--jamaica-gold);
  text-decoration:none;
}
.btn-secondary{
  background:var(--jamaica-gold);
  color:var(--black);
}
.btn-green{ background:var(--jamaica-green); }

/* ============================================================
   Footer
   ============================================================ */
footer{
  text-align:center;
  padding:1.5rem;
  background:var(--black);
  box-shadow:0 -2px 10px rgba(0,0,0,0.30);
  font-size:0.95rem;
  color:rgba(255,255,255,0.85);
}
.footer-updated{
  display:block;
  font-size:0.8rem;
  opacity:0.65;
  margin-top:0.3rem;
}


/* ============================================================
   Jamaica Gold Card Glow (site-wide)
   - Uses Jamaica-gold (#FED100) in a realistic, layered glow
   - Applies to all card components currently used on the site
   ============================================================ */

/* Gold as both HEX and RGB so we can tune opacity cleanly */
:root{
  --glow-gold: #FED100;              /* Jamaica-gold */
  --glow-gold-rgb: 254, 209, 0;      /* Same color as R,G,B */
}

/* Base: subtle gold rim + soft bloom + depth shadow */
.program-card,
.workshop-card{
  box-shadow:
    0 14px 28px rgba(0,0,0,0.38),                        /* depth */
    0 0 0 1px rgba(var(--glow-gold-rgb), 0.18),           /* rim */
    0 0 18px rgba(var(--glow-gold-rgb), 0.14);            /* soft bloom */
}

/* Hover/focus: brighter rim + stronger bloom (still soft) */
.program-card:hover,
.program-card:focus-within,
.workshop-card:hover,
.workshop-card:focus-within{
  box-shadow:
    0 18px 34px rgba(0,0,0,0.48),                        /* deeper shadow */
    0 0 0 2px rgba(var(--glow-gold-rgb), 0.35),           /* brighter rim */
    0 0 28px rgba(var(--glow-gold-rgb), 0.35),            /* bloom */
    0 0 80px rgba(var(--glow-gold-rgb), 0.14);            /* outer haze */
}

/* Motion kept subtle and consistent */
.program-card:hover,
.workshop-card:hover{
  transform: translateY(-4px);
}



/* SECTION FOR ROTATING QUOTE*/
/* Paste this into assets/css/style.css (near the end) */

/* Rotating quote: responsive wrapping + smooth fade-in/out */
    .rotating-quote{
      width: min(980px, 92%);
      margin: 0 auto;
      padding: 18px 18px;
      font-size: clamp(1.05rem, 1.2vw + 0.85rem, 1.35rem);
      font-weight: 800;
      line-height: 1.5;
      text-align: center;

      /* Helps long quotes wrap nicely */
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: normal;
      hyphens: auto;

      /* Subtle readable panel on busy backgrounds */
      color: #ffffff;
      background: rgba(0,0,0,0.25);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 16px;
      box-shadow: 0 12px 26px rgba(0,0,0,0.35);

      /* Fade animation */
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 650ms ease, transform 650ms ease;
      will-change: opacity, transform;
    }

    .rotating-quote.is-visible{
      opacity: 1;
      transform: translateY(0);
    }

    /* Respect accessibility preference */
    @media (prefers-reduced-motion: reduce){
      .rotating-quote{
        transition: none;
        transform: none;
      }
    }




/* ================================
   INDEX.HTML ONLY
   Center "Core Learning Tracks" + its 2 cards
   (Robotics & Block Coding, IoT)
   ================================ */

#core-tracks {
  text-align: center; /* centers the section title */
}

/* Constrain + center the title since it's not inside .container on this page */
#core-tracks > .section-title {
  max-width: 1100px;
  margin: 0 auto 1.25rem;
  padding: 0 1rem;
}

/* Center the two cards as a neat 2-column grid (desktop) */
#core-tracks .program-grid {
  max-width: 1100px;
  margin: 0 auto;        /* centers the whole block */
  padding: 0 1rem;       /* keeps breathing room on the edges */
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 1.5rem;
  justify-content: center;
  align-items: stretch;
}

#core-tracks .program-card {
  width: 100%;
  margin: 0; /* prevents any leftover offsets from global styles */
}

/* Tablet / mobile: stack the cards, still centered */
@media (max-width: 900px) {
  #core-tracks .program-grid {
    grid-template-columns: minmax(260px, 560px);
  }
}



/* Audio for TekExplorers Review Initaitive */

.audio-box {
  max-width: 520px;
  margin: 20px auto;
  padding: 18px;
  border-radius: 16px;
  background: rgba(10, 20, 35, 0.85);
  border: 1px solid rgba(255,255,255,0.12);
  text-align: center;
}

.listen-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #0b1020;

  /* Colorful "candy" gradient */
  background: linear-gradient(90deg, #00e5ff, #7cff00, #ffd000, #ff3bd4);

  /* Distinct glow REMOVED
  box-shadow:
    0 0 14px rgba(0, 229, 255, 0.55),
    0 0 24px rgba(255, 59, 212, 0.45),
    0 0 38px rgba(124, 255, 0, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.35);
*/

  /* Smooth, premium feel */
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.listen-btn:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05);
  box-shadow:
    0 0 18px rgba(0, 229, 255, 0.7),
    0 0 30px rgba(255, 59, 212, 0.6),
    0 0 46px rgba(124, 255, 0, 0.45),
    0 14px 34px rgba(0, 0, 0, 0.45);
}

.listen-btn:active {
  transform: translateY(0px) scale(0.99);
  filter: brightness(0.98);
}

.listen-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.6);
  outline-offset: 4px;
}

.audio-player {
  width: 100%;
  margin-top: 14px;
  border-radius: 12px;

  /* Blue look */
  background: rgba(0, 110, 255, 0.12);
  border: 1px solid rgba(0, 110, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 110, 255, 0.12) inset;

  /* Helps supported browsers tint the native controls */
  accent-color: #006eff;
}

.listen-title{
  font-size: 1.20rem;   /* bigger text */
  color: #006eff;       /* golden */
}





/* 3-column single-row layout for the static quotes for Innovators on Mindset of Wisdom Page */
.invisible-columns{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 24px; /* space between columns */
  align-items: start;
}

/* Optional: make each column feel consistent */
.invisible-columns > div{
  min-width: 0; /* prevents overflow in grid children */
}

/* Responsive fallback (so it doesn't crush on phones) */
@media (max-width: 900px){
  .invisible-columns{
    grid-template-columns: 1fr; /* stack columns */
  }
}



/*RADIO BUTTON ALIGNMENT FOR CODING EXPERIENCE*/

.radio-grid{
  display: grid;
  grid-template-columns: 1fr 90px; /* left label column + fixed radio column */
  row-gap: 18px;
  column-gap: 20px;
  align-items: center;            /* vertically center within each row */
  width: 100%;
}

.radio-text{
  justify-self: start;            /* keep labels left aligned */
}

.radio-input{
  justify-self: center;           /* center within the radio column cell */
  margin: 0;
}