/* Site navbar (markup and behaviour: includes/navbar.html).
 *
 * Standalone: it does not lean on the purged Tailwind build, so any class can
 * be added here freely. The bar is 97px tall including its 1px bottom border,
 * which the pages' own top padding is built around, so keep that height if
 * you change the layout.
 *
 * States
 *   default             solid: white, dark text, a light shadow
 *   .tc-nav--overlay    homepage only, while at the top: transparent over the
 *                       hero, white logo and text (added by the sync script)
 *   .is-solid           overlay page scrolled away from the top (script)
 *   .is-hidden          slid up out of view while scrolling down (script)
 */

.tc-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  /* The site CSS still carries a bare `header { width:1200px; max-width:90%;
     display:grid; grid-template-rows:50px; … }` rule from an old template;
     undo it here so the navbar is a full-width block. */
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  grid-template: none;
  justify-content: normal;
  align-items: normal;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(15, 31, 99, 0.06), 0 6px 16px -8px rgba(15, 31, 99, 0.25);
  color: #0a0a0a;
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.tc-nav *,
.tc-nav *::before,
.tc-nav *::after {
  box-sizing: border-box;
}

.tc-nav.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.tc-nav__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Logo on the left; the rest, ending with the language flag, on the right. */
.tc-nav__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
}

/* Logo: the dark one, swapped for the white one over the hero. */

.tc-nav__logo {
  display: flex;
  align-items: center;
  flex: none;
  margin-inline-end: auto;
}

.tc-nav__logo img {
  display: block;
  width: auto;
  height: 4rem;
}

.tc-nav__logo .tc-nav__logo-light {
  display: none;
}

/* Desktop: links, currency, chat, cart (the language flag follows, on every
   screen size) */

.tc-nav__desktop {
  display: none;
  align-items: center;
  gap: 0.75rem;
}

.tc-nav__links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-inline-end: 0.75rem;
}

.tc-nav__link {
  display: block;
  padding: 0.5rem 0;
  color: #4b5563;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.tc-nav__link:hover {
  color: #0f1f63;
}

.tc-nav__link.is-active {
  color: #0f1f63;
  font-weight: 700;
}

/* Currency (EUR) and language (flag): each a button that opens a menu */

.tc-nav__prefwrap {
  position: relative;
  flex: none;
}

.tc-nav__pref,
.tc-nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.5rem;
  margin: 0;
  padding: 0 0.6rem 0 0.75rem;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: transparent;
  color: #0a0a0a;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.15s ease;
}

/* The flag alone, in a square like the cart and menu buttons. */
.tc-nav__lang {
  justify-content: center;
  width: 2.5rem;
  padding: 0;
}

.tc-nav__pref:hover,
.tc-nav__lang:hover,
.tc-nav__lang[aria-expanded="true"] {
  background-color: rgba(15, 31, 99, 0.05);
}

.tc-nav__chevron {
  display: block;
  width: 1rem;
  height: 1rem;
  opacity: 0.6;
  transition: transform 0.15s ease;
}

[aria-expanded="true"] > .tc-nav__chevron {
  transform: rotate(180deg);
}

/* Flags: picked by the element's language (the page's own on the button,
   each link's lang in the menu), so the markup needs no image per page. */

.tc-nav__flag {
  display: block;
  flex: none;
  width: 1.5rem;
  height: 1.125rem;
  border-radius: 3px;
  background: #e5e7eb no-repeat center / 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(15, 31, 99, 0.15);
}

.tc-nav__flag:lang(en) {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'><path fill='%23012169' d='M0 0h640v480H0z'/><path fill='%23fff' d='m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z'/><path fill='%23c8102e' d='m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z'/><path fill='%23fff' d='M241 0v480h160V0zM0 160v160h640V160z'/><path fill='%23c8102e' d='M0 193v96h640v-96zM273 0v480h96V0z'/></svg>");
}

.tc-nav__flag:lang(fr) {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1' preserveAspectRatio='none'><path fill='%23002654' d='M0 0h1v1H0z'/><path fill='%23fff' d='M1 0h1v1H1z'/><path fill='%23ce1126' d='M2 0h1v1H2z'/></svg>");
}

.tc-nav__flag:lang(de) {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 3' preserveAspectRatio='none'><path fill='%23000' d='M0 0h1v1H0z'/><path fill='%23d00' d='M0 1h1v1H0z'/><path fill='%23ffce00' d='M0 2h1v1H0z'/></svg>");
}

.tc-nav__flag:lang(es) {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 4' preserveAspectRatio='none'><path fill='%23aa151b' d='M0 0h1v4H0z'/><path fill='%23f1bf00' d='M0 1h1v2H0z'/></svg>");
}

.tc-nav__flag:lang(it) {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1' preserveAspectRatio='none'><path fill='%23009246' d='M0 0h1v1H0z'/><path fill='%23fff' d='M1 0h1v1H1z'/><path fill='%23ce2b37' d='M2 0h1v1H2z'/></svg>");
}

.tc-nav__flag:lang(nl) {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 3' preserveAspectRatio='none'><path fill='%23ae1c28' d='M0 0h1v1H0z'/><path fill='%23fff' d='M0 1h1v1H0z'/><path fill='%2321468b' d='M0 2h1v1H0z'/></svg>");
}

.tc-nav__flag:lang(pt) {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'><path fill='%23046a38' d='M0 0h256v480H0z'/><path fill='%23da291c' d='M256 0h384v480H256z'/><circle cx='256' cy='240' r='104' fill='none' stroke='%23ffe900' stroke-width='32'/><path fill='%23fff' d='M206 172h100v86a50 50 0 0 1-100 0z'/><path fill='%23da291c' d='M222 188h68v68a34 34 0 0 1-68 0z'/></svg>");
}

.tc-nav__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 18rem;
  padding: 0.75rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 12px 28px -12px rgba(15, 31, 99, 0.35);
  color: #0a0a0a;
}

.tc-nav__panel[hidden],
.tc-nav__drawer[hidden] {
  display: none;
}

.tc-nav__group {
  margin: 0 0 0.35rem;
  padding: 0 0.25rem;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tc-nav__opts + .tc-nav__group {
  margin-top: 0.85rem;
}

.tc-nav__opts {
  display: grid;
  gap: 0.25rem;
}

.tc-nav__opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: #334155;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.tc-nav__opt b {
  min-width: 2.25rem;
  color: #0f1f63;
  font-weight: 600;
}

.tc-nav__opt:hover {
  background: #f8fafc;
}

.tc-nav__opt[aria-pressed="true"],
.tc-nav__opt[aria-current="true"] {
  border-color: #0f1f63;
  background: rgba(0, 204, 179, 0.1);
  color: #0f1f63;
}

/* Language options are links to the page in each language, two per row. */
a.tc-nav__opt {
  box-sizing: border-box;
  text-decoration: none;
}

.tc-nav__opts--lang {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tc-nav__opts--lang .tc-nav__opt {
  gap: 0.5rem;
}

.tc-nav__opts--lang .tc-nav__flag {
  width: 1.25rem;
  height: 0.9375rem;
  border-radius: 2px;
}

/* WhatsApp: the desktop "Chat with us" button and the icon-only phone one.
   The only coloured control in the bar. .tc-nav in front out-ranks the
   site-wide .wa-cta colours. */

.tc-nav .tc-nav__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background-color: #25d366;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.tc-nav .tc-nav__wa:hover {
  background-color: #1da851;
}

.tc-nav__wa svg {
  display: block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: #fff;
}

.tc-nav .tc-nav__wa--icon {
  width: 2.5rem;
  padding: 0;
}

/* Cart: neutral outline */

.tc-nav__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: transparent;
  color: #0f1f63;
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.15s ease;
}

.tc-nav__cart:hover {
  background-color: rgba(15, 31, 99, 0.05);
}

.tc-nav__cart svg {
  display: block;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

/* Phone and tablet: logo, chat, menu; everything else in the drawer */

.tc-nav__mobile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tc-nav__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: transparent;
  color: #0a0a0a;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.15s ease;
}

.tc-nav__menu:hover {
  background-color: rgba(15, 31, 99, 0.05);
}

.tc-nav__menu svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

.tc-nav__menu .tc-nav__menu-close,
.tc-nav__menu[aria-expanded="true"] .tc-nav__menu-open {
  display: none;
}

.tc-nav__menu[aria-expanded="true"] .tc-nav__menu-close {
  display: block;
}

.tc-nav__drawer {
  max-height: calc(100vh - 97px);
  max-height: calc(100dvh - 97px);
  overflow-y: auto;
  padding: 0.5rem 1rem 1.5rem;
  border-top: 1px solid #e5e5e5;
  background: #fff;
}

.tc-nav__dlinks {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.tc-nav__dlink {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  border-bottom: 1px solid #f1f5f9;
  color: #0f1f63;
  font-weight: 500;
  text-decoration: none;
}

.tc-nav__dlink.is-active {
  font-weight: 700;
}

.tc-nav__dlink svg {
  width: 1.1rem;
  height: 1.1rem;
}

.tc-nav__drawer .tc-nav__opts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Transparent over the homepage hero, until the page scrolls or a menu opens.
   A faint top-down shade keeps the white text readable on bright photos. */

.tc-nav--overlay:not(.is-solid) {
  border-bottom-color: transparent;
  background-color: transparent;
  box-shadow: none;
}

.tc-nav--overlay::before {
  content: "";
  position: absolute;
  inset: 0 0 -1.5rem;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6, 14, 40, 0.45) 0%, rgba(6, 14, 40, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tc-nav--overlay:not(.is-solid)::before {
  opacity: 1;
}

.tc-nav--overlay:not(.is-solid) .tc-nav__logo-dark {
  display: none;
}

.tc-nav--overlay:not(.is-solid) .tc-nav__logo .tc-nav__logo-light {
  display: block;
}

.tc-nav--overlay:not(.is-solid) .tc-nav__link,
.tc-nav--overlay:not(.is-solid) .tc-nav__link.is-active {
  color: #fff;
}

.tc-nav--overlay:not(.is-solid) .tc-nav__link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.tc-nav--overlay:not(.is-solid) .tc-nav__pref,
.tc-nav--overlay:not(.is-solid) .tc-nav__lang,
.tc-nav--overlay:not(.is-solid) .tc-nav__cart,
.tc-nav--overlay:not(.is-solid) .tc-nav__menu {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.tc-nav--overlay:not(.is-solid) .tc-nav__pref:hover,
.tc-nav--overlay:not(.is-solid) .tc-nav__lang:hover,
.tc-nav--overlay:not(.is-solid) .tc-nav__cart:hover,
.tc-nav--overlay:not(.is-solid) .tc-nav__menu:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Keyboard focus */

.tc-nav a:focus-visible,
.tc-nav button:focus-visible {
  outline: 2px solid #0f1f63;
  outline-offset: 2px;
}

.tc-nav--overlay:not(.is-solid) .tc-nav__bar a:focus-visible,
.tc-nav--overlay:not(.is-solid) .tc-nav__bar > div > button:focus-visible,
.tc-nav--overlay:not(.is-solid) .tc-nav__pref:focus-visible {
  outline-color: #fff;
}

@media (min-width: 1024px) {
  .tc-nav__bar {
    gap: 0.75rem;
  }

  .tc-nav__desktop {
    display: flex;
  }

  .tc-nav__mobile,
  .tc-nav__drawer {
    display: none;
  }
}

/* Room in the desktop bar. Translated menus (fr/, de/, …) run longer than
   the English one, so their links and buttons always sit closer. Where the
   bar runs short, the chat button also shows only its icon, like the phone
   one (its label stays for screen readers): below 1280px for translated
   pages, below 1150px for English. The bar uses the visitor's system font
   (Poppins is not loaded), so this was measured in Segoe UI, Arial (about
   as wide as the Mac's) and Verdana, German being the longest menu. */
@media (min-width: 1024px) {
  html:not([lang="en"]) .tc-nav__desktop {
    gap: 0.5rem;
  }

  html:not([lang="en"]) .tc-nav__links {
    gap: 1.25rem;
    margin-inline-end: 0.25rem;
  }
}

@media (min-width: 1024px) and (max-width: 1149.98px) {
  .tc-nav__links {
    gap: 1.25rem;
  }

  .tc-nav .tc-nav__wa {
    padding: 0.5rem 0.65rem;
  }

  .tc-nav__wa-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (min-width: 1150px) and (max-width: 1279.98px) {
  html:not([lang="en"]) .tc-nav .tc-nav__wa {
    padding: 0.5rem 0.65rem;
  }

  html:not([lang="en"]) .tc-nav__wa-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tc-nav,
  .tc-nav::before,
  .tc-nav__link,
  .tc-nav__pref,
  .tc-nav__lang,
  .tc-nav__chevron,
  .tc-nav__cart,
  .tc-nav .tc-nav__wa,
  .tc-nav__menu {
    transition: none;
  }
}