/* ==========================================================================
   mobile-nav.css: the theme-33 (brandseducation) mobile drawer (.sk-mnav*).
   Moved here 2026-09-30 (Arshad) from the inline <style> in
   resources/views/theme_page/udemy_theme/partials/mobile-nav.blade.php (NEHA-11).
   Markup + plain-JS behaviour stay in that partial.

   Why a file, and why the `.header` prefix:
   the drawer rendered correctly on the home page but not on the inner pages,
   where theme_page/layouts/app wraps the header in .sk-head and loads
   public/udemy-assets/css/header.css. That file's resets out-ranked the
   drawer's single-class rules:
     .sk-head nav a   (0,1,2): padding 0 / inline-flex on .sk-mnav__link and .sk-mnav__all
     .sk-head button  (0,1,1): no background / border on .sk-mnav__close
   (and brandseducation.css `.sk-head button { background:none !important }`).
   Every rule below is prefixed `.header` (the <header class="header"> both
   layouts render the drawer inside), so a drawer element rule is (0,3,0) and
   beats any `.sk-head …` reset whatever the load order, on the home page
   (no .sk-head) and the inner pages alike. header.css and brandseducation.css
   also exclude the drawer now.

   Loaded LAST in <head> by BOTH layouts (after header.css, materialize,
   master*.css and brandseducation.css):
     - udemy_theme/layouts/app.blade.php   (home)
     - theme_page/layouts/app.blade.php    (every other page, theme 33 only)
   Cache-busted by file mtime. No !important was needed except the existing
   `[hidden]` guard and the white Sign Up / hover text (kept as they were).
   ========================================================================== */

/* Desktop: nothing of this exists. */
.header .sk-mnav__toggle, .header .sk-mnav__panel, .header .sk-mnav__overlay { display: none; }

@media (max-width: 991.98px) {

  /* The burger. Specificity (0,3,0) / (1,3,0) on purpose: it has to outrank
     explore-menu.blade.php's `.header__nav:has(.explore-menu){display:flex!important}`
     (0,2,0), which would otherwise keep the Explore trigger in the bar under 480px. */
  .header .header__inner > .sk-mnav__toggle,
  #app .sk-head .header__inner > .sk-mnav__toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    order: 2; flex: 0 0 auto;
    width: 40px; height: 40px; padding: 9px; box-sizing: border-box;
    background: none; border: 0; border-radius: 6px; cursor: pointer; color: #1c1d1f;
  }

  /* Top row = logo at the start, then cart, then the burger at the far end.
     `.search` keeps its own full-width row. The physical margin-left:auto that
     styles.css puts on .header__actions is replaced with a logical one, or the
     group lands on the wrong side in RTL. */
  .header .header__inner > .header__actions,
  #app .sk-head .header__inner > .header__actions {
    order: 1; margin-inline-start: auto; margin-left: 0; margin-right: 0;
  }

  /* Login / Sign up / Dashboard / Logout and the language globe are in the panel,
     so the bar keeps only the cart beside the logo. */
  .header .header__inner > .header__actions .btn,
  .header .header__inner > .header__actions .lang-menu,
  #app .sk-head .header__inner > .header__actions .btn,
  #app .sk-head .header__inner > .header__actions .lang-menu { display: none !important; }
  .header .header__inner > .sk-mnav__toggle:focus-visible,
  #app .sk-head .header__inner > .sk-mnav__toggle:focus-visible {
    outline: 2px solid #497e9f; outline-offset: 2px;
  }
  .header .sk-mnav__toggle .sk-mnav__bar {
    display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px;
  }

  /* Their contents now live in the panel. */
  .header .header__inner > .header__nav,
  #app .sk-head .header__inner > .header__nav,
  .header .header__links-row,
  #app .sk-head .header__links-row { display: none !important; }

  .header .sk-mnav__overlay {
    display: block; position: fixed; inset: 0; z-index: 9998;
    background: rgba(15, 15, 15, .5); opacity: 0; transition: opacity .25s ease;
  }
  .header .sk-mnav__overlay.is-open { opacity: 1; }

  .header .sk-mnav__panel {
    display: flex; flex-direction: column; position: fixed; inset-block: 0; inset-inline-end: 0;
    width: min(86vw, 300px); z-index: 9999; box-sizing: border-box;
    background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 20px 28px; box-shadow: 0 0 24px rgba(0, 0, 0, .18);
  }

  /* Never squeeze the rows. header.css's `.sk-head :where(...)` reset sets min-height:0 on
     everything in .sk-head, which lets these flex children shrink below their content
     on the inner pages when the list is taller than the phone (rows came out 41px, not 47). */
  .header .sk-mnav__panel > *,
  .header .sk-mnav__panel .sk-mnav__nav > *,
  .header .sk-mnav__panel .sk-mnav__auth > * { flex-shrink: 0; }

  /* [hidden] must beat the display rules above. */
  .header .sk-mnav__panel[hidden], .header .sk-mnav__overlay[hidden] { display: none !important; }

  .header .sk-mnav__panel .sk-mnav__head { display: flex; justify-content: flex-start; padding-block: 4px 8px; }
  .header .sk-mnav__panel .sk-mnav__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: #497e9f; color: #fff; cursor: pointer;   /* brand colour per Arshad 2026-09-30 (was #F2F3F5 / #1c1d1f) */
  }
  .header .sk-mnav__panel .sk-mnav__close:focus-visible { outline: 2px solid #1c1d1f; outline-offset: 2px; }

  .header .sk-mnav__panel .sk-mnav__nav { display: flex; flex-direction: column; }
  .header .sk-mnav__panel .sk-mnav__link {
    display: block; height: auto; padding: 13px 4px; font-size: 15px; font-weight: 500; line-height: 1.35;
    color: #1c1d1f; text-decoration: none; border-block-end: 1px solid #EEF0F2;
  }
  .header .sk-mnav__panel .sk-mnav__link:hover,
  .header .sk-mnav__panel .sk-mnav__link:focus-visible { color: #497e9f; text-decoration: none; }
  .header .sk-mnav__panel .sk-mnav__link[aria-current="page"] { color: #497e9f; font-weight: 700; }
  .header .sk-mnav__panel .sk-mnav__label {
    display: block; padding: 18px 4px 6px; font-size: 12px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: #6A6F73;
  }
  .header .sk-mnav__panel .sk-mnav__all {
    display: block; height: auto; margin-block-start: 14px; padding: 11px 12px; text-align: center;
    font-size: 14px; font-weight: 600; line-height: 1.55; color: #497e9f; text-decoration: none;
    border: 1px solid #497e9f; border-radius: 6px;
  }
  .header .sk-mnav__panel .sk-mnav__all:hover,
  .header .sk-mnav__panel .sk-mnav__all:focus-visible { background: #497e9f; color: #fff !important; }

  .header .sk-mnav__panel .sk-mnav__auth { display: flex; flex-direction: column; gap: 10px; margin-block-start: 22px; }
  .header .sk-mnav__panel .sk-mnav__btn {
    display: block; padding: 12px 14px; text-align: center; border-radius: 6px;
    font-size: 15px; font-weight: 600; text-decoration: none; box-sizing: border-box;
  }
  .header .sk-mnav__panel .sk-mnav__btn--ghost   { color: #497e9f; border: 1px solid #497e9f; background: #fff; }
  .header .sk-mnav__panel .sk-mnav__btn--primary { color: #fff !important; background: #497e9f; border: 1px solid #497e9f; }
  .header .sk-mnav__panel .sk-mnav__btn:focus-visible { outline: 2px solid #1c1d1f; outline-offset: 2px; }

  .header .sk-mnav__panel .sk-mnav__lang { margin-block-start: 22px; }
  .header .sk-mnav__panel .sk-mnav__langlink {
    display: flex; align-items: center; gap: 10px; padding: 10px 4px;
    font-size: 14px; color: #1c1d1f; text-decoration: none; border-block-end: 1px solid #EEF0F2;
  }
  .header .sk-mnav__panel .sk-mnav__langlink.is-active { color: #497e9f; font-weight: 700; }
  .header .sk-mnav__panel .sk-mnav__flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }

  /* Legacy pages: master.css colours links through #app and would repaint every
     row, so the colours are restated at (1,x,x) - states included, so the
     current page / active language / hover look the same as on the home page. */
  #app .sk-head .sk-mnav__link, #app .sk-head .sk-mnav__langlink { color: #1c1d1f; }
  #app .sk-head .sk-mnav__link:hover, #app .sk-head .sk-mnav__link:focus-visible,
  #app .sk-head .sk-mnav__link[aria-current="page"],
  #app .sk-head .sk-mnav__langlink.is-active { color: #497e9f; }
  #app .sk-head .sk-mnav__btn--primary { color: #fff !important; }
  #app .sk-head .sk-mnav__btn--ghost { color: #497e9f; }
  #app .sk-head .sk-mnav__all { color: #497e9f; }

  body.sk-mnav-open { overflow: hidden; }
}
