/* Snohomish Chiropractic — front-end visual layer.
   Tokens come from theme.json (--wp--preset--color--*, --wp--preset--font-family--*). */

:root {
  --sn-gold: var(--wp--preset--color--gold);
  --sn-gold-deep: var(--wp--preset--color--gold-deep);
  --sn-ink: var(--wp--preset--color--ink);
  --sn-muted: var(--wp--preset--color--muted);
  --sn-line: var(--wp--preset--color--line);
  --sn-charcoal: var(--wp--preset--color--charcoal);
  --sn-taupe: var(--wp--preset--color--taupe);
  --sn-ondark: var(--wp--preset--color--on-dark);
  --sn-ondark-soft: var(--wp--preset--color--on-dark-soft);
  --sn-display: var(--wp--preset--font-family--display);
  --sn-body: var(--wp--preset--font-family--body);
}

/* Guard against any element causing a horizontal scrollbar on small screens. */
html { overflow-x: clip; }

h1, h2, h3, h4 { text-wrap: balance; }
.sn-serif { font-family: var(--sn-display); }
.sn-italic { font-style: italic; }
em.sn-accent, .sn-accent { font-family: var(--sn-display); font-style: italic; color: var(--sn-gold); }

/* ---- Section vertical rhythm ---- */
.sn-section { padding-block: clamp(1.7rem, 3.5vw, 2.9rem); }
.sn-section--tight { padding-block: clamp(1.3rem, 2.5vw, 2rem); }
/* Trust bar sits a little tighter top/bottom than other tight sections. */
.sn-section--tight:has(.sn-stat-row) { padding-block: clamp(1.1rem, 2.2vw, 1.7rem); }
.sn-inner > .wp-block-group__inner-container,
.sn-inner { --wp--style--global--content-size: 1160px; }

/* ---- Eyebrow label ---- */
.sn-eyebrow {
  font-family: var(--sn-body);
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sn-gold-deep);
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0 0.6rem;
}
.sn-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--sn-gold); display: inline-block; flex: none; }
.sn-eyebrow.has-on-dark-color { color: var(--sn-gold); }
.sn-eyebrow.sn-center { justify-content: center; }
.sn-eyebrow.sn-center::after { content: ""; width: 26px; height: 1px; background: var(--sn-gold); display: inline-block; flex: none; }

/* ---- Buttons ---- */
.wp-block-button__link { transition: transform .18s ease, background .18s ease, color .18s ease; }
.wp-block-button:not(.is-ghost):not(.is-dark) .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-ghost .wp-block-button__link {
  background: transparent; color: var(--sn-ink);
  border: 1px solid color-mix(in srgb, var(--sn-ink) 35%, transparent);
}
.wp-block-button.is-ghost .wp-block-button__link:hover { border-color: var(--sn-gold); color: var(--sn-gold-deep); }
.wp-block-button.is-dark .wp-block-button__link { background: var(--sn-charcoal); color: var(--sn-ondark); }
.wp-block-button.is-dark .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-onlight-ghost .wp-block-button__link { background: transparent; color: var(--sn-ondark); border: 1px solid color-mix(in srgb, #fff 30%, transparent); }

/* ---- Cards (group block styles) ---- */
.wp-block-group.is-style-card {
  background: var(--wp--preset--color--bone);
  border: 1px solid var(--sn-line);
  border-radius: 5px;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
}
.wp-block-group.is-style-card-dark {
  background: var(--sn-charcoal);
  border-radius: 5px;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  color: var(--sn-ondark);
}
.wp-block-group.is-style-card-dark :where(h1,h2,h3,h4,p,li) { color: var(--sn-ondark); }
.sn-card-hover { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.sn-card-hover:hover { transform: translateY(-3px); border-color: var(--sn-gold); box-shadow: 0 12px 30px -20px rgba(46,42,37,.5); }

/* ---- Spine chip emblem ---- */
.sn-chip { width: 34px; height: 34px; border-radius: 8px; background: color-mix(in srgb, var(--sn-taupe) 12%, transparent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sn-chip svg { width: 20px; height: 20px; display: block; }

/* ---- Contour hero background ---- */
.sn-contour { position: relative; overflow: hidden; }
.sn-contour::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 82% 34%, transparent 0 70px, color-mix(in srgb, var(--sn-gold) 55%, transparent) 70px 71px, transparent 71px 142px),
    repeating-radial-gradient(circle at 82% 34%, transparent 0 35px, color-mix(in srgb, var(--sn-taupe) 40%, transparent) 35px 35.7px, transparent 35.7px 70px);
  mask-image: radial-gradient(120% 90% at 82% 34%, #000 40%, transparent 78%);
}
.sn-contour > * { position: relative; z-index: 1; }

/* ---- Hero offer card divider ---- */
.sn-hr-soft { border: 0; height: 1px; background: color-mix(in srgb, #fff 16%, transparent); margin: 0; }
.sn-check { color: var(--sn-gold); font-weight: 600; }

/* ---- Pull quote (story) ---- */
.sn-pullquote { border-left: 3px solid var(--sn-gold); padding-left: 1.2rem; font-family: var(--sn-display); font-style: italic; color: var(--sn-charcoal); font-size: clamp(1.35rem, 1rem + 1.4vw, 1.85rem); line-height: 1.28; }

/* ---- Trust / stat row ---- */
.sn-stat-num { font-family: var(--sn-display); color: var(--sn-gold-deep); font-size: 1.3rem; line-height: 1.1; }
.wp-block-group.is-style-card-dark .sn-stat-num { color: var(--sn-gold); }
/* Quick-link list inside a dark hero card (e.g. Resources "Start here"). */
.sn-herolist { list-style: none; margin: 0; padding: 0; }
.sn-herolist li { border-top: 1px solid rgba(255,255,255,.12); padding-top: 0.65rem; }
.sn-herolist li:first-child { border-top: 0; padding-top: 0; }
.sn-herolist a { color: var(--sn-ondark); text-decoration: none; font-weight: 500; }
.sn-herolist a:hover { color: var(--sn-gold); }
/* On mobile the four items stack — divide them with a hairline and even spacing. */
@media (max-width: 781px) {
  .sn-stat-row.wp-block-columns { row-gap: 0; }
  .sn-stat-row > .wp-block-column + .wp-block-column {
    border-top: 1px solid color-mix(in srgb, var(--sn-ondark) 22%, transparent);
    margin-top: 1.6rem;
    padding-top: 1.6rem;
  }
}
/* On desktop the four sit side by side — separate them with vertical hairlines,
   balanced padding on each side of the line. */
@media (min-width: 782px) {
  .sn-stat-row.wp-block-columns { column-gap: 0; }
  .sn-stat-row > .wp-block-column { padding-inline: clamp(1.1rem, 1.7vw, 1.8rem); }
  .sn-stat-row > .wp-block-column:first-child { padding-left: 0; }
  .sn-stat-row > .wp-block-column:last-child { padding-right: 0; }
  .sn-stat-row > .wp-block-column + .wp-block-column {
    border-left: 1px solid color-mix(in srgb, var(--sn-ondark) 24%, transparent);
  }
}

/* ---- FAQ (core/details) ---- */
.sn-faq .wp-block-details { border-top: 1px solid var(--sn-line); padding-block: 1.25rem; }
.sn-faq .wp-block-details:last-child { border-bottom: 1px solid var(--sn-line); }
.sn-faq summary { font-family: var(--sn-display); font-size: 1.15rem; color: var(--sn-ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; }
.sn-faq summary::-webkit-details-marker { display: none; }
.sn-faq summary::after { content: "+"; color: var(--sn-gold-deep); font-family: var(--sn-body); font-weight: 400; font-size: 1.5rem; line-height: 1; flex: none; }
.sn-faq details[open] summary::after { content: "\2013"; }
.sn-faq .wp-block-details > :not(summary) { color: var(--sn-muted); max-width: 70ch; margin-top: 0.9rem; }

/* ---- Header / nav ---- */
.wp-block-template-part .sn-header { background: var(--sn-charcoal); padding-block: 13px; }
@media (min-width: 782px) { .wp-block-template-part .sn-header { padding-block: 18px; } }
.sn-header a { text-decoration: none; }
.sn-nav .wp-block-navigation-item__label { color: var(--sn-ondark-soft); font-size: 0.9rem; }
.sn-nav .wp-block-navigation-item:hover .wp-block-navigation-item__label { color: var(--sn-ondark); }
.sn-header .wp-block-site-title a { color: var(--sn-ondark); }
.sn-header .sn-brand-sub { color: var(--sn-ondark-soft); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; }

/* ---- Footer ---- */
.sn-footer { background: var(--sn-charcoal); color: var(--sn-ondark-soft); }
.sn-footer :where(h1,h2,h3,h4) { color: var(--sn-ondark); }
.sn-footer a { color: var(--sn-ondark); text-decoration: none; }
.sn-footer a:hover { color: var(--sn-gold); }
.sn-footer .sn-eyebrow, .sn-footer .sn-footcol-h { color: var(--sn-ondark-soft); }

/* ---- On-dark helpers ---- */
.has-charcoal-background-color :where(h1,h2,h3,h4), .has-charcoal-2-background-color :where(h1,h2,h3,h4),
.has-taupe-background-color :where(h1,h2,h3,h4) { color: var(--sn-ondark); }
.sn-on-dark, .sn-on-dark :where(p,li,h1,h2,h3,h4) { color: var(--sn-ondark); }
.sn-muted { color: var(--sn-muted); }

/* ---- Map / stylized ---- */
.sn-map { position: relative; border-radius: 5px; overflow: hidden; border: 1px solid var(--sn-line); background: #E4E9E0; aspect-ratio: 16/10; }
.sn-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- Misc ---- */
.sn-lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--sn-muted); }
figure.wp-block-image img { border-radius: 5px; }

/* ---- Custom blocks ---- */
.sn-brandmark { display: inline-flex; line-height: 0; transition: opacity .18s ease; }
.sn-brandmark__img { display: block; width: auto; height: var(--sn-logo-h, 36px); }
/* Header logo scales up ~1.5x on desktop; footer + mobile keep the block's set height. */
@media (min-width: 782px) { .sn-header .sn-brandmark__img { height: 60px; } }
a.sn-brandmark:hover { opacity: .82; }
.sn-portrait { max-width: 400px; }
.sn-portrait__frame { position: relative; border-radius: 5px; overflow: hidden; background: var(--sn-charcoal); aspect-ratio: 4/5; }
.sn-portrait__frame svg { display: block; width: 100%; height: 100%; }
.sn-portrait__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.sn-portrait__frame.has-photo { box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--sn-charcoal) 55%, transparent); }
.sn-portrait__frame.has-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sn-gold) 45%, transparent); border-radius: inherit; }
.sn-portrait__badge { position: absolute; left: 0; bottom: 0; z-index: 1; background: var(--sn-gold); color: var(--sn-charcoal); padding: 12px 20px; font-family: var(--sn-display); font-size: 17px; line-height: 1.15; }
.sn-portrait__badge span { display: block; font-family: var(--sn-body); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sn-taupe); margin-top: 3px; }
/* Give the condition grid room to breathe between cards. */
/* Condition grid: stack on mobile, then double the columns up the breakpoints
   (1 → 2 → 4 → 8). Overrides the block's fixed columnCount. */
.wp-block-group.sn-cond-grid {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
}
.sn-condcard { min-width: 0; }
.sn-condcard__title, .sn-condcard__desc { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 560px)  { .wp-block-group.sn-cond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .wp-block-group.sn-cond-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* At 8-up the cards are narrow — tighten padding so they don't feel cramped. */
@media (min-width: 1300px) { .sn-cond-grid .sn-condcard { padding: clamp(0.9rem, 1vw, 1.15rem); border-radius: 11px; } }

/* ---- Testimonial / review grid: same 1 -> 2 -> 4 -> 8 responsive columns as
   the condition grid, with smaller, calmer quote text that steps down as the
   columns multiply so 8-up stays legible. ---- */
.wp-block-group.sn-review-grid { display: grid; gap: clamp(1rem, 1.6vw, 1.4rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px)  { .wp-block-group.sn-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .wp-block-group.sn-review-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sn-review-grid > .is-style-card { min-width: 0; padding: clamp(1.15rem, 1.5vw, 1.5rem); }
.sn-review-grid .sn-pullquote { min-width: 0; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.5; border-left-width: 2px; padding-left: 0.9rem; }
@media (min-width: 900px)  { .sn-review-grid .sn-pullquote { font-size: 0.95rem; } }

/* Condition cards render as their own block (not .wp-block-group), so the
   is-style-card box never reached them — style .sn-condcard directly. */
.sn-condcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	background: var(--wp--preset--color--bone);
	border: 1px solid var(--sn-line);
	border-radius: 14px;
	padding: clamp(1.6rem, 2.4vw, 2.1rem);
	box-shadow: 0 1px 2px rgba(46,42,37,.05), 0 18px 32px -26px rgba(46,42,37,.5);
}
.sn-condcard__title { font-family: var(--sn-body); font-weight: 600; font-size: 1rem; line-height: 1.22; margin: 0; }
.sn-condcard__title a { text-decoration: none; color: var(--sn-ink); }
/* Stretch the title link over the whole card so the entire card is clickable. */
.sn-condcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sn-condcard:hover .sn-condcard__title a,
.sn-condcard__title a:hover { color: var(--sn-gold-deep); }
.sn-condcard__desc { color: var(--sn-muted); font-size: 0.85rem; line-height: 1.46; margin: 0; }

/* ---- Condition / interior page helpers ---- */
.sn-callout { background: var(--wp--preset--color--sand); border-left: 4px solid var(--sn-gold); border-radius: 5px; padding: clamp(1.3rem, 2.5vw, 1.7rem); }
.sn-callout p { font-family: var(--sn-display); font-size: clamp(1.15rem, 1rem + .6vw, 1.35rem); line-height: 1.4; color: var(--sn-ink); margin: 0; }
.sn-step-num { font-family: var(--sn-display); color: var(--sn-gold-deep); font-size: 1.4rem; line-height: 1; margin: 0 0 .3rem; }
.sn-checklist-plain { list-style: none; margin: 0; padding: 0; }
.sn-checklist-plain li { position: relative; padding-left: 1.7rem; margin-bottom: .7rem; color: var(--sn-ink); }
.sn-checklist-plain li::before { content: "\2713"; position: absolute; left: 0; color: var(--sn-gold-deep); font-weight: 700; }
.sn-atglance-row { border-top: 1px solid color-mix(in srgb, #fff 14%, transparent); padding-top: .9rem; margin-top: .9rem; }
.sn-atglance-row:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.sn-atglance-label { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sn-gold); font-weight: 600; margin: 0 0 .3rem; }
/* These cards use blockGap:0, so the title sits flush on the first row's label.
   Give the card title real separation from the first row. */
.wp-block-group.is-style-card-dark > .wp-block-heading:first-child:has(+ .sn-atglance-row) { margin-bottom: 1.2rem; }
.sn-breadcrumb { font-size: .78rem; color: var(--sn-muted); margin: 0 0 .8rem; }
.sn-breadcrumb a { color: var(--sn-muted); text-decoration: none; }
.sn-breadcrumb .sn-here { color: var(--sn-gold-deep); font-weight: 600; }

/* ---- Hours table ---- */
.sn-hours { padding-block: 0.4rem; }
.sn-hours .sn-hours-row { padding: 0.85rem clamp(1.2rem,2vw,1.4rem); border-bottom: 1px solid var(--sn-line); }
.sn-hours .sn-hours-row:last-child { border-bottom: 0; }
.sn-hours .sn-hours-row p { margin: 0; }
.sn-closed { color: #A24B3B; }

/* =====================  SPARK PASS  ===================== */
/* Reveal sections on scroll (only when JS + motion allowed adds .sn-anim) */
.sn-anim .sn-section { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.sn-anim .sn-section.sn-in { opacity: 1; transform: none; }

/* Ambient contour "breathing" in hero bands */
.sn-contour::before { transform-origin: 82% 34%; }
.sn-anim .sn-contour::before { animation: sn-breathe 18s ease-in-out infinite; }
@keyframes sn-breathe { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .82; } }

/* Gold underline that draws under the italic accent when its section enters */
.sn-anim .sn-accent { background-image: linear-gradient(var(--sn-gold), var(--sn-gold)); background-repeat: no-repeat; background-position: 0 90%; background-size: 0% 2px; transition: background-size .8s cubic-bezier(.2,.7,.2,1) .3s; padding-bottom: 1px; }
.sn-anim .sn-section.sn-in .sn-accent { background-size: 100% 2px; }

/* On-dark / feature band helper (recolors a light section's own text; cards keep their own colors) */
.sn-ondark-band :where(h1,h2,h3,h4) { color: var(--sn-ondark); }
.sn-ondark-band > p, .sn-ondark-band .sn-lede, .sn-ondark-band .sn-muted { color: var(--sn-ondark-soft); }
.sn-ondark-band .sn-eyebrow { color: var(--sn-gold); }
.sn-ondark-band .sn-eyebrow::before, .sn-ondark-band .sn-eyebrow.sn-center::after { background: var(--sn-gold); }
.sn-ondark-band .sn-stat-num { color: var(--sn-gold); }
.sn-ondark-band .wp-block-group.is-style-card :where(h1,h2,h3,h4) { color: var(--sn-ink); }
.sn-ondark-band .wp-block-group.is-style-card p.sn-muted { color: var(--sn-muted); }
.sn-ondark-band .wp-block-group.is-style-card { box-shadow: 0 18px 40px -28px rgba(0,0,0,.55); }

@media (prefers-reduced-motion: reduce) {
  .sn-anim .sn-section { opacity: 1; transform: none; transition: none; }
  .sn-anim .sn-contour::before { animation: none; }
  .sn-anim .sn-accent { background-size: 100% 2px; transition: none; }
}

/* ---- Hero art (bold contour + aligned spine) ---- */
.sn-heroart { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sn-contour > .sn-heroart { z-index: 0; }
.sn-heroart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sn-contour:has(.sn-heroart)::before { display: none; } /* hero-art replaces the faint CSS rings */
/* When a photo sits behind hero-art, soften the gold linework so they don't fight. */
.sn-contour:has(.sn-heroimg) .sn-heroart { opacity: 0.55; }

/* Hero photo layer: fills the band behind the contour rings (z:-1 keeps the SVG
   overlay and copy on top) and dissolves into the page on the text/left side. */
.sn-heroimg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Isolate so the z:-1 photo layers above the band's own background, not behind it. */
.sn-contour:has(.sn-heroimg) { isolation: isolate; }
/* Full-bleed: override the constrained-layout max-width that was clipping the layer
   to the 1160px content width (the "hard right edge"). */
.sn-contour > .sn-heroimg { z-index: -1; max-width: none; }

/* Photo heroes keep their copy in a left column (see each hero's columns markup) so
   text never sits on the photo — as if the card were always there. */
.sn-heroimg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sn-heroimg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    /* left: solid bone across the text column. right: the photo reads strong through
       the middle, then feathers all the way back to full bone at the right edge —
       no hard cut-off. */
    linear-gradient(90deg,
      var(--wp--preset--color--bone) 0%,
      var(--wp--preset--color--bone) 44%,
      color-mix(in srgb, var(--wp--preset--color--bone) 38%, transparent) 55%,
      color-mix(in srgb, var(--wp--preset--color--bone) 6%, transparent) 68%,
      color-mix(in srgb, var(--wp--preset--color--bone) 6%, transparent) 83%,
      color-mix(in srgb, var(--wp--preset--color--bone) 46%, transparent) 93%,
      var(--wp--preset--color--bone) 100%),
    /* gentle top & bottom fade into bone */
    linear-gradient(0deg,
      var(--wp--preset--color--bone) 0%,
      color-mix(in srgb, var(--wp--preset--color--bone) 46%, transparent) 12%,
      transparent 40%,
      transparent 82%,
      color-mix(in srgb, var(--wp--preset--color--bone) 30%, transparent) 100%);
}
@media (max-width: 781px) {
  /* Stacked hero on mobile: wash the photo strongly behind the copy (top), let it
     read lower down, and settle back to bone at the bottom. */
  .sn-heroimg::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--wp--preset--color--bone) 85%, transparent) 0%,
      color-mix(in srgb, var(--wp--preset--color--bone) 74%, transparent) 32%,
      color-mix(in srgb, var(--wp--preset--color--bone) 44%, transparent) 62%,
      color-mix(in srgb, var(--wp--preset--color--bone) 30%, transparent) 80%,
      color-mix(in srgb, var(--wp--preset--color--bone) 52%, transparent) 100%);
  }
}

/* Mobile header: keep it to logo + menu button. The phone and CTA crowd the bar and
   push it to two rows — hide them on small screens (both remain in the footer/hero). */
@media (max-width: 600px) {
  .sn-header .sn-phone,
  .sn-header .wp-block-buttons { display: none; }
  /* guarantee the menu toggle shows on mobile (don't rely on core's responsive CSS) */
  .sn-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
}
/* Menu toggle reads clearly on the dark bar. */
.sn-header .wp-block-navigation__responsive-container-open,
.sn-header .wp-block-navigation__responsive-container-close { color: var(--sn-ondark); }
.sn-header .wp-block-navigation__responsive-container-open svg,
.sn-header .wp-block-navigation__responsive-container-close svg { fill: currentColor; }
.sn-anim .sn-heroart { transform-origin: 67% 39%; animation: sn-breathe 20s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sn-anim .sn-heroart { animation: none; } }

/* Full-bleed photo band (core/cover) — real care photography with an overlaid line. */
.sn-photoband .wp-block-cover__inner-container { max-width: 1160px; margin-inline: auto; width: 100%; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.sn-photoband :where(h1,h2,h3) { color: var(--sn-ondark); font-family: var(--sn-display); max-width: 20ch; }
.sn-photoband .sn-eyebrow { color: var(--sn-gold); }
.sn-photoband .sn-eyebrow::before { background: var(--sn-gold); }
.sn-photoband p:not(.sn-eyebrow) { color: var(--sn-ondark-soft); max-width: 46ch; }
.sn-photoband .wp-block-cover__image-background { filter: saturate(1.02); }

/* Clean full-width photo (core/image) — capped height, caption. */
.sn-photo-full { margin: 0; }
.sn-photo-full img { display: block; width: 100%; max-height: 520px; object-fit: cover; object-position: 74% 40%; }
.sn-photo-full figcaption { max-width: 1160px; margin: 0.75rem auto 0; padding-inline: clamp(1.25rem, 5vw, 3rem); font-family: var(--sn-body); font-size: 0.82rem; letter-spacing: .04em; color: var(--sn-muted); text-align: center; }

/* Caption paragraph under a full-wide photo cover. */
.sn-photo-caption { max-width: 1160px; margin: 0.75rem auto 0; padding-inline: clamp(1.25rem, 5vw, 3rem); font-family: var(--sn-body); font-size: 0.82rem; letter-spacing: .04em; color: var(--sn-muted); text-align: center; }

/* Scroll parallax on full-wide photo bands: the image layer is oversized so its
   travel never exposes an edge; spark.js translates it. Static without JS/motion.
   NB: selectors must out-specify core's .wp-block-cover__image-background rule,
   so no :where() here — it would zero out the specificity and the overhang is lost. */
.sn-parallax { overflow: hidden; }
.sn-parallax img.wp-block-cover__image-background,
.sn-parallax > img {
	height: 140%;
	top: -20%;
	bottom: auto;
	will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
	.sn-parallax img.wp-block-cover__image-background,
	.sn-parallax > img { height: 100%; top: 0; transform: none !important; }
}

/* ---- Contact form (snohochiro/contact-form) ---- */
.sn-form-wrap { max-width: 640px; }
.sn-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sn-form__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.1rem; }
.sn-form__field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.sn-form__field--full { margin-top: 1rem; }
.sn-form__field > span { font-family: var(--sn-body); font-size: 0.82rem; font-weight: 600; letter-spacing: .02em; color: var(--sn-ink); }
.sn-form__field > span em { font-weight: 400; color: var(--sn-muted); font-style: normal; }
.sn-form input, .sn-form select, .sn-form textarea {
  font-family: var(--sn-body); font-size: 0.95rem; color: var(--sn-ink);
  background: var(--wp--preset--color--bone); border: 1px solid var(--sn-line);
  border-radius: 7px; padding: 0.7rem 0.85rem; width: 100%;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sn-form textarea { resize: vertical; min-height: 96px; }
.sn-form input:focus, .sn-form select:focus, .sn-form textarea:focus {
  outline: none; border-color: var(--sn-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sn-gold) 22%, transparent);
}
.sn-form__actions { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.sn-form__actions .wp-block-button__link { background: var(--sn-gold); color: var(--sn-charcoal); border-radius: 6px; padding: 0.85rem 1.6rem; font-weight: 600; }
.sn-form__actions .wp-block-button__link:hover { transform: translateY(-2px); }
.sn-form__note { font-size: 0.78rem; color: var(--sn-muted); margin: 0; max-width: 52ch; }
.sn-form__flash { border-radius: 8px; padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: 0.25rem; }
.sn-form__flash strong { font-family: var(--sn-display); font-size: 1.15rem; }
.sn-form__flash--ok { background: color-mix(in srgb, var(--sn-gold) 16%, var(--wp--preset--color--bone)); border: 1px solid color-mix(in srgb, var(--sn-gold) 45%, transparent); color: var(--sn-ink); }
.sn-form__flash--err { background: #fbecea; border: 1px solid #e3b7b0; color: #7a2e22; }
.sn-form__flash a { color: var(--sn-gold-deep); }
@media (max-width: 560px) { .sn-form__grid { grid-template-columns: 1fr; } }

/* ---- Nav dropdown submenus (dark header) ---- */
.sn-nav .wp-block-navigation-submenu__toggle { color: var(--sn-ondark-soft); }
.sn-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.sn-nav .wp-block-navigation-submenu:hover .wp-block-navigation-submenu__toggle { color: var(--sn-ondark); }
.sn-nav .wp-block-navigation__submenu-icon { margin-left: 4px; }
.sn-nav .wp-block-navigation__submenu-container {
  background: var(--wp--preset--color--charcoal-2, #3A352F);
  border: 0;
  border-radius: 12px; padding: 6px; min-width: 232px;
  overflow: hidden;
  /* Shadow ONLY beneath the panel, none past the sides. The blur (12) must stay
     well under |spread| (20) — a soft shadow's Gaussian tail reaches ~1.5×blur,
     so a large blur overruns the negative spread and bleeds out the left/right
     edges onto the page. Small blur + large negative spread keeps the tail in. */
  box-shadow: 0 16px 12px -20px rgba(0,0,0,.45);
}
.sn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { display: block; }
.sn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 9px 13px; border-radius: 8px; width: 100%; margin: 0;
  transition: background .14s ease, color .14s ease;
}
.sn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__label { color: var(--sn-ondark-soft); font-size: 0.88rem; }
.sn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content { background: color-mix(in srgb, #fff 8%, transparent); }
.sn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover .wp-block-navigation-item__label { color: var(--sn-ondark); }
/* Mobile overlay submenu: flatten, indent children */
@media (max-width: 600px) {
  .sn-nav .wp-block-navigation__submenu-container { background: transparent; border: 0; box-shadow: none; padding-left: 12px; min-width: 0; }
}

/* Anchor the hero info card to the bottom of the hero, not vertically centered. */
.sn-contour .wp-block-column:has(> .wp-block-group.is-style-card-dark) { align-self: flex-end; }

/* Force the dark dropdown panel + readable links (core sets a white submenu bg). */
.sn-header .sn-nav .wp-block-navigation__submenu-container {
  background-color: #3A352F !important;
  color: var(--sn-ondark) !important;
  border: 0 !important;
}
.sn-header .sn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--sn-ondark-soft) !important; }
.sn-header .sn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
  color: var(--sn-ondark) !important; background-color: rgba(255,255,255,.08) !important;
}
/* Always open top-level dropdowns rightward from the parent's left edge. Core's
   right-edge "flip" heuristic misfires on narrow laptops (~600–900px), pushing
   even the leftmost panel off the left side of the screen with a negative left. */
@media (min-width: 601px) {
  .sn-header .sn-nav .wp-block-navigation__submenu-container {
    left: 0 !important;
    right: auto !important;
  }
}

/* ---- Mobile overlay menu (open state): dark, left-aligned, submenus inline ---- */
@media (max-width: 600px) {
  .sn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 4.5rem 1.7rem 2.5rem !important;
    width: 100%;
  }
  .sn-nav .is-menu-open .wp-block-navigation__container { align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; width: 100%; }
  .sn-nav .is-menu-open .wp-block-navigation-item { display: block; width: 100%; }
  .sn-nav .is-menu-open .wp-block-navigation-item__content,
  .sn-nav .is-menu-open .wp-block-navigation-submenu__toggle { justify-content: flex-start !important; text-align: left !important; width: 100%; }
  /* top-level: larger, spaced, hairline divider */
  .sn-nav .is-menu-open > .wp-block-navigation__container > .wp-block-navigation-item { border-top: 1px solid rgba(255,255,255,.10); }
  .sn-nav .is-menu-open > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
  .sn-nav .is-menu-open > .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle {
    font-family: var(--sn-display); font-size: 1.35rem !important; padding: 0.85rem 0 !important; color: var(--sn-ondark) !important;
  }
  /* submenu children: inline, indented, plain */
  .sn-nav .is-menu-open .wp-block-navigation__submenu-container {
    position: static !important; opacity: 1 !important; visibility: visible !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 0 0 0.9rem 0.2rem !important; min-width: 0 !important;
  }
  .sn-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.34rem 0 !important; font-size: 1rem; color: var(--sn-ondark-soft) !important;
  }
  .sn-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none; }
}

/* Force the open mobile overlay dark — WP's .is-menu-open defaults it to white. */
.sn-nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--sn-charcoal) !important;
  color: var(--sn-ondark) !important;
}
.sn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label { color: var(--sn-ondark) !important; }
.sn-nav .wp-block-navigation__responsive-container-close { color: var(--sn-ondark) !important; }

/* Speaking spotlight cover: monochrome audience image under the dark overlay. */
.sn-speaking-cover .wp-block-cover__image-background { filter: grayscale(1) contrast(1.05) brightness(0.9) !important; }
.sn-speaking-cover .wp-block-cover__inner-container { padding-block: clamp(2rem, 4vw, 3.4rem); }

/* ===================================================================
   Custom site navigation — snohochiro/site-nav (our own markup, so we
   never fight the core Navigation block's styles or positioning again).
   =================================================================== */
.sn-sitenav { display: flex; align-items: center; }
.sn-sitenav__menu { display: flex; align-items: center; }
.sn-menu { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.sn-menu__item { position: relative; display: flex; align-items: center; }
.sn-menu__link { color: var(--sn-ondark-soft); font-size: 0.9rem; text-decoration: none; white-space: nowrap; transition: color .14s ease; }
.sn-menu__item:hover > .sn-menu__link,
.sn-menu__item:focus-within > .sn-menu__link { color: var(--sn-ondark); }
.sn-menu__toggle { display: inline-flex; align-items: center; background: none; border: 0; margin: 0; padding: 4px 0 4px 5px; color: var(--sn-ondark-soft); cursor: pointer; }
.sn-menu__item:hover > .sn-menu__toggle,
.sn-menu__item:focus-within > .sn-menu__toggle { color: var(--sn-ondark); }
.sn-menu__chevron { transition: transform .18s ease; }
.sn-menu__item--has:hover > .sn-menu__toggle .sn-menu__chevron,
.sn-menu__item--has:focus-within > .sn-menu__toggle .sn-menu__chevron,
.sn-menu__item--has.is-open > .sn-menu__toggle .sn-menu__chevron { transform: rotate(180deg); }

/* Desktop flyout: we own the position (opens rightward from the item's left edge)
   and the shadow (downward only — no side spill). */
.sn-submenu {
  position: absolute; top: 100%; left: 0; margin-top: 12px; z-index: 60;
  min-width: 236px; padding: 6px; list-style: none;
  background: var(--wp--preset--color--charcoal-2, #3A352F); border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 12px -20px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
/* transparent hover bridge across the 12px gap so hover doesn't drop */
.sn-menu__item--has::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 14px; }
.sn-menu__item--has:hover > .sn-submenu,
.sn-menu__item--has:focus-within > .sn-submenu,
.sn-menu__item--has.is-open > .sn-submenu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.sn-submenu a { display: block; padding: 9px 13px; border-radius: 8px; color: var(--sn-ondark-soft); font-size: 0.88rem; text-decoration: none; white-space: nowrap; transition: background .14s ease, color .14s ease; }
.sn-submenu a:hover, .sn-submenu a:focus-visible { background: rgba(255,255,255,.08); color: var(--sn-ondark); outline: none; }

.sn-sitenav__burger { display: none; }
.sn-sitenav__actions { display: none; }

/* ---- Mobile: hamburger + full-screen overlay ---- */
@media (max-width: 1023px) {
  .sn-header .sn-phone, .sn-header .wp-block-buttons { display: none; }

  .sn-sitenav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
    position: relative; z-index: 210; color: var(--sn-ondark);
  }
  .sn-sitenav__burger-box { position: relative; width: 24px; height: 16px; }
  .sn-sitenav__burger-inner, .sn-sitenav__burger-inner::before, .sn-sitenav__burger-inner::after {
    position: absolute; left: 0; width: 24px; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, top .25s ease, background .2s ease;
  }
  .sn-sitenav__burger-inner { top: 7px; }
  .sn-sitenav__burger-inner::before { content: ""; top: -7px; }
  .sn-sitenav__burger-inner::after { content: ""; top: 7px; }
  .sn-sitenav.is-open .sn-sitenav__burger-inner { background: transparent; }
  .sn-sitenav.is-open .sn-sitenav__burger-inner::before { top: 0; transform: rotate(45deg); }
  .sn-sitenav.is-open .sn-sitenav__burger-inner::after { top: 0; transform: rotate(-45deg); }

  .sn-sitenav__menu {
    position: fixed; inset: 0; z-index: 200; display: block;
    background: var(--sn-charcoal); padding: 84px 26px 40px; overflow-y: auto;
    transform: translateX(100%); transition: transform .3s ease; visibility: hidden;
  }
  .sn-sitenav.is-open .sn-sitenav__menu { transform: none; visibility: visible; }

  .sn-menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .sn-menu__item { flex-wrap: wrap; align-items: center; border-top: 1px solid rgba(255,255,255,.10); }
  .sn-menu__item::after { display: none; }
  .sn-menu__link { flex: 1 1 auto; padding: 16px 0; font-size: 1.08rem; color: var(--sn-ondark); }
  .sn-menu__toggle { padding: 16px 6px; color: var(--sn-ondark-soft); }

  .sn-submenu {
    position: static; margin: 0 0 10px; min-width: 0; width: 100%; padding: 0 0 0 12px; flex-basis: 100%;
    background: transparent; border-radius: 0; box-shadow: none; overflow: visible;
    opacity: 1; visibility: visible; transform: none; transition: none; display: none;
  }
  .sn-menu__item--has:hover > .sn-submenu,
  .sn-menu__item--has:focus-within > .sn-submenu { display: none; }
  .sn-menu__item--has.is-open > .sn-submenu { display: block; }
  .sn-submenu a { padding: 11px 0; font-size: 1rem; }

  .sn-sitenav__actions { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; width: 100%; }
  .sn-sitenav__call { color: var(--sn-gold); font-size: 1.2rem; font-weight: 600; text-decoration: none; }
  .sn-sitenav__cta { display: inline-block; text-align: center; background: var(--sn-gold); color: var(--sn-charcoal); font-weight: 600; padding: 0.9rem 1.4rem; border-radius: 6px; text-decoration: none; }
}

/* ===== Guides & Resources archive (CPT: guide) ===== */
.wp-block-post-template.sn-guide-grid { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .wp-block-post-template.sn-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .wp-block-post-template.sn-guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sn-guide-grid > li { margin: 0; min-width: 0; display: flex; }
.sn-guide-grid > li > .is-style-card { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; text-align: left; }
.sn-guide-grid .wp-block-post-title { margin: 0; }
.sn-guide-grid .wp-block-post-title a { color: var(--sn-ink); text-decoration: none; font-family: var(--sn-display); }
.sn-guide-grid .wp-block-post-title a:hover { color: var(--sn-gold-deep); }
.sn-guide-grid .wp-block-post-excerpt { margin: 0; color: var(--sn-muted); font-size: 0.92rem; }
.sn-guide-grid .wp-block-post-excerpt__more-text { margin-top: 0.5rem; }
.sn-guide-grid .wp-block-post-excerpt__more-text a { color: var(--sn-gold-deep); text-decoration: none; font-weight: 600; }
.wp-block-query-pagination { gap: 0.4rem; }
.wp-block-query-pagination a, .wp-block-query-pagination .current { color: var(--sn-ink); text-decoration: none; padding: 0.3rem 0.6rem; }
.wp-block-query-pagination .current { color: var(--sn-gold-deep); font-weight: 700; }