/* Three stable zones: the site's identity, editorial destinations, visitor tools. */
.site-header .nav-row {
  display: grid;
  grid-template-columns: var(--header-brand-width, 160px) minmax(0, 1fr) auto;
  gap: 24px;
  width: min(1240px, calc(100% - 48px));
  min-height: 64px;
  padding: 10px 0;
  align-items: center;
}
.site-header .nav-row > .brand {
  display: flex;
  align-items: center;
  width: var(--header-brand-width, 160px);
  min-height: 44px;
  padding: 0;
  padding-inline-end: 20px;
  border-inline-end: 2px solid var(--neo-edge);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
}
.site-header .brand img { width: 138px; height: auto; max-height: 40px; object-fit: contain; }
:root[data-brand="leh"] .site-header { --header-brand-width: 98px; }
:root[data-brand="leh"] .site-header .brand img { width: 76px; height: 40px; }
:root[data-mode="dark"] .site-header .brand img { background: #faf8f0; padding: 4px; }
:root[data-brand="leh"][data-mode="dark"] .site-header .brand img { background: transparent; padding: 0; }
.site-header .header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.site-header .header-tools:empty { display: none; }
.site-header .header-tools > :is(.live-search, .mode-control, .mobile-nav) { flex: 0 0 auto; }
/* A 64px row with a 2px rule, extended by 2px on scroll without layout shift. */
.site-header, :root[data-brand="leh"] .site-header { border-bottom: 2px solid var(--ink); box-shadow: none; }
.site-header.is-scrolled, :root[data-brand="leh"] .site-header.is-scrolled { box-shadow: 0 2px 0 var(--ink); }

.site-header .desktop-nav { flex-wrap: wrap; overflow: visible; align-items: center; }
.header-nav-item { position: relative; display: flex; align-items: center; min-width: 0; }
.header-submenu { position: relative; }
.site-header .header-submenu > summary { display: flex; align-items: center; gap: 5px; min-height: 44px; padding: 8px 10px; cursor: pointer; list-style: none; font-weight: 700; white-space: nowrap; }
.header-submenu > summary::-webkit-details-marker { display: none; }
.header-submenu > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.header-submenu-links { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 50; display: flex; flex-direction: column; width: max-content; min-width: 180px; max-width: min(320px, calc(100vw - 32px)); padding: 8px; border: 2px solid var(--neo-edge, var(--ink)); border-radius: var(--radius-surface); background: var(--surface); box-shadow: -3px 3px 0 var(--neo-shadow, var(--ink)); }
.header-submenu:not([open]) > .header-submenu-links { display: none; }
.site-header .header-submenu-links a { white-space: normal; overflow-wrap: anywhere; }
.header-submenu-links .header-nav-item { flex-wrap: wrap; }
.header-submenu-links .header-submenu { position: static; }
.header-submenu-links .header-submenu-links { position: static; width: 100%; min-width: 0; margin-block: 4px; box-shadow: none; }
.site-header .header-nav-image { display: block; width: auto; height: 30px; max-width: 100px; object-fit: contain; }
.site-header .pill-nav a:has(.header-nav-image) { padding-block: 6px; }
.mobile-nav .header-nav-item { flex-wrap: wrap; }
.mobile-nav .header-submenu { position: static; }
.mobile-nav .header-submenu-links { position: static; width: 100%; min-width: 0; max-width: 100%; box-shadow: none; margin-block: 4px; }
.mobile-nav .header-submenu { flex: 1; }
@media (max-width: 980px) {
  .site-header .nav-row { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .site-header .nav-row > .brand { width: 144px; border: 0; padding: 0; }
  .site-header .brand img { width: 138px; }
  .site-header .desktop-nav { display: none; }
  .site-header .mobile-nav { display: block; margin: 0; position: static; }
  .site-header .mobile-nav > summary { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; list-style: none; cursor: pointer; }
  .mobile-nav > summary::-webkit-details-marker { display: none; }
  .site-header .mobile-nav > nav { position: absolute; inset: calc(100% - 4px) 0 auto; display: flex; flex-direction: column; align-items: stretch; padding: 12px; gap: 6px; background: var(--surface); border: 2px solid var(--neo-edge, var(--ink)); max-height: min(70dvh, 560px); overflow-y: auto; }
  .site-header .mobile-nav:not([open]) > nav { display: none; }
}
/* Long editor-authored labels wrap inside the available header width. */
.site-header .desktop-nav > a { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.site-header .header-nav-item { max-width: 100%; }
.site-header .header-nav-item > a { min-width: 0; flex-shrink: 1; white-space: normal; overflow-wrap: anywhere; }
.site-header .header-submenu { min-width: 0; max-width: 100%; }
.site-header .header-submenu > summary { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .site-header .nav-row { width: calc(100% - 32px); min-height: 64px; padding-block: 10px; gap: 12px; }
  .site-header .nav-row > .brand { width: 112px; min-height: 44px; }
  .site-header .brand img { width: 112px; max-height: 40px; }
  :root[data-brand="leh"] .site-header .brand img { width: 68px; height: 44px; }
  .site-header .header-tools { gap: 8px; }
}
/* Group labels share the selected-link plate, including a distinct edge and hard offset. */
.site-header .header-submenu > summary { position: relative; isolation: isolate; background: transparent; border: 0; border-radius: 0; }
.site-header .header-submenu > summary::before { content: ""; position: absolute; inset: 2px 2px 4px 4px; z-index: -1; border: 2px solid #100c07; background: var(--neo-sun); box-shadow: -3px 3px 0 #100c07; opacity: 0; pointer-events: none; }
.site-header .header-submenu[open] > summary, .site-header .header-submenu > summary:is(:hover, :focus-visible) { color: var(--neo-nav-ink); }
.site-header .header-submenu[open] > summary::before, .site-header .header-submenu > summary:is(:hover, :focus-visible)::before { opacity: 1; }

/* Crop only the bundled wordmark's original symbol; custom menu images stay untouched. */
.site-header .header-nav-mark { display: block; direction: ltr; width: 37.2px; height: 32px; overflow: hidden; }
.site-header .header-nav-mark .header-nav-image { width: auto; max-width: none; height: 32px; }
@media (max-width: 980px) {
  :root[data-brand="leh"] .site-header .nav-row > .brand { width: 76px; }
}
@media (max-width: 600px) {
  :root[data-brand="leh"] .site-header .nav-row > .brand { width: 68px; }
}

/* The input and its results belong to one fixed-width paper panel. */
.site-header .search-dialog {
  width: min(460px, calc(100vw - 48px));
  inset: calc(100% + 22px) auto auto 0;
  padding: 0;
  border: 2px solid var(--neo-edge);
  border-radius: 0;
  background: var(--surface);
  box-shadow: -5px 5px 0 var(--neo-shadow);
  overflow: hidden;
  max-height: min(70dvh, 600px);
  transform-origin: top left;
}
.site-header .search-dialog[open] { animation: none; }
.site-header .search-panel-heading {
  margin: 0;
  padding: 10px 16px;
  border-bottom: 2px solid var(--neo-edge);
  background: #b9e7f5;
  color: #100c07;
  font-size: 14px;
  font-weight: 700;
}
.site-header .live-search-form {
  height: 60px;
  padding-inline-start: 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--surface);
}
.site-header .live-search-form:focus-within { outline: none; box-shadow: none; }
.site-header .live-search-form input:focus-visible { outline: 2px solid var(--neo-edge); outline-offset: -4px; }
.site-header .live-search-form input { font-size: 18px; }
.site-header .live-search-form button { width: 44px; min-height: 44px; }
.site-header .live-search-form button:is(:hover, :focus-visible) { background: var(--neo-sun); color: #100c07; }
.site-header .live-results {
  position: static;
  padding: 10px 12px 12px;
  border: 0;
  border-top: 2px solid var(--neo-edge);
  border-radius: 0;
  box-shadow: none;
  max-height: min(calc(70dvh - 110px), 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-header .live-results p { margin: 0; padding: 2px 4px; }
.site-header .live-results li + li { border-top: 1px solid var(--line); }
.site-header .live-results .all-search-results { border-top: 2px solid var(--neo-edge); }
@media (max-width: 980px) {
  .site-header .live-search { position: static; }
  .site-header .search-dialog { width: min(460px, 100%); inset: calc(100% + 10px) auto auto 0; }
}

/* Two viewports arrange the untouched supplied artwork in Arabic reading order. */
.site-header .tv-bilingual-brand { display: flex; direction: rtl; align-items: center; gap: 4%; width: 100%; aspect-ratio: 1078 / 266; }
.site-header .tv-bilingual-brand > span { display: block; position: relative; overflow: hidden; height: 100%; flex-shrink: 0; }
.site-header .tv-brand-symbol { width: 31.35%; }
.site-header .tv-brand-wordmark { width: 64.94%; }
.site-header .brand .tv-bilingual-brand img { position: absolute; display: block; max-width: none; max-height: none; height: auto; padding: 0; background: transparent; top: -83.46%; }
.site-header .brand .tv-brand-symbol img { width: 378.70%; left: -36.09%; }
.site-header .brand .tv-brand-wordmark img { width: 182.86%; left: -65.57%; }
:root[data-mode="dark"] .site-header .tv-bilingual-brand { background: #faf8f0; }