/* ─────────────────────────────────────────────────────────────────────────────
   header.css — the top bar and tabs: frosted glass, a glowing logo, a gradient title,
   a pill search box with a "/" hint, a GitHub chip and pill tabs.
   Loaded last (mkdocs.yml extra_css), so it wins over the older header and tab rules.
   Breakpoints follow Material: tabs from 76.25em, full search box + repo from 60em.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --lx-hdr-bg:      rgba(255, 255, 255, 0.78);
  --lx-hdr-fg:      #0F172A;
  --lx-hdr-muted:   #475569;
  --lx-hdr-hover:   rgba(15, 23, 42, 0.06);
  --lx-hdr-line:    rgba(15, 23, 42, 0.08);
  --lx-hdr-field:   rgba(15, 23, 42, 0.045);
  --lx-hdr-title:   linear-gradient(92deg, #0F172A 10%, #0369A1 60%, #0EA5E9 100%);
  --lx-hdr-glow:    rgba(14, 165, 233, 0.35);
}
[data-md-color-scheme="slate"] {
  --lx-hdr-bg:      rgba(10, 10, 12, 0.72);
  --lx-hdr-fg:      #F1F5F9;
  --lx-hdr-muted:   #94A3B8;
  --lx-hdr-hover:   rgba(255, 255, 255, 0.07);
  --lx-hdr-line:    rgba(255, 255, 255, 0.08);
  --lx-hdr-field:   rgba(255, 255, 255, 0.06);
  --lx-hdr-title:   linear-gradient(92deg, #FFFFFF 15%, #BAE6FD 55%, #38BDF8 100%);
  --lx-hdr-glow:    rgba(56, 189, 248, 0.45);
}

/* ── Frosted bar (header + tabs read as one surface) ── */
.md-header, .md-tabs {
  background-color: var(--lx-hdr-bg);
  color: var(--lx-hdr-fg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
}
.md-header { box-shadow: none; }
.md-header--shadow { box-shadow: 0 8px 24px -12px rgba(2, 8, 23, 0.25); }
/* Thin brand gradient under the whole bar: under the tabs on desktop, under the header on phones */
.md-tabs { border-bottom: 1px solid transparent;
           border-image: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.55) 30%, rgba(129, 140, 248, 0.55) 70%, transparent) 1; }
@media screen and (max-width: 76.234375em) {
  .md-header { border-bottom: 1px solid transparent;
               border-image: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.55) 30%, rgba(129, 140, 248, 0.55) 70%, transparent) 1; }
}

/* ── Logo: rounded tile with a soft glow ── */
.md-header__button.md-logo { padding: 0.3rem; margin-right: 0.15rem; }
.md-header__button.md-logo img, .md-header__button.md-logo svg {
  height: 1.7rem; width: 1.7rem; border-radius: 0.5rem;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35), 0 4px 16px var(--lx-hdr-glow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.md-header__button.md-logo:hover img, .md-header__button.md-logo:hover svg {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.6), 0 6px 22px var(--lx-hdr-glow);
}

/* ── Title: site name in a gradient; the page title (after scrolling) in plain text ── */
.md-header__title { font-size: 0.86rem; margin-left: 0.6rem; }
.md-header__topic:first-child { font-weight: 800; letter-spacing: -0.015em; }
.md-header__topic:first-child .md-ellipsis {
  background: var(--lx-hdr-title); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.md-header__topic + .md-header__topic { font-weight: 600; color: var(--lx-hdr-fg); }

/* ── Icon buttons (menu, theme toggle, search on phones): round hover ── */
.md-header__button:not(.md-logo) { border-radius: 999px; transition: background-color 0.2s ease, color 0.2s ease; }
.md-header__button:not(.md-logo):hover { background-color: var(--lx-hdr-hover); opacity: 1; }
.md-header__option .md-header__button { color: var(--lx-hdr-fg); }

/* ── Search: a pill field with a "/" shortcut hint ── */
@media screen and (min-width: 60em) {
  .md-search__form {
    border-radius: 999px; background-color: var(--lx-hdr-field); border: 1px solid var(--lx-hdr-line);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .md-search__form:hover { background-color: var(--lx-hdr-hover); border-color: rgba(56, 189, 248, 0.45); }
  .md-search__input { color: var(--lx-hdr-fg); }
  .md-search__input::placeholder { color: var(--lx-hdr-muted); }
  .md-search__input + .md-search__icon { color: var(--lx-hdr-muted); }
  .md-search__form::after {
    content: "/"; position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
    min-width: 1.15rem; padding: 0.05rem 0.3rem; text-align: center;
    font: 700 0.6rem/1.4 var(--md-code-font-family, monospace); color: var(--lx-hdr-muted);
    border: 1px solid var(--lx-hdr-line); border-radius: 0.3rem; background: var(--lx-hdr-field);
    pointer-events: none;
  }
  .md-search__form:focus-within::after { display: none; }
  /* While searching, Material opens the results under the field: square the bottom so they join up */
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    border-radius: 0.9rem 0.9rem 0 0; background-color: var(--md-default-bg-color);
    border-color: rgba(56, 189, 248, 0.55); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
  }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__input { color: var(--md-default-fg-color); }
}

/* ── GitHub repo: a chip ── */
@media screen and (min-width: 60em) {
  .md-header__source { flex: none; width: auto; max-width: 12rem; margin-left: 0.8rem; }
  .md-source {
    display: flex; align-items: center; padding: 0.28rem 0.75rem 0.28rem 0.55rem; border-radius: 999px;
    border: 1px solid var(--lx-hdr-line); background-color: var(--lx-hdr-field); color: var(--lx-hdr-fg);
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
  }
  .md-source:hover { border-color: rgba(56, 189, 248, 0.5); background-color: var(--lx-hdr-hover); transform: translateY(-1px); }
  .md-source__icon { display: flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; flex: none; }
  [dir] .md-source__icon svg { width: 1.1rem; height: 1.1rem; margin: 0; }    /* [dir]: beat Material's [dir=ltr] margin */
  .md-source__icon { margin-right: 0.45rem; }
  [dir] .md-source__repository { display: block; max-width: 9rem; margin: 0; font-weight: 700; font-size: 0.62rem; }
  .md-source__facts { color: var(--lx-hdr-muted); font-size: 0.56rem; font-weight: 600; }
}

/* ── Tabs: pills, the current section tinted ── */
.md-tabs__list { display: flex; align-items: center; }
.md-tabs__item { height: 2.6rem; padding-left: 0.25rem; padding-right: 0.25rem; display: flex; align-items: center; }
.md-tabs__item:first-child { padding-left: 0; }
.md-tabs__link {
  margin-top: 0; font-size: 0.68rem; color: var(--lx-hdr-fg); opacity: 0.78;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.md-tabs__link:not([href$="free-resources/"]):not([href$="pro/"]) { padding: 0.32rem 0.75rem; border-radius: 999px; }
.md-tabs__link:not([href$="free-resources/"]):not([href$="pro/"]):hover { opacity: 1; background-color: var(--lx-hdr-hover); }
.md-tabs__item--active .md-tabs__link:not([href$="free-resources/"]):not([href$="pro/"]) {
  opacity: 1; color: #0369A1; background-color: rgba(14, 165, 233, 0.12);
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.28);
}
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link:not([href$="free-resources/"]):not([href$="pro/"]) {
  color: #7DD3FC; background-color: rgba(56, 189, 248, 0.12); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3);
}

/* The Free Resources and Store pills were tuned for a blue bar; on the light glass bar they need darker text */
[data-md-color-scheme="default"] .md-tabs__link[href$="free-resources/"] { color: #047857; border-color: rgba(5, 150, 105, 0.45); }
[data-md-color-scheme="default"] .md-tabs__link[href$="free-resources/"]:hover,
[data-md-color-scheme="default"] .md-tabs__item--active .md-tabs__link[href$="free-resources/"] {
  color: #065F46; border-color: #10B981; box-shadow: 0 0 14px rgba(16, 185, 129, 0.3);
}
[data-md-color-scheme="default"] .md-tabs__link[href$="pro/"] { color: #B45309; border-color: rgba(217, 119, 6, 0.45); }
[data-md-color-scheme="default"] .md-tabs__link[href$="pro/"]:hover,
[data-md-color-scheme="default"] .md-tabs__item--active .md-tabs__link[href$="pro/"] { color: #92400E; }

/* ── Phones: the slide-out menu's title bar matches the glass header ── */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title[for="__drawer"] {
    background-color: var(--lx-hdr-bg); color: var(--lx-hdr-fg);
    border-bottom: 1px solid var(--lx-hdr-line);
  }
  .md-nav--primary .md-nav__title[for="__drawer"] .md-logo img { border-radius: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .md-header__button.md-logo img, .md-source, .md-search__form, .md-tabs__link { transition: none; }
  .md-header__button.md-logo:hover img, .md-source:hover { transform: none; }
}

/* Material's closed search-results panel sits a few pixels past the right edge at tablet widths, which let the
   whole page scroll sideways. Clip horizontally only: the dropdown still opens downwards. */
.md-header { overflow-x: clip; }

/* ── "Explore Projects" button (overrides/partials/header.html) ── */
.lx-header-cta {
  display: inline-flex; align-items: center; min-height: 2rem; margin: 0 0.4rem 0 0.6rem; padding: 0 0.85rem;
  border-radius: 8px; background: #6366F1; color: #fff !important; font-size: 0.68rem; font-weight: 700;
  white-space: nowrap; transition: background 0.2s;
}
.lx-header-cta:hover, .lx-header-cta:focus-visible { background: #4F46E5; }
.lx-header-cta:focus-visible { outline: 2px solid #A5B4FC; outline-offset: 2px; }
@media screen and (max-width: 44.9375em) { .lx-header-cta { display: none; } }   /* phones: the hero has the same button */