/* CMS page section guardrails outside the homepage scene hero */

.cms-section {
  --section-pad-y: clamp(56px, 8vw, 104px);
  --section-pad-x: clamp(20px, 4vw, 56px);
}

.cms-section:not(.cms-hero) {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

.cms-section > .si {
  width: min(1120px, calc(100% - var(--section-pad-x) * 2)) !important;
  margin-inline: auto !important;
}

.cms-rich-text > .si,
.cms-faq > .si {
  width: min(920px, calc(100% - var(--section-pad-x) * 2)) !important;
}

.cms-page.has-page-title .cms-rich-text:first-of-type,
.cms-page.has-page-title .cms-section:first-of-type:not(.cms-hero) {
  padding-top: clamp(34px, 5vw, 58px) !important;
}

.cms-page.no-page-title .cms-rich-text:first-of-type,
.cms-page.no-page-title .cms-section:first-of-type:not(.cms-hero) {
  padding-top: clamp(104px, 14vw, 156px) !important;
}

.cms-rich-text:has(.tiptap-content > :only-child) {
  padding-top: clamp(26px, 4vw, 48px) !important;
  padding-bottom: clamp(26px, 4vw, 48px) !important;
}

.cms-page.no-page-title .cms-rich-text:first-of-type:has(.tiptap-content > :only-child) {
  padding-top: clamp(92px, 13vw, 132px) !important;
}

.cms-rich-text:has(.tiptap-content > p:only-child),
.cms-rich-text:has(.tiptap-content > h2:only-child),
.cms-rich-text:has(.tiptap-content > h3:only-child) {
  padding-top: clamp(22px, 3.5vw, 42px) !important;
  padding-bottom: clamp(22px, 3.5vw, 42px) !important;
}

.cms-rich-text .tiptap-content,
.cms-faq .tiptap-content,
.cms-image-text .tiptap-content {
  color: inherit !important;
}

.cms-rich-text .tiptap-content > :first-child,
.cms-image-copy > :first-child,
.cms-faq .si > :first-child {
  margin-top: 0 !important;
}

.cms-rich-text .tiptap-content > :last-child,
.cms-image-copy > :last-child,
.cms-faq .si > :last-child {
  margin-bottom: 0 !important;
}

.cms-rich-text .tiptap-content > p:only-child {
  max-width: 68ch !important;
}

.cms-rich-text .tiptap-content > h2:only-child,
.cms-rich-text .tiptap-content > h3:only-child {
  max-width: 24ch !important;
}

.cms-rich-text + .cms-rich-text {
  margin-top: 0 !important;
}

/* Reliable color themes for normal CMS pages */
.cms-rich-text.theme-dark,
.cms-faq.theme-dark {
  background:
    radial-gradient(circle 560px at 78% 18%, oklch(60% 0.12 54 / .12), transparent 72%),
    linear-gradient(155deg, oklch(8% 0.035 42), oklch(12% 0.036 48) 56%, oklch(8% 0.025 58)) !important;
  color: #fffaf2 !important;
}

.cms-rich-text.theme-white,
.cms-rich-text.theme-light,
.cms-faq.theme-white,
.cms-faq.theme-light,
.cms-section.theme-white,
.cms-section.theme-light {
  background: #fffaf6 !important;
  color: #1c130f !important;
}

.cms-rich-text.theme-beige,
.cms-rich-text.theme-warm,
.cms-faq.theme-beige,
.cms-faq.theme-warm,
.cms-section.theme-beige,
.cms-section.theme-warm,
.cms-image-text {
  background:
    radial-gradient(circle 520px at 82% 8%, rgba(244, 155, 93, .11), transparent 70%),
    linear-gradient(180deg, #efe3d0 0%, #e8dac5 100%) !important;
  color: #20150f !important;
}

.cms-rich-text.theme-dark .cms-h2,
.cms-rich-text.theme-dark h1,
.cms-rich-text.theme-dark h2,
.cms-rich-text.theme-dark h3,
.cms-faq.theme-dark .cms-h2,
.cms-faq.theme-dark h1,
.cms-faq.theme-dark h2,
.cms-faq.theme-dark h3 {
  color: #fffaf2 !important;
}

.cms-rich-text.theme-white .cms-h2,
.cms-rich-text.theme-white h1,
.cms-rich-text.theme-white h2,
.cms-rich-text.theme-white h3,
.cms-rich-text.theme-light .cms-h2,
.cms-rich-text.theme-light h1,
.cms-rich-text.theme-light h2,
.cms-rich-text.theme-light h3,
.cms-rich-text.theme-beige .cms-h2,
.cms-rich-text.theme-beige h1,
.cms-rich-text.theme-beige h2,
.cms-rich-text.theme-beige h3,
.cms-rich-text.theme-warm .cms-h2,
.cms-rich-text.theme-warm h1,
.cms-rich-text.theme-warm h2,
.cms-rich-text.theme-warm h3,
.cms-faq.theme-white .cms-h2,
.cms-faq.theme-white h1,
.cms-faq.theme-white h2,
.cms-faq.theme-white h3,
.cms-faq.theme-light .cms-h2,
.cms-faq.theme-light h1,
.cms-faq.theme-light h2,
.cms-faq.theme-light h3,
.cms-faq.theme-beige .cms-h2,
.cms-faq.theme-beige h1,
.cms-faq.theme-beige h2,
.cms-faq.theme-beige h3,
.cms-faq.theme-warm .cms-h2,
.cms-faq.theme-warm h1,
.cms-faq.theme-warm h2,
.cms-faq.theme-warm h3,
.cms-image-text .cms-h2,
.cms-image-text h1,
.cms-image-text h2,
.cms-image-text h3 {
  color: #20150f !important;
}

.cms-rich-text.theme-dark p,
.cms-rich-text.theme-dark li,
.cms-rich-text.theme-dark blockquote,
.cms-faq.theme-dark p,
.cms-faq.theme-dark li,
.cms-faq.theme-dark blockquote {
  color: rgba(255, 250, 242, .84) !important;
}

.cms-rich-text.theme-white p,
.cms-rich-text.theme-white li,
.cms-rich-text.theme-white blockquote,
.cms-rich-text.theme-light p,
.cms-rich-text.theme-light li,
.cms-rich-text.theme-light blockquote,
.cms-rich-text.theme-beige p,
.cms-rich-text.theme-beige li,
.cms-rich-text.theme-beige blockquote,
.cms-rich-text.theme-warm p,
.cms-rich-text.theme-warm li,
.cms-rich-text.theme-warm blockquote,
.cms-faq.theme-white p,
.cms-faq.theme-white li,
.cms-faq.theme-white blockquote,
.cms-faq.theme-light p,
.cms-faq.theme-light li,
.cms-faq.theme-light blockquote,
.cms-faq.theme-beige p,
.cms-faq.theme-beige li,
.cms-faq.theme-beige blockquote,
.cms-faq.theme-warm p,
.cms-faq.theme-warm li,
.cms-faq.theme-warm blockquote,
.cms-image-text p,
.cms-image-text li,
.cms-image-text blockquote {
  color: rgba(32, 21, 15, .78) !important;
}

.cms-rich-text.theme-dark a,
.cms-faq.theme-dark a {
  color: var(--amber) !important;
}

.cms-rich-text.theme-white a,
.cms-rich-text.theme-light a,
.cms-rich-text.theme-beige a,
.cms-rich-text.theme-warm a,
.cms-faq.theme-white a,
.cms-faq.theme-light a,
.cms-faq.theme-beige a,
.cms-faq.theme-warm a,
.cms-image-text a {
  color: #8d4f19 !important;
}

/* Normal page hero. The homepage scene hero stays untouched because it uses .with-scenes. */
.cms-hero:not(:has(.with-scenes)) {
  min-height: auto !important;
  padding: clamp(108px, 14vw, 164px) 0 clamp(58px, 8vw, 98px) !important;
  background:
    radial-gradient(circle 520px at 78% 18%, rgba(244, 155, 93, .18), transparent 74%),
    radial-gradient(circle 380px at 16% 32%, rgba(244, 155, 93, .1), transparent 72%),
    linear-gradient(135deg, oklch(8% 0.035 42), oklch(12% 0.04 48) 58%, oklch(8% 0.025 58)) !important;
}

.cms-hero:not(:has(.with-scenes)) .cms-hero-grid {
  width: min(1120px, calc(100% - var(--section-pad-x) * 2)) !important;
  margin-inline: auto !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(240px, .78fr) !important;
  gap: clamp(28px, 5vw, 72px) !important;
  align-items: center !important;
  padding: 0 !important;
}

.cms-hero:not(:has(.with-scenes)) .cms-hero-copy {
  padding: 0 !important;
  max-width: 760px !important;
}

.cms-hero:not(:has(.with-scenes)) .cms-eyebrow {
  margin-bottom: clamp(14px, 2vw, 22px) !important;
}

.cms-hero:not(:has(.with-scenes)) .cms-hero-title {
  font-size: clamp(2.35rem, 6vw, 4.75rem) !important;
  line-height: 1.04 !important;
  margin-bottom: clamp(18px, 2.5vw, 30px) !important;
  color: #fffaf2 !important;
  text-shadow: none !important;
}

.cms-hero:not(:has(.with-scenes)) .cms-hero-title *,
.cms-hero:not(:has(.with-scenes)) .cms-hero-title .lt,
.cms-hero:not(:has(.with-scenes)) .cms-hero-title .ac {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

.cms-hero:not(:has(.with-scenes)) .cms-hero-sub {
  max-width: 58ch !important;
  color: rgba(255, 250, 242, .82) !important;
  font-size: clamp(1rem, 1.2vw, 1.12rem) !important;
  line-height: 1.68 !important;
}

.cms-hero:not(:has(.with-scenes)) .cms-hero-actions {
  margin-top: clamp(26px, 4vw, 42px) !important;
}

.cms-hero:not(:has(.with-scenes)) .cms-hero-visual {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.cms-hero:not(:has(.with-scenes)) .hero-image {
  width: min(100%, var(--hero-image-max, 360px)) !important;
  max-height: var(--hero-image-height, 320px) !important;
  object-fit: contain !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, .26) !important;
}

.cms-hero:not(:has(.with-scenes)) .cms-hero-grid.with-image:not(:has(.hero-image)) {
  grid-template-columns: minmax(0, 760px) !important;
}

.cms-hero:not(:has(.with-scenes)) .cms-hero-grid.with-image:not(:has(.hero-image)) .cms-hero-visual {
  display: none !important;
}

/* Hero light variant for normal CMS pages. Add payload.heroVariant = "light" or payload.variant = "light" in the CMS payload. */
.cms-hero:has(.cms-hero-grid[data-variant="light"]),
.cms-hero.hero-light,
.cms-hero.is-light {
  background:
    radial-gradient(circle 440px at 82% 18%, rgba(244, 155, 93, .16), transparent 72%),
    linear-gradient(180deg, #fffaf6 0%, #efe3d0 100%) !important;
  color: #20150f !important;
}

.cms-hero.hero-light .cms-hero-title,
.cms-hero.is-light .cms-hero-title,
.cms-hero.hero-light .cms-hero-sub,
.cms-hero.is-light .cms-hero-sub {
  color: #20150f !important;
}

/* Image and text sections need bounded media. */
.cms-image-grid {
  grid-template-columns: minmax(0, 1fr) minmax(220px, .82fr) !important;
  gap: clamp(28px, 5vw, 64px) !important;
}

.cms-image-box {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.cms-image-box img,
.cms-image-placeholder {
  width: min(100%, var(--section-image-max, 460px)) !important;
  max-height: var(--section-image-height, 380px) !important;
  min-height: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
}

.cms-image-box img[data-size="small"],
.cms-image-box.small img,
.cms-image-text.image-small img {
  --section-image-max: 260px;
  --section-image-height: 220px;
}

.cms-image-box img[data-size="medium"],
.cms-image-box.medium img,
.cms-image-text.image-medium img {
  --section-image-max: 380px;
  --section-image-height: 300px;
}

.cms-image-box img[data-size="large"],
.cms-image-box.large img,
.cms-image-text.image-large img {
  --section-image-max: 560px;
  --section-image-height: 460px;
}

/* FAQ readability across themes */
.faq-question,
.faq-category-title,
.faq-main-headline {
  color: inherit !important;
}

.faq-item {
  background: color-mix(in oklch, currentColor 4%, transparent) !important;
  border-color: color-mix(in oklch, currentColor 16%, transparent) !important;
}

.theme-white .faq-answer,
.theme-light .faq-answer,
.theme-beige .faq-answer,
.theme-warm .faq-answer {
  color: rgba(32, 21, 15, .78) !important;
}

.theme-dark .faq-answer {
  color: rgba(255, 250, 242, .82) !important;
}

@media (max-width: 900px) {
  .cms-hero:not(:has(.with-scenes)) .cms-hero-grid,
  .cms-image-grid,
  .cms-image-grid.image-left,
  .cms-image-grid.image-right {
    grid-template-columns: 1fr !important;
  }

  .cms-image-grid.image-left .cms-image-copy,
  .cms-image-grid.image-right .cms-image-copy,
  .cms-image-grid.image-left .cms-image-box,
  .cms-image-grid.image-right .cms-image-box {
    order: initial !important;
  }

  .cms-hero:not(:has(.with-scenes)) {
    padding-top: clamp(92px, 18vw, 128px) !important;
  }

  .cms-hero:not(:has(.with-scenes)) .cms-hero-visual {
    justify-content: flex-start !important;
  }

  .cms-hero:not(:has(.with-scenes)) .hero-image {
    width: min(100%, 320px) !important;
  }
}

@media (max-width: 620px) {
  .cms-section:not(.cms-hero) {
    padding-top: clamp(44px, 12vw, 64px);
    padding-bottom: clamp(44px, 12vw, 64px);
  }

  .cms-page.has-page-title .cms-rich-text:first-of-type,
  .cms-page.has-page-title .cms-section:first-of-type:not(.cms-hero) {
    padding-top: clamp(26px, 8vw, 42px) !important;
  }

  .cms-page.no-page-title .cms-rich-text:first-of-type {
    padding-top: clamp(88px, 22vw, 118px) !important;
  }

  .cms-hero:not(:has(.with-scenes)) .cms-hero-title {
    font-size: clamp(2.15rem, 12vw, 3.25rem) !important;
  }

  .cms-hero:not(:has(.with-scenes)) .cms-hero-sub {
    font-size: .98rem !important;
  }
}