/* Site navbar (_navbar.html + _navbar_mobile_script.html), the ONE header
   every page uses since 2026-10-21. Single source, delivered three ways:
     - lps.min.css      = lps/style.css + this file   (node extract-lp-css.js)
     - homepage.min.css = site.css + this file         (npm run css:inline-homepage)
     - basic_template.html (and sitemap.html) link /static/navbar.css directly
   so never copy these rules anywhere else. Hand-written localized templates
   get the same markup through localized_navbar() (app/site_navbar.py).

   Self-contained: it relies on no element rules from the page (the legacy
   bare `nav` / `nav a` rules are gone from lps/style.css and site.css since
   2026-10-21). Font, colour, smoothing, line-height and direction are
   pinned so the bar looks the same whatever the page's body styles are,
   including the RTL Arabic pages (the bar and its panel stay LTR there,
   app/site_navbar.py wraps the Arabic labels in <bdi>).

   Both minifiers strip spaces around `:` and `+`, so no descendant
   `:pseudo` selectors and no `calc(a + b)` in this file. */

.navbar-menu,
.menu-mobile {
  font-family: Inter, 'Inter Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: normal;
  letter-spacing: normal;
  color: #1b1f27;
  text-align: left;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

.navbar-menu,
.navbar-menu *,
.menu-mobile,
.menu-mobile * {
  box-sizing: border-box;
}

.navbar-menu {
  align-items: center;
  display: flex;
  justify-content: space-between;
  float: none;
  height: fit-content;
  margin: 0;
  padding: 0 8px 0 0;
  background-color: white;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .1);

  @media (min-width: 800px) {
    font-size: 12px;
  }

  @media (min-width: 1260px) {
    padding: 7px 24px;
    font-size: 14px;
  }
}

/* Every anchor in the bar: the box the legacy `nav a` rule used to give it.
   The per-class rules below override padding/display where they differ. */
.navbar-logo-container,
.desktop-dropdown,
.desktop-link,
.desktop-button,
.navbar-mobile-button {
  display: block;
  padding: 16px 16px 12px;
  text-decoration: none;
  text-align: left;
  color: inherit;
}

.navbar-logo-container {
  display: flex;
  padding: 0;
}

.navbar-menu .navbar-logo-container:hover {
  background: none;
}

.navbar-logo {
  height: 35px;
  width: auto;
  max-width: none;
  object-fit: contain;

  @media (min-width: 1260px) {
    height: 45px;
  }
}

.mobile-toggler {
  flex-direction: column;
  justify-content: center;
  width: fit-content;
  display: flex;
  cursor: pointer;
  align-items: center;
  padding: 5px 8px;
  background-color: white;

  @media (min-width: 1260px) {
      display: none;
  }
}

.line-mobile {
  width: 20px;
  height: 3px;
  margin: 2px 0;
  background-color: #333;
  transition: all 0.3s ease;
}

/* The toggle is a real <button>; reset its UA styles. */
button.mobile-toggler {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  color: inherit;
  font: inherit;
}

.mobile-toggler:focus-visible {
  outline: 2px solid #0066DE;
  outline-offset: -2px;
}

.mobile-toggler.mobile-open > :nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-toggler.mobile-open > :nth-child(2) {
  opacity: 0;
}

.mobile-toggler.mobile-open > :nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menu-mobile {
  flex-direction: column;
  display: none;
  padding: 10px 8px;
  background-color: white;
  border-bottom: 3px solid #0066DE;

  @media (min-width: 1260px) {
    display: none !important;
  }
}

.menu-mobile.mobile-open {
  display: flex;
}

.navbar-mobile-button {
  padding: 0;
  font-size: 16px;
  color: black;
  font-weight: 700;
}

/* My Orders / Login in the phone bar: the anchor fills the bar's height
   (36px incl. its 1px bottom border, which the -1px margin on the flexbox
   reaches over) and gets 8px side padding, so the tap target is >=36x44
   while the text sits where it did (gap 16px -> 0 + 2 x 8px padding). */
.navbar-buttons-flexbox .navbar-mobile-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0 8px;
  white-space: nowrap;
}

/* Localized labels (/de, /fr, /es) run longer than "My Orders" / "Login":
   never wrap them, and tighten the bar on small phones so both still fit (EN keeps 16px). */
@media (max-width: 420px) {
  :is(html[lang=de], html[lang=fr], html[lang=es]) .navbar-buttons-flexbox .navbar-mobile-button {
    padding: 0 6px;
    font-size: 15px;
  }
}

@media (max-width: 370px) {
  :is(html[lang=de], html[lang=fr], html[lang=es]) .navbar-buttons-flexbox .navbar-mobile-button {
    padding: 0 5px;
    font-size: 14px;
  }
}

.navbar-buttons-flexbox .navbar-mobile-button:hover {
  background-color: transparent;
  color: #0066DE;
}

.navbar-logo-flexbox {
  display: flex;
  align-items: center;
}

.navbar-buttons-flexbox {
  display: flex;
  gap: 0;
  align-items: stretch;
  align-self: stretch;
  margin: 0 -8px -1px 0;

  @media (min-width: 1260px) {
    display: none;
  }
}

/* Mobile panel: the Contact row and the Register button. */
.navbar-mobile-dropdown {
  font-weight: 700;
  gap: 4px;
  font-size: 16px;
  color: #494949;
  display: flex;
  padding: 14px 20px;
  text-decoration: none;
}

.navbar-mobile-button-fill {
  font-weight: 700;
  font-size: 14px;
  color: white;
  padding: 12px;
  background-color: #0066DE;
  border-radius: 5px;
  text-decoration: none;
}

/* Mobile menu panel. Opens fixed below the nav bar (top = --mm-top, set by
   _navbar_mobile_script.html, so a promo banner above the bar is accounted
   for) with its own scroll; the page behind is scroll-locked and dimmed by
   .menu-scrim. */
.mm-panel.mobile-open {
  position: fixed;
  top: var(--mm-top, 0px);
  left: 0;
  right: 0;
  z-index: 1001;
  max-height: calc(100vh - var(--mm-top, 0px));
  max-height: calc(100dvh - var(--mm-top, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0 16px;
  text-align: left;
}

.menu-scrim {
  position: fixed;
  top: var(--mm-top, 0px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.45);

  @media (min-width: 1260px) {
    display: none !important;
  }
}

.menu-scrim[hidden] {
  display: none;
}

.mm-group {
  border-bottom: 1px solid #eee;
}

.mm-acc {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  color: #222;
  text-align: left;
  cursor: pointer;
}

.mm-acc[aria-expanded=true] {
  color: #0066DE;
}

.mm-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.mm-chev {
  width: 10px;
  height: auto;
  margin-left: auto;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.mm-acc[aria-expanded=true] .mm-chev {
  transform: rotate(-90deg);
}

.mm-sub {
  display: flex;
  flex-direction: column;
  padding: 0 0 8px;
}

.mm-sub[hidden] {
  display: none;
}

/* Left edge lines up with the platform label: 20px row padding + 24px icon + 12px gap. */
.mm-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px 0 56px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
}

.mm-link:hover {
  background-color: #f3f4f6;
}

.mm-acc:focus-visible,
.mm-link:focus-visible,
.mm-row:focus-visible {
  outline: 2px solid #0066DE;
  outline-offset: -2px;
}

.menu-mobile .mm-row {
  min-height: 52px;
  align-items: center;
  padding: 0 20px;
  color: #222;
}

.mm-panel .navbar-mobile-button-fill {
  margin: 12px 20px 0;
  text-align: center;
}

/* Desktop menu (>=1260px). */
.desktop-button {
  margin-left: 4px;
  font-weight: 700;
  font-size: 14px;
  color: white;
  padding: 12px;
  background-color: #0066DE;
  border-radius: 5px;
}

.navbar-menu .desktop-button:hover {
  border-radius: 0;
}

.menu-desktop {
  background-color: white;
  display: none;
  align-items: center;

  @media (min-width: 1260px) {
    display: flex;
  }
}

/* Localized top-level labels run longer ("Otros servicios", "Iniciar sesión"):
   each item stays on one line, and below 1360px the localized bars tighten
   the item padding so the whole menu fits from 1260px (Spanish needs ~1104px
   at full padding, a 1260px window leaves 1053px). */
@media (min-width: 1260px) {
  .menu-desktop > .desktop-container > .desktop-dropdown,
  .menu-desktop > .desktop-link,
  .menu-desktop > .desktop-button {
    white-space: nowrap;
  }
}

@media (min-width: 1260px) and (max-width: 1359px) {
  :is(html[lang=de], html[lang=fr], html[lang=es], html[lang=pt-BR]) .menu-desktop > .desktop-container > .desktop-dropdown,
  :is(html[lang=de], html[lang=fr], html[lang=es], html[lang=pt-BR]) .menu-desktop > .desktop-link {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.desktop-dropdown {
  position: relative;
  width: fit-content;
  color: #494949;
  padding: 15px;
  font-size: 14px;
  font-weight: 600;
}

.desktop-link {
  color: #494949;
  font-size: 14px;
  font-weight: 600;
}

/* The hover the legacy `nav a:hover` rule gave every menu link. */
.navbar-menu .desktop-dropdown:hover,
.navbar-menu .desktop-link:hover,
.navbar-menu .desktop-button:hover {
  background-color: #0066DE;
  color: white;
}

.dropdown-arrow-down {
  width: 10px;
  transform: rotate(90deg);
}

.dropdown-arrow-right {
  width: 10px;
}

.desktop-submenu {
  width: 180px;
  position: absolute;
  display: none;
  background-color: white;
  z-index: 1;
  box-shadow: 2px 0 5px 0 rgba(0,0,0,0.48);
}

.submenu-right {
  display: flex;
  position: relative;
}

.button-full {
  width: 180px;
}

.submenu-extra-small > a {
  font-weight: 400;
}

.desktop-dropdown:hover + .desktop-submenu {
  display: block;
}

.desktop-submenu:hover {
  display: block;
}

.desktop-submenu.right {
  left: 100%;
}