/* ============================================================
   DOC PAGES — long-form prose pages (FAQ, Legal, Terms)
   ------------------------------------------------------------
   Shared layout for faq.html, legal.html, terms.html. Not built
   on the .wrap/.canvas Figma-pixel grid like the landing — these
   are simple flow-layout pages with a centered prose column.
   Tokens (colors, fonts) come from tokens.css; the top nav,
   footer, BOOK NOW FAB, and HELP widget are reused from the
   landing page.
   ============================================================ */

.body--doc {
  background: var(--page-bg);
}

.page--doc {
  display: flex;
  flex-direction: column;
}

/* --- Doc hero -------------------------------------------------
   Compact title band at the top of each doc page. Same pale-green
   background as the page; the top nav sits over it. The hero is
   tall enough to clear the nav and give the title some air. */
.doc-hero {
  background: var(--page-bg);
  padding: 168px 20px 40px;
}

.doc-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}

.doc-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-dark-green);
  margin: 0 0 14px;
}

.doc-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: 60px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-dark-green);
  opacity: 0.85;
  margin: 0;
}

.doc-hero__sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.05em;
  color: var(--color-black-green-text);
  margin: 22px 0 0;
  max-width: 560px;
}

/* --- Doc body -------------------------------------------------
   Single centered column. Generous spacing between sections.
   Used for both FAQ category blocks and Legal/Terms prose. */
.doc {
  background: var(--page-bg);
  padding: 40px 20px 120px;
}

.doc__inner {
  max-width: 720px;
  margin: 0 auto;
}

.doc__effective {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-dark-green);
  margin: 0 0 32px;
}

.doc__lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--color-black-green-text);
  margin: 0 0 40px;
}

.doc__category {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-dark-green);
  opacity: 0.85;
  margin: 56px 0 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(76, 141, 115, 0.25);
}

.doc__category:first-child {
  margin-top: 0;
}

.doc__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-dark-green);
  opacity: 0.9;
  margin: 36px 0 14px;
}

.doc__p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: var(--color-black-green-text);
  margin: 0 0 18px;
}

.doc__p a {
  color: var(--color-dark-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.doc__p a:hover {
  color: var(--color-red);
}

/* --- FAQ accordion --------------------------------------------
   Native <details>/<summary> styled to match the help widget's
   accordion. No JS needed. The "+" glyph rotates 45deg to a
   "×" on open (same trick as the help widget). */
.doc-faq {
  border-bottom: 1px solid rgba(53, 68, 59, 0.18);
}

.doc-faq:first-of-type {
  border-top: 1px solid rgba(53, 68, 59, 0.18);
}

.doc-faq__q {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 4px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-black-green-text);
  cursor: pointer;
  transition: color 220ms ease;
}

.doc-faq__q::-webkit-details-marker {
  display: none;
}

.doc-faq__q:hover {
  color: var(--color-dark-green);
}

.doc-faq__q-text {
  flex: 1;
}

.doc-faq__toggle {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--color-dark-green);
  flex-shrink: 0;
  transition: transform 220ms ease;
}

.doc-faq[open] > .doc-faq__q {
  color: var(--color-dark-green);
}

.doc-faq[open] > .doc-faq__q .doc-faq__toggle {
  transform: rotate(45deg);
}

.doc-faq__a {
  padding: 0 4px 22px;
}

.doc-faq__a p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: var(--color-dark-green);
  margin: 0 0 12px;
}

.doc-faq__a p:last-child {
  margin-bottom: 0;
}

.doc-faq__a a {
  color: var(--color-dark-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-faq__a a:hover {
  color: var(--color-red);
}

/* --- Numbered steps (Your First Visit) ------------------------
   Walkthrough format: large display-font number on the left,
   uppercase step title, then prose body. Used on first-visit.html.
   Renders as a single flowing column on mobile (number sits above
   the title rather than beside it). */
.doc-steps {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: doc-step;
}

.doc-step {
  display: grid;
  grid-template-columns: 88px 1fr;
  column-gap: 28px;
  align-items: start;
}

.doc-step::before {
  counter-increment: doc-step;
  content: counter(doc-step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-medium-green);
  opacity: 0.85;
}

.doc-step__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 28px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-dark-green);
  opacity: 0.9;
  margin: 6px 0 14px;
}

.doc-step__body p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: var(--color-black-green-text);
  margin: 0 0 14px;
}

.doc-step__body p:last-child {
  margin-bottom: 0;
}

.doc-step__body a {
  color: var(--color-dark-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-step__body a:hover {
  color: var(--color-red);
}

.doc-step__body strong {
  color: var(--color-dark-green);
  font-weight: 600;
}

/* Sub-heading inside a step body — used for the Uneekor mode list
   on Step 8 of first-visit.html. Smaller than the step title,
   uppercase display font, sits tight to its following paragraph. */
.doc-step__sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-dark-green);
  margin: 22px 0 8px;
}

.doc-step__sub:first-child {
  margin-top: 0;
}

/* Path crumb — "Uneekor app → Play" style nav hint. Mono-ish,
   muted, sits inline within a paragraph so it reads as
   "to find this, go here". */
.doc-step__path {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-dark-green);
  background: var(--color-light-green);
  padding: 2px 8px;
  border-radius: 4px;
  margin: 0 0 4px;
}

/* --- Closing contact block ------------------------------------ */
.doc-contact {
  margin-top: 64px;
  padding: 28px 28px 32px;
  background: var(--color-light-green);
  border-radius: 16px;
}

.doc-contact__h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--color-dark-green);
  margin: 0 0 10px;
}

.doc-contact__p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--color-black-green-text);
  margin: 0;
}

.doc-contact__p a {
  color: var(--color-dark-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc-contact__p a:hover {
  color: var(--color-red);
}

/* --- Mobile ---------------------------------------------------
   Sub-768: same column, smaller display sizes and padding. */
@media (max-width: 768px) {
  .doc-hero {
    padding: 132px 24px 28px;
  }

  .doc-hero__title {
    font-size: 44px;
    line-height: 42px;
  }

  .doc-hero__sub {
    font-size: 15px;
    line-height: 21px;
    margin-top: 18px;
  }

  .doc {
    padding: 28px 24px 96px;
  }

  .doc__category {
    font-size: 26px;
    line-height: 28px;
    margin-top: 44px;
  }

  .doc__h2 {
    font-size: 22px;
    line-height: 26px;
    margin-top: 30px;
  }

  .doc__lead {
    font-size: 16px;
  }

  .doc-faq__q {
    font-size: 16px;
    padding: 20px 2px;
  }

  .doc-faq__a {
    padding: 0 2px 20px;
  }

  .doc-faq__a p {
    font-size: 15px;
  }

  .doc-contact {
    margin-top: 48px;
    padding: 24px 22px 26px;
  }

  .doc-steps {
    gap: 44px;
  }

  .doc-step {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .doc-step::before {
    font-size: 42px;
  }

  .doc-step__title {
    font-size: 22px;
    line-height: 24px;
    margin-top: 4px;
  }

  .doc-step__body p {
    font-size: 15px;
  }
}