/* ==========================================================================
   SKIIN - TERMS & CONDITIONS page only  (terms-page/terms.css)
   Banner, disclaimer and the accordion box itself (.sk-acc border, blush open
   state, +/- icon, slide) are GLOBAL. This file = layout, sticky contents list
   and reading typography for long legal text.
   ========================================================================== */

/* sits right above the disclaimer -> smaller bottom gap */
.sk-terms #terms-content { padding-bottom: clamp(24px, 3vw, 40px); }

/* contents list (left) + clauses (right) */
.sk-terms__layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }

/* ---------- sticky contents list ---------- */
.sk-terms__toc { position: sticky; top: var(--sk-sticky-top, 120px); max-height: calc(100vh - var(--sk-sticky-top, 120px) - 24px); overflow-y: auto; }
.sk-terms__toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--color-border); }
.sk-terms__toc a {
  display: flex; gap: 12px; margin-left: -1px; padding: 6px 0 6px 16px;
  font-size: 14px; line-height: 1.45; color: var(--color-body);
  border-left: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.sk-page .sk-terms__toc a { color: var(--color-body); }            /* global links are rose - list stays neutral */
.sk-page .sk-terms__toc a:hover,
.sk-page .sk-terms__toc a.is-active { color: var(--color-rose-accent); border-left-color: var(--color-rose-accent); }
.sk-terms__tnum { flex: none; min-width: 20px; font-size: 12px; line-height: 1.7; color: var(--color-muted); }
.sk-terms__toc a.is-active .sk-terms__tnum { color: var(--color-rose-accent); }

/* ---------- accordion header: number + title ---------- */
.sk-terms__acc .sk-acc__item { scroll-margin-top: var(--sk-sticky-top, 120px); }   /* clause never hides under the sticky header */
.sk-terms__num { display: inline-block; min-width: 34px; margin-right: 6px; color: var(--color-rose-accent); font-weight: 600; }

/* ---------- reading typography ---------- */
.sk-terms__body { max-width: 80ch; font-size: 15px; line-height: 1.75; color: var(--color-body); }
.sk-terms__body > :first-child { margin-top: 0; }

/* numbered clause: number column + text column */
.sk-clause { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; padding: 8px 0; }
.sk-clause + .sk-clause { border-top: 1px dashed rgba(206, 155, 155, .45); }
.sk-clause__num { font-size: 13px; font-weight: 600; line-height: 26px; color: var(--color-rose-accent); }
.sk-clause__text { color: var(--sk-dark); }

/* sub-heading inside a section (e.g. "Payment") */
.sk-terms__body h3.sk-clause-sub,
.sk-terms__body h3, .sk-terms__body h4 { margin: 22px 0 6px; font-size: 16px; font-weight: 600; color: var(--sk-dark); }

/* (a) (b) (c) lists */
.sk-letters { margin: 8px 0 0; padding: 0; list-style: none; }
.sk-letters li { display: flex; gap: 10px; margin-top: 4px; }
.sk-letters__l { flex: none; min-width: 26px; color: var(--color-muted); }

/* plain editor content (when the repeater is used without clause markup) */
.sk-terms__body p { margin: 0 0 12px; }
.sk-terms__body ul:not(.sk-letters), .sk-terms__body ol { margin: 0 0 12px; padding-left: 22px; }
.sk-terms__body ul:not(.sk-letters) { list-style: disc; }
.sk-terms__body li { margin-bottom: 6px; }
.sk-page .sk-terms__body a { text-decoration: underline; text-underline-offset: 2px; }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 991px) {
  /* the accordion titles already act as the contents list on small screens */
  .sk-terms__layout { grid-template-columns: 1fr; }
  .sk-terms__toc { display: none; }
}
@media (max-width: 575px) {
  .sk-clause { grid-template-columns: 1fr; gap: 0; }
  .sk-terms__body { font-size: 14.5px; }
}

/* ======================= PRINT: every clause open, no contents list ======================= */
@media print {
  .sk-terms__toc { display: none; }
  .sk-terms__layout { display: block; }
  .sk-terms .sk-acc__panel { max-height: none !important; overflow: visible; }
  .sk-terms .sk-acc__item { break-inside: avoid-page; background: none; }
}