/* =====================================================================
   Site header — D/M EU Header (Figma 10159:15357 / 10159:15356)
   Desktop: 36px price bar + 90px nav bar (1440 → 1240 content)
   Mobile:  36px price bar + 60px nav bar (390, 20px gutters)
   ===================================================================== */

/* ---- Sticky header on desktop/tablet (turned off for mobile below) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}
/* Sticky on tablet + desktop (≥768); static on phones. The responsive overhaul
   widened this to ≤1023.98, which dropped the sticky nav on tablet — restored. */
@media (max-width: 767.98px) {
  .site-header { position: static; }
}

/* ---- "Tippy top" announcement banner — under the header nav, site-wide.
   Hidden until main.js fetches /api/banner and reveals it. The background and
   text colour are set inline by main.js (text colour picked from the bg's
   luminance), so everything here inherits `color`. ---- */
.tippy-banner {
  width: 100%;
  background: #1f3954;        /* default; overridden inline by main.js */
  color: #fff;                /* default; overridden inline by main.js */
  font-size: var(--fs-14);
  line-height: 1.4;
}
.tippy-banner[hidden] { display: none; }
.tippy-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  padding-block: 9px;
  text-align: center;
}
.tippy-banner__text { color: inherit; }
.tippy-banner__cta {
  color: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.tippy-banner__cta[hidden] { display: none; }
.tippy-banner__cta:hover { opacity: 0.85; }
@media (max-width: 767.98px) {
  .tippy-banner { font-size: 13px; }
  .tippy-banner__inner { padding-inline: var(--pad-mobile); }
}

/* ---- Desktop sticky "Get the App" + QR widget (injected by main.js) ----
   Fixed bottom-right; hidden on mobile (which has its own bottom banner). */
.app-qr {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 850;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
/* hidden until scrolled past the fold (toggled by main.js) */
.app-qr--hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
}
.app-qr__label {
  background: #5a9bf0;
  color: var(--gray-0);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  white-space: nowrap;
  padding: 12px 52px 12px 22px;
  margin-right: -38px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(31, 57, 84, 0.22);
}
.app-qr__code {
  flex: none;
  width: 84px;
  height: 84px;
  padding: 7px;
  background: var(--og-blue);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(31, 57, 84, 0.3);
}
.app-qr__code img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: var(--gray-0);
}
@media (max-width: 767.98px) {
  .app-qr { display: none; }
}

/* ---- Shared logo lockup (icon mark + wordmark, absolute composition) ---- */
.logo { position: relative; display: block; flex: none; }
.logo__mark { position: absolute; top: 7.26%; right: 83.47%; bottom: 6.94%; left: 0; }
.logo__word { position: absolute; top: 0; right: 0; bottom: 0.01%; left: 21.75%; }
.logo__mark img, .logo__word img { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo--header        { width: 228px; height: 26px; }
.logo--header-mobile { width: 141px; height: 16px; }
.logo--footer        { width: 263px; height: 30px; }

/* ---- Price bar (shared base) ---- */
.price-bar { background: var(--color-bar); }
.price-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
}
.price-bar__item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; transition: opacity 0.15s ease; }
a.price-bar__item:hover { opacity: 0.8; }

/* "Live Charts ->" — 4th element of the desktop price strip */
.price-bar__live { gap: 6px; }
.price-bar__live .price-bar__metal { font-weight: var(--fw-medium); }
.price-bar__live-arrow {
  flex: none;
  width: 14px;
  height: 14px;
  background-color: var(--gray-0);
  -webkit-mask: url("../img/arrow-right.svg") no-repeat center / contain;
          mask: url("../img/arrow-right.svg") no-repeat center / contain;
}
.price-bar__metal,
.price-bar__price { color: var(--gray-0); font-size: var(--fs-14); white-space: nowrap; }
.price-bar__delta { font-size: var(--fs-14); white-space: nowrap; }
.price-bar__delta--up   { color: var(--green); }
.price-bar__delta--down { color: var(--red); }

/* Single triangle asset, tinted + rotated by direction */
.price-bar__arrow {
  flex: none;
  width: 12px;
  height: 6px;
  -webkit-mask: url("../img/price-arrow.svg") no-repeat center / contain;
          mask: url("../img/price-arrow.svg") no-repeat center / contain;
}
.price-bar__arrow--up   { background-color: var(--green); }
.price-bar__arrow--down { background-color: var(--red); transform: rotate(180deg); }

/* ---- Nav bar (desktop) ---- */
.nav-bar { background: var(--gray-0); border-bottom: 1px solid var(--color-border); }
.nav-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
}
.nav-bar__menu {
  display: flex;
  flex: 1 0 0;            /* Figma flex-[1_0_0]: own the row, push to the right */
  min-width: 0;           /* allow the gap clamp to take effect in long locales */
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2.08vw, 30px);
}
.nav-bar__link { color: var(--charcoal); font-size: var(--fs-14); white-space: nowrap; }
.nav-bar__link:hover { color: var(--dusty-blue); }
/* Top-level direct link (e.g. How It Works) — aligns with the dropdown toggles. */
.nav-bar__link--solo { display: inline-flex; align-items: center; text-decoration: none; }

/* "Live Charts" dropdown — CSS-only on hover/focus (mirrors the locale switcher). */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown__toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; background: none; border: 0; cursor: pointer;
  /* `font: inherit` resets the UA button font, but its shorthand also pulls in
     the inherited 16px size — re-assert the 14px nav-link size so the dropdown
     toggles match the solo "How It Works" link (and the dropdown options). */
  font: inherit; font-size: var(--fs-14);
}
.nav-dropdown__chevron { width: 9px; height: 6px; flex: none; transition: transform 0.2s ease; }
.nav-dropdown__menu {
  position: absolute; left: 0; top: calc(100% + 8px);
  display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px;
  min-width: 210px; list-style: none;
  background: var(--gray-0); border: 1px solid var(--color-border);
  border-radius: var(--radius-8); box-shadow: 0 8px 24px rgba(31, 57, 84, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; z-index: 50;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown:hover .nav-dropdown__chevron,
.nav-dropdown:focus-within .nav-dropdown__chevron { transform: rotate(180deg); }
.nav-dropdown__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 8px 10px; border-radius: var(--radius-8);
  color: var(--charcoal); font-size: var(--fs-14); white-space: nowrap;
}
.nav-dropdown__opt:hover { background: var(--gray-1); color: var(--dusty-blue); }
.nav-dropdown__metal { font-weight: var(--fw-semibold); }
.nav-dropdown__price { color: var(--gray-7); font-variant-numeric: tabular-nums; }

.locale { position: relative; }
.locale__toggle { display: flex; align-items: center; gap: 5px; }
.locale__flag { width: 22px; height: 22px; flex: none; max-width: none; border-radius: 50%; object-fit: cover; }
.locale__label { color: var(--charcoal); font-size: var(--fs-14); }
.locale__chevron { width: 9px; height: 6px; flex: none; transition: transform 0.2s ease; }
.locale__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  display: flex; gap: 8px; margin: 0; padding: 8px; list-style: none;
  background: var(--gray-0); border: 1px solid var(--color-border);
  border-radius: var(--radius-8); box-shadow: 0 8px 24px rgba(31, 57, 84, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; z-index: 50;
}
.locale:hover .locale__menu,
.locale:focus-within .locale__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.locale:hover .locale__chevron,
.locale:focus-within .locale__chevron { transform: rotate(180deg); }
.locale__opt { display: block; padding: 2px; border: 2px solid transparent; border-radius: 50%; line-height: 0; }
.locale__opt:hover { border-color: var(--color-border); }
.locale__opt--current { border-color: var(--dusty-blue); }
.locale__opt-flag { width: 26px; height: 26px; max-width: none; border-radius: 50%; object-fit: cover; display: block; }

/* ---- Mobile price bar + nav ---- */
.price-bar--mobile .price-bar__inner {
  width: 100%;
  padding-inline: var(--pad-mobile);
}
.price-bar--mobile .price-bar__item { gap: 5px; }
.price-bar--mobile .price-bar__metal,
.price-bar--mobile .price-bar__price,
.price-bar--mobile .price-bar__delta { font-size: var(--fs-12); }
.price-bar__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gray-0);
  font-size: var(--fs-12);
  white-space: nowrap;
}
.price-bar__cta img { width: 12px; height: 12px; }

.nav-bar--mobile .nav-bar__inner {
  width: 100%;
  padding-inline: var(--pad-mobile);
  height: 60px;
}
.nav-toggle { display: flex; align-items: center; }
.nav-toggle img { width: 18px; height: 16px; }

/* ---- Mobile drawer (hamburger menu: nav + language switcher) ---- */
.m-drawer[hidden] { display: none; }
.m-drawer { position: fixed; inset: 0; z-index: 1000; }
.m-drawer__overlay { position: absolute; inset: 0; background: rgba(10, 22, 35, 0.5); }
.m-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(82vw, 320px);
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: var(--gray-0); box-shadow: -8px 0 24px rgba(31, 57, 84, 0.18);
  overflow-y: auto; transform: translateX(100%); transition: transform 0.25s ease;
}
.m-drawer.is-open .m-drawer__panel { transform: translateX(0); }
.m-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.m-drawer__title { font-size: var(--fs-12); color: var(--gray-6); text-transform: uppercase; letter-spacing: 0.08em; }
.m-drawer__close { font-size: 28px; line-height: 1; color: var(--charcoal); }
.m-drawer__nav { display: flex; flex-direction: column; }
.m-drawer__link { display: block; padding: 14px 0; font-size: var(--fs-18); color: var(--charcoal); border-bottom: 1px solid var(--color-border); }
.m-drawer__link:hover { color: var(--dusty-blue); }
/* "Live Charts" expandable group (native <details>) */
.m-drawer__group { border-bottom: 1px solid var(--color-border); }
.m-drawer__summary {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 0; cursor: pointer; list-style: none;
}
.m-drawer__summary::-webkit-details-marker { display: none; }
.m-drawer__summary::after {
  content: ""; width: 12px; height: 8px; flex: none;
  background-color: var(--charcoal);
  -webkit-mask: url("../img/chevron-down.svg") no-repeat center / contain;
          mask: url("../img/chevron-down.svg") no-repeat center / contain;
  transition: transform 0.2s ease;
}
.m-drawer__group[open] .m-drawer__summary::after { transform: rotate(180deg); }
.m-drawer__sublist { list-style: none; margin: 0; padding: 0 0 10px 14px; }
.m-drawer__sublink {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 0; font-size: var(--fs-16); color: var(--charcoal);
}
.m-drawer__sublink:hover { color: var(--dusty-blue); }
.m-drawer__subprice { color: var(--gray-7); font-variant-numeric: tabular-nums; }
.m-drawer__lang { margin-top: 16px; }
.m-drawer__lang-label { font-size: var(--fs-12); color: var(--gray-6); text-transform: uppercase; letter-spacing: 0.08em; }
.m-drawer__lang-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.m-drawer__lang-opt { display: block; padding: 2px; border: 2px solid transparent; border-radius: 50%; line-height: 0; }
.m-drawer__lang-opt--current { border-color: var(--dusty-blue); }
.m-drawer__lang-flag { width: 34px; height: 34px; max-width: none; border-radius: 50%; object-fit: cover; display: block; }