/* === Terms & Conditions ===
   Requires: global.css (tokens, resets, Kadence overrides, topbar, footer)

   Legal copy, so the job is legibility rather than art direction: one column
   at a comfortable measure, generous leading, and clear separation between
   numbered clauses.
   ========================================================================== */

.cc-terms {
  padding-top: 79px;
}

/* --- Header ---
   Same rail as Insights, Transactions, Manage and FAQs: 79px topbar + 130px,
   title indented 123px. */
.cc-terms-header {
  padding: 0 var(--cc-gutter);
  width: 100%;
  max-width: var(--cc-max-width);
  margin: 130px auto 0;
}

.cc-terms-header__title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: var(--cc-ink);
  margin-left: 123px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Body --- */
.cc-terms-body {
  width: 100%;
  max-width: var(--cc-max-width);
  margin: 0 auto;
  padding: 80px var(--cc-gutter) 0;
}

.cc-terms__section {
  /* Anchored from the footer's PRIVACY POLICY link — offsets the fixed topbar
     so the heading doesn't land underneath it. */
  scroll-margin-top: 110px;
}

/* Chrome moves focus to the fragment target so screen readers follow the jump,
   and then paints its default focus ring — a blue box around the whole Privacy
   Policy section. The ring is meaningful on something you can interact with;
   this is a passive container, and the scroll itself already shows where you
   landed. Keyboard focus styling elsewhere is untouched. */
.cc-terms__section:focus,
.cc-terms__section:focus-visible {
  outline: none;
}

.cc-terms__section + .cc-terms__section {
  margin-top: 90px;
}

.cc-terms__rule {
  height: 0;
  border-top: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  margin-bottom: 26px;
}

.cc-terms__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
  color: var(--cc-ink);
  margin-bottom: 40px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Site body copy, at the wider leading long legal text needs. 760px keeps the
   measure near 90 characters instead of running the full 1456px. */
.cc-terms__prose {
  max-width: 760px;
  margin-left: 123px;
  font-family: var(--cc-font-body);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
}

.cc-terms__prose p {
  margin-bottom: 18px;
}

/* ── Clause structure ──
 *
 * page-terms-conditions.php classifies each paragraph by the numbering already
 * in the copy. These give that classification its typography: a clause title
 * reads as a heading, and a numbered or lettered sub-point hangs its marker in
 * the left margin so the body text of every clause lines up — the way a printed
 * contract sets it, and the only thing that makes a 19,000px deed navigable. */

.cc-terms__clause {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--cc-ink);
  margin: 52px 0 20px;
}

.cc-terms__prose > .cc-terms__clause:first-child {
  margin-top: 0;
}

/* The marker sits in the indent rather than running into the sentence. */
.cc-terms__subclause,
.cc-terms__point {
  padding-left: 52px;
  text-indent: -52px;
  margin-bottom: 14px;
}

.cc-terms__point {
  padding-left: 86px;
  text-indent: -34px;
}

/* Sub-clauses group tighter to each other than to the next clause title. */
.cc-terms__subclause + .cc-terms__subclause,
.cc-terms__point + .cc-terms__point {
  margin-top: -2px;
}

/* A bold run-in that is the whole of a paragraph acts as a sub-heading — the
   Privacy Policy section is written that way ("What is Personal Information?").
 *
 * Excluded on the classified paragraphs: a sub-clause's marker is also its only
 * *element* child, so `strong:only-child` matched "1.1." and set it to block,
 * dropping every clause's text onto the line below its own number and undoing
 * the hanging indent. */
.cc-terms__prose p:not(.cc-terms__subclause):not(.cc-terms__point) > strong:only-child {
  display: block;
  font-weight: 500;
  color: var(--cc-ink);
  margin-top: 34px;
}

.cc-terms__prose p:first-child > strong:only-child {
  margin-top: 0;
}

/* The marker keeps the body weight; it is positional, not emphatic. */
.cc-terms__subclause > strong,
.cc-terms__point > strong {
  font-weight: 400;
  color: var(--cc-ink-2);
}

.cc-terms__prose ul {
  list-style: disc;
  margin: 0 0 18px;
  padding-left: 22px;
}

.cc-terms__prose li {
  margin-bottom: 8px;
}

.cc-terms__prose a {
  color: var(--cc-dark-parchment);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.cc-terms__prose strong {
  font-weight: 500;
  color: var(--cc-ink);
}


/* ============================================================
   RESPONSIVE — Tablet (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .cc-terms-header {
    margin-top: 120px;
  }

  .cc-terms-header__title,
  .cc-terms__prose {
    margin-left: 0;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  .cc-terms__clause {
    font-size: 18px;
    margin: 40px 0 16px;
  }

  /* Half the indent on a 350px measure — enough to read as a hang, not enough
     to squeeze the text into a column. */
  .cc-terms__subclause {
    padding-left: 34px;
    text-indent: -34px;
  }

  .cc-terms__point {
    padding-left: 56px;
    text-indent: -22px;
  }

  .cc-terms-header {
    margin-top: 80px;
  }

  .cc-terms-header__title {
    font-size: 30px;
  }

  .cc-terms-body {
    padding-top: 50px;
  }

  .cc-terms__section + .cc-terms__section {
    margin-top: 60px;
  }

  .cc-terms__heading {
    font-size: 24px;
    margin-bottom: 28px;
  }

}