/* Legacy pages: legal docs, FAQ, account deletion, /stores, /couriers, /support.
   Markup comes from pages/_legacy.page.mjs. Logical properties only. */

/* ------------------------------------------------------------ legal layout */
.legal { padding-block: var(--sp-6) var(--sp-8); }
.legal-single { max-width: calc(72ch + 2 * var(--gutter)); }
.legal-layout { display: grid; gap: var(--sp-5); }
.legal-layout__main { min-width: 0; max-width: 72ch; }
@media (min-width: 1024px) {
  .legal-layout { grid-template-columns: 280px minmax(0, 72ch); gap: var(--sp-7); justify-content: center; align-items: start; }
  .legal-layout__aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); max-height: calc(100vh - var(--header-h) - var(--sp-6)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
}

/* Track switcher pills (customer / courier / store). */
.track-pills { position: sticky; top: var(--header-h); z-index: 5; margin-block-end: var(--sp-5); padding-block: var(--sp-2); background: var(--paper); }
.track-pills ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.track-pills a {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding-inline: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--text);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.track-pills a .icon { color: var(--gold-text); }
.track-pills a:hover, .track-pills a:focus-visible { border-color: var(--gold-500); color: var(--gold-text); }

/* Table of contents (<details>; site.js opens it on desktop). */
.legal-toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.legal-toc > summary {
  list-style: none; display: flex; align-items: center; gap: var(--sp-2); min-height: 52px; padding-inline: var(--sp-4);
  cursor: pointer; font-family: var(--font-display); font-weight: 700; color: var(--text);
}
.legal-toc > summary::-webkit-details-marker { display: none; }
.legal-toc > summary .icon:first-child { color: var(--gold-text); }
.legal-toc__chev { margin-inline-start: auto; transition: transform var(--dur) var(--ease); }
.legal-toc[open] .legal-toc__chev { transform: rotate(180deg); }
.legal-toc nav { padding: 0 var(--sp-4) var(--sp-4); border-block-start: 1px solid var(--line); }
.legal-toc__group { padding-block-start: var(--sp-3); }
.legal-toc__track { display: block; font-family: var(--font-display); font-weight: 700; color: var(--gold-text); padding-block: var(--sp-1); }
.legal-toc ol { display: grid; gap: 2px; }
.legal-toc ol a {
  display: block; padding: 6px var(--sp-2); border-radius: var(--r-sm);
  font-size: var(--fs-small); line-height: 1.5; color: var(--text-2);
}
.legal-toc ol a:hover, .legal-toc ol a:focus-visible { background: var(--gold-tint); color: var(--text); }

/* Track sections + document body. */
.legal-track { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-4); box-shadow: var(--sh-sm); }
.legal-track + .legal-track { margin-block-start: var(--sp-6); }
@media (min-width: 768px) { .legal-track { padding: var(--sp-6) var(--sp-7); } }
.legal-track__title {
  display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-h2);
  padding-block-end: var(--sp-3); margin-block-end: var(--sp-4); border-block-end: 2px solid var(--gold-500);
}
.legal-track__title .icon { color: var(--gold-text); flex: none; }
.legal-track, .legal-doc__h, .faq-track__h { scroll-margin-top: calc(var(--header-h) + 72px); }

.legal-single > .legal-doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-4); box-shadow: var(--sh-sm); }
@media (min-width: 768px) { .legal-single > .legal-doc { padding: var(--sp-6) var(--sp-7); } }

.legal-doc { line-height: 1.85; }
[dir='rtl'] .legal-doc { line-height: 2; }
.legal-doc__h { font-size: var(--fs-h3); color: var(--text); margin-block: var(--sp-6) var(--sp-2); }
.legal-doc > .legal-doc__h:first-child { margin-block-start: 0; }
h2.legal-doc__h { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); }
.legal-doc__h::before { content: ''; display: inline-block; width: 6px; height: 0.9em; margin-inline-end: var(--sp-2); border-radius: 3px; background: var(--grad-gold); vertical-align: -0.08em; }
.legal-doc p { color: var(--text-2); margin-block-end: var(--sp-3); }
.legal-doc ul { list-style: disc; padding-inline-start: var(--sp-5); margin-block-end: var(--sp-4); color: var(--text-2); }
.legal-doc li { margin-block-end: var(--sp-1); }
.legal-doc li::marker { color: var(--gold-500); }
.legal-qa { margin-block-end: var(--sp-4); }
.legal-qa__q { font-weight: 600; color: var(--text) !important; margin-block-end: var(--sp-1) !important; }

.legal-top { margin-block: var(--sp-4) 0; font-size: var(--fs-small); }
.legal-top a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }

/* Contact block (from the legal JSON's {type:'contact'} items). */
.legal-contact { margin-block: var(--sp-5) 0; padding: var(--sp-5); background: var(--ink-950); color: var(--text-on-dark); border-radius: var(--r-md); }
.legal-contact__title { font-size: var(--fs-h3); color: var(--gold-500); margin-block-end: var(--sp-3); }
.legal-contact__list, .legal-doc .legal-contact__list { display: grid; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; color: var(--text-on-dark); }
.legal-contact__list li { display: flex; align-items: center; gap: var(--sp-3); min-height: 32px; }
.legal-contact__list .icon { color: var(--gold-500); flex: none; }
.legal-contact__list a { color: var(--text-on-dark); text-decoration: underline; text-decoration-color: rgba(212, 175, 55, 0.6); text-underline-offset: 4px; }
.legal-contact__list a:hover { color: var(--gold-300); }

/* ------------------------------------------------------------ FAQ */
.faq-track__h { font-size: var(--fs-h3); color: var(--gold-text); margin-block: var(--sp-5) var(--sp-1); }
.faq-track .legal-track__title + .faq-track__h { margin-block-start: 0; }
.faq-item { border-block-end: 1px solid var(--line); }
.faq-item > summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding-block: var(--sp-3); cursor: pointer; font-weight: 600; line-height: 1.6;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--gold-text); }
.faq-item__chev { flex: none; color: var(--gold-text); transition: transform var(--dur) var(--ease); }
.faq-item[open] .faq-item__chev { transform: rotate(180deg); }
.faq-item p { color: var(--text-2); line-height: 1.9; padding-block-end: var(--sp-4); }
.faq-more { margin-block-start: var(--sp-7); padding: var(--sp-6); text-align: center; background: var(--ink-950); color: var(--text-on-dark); border-radius: var(--r-lg); }
.faq-more__title { font-size: var(--fs-h2); color: var(--text-on-dark); margin-block-end: var(--sp-2); }
.faq-more p { color: var(--text-on-dark-2); }
.faq-more .button-row { justify-content: center; margin-block-end: 0; }
.faq-more .btn--outline { color: var(--text-on-dark); border-color: rgba(255, 255, 255, 0.4); }

/* ------------------------------------------------------------ /stores, /couriers */
.legacy-join { background: var(--surface); overflow: hidden; }
.legacy-join__phones { display: flex; justify-content: center; align-items: flex-start; padding-block: var(--sp-3); }
.legacy-join__phones .phone + .phone { margin-inline-start: -40px; margin-block-start: 48px; }
.legacy-join__p { color: var(--text-2); font-size: var(--fs-lead); line-height: 1.9; margin-block-end: var(--sp-5); }
.legacy-join__note { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.legacy-join__note p { color: var(--text-2); line-height: 1.8; }
.legacy-join__h { font-size: var(--fs-h3); margin-block-end: var(--sp-1); }
@media (min-width: 1024px) {
  .legacy-join__split { grid-template-columns: 5fr 6fr; }
}
.legacy-steps { counter-reset: step; }

/* ------------------------------------------------------------ /support */
.support-cards { align-items: stretch; }
.support-cats { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block: var(--sp-5) var(--sp-7); }
.support-cats li {
  display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  padding-inline: var(--sp-2) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  font-weight: 600;
}
.support-link { display: flex; align-items: center; gap: var(--sp-4); height: 100%; padding: var(--sp-5); color: var(--text); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.support-link:hover { border-color: var(--gold-500); }
@media (hover: hover) and (pointer: fine) { .support-link:hover { transform: translateY(-2px); } }
.support-link__text { display: grid; gap: var(--sp-1); flex: 1; }
.support-link__text strong { font-family: var(--font-display); font-size: var(--fs-h3); }
.support-link__text span { color: var(--text-2); font-size: var(--fs-small); line-height: 1.7; }
.support-link > .icon { flex: none; color: var(--gold-text); }

/* Until real store/driver screenshots land, skip the empty phone mockups on phones. */
@media (max-width: 767px) { .legacy-join__phones:has(.is-placeholder) { display: none; } }