/* Language switcher and header fit — enqueued after geim-main in inc/setup.php.
   Kept out of main.css so the multilingual layer lifts out in one piece.
   The header is navy (or transparent over a dark hero) on every page, so
   the control is white and the panel is light, matching the site's cards.

   The second half of this file carries the header breakpoints. They live
   here rather than in main.css because the translated menus are what
   exposed the problem, and because the two sets have to be read together. */

.lang-switch { position: relative; flex: 0 0 auto; }

.lang-switch > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}

.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::marker { content: ""; }

.lang-switch > summary:hover,
.lang-switch > summary:focus-visible {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .55);
}

.lang-switch[open] > summary {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .6);
}

.lang-switch-globe { display: inline-flex; align-items: center; }

.lang-switch-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .8;
  transition: transform .2s ease;
}

.lang-switch[open] .lang-switch-caret { transform: rotate(180deg); }

.lang-switch-list {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 120;
  min-width: 178px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white, #fff);
  border: 1px solid var(--line, #d7e6ee);
  border-radius: 14px;
  box-shadow: var(--shadow, 0 18px 44px rgba(0, 55, 81, .12));
}

.lang-switch-list li { margin: 0; list-style: none; }

.lang-switch-list a {
  display: block;
  padding: 9px 13px;
  border-radius: 9px;
  color: var(--ink, #0d1b24);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 0;
}

.lang-switch-list a:hover,
.lang-switch-list a:focus-visible {
  background: var(--ice, #effaff);
  color: var(--navy, #003751);
  text-decoration: none;
}

.lang-switch-list .is-current a { color: var(--pink, #d71149); font-weight: 700; }

@media (max-width: 900px) {
  .lang-switch-current { display: none; }
  .lang-switch > summary { padding: 7px 9px; gap: 5px; }
}

/* =====================================================================
   Header fit

   main.css switches the menu to a slide-in drawer at 900px, but the
   header needs more room than that: logo, six menu items, the language
   control, the phone number and the quote button do not fit on one line
   much below 1280px. Between 900 and 1280 the menu was wrapping onto two
   or three lines and pushing the quote button off the right edge.

   Two steps, applied to every language:

     to 1340px  the header phone link gives way to the menu. The number is
                still in the hero, in the footer and on the WhatsApp
                button, so nothing is lost.
     to 1149px  the drawer, the same one main.css uses at 900px. The two
                overlap rather than meet, so there is no gap.

   NOTE: the drawer width is also in assets/js/main.js (NAV_DRAWER), which
   decides when a parent menu item opens its submenu instead of navigating.
   Change both together.
   ================================================================== */

@media (max-width: 1340px) {
  .header-phone { display: none; }
}

@media (max-width: 1149px) {
  .nav-toggle { display: inline-flex; }

  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    margin: 0;
    padding: 24px var(--gutter) 60px;
    background: var(--navy);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s;
  }

  body.nav-open .primary-nav { transform: translateX(0); }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list > li { border-bottom: 1px solid rgba(255, 255, 255, .12); }

  .nav-list > li > a {
    width: 100%;
    padding: 15px 0;
    font-size: 18px;
    white-space: normal;
  }

  /* The submenu is a centred dropdown on desktop, so it carries
     position:absolute and a translate(-50%) that would throw it off the
     left edge inside the drawer. The hover and focus-within rules in
     main.css re-apply that transform and outrank a plain .sub-menu
     selector, so all three states are unwound together here — otherwise
     opening the menu with a click or the keyboard pushes it off screen. */
  .nav-list > li > .sub-menu,
  .nav-list > li:hover > .sub-menu,
  .nav-list > li:focus-within > .sub-menu {
    position: static;
    display: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    padding: 0 0 12px 12px;
    background: transparent;
    box-shadow: none;
  }

  .nav-list > li.is-open > .sub-menu,
  .nav-list > li.is-open:hover > .sub-menu,
  .nav-list > li.is-open:focus-within > .sub-menu {
    display: block;
  }

  .sub-menu a { padding: 9px 0; color: rgba(255, 255, 255, .82); }
  .sub-menu a:hover { background: transparent; color: #fff; }

  .header-actions { gap: 10px; margin-left: auto; }
}

/* ---------------------------------------------------------------------
   Translated menus are longer again — "Versandverfahren T1/T2" against
   "Transit T1 & T2" — so between the drawer and full width they need the
   phone link gone earlier and the labels tightened, or they still wrap.
   ------------------------------------------------------------------ */

@media (max-width: 1400px) {
  html:is([lang="pl"], [lang="ro"], [lang="de"], [lang="nl"], [lang="fr"], [lang="es"]) .header-phone {
    display: none;
  }

  html:is([lang="pl"], [lang="ro"], [lang="de"], [lang="nl"], [lang="fr"], [lang="es"]) .nav-list {
    gap: 14px;
  }

  html:is([lang="pl"], [lang="ro"], [lang="de"], [lang="nl"], [lang="fr"], [lang="es"]) .nav-list > li > a {
    white-space: nowrap;
    font-size: 14px;
  }
}

/* Inside the drawer the labels go back to full size and are free to wrap. */
@media (max-width: 1149px) {
  html:is([lang="pl"], [lang="ro"], [lang="de"], [lang="nl"], [lang="fr"], [lang="es"]) .nav-list {
    gap: 0;
  }

  html:is([lang="pl"], [lang="ro"], [lang="de"], [lang="nl"], [lang="fr"], [lang="es"]) .nav-list > li > a {
    white-space: normal;
    font-size: 18px;
  }
}