/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   RichText — Component Styles
   Self-contained typography for structured content blocks.
   Covers all standard rich text elements.
   Design tokens are defined in src/styles/tokens.css.
   ============================================================ */

.rich-text {
  color:       var(--foreground);
  font-family: var(--font-family-default);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}


/* ---- Paragraphs ---- */

.rich-text p {
  margin: 0;
}

.rich-text p + p,
.rich-text * + p {
  margin-top: 1rem;
}


/* ---- Headings ---- */

.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
  color:       var(--foreground);
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-bold);
  margin:      0;
}

/* Space between a heading and what follows it */
.rich-text h1 + *,
.rich-text h2 + *,
.rich-text h3 + *,
.rich-text h4 + *,
.rich-text h5 + *,
.rich-text h6 + * {
  margin-top: 0.5rem;
}

/* Space before a heading that has something above it */
.rich-text * + h1,
.rich-text * + h2,
.rich-text * + h3,
.rich-text * + h4,
.rich-text * + h5,
.rich-text * + h6 {
  margin-top: 1.5rem;
}

.rich-text h1 { font-size: var(--font-size-h1); line-height: 1.2;  }
.rich-text h2 { font-size: var(--font-size-h2); line-height: 1.25; }
.rich-text h3 { font-size: var(--font-size-h3); line-height: 1.3;  }
.rich-text h4 { font-size: var(--font-size-h4); line-height: 1.4;  }
.rich-text h5 { font-size: var(--font-size-base); line-height: var(--line-height-base); }
.rich-text h6 { font-size: var(--font-size-sm);   line-height: var(--line-height-sm);  }


/* ---- Lists ---- */

.rich-text ul,
.rich-text ol {
  font-size:    inherit;
  line-height:  inherit;
  margin:       0;
  padding-left: 1.25rem;
}

.rich-text li {
  font-size:   inherit;
  line-height: inherit;
}

.rich-text * + ul,
.rich-text * + ol {
  margin-top: 0.5rem;
}

.rich-text ul { list-style-type: disc;    }
.rich-text ol { list-style-type: decimal; }

.rich-text li + li {
  margin-top: 0.25rem;
}

/* Nested lists */
.rich-text li > ul,
.rich-text li > ol {
  margin-top: 0.25rem;
}


/* ---- Inline emphasis ---- */

.rich-text strong,
.rich-text b {
  font-weight: var(--font-weight-bold);
}

.rich-text em,
.rich-text i {
  font-style: italic;
}


/* ---- Links ---- */

.rich-text a {
  color:           var(--primary);
  font-weight:     var(--font-weight-medium);
  text-decoration: none;
}

.rich-text a:hover {
  text-decoration: underline;
}


/* ---- Blockquote ---- */

.rich-text blockquote {
  border-left: 3px solid var(--border);
  color:       var(--muted-foreground);
  margin:      0;
  padding-left: 1rem;
}

.rich-text * + blockquote {
  margin-top: 1rem;
}


/* ---- Inline code ---- */

.rich-text code {
  background-color: var(--muted);
  border-radius:    0.25rem;
  font-family:      ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  font-size:        0.875em;
  padding:          0.125em 0.375em;
}


/* ---- Code block ---- */

.rich-text pre {
  background-color: var(--muted);
  border-radius:    var(--radius-sm);
  margin:           0;
  overflow-x:       auto;
  padding:          1rem 1.25rem;
}

.rich-text * + pre {
  margin-top: 1rem;
}

/* Reset inline code styles when inside a pre block */
.rich-text pre code {
  background: none;
  font-size:  1em;
  padding:    0;
}


/* ---- Horizontal rule ---- */

.rich-text hr {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     1.5rem 0 0;
}


/* ---- Images ---- */

.rich-text img {
  display:   block;
  height:    auto;
  max-width: 100%;
}

/* ============================================================
   SmsTermsSection — Component Styles

   Deliberately parallel to TermsOfServiceSection.css and
   PrivacyPolicySection.css — the legal documents should read
   identically. Plain long-form legal content, not the badge+heading
   marketing convention, so no SectionRail / .hp-section here (see
   docs/conventions.md). Typography lives in the shared RichText
   primitive; this file owns padding and the reading measure.

   Note: unlike its two siblings this document has no numbered
   sections, so there is no counter here.
   ============================================================ */

.sms-terms {
  background:  var(--background);
  padding:     6rem 0;
  box-sizing:  border-box;
}

.sms-terms__body {
  max-width:  50rem;   /* 800px readable measure, matches .section-header__text */
  margin:     0 auto;
}

/* RichText's own h1 size (--font-size-h1, 36px) is tuned for compact
   contexts like Accordion panels — too small for a real page title.
   Scoped here only so Accordion's sizing is untouched. Matches the
   sitewide .page-h1 (48px) scale instead. */
.sms-terms__body h1 {
  font-size:   3rem;     /* 48px, matches .page-h1 */
  line-height: 1.15;
}

@media (max-width: 767px) {
  .sms-terms__body h1 {
    font-size: 2.25rem;   /* 36px, matches .page-h1's ≤767px step */
  }
}

@media (max-width: 479px) {
  .sms-terms__body h1 {
    font-size: 2rem;   /* 32px, matches .page-h1's ≤479px step */
  }
}

.sms-terms__updated {
  color: var(--muted-foreground);
}

/* RichText's default 1rem paragraph rhythm is tuned for compact
   contexts — widened here for a document read top to bottom, matching
   the other two legal sections. */
.sms-terms__body p + p,
.sms-terms__body * + p {
  margin-top: 1.5rem;
}

/* Reasserted after the paragraph-spacing rule above (same specificity
   as "* + p", so source order decides). */
.sms-terms__body h1 + * {
  margin-top: 2rem;
}

@media (max-width: 991px) {
  .sms-terms {
    padding: 4.5rem 0;
  }
}

@media (max-width: 767px) {
  .sms-terms {
    padding: 3rem 0;
  }
}