/*
 * Notable section blocks. Same class names and structure as
 * packages/web-core/src/astro, written against the --nw-* token names the
 * theme aliases to its theme.json presets. Values here are tokens only.
 */
.nw-section { padding-block: var(--wp--preset--spacing--70, clamp(68px, 9vw, 124px)); margin-block: 0; background: var(--nw-surface); color: var(--nw-ink); }
.wp-block-post-content > .nw-section, .wp-block-post-content > .nw-section + .nw-section { margin-block-start: 0; }
.nw-section--soft { background: var(--nw-bg); }
.nw-section:not(.nw-section--soft, .nw-section--dark, .nw-section--accent, .nw-hero-section) + .nw-section:not(.nw-section--soft, .nw-section--dark, .nw-section--accent, .nw-hero-section),
.nw-section--soft:not(.nw-hero-section) + .nw-section--soft { padding-block-start: 0; }
.nw-section--dark { background: var(--nw-dark); color: var(--nw-dark-ink); }
.nw-section--dark :is(h1, h2, h3) { color: var(--nw-dark-ink); }
.nw-section--accent { background: var(--nw-accent); color: var(--nw-accent-ink); }
.nw-section--accent :is(h1, h2, h3) { color: var(--nw-accent-ink); }
.nw-container { width: min(calc(100% - 2 * var(--wp--preset--spacing--50, 20px)), var(--nw-max)); margin-inline: auto; }
.nw-container--narrow { max-width: var(--wp--style--global--content-size, 760px); }
.nw-eyebrow, .nw-card__kicker { margin: 0 0 14px; text-transform: uppercase; letter-spacing: .14em; font-size: var(--wp--preset--font-size--small); font-weight: 800; }
.nw-section :is(h1, h2, h3) { margin-top: 0; }
.nw-section h1 { margin-bottom: 24px; font-size: var(--wp--preset--font-size--huge); line-height: 1; max-width: 16ch; overflow-wrap: break-word; }
.nw-section h1.has-text-align-center { margin-inline: auto; text-wrap: balance; max-width: min(100%, 24ch); }
/* Section headings wrap in balanced lines: "Crafting Resilient Moments That Delight" left "Delight" alone (Cordee's review, 2026-10-28). */
.nw-section h2 { text-wrap: balance; }
.nw-section h2 { margin-bottom: 20px; font-size: var(--wp--preset--font-size--xx-large); line-height: 1.05; }
.nw-section h3 { margin-bottom: 12px; font-size: var(--wp--preset--font-size--large); }
.nw-lede, .nw-section-heading > p, .nw-cta p { font-size: var(--wp--preset--font-size--large); max-width: 62ch; }
.nw-lede, .nw-section-heading > p { color: var(--nw-muted); }
.nw-section--dark :is(.nw-lede, .nw-section-heading > p, .nw-eyebrow), .nw-section--accent :is(.nw-lede, .nw-section-heading > p, .nw-eyebrow), .nw-hero-section--cover .nw-eyebrow { color: inherit; }
.nw-section--accent .nw-cta p { color: inherit; }
.nw-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Shared section options */
.nw-section.nw-section--compact { padding-block: var(--wp--preset--spacing--60, 48px); }
.nw-section.nw-section--roomy { padding-block: calc(var(--wp--preset--spacing--70, 110px) * 1.35); }
.nw-card-grid--flat .nw-card { border-color: transparent; background: var(--nw-bg); }
.nw-section--soft .nw-card-grid--flat .nw-card { background: var(--nw-surface); }
.nw-card-grid--raised .nw-card { border-color: transparent; box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--nw-ink) 40%, transparent); }
/* Cards keep a surface background, so inside a dark or accent band they keep the ink colour too. */
:is(.nw-section--dark, .nw-section--accent) :is(.nw-card, .nw-testimonial, .nw-faq__item) { color: var(--nw-ink); }
:is(.nw-section--dark, .nw-section--accent) :is(.nw-card, .nw-testimonial, .nw-faq__item) :is(h3, a, summary) { color: var(--nw-ink); }
.nw-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nw-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Section (flexible): core blocks inside, the section's tone around them */
.nw-flex--full > .nw-container { width: calc(100% - 2 * var(--wp--preset--spacing--50, 20px)); max-width: none; }
.nw-flex--image { position: relative; overflow: hidden; }
.nw-flex--image > .nw-container { position: relative; }
.nw-flex__content > * + * { margin-block-start: var(--wp--preset--spacing--40, 1.5rem); }
.nw-flex__content :is(h2, h3) { color: inherit; }
.nw-section--dark .nw-flex__content a:not(.wp-element-button), .nw-section--accent .nw-flex__content a:not(.wp-element-button) { color: inherit; }

/* Hero */
.nw-hero { display: grid; align-items: center; min-height: min(620px, 70vh); }
.nw-hero--media { grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: clamp(32px, 6vw, 88px); }
.nw-hero__copy { max-width: 780px; min-width: 0; }
.nw-hero__media { overflow: hidden; border-radius: var(--nw-radius); }
.nw-media { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--nw-radius); }
.nw-hero-section--cover { position: relative; overflow: hidden; background: var(--nw-dark); color: var(--nw-dark-ink); }
.nw-hero-section--cover h1 { color: var(--wp--custom--heading-on-image, var(--nw-dark-ink)); }
/* Banner: a short, centred page title over the image, for inner pages of sites that had one. */
.nw-hero-section--banner .nw-hero { min-height: clamp(220px, 32vw, 420px); justify-items: center; text-align: center; }
.nw-hero-section--banner .nw-hero__copy { margin-inline: auto; }
.nw-hero-section--banner h1 { max-width: none; margin-bottom: 12px; }
.nw-hero-section--banner .nw-lede { margin-inline: auto; }
.nw-hero-section--banner .nw-actions { justify-content: center; }
.nw-hero-section--banner .nw-hero-cover::after { background: rgba(0,0,0,.6); }
/* A compact banner is a short page-title strip, as many page-builder sites drew their inner-page banners (Cordee's Coffee's
   Contact and review pages were about 320px tall; the default banner made them about 670px, review 2026-10-28). */
.nw-hero-section--banner.nw-section--compact .nw-hero { min-height: clamp(150px, 16vw, 230px); }
.nw-hero-section--cover .nw-lede { color: color-mix(in srgb, var(--nw-dark-ink) 88%, transparent); }
.nw-hero-cover { position: absolute; inset: 0; }
.nw-hero-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.25) 100%); }
.nw-hero-cover__image { width: 100%; height: 100%; object-fit: cover; }
.nw-hero-section--cover .nw-container { position: relative; }

/* Feature grid */
.nw-section-heading { max-width: 780px; margin-bottom: 44px; margin-inline: var(--wp--custom--heading-inset, 0); text-align: var(--wp--custom--heading-align, start); }
.nw-section-heading > p { margin-inline: var(--wp--custom--heading-inset, 0); }
.nw-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.nw-card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nw-card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nw-card { position: relative; background: var(--nw-surface); border: 1px solid var(--wp--custom--frame, var(--nw-line)); border-radius: var(--nw-radius); padding: clamp(24px, 3vw, 40px); min-height: 220px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.nw-card p:last-child { color: var(--nw-muted); margin-bottom: 0; }
.nw-card h3 a { text-decoration: none; }
.nw-card--link h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nw-card:hover { transform: translateY(-4px); box-shadow: var(--nw-shadow); border-color: color-mix(in srgb, var(--nw-primary) 40%, var(--nw-line)); }
.nw-card--link:hover h3 a { color: var(--nw-ink); text-decoration-line: underline; text-decoration-thickness: 2px; }

/* Split */
.nw-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 7vw, 100px); align-items: center; }
.nw-split > div { min-width: 0; }
.nw-split--reverse > :first-child { order: 2; }
.nw-split--framed > .nw-split__copy { border: 1px solid var(--wp--custom--frame, var(--nw-line)); border-radius: var(--nw-radius); padding: clamp(24px, 3.5vw, 48px); }
.nw-split__shape { min-height: 320px; border: 1px solid color-mix(in srgb, var(--nw-dark-ink) 35%, transparent); border-radius: var(--nw-radius); background: linear-gradient(135deg, color-mix(in srgb, var(--nw-accent) 65%, transparent), transparent); }

/* Rich text */
.nw-prose > * + * { margin-top: 1em; }
.nw-prose p, .nw-prose li { line-height: 1.7; }
.nw-prose blockquote { margin: 0; padding-left: 20px; border-left: 4px solid var(--nw-accent); }
/* Prose takes its ink from the section's tone, so a split set to light or accent stays legible. */
.nw-section--dark :is(.nw-prose, .nw-prose p, .nw-prose li) { color: var(--nw-dark-ink); }
.nw-section--accent :is(.nw-prose, .nw-prose p, .nw-prose li) { color: var(--nw-accent-ink); }

/* CTA band */
.nw-cta { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.nw-cta > div { max-width: 760px; }

/* Gallery */
.nw-gallery { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.nw-gallery figure { margin: 0; }
.nw-gallery figcaption { margin-top: 8px; color: var(--nw-muted); font-size: var(--wp--preset--font-size--small); }

/* Testimonials */
.nw-testimonials { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.nw-testimonial { padding: clamp(22px, 3vw, 34px); border: 1px solid var(--nw-line); border-radius: var(--nw-radius); background: var(--nw-surface); }
.nw-testimonial blockquote { margin: 0 0 14px; }
.nw-testimonial blockquote p { font-size: var(--wp--preset--font-size--large); line-height: 1.5; margin: 0; }
.nw-testimonial__author { margin: 0; color: var(--nw-muted); }

/* FAQ */
.nw-faq { display: grid; gap: 12px; }
.nw-faq__item { padding: 16px 20px; border: 1px solid var(--nw-line); border-radius: 12px; background: var(--nw-surface); transition: border-color .18s ease; }
.nw-faq__item:hover { border-color: var(--nw-primary); }
.nw-faq__item summary { cursor: pointer; font-weight: 750; }
.nw-faq__item summary:hover { color: var(--nw-ink); text-decoration: underline; }
.nw-faq__item .nw-prose { margin-top: 12px; }

/* Contact */
.nw-contact { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.nw-contact--text { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

.nw-placeholder { padding: 24px; border: 2px dashed var(--nw-line); border-radius: 12px; color: var(--nw-muted); }

@media (max-width: 900px) {
  .nw-card-grid--4, .nw-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
  .nw-hero { min-height: auto; }
  .nw-hero--media, .nw-split, .nw-card-grid, .nw-card-grid--2, .nw-card-grid--4, .nw-gallery, .nw-gallery--2, .nw-gallery--4, .nw-contact { grid-template-columns: minmax(0, 1fr); }
  .nw-split--reverse > :first-child { order: initial; }
  .nw-cta { align-items: start; flex-direction: column; }
  .nw-hero-section--cover .nw-hero { min-height: 420px; }
}
/* A 300px security widget (Cloudflare Turnstile at its normal size, drawn by Fluent Forms or Simple Cloudflare
   Turnstile) needs 300px at the 320px reflow width, where the section gutters leave 272px and the page scrolled
   sideways (Holy Grail's sign-up band, 2026-10-28). */
@media (max-width: 359px) {
  .nw-section:has(.cf-turnstile) > .nw-container { width: calc(100% - 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .nw-card, .nw-faq__item { transition: none; }
  .nw-card:hover { transform: none; }
}

/* Hero slideshow (cover layout with more slides): images crossfade behind the heading. */
.nw-slideshow__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.nw-slideshow__slide.is-active { opacity: 1; }
.nw-slideshow__toggle { position: absolute; right: 16px; bottom: 16px; z-index: 2; padding: 6px 12px; border: 1px solid rgba(255,255,255,.7); border-radius: var(--nw-button-radius, 999px); background: rgba(0,0,0,.55); color: #fff; font: inherit; font-size: var(--wp--preset--font-size--small); cursor: pointer; }
.nw-slideshow__toggle:hover, .nw-slideshow__toggle:focus-visible { background: rgba(0,0,0,.8); }
@media (prefers-reduced-motion: reduce) { .nw-slideshow__slide { transition: none; } }

/* Gallery carousel and logo strip: one scrolling row. */
.nw-carousel { position: relative; }
.nw-carousel__track { margin: 0; padding: 0 0 8px; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 18px) / 3); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.nw-carousel--2 .nw-carousel__track { grid-auto-columns: calc((100% - 18px) / 2); }
.nw-carousel--4 .nw-carousel__track { grid-auto-columns: calc((100% - 3 * 18px) / 4); }
/* One card at a time (feature grid as a text slider). */
.nw-carousel--1 .nw-carousel__track { grid-auto-columns: 100%; }
.nw-carousel--1 .nw-card { min-height: 0; }
.nw-carousel--1 .nw-card:hover { transform: none; }
.nw-carousel__track > li { scroll-snap-align: start; }
.nw-carousel__track figure { margin: 0; }
.nw-carousel__track img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.nw-carousel__track figcaption { margin-top: 8px; color: var(--nw-muted); font-size: var(--wp--preset--font-size--small); }
.nw-carousel__track:focus-visible { outline: 2px solid var(--nw-primary); outline-offset: 4px; }
.nw-carousel__controls { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.nw-carousel__button { width: 44px; height: 44px; border: 1px solid var(--nw-line); border-radius: var(--nw-button-radius, 999px); background: var(--nw-surface); color: var(--nw-ink); font-family: inherit; font-size: 1.1rem; cursor: pointer; }
.nw-carousel__button:hover, .nw-carousel__button:focus-visible { border-color: var(--nw-ink); color: var(--nw-ink); }
.nw-carousel--logos .nw-carousel__track { grid-auto-columns: calc((100% - 5 * 18px) / 6); scroll-snap-type: none; align-items: center; }
.nw-carousel--logos .nw-carousel__track img { aspect-ratio: 3 / 2; object-fit: contain; }
/* Testimonial carousel: three at a time, one on a phone; dots under the track. */
/* The track is also an .nw-testimonials list: drop its auto-fit columns so every slide takes the track's auto column
   (with them, at tablet widths two slides were 280px and the next stretched to the whole track, cut mid-word). */
.nw-carousel--testimonials .nw-carousel__track { align-items: stretch; grid-template-columns: none; }
.nw-carousel--testimonials .nw-testimonial { height: 100%; }
.nw-carousel__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.nw-carousel__dots:empty { display: none; }
.nw-carousel__dot { color: inherit; position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.nw-carousel__dot::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid currentColor; background: transparent; transition: background .18s ease, transform .18s ease; }
.nw-carousel__dot[aria-current="true"]::before { background: currentColor; transform: scale(1.25); }
.nw-carousel__dot:hover::before, .nw-carousel__dot:focus-visible::before { background: currentColor; }
.nw-carousel__pause { width: auto; padding-inline: 16px; font-size: var(--wp--preset--font-size--small); font-weight: 700; }
@media (max-width: 800px) {
  .nw-carousel--testimonials .nw-carousel__track { grid-auto-columns: 100%; }
  .nw-carousel__track, .nw-carousel--2 .nw-carousel__track, .nw-carousel--4 .nw-carousel__track { grid-auto-columns: 85%; }
  .nw-carousel--1 .nw-carousel__track { grid-auto-columns: 100%; }
  .nw-carousel--logos .nw-carousel__track { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
}