/* Shared multilingual header: fit complete labels before choosing a layout. */
.header > .container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo space search" "nav nav nav";
  column-gap: 24px;
  row-gap: 8px;
  align-items: center;
}
.header .logo { grid-area: logo; justify-self: start; }
.header .logo img { display: block; }
.header .header-search { grid-area: search; display: block; margin: 0; }
.header .search-form input[type="text"] { width: 160px; min-width: 0; }
.header .main-nav { grid-area: nav; display: block; min-width: 0; margin: 0; justify-self: center; }
.header .main-nav > ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 24px;
  width: max-content;
}
.header .main-nav > ul > li { flex: 0 0 auto; margin: 0; }
.header .main-nav > ul > li > a {
  display: block;
  white-space: nowrap;
  line-height: 1.5;
  padding: 10px 0;
}
.header .mobile-menu-toggle { grid-area: menu; display: none; position: static; margin: 0; }
.header[data-nav-layout="single"] > .container {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo nav search";
}
.header[data-nav-layout="single"] .main-nav { justify-self: end; }
.header[data-nav-layout="stacked"] .main-nav { border-top: 1px solid var(--color-border); padding-top: 4px; }
.header[data-nav-layout="compact"] > .container {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo search menu";
}
.header[data-nav-layout="compact"] .main-nav { display: none; }
.header[data-nav-layout="compact"] .mobile-menu-toggle { display: block; }
.header .main-nav > ul > li:focus-within > .dropdown-menu { display: block; }
.header .main-nav .dropdown-menu { max-width: calc(100vw - 32px); }
.top-bar .top-bar-content { gap: 24px; }
.top-bar .top-bar-left { min-width: 0; }
.top-bar .top-bar-left h2 { overflow-wrap: anywhere; line-height: 1.5; }
.top-bar .top-bar-right { flex-shrink: 0; white-space: nowrap; align-items: center; }
@media (max-width: 768px) {
  .header > .container {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo search menu";
    column-gap: 12px;
  }
  .header .main-nav { display: none; }
  .header .mobile-menu-toggle { display: block; }
  .header .search-form input[type="text"] { display: none; }
  .header .logo img { height: 36px; }
}