/* Top ribbon: Arch-iD logo and title on the far left followed by search, languages in the
   exact centre, account link on the right; the page navigation ribbon sits below.
   Physical positions are kept when the page language switches to RTL. */
html body .site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "start lang end"
    "ribbon ribbon ribbon";
  align-items: center;
  column-gap: 16px;
  row-gap: 10px;
  direction: ltr;
}
.site-header > .header-start {
  grid-area: start;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  justify-self: start;
}
.site-header > .header-start > .w-search {
  flex: 0 1 230px;
  min-width: 150px;
  max-width: 230px;
  margin: 0;
}
.site-header > .header-start > .w-search input { unicode-bidi: plaintext; }
.site-header > .header-start > .brand { flex: 0 1 auto; }
.site-header > .lang-switch {
  grid-area: lang;
  justify-self: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.site-header > [data-ark-session] {
  grid-area: end;
  justify-self: end;
  min-width: 0;
}
.site-header > .navigation-ribbon,
.site-header > .nav {
  grid-area: ribbon;
  min-width: 0;
}
html[dir="rtl"] .site-header > .lang-switch,
html[dir="rtl"] .site-header > [data-ark-session] { direction: rtl; }

/* Narrower screens keep the same order: logo then search, languages centred. */
@media (max-width: 1200px) {
  html body .site-header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
      "start start start"
      ". lang end"
      "ribbon ribbon ribbon";
  }
  .site-header > .header-start { justify-self: stretch; }
}
@media (max-width: 560px) {
  html body .site-header {
    grid-template-areas:
      "start start start"
      "lang lang lang"
      "end end end"
      "ribbon ribbon ribbon";
  }
  .site-header > .header-start { flex-wrap: wrap; gap: 10px; }
  .site-header > .header-start > .brand { flex: 1 1 100%; }
  .site-header > .header-start > .w-search { flex: 1 1 0; min-width: 0; max-width: none; }
  .site-header > .header-start > .archid-bot-button { flex: 0 0 auto; }
  .site-header > [data-ark-session] { justify-self: center; }
}

/* Mobile: a slim app-style bar (logo, title, Arch-bot, menu button). Search, the page links,
   languages and the account link fold into a panel that opens from the menu button.
   Desktop and tablet layouts above 760px are untouched. */
.site-header > .mobile-menu-toggle { display: none; }
@media (max-width: 760px) {
  html body .site-header.has-mobile-menu {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "start toggle";
    column-gap: 10px;
    row-gap: 12px;
    padding: 8px 14px;
  }
  html body .site-header.has-mobile-menu.is-menu-open {
    grid-template-areas:
      "start toggle"
      "ribbon ribbon"
      "lang lang"
      "end end";
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 16px;
    z-index: 1000;
  }
  .site-header.has-mobile-menu > .header-start {
    flex-wrap: wrap;
    gap: 8px 10px;
    justify-self: stretch;
  }
  .site-header.has-mobile-menu > .header-start > .brand { flex: 1 1 0; min-width: 0; gap: 8px; align-items: center; min-height: 44px; }
  .site-header.has-mobile-menu .brand > .brand-mark > img,
  .site-header.has-mobile-menu .brand .header-synced-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .site-header.has-mobile-menu .brand .brand-copy { min-width: 0; }
  .site-header.has-mobile-menu .brand .brand-title { font-size: 16px; line-height: 1.1; }
  .site-header.has-mobile-menu .brand .brand-byline { display: none; }
  .site-header.has-mobile-menu > .header-start > .archid-bot-button {
    order: 2;
    height: 38px;
    padding: 0 10px;
    gap: 0;
  }
  .site-header.has-mobile-menu > .header-start > .archid-bot-button .archid-bot-label { display: none; }
  .site-header.has-mobile-menu > .header-start > .w-search {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }

  /* Closed: only the slim bar is visible. */
  .site-header.has-mobile-menu:not(.is-menu-open) > .header-start > .w-search,
  .site-header.has-mobile-menu:not(.is-menu-open) > .navigation-ribbon,
  .site-header.has-mobile-menu:not(.is-menu-open) > .nav,
  .site-header.has-mobile-menu:not(.is-menu-open) > .lang-switch,
  .site-header.has-mobile-menu:not(.is-menu-open) > [data-ark-session] { display: none !important; }

  /* Open: page links become a vertical list. */
  .site-header.has-mobile-menu > .navigation-ribbon { display: block; }
  .site-header.has-mobile-menu .navigation-ribbon-arrow { display: none !important; }
  html body .site-header.has-mobile-menu .nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    overflow: visible;
    padding: 2px 0;
    scroll-snap-type: none;
  }
  html:root body .site-header.has-mobile-menu .nav a,
  html:root body .site-header.has-mobile-menu .nav-studio-menu > summary {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    white-space: normal;
    text-align: start;
  }
  .site-header.has-mobile-menu .nav-studio-menu > summary { justify-content: space-between; }
  .site-header.has-mobile-menu .nav-studio-menu { width: 100%; }
  html body .site-header.has-mobile-menu .nav-studio-menu .design-studio-options {
    position: static !important;
    width: auto;
    max-width: none;
    margin-top: 6px;
    box-shadow: none;
  }
  .site-header.has-mobile-menu > .lang-switch { justify-self: center; }
  .site-header.has-mobile-menu > [data-ark-session] { justify-self: stretch; text-align: center; }
  .site-header.has-mobile-menu > [data-ark-session] > a { display: block; }

  /* Menu button: three bars that turn into a cross. */
  html:root body .site-header > button.mobile-menu-toggle {
    grid-area: toggle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    border-radius: 14px;
    cursor: pointer;
  }
  .mobile-menu-toggle .mobile-menu-bars,
  .mobile-menu-toggle .mobile-menu-bars::before,
  .mobile-menu-toggle .mobile-menu-bars::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, background-color .2s ease;
  }
  .mobile-menu-toggle .mobile-menu-bars { position: relative; color: #30424d; }
  .mobile-menu-toggle .mobile-menu-bars::before,
  .mobile-menu-toggle .mobile-menu-bars::after { content: ""; position: absolute; left: 0; }
  .mobile-menu-toggle .mobile-menu-bars::before { top: -6px; }
  .mobile-menu-toggle .mobile-menu-bars::after { top: 6px; }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-bars { background: transparent; }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-bars::before { transform: translateY(6px) rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-bars::after { transform: translateY(-6px) rotate(-45deg); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .mobile-menu-toggle .mobile-menu-bars,
  .mobile-menu-toggle .mobile-menu-bars::before,
  .mobile-menu-toggle .mobile-menu-bars::after { transition: none; }
}

/* Desktop and tablet: the separate log-in button above the page ribbon is removed.
   Login stays available from the Arch-iD Studio menu; the mobile menu panel keeps its link. */
@media (min-width: 761px) {
  .site-header > [data-ark-session] { display: none !important; }
}

/* The button for the open page looks inactive, like the locked Client studio button. */
a.is-current-page[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Desktop and tablet: Arch-bot and the language options sit together at the top right,
   in the spot the log-in button used to occupy. The search bar sits in the centre of the
   top bar: the logo/title and the search become direct grid items, and the two outer
   columns share the leftover space equally so the search lands at the true centre.
   Arch-bot shares the right column with the languages, offset by their measured width. */
@media (min-width: 761px) {
  html body .site-header.has-top-right-bot {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
      "brand search right"
      "ribbon ribbon ribbon";
  }
  .site-header.has-top-right-bot > .header-start { display: contents; }
  .site-header.has-top-right-bot > .header-start > .brand { grid-area: brand; justify-self: start; min-width: 0; }
  .site-header.has-top-right-bot > .header-start > .w-search {
    grid-area: search;
    justify-self: center;
    width: clamp(220px, 26vw, 340px);
    min-width: 0;
    max-width: none;
  }
  .site-header.has-top-right-bot > .archid-bot-button {
    grid-area: right;
    justify-self: end;
    margin-inline-end: calc(var(--header-lang-width, 180px) + 12px);
  }
  .site-header.has-top-right-bot > .lang-switch { grid-area: right; justify-self: end; }
}
/* Tablet: not enough width for one row, so the search drops to its own centred row. */
@media (min-width: 761px) and (max-width: 1200px) {
  html body .site-header.has-top-right-bot {
    grid-template-areas:
      "brand brand right"
      ". search ."
      "ribbon ribbon ribbon";
  }
  .site-header.has-top-right-bot > .header-start > .w-search { width: min(420px, 60vw); }
}