/* ============================================================
   eStudy247 – Custom Header Styles  (v3 – All-Device Fix)
   File: estudy247-header.css
   Upload to: public_html/wp-content/uploads/custom/
   ============================================================

   CHANGELOG v3:
   - FIX: Collapsed the broken 900px + 768px gap into ONE unified
     mobile breakpoint (≤ 900px), so hamburger now shows exactly
     when the desktop nav hides — no more phantom "broken zone".
   - FIX: Mobile nav `top` syncs with `.es-scrolled` height (60px)
     so it no longer overlaps the shrunk header on scroll.
   - NEW: `.es-dropdown-open` class enables tap-to-open on tablets
     (pure :hover doesn't fire on touch devices).
   - NEW: Extra-small screen (<= 380px) tweaks for logo & padding.
   - IMPROVED: Touch-friendly tap target sizes (44px minimum).
   - IMPROVED: Search bar scales gracefully on mid-range tablets.
   ============================================================ */

/* ---------- CSS Variables – matched to site footer palette ---------- */
:root {
  --es-bg:          #1a1a2e;
  --es-bg-scroll:   #12122a;
  --es-accent:      #e94560;
  --es-accent-hover:#ff6b81;
  --es-text:        #ffffff;
  --es-text-muted:  rgba(255,255,255,0.72);
  --es-border:      rgba(255,255,255,0.08);
  --es-shadow:      0 4px 24px rgba(0,0,0,0.45);
  --es-transition:  0.25s ease;
  --es-header-h:    70px;
  --es-header-h-sm: 60px;   /* height when .es-scrolled is active  */
  --es-radius:      6px;
}

/* ---------- Reset ---------- */
#es-custom-header *,
#es-custom-header *::before,
#es-custom-header *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   ASTRA OVERRIDE – hide Astra's own header completely
   ============================================================ */
.site-header.ast-primary-header-bar,
.site-header,
#masthead,
.ast-site-header-wrap,
.main-header-bar,
.main-header-bar-wrap {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Keep LearnDash lesson/topic pages untouched */
.learndash-wrapper .site-header,
.learndash-wrapper #masthead {
  display: block !important;
  height: auto !important;
}

/* ---------- Header Wrapper ---------- */
#es-custom-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--es-header-h);
  background: var(--es-bg) !important;
  border-bottom: 1px solid var(--es-border);
  box-shadow: var(--es-shadow);
  z-index: 999999 !important;
  transition: background var(--es-transition), height var(--es-transition), box-shadow var(--es-transition);
  font-family: inherit !important;
}

#es-custom-header.es-scrolled {
  height: var(--es-header-h-sm);
  background: var(--es-bg-scroll) !important;
  box-shadow: 0 6px 30px rgba(0,0,0,0.60);
}

/* ---------- Inner Container (3-column grid: logo | search | nav) ---------- */
#es-custom-header .es-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 28px;
  gap: 24px;
}

/* ---------- Logo ---------- */
#es-custom-header .es-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none !important;
}

#es-custom-header .es-logo img {
  height: 42px;
  width: auto;
  display: block;
  transition: opacity var(--es-transition), height var(--es-transition);
}

#es-custom-header.es-scrolled .es-logo img { height: 36px; }
#es-custom-header .es-logo:hover img       { opacity: 0.82; }

/* ---------- Search Bar (centre column) ---------- */
#es-custom-header .es-search-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#es-custom-header .es-search-form {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--es-border);
  border-radius: 24px;
  overflow: hidden;
  transition: background var(--es-transition), border-color var(--es-transition);
}

#es-custom-header .es-search-form:focus-within {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}

#es-custom-header .es-search-form input[type="text"],
#es-custom-header .es-search-form input[type="search"] {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--es-text) !important;
  font-size: 0.875rem !important;
  padding: 8px 14px !important;
  min-width: 0;
  font-family: inherit !important;
}

#es-custom-header .es-search-form input::placeholder {
  color: var(--es-text-muted);
}

#es-custom-header .es-search-form button {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44 px touch target */
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--es-text-muted);
  transition: color var(--es-transition);
}

#es-custom-header .es-search-form button:hover,
#es-custom-header .es-search-form button:focus-visible {
  color: var(--es-text);
}

#es-custom-header .es-search-form svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* ---------- Nav Menu ---------- */
#es-custom-header .es-nav {
  display: flex;
  align-items: center;
  list-style: none !important;
  gap: 2px;
  margin: 0 !important;
  padding: 0 !important;
}

#es-custom-header .es-nav li {
  position: relative;
  list-style: none !important;
}

#es-custom-header .es-nav li a {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  /* 44 px touch target via min-height */
  min-height: 44px;
  color: var(--es-text-muted) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  border-radius: var(--es-radius);
  transition: color var(--es-transition), background var(--es-transition);
  white-space: nowrap;
  font-family: inherit !important;
}

#es-custom-header .es-nav li a:hover,
#es-custom-header .es-nav li a:focus-visible {
  color: var(--es-text) !important;
  background: rgba(255,255,255,0.07);
}

/* Active / current page */
#es-custom-header .es-nav li.es-active > a {
  color: var(--es-text) !important;
  background: rgba(233,69,96,0.14);
  border-bottom: 2px solid var(--es-accent);
  padding-bottom: 6px;
}

/* Dropdown chevron on All Courses */
#es-custom-header .es-nav li.es-has-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 6px;
  opacity: 0.7;
  transition: transform var(--es-transition);
}

#es-custom-header .es-nav li.es-has-dropdown:hover > a::after,
#es-custom-header .es-nav li.es-has-dropdown.es-dropdown-open > a::after {
  transform: rotate(180deg);
}

/* ============================================================
   All Courses Mega Dropdown
   ============================================================ */
#es-custom-header .es-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: -60px;
  width: 580px;
  background: #1e1e38;
  border: 1px solid var(--es-border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  padding: 20px 24px 18px;
  z-index: 1000000;
  animation: esDropIn 0.18s ease forwards;
}

@keyframes esDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Desktop hover + keyboard focus open */
#es-custom-header .es-nav li.es-has-dropdown:hover .es-dropdown,
#es-custom-header .es-nav li.es-has-dropdown:focus-within .es-dropdown {
  display: block;
}

/* Touch / JS tap open (.es-dropdown-open added by JS on touch devices) */
#es-custom-header .es-nav li.es-has-dropdown.es-dropdown-open .es-dropdown {
  display: block;
}

/* Invisible bridge so dropdown stays open as mouse moves down to it */
#es-custom-header .es-nav li.es-has-dropdown > a::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 8px;
}

/* Dropdown header row */
#es-custom-header .es-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--es-border);
}

#es-custom-header .es-dropdown-header span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--es-accent);
}

#es-custom-header .es-dropdown-header a.es-view-all {
  font-size: 0.8rem !important;
  color: var(--es-text-muted) !important;
  text-decoration: none !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  min-height: auto !important;
  transition: color var(--es-transition);
}

#es-custom-header .es-dropdown-header a.es-view-all:hover {
  color: var(--es-accent) !important;
  background: none !important;
}

/* Grid of course links – 3 columns */
#es-custom-header .es-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 10px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#es-custom-header .es-dropdown-grid li {
  list-style: none !important;
}

#es-custom-header .es-dropdown-grid li a {
  display: flex !important;
  align-items: center !important;
  gap: 7px;
  padding: 7px 9px !important;
  min-height: 36px !important;
  color: var(--es-text-muted) !important;
  font-size: 0.835rem !important;
  font-weight: 400 !important;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none !important;
  transition: background var(--es-transition), color var(--es-transition);
  letter-spacing: 0;
  border-bottom: none !important;
}

#es-custom-header .es-dropdown-grid li a:hover {
  background: rgba(233,69,96,0.12) !important;
  color: var(--es-text) !important;
}

#es-custom-header .es-dropdown-grid li a .es-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--es-accent);
  flex-shrink: 0;
  opacity: 0.7;
}

/* "View All Courses" footer row */
#es-custom-header .es-dropdown-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--es-border);
  text-align: center;
}

#es-custom-header .es-dropdown-footer a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: var(--es-accent) !important;
  text-decoration: none !important;
  padding: 8px 20px !important;
  border-radius: 20px;
  border: 1px solid rgba(233,69,96,0.35);
  background: rgba(233,69,96,0.08);
  transition: background var(--es-transition), border-color var(--es-transition);
  min-height: 44px !important;
}

#es-custom-header .es-dropdown-footer a:hover {
  background: rgba(233,69,96,0.18) !important;
  border-color: rgba(233,69,96,0.6);
  color: var(--es-accent-hover) !important;
}

/* Mobile search row is injected by JS into the nav drawer.
   Hidden everywhere EXCEPT inside the open mobile menu (≤ 900px).
   This prevents it from appearing as a second search bar on desktop. */
#es-custom-header .es-mobile-search-row {
  display: none !important;
}

/* ============================================================
   Hamburger (hidden on desktop, shown on tablet/mobile ≤ 900px)
   ============================================================ */
#es-custom-header .es-hamburger {
  display: none;           /* hidden by default on desktop */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;             /* 44px touch target */
  height: 44px;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--es-radius);
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--es-border);
  flex-shrink: 0;
  transition: background var(--es-transition);
}

#es-custom-header .es-hamburger:hover,
#es-custom-header .es-hamburger:focus-visible {
  background: rgba(255,255,255,0.14);
  outline: none;
}

#es-custom-header .es-hamburger span {
  display: block;
  height: 2px;
  background: var(--es-text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#es-custom-header.es-menu-open .es-hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#es-custom-header.es-menu-open .es-hamburger span:nth-child(2) {
  opacity: 0;
}
#es-custom-header.es-menu-open .es-hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Push page content down ---------- */
body {
  padding-top: var(--es-header-h) !important;
}

/* LearnDash lesson/topic pages – no push (they manage their own layout) */
body.learndash-course-page-template,
body.ld-topic-page-template,
body.ld-lesson-page-template,
body.single-sfwd-lessons,
body.single-sfwd-topic {
  padding-top: 0 !important;
}

/* ============================================================
   Responsive
   ============================================================

   Breakpoints:
   ┌──────────────────────────────────────────────────────────┐
   │ > 1024px  – Desktop  : 3-col grid, dropdown on hover    │
   │ 901-1024px– Large Tab: smaller dropdown (2-col grid)     │
   │ ≤ 900px   – Tablet/Mobile: hamburger, nav in drawer      │
   │ ≤ 380px   – Small Mobile: tighter spacing, smaller logo  │
   └──────────────────────────────────────────────────────────┘

   IMPORTANT: Previously there were TWO breakpoints (900px & 768px)
   that created a "broken zone" between 768px–900px where the search
   bar was hidden but the hamburger hadn't appeared yet, causing the
   nav to overflow the header. Now there is ONE unified mobile
   breakpoint at ≤ 900px.
   ============================================================ */

/* --- Large tablet: shrink dropdown only, desktop nav stays --- */
@media (max-width: 1024px) {
  #es-custom-header .es-dropdown {
    width: 420px;
    right: 0;
  }
  #es-custom-header .es-dropdown-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   ≤ 900px – TABLET & MOBILE (unified single breakpoint)
   ============================================================ */
@media (max-width: 900px) {

  /* 3-column grid: logo | (nav wrapper collapses) | hamburger
     Must stay 3 columns — the <nav> element is still in the DOM
     even though its inner ul is hidden. With only 2 columns the
     <nav> wrapper occupies col 2 and pushes the hamburger to row 2
     (below the logo). Keeping auto | 1fr | auto holds everything
     on one row: logo left, hamburger right.                        */
  #es-custom-header .es-header-inner {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 0 20px;
  }

  /* Collapse the <nav> wrapper in the middle column so it takes
     no visible space (the ul inside is already display:none)      */
  #es-custom-header .es-header-inner > nav {
    overflow: hidden;
    min-width: 0;
  }

  /* Hide the centre search bar – it moves into the mobile drawer */
  #es-custom-header .es-search-wrap {
    display: none;
  }

  /* Show hamburger button */
  #es-custom-header .es-hamburger {
    display: flex;
  }

  /* ── Mobile drawer nav ─────────────────────────────────── */
  #es-custom-header .es-nav {
    /* Hidden by default; JS adds .es-menu-open to #es-custom-header */
    display: none;
    position: absolute;
    /* 'top' is kept in sync with header height by JS on scroll */
    top: var(--es-header-h);
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--es-bg-scroll);
    border-top: 1px solid var(--es-border);
    padding: 8px 0 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55);
    z-index: 999998;
    /* Smooth slide-down */
    max-height: calc(100vh - var(--es-header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #es-custom-header.es-scrolled .es-nav {
    top: var(--es-header-h-sm);
    max-height: calc(100vh - var(--es-header-h-sm));
  }

  #es-custom-header.es-menu-open .es-nav {
    display: flex;
  }

  /* Nav links – full-width, comfortable touch target */
  #es-custom-header .es-nav li a {
    padding: 12px 24px !important;
    border-radius: 0 !important;
    font-size: 1rem !important;
    border-bottom: none !important;
    min-height: 48px !important;
  }

  /* Active state in mobile drawer uses left-border indicator */
  #es-custom-header .es-nav li.es-active > a {
    border-bottom: none !important;
    border-left: 3px solid var(--es-accent);
    padding-left: 21px !important;
    background: rgba(233,69,96,0.10);
  }

  /* ── Mobile search row (injected by JS into nav drawer) ──
     Override the global `display: none !important` set above —
     this is the ONLY place it should ever be visible.          */
  #es-custom-header .es-mobile-search-row {
    display: flex !important;
    padding: 12px 20px 4px;
    order: -1;              /* always first item in the drawer */
  }

  #es-custom-header .es-mobile-search-row .es-search-form {
    max-width: 100%;
    width: 100%;
  }

  /* Disable hover dropdown & chevron in mobile view */
  #es-custom-header .es-dropdown                              { display: none !important; }
  #es-custom-header .es-nav li.es-has-dropdown > a::after     { display: none !important; }
  #es-custom-header .es-nav li.es-has-dropdown > a::before    { display: none !important; }

  /* Remove active border-bottom (replaced by left-border above) */
  #es-custom-header .es-nav li.es-active > a {
    padding-bottom: 12px !important;
  }
}

/* ============================================================
   ≤ 380px – Extra-small phones (iPhone SE, Galaxy A01, etc.)
   ============================================================ */
@media (max-width: 380px) {
  :root {
    --es-header-h:    62px;
    --es-header-h-sm: 54px;
  }

  #es-custom-header .es-header-inner {
    padding: 0 14px;
    gap: 8px;
  }

  #es-custom-header .es-logo img {
    height: 34px;
  }

  #es-custom-header.es-scrolled .es-logo img {
    height: 28px;
  }

  #es-custom-header .es-hamburger {
    width: 40px;
    height: 40px;
  }
}