/* ==========================================================================
   HEADER — Level 2 public shell. Replaces otbtv_theme's header.css and
   menu.css. Markup: templates/region/region--header.html.twig.

     BAR                 logo and, on phones, the search and menu buttons
     MAIN MENU           the Drupal main menu, shared rules
     ACCOUNT, CART       the account menu and cart blocks
     SEARCH              the panel the search buttons disclose
     DESKTOP (≥ 995px)   one 72px row; submenus drop down
     DRAWER  (< 995px)   56px bar; the header becomes a full-height drawer

   The header is always a Stage scope. 995px is the base theme's desktop
   breakpoint; js/header.js closes the drawer at the same width.
   ========================================================================== */

/* ---------- BAR ---------- */

.otb-header {
  position: relative;
  z-index: var(--z-dropdown);
}

.otb-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--header-height);
}

.otb-branding {
  flex: none;
  margin-right: auto;
}

.otb-branding__logo {
  display: flex;
  align-items: center;
  min-height: var(--control-height);
}

.otb-branding__logo img {
  display: block;
  width: auto;
  height: 40px;
}

.otb-menu-toggle[aria-expanded="false"] .otb-menu-toggle__close,
.otb-menu-toggle[aria-expanded="true"] .otb-menu-toggle__open {
  display: none;
}

/* ---------- MAIN MENU ---------- */

.menu,
.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-item {
  position: relative;
}

.otb-primary-nav a,
.otb-account-nav a {
  color: var(--color-text-primary);
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  text-decoration: none;
}

/* ---------- ACCOUNT, CART ---------- */

.otb-cart__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  border: var(--border-width-thin) solid var(--color-border-light);
  border-radius: var(--border-radius-md);
  color: var(--color-text-primary);
}

.otb-cart__link:hover {
  border-color: var(--color-text-primary);
}

.otb-cart__icon {
  width: 18px;
  height: 18px;
}

.otb-cart__count {
  position: absolute;
  top: calc(-1 * var(--space-2));
  right: calc(-1 * var(--space-2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

/* Institutional admins do not buy; viewers who already have access are
   not asked to subscribe. Body classes: otbtv_theme_preprocess_html(). */
.user-institutional-admin .otb-cart,
.user-subscriber .otb-header__subscribe,
.user-educational .otb-header__subscribe {
  display: none;
}

/* ---------- SEARCH ---------- */

.otb-header__search {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  padding: var(--space-4) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border-light);
  background: var(--color-bg-primary);
}

.otb-header__search[hidden] {
  display: none;
}

.otb-header__search-form {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.otb-header__search-input {
  flex: 1;
  min-width: 0;
  max-width: 480px;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.otb-header__search-input::placeholder {
  color: var(--color-text-muted);
}

/* ---------- DESKTOP (≥ 995px) ---------- */

@media (min-width: 995px) {
  /* Over the home hero: no ground of its own, and the hero slides under. */
  .otb-header--overlay {
    margin-bottom: calc(-1 * var(--header-height));
    background: transparent;
  }

  .otb-header__bar {
    gap: var(--space-10);
  }

  .otb-branding {
    margin-right: 0;
  }

  .otb-branding__logo img {
    height: 48px;
  }

  .otb-menu-toggle,
  .otb-search-toggle--bar {
    display: none;
  }

  .otb-header__menu {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-10);
    min-width: 0;
  }

  .otb-header__actions,
  .otb-account-nav .menu {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .otb-header__actions {
    margin-left: auto;
  }

  .otb-account-nav a {
    white-space: nowrap;
  }

  .otb-account-nav a:hover,
  .otb-account-nav a.is-active {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  .menu--root {
    display: flex;
    align-items: center;
    gap: var(--space-7);
  }

  /* The row is as tall as the bar so a submenu opens flush beneath it. */
  .menu--root > .menu-item {
    display: flex;
    align-items: center;
    height: var(--header-height);
  }

  .menu--root > .menu-item > .menu-item__link a {
    display: block;
    padding: var(--space-2) 0;
    border-bottom: 2px solid transparent;
    line-height: 1;
    white-space: nowrap;
  }

  .menu--root > .menu-item > .menu-item__link a:hover {
    border-bottom-color: var(--color-border-light);
  }

  .menu--root > .menu-item--active-trail > .menu-item__link a,
  .menu--root > .menu-item > .menu-item__link a.is-active {
    border-bottom-color: var(--color-primary);
  }

  .menu--level-1 {
    position: absolute;
    top: calc(100% - var(--space-3));
    left: calc(-1 * var(--space-4));
    display: none;
    min-width: 220px;
    padding: var(--space-2);
    border-radius: var(--border-radius-md);
    background: var(--color-bg-card);
  }

  .menu-item--expanded:hover > .menu--level-1,
  .menu-item--expanded:focus-within > .menu--level-1 {
    display: block;
  }

  .menu--level-1 a {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
  }

  .menu--level-1 a:hover,
  .menu--level-1 a:focus-visible {
    background: var(--color-bg-surface);
  }

  .menu--level-2 {
    padding-left: var(--space-4);
  }
}

/* ---------- DRAWER (< 995px) ---------- */

@media (max-width: 994px) {
  .otb-header__bar {
    flex-wrap: wrap;
    align-content: flex-start;
    padding-right: var(--space-3);
    padding-left: var(--container-padding-mobile);
  }

  .otb-header__menu,
  .otb-search-toggle--menu {
    display: none;
  }

  .otb-header.is-menu-open {
    position: fixed;
    inset: 0;
    z-index: var(--z-mobile-drawer);
    overflow-y: auto;
  }

  .is-menu-open .otb-header__bar {
    height: auto;
    min-height: var(--header-height);
  }

  /* A full-width row under the bar's logo and buttons. */
  .is-menu-open .otb-header__menu {
    display: block;
    flex: 0 0 100%;
    padding: var(--space-2) var(--space-2) var(--space-10) 0;
  }

  .menu--root {
    border-top: var(--border-width-thin) solid var(--color-border-light);
  }

  .menu--root > .menu-item {
    padding: var(--space-1) 0;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
  }

  .menu--root > .menu-item > .menu-item__link a {
    display: flex;
    align-items: center;
    min-height: 56px;
    font-family: var(--font-family-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-normal);
    line-height: 1;
  }

  .menu--level-1 {
    padding-bottom: var(--space-2);
  }

  .menu--level-1 a,
  .otb-account-nav a {
    display: flex;
    align-items: center;
    min-height: var(--control-height);
  }

  .menu--level-1 a {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
  }

  .menu--level-2 {
    padding-left: var(--space-4);
  }

  .otb-header__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-4);
  }

  .otb-header__subscribe {
    margin-top: var(--space-2);
  }
}