/* Roasted Root page templates (Rev. October 2026)
   templates/page.html       default: Espresso title banner + 720px reading column
   templates/page-full-width.html  no banner, content at 1200px or edge to edge

   Banner background:
   - No featured image: Espresso with the croissant pattern (same as the footer).
   - Featured image set: the photo, with an Espresso tint so cream text reads.
   Set or remove it in the page editor sidebar > Featured image. */

/* .wp-block-cover.rr-page-banner: WordPress's Cover styles load after this
   file, so these rules need the extra class to win. */
.wp-block-cover.rr-page-banner {
  --banner-pattern-opacity: 0.12;  /* pattern strength (0 to 1) */
  --banner-photo-tint: 0.6;        /* Espresso over photos (0 to 1) */
  min-height: 0;
  margin: var(--frame-gap) var(--frame-inset) 0;
  padding-block: var(--wp--preset--spacing--60);
  /* Lines the banner text up with the header's content edge. */
  padding-inline: max(0px, calc(var(--wp--preset--spacing--40) - var(--frame-inset)));
  border-radius: var(--frame-radius);
  overflow: hidden;
  align-items: flex-end;
  justify-content: flex-start;
}
.rr-page-banner .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--wp--style--global--content-size, 1200px);
  margin-inline: auto;
  color: var(--cream);
  position: relative;
  z-index: 2; /* above the pattern */
}

/* No photo: solid Espresso plus the pattern (same color and strength as the footer) */
.rr-page-banner .wp-block-cover__background { opacity: 1 !important; }
.rr-page-banner:not(:has(.wp-block-cover__image-background))::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--art-pattern);
  opacity: var(--banner-pattern-opacity);
  -webkit-mask: url("../images/patterns/croissant-coffee.svg") repeat 0 0 / 1100px auto;
          mask: url("../images/patterns/croissant-coffee.svg") repeat 0 0 / 1100px auto;
}

/* Photo: tint it */
.rr-page-banner:has(.wp-block-cover__image-background) .wp-block-cover__background { opacity: var(--banner-photo-tint) !important; }

.rr-page-banner .rr-page-banner__eyebrow {
  margin: 0 0 10px;
  color: var(--gold);
  font-family: var(--font-archivo-narrow);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}
.rr-page-banner .rr-page-banner__title {
  margin: 0;
  color: var(--cream);
  font-size: var(--wp--preset--font-size--section);
  line-height: 1;
  letter-spacing: -0.03em;
}
.rr-page-banner .rr-page-banner__intro {
  max-width: 560px;
  margin: 14px 0 0;
  color: var(--cream);
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: 1.6;
}

/* Phones: lining the text up with the header logo would leave only 8px
   inside the banner, so give it real breathing room instead. */
@media (max-width: 600px) {
  .wp-block-cover.rr-page-banner { padding-inline: 20px; }
}

/* Reading column under the banner */
.rr-page { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }

/* Reading scale for headings on the default page. Site-wide, H2 uses the big
   Section size for designed headlines (homepage, Full Width pages); inside a
   text page that's far too loud, so headings step down here. */
.rr-page:not(.rr-page--full) .wp-block-post-content :is(h2, h3, h4, h5, h6) {
  margin-block: 1.6em 0.5em;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.rr-page:not(.rr-page--full) .wp-block-post-content h2 { font-size: clamp(26px, 2.6vw, 32px); }
.rr-page:not(.rr-page--full) .wp-block-post-content h3 { font-size: clamp(21px, 2vw, 24px); }
.rr-page:not(.rr-page--full) .wp-block-post-content :is(h4, h5, h6) { font-size: 20px; }
.rr-page:not(.rr-page--full) .wp-block-post-content > :first-child { margin-top: 0; }
.rr-page--full { padding-top: 0; }