/* ===== Legal pages (Terms / Privacy) — redesign (Figma) ===== */

/* Page background: solid pastel blue, overriding the site-wide MainBg image */
html { background: var(--color-blue-100); }
body::before { content: none; }

/* ===== Pill button (Uiverse "adamgiebl" mechanics + Zaba tokens) ===== */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-body-m); /* 16px */
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  padding: 12px 20px;
  border: 1.5px solid var(--color-black);
  border-radius: 32px;
  box-shadow: 0.1em 0.1em var(--color-black);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.pill-btn:hover {
  transform: translate(-0.05em, -0.05em);
  box-shadow: 0.15em 0.15em var(--color-black);
}
.pill-btn:active {
  transform: translate(0.05em, 0.05em);
  box-shadow: 0em 0em var(--color-black);
}
/* colour fills */
.pill-btn--pink { background: var(--color-accent-pink); }
.pill-btn--coral { background: var(--color-accent-coral); }
.pill-btn--green { background: var(--color-accent-green); }
.pill-btn--white { background: var(--color-accent-yellow); color: var(--color-white); }
/* icon-only pills (flag / social / hamburger) */
.pill-btn--icon { padding: 11px; }
.pill-btn--icon img { display: block; width: 22px; height: 22px; }
.pill-btn--icon i { display: block; font-size: 22px; line-height: 1; }
.pill-btn--flag img { border-radius: 50%; object-fit: cover; }

/* ===== Nav bar — 32px margin top / left / right ===== */
.legal-nav {
  position: relative;
  z-index: 100; /* stays above the full-screen menu overlay */
  margin: 32px 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.legal-logo {
  display: block;
  width: auto;
  height: 48px;
}
.legal-logo img { width: 100%; height: 100%; object-fit: cover; }
.legal-nav__right { display: flex; align-items: center; gap: 16px; }
/* Desktop-only nav pieces — hidden on mobile (mobile uses the hamburger dropdown) */
.legal-nav__left { display: none; }
.legal-nav__contact { display: none; }

/* ===== Hamburger menu ===== */
.nav-menu { position: relative; }
.nav-menu__toggle { background: var(--color-accent-blue); color: var(--color-white); } /* black button, white icon */
.nav-menu__toggle i { font-size: 24px; font-weight: 800;}

/* Dropdown panel (drops from under the hamburger, top-right — not full screen) */
.nav-overlay {
  position: fixed;
  top: clamp(78px, 13vw, 96px);
  right: clamp(16px, 4vw, 32px);
  z-index: 95;
  width: min(320px, calc(100vw - 32px));
  padding: 16px;
  background: var(--color-blue-100);
  border: 1px solid var(--color-black); /* thin border */
  border-radius: 28px;
  transform-origin: top right;
  animation: nav-pop 0.18s ease;
}
.nav-overlay[hidden] { display: none; }
.nav-overlay__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nav-overlay__list .pill-btn {
  justify-content: center;
  height: 52px;
  font-size: var(--font-size-body-m);
}
@keyframes nav-pop {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Desktop (≥881px): three-region bar — Help Center left, logo centred,
   Contact + language right. Hamburger and its dropdown are hidden. */
@media (min-width: 881px) {
  .nav-menu { display: none; }
  .nav-overlay,
  .nav-overlay[hidden] { display: none; } /* dropdown not used on desktop */

  .legal-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* left | logo | right */
    align-items: center;
  }
  .legal-nav__left  { display: flex; align-items: center; justify-self: start; }  /* Help Center → left */
  .legal-logo       { justify-self: center; }                                     /* logo → centre */
  .legal-nav__right { justify-self: end; }                                        /* language + Contact → right */
  .legal-nav__contact { display: inline-flex; order: 1; }                          /* Contact after the language flag */
  .legal-nav__right .lang-menu { order: 0; }                                       /* language flag first */
}

/* ===== Language switcher dropdown ===== */
.lang-menu { position: relative; }
.lang-menu__list {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 176px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--color-white);
  border: 2px solid var(--color-black);
  border-radius: 20px;
  
}
.lang-menu__list[hidden] { display: none; }
.lang-menu__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-label-primary);
  text-align: left;
  white-space: nowrap;
}
.lang-menu__option img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lang-menu__option:hover { background: rgb(from var(--color-label-primary) r g b / 0.06); }
.lang-menu__option.is-active { background: rgb(from var(--color-accent-green) r g b / 0.18); }

/* ===== Layout — 32px margin left / right / bottom (card centred, footer full width) ===== */
.legal-main {
  margin: 72px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}

/* ===== Card ===== */
.legal-card {
  width: 100%;
  max-width: 800px;
  background: var(--color-bg-primary);
  border-radius: 32px;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.legal-card__head { display: flex; flex-direction: column; gap: 20px; }
.legal-card__title { display: flex; flex-direction: column; gap: 8px; }
.legal-card h1 {
  font-size: clamp(var(--font-size-heading-xl), 7vw, var(--font-size-heading-xxl)); /* 48 → 64px */
  font-weight: var(--font-weight-black);
  color: var(--color-label-primary);
  line-height: var(--line-height-s);
}
.legal-updated {
  font-size: var(--font-size-body-l); /* 18px */
  font-weight: var(--font-weight-extrabold);
  color: var(--color-label-secondary);
}
.legal-intro {
  font-size: var(--font-size-body-l); /* 20px */
  font-weight: var(--font-weight-bold);
  color: var(--color-label-primary);
  line-height: var(--line-height-l);
}

/* Sections reuse the shared .content component; pin colours for the card */
.legal-card .content { margin-top: 0; }
.legal-card .content h2 { color: var(--color-label-primary); }
.legal-card .content p,
.legal-card .content li { color: var(--color-label-primary); }
.legal-card .content a:not(.link-plain) { color: var(--color-blue-600); }

/* ===== Footer — spans the main width (→ 32px sides), 32px bottom via .legal-main ===== */
.legal-footer {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.legal-footer__copy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-body-l); /* 18px */
  font-weight: var(--font-weight-bold);
  color: var(--color-label-secondary);
  white-space: nowrap;
}
.legal-footer__copy i { font-size: 22px; color: var(--color-accent-pink); }
.legal-footer__right { display: flex; gap: 16px; }

/* ===== Responsive ===== */
@media (max-width: 880px) {
  .legal-nav { margin: 20px 16px 0; }
  /* ↓↓↓ TERMS / PRIVACY — MOBILE TWEAKABLES ↓↓↓ */
  .legal-main { margin: 40px 16px 20px; gap: 40px; } /* nav→card & card→footer gap */
  .legal-card { padding: 24px 18px; border-radius: 24px; gap: 24px; } /* card padding + section gap */
  .legal-card h1 { font-size: 40px; }                /* page title size */
  .legal-intro { font-size: 16px; }                  /* intro paragraph size */
  .legal-card .content { gap: 28px; }                /* gap between sections */
  .legal-card .content h2 { font-size: 20px; }       /* section heading size */

  /* menu overlay: full-width panel with 16px side padding */
  .nav-overlay { left: 16px; right: 16px; width: auto; }

  /* footer: Threads left, Terms + Privacy right (full width, 16px sides via
     the container margin), copyright wrapped below */
  .legal-footer {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
  }
  .legal-footer > .pill-btn { order: 1; }          /* Threads → left */
  .legal-footer__right { order: 1; gap: 16px; }    /* Terms + Privacy → right */
  .legal-footer__copy {
    position: static;
    transform: none;
    order: 2;
    flex-basis: 100%;
    font-size: 16px;
    justify-content: center;
  }
}