/* =========================
   Free Online Learning — Minimal CSS (2025-09-18)
   - Main page hover: 20% tint per button (no gradients, no icons)
   - Sub-page thumbnails: 20% overlays
   - Themed titles & back buttons
   - Keep page slide transitions (JS unchanged)
========================= */

/* Base */
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:#229db6;text-decoration:none}a:hover{text-decoration:underline}

/* Layout */
.app-container{position:relative;width:100%;height:100vh;overflow:hidden}
.container{max-width:1200px;margin:0 auto;padding:2px}

/* Page slide transitions */
.page{position:absolute;top:0;left:0;width:100%;overflow-y:auto;transform:translateX(100%);transition:transform .4s ease-in-out;background:#fff}
.page.active{transform:translateX(0)}.page.slide-out{transform:translateX(-100%)}

/* Hero */
.hero{text-align:center;padding:32px 0}
.hero__title{font-size:31px;  background: linear-gradient(to top, #229db6, #0f9b0f);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; margin:0 0 16px}
.hero__intro{max-width:800px;margin:0 auto;font-size:16px;line-height:1.6;color:#13343b;text-align: justify;}

/* Main buttons grid */
.main-buttons{display:grid;gap:20px;margin-top:32px;max-width:1000px;margin-left:auto;margin-right:auto;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}
@media (min-width:769px){.main-buttons{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr}}

/* Main buttons (image set inline in HTML) */
.main-btn{color:#fff;border:0;border-radius:12px;padding:24px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.14);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat}
.main-btn .btn-label{  position:absolute !important;
  color: #555555;
  text-shadow: 
            -1px -1px 1px #ffffff, 
             1px -1px 1px #ffffff, 
            -1px  1px 1px #ffffff, 
             1px  1px 1px #ffffff;
  left:50%;
  transform:translateX(-50%);
  bottom:15px;
  width:95%;
  z-index:2;           /* stays above hover tint overlay */
  text-align:center;
  pointer-events:none;}
.main-btn:hover{transform:translateY(-5px);box-shadow:0 8px 18px rgba(0,0,0,.15)}


/* disable any prior overlay */
#homepage .main-buttons .main-btn::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s ease;z-index:1;pointer-events:none
}

/* === Hover Overlay v2 (definitive) ===
   Uses ::before only (no gradients, no icons). Strongly scoped to homepage buttons.
*/
#homepage .main-buttons .main-btn{position:relative;overflow:hidden}
#homepage .main-buttons .main-btn::after{display:none !important} /* neutralize any prior ::after overlay */
#homepage .main-buttons .main-btn::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s ease;
  z-index:1;pointer-events:none;background:transparent !important;
}
#homepage .main-buttons .main-btn--cme:hover::before{background:rgba(255,245,188,0.01) !important;opacity:0.01 !important}        /* #229db6 */
#homepage .main-buttons .main-btn--cne:hover::before{background:rgba(112,223,176,.35) !important;opacity:1 !important}       /* #70dfb0 */
#homepage .main-buttons .main-btn--healthcare:hover::before{background:rgba(158,234,200,.32) !important;opacity:1 !important}/* #9eeac8 */
#homepage .main-buttons .main-btn--public:hover::before{background:rgba(255,213,172,.32) !important;opacity:1 !important}     /* #62e3d1 */


/* Page headers */
.page-header{text-align:center;margin:24px 0}
#cme .page-header h2{color:#229db6}
#cne .page-header h2{color:#70dfb0}
#healthcare .page-header h2{color:#34966b}
#public .page-header h2{color:#249080}

/* Video grid */
.video-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);margin-bottom:24px}
@media (max-width:768px){.video-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:16px}}

/* Video buttons (thumbnail set by existing code/HTML) */
.video-btn{position:relative;border-radius:12px;padding:0;cursor:pointer;overflow:hidden;height:170px;min-height:170px;background-size:cover;background-position:center;background-repeat:no-repeat;border:2px solid rgba(255,255,255,.95);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.video-btn:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.2);border-color:#229db6;opacity:0.9}
.video-btn__content{position:relative;height:100%;display:flex;align-items:center;justify-content:center;padding:12px;background:transparent;color:#fff}
.video-btn .label{font-size:1.05rem;font-weight:700;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.95);z-index: 9;}

/* Sub-page 20% overlays (color-on-image-top) */
.page .video-btn::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:1}
#cme .video-btn::after{background:rgba(0,0,0,.01)}
#cne .video-btn::after{background:rgba(0,0,0,.01)}
#healthcare .video-btn::after{background:rgba(0,0,0,.01)}
#public .video-btn::after{background:rgba(0,0,0,.01)}

/* Point links */
.point-link{margin:8px 0 16px;text-align:center;font-size:.9rem}.point-link a{color:#2d3748;text-decoration:underline;font-weight:600}.point-link a:hover{color:#1a202c}

/* Back buttons themed */
.back-btn{display:block;margin:24px auto 0;padding:12px 28px;border:0;border-radius:10px;color:#fff;font-weight:700;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
#cme .back-btn{background:#229db6}#cme .back-btn:hover{background:#1b89a0}
#cne .back-btn{background:#70dfb0;color:#103a2a}#cne .back-btn:hover{background:#58cda0}
#healthcare .back-btn{background:#34966b}#healthcare .back-btn:hover{background:#2b815c}
#public .back-btn{background:#249080}#public .back-btn:hover{background:#1f7d6f}

/* Modal (structure preserved) */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:1;visibility:visible;transition:opacity .25s ease,visibility .25s ease}
.modal.hidden{opacity:0;visibility:hidden}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8)}
.modal-content{position:relative;background:#fff;border-radius:12px;padding:20px;width:85%;max-width:1100px;max-height:95vh;overflow:auto;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.close{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:9999px;border:0;background:#008b8b;color:#fff;font-size:24px;cursor:pointer;z-index:9;}
.close:hover{background:#20b2aa}

/* Mobile tweaks */
@media (max-width:768px){.container{padding:12px}.hero__title{font-size:26px}.main-btn{min-height:120px}.main-buttons{gap:16px}.video-grid{gap:16px}.video-btn{height:140px;min-height:140px}}


/* ---- PATCH: Uniform video item/button sizing & modal responsiveness (2025-09-18) ---- */
.video-item { width: 100%; }
.video-item .video-btn { width: 100%; display: block; }

/* Lightbox responsive video */
.video-container { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; }
.video-container::before { content: ""; display: block; padding-top: 56.25%; } /* 16:9 ratio */
.video-container iframe#video-iframe {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  border: 0;
}

/* Center elements inside the lightbox */
.modal-content { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.modal-point-link { width: 100%; text-align: center; }

/* Ensure the grid stays tidy on mobile (2x4) */
@media (max-width: 768px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .video-item .video-btn { height: 170px; min-height: 170px; }
}



/* === Bottom-of-page background image per page (2025-10-23) ================== */
/* Allow pages to host a pseudo-element footer image without affecting scroll model */
.page { position: relative !important; }

/* Render bg image at the very bottom of each visible page */
.page.active::after{
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: clamp(140px, 22vw, 340px) !important; /* responsive footprint for the image */
  background-image: url('bg_bottom.png') !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: contain !important;
  margin-top: 24px !important; /* small breathing space above image */
}
/* ========================================================================= */

/* === DEFINITIVE LAYOUT OVERRIDES (2025-10-23) =============================== */
/* 1) Single scrollbar on the document */
html, body { margin:0; padding:0; overflow-y:auto !important; overflow-x:hidden !important; height:auto !important; }

/* 2) Container grows with content (no inner scrollbars) */
.app-container { position:relative !important; width:100% !important; min-height:100vh !important; height:auto !important; overflow:visible !important; }

/* 3) Pages: no absolute positioning, no inner scroll, transparent background */
.page { 
  display:none !important;
  position:static !important;
  width:100% !important;
  overflow:visible !important;
  background:transparent !important;
  transform:none !important;
}
.page.active { display:block !important; animation: pageSlideIn .38s ease both !important; }
@keyframes pageSlideIn { from { opacity:0; transform: translateX(24px); } to { opacity:1; transform: translateX(0); } }

/* 4) Kill any old pseudo backgrounds that could affect layout */
.page::before { content:none !important; display:none !important; }

/* 5) Bottom-of-page background image on the visible page only */
.page.active::after{
  content:"" !important;
  display:block !important;
  width:100% !important;
  height: clamp(140px, 22vw, 340px) !important;
  background-image:url('bg_bottom.png') !important;
  background-repeat:no-repeat !important;
  background-position:center bottom !important;
  background-size:contain !important;
  margin-top:24px !important;
}
/* ========================================================================== */

/* === FULL-WIDTH (100vw) BOTTOM IMAGE, FLUSH WITH PAGE END (2025-10-23) ====== */
/* Reserve space equal to the image height so content doesn't overlap it */
.page {
  position: relative !important;
  --page-bg-h: clamp(140px, 22vw, 340px) !important;
  padding-bottom: var(--page-bg-h) !important;
}

/* Absolutely pin the image to the bottom edge of the page; span full viewport width */
.page.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  height: var(--page-bg-h) !important;
  background-image: url('bg_bottom.png') !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: contain !important; /* ensure full image visible across 100vw */
  pointer-events: none !important;
}
/* ========================================================================== */

/* === BOTTOM BACKGROUND AS TRUE PAGE BACKGROUND (100vw), SINGLE SCROLL (2025-10-24) === */
/* 1) Remove all ::after artwork so it doesn't overlay or push content */
.page::after, .page.active::after { content: none !important; display: none !important; background: none !important; }
/* 2) Ensure pages are positioned for background painting and no inner scroll */
.page { position: relative !important; overflow: visible !important; }
/* 3) Paint bg on the ACTIVE PAGE itself, anchored to the element's bottom, spanning viewport width */
.page.active{
  background-image: url('bg_bottom.png') !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: 100vw auto !important;   /* full viewport width */
}
/* 4) Keep content above (background never blocks clicks) — no z-index hacks needed */
/* ============================================================================ */


/* === Healthcare tab layout fix (2026-03-16) ================================= */
#healthcare .hc-sections{display:flex;flex-direction:column;gap:40px}
#healthcare .hc-section{margin:0}
#healthcare .hc-section-title{display:flex;align-items:center;gap:8px;min-height:50px;margin:0 0 16px}
#healthcare .hc-section-title svg{flex:0 0 auto}
#healthcare .hc-section-title h3{margin:0;font-size:1.25rem;line-height:1.25;color:#222}
#healthcare .hc-section-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);margin:0;align-items:start}
#healthcare .hc-section-grid .video-item{width:100%}
#healthcare .hc-section-grid .point-link:empty{display:none}
#healthcare .hc-section-grid .point-link{margin:0}
@media (max-width:768px){
 #healthcare .hc-sections{gap:32px}
 #healthcare .hc-section-title{min-height:auto;margin-bottom:12px}
 #healthcare .hc-section-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}

#public .public-sections{display:flex;flex-direction:column;gap:40px}
#public .public-section{margin:0}
#public .public-section-title{display:flex;align-items:center;gap:8px;min-height:50px;margin:0 0 16px}
#public .public-section-title svg{flex:0 0 auto}
#public .public-section-title h3{margin:0;font-size:1.25rem;line-height:1.25;color:#222}
#public .public-section-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);margin:0;align-items:start}
#public .public-section-grid .video-item{width:100%}
#public .public-section-grid .point-link:empty{display:none}
#public .public-section-grid .point-link{margin:0}
@media (max-width:768px){
 #public .public-sections{gap:32px}
 #public .public-section-title{min-height:auto;margin-bottom:12px}
 #public .public-section-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}
/* ========================================================================== */


/* === Section-based fixed background consistency patch (2026-03-16) ===== */
/* Keep the attached SECTION structure intact; normalize bg rendering globally */
html,body{
  min-height:100%;
  background:#ffffff !important;
}
body{
  position:relative !important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url('bg_bottom.png');
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  pointer-events:none;
  z-index:0;
}
.app-container{
  position:relative !important;
  z-index:1 !important;
  background:transparent !important;
}
.page,
.page.active{
  background:transparent !important;
  background-image:none !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:cover !important;
  background-attachment:scroll !important;
}
.page,
.page.active,
.page::before,
.page::after,
.page.active::before,
.page.active::after{
  box-shadow:none !important;
}
.page::after,
.page.active::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
.page{
  padding-bottom:0 !important;
}
/* ======================================================================= */