/* Landing header fixes.
   ----------------------------------------------------------------------
   The landing theme (templatemo-scholar.css) is an LTR-only template: its
   nav is laid out with physical properties, and it predates both the
   language switcher and RTL. Two things therefore need patching, and only
   for the header:

   1. `ul.nav` is `justify-content: right` with `flex-basis: 100%`. In RTL
      "right" is the side the logo sits on, so the links pack straight on
      top of it.
   2. The switcher was added as a third flex item in `.main-nav`, which has
      no rules for it: it gets squeezed by the 100% basis on desktop and
      drops above the logo on mobile.

   Loaded after the theme so these win without editing the vendor file. */

/* ── Shared ─────────────────────────────────────────────────────────── */

.header-area .main-nav {
  align-items: center;
}

/* Logical, so the links pack away from the logo in both directions. */
.header-area .main-nav ul.nav {
  justify-content: flex-end;
}

/* Hold its own width instead of being crushed by ul.nav's flex-basis:100%. */
.header-area .main-nav .lang-switcher {
  flex: 0 0 auto;
  margin-inline-start: 12px;
}

/* How the toggle LOOKS on the purple bar now lives with the rest of the
   switcher, in language-switcher.css under `.lang-switcher--landing`. It
   used to be overridden here, at a specificity nothing in that file could
   reach — so the landing toggle kept its old flat pill while every other
   shell picked up the redesign. This file is back to owning only where the
   switcher sits in the header, not what it looks like. */

/* The sticky bar is dark navy (#262261) and keeps the links white, so the
   toggle needs no colour change once scrolled — only the 20px offset the
   theme applies to `ul.nav` there, or it sits 10px above the links. */


/* ── RTL ────────────────────────────────────────────────────────────── */
/* The few places the theme pins to a physical side. */

[dir="rtl"] .header-area .main-nav .logo {
  margin-left: 0;
  margin-right: 0;
}

[dir="rtl"] .header-area .main-nav .menu-trigger {
  right: auto;
  left: 20px;
}

/* ── Mobile (the theme's own breakpoint) ────────────────────────────── */

@media (max-width: 767px) {
  /* Every child of `.main-nav` is out of flow at this width — the theme
     makes the logo and the hamburger `absolute` and hides the list — so
     the flex container collapses to 0px high and its own `overflow:
     hidden` clips the entire header away. Giving it the bar's height back
     is what actually puts the logo and the menu trigger on screen; before
     the switcher was added (in flow, which propped the container open by
     accident) there was no visible header here at all. */
  .header-area .main-nav {
    position: relative;
    min-height: 80px;
  }

  /* The theme pins the logo with a physical `left` at this width. */
  [dir="rtl"] .header-area .main-nav .logo {
    left: auto;
    right: 30px;
  }

  .header-area .main-nav .lang-switcher {
    position: absolute;
    inset-block-start: 26px;
    inset-inline-end: 62px;
    margin-inline-start: 0;
    z-index: 100;
  }

  /* The toggle's own phone sizing is in language-switcher.css too. */

  /* `.main-nav` is `overflow: hidden` on mobile, which would clip the open
     dropdown. Let it through only while the menu is actually open. */
  .header-area .main-nav:has(.lang-switcher__details[open]) {
    overflow: visible;
  }
}