/* Capture Care rhythm. Tokens come from #cc-design-tokens (design_tokens.py).
   Loaded after the theme so these rules win. Amelia's custom CSS is loaded
   after this file. Phones ≤767px, tablets 768–1024px, desktop ≥1025px.
   Desktop does not change type size. Background-image heroes keep their
   own padding so the photo is not flattened. */

.entry-content :is(h1, h2, h3, h4),
.entry-title,
.cc-lp :is(h1, h2, h3, h4),
.cc-sec :is(h1, h2, h3, h4),
.entry-content p,
.cc-lp p,
.cc-sec p {
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Heading rhythm on every width. First heading in a block keeps margin-top 0. */
.entry-content h1,
.cc-lp h1,
.cc-sec h1,
.entry-header .entry-title {
  margin: var(--cc-space-6) 0 var(--cc-space-4) !important;
  line-height: var(--cc-leading-heading);
}
.entry-content h2,
.page-description h2,
.cc-lp h2,
.cc-sec h2 {
  margin: var(--cc-space-5) 0 var(--cc-space-3) !important;
  line-height: var(--cc-leading-heading);
}
.entry-content h3,
.page-description h3,
.cc-lp h3,
.cc-sec h3 {
  margin: var(--cc-space-5) 0 var(--cc-space-2) !important;
  line-height: var(--cc-leading-heading);
}
.entry-content h4,
.cc-lp h4,
.cc-sec h4 {
  margin: var(--cc-space-4) 0 var(--cc-space-2) !important;
  line-height: var(--cc-leading-heading);
}
.kt-inside-inner-col > :is(h1, h2, h3, h4):first-child,
.cc-lp-head > :is(h1, h2, h3):first-child,
.cc-sec__head > :is(h1, h2, h3):first-child,
.cc-lp-hero :is(h1, h2),
.cc-sec h1:first-child,
.entry-header .entry-title,
.cc-lp-kicker + :is(h1, h2, h3),
.cc-kicker + :is(h1, h2, h3) {
  margin-top: 0 !important;
}
.cc-lp-kicker + :is(h1, h2, h3),
.cc-kicker + :is(h1, h2, h3) {
  margin-top: var(--cc-space-2) !important;
}
.entry-content :is(h1, h2, h3, h4) + p,
.cc-lp :is(h1, h2, h3, h4) + p,
.cc-sec :is(h1, h2, h3, h4) + p {
  margin-top: 0;
}

/* Cards and grids share one padding and one gap. */
.cc-lp-card,
.cc-card,
.cc-lp-step,
.cc-lp-quote,
.cc-lp-cta--card,
.cc-lp-form-card {
  padding: var(--cc-card-pad);
}
.cc-lp-grid,
.cc-cards__grid,
.cc-lp-steps {
  gap: var(--cc-card-gap);
}
.cc-lp-card__img {
  width: calc(100% + 2 * var(--cc-card-pad));
  margin-left: calc(-1 * var(--cc-card-pad));
  margin-right: calc(-1 * var(--cc-card-pad));
  margin-top: calc(-1 * var(--cc-card-pad));
}

/* Landing and section templates use the same section padding and gutter. */
.cc-lp-sec,
.cc-sec {
  padding-top: var(--cc-section-y);
  padding-bottom: var(--cc-section-y);
}
.cc-lp-wrap,
.cc-sec__in {
  width: min(var(--lp-max, var(--max, 1140px)), calc(100% - 2 * var(--cc-gutter)));
}

/* Phones and tablets: one type scale, 16px body, consistent section padding.
   Rows that are a background photo (kt-row-has-bg) keep their padding. */
@media (max-width: 1024px) {
  .entry-content h1,
  .entry-title,
  .cc-lp h1,
  .cc-lp-hero__title,
  .cc-sec h1,
  .entry-content > .kb-row-layout-wrap:first-child :is(h1, h2, h3),
  .entry-content > .kb-row-layout-wrap:first-child:not(:has(:is(h1, h2, h3))) + .kb-row-layout-wrap :is(h1, h2, h3) {
    font-size: var(--cc-h1) !important;
    line-height: var(--cc-leading-heading) !important;
  }
  .entry-content h2,
  .cc-lp h2.cc-lp-h,
  .cc-lp h2,
  .cc-sec h2 {
    font-size: var(--cc-h2) !important;
    line-height: var(--cc-leading-heading) !important;
  }
  .entry-content h3,
  .cc-lp h3,
  .cc-sec h3 {
    font-size: var(--cc-h3) !important;
    line-height: var(--cc-leading-heading) !important;
  }
  .entry-content h4,
  .cc-lp h4,
  .cc-sec h4 {
    font-size: var(--cc-h4) !important;
    line-height: var(--cc-leading-heading) !important;
  }
  .entry-content :is(h1, h2, h3, h4),
  .cc-lp :is(h1, h2, h3, h4),
  .cc-sec :is(h1, h2, h3, h4) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .entry-content p,
  .entry-content li,
  .entry-content .wp-block-paragraph,
  .entry-content .kt-svg-icon-list-text,
  .cc-lp p,
  .cc-lp li,
  .cc-sec p,
  .cc-sec li {
    font-size: var(--cc-font-body) !important;
    line-height: var(--cc-leading-body);
  }
  .entry-content p,
  .cc-lp p,
  .cc-sec p {
    max-width: var(--cc-measure);
    margin-bottom: var(--cc-space-4);
  }
  /* Photo heroes put the picture in the row padding (they have an overlay). Leave those alone. */
  .entry-content > .kb-row-layout-wrap:not(:has(> .kt-row-layout-overlay)) > .kt-row-column-wrap {
    padding-top: var(--cc-section-y) !important;
    padding-bottom: var(--cc-section-y) !important;
    row-gap: var(--cc-card-gap);
  }
  .entry-content > .kb-row-layout-wrap > .kt-row-column-wrap > .wp-block-kadence-column:not(:has(img)) > .kt-inside-inner-col {
    padding-left: var(--cc-gutter) !important;
    padding-right: var(--cc-gutter) !important;
  }
  .entry-content img,
  .cc-lp img,
  .cc-sec img,
  .wp-block-image img {
    max-width: 100%;
    height: auto;
  }
  .page-description h2,
  .page-description h3 {
    line-height: var(--cc-leading-heading) !important;
  }
  .page-description h2 {
    font-size: var(--cc-h2) !important;
  }
  .page-description h3 {
    font-size: var(--cc-h3) !important;
  }
  .page-description > .kb-row-layout-wrap:first-child :is(h1, h2, h3),
  .page-description > .kb-row-layout-wrap:first-child .wp-block-paragraph {
    font-size: var(--cc-h1) !important;
    line-height: var(--cc-leading-heading) !important;
  }
  .page-description p,
  .page-description li {
    font-size: var(--cc-font-body) !important;
    line-height: var(--cc-leading-body);
  }
  .page-description > .kb-row-layout-wrap:not(:has(> .kt-row-layout-overlay)) > .kt-row-column-wrap {
    padding-top: var(--cc-section-y) !important;
    padding-bottom: var(--cc-section-y) !important;
    row-gap: var(--cc-card-gap);
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--cc-h3) !important;
    line-height: var(--cc-leading-heading) !important;
    margin: var(--cc-space-3) 0 var(--cc-space-2) !important;
  }
  .woocommerce ul.products li.product img {
    max-width: 100%;
    height: auto;
  }
  .single-post .entry-content-wrap,
  .post-template-default .entry-content-wrap {
    padding: var(--cc-section-y) var(--cc-gutter);
  }
}

.entry-content .kt-button,
.entry-content .wp-block-button__link,
.entry-content a.kb-button,
.cc-lp-btn,
.cc-btn,
.woocommerce a.button {
  min-height: 44px;
  box-sizing: border-box;
}

/* Desktop: spacing only. Type size, colour and hero padding stay as designed. */
@media (min-width: 1025px) {
  .entry-content > .kb-row-layout-wrap:not(:has(> .kt-row-layout-overlay)) > .kt-row-column-wrap {
    row-gap: var(--cc-card-gap);
  }
}