/* =========================================================
   terms-conditions.css — /terms-conditions page
   Uses the tokens from the base CSS (:root).
   Every class is prefixed .tc- so nothing clashes with other page CSS.
   Shared via common classes (base.css): .hero-standard (hero title/lead/
   eyebrow) and .legal-content (section padding). tc's heading anchors sit
   on a sidebar table of contents, so they keep their own .tc-section
   scroll offset below instead of the .legal-page one the other legal
   pages use.
   ========================================================= */

/* =========================================================
   CONTENT SECTION
   ========================================================= */
.tc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

/* Sidebar Navigation */
.tc-sidebar {
  position: sticky;
  top: calc(var(--header-h, 72px) + 24px);
  max-height: calc(100vh - var(--header-h, 72px) - 48px);
  overflow-y: auto;
  padding: 20px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--surface);
}

.tc-nav-title {
  margin: 0 0 16px;
  font-size: 1.1rem;
  color: var(--head);
  font-weight: 700;
}

.tc-nav-list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.tc-nav-list li {
  margin-bottom: 8px;
}

.tc-nav-link {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-xs);
  color: var(--muted);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s ease;
}

.tc-nav-link:hover {
  background: var(--surface-2);
  color: var(--text);
}

.tc-nav-link.is-active {
  background: var(--brand-a-12);
  color: var(--brand-b);
  font-weight: 600;
}

/* Need Help Section */
.tc-help {
  padding: 20px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-72);
}

.tc-help-title {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--head);
  font-weight: 700;
}

.tc-help-text {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.5;
}

.tc-help-btn {
  width: 100%;
  justify-content: center;
  font-size: .9rem;
}

/* Main Content */
.tc-main {
  min-width: 0;
}

.tc-container {
  max-width: 100%;
}

/* Delta from the shared .legal-section (base.css): tc's sections are anchor
   targets for the sidebar table of contents. */
.tc-section {
  scroll-margin-top: calc(var(--header-h, 72px) + 24px);
}

/* legal-highlight covers the rest; tc has no deltas of its own here. */

/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */
@media (min-width: 1024px) {
  .tc-layout {
    grid-template-columns: 280px 1fr;
    gap: 40px;
  }

  .tc-sidebar {
    max-height: calc(100vh - var(--header-h, 72px) - 32px);
  }
}

/* .legal-section's shared @media(min-width:768px) rule already bumps padding/
   font-size at 768px; tc keeps a smaller in-between tier through 1023px, so
   this block dials those back down before the 1024px rule above matches the
   shared defaults exactly. */
@media (min-width: 768px) and (max-width: 1023px) {
  .tc-layout {
    grid-template-columns: 240px 1fr;
    gap: 32px;
  }

  .tc-sidebar {
    max-height: calc(100vh - var(--header-h, 72px) - 24px);
  }

  .tc-section {
    padding: 28px 32px;
  }

  .tc-section h2 {
    font-size: 1.5rem;
  }

  .tc-section h3 {
    font-size: 1.2rem;
  }

  .tc-section p,
  .tc-section ul {
    font-size: .95rem;
  }
}

@media (max-width: 767px) {
  .tc-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .tc-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding: 16px;
  }

  .tc-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }

  .tc-nav-list li {
    margin-bottom: 0;
  }

  .tc-nav-link {
    padding: 8px 12px;
    font-size: .85rem;
    white-space: nowrap;
  }

  .tc-help {
    text-align: center;
  }
}