/* ============================================================
   Skillora header — scoped copy for the LEGACY layout
   ------------------------------------------------------------
   Used by theme_page/layouts/app.blade.php when
   institute_master.theme_select_id = 33, so every route of this
   theme (course shop, course details, cart, blog, CMS ...) shows
   the same header as the home page.

   Rules mirror udemy_theme/css/styles.css lines 6-41, 62-88,
   97-213 and 778-836, but EVERY selector is prefixed with
   .sk-head. styles.css carries a global reset (*, body, a,
   "img, svg { display:block }") plus a generic .btn / .search /
   .logo — loading it whole on legacy pages would break them.
   Keep this file scoped: never drop the .sk-head prefix.
   ============================================================ */

.sk-head {
  --purple: #A435F0;
  --purple-dark: #8710d8;
  --purple-tint: #f6ecfd;
  --navy: #1c1d28;
  --teal-deep: #0d3a35;
  --mint: #cef1eb;
  --text: #2b2b3c;
  --text-gray: #6a6f73;
  --white: #ffffff;
  --border: #e4e6ea;
  --radius: 8px;
  --fs-small: 13px;
  --shadow-lg: 0 8px 28px rgba(20, 21, 31, .16);
  --font: "Inter", "Poppins", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text);
  background: var(--white);
}

/* Local reset — scoped, so it dies at the wrapper boundary. */
.sk-head *, .sk-head *::before, .sk-head *::after { box-sizing: border-box; margin: 0; padding: 0; }
.sk-head svg { display: block; }
.sk-head img { max-width: 100%; }
.sk-head a      { color: inherit; text-decoration: none; }
.sk-head button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
.sk-head ul     { list-style: none; }
/* ------------------------------------------------------------
   Hard reset — the header owns everything inside .sk-head
   ------------------------------------------------------------
   `all: revert` drops every author declaration Materialize,
   master.css, master_new.css, dark_thm.css and the legacy
   header.css apply to elements in this header, rolling them back
   to browser defaults. The declarations after it restore what the
   header actually needs (they win, being later in the same rule).

   :where() contributes ZERO specificity, so this whole rule sits
   at (0,1,0) — above any bare `nav` / `.btn` / `input[type=search]`
   rule in the legacy sheets, and below every `.sk-head .thing`
   rule in this file, which therefore still paints the header.

   This is what stops the whack-a-mole: a new legacy stylesheet
   can be added to the layout tomorrow and this header will not
   move. The targeted Materialize overrides further down stay as
   documentation and as a fallback for browsers without
   `all: revert` (pre-2019).
   ------------------------------------------------------------ */
.sk-head :where(*) {
  all: revert;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
  float: none;
  position: static;
  min-width: 0;
  max-width: none;
  min-height: 0;
  transform: none;
  transition: none;
}

/* ---------- 1. Announcement bar ---------- */
.sk-head .announce {
  position: relative;
  background: var(--mint);
  color: var(--teal-deep);
  text-align: center;
  padding: 8px 44px;
  font-size: var(--fs-small);
  font-weight: 700;
}
.sk-head .announce a { text-decoration: underline; font-weight: 800; }
.sk-head .announce__timer {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 8px;
  background: rgba(13, 58, 53, .12);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.sk-head .announce__close {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  padding: 6px;
  border-radius: 4px;
}
.sk-head .announce__close:hover { background: rgba(13, 58, 53, .12); }

/* ---------- 2. Header ---------- */
.sk-head .header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(20, 21, 31, .12);
}
.sk-head .header__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sk-head .logo { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--navy); }
.sk-head .logo span { color: var(--purple); }

.sk-head .header__nav { display: flex; gap: 14px; font-size: 15px; }
.sk-head .header__nav a:hover { color: var(--purple); }

.sk-head .search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  max-width: 560px;
  padding: 0 16px;
  height: 44px;
  border: 1px solid var(--navy);
  border-radius: 22px;
  background: var(--white);
  color: var(--text-gray);
}
.sk-head .search:focus-within { border-color: var(--purple); }
.sk-head .search input {
  flex: 1;
  height: auto;
  margin: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  background: transparent;
  color: var(--text);
  min-width: 0;
}

.sk-head .header__actions { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.sk-head .header__actions > a:hover { color: var(--purple); }

.sk-head .icon-btn { display: inline-flex; padding: 8px; border-radius: var(--radius); color: var(--text); }
.sk-head .icon-btn:hover { background: var(--purple-tint); color: var(--purple); }
.sk-head .icon-btn--outline { border: 1px solid var(--navy); border-radius: var(--radius); }

/* ---------- Buttons ---------- */
.sk-head .btn {
  display: inline-block;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.sk-head .btn--primary { background: var(--purple); color: var(--white); }
.sk-head .btn--primary:hover { background: var(--purple-dark); color: var(--white); }
.sk-head .btn--ghost { color: var(--text); border: 1px solid transparent; background: none; }
.sk-head .btn--ghost:hover { color: var(--purple); }

/* ---------- Language dropdown ---------- */
.sk-head .lang-menu { position: relative; }
.sk-head .lang-menu__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 400;
}

/* ---------- RTL ---------- */
.sk-head[dir="rtl"] .lang-menu__list { right: auto; left: 0; }
.sk-head[dir="rtl"] .announce__close { right: auto; left: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .sk-head .hide-md { display: none; }
}
@media (max-width: 768px) {
  .sk-head .header__inner { flex-wrap: wrap; row-gap: 10px; }
  .sk-head .header__nav { order: 3; }
  .sk-head .search { order: 4; flex-basis: 100%; max-width: none; }
  .sk-head .header__actions { margin-left: auto; }
  .sk-head .btn--ghost { display: none; }
  .sk-head .announce { padding: 8px 40px; }
  .sk-head .announce__timer { display: block; margin: 4px auto 0; width: max-content; }
}
@media (max-width: 480px) {
  .sk-head .header__nav { display: none; }
}

/* ============================================================
   Legacy CSS neutralisation
   ------------------------------------------------------------
   The shared layout loads materialize.min.css (layouts/app.blade.php
   line 189) and master.css long before this file. Those stylesheets
   style bare `nav`, `.btn` and `input[type=search]` — the exact
   elements this header markup uses — so without the overrides below
   the two <nav> blocks pick up Materialize's navbar (56px bar,
   z-depth shadow, white link text) and the buttons pick up its
   uppercase pill with a 3rem left margin.

   The home page never needed these: udemy_theme/layouts/app.blade.php
   loads styles.css alone, with no Materialize in the document.

   Each selector is one step more specific than the rule it cancels;
   the cancelled rule is quoted above each block. Do not lower the
   specificity without re-checking against materialize.min.css.
   ============================================================ */

/* materialize: nav{color:#fff;background-color:#ee6e73;width:100%;height:56px;line-height:56px}
                nav{box-shadow:0 2px 5px...}  nav{position:fixed} */
.sk-head nav {
  color: inherit;
  background: none;
  background-color: transparent;
  width: auto;
  height: auto;
  line-height: inherit;
  box-shadow: none;
  position: static;
}

/* materialize: nav a{color:#fff}
                nav a{color:#444;display:block;font-size:1rem;height:64px;line-height:64px;padding:0 15px} */
.sk-head nav a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  height: auto;
  line-height: inherit;
  padding: 0;
  font-size: inherit;
}

/* materialize: nav ul a{font-size:1rem;color:#fff;display:block;padding:0 15px} */
.sk-head nav ul { margin: 0; padding: 8px 0; }
.sk-head nav ul a { display: flex; height: auto; padding: 9px 16px; font-size: 14px; color: var(--text); }
.sk-head nav ul a:hover { background: var(--purple-tint); color: var(--purple); }

/* materialize: .btn,.btn-flat,.btn-large{border-radius:2px;display:inline-block;height:36px;
                line-height:36px;padding:0 2rem;text-transform:uppercase;vertical-align:middle}
                .btn,.btn-large{color:#fff;background-color:#ee6e73;letter-spacing:.5px}
                .btn{margin:0;margin-left:3rem}   .btn{box-shadow:0 2px 5px...} */
.sk-head .btn,
.sk-head nav a.btn {
  height: auto;
  line-height: 1.2;
  padding: 10px 12px;
  margin: 0;
  border-radius: var(--radius);
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  vertical-align: middle;
}
.sk-head nav a.btn--primary { background-color: var(--purple); color: var(--white); }
.sk-head nav a.btn--primary:hover { background-color: var(--purple-dark); color: var(--white); }
.sk-head nav a.btn--ghost { background-color: transparent; color: var(--text); }
.sk-head nav a.btn--ghost:hover { color: var(--purple); }

/* materialize: input[type=search],input[type=text],...{background-color:transparent;border:none;
                border-bottom:1px solid #9e9e9e;border-radius:0;height:3rem;width:100%;
                font-size:1rem;margin:0 0 15px 0;padding:0;box-sizing:content-box;transition:all .3s} */
.sk-head .search input[type="search"] {
  box-sizing: border-box;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  font-size: 14px;
  transition: none;
}

/* Logo: the partial's inline <style> sets .logo__img and .logo__img--mobile at
   specificity (0,1,0). Restated here at (0,2,0) so the scoped reset near the top
   of this file can never outrank them — that was what left both the desktop and
   the mobile logo visible at the same time. */
.sk-head .logo__img { display: block; height: 34px; width: auto; object-fit: contain; }
.sk-head .logo__img--mobile { display: none; }
@media (max-width: 900px) {
  .sk-head .logo__img--desktop { display: none; }
  .sk-head .logo__img--mobile  { display: block; }
}

/* ============================================================
   #app ID-specificity overrides (legacy pages only)
   ------------------------------------------------------------
   theme_page/layouts/app.blade.php wraps the page in
   <div id="app">, and master.css targets navs through that id:

     #app nav{background-color:#ffffff}              (1,0,1)  :505
     #app nav{background-color:#2b323c!important}             :16063
     #app nav{height:65px!important}                          :41772
     #app nav ul a{color:#808080}                    (1,0,2)  :508,15393,15428,15495

   Every .sk-head rule above sits at (0,1,x) and loses to those,
   and nothing beats `!important` except `!important`. The header
   markup uses two <nav> elements (header__nav, header__actions),
   so all four rules land on it.

   Restated below at (1,1,x) — one class above `#app nav` — using
   !important only on the two properties master.css itself marks.
   These selectors need #app, so they simply never match on the
   home page, which has no such wrapper and no master.css.
   ============================================================ */
#app .sk-head nav {
  background-color: transparent !important;
  height: auto !important;
  min-height: 0;
  line-height: inherit;
  color: inherit;
  width: auto;
  box-shadow: none;
}
#app .sk-head nav ul { background-color: transparent; }
#app .sk-head nav ul a { color: var(--text); }

/* Re-assert the dropdown panel above the transparent-nav rule:
   (1,2,0) beats (1,1,2). */
#app .sk-head .lang-menu__list { background-color: var(--white) !important; }
#app .sk-head .lang-menu__list a:hover { background-color: var(--purple-tint); color: var(--purple); }

/* Buttons live inside header__actions (a <nav>), so they inherit the
   colour reset above; restate the fills at (1,2,0). */
#app .sk-head .btn--primary { background-color: var(--purple) !important; color: var(--white) !important; }
#app .sk-head .btn--primary:hover { background-color: var(--purple-dark) !important; }
#app .sk-head .btn--ghost { background-color: transparent !important; color: var(--text) !important; }

/* master.css:873 sets body{width:100%;overflow-x:hidden}, so anything
   wider than the viewport is clipped instead of scrollable — that is why
   the right-hand links disappeared rather than producing a scrollbar.
   Pin the header to the viewport width so it can never overflow. */
#app .sk-head,
#app .sk-head .header { width: 100%; max-width: 100%; }
#app .sk-head .header__inner { width: 100%; max-width: 1360px; }
#app .sk-head .search { flex: 1 1 auto; min-width: 120px; max-width: 560px; }