/* ==================================================
   FHEERA — LEGAL PAGE
================================================== */

.legal-page {
  min-height: 100vh;
  background: #080807;
  padding-top: calc(var(--nav-height) + 56px);
  padding-bottom: 120px;
}

.legal-container {
  width: min(100% - 64px, 680px);
  margin-inline: auto;
}

/* ========================================
   TOP NAV
======================================== */

.legal-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 5rem;
  padding-bottom: 1.5rem;

  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.legal-tabs {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.legal-tabs a {
  position: relative;

  font-family: "Jost", sans-serif;

  font-size: 0.72rem;
  font-weight: 400;

  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: rgba(245,242,238,0.38);

  transition:
    color .3s ease,
    opacity .3s ease;
}

.legal-tabs a:hover,
.legal-tabs a.active {
  color: var(--accent);
}

.legal-lang {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  font-family: "Jost", sans-serif;

  font-size: 0.62rem;
  font-weight: 400;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.legal-lang span {
  cursor: pointer;
  color: rgba(245,242,238,0.36);
  transition: color .3s ease;
}

.legal-lang span.active {
  color: var(--accent);
}

/* ========================================
   TITLE
======================================== */

.legal-page h1 {
  font-family: "Cormorant Garamond", serif;

  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 300;

  line-height: 0.92;
  letter-spacing: -0.045em;

  color: rgba(255,255,255,0.96);

  margin:
    0
    0
    3.5rem;
}

/* ========================================
   SECTION
======================================== */

.legal-section {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.legal-section:last-child {
  border-bottom: none;
}

/* ========================================
   ACCORDION
======================================== */

.legal-accordion {
  position: relative;

  cursor: pointer;

  padding:
    1.45rem
    2rem
    1.45rem
    0;

  font-family: "Jost", sans-serif;

  font-size: 0.92rem;
  font-weight: 400;

  letter-spacing: 0.04em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.88);

  transition:
    color .3s ease,
    opacity .3s ease;
}

.legal-accordion:hover {
  color: var(--accent);
}

.legal-accordion::after {
  content: '+';

  position: absolute;

  right: 0;
  top: 50%;

  transform: translateY(-50%);

  font-family: "Jost", sans-serif;

  font-size: 0.8rem;
  font-weight: 300;

  color: rgba(184,151,90,0.72);

  transition: transform .3s ease;
}

.legal-accordion.active::after {
  content: '−';
}

/* ========================================
   PANEL
======================================== */

.legal-panel {
  display: none;

  padding:
    0
    0
    2rem;
}

.legal-panel p {
  max-width: 640px;

  font-family: "Jost", sans-serif;

  font-size: 0.98rem;
  font-weight: 300;

  line-height: 1.9;
  letter-spacing: 0.01em;

  color: rgba(245,242,238,0.68);

  margin:
    0
    0
    1rem;
}

.legal-panel strong {
  font-weight: 400;
  color: rgba(255,255,255,0.92);
}

.legal-panel strong {
  color: rgba(255,255,255,0.9);
  font-weight: 400;
}

/* ========================================
   BACK LINK
======================================== */

.legal-back {
  display: inline-flex;
  align-items: center;

  margin-top: 5rem;

  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.04em;

  color: rgba(245,242,238,0.42);

  transition:
    color .3s ease,
    transform .3s ease;
}

.legal-back:hover {
  color: var(--accent);
  transform: translateX(4px);
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .legal-page {
    padding-top: calc(var(--nav-height) + 36px);
  }

  .legal-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;

    margin-bottom: 4rem;
  }

  .legal-tabs {
    gap: 1rem;
    flex-wrap: wrap;
  }

  .legal-page h1 {
    margin-bottom: 2.5rem;
  }

  .legal-accordion {
    font-size: 1.35rem;
    padding: 1.35rem 2rem 1.35rem 0;
  }

  .legal-panel p {
    max-width: 100%;
    font-size: 0.92rem;
    line-height: 1.85;
  }
}

.legal-accordion {
  transition:
    color .3s ease,
    transform .3s ease,
    opacity .3s ease;
}

.legal-accordion:hover {
  color: var(--accent);
  transform: translateX(4px);
}