/*
Theme Name:     Max Eisen Program
Theme URI:      https://yourdomain.com/
Author:         Your Name
Author URI:     https://yourdomain.com/
Description:    A custom WordPress theme modeled on FinLit101, bilingual-ready.
Version:        1.0
License:        GNU General Public License v2 or later
License URI:    https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    max-eisen
Tags:           custom, education, responsive, bilingual, flat
*/

@import url(assets/css/main.css);

/* ─── FLUID VIDEO HERO ───────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
}

.hero-video {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  object-fit: none;   /* no cropping or zooming */
  transform: none;
  z-index: 1;
}
.video-toggle-volume {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
}

/* Hide the hamburger on desktop */
.menu-toggle {
  display: none; !important;
}

/* ─── FORCE‐SHOW THE HAMBURGER ────────────────────────────────────── */
@media (max-width: 768px) {
.menu-toggle {
  display: block !important;
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  right: auto !important;
  z-index: 9999 !important;
  font-size: 1.75rem !important;
  color: #fff !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  }
}

/* ─── HEADER & MOBILE MENU STYLES ───────────────────────────────────────── */

/* Transparent, over-hero header */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  z-index: 1000;
}

/* Flex wrapper */
.site-header .header-inner {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1em 2em;
}

/* Center the logo */
.site-branding {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
}

/* Primary nav spans full width */
.primary-navigation {
  flex: 1;
  display: flex;
  align-items: center;
}

/* Modules on the left */
.modules-menu {
  margin: 0;
  position: relative;
}

/* Language switcher on the right */
.language-switcher-inline {
  margin-left: auto;
}

/* Link styles */
.primary-navigation a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

/* Hide hamburger on desktop */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

/* ─── MOBILE HEADER & NAV ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Give the header a solid background on mobile */
  .site-header {
    background: #0a1f2c;
  }

  /* Show the hamburger */
  .menu-toggle {
    display: block;
  }

  /* Collapse the nav by default */
  .primary-menu {
    display: none;
    flex-direction: column;
    background-color: #0a1f2c;
    position: fixed;
    top: 0;            /* cover the entire viewport */
    left: 0;
    bottom: 0;
    width: 80%;        /* FinLit uses ~80% width off-canvas */
    padding: 3em 1em;  /* push content down below header */
    overflow-y: auto;
    z-index: 1000;
  }
  .primary-menu.open {
    display: flex;
    z-index: 10000;
  }

  /* Stack each top-level item full-width */
  .primary-menu > li {
    margin: 1em 0;
    width: 100%;
  }
  .primary-menu > li > a {
    display: block;
    width: 100%;
  }

  /* MODULES toggle arrow */
  .modules-menu > a::after {
    content: 'â–¼';
    float: right;
    transition: transform 0.2s;
  }
  .modules-menu.open > a::after {
    transform: rotate(-180deg);
  }

  /* MODULES dropdown inside the off-canvas nav */
  .modules-dropdown {
    display: none;
    padding-left: 1em;
    border-left: 2px solid #fff;
  }
  .modules-menu.open .modules-dropdown {
    display: block;
  }

  /* Keep the preview box under the list */
  .module-preview {
    margin-top: 1em;
  }

  /* Center the logo above the drawer */
  .site-branding {
    position: fixed;
    top: 1em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
  }
}


/* ─── FRONT PAGE HERO ─────────────────────────────────────────────────── */
.hero {
  background-size: contain;
  background-position: center;
  padding: 3.5em 0;
  color: #ffffff;
  text-align: center;
}
.hero-inner {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(0,0,0,0.5);
  padding: 2em;
}
.hero-title {
  font-size: 2.5rem;
  margin-bottom: 0.5em;
}
.hero-content {
  font-size: 1.1rem;
  line-height: 1.5;
}

/* ─── MODULE CARDS ─────────────────────────────────────────────────────── */
.modules-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2em;
  margin: 4em 0;
}
.module-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease;
}
.module-card:hover {
  transform: translateY(-4px);
}
.module-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.module-title {
  margin: 1em;
  font-size: 1.25rem;
  color: #0a1f2c;
}
.module-excerpt {
  margin: 0 1em 1em;
  color: #555;
  font-size: 0.95rem;
}

/* ─── HERO IMAGE ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  background-size: contain;
  background-position: contain;
}
.hero-overlay {
  position: absolute; top:0;left:0;right:0;bottom:0;
  background: rgba(10,31,44,0.6);
}
.hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 3em 1em;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.hero-title { font-size: 2.5rem; margin-bottom: 0.5em; }
.hero-subtitle { font-size: 1.1rem; }

/* ─── PRIMARY NAVIGATION & MODULES DROPDOWN ───────────────────────────── */
.primary-menu {
  display: flex;
  align-items: center;
  gap: 1.5em;
}
.primary-menu .modules-menu {
  position: relative;
}

/* Dropdown: hidden by default */
.modules-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #0a1f2c;
  color: #fff;
  width: 100vw;
  max-width: 900px;
  padding: 2em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1000;

  /* grid layout for the two columns */
  grid-template-columns: 1fr 1fr;
  gap: 2em;
}

/* Show as grid on hover */
.modules-menu:hover .modules-dropdown {
  display: grid;
}

/* List of modules */
.modules-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.modules-list .module-item {
  margin-bottom: 0.75em;
}
.modules-list .module-item a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

/* Preview box */
.module-preview {
  background: #fff;
  color: #0a1f2c;
  padding: 1.5em;
  border-radius: 4px;
}
.module-preview h3 { margin-top: 0; }
.module-preview p  { margin-bottom: 0; }

/* ─── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .modules-dropdown {
    position: static;
    display: none;         /* still hidden by default */
    grid-template-columns: 1fr;
    max-width: none;
  }
}

/* ─── LANGUAGE SWITCHER INLINE ─────────────────────────────────────────── */

/* Make the <li> a vertical flex‐column */
.language-switcher-inline {
  margin-left: auto;
}
.language-switcher-inline ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;       /* stack vertically */
  gap: 0.25em;
}
.language-switcher-inline li {
  margin: 0;
}
.language-switcher-inline a {
  display: block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #ffffff;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  text-align: center;
  font-size: 0.9rem;
}
/* The current language gets solid white background */
.language-switcher-inline .current-lang a {
  background: #ffffff;
  color: #0a1f2c;
}

/* ─── LANGUAGE SWITCHER INLINE (Two-letter) ───────────────────────────────── */
.language-switcher-inline {
  margin-left: 76rem; /* push to the right */
  display: flex;
  gap: 0.5em;
}
.language-switcher-inline a {
  display: block;
  padding: 0.25em 0.75em;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
}
.language-switcher-inline a.active {
  background: #ffffff;
  color: #ac8507;
}
.language-switcher-inline a:hover {
  background: rgba(255,255,255,0.4);
  color: #dea606;
}


/* ─── MOBILE HEADER & OFF-CANVAS NAV ──────────────────────────────────── */
@media (max-width: 768px) {
  /* Solid header so it’s always visible */
  .site-header {
    background: #0a1f2c;
  }

  /* Show the hamburger button */
  .menu-toggle {
    display: block;
    transform:  scale(1.4) translate(220px, -11px);
  }

  /* Off-canvas drawer: start hidden */
  .primary-menu {
    display: none !important;
    flex-direction: column;
    background-color: #0a1f2c;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80%;
    padding: 3em 1em;
    overflow-y: auto;
    z-index: 1000;
  }
  /* …and only open when the .open class is toggled */
  .primary-menu.open {
    display: flex !important;
  }

  /* Stack each item full-width */
  .primary-menu > li {
    margin: 1em 0;
    width: 100%;
  }
  .primary-menu > li > a {
    display: block;
    width: 100%;
    color: #ffffff;
  }

  /* Modules arrow toggles */
  .modules-menu > a::after {
    content: '';
    float: right;
    transition: transform 0.2s;
  }
  .modules-menu.open > a::after {
    transform: rotate(-180deg);
  }

  /* Hide desktop-only hover preview, and only reveal sub-list on tap */
  .modules-dropdown {
    display: none;
    border-left: 2px solid #fff;
    padding-left: 1em;
  }
  .modules-menu.open .modules-dropdown {
    display: block;
  }
  /* Entire preview box gone on mobile */
  .module-preview {
    display: none;
  }

  /* Center the logo above the drawer */
  .site-branding {
    position: fixed;
    top: 1em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
  }

  /* Push the language switcher to the bottom */
  .language-switcher-inline {
    order: 999;          /* appear last */
    margin-top: auto;    /* push it down in flex column */
  }

  /* Style the inline switcher vertically */
  .language-switcher-inline ul {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .language-switcher-inline li {
    margin: 0;
  }
  .language-switcher-inline a {
    display: block;
    text-align: center;
    padding: 0.5em;
    background: rgba(255,255,255,0.2);
    color: #fff;
    text-decoration: none;
    border-radius: 2px;
  }
  /* Always highlight the current language */
  .language-switcher-inline .current-lang a {
    background: #fff;
    color: #0a1f2c;
  }
}

/* ─── MAKE THE HAMBURGER VISIBLE & POSITION IT ─────────────────────────── */
@media (max-width: 768px) {
  /* Make the hamburger visible and float it on the LEFT */
  .menu-toggle {
    display: block !important;
    position: absolute;
    top: 1rem;
    left: 1rem;       /* ← now on the left */
    right: auto;      /* cancel any right-positioning */
    z-index: 1002;
    font-size: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
  }

  /* …the rest of your off-canvas styles… */
  .primary-menu {
    display: none !important;
    /* ... */
  }
  .primary-menu.open {
    display: flex !important;
  }
  /* etc. */
}

/* in style.css, after your @import */
.hero-video-wrap { position: relative; overflow: hidden; }
.hero-video { width:100%; height:100vh; object-fit:contain; }
.hero-overlay { /* same as before */ }
.hero-content { /* same centering & styling as before */ }


/* ─── JW HERO LAYOUT ───────────────────────────────────────────────────── */
.hero-video-wrap {
  position: relative;
  width: 95%;
  height: 100vh;
  overflow: hidden;
}

.hero-video-wrap .hero-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.hero-video-wrap .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,31,44,0.5);
}

.hero-video-wrap .hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  text-align: center;
}

/* ─── LOGO SIZING (desktop + mobile) ──────────────────────────────────── */
.site-branding img.custom-logo {
  max-height: 60px;   /* adjust to taste */
  width: auto;
  display: block;     /* remove inline aspect‐ratio styles */
}


/* ─── FIXED MOBILE HEADER ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;          /* always on top */
    background: #000;     /* you already have this */
    padding: 2.2em 1em;     /* increase touch area a bit */
  }

  .site-header .header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* push the page content down so it isn’t hidden under the fixed header */
  .hero {
    margin-top: calc(60px + 1.5em); /* header height + some breathing room */
  }
}

/* ─── LOGO VERTICAL OFFSET ───────────────────────────────────────────── */
.site-branding img.custom-logo {
  transform: translate(0px, 15px);
}

@media (max-width: 768px) {
  .site-branding img.custom-logo {
    transform:  scale(1.5) translate(-20px, 15px)
  }
}

/* ─── FLUID VIDEO HERO w/ DESKTOP & MOBILE ADJUSTMENTS ───────────────── */

/* always let the hero container size to the video */
.hero {
  position: static;
  overflow: hidden;
  width: 100%;
}

/* desktop/video defaults */
.hero-video {
  transform: scale(1.15) translate(0%, -14%);
  overflow: hidden;
}

/* mobile tweaks */
@media (max-width: 768px) {
  .hero-video {
    transform: scale(1.5) translate(-0%, -26%);
  }
}

/* ─── LOCK DOWN HERO VIDEO ─────────────────────────────────────────────── */
.hero-video {
  /* blocks click, drag, right-click, etc., on the video element itself */
/*  pointer-events: none; */
  
  /* prevents accidental dragging on some browsers */
  user-drag: none;
  user-select: none;
}

/* Modules popup (bottom-right) */
.modules-popup {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 3;
  display: flex;
  gap: 1rem;
}
.modules-category {
  position: relative;
}
.modules-toggle {
  background: #dea604;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}
.modules-list {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.5rem;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.modules-category:hover .modules-list {
  display: block;
}
.modules-list li {
  margin: 0.25rem 0;
}
.modules-list li a {
  color: #0a1f2c;
  text-decoration: none;
}

/* ─── MODULES POPUP LIGHTBOX ───────────────────────────────────────── */

/* overlay */
.modules-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1500;
  justify-content: center;
  align-items: center;
}

/* inner panel */
.modules-lightbox .lightbox-content {
  background: #fff;
  padding: 2rem;
  border-radius: 6px;
  max-width: 360px;
  width: 90%;
  position: relative;
}

/* close button */
.modules-lightbox .lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
}

/* headings & lists */
.modules-lightbox h2 {
  margin-top: 0;
  color: #000;
}
.modules-lightbox ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.modules-lightbox li {
  margin: 0.5rem 0;
}
.modules-lightbox a {
  color: #000;
  text-decoration: none;
  font-weight: 700;
}
.modules-lightbox a:hover {
  text-decoration: underline;
}

/* ─── Glossary Section Paragraphs ─────────────────────────────────────────── */
.glossary-section p {
  color: #ffffff !important;
  font-weight: 500 !important;
}

.glossary-section .panel,
.glossary-section .sub-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.glossary-section .panel.open,
.glossary-section .sub-panel.open {
  max-height: none !important;
  overflow: visible !important;
}

/* ─── ACCORDION PANELS ───────────────────────────────── */
.biography-section .panel,
.glossary-section .panel,
.glossary-section .sub-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

/* when “open” is toggled on */
.biography-section .panel.open,
.glossary-section .panel.open,
.glossary-section .sub-panel.open {
  max-height: 1000px;    /* large enough to fit your content */
}

/* ─── BIOGRAPHY ACCORDION ───────────────────────────────── */
.biography-section .panel {
  max-height:   0;
  overflow:     hidden;
  transition:   max-height .3s ease;
}
.biography-section .panel.open {
  /* a big enough value to cover your longest bio */
  max-height:   1000px !important;
  overflow:     visible !important;
}

/* in style.css, move pointer‑events:none only onto the hero video:
.hero-video {
  pointer-events: none;    blocks interaction on the background video */
}
/* re‑enable pointer events on embeds elsewhere: */
.sidebar-video iframe,
.video-box-main iframe,
.video-thumbs iframe {
  pointer-events: auto;
}

/* only on our student module template */
body.page-template-student-module .student-module-container {
  margin-top: calc(60px + 1rem);
}


/* — add this instead — */
.hero-video {
  /* only the <video> in your hero should ignore clicks */
  pointer-events: none;
}

/* ensure any other media embeds are still interactive */
iframe {
  pointer-events: auto;
}

/* assume your <header> is 60px tall; add 20px breathing room */
body.page-template-student-module .student-module-container {
  margin-top: calc(60px + 20px);
}

/* ─── STUDENT MODULE: push content below fixed header ───────────────── */
body.page-template-student-module .student-module-container {
  /* 60px = your header height; +1rem breathing room */
  margin-top: calc(60px + 1rem) !important;
}

/* ─── RE‑ENABLE VIDEO CLICKING ───────────────────────────────────────────── */
.module-sidebar .sidebar-video iframe,
.video-box-main iframe,
.video-box-thumb iframe {
  pointer-events: auto !important;
}

/* ─── ENSURE VIDEO BOXES SIT ABOVE BACKGROUND HERO (if any) ─────────────── */
.module-sidebar,
.module-content {
  position: relative;
  z‑index: 1;
}

/* ─── custom popup button styles ─── */
.modules-popup .popup-trigger {
  font-weight: bold;
  background-color: #d5a839;
  color: #ffffff;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.modules-popup .popup-trigger:hover {
  opacity: 0.9;
}
/* ────────────────────────────────── */

/* hide the Modules menu item */
.menu-item.modules-menu {
  display: none !important;
}


/* ─── lightbox content background ─── */
.modules-lightbox .lightbox-content {
  background-color: rgba(255, 255, 255, 0.6);
  border: solid;
  border-color:#d5a839;
}

/* ─── headings stay native color but bold ─── */
.modules-lightbox .lightbox-content h2 {
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #005ba9;
}

/* ─── list items white & bold ─── */
.modules-lightbox .lightbox-content ul li {
  color: #000
  font-weight: bold;
  margin-bottom: 0.5rem;
  list-style-position: inside;
}

/* ─── links in the list also white & bold ─── */
.modules-lightbox .lightbox-content ul li a {
  color: #000
  font-weight: inherit;
  text-decoration: none;
}

.sidebar-video {
  margin: 1rem 0;
}

.iframe-cropper {
  width: 441.33px;        /* your visible window width */
  height: 653px;          /* your visible window height */
  overflow: hidden;       /* crop all outside content */
  position: relative;
}

.iframe-cropper iframe {
  /* absolutely positioned so the hidden overflow is cropped */
  position: absolute;
  top:    0;
  left:  -867.66px;       /* your horizontal offset */
  width:  1309px;         /* ≥ 867.66 + 441.33 */
  height: 653px;          /* ≥ 653 */
  border: none;

  /* ensure no scrollbars appear */
  overflow: hidden;
  scrollbar-width: none;
}
.iframe-cropper iframe::-webkit-scrollbar {
  display: none;
}

/* disable any touch‑ or keyboard‑driven scroll in the iframe wrapper */
.advanced_iframe_wrapper {
  overscroll-behavior: none !important;
}


.mep-logo-link {
  display: inline-block;
  margin-right: 20px; /* adjust spacing as needed */
}

.mep-logo {
  max-height: 60px; /* adjust height as needed */
  height: auto;
  width: auto;
  display: block;
  transform: scale(1.25) translate(15px, 2px);
}


/* 1) Make the outer container fill the viewport and hide its own overflow */
.student-module-container {
  height: 100vh;                  /* fill the screen */
  box-sizing: border-box;         /* so padding is included in that 100vh */
  display: flex;
  flex-direction: column;         /* stack header-padding + layout */
  overflow: hidden;               /* no scrolling on the container itself */
}

/* 2) Let your inner flex‐wrapper fill the remaining space */
.student-module-layout {
  flex: 1;                        /* grow to fill .student-module-container */
  display: flex !important;       /* respect your inline flex */
  gap: 2rem;                      /* your existing spacing */
  height: 100%;                   /* fill the container’s content‐box */
}

/* 3) Give each column its own scroll bar */
.module-sidebar,
.module-content {
  height: 100%;                   /* match the layout’s height */
  overflow-y: auto;               /* vertical scrolling when needed */
  overscroll-behavior: contain;   /* stop scroll chaining into the other pane */
}



/* ─── TESTIMONY GRID & THUMBNAILS ───────────────────────── */
#testimony .video-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

#testimony .video-box-thumb {
  position: relative;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}

#testimony .video-box-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* hide the inline popups until Fancybox grabs them */
#testimony .video-popup {
  display: none;
  background:#d5a839;
}f

/* optional: style your question text */
#testimony .video-popup .video-question {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color:yellow;
  font-weight: 800;
}


/* Slide-in animation on student & teacher buttons */
.modules-popup button.popup-trigger#student-btn {
  animation: slideInFromTop 0.6s ease-out 0.2s 1 normal both;
}

.modules-popup button.popup-trigger#teacher-btn {
  animation: slideInFromTop 0.6s ease-out 0.4s 1 normal both;
}

/* Keyframes for a smooth drop-and-settle */
@keyframes slideInFromTop {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  60% {
    transform: translateY(10px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/* Keep players 16:9 inside the popup */
.ratio-16x9 { position: relative; width: 100%; }
.ratio-16x9::before { content: ""; display: block; padding-top: 56.25%; }
.ratio-16x9 > * { position: absolute; inset: 0; width: 100%; height: 100%; }


/* =========================
   Liberation75 webfonts
   ========================= */
@font-face{
  font-family:"Avenir LT W01 35 Light";
  src:url("/wp-content/themes/max-eisen/assets/fonts/avenir-lt-w01_35-light1475496.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Avenir LT W01 85 Heavy";
  src:url("/wp-content/themes/max-eisen/assets/fonts/avenir-lt-w01_85-heavy1475544.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Helvetica W01 Roman";
  src:url("/wp-content/themes/max-eisen/assets/fonts/helvetica-w01-roman.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Proxima Nova";
  src:url("/wp-content/themes/max-eisen/assets/fonts/proxima-n-w01-reg.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* Apply families site-wide */
body {
  font-family: "Proxima Nova", "Helvetica W01 Roman", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;         /* adjust if you prefer 16px */
  line-height: 1.6;
}

/* Headings: Heavy Avenir look */
h1, h2, h3, h4, h5, h6 {
  font-family: "Avenir LT W01 85 Heavy", "Helvetica W01 Roman", Helvetica, Arial, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.6em;
}

/* Sizes (tweak as needed) */
h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

/* Optional: a lighter heading style when needed */
.heading--light {
  font-family: "Avenir LT W01 35 Light", "Helvetica W01 Roman", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

/* Mobile-friendly heading sizes (optional) */
@media (max-width: 768px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 22px; }
}


/* === Global link hover color override === */
a:hover,
a:focus,
a:active {
  color: #ffcb1e !important;
}

/* Common patterns some bundles use */
.link:hover,
.link:focus,
.link:active,
.wysiwyg a:hover,
.wysiwyg a:focus,
.wysiwyg a:active,
nav a:hover,
nav a:focus,
nav a:active,
.module-nav a:hover,
.module-nav a:focus,
.module-nav a:active {
  color: #ffcb1e !important;
}

/* If your vendor CSS forces white on hover in specific areas, override it */
body .card--intro .card__left a:hover,
body .sticky-alert a:hover {
  color: #ffcb1e !important;
  opacity: 1 !important; /* undo any dimming on hover */
}


/* replace the current .teacher-bars rule */
.teacher-bars{
  display:block;        /* was display:flex */
  flex:0 0 auto;        /* prevents growth */
  margin-bottom:0;
}


/* --- Video volume toggle (homepage) --- */
.video-toggle-volume{
  position: fixed;              /* always visible bottom-right */
  bottom: 1rem;
  right: 1rem;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  color: #fff;
  cursor: pointer;
}
.video-toggle-volume svg{
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}
.video-toggle-volume.is-unmuted{
  color: #e71d36; /* accent when sound is ON */
}

/* Optional: hide the helper text if your theme lacks a utility */
.screen-reader-text{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}



/* force the volume toggle on-screen */
.video-toggle-volume{
  position: fixed !important;
  bottom: 1rem !important;
  right: 1rem !important;
  transform: none !important;
  z-index: 10000 !important;
  pointer-events: auto !important;
  display: inline-flex !important;
}


/* =========================================================
   STUDENT MODULE (page-student-module.php)
   Make BODY scroll + keep sidebar STUCK to header
   ========================================================= */

/* Safety: if JS ever adds this again, do NOT lock scrolling */
body.student-module-body {
  overflow: auto !important;
  height: auto !important;
}

/* Stop the 100vh / overflow trap so footer is reachable */
body.page-template-page-student-module .student-module-container,
body.page-template-page-student-module-php .student-module-container,
body.page-template-student-module .student-module-container,
body.page-template-student-module-php .student-module-container {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: block !important;

  /* push content below the REAL header height */
  padding-top: var(--header-h, 0px) !important;
}

/* Layout should size naturally (no app-shell behavior) */
body.page-template-page-student-module .student-module-layout,
body.page-template-page-student-module-php .student-module-layout,
body.page-template-student-module .student-module-layout,
body.page-template-student-module-php .student-module-layout {
  height: auto !important;
  min-height: 0 !important;
  align-items: flex-start !important;
  overflow: visible !important; /* required for sticky to work */
}

/* MAIN CONTENT: normal page scroll (footer works) */
body.page-template-page-student-module .module-content,
body.page-template-page-student-module-php .module-content,
body.page-template-student-module .module-content,
body.page-template-student-module-php .module-content {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* SIDEBAR: sticky and FLUSH to the header */
body.page-template-page-student-module .module-sidebar,
body.page-template-page-student-module-php .module-sidebar,
body.page-template-student-module .module-sidebar,
body.page-template-student-module-php .module-sidebar {
  position: sticky !important;
  top: var(--header-h, 0px) !important;
  max-height: calc(100vh - var(--header-h, 0px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  align-self: flex-start !important;
}

/* Mobile: remove sticky + nested scroll */
@media (max-width: 768px) {
  body.page-template-page-student-module .module-sidebar,
  body.page-template-page-student-module-php .module-sidebar,
  body.page-template-student-module .module-sidebar,
  body.page-template-student-module-php .module-sidebar {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* =========================================================
   STUDENT MODULE — FORCE STICKY TO ACTUALLY STICK
   (sticky breaks if any parent has transform/overflow)
   ========================================================= */

body.page-template-page-student-module .student-module-container,
body.page-template-page-student-module-php .student-module-container,
body.page-template-student-module .student-module-container,
body.page-template-student-module-php .student-module-container,
body.page-template-page-student-module .student-module-layout,
body.page-template-page-student-module-php .student-module-layout,
body.page-template-student-module .student-module-layout,
body.page-template-student-module-php .student-module-layout {
  transform: none !important;
  overflow: visible !important;
}

/* Ensure sidebar is allowed to stick */
body.page-template-page-student-module .module-sidebar,
body.page-template-page-student-module-php .module-sidebar,
body.page-template-student-module .module-sidebar,
body.page-template-student-module-php .module-sidebar {
  position: sticky !important;
  align-self: flex-start !important;
}




/* =========================================================
   STUDENT MODULE – PURE RECOLOR ONLY (NO LAYOUT CHANGES)
   ========================================================= */

/* ONLY recolor the sidebar itself */
body.page-template-page-student-module-php .module-sidebar,
body.page-template-page-student-module .module-sidebar {
  background-color: #000 !important;
}

/* Recolor the PAGE background behind the sidebar area */
body.page-template-page-student-module-php,
body.page-template-page-student-module {
  background-color: #000 !important;
}

/* Keep the main content explicitly white */
body.page-template-page-student-module-php .module-content,
body.page-template-page-student-module .module-content {
  background-color: #fff !important;
}

/* ================= Sidebar Scrollbar ================= */

/* Chrome / Safari */
body.page-template-page-student-module-php .module-sidebar::-webkit-scrollbar,
body.page-template-page-student-module .module-sidebar::-webkit-scrollbar {
  width: 2px;
}

body.page-template-page-student-module-php .module-sidebar::-webkit-scrollbar-track,
body.page-template-page-student-module .module-sidebar::-webkit-scrollbar-track {
  background: #000 !important;
}

body.page-template-page-student-module-php .module-sidebar::-webkit-scrollbar-thumb,
body.page-template-page-student-module .module-sidebar::-webkit-scrollbar-thumb {
  background: #333 !important;
  border-radius: 10px;
  border: 2px solid #000;
}

body.page-template-page-student-module-php .module-sidebar::-webkit-scrollbar-thumb:hover,
body.page-template-page-student-module .module-sidebar::-webkit-scrollbar-thumb:hover {
  background: #555 !important;
}

/* Firefox */
body.page-template-page-student-module-php .module-sidebar,
body.page-template-page-student-module .module-sidebar {
  scrollbar-color: #333 #000;
  scrollbar-width: thin;
}




/* =========================================================
   STUDENT MODULE – left column stays black on scroll,
   flex gap stays white (NO layout/height changes)
   ========================================================= */

body.page-template-page-student-module-php,
body.page-template-page-student-module {
  background: #000 !important; /* anything outside layout stays black */
}

/* Sidebar itself stays black */
body.page-template-page-student-module-php .module-sidebar,
body.page-template-page-student-module .module-sidebar {
  background: #000 !important;
}

/* Main content stays white */
body.page-template-page-student-module-php .module-content,
body.page-template-page-student-module .module-content {
  background: #fff !important;
}

/*
  Paint the BACKGROUND of the flex row as:
  [black sidebar column] [white gap stripe] [white content column]
  So when the sidebar moves, the exposed area is still black.
*/
body.page-template-page-student-module-php .student-module-layout,
body.page-template-page-student-module .student-module-layout {
  --sidebar-col: 28%;   /* tweak if needed: 25% / 27% / 30% */
  --layout-gap: 5rem;   /* must match your actual gap */

  background:
    linear-gradient(to right,
      #000 0,
      #000 calc(var(--sidebar-col) - (var(--layout-gap) / 2)),
      #fff calc(var(--sidebar-col) - (var(--layout-gap) / 2)),
      #fff calc(var(--sidebar-col) + (var(--layout-gap) / 2)),
      #fff 100%
    ) !important;
}



/* =========================================================
   MOBILE HAMBURGER LANGUAGE LIGHTBOX RESET
   ========================================================= */

/* Hide mobile hamburger/lightbox on desktop by default */
.menu-toggle,
.mobile-menu-lightbox {
  display: none !important;
}

/* Desktop: keep normal navigation visible */
@media (min-width: 769px) {
  .site-header .menu-toggle,
  .mobile-menu-lightbox {
    display: none !important;
  }

  .primary-navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #primary-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Mobile only */
@media (max-width: 768px) {

  .site-header {
    z-index: 99990 !important;
  }

  /* Kill the old side popout on mobile */
  .primary-navigation,
  .primary-navigation .primary-menu,
  #primary-menu,
  #primary-menu.open {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  /* Three-line hamburger only */
  .menu-toggle {
    --hamburger-right: 18px;       /* bigger = farther from right edge */
    --hamburger-top: 24px;         /* bigger = lower */
    --hamburger-left-right: 0px;   /* negative = left, positive = right */
    --hamburger-up-down: 0px;      /* negative = up, positive = down */

    display: flex !important;
    position: fixed !important;

    right: var(--hamburger-right) !important;
    left: auto !important;
    top: var(--hamburger-top) !important;

    width: 34px !important;
    height: 28px !important;

    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 6px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    cursor: pointer !important;
    z-index: 100001 !important;

    transform:
      translateX(var(--hamburger-left-right))
      translateY(var(--hamburger-up-down)) !important;
  }

  .menu-toggle span {
    display: block !important;
    width: 30px !important;
    height: 3px !important;
    background: #ffffff !important;
    border-radius: 999px !important;
    transition: transform 0.22s ease, opacity 0.22s ease !important;
  }

  html.mobile-menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(9px) rotate(45deg) !important;
  }

  html.mobile-menu-open .menu-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  html.mobile-menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg) !important;
  }

  /* Lightbox overlay */
  .mobile-menu-lightbox:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    padding: 92px 18px 18px !important;

    background: rgba(0, 0, 0, 0.48) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;

    z-index: 100000 !important;

    opacity: 0 !important;
    pointer-events: none !important;

    transition: opacity 0.22s ease !important;
  }

  html.mobile-menu-open .mobile-menu-lightbox:not([hidden]) {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.mobile-menu-open,
  html.mobile-menu-open body {
    overflow: hidden !important;
  }

  .mobile-menu-panel {
    position: relative !important;

    width: min(88vw, 360px) !important;

    padding: 22px 18px 20px !important;

    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 20px !important;

    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35) !important;

    transform: translateY(-8px) scale(0.96) !important;
    transition: transform 0.22s ease !important;
  }

  html.mobile-menu-open .mobile-menu-panel {
    transform: translateY(0) scale(1) !important;
  }

  .mobile-menu-close {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;

    width: 34px !important;
    height: 34px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    background: transparent !important;
    border: none !important;

    color: #555 !important;
    font-size: 30px !important;
    line-height: 1 !important;

    cursor: pointer !important;
  }

  .mobile-menu-title {
    margin: 0 0 15px !important;

    color: #111 !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em !important;
    text-align: center !important;
  }

  .mobile-language-buttons {
    display: flex !important;
    gap: 14px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .mobile-language-button {
    flex: 1 1 0 !important;

    min-height: 60px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 10px !important;

    border-radius: 4px !important;

    font-size: 0.95rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em !important;
    line-height: 1 !important;

    text-decoration: none !important;
    text-transform: uppercase !important;

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;

    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease,
      background 0.18s ease !important;
  }

  .mobile-language-button.is-active {
    background: #ffffff !important;
    color: #a67a00 !important;
  }

  .mobile-language-button:not(.is-active) {
    background: #4c4c4c !important;
    color: #b38a10 !important;
  }

  .mobile-language-button:active {
    transform: scale(0.96) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
  }
}


.hero {
  position: relative;
}

.video-toggle-volume {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  padding: 0;

  background: rgba(0, 0, 0, 0.6);
  color: #fff;

  border: none;
  border-radius: 999px;

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.video-toggle-volume svg {
  width: 24px;
  height: 24px;
  display: block;
  color: currentColor;
  fill: currentColor;
  pointer-events: none;
}



/* Fix mobile unmute button tap area */
@media (max-width: 768px) {
  .hero {
    position: relative !important;
  }

  .hero-video {
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .video-toggle-volume {
    position: absolute !important;

    top: -16px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 99999 !important;

    width: 48px !important;
    height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    background: rgba(0, 0, 0, 0.65) !important;
    color: #fff !important;

    border: none !important;
    border-radius: 999px !important;

    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .video-toggle-volume svg,
  .video-toggle-volume use,
  .video-toggle-volume span {
    pointer-events: none !important;
  }

  .video-toggle-volume svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
  }
}




/* =========================================================
   PAGE 1221 PASSWORD GATE
   ========================================================= */

.me-password-gate-page {
    min-height: 70vh;
}

/* Full-page modal background */
.me-password-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* The actual password popup */
.me-password-gate-modal {
    width: min(100%, 520px);

    padding: 40px;

    background: #ffffff;
    color: #111111;

    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.45);

    text-align: left;
}

/* Popup title */
.me-password-gate-title {
    margin: 0 0 12px;

    color: #111111;

    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.1;
}

/* Description below title */
.me-password-gate-description {
    margin: 0 0 26px;

    color: #555555;

    font-size: 17px;
    line-height: 1.6;
}

/* Form layout */
.me-password-gate-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Password label */
.me-password-gate-label {
    color: #222222;

    font-size: 15px;
    font-weight: 700;
}

/* Password field */
.me-password-gate-input {
    width: 100%;
    min-height: 52px;

    padding: 12px 15px;

    background: #ffffff;
    color: #111111;

    border: 2px solid #cccccc;
    border-radius: 8px;

    font-size: 17px;
    line-height: 1;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.me-password-gate-input:focus {
    border-color: #111111;
    outline: none;

    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.12);
}

/* Continue button */
.me-password-gate-submit {
    width: 100%;
    min-height: 52px;

    margin-top: 4px;
    padding: 12px 20px;

    background: #111111;
    color: #ffffff;

    border: 2px solid #111111;
    border-radius: 8px;

    cursor: pointer;

    font-size: 16px;
    font-weight: 700;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.me-password-gate-submit:hover,
.me-password-gate-submit:focus {
    background: #ffffff;
    color: #111111;
}

/* Incorrect password message */
.me-password-gate-error {
    margin: 0 0 20px;
    padding: 12px 14px;

    background: #fff1f1;
    color: #9c1515;

    border: 1px solid #e5a6a6;
    border-radius: 7px;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

/* Shown when no password has been configured */
.me-password-gate-unavailable {
    margin: 20px 0 0;
    padding: 14px;

    background: #f4f4f4;
    color: #333333;

    border-radius: 7px;
}

/* Account for the WordPress admin bar */
body.admin-bar .me-password-gate-overlay {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .me-password-gate-overlay {
        top: 46px;
    }

    .me-password-gate-overlay {
        padding: 16px;
    }

    .me-password-gate-modal {
        padding: 28px 22px;
        border-radius: 14px;
    }
}