/* Second Nature Behaviour — component CSS (front end + editor).
   Tokens live in theme.json; this file holds only what theme.json cannot express:
   pseudo-elements, section seams, the wave, whole-band hovers. Keep it small. */

/* ---- full-bleed sections butt together seamlessly (waves must touch bands) ---- */
.entry-content > .alignfull,
.is-root-container > .alignfull {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ---- wave section divider (36px shallow curve, mirrors React Wave.tsx) ---- */
.snb-wave { line-height: 0; }
.snb-wave svg { display: block; width: 100%; height: 36px; }

/* ---- amber double-border card — .is-style-snb-card on core/group ---- */
.is-style-snb-card {
  position: relative;
  background-color: var(--wp--preset--color--white);
  border: 3px solid var(--wp--preset--color--amber);
  border-radius: 1.5rem;
  padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.is-style-snb-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px solid var(--wp--preset--color--amber);
  border-radius: 1.125rem;
  pointer-events: none;
}

/* ---- CTA band (amber rounded band; its one link makes the whole band clickable) ---- */
.snb-cta {
  position: relative;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1.5rem;
  background-color: var(--wp--preset--color--amber);
  text-align: center;
  padding: 1.5rem 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease;
}
.snb-cta h2, .snb-cta h3, .snb-cta p,
.snb-cta a { color: var(--wp--preset--color--white); }
.snb-cta p { font-style: italic; margin-block-start: 0.25rem; }
.snb-cta a { text-decoration: none; }
.snb-cta a::after { content: ''; position: absolute; inset: 0; }
/* v54: gated - a stuck :hover after a tap must not repaint a button on a phone. */
@media (hover: hover) {
  .snb-cta:hover { background-color: var(--wp--preset--color--golden); }
  .snb-cta:hover h2, .snb-cta:hover h3, .snb-cta:hover p,
  .snb-cta:hover a { color: var(--wp--preset--color--slate); }
}
.snb-cta--slate { background-color: var(--wp--preset--color--slate); }

/* ---- testimonial / quote card ---- */
.snb-quote {
  position: relative;
  border: 2px solid var(--wp--preset--color--slate);
  border-radius: 1.5rem;
  background-color: var(--wp--preset--color--cloud);
  padding: 2rem;
  padding-block-start: 2.5rem;
  text-align: center;
  color: var(--wp--preset--color--ink);
}
.snb-quote .snb-quotemark {
  position: absolute;
  top: -1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--slate);
  border-radius: 9999px;
  padding: 0 0.75rem;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.9rem;
  line-height: 1.4;
  color: var(--wp--preset--color--slate);
}
.snb-quote .snb-avatar img {
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  border: 4px solid var(--wp--preset--color--amber);
  object-fit: cover;
}
.snb-quote-text {
  font-family: var(--wp--preset--font-family--heading);
  color: var(--wp--preset--color--slate);
  font-size: 1.1rem;
}
.snb-stars { color: var(--wp--preset--color--amber); letter-spacing: 3px; font-size: 1.1rem; }

/* ---- team card extras (card style does the frame) ---- */
.snb-role {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--amber);
  font-size: 0.85rem;
}

/* ---- header ---- */
.snb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.snb-header .wp-block-navigation__submenu-container {
  min-width: 14rem;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 0 0 0.75rem 0.75rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* ---- small utilities used by patterns ---- */
.snb-hr-title { display: flex; align-items: center; gap: 1rem; justify-content: center; }
.snb-hr-title::before, .snb-hr-title::after {
  content: '';
  flex: 1;
  border-top: 2px solid var(--wp--preset--color--line);
}
ul.snb-icon-list { list-style: none; padding-left: 0; }
ul.snb-icon-list li { position: relative; padding-left: 1.4rem; margin-block-start: 0.4rem; }
ul.snb-icon-list li::before { content: '\25CF'; color: var(--wp--preset--color--amber); position: absolute; left: 0; }
.snb-img-round img { border-radius: 1.5rem; }

/* ---- quote card sizing + footer text styles ---- */
.snb-quote { max-width: 44rem; margin-inline: auto; }
.snb-hub-list, .snb-legal {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
}
.snb-hub-list li { margin-block-start: 0.4rem; }

/* ---- live-parity components (v2 home rebuild, 10 Sep) ---- */
.snb-card4 { background: #fff; border: 4px solid var(--wp--preset--color--amber); border-radius: 20px; padding: 20px; }
.snb-cardwhite { background: #fff; border-radius: 20px; padding: 20px; }
.snb-r50 { border-radius: 50px; }
.snb-pill { padding: 10px 16px 6px; }
.snb-pill h2, .snb-pill h3 { margin: 0; }
.wp-block-column.snb-card4 { padding: 20px; }
.snb-toggle { background: #f5f5f5; border-radius: 20px; padding: 0.4rem 1.1rem; }
.snb-toggle summary { font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--slate); cursor: pointer; list-style: none; position: relative; padding: 0.35rem 1.5rem 0.35rem 0; }
.snb-toggle summary::-webkit-details-marker { display: none; }
.snb-toggle summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #9f9f9f; font-size: 1.25rem; }
.snb-toggle[open] summary::after { content: '\2212'; }
.snb-logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; }
.snb-logo-row .wp-block-image { margin: 0; }
.wp-block-column.snb-hubcard { border: 3px solid var(--wp--preset--color--amber); border-radius: 10px; padding: 10px; background: #fff; }
.snb-hubcard h3, .snb-hubcard h4 { margin: 0.25rem 0; }
.snb-breadcrumb { font-size: 0.8rem; padding: 0.25rem 1rem; }
.snb-breadcrumb a { text-decoration: none; }
.snb-video { max-width: 64rem; margin-inline: auto; }
.snb-div { line-height: 0; }
.snb-div svg { display: block; width: 100%; }
/* white cards inside coloured bands go back to ink text / slate headings+links */
.is-style-band-slate .snb-card4, .is-style-band-sky .snb-card4,
.is-style-band-slate .snb-cardwhite, .is-style-band-sky .snb-cardwhite { color: var(--wp--preset--color--ink); }
.is-style-band-slate .snb-card4 h2, .is-style-band-slate .snb-card4 h3,
.is-style-band-sky .snb-card4 h2, .is-style-band-sky .snb-card4 h3,
.is-style-band-slate .snb-cardwhite h2, .is-style-band-sky .snb-cardwhite h2 { color: var(--wp--preset--color--slate); }
.is-style-band-slate .snb-card4 a, .is-style-band-sky .snb-card4 a,
.is-style-band-slate .snb-cardwhite a, .is-style-band-sky .snb-cardwhite a { color: var(--wp--preset--color--slate); }
/* live CTA geometry */
.snb-cta { border-radius: 20px; max-width: 560px; padding: 1.5rem 2rem 2rem; }

/* ---- phone tweaks mirroring live's Divi phone overrides (10 Sep v3) ---- */
@media (max-width: 767px) {
  .snb-div--arrow { display: none; }                     /* live: arrow3 divider off on phone */
  .snb-logoband { padding-top: 20px !important; padding-bottom: 6px !important; }
  .snb-logoband .wp-block-image img { max-width: 320px; height: auto; }
  .entry-content > .alignfull { padding-left: 1rem; padding-right: 1rem; }
  .wp-block-column.snb-card4 { margin-bottom: 0.75rem; }
}

/* ---- explicit button styling (WP emits element styles at :where() zero specificity; make buttons robust) ---- */
.wp-block-button__link {
  background-color: var(--wp--preset--color--amber);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  border-radius: 1.5rem;
  padding: 0.6rem 1.5rem;
  text-decoration: none;
  display: inline-block;
}
/* v54: gated - see above. */
@media (hover: hover) {
  .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--golden);
    color: var(--wp--preset--color--slate);
  }
}
.is-style-band-slate .snb-card4 .wp-block-button__link,
.is-style-band-sky .snb-card4 .wp-block-button__link,
.is-style-band-slate .snb-cardwhite .wp-block-button__link,
.is-style-band-sky .snb-cardwhite .wp-block-button__link { color: var(--wp--preset--color--white); }

/* ---- 10 Sep v4: live-parity polish — Divi shadow presets, phone parity ---- */
.snb-card4:not(.snb-pill), .snb-cardwhite, .snb-hqcard { box-shadow: 0 2px 18px rgba(0,0,0,0.3); }
.snb-cta { box-shadow: 0 12px 18px -6px rgba(0,0,0,0.3); }
.snb-video { box-shadow: 0 2px 18px rgba(0,0,0,0.3); }
.snb-shadowimg img { box-shadow: 0 2px 18px rgba(0,0,0,0.3); }
.snb-hqcard { background: #fff; border-radius: 12px; padding: 24px 28px; }
.snb-teamcard .wp-block-image img { box-shadow: 0 2px 18px #6d82a1; }
.snb-teamcard .snb-tname { margin: 0.9rem 0 0.4rem; }
.snb-tbio { background: #fff; border-radius: 20px; box-shadow: 0 2px 18px #6d82a1; padding: 1rem 1.25rem; }
.snb-tbio h3 { font-size: 1.05rem; margin-top: 0; }
@media (max-width: 767px) {
  .entry-content > .alignfull { box-sizing: border-box; }
  .snb-feathers { background-image: none !important; background-color: var(--wp--preset--color--sky) !important; }
  .snb-teamgrid { flex-wrap: wrap !important; gap: 1.25rem !important; }
  .snb-teamgrid > .wp-block-column { flex-basis: calc(50% - 0.625rem - 1px) !important; }
  .snb-mc :is(h1,h2,h3,h4,p) { text-align: center; }
}

/* ---- 10 Sep v5: phone 2-up grids (team, hubs), centering override, phone-hidden intro image ---- */
@media (max-width: 767px) {
  .snb-mc :is(h1,h2,h3,h4,p) { text-align: center !important; }
  .wp-block-columns.snb-teamgrid, .wp-block-columns.snb-2up { flex-wrap: wrap !important; gap: 1.25rem !important; }
  .wp-block-columns.snb-teamgrid > .wp-block-column, .wp-block-columns.snb-2up > .wp-block-column { flex-basis: calc(50% - 0.625rem - 1px) !important; }
  .snb-hide-ph { display: none !important; }
}

/* ---- 10 Sep v6: border-box on 2-up columns so bordered hub cards fit two-across on phones ---- */
@media (max-width: 767px) {
  .wp-block-columns.snb-teamgrid > .wp-block-column, .wp-block-columns.snb-2up > .wp-block-column { box-sizing: border-box; }
}

/* ---- 10 Sep v7: live's Divi-customizer CSS ported — ST slider phone fix, Trebuchet menu, paw menu icon ---- */
@media (max-width: 768px) {
  .strong-view.wpmtst-default .wpmtst-testimonial-image { max-width: 100% !important; width: 100% !important; float: none !important; }
}
.snb-header .wp-block-navigation { font-family: 'Trebuchet MS', 'Trebuchet', Helvetica, Arial, sans-serif; }
.wp-block-navigation__responsive-container-open svg { display: none; }
.wp-block-navigation__responsive-container-open { background: url('https://secondnature.b-cdn.net/wp-content/uploads/2022/08/paw-icon.png') center / 26px 26px no-repeat; width: 34px; height: 34px; }

/* ---- 10 Sep v8: phone typography + banner parity with live (Megan's Divi phone settings) ---- */
@media (max-width: 767px) {
  /* full-bleed hero image + seam dividers: only constrained bands keep the 1rem gutter */
  .entry-content > .alignfull:not(.has-global-padding) { padding-left: 0; padding-right: 0; }
  /* live's phone heading scale: h1 40, h2 34, h3 29, body/li 16 */
  /* 23 Sep v36: these used to pin phones to the DESKTOP sizes, because the theme's own
     heading scale was too small. theme.json now carries live's scale globally, so these
     become the phone scale-down instead. */
  .entry-content h1 { font-size: 2rem; line-height: 1.1; }      /* 40 -> 32 */
  .entry-content h2 { font-size: 1.75rem; line-height: 1.2; }   /* 34 -> 28 */
  .entry-content h3 { font-size: 1.5rem; line-height: 1.25; }   /* 29 -> 24 */
  .entry-content p:not(.snb-ico), .entry-content li { font-size: 1rem; }  /* v46 25 Sep: .snb-ico paragraphs carry the icon glyph size (per-page .snb-icNN{font-size:96px}). This rule at (0,1,1) outranked that at (0,1,0) and collapsed every inline-SVG icon to 16px on phones, site-wide. */
  /* keep the exceptions live keeps small */
  .snb-cta h2 { font-size: 1.5rem; }
  .snb-hubcard h3 { font-size: 1.25rem; }
  .snb-tname { font-size: 1.25rem !important; }
  .snb-tbio h3 { font-size: 1.05rem; }
  /* split H1 like live's phone variant: subtitle on its own line, no dash */
  h1 .snb-h1dash { display: none; }
  h1 .snb-h1b { display: block; font-size: 0.725em; line-height: 1.25; margin-top: 0.35em; }
}

/* ---- 10 Sep v9: CTA titles follow live's 34px phone h2 after all ---- */
@media (max-width: 767px) {
  .snb-cta h2 { font-size: 2.125rem; }
}

/* ---- 10 Sep v10: WP preset font-size classes carry !important — match it for CTA phone titles ---- */
@media (max-width: 767px) {
  .snb-cta h2 { font-size: 2.125rem !important; }
}

/* ---- 10 Sep v11: real phones stack team + hub cards 1-up like live; 2-up is tablet-only (Divi column breakpoint is 479, not 767) ---- */
@media (max-width: 479px) {
  .wp-block-columns.snb-teamgrid > .wp-block-column, .wp-block-columns.snb-2up > .wp-block-column { flex-basis: 100% !important; }
}
@media (max-width: 767px) {
  .snb-tname { font-size: 1.5rem !important; }
  .snb-tbio h3 { font-size: 1.25rem; }
}

/* ---- 10 Sep v12: team toggles match live's real collapsed bars (24px Rokkitt title, #f4f4f4 bar, 1px #d9d9d9) ---- */
.snb-toggle { background: #f4f4f4; border: 1px solid #d9d9d9; }
.snb-toggle summary { font-size: 1.5rem; font-weight: 600; }
.snb-toggle h3 { font-size: 1.25rem !important; margin-top: 0.4rem; }
.snb-teamcard .snb-toggle { margin-top: 0.75rem; }

/* ---- 10 Sep v13: solid header (backdrop-filter made it the containing block for the fixed menu overlay, collapsing it to 22px) + live-style open menu ---- */
.snb-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
.wp-block-navigation__responsive-container.is-menu-open { border-top: 2px solid var(--wp--preset--color--amber); padding: 1.25rem 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 2.25rem; }
.wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--ink); padding: 0.4rem 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a { color: var(--wp--preset--color--slate); }

/* ---- 10 Sep v14: open phone menu = simple left-aligned list like live's; flatten dropdown cards inside the overlay ---- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { box-shadow: none; border-radius: 0; width: 100%; padding: 0 0 0 1rem !important; background: transparent; }

/* ---- 11 Sep v15: header matches live (no logo, slim centred menu; <=980 = Menu bar with paw); slider shell ---- */
.snb-header { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
.snb-header .wp-block-navigation a { color: var(--wp--preset--color--slate); font-size: 0.9375rem; }
@media (max-width: 980px) {
  .snb-header .wp-block-navigation { width: 100%; }
  .snb-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .snb-header .wp-block-navigation__responsive-container-open { display: flex !important; width: 100%; height: 38px; align-items: center; justify-content: flex-start; padding: 0 0.75rem; background: rgba(0,0,0,0.05) url('https://secondnature.b-cdn.net/wp-content/uploads/2022/08/paw-icon.png') right 0.6rem center / 22px 22px no-repeat; border-radius: 5px; }
  .snb-header .wp-block-navigation__responsive-container-open::before { content: 'Menu'; font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif; font-size: 0.875rem; color: #666; }
}
.snb-slider { box-shadow: 0 2px 18px rgba(0,0,0,0.3); border-radius: 10px; overflow: hidden; background: #fff; }
/* ---- 11 Sep v16: live parity: menu colour #6d82a1; Menu bar 34px/80%/mixed-case; open-menu left align; hide home breadcrumb; slider card r20/1024px/dark text/img fit ---- */
.snb-header .wp-block-navigation a { color: #6d82a1; }
@media (max-width: 980px) {
  .snb-header .wp-block-navigation__responsive-container-open { height: 34px; width: 80%; margin: 0 auto; }
  .snb-header .wp-block-navigation__responsive-container-open::before { text-transform: none; color: #3d353d; }
}
.snb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; }
.home .snb-breadcrumb { display: none; }
.is-layout-constrained > .alignwide.snb-slider { max-width: 1024px; }
.snb-slider { border-radius: 20px; }
.snb-slider .strong-view { max-width: none; color: #3d353d; }
.snb-slider .strong-view h3 { color: #6d82a1; }
.snb-slider .strong-view img { max-width: 100%; height: auto; }
@media (max-width: 980px) { .is-layout-constrained > .alignwide.snb-slider { max-width: calc(80% - 32px); } }
/* ---- 11 Sep v17: size bar+card off viewport (80vw) like live; menu link colour past nav textColor; 400px img cap ---- */
.snb-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item a { color: #6d82a1 !important; }
@media (max-width: 980px) {
  .snb-header .wp-block-navigation__responsive-container-open { width: 80vw; }
  .is-layout-constrained > .alignwide.snb-slider { max-width: calc(80vw - 32px); }
}
.snb-slider .wpmtst-testimonial-image img { max-width: min(100%, 400px); }
/* ---- 11 Sep v18: open-menu truly left-aligned under new nav markup; slider img border-box ---- */
.snb-header .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; }
.snb-header .is-menu-open .wp-block-navigation-item { justify-content: flex-start !important; }
.snb-slider .wpmtst-testimonial-image img { box-sizing: border-box; }
/* ---- 11 Sep v19: overlay items centre via align-items in column mode; pin to flex-start ---- */
.snb-header .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; }
/* ---- 11 Sep v20: species trio: tile cards (20px blue-grey labels), parrot team top-align ---- */
.snb-tile { text-align: center; }
.snb-tile h3 { font-size: 1.25rem; color: #6d82a1; margin-top: 0.6rem; }
.snb-tile .wp-block-image img { border-radius: 6px; }
.snb-team1.are-vertically-aligned-center { align-items: flex-start; }
.snb-team1 .wp-block-column { align-self: flex-start; }
/* ---- 11 Sep v21: slate CTA variant (live's Invest / Let's-get-started cards) ---- */
.snb-cta.snb-cta-slate { background-color: #6d82a1; }
/* ---- 11 Sep v22: book/contact support: embed width cap, grey form band, small print, map centring ---- */
.is-layout-constrained > .alignwide.snb-embed { max-width: 1024px; }
.snb-embed > .wp-block-html { max-width: none; }
.snb-band-grey { background-color: #f5f5f5; }
.snb-smalltext p { font-size: 0.85rem; }
.snb-mapwrap { text-align: center; }
.snb-mapwrap .wpseo-map-canvas { margin: 0 auto; }
/* ---- 11 Sep v23: centre the Pabau enquiry buttons per column (live's arrangement) ---- */
.snb-band-grey .wp-block-column { text-align: center; }
/* ---- 11 Sep v24: dsm text-divider port; phone keeps enquiry buttons in one row like live ---- */
.snb-textdiv { display: flex; align-items: center; gap: 1rem; margin: 0.75rem auto; max-width: 640px; color: #3d353d; font-weight: 600; }
.snb-textdiv::before, .snb-textdiv::after { content: ''; flex: 1; border-top: 1px solid #d9d9d9; }
/* ---- 25 Sep v48: removed the 11 Sep rule that forced .snb-band-grey columns to stay side-by-side below 781px.
   It was written to keep a row of Pabau enquiry buttons on one line, but NO page now has a .wp-block-button
   inside .snb-band-grey (checked all 98). Meanwhile it was beating WordPress core's mobile stacking rule
   (both !important, equal specificity, snb.css loads later) and squashing image columns on 14 pages -
   every services page, the cat-behaviour pages and the training pages. Species card images were rendering
   78x52 against live's 284x189. ---- */
/* ---- 12 Sep v25: Zoe's polish notes — scroll-top button, whole-card links, smooth toggles, footer gap, hub image gap ---- */
.snb-top { position: fixed; right: 15px; bottom: 15px; z-index: 90; width: 50px; height: 50px; border: 0; border-radius: 25px; background: rgba(25,72,103,0.48); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.25s ease, background 0.2s ease; }
.snb-top:hover { background: rgba(25,72,103,0.75); }
.snb-top[hidden] { display: none; }
.wp-block-column.snb-card4, .snb-tile, .snb-hubcard { position: relative; }
.wp-block-column.snb-card4 .wp-block-image a::after, .snb-tile .wp-block-image a::after { content: ''; position: absolute; inset: 0; }
.snb-toggle { interpolate-size: allow-keywords; }
.snb-toggle::details-content { opacity: 0; block-size: 0; overflow-y: clip; transition: content-visibility 0.35s allow-discrete, opacity 0.35s ease, block-size 0.35s ease; }
.snb-toggle[open]::details-content { opacity: 1; block-size: auto; }
footer > .wp-block-group:first-child { margin-top: 0; }
@media (max-width: 767px) { .entry-content > .alignfull:last-child { padding-bottom: 20px !important; } }
.snb-hubcard .wp-block-image { margin-bottom: 0.9rem; }
/* ---- 12 Sep v26: the 64px template-part gap sits on .snb-footer itself ---- */
.snb-footer { margin-top: 0 !important; }
/* ---- 12 Sep v27: uniform vertical rhythm inside hub cards (Zoe) ---- */
.snb-hubcard .wp-block-image { margin-bottom: 0.55rem; }
.snb-hubcard h3, .snb-hubcard h4 { margin: 0.275rem 0; }
.snb-hubcard ul.wp-block-list { margin-top: 0.275rem; margin-bottom: 0.55rem; }
.snb-hubcard li { margin: 0.35rem 0; }

/* ---- v28: blog grid (latest-posts) + icon list ---- */
.snb-bloggrid.wp-block-latest-posts.is-grid{gap:24px;margin:0 0 1.5rem}
.snb-bloggrid.wp-block-latest-posts li{background:#fff;border-radius:20px;box-shadow:0 2px 12px rgba(0,0,0,.12);overflow:hidden;margin:0 0 24px;display:flex;flex-direction:column}
.snb-bloggrid .wp-block-latest-posts__featured-image{margin:0}
.snb-bloggrid .wp-block-latest-posts__featured-image img{width:100%;height:200px;object-fit:cover;display:block;border-radius:0}
.snb-bloggrid li > a{font-weight:700;color:#3d353d;padding:14px 18px 0;font-size:18px;line-height:1.35;text-decoration:none;display:block}
.snb-bloggrid li > a:hover{color:#6d82a1}
.snb-bloggrid time{color:#8a8a8a;font-size:13px;padding:4px 18px 0;display:block}
.snb-bloggrid .wp-block-latest-posts__post-excerpt{padding:8px 18px 18px;margin:0;color:#3d353d;font-size:14px;line-height:1.55}
.snb-bloggrid .wp-block-latest-posts__post-excerpt a{color:#6d82a1;font-weight:600}
.snb-iconlist{list-style:none;padding-left:0}
.snb-iconlist li{position:relative;padding-left:28px;margin:.5rem 0}
.snb-iconlist li::before{content:'\2713';position:absolute;left:0;top:0;color:#6d82a1;font-weight:700}

/* ---- v29: blog grid on real CSS grid (core's flex+margin widths made 3-up wrap to 2) ---- */
.snb-bloggrid.wp-block-latest-posts.is-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.snb-bloggrid.wp-block-latest-posts li{width:auto!important;margin:0!important}
@media (max-width:767px){.snb-bloggrid.wp-block-latest-posts.is-grid{grid-template-columns:1fr}}
@media (min-width:480px) and (max-width:767px){.snb-bloggrid.wp-block-latest-posts.is-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- 15 Sep v30: mobile menu = live's dropdown panel under the bar (was a full-screen sheet); live item metrics ---- */
@media (max-width: 980px) {
  .snb-header .wp-block-navigation__responsive-container-open::before { content: 'Select Page'; }
  .snb-header .wp-block-navigation__responsive-container.is-menu-open {
    /* v64 (5 Oct 2026): centred under the bar and capped at the viewport. left:10vw was measured
       from the nav's own box, and the 5% padding sat outside the 80vw, so at 390px the panel ran
       to 403px and the page scrolled sideways. */
    position: absolute; top: 100%; left: 0; right: 0; bottom: auto; margin-left: auto; margin-right: auto;
    width: 80vw; max-width: calc(100vw - 32px); box-sizing: border-box; height: auto; max-height: 72vh; overflow-y: auto;
    background: #fff; border-top: 2px solid var(--wp--preset--color--amber);
    padding: 5% !important; box-shadow: 0 10px 22px rgba(0,0,0,0.18); z-index: 99999;
  }
  .snb-header .is-menu-open .wp-block-navigation__responsive-container-close { display: none !important; }
  .snb-header .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0 !important; width: 100%; }
  .snb-header .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; }
  .snb-header .is-menu-open .wp-block-navigation-item { width: 100%; position: relative; }
  .snb-header .is-menu-open .wp-block-navigation__container > li > a,
  .snb-header .is-menu-open .wp-block-navigation__container > li > .wp-block-navigation-item__content {
    font-size: 14px !important; color: #3d353d !important; padding: 10px 47px 10px 0; text-transform: uppercase; display: block; width: 100%;
  }
  .snb-header .is-menu-open .wp-block-navigation__submenu-container { position: static !important; box-shadow: none; border: 0; border-radius: 0; width: 100%; padding: 0 0 0 10px !important; background: transparent; opacity: 1 !important; visibility: visible !important; }
  .snb-header .is-menu-open .wp-block-navigation__submenu-container a { font-size: 14px !important; color: #3d353d !important; text-transform: none; padding: 10px 47px 10px 0; display: block; }
  /* submenus start collapsed, like live's menu-hide */
  .snb-header .is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container { display: none; }
  .snb-header .is-menu-open .wp-block-navigation-item.has-child.snb-open > .wp-block-navigation__submenu-container { display: block; }
  .snb-header .is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }
  .snb-sub-toggle { position: absolute; right: 0; top: 2px; width: 40px; height: 38px; border: 0; background: transparent; cursor: pointer; padding: 0; line-height: 38px; }
  .snb-sub-toggle::before { content: '\203A'; display: inline-block; transform: rotate(90deg); color: #3d353d; font-size: 22px; font-family: inherit; }
  .snb-header .is-menu-open .has-child.snb-open > .snb-sub-toggle::before { transform: rotate(-90deg); }
  body.has-modal-open { overflow: auto !important; }
}

/* ---- 15 Sep v31: toggles keep their own ink inside coloured bands; Divi's narrow-column type scale; divider type ---- */
.snb-toggle { color: #3d353d; }
.snb-toggle > summary, .snb-toggle > summary h1, .snb-toggle > summary h2, .snb-toggle > summary h3, .snb-toggle > summary h4, .snb-toggle > summary h5, .snb-toggle > summary h6 { color: #6d82a1 !important; }
.snb-toggle p, .snb-toggle li, .snb-toggle span { color: #3d353d; }
.snb-toggle a { color: #6d82a1; }
@media (min-width: 768px) {
  .snb-narrow h1 { font-size: 26px; }
  .snb-narrow h2 { font-size: 23px; }
  .snb-narrow h3 { font-size: 20px; }
  .snb-narrow h4 { font-size: 18px; }
  .snb-narrow h5 { font-size: 16px; }
  .snb-narrow h6 { font-size: 15px; }
}
.snb-textdiv { font-weight: 400; color: #6d82a1; }
.snb-textdiv h3 { font-size: 20px; font-family: var(--wp--preset--font-family--heading); font-weight: 400; color: #6d82a1; margin: 0; }

/* ---- 16 Sep v32: FAQ toggle titles match live (19px / 700). The v12 rule above set 24px
   for the TEAM card toggles but was never scoped, so every FAQ question inherited it and
   wrapped onto two widely-spaced lines. ---- */
.snb-toggle summary { font-size: 19px; line-height: 1.25; font-weight: 700; }
.snb-teamcard .snb-toggle summary { font-size: 1.5rem; line-height: 1.3; }
.snb-toggle > summary h1, .snb-toggle > summary h2, .snb-toggle > summary h3,
.snb-toggle > summary h4, .snb-toggle > summary h5, .snb-toggle > summary h6 { font-size: inherit; line-height: inherit; }

/* ---- 18 Sep v33: the phone sub-menu chevron was unreachable.
   .snb-sub-toggle is position:absolute inside the nav item, and that item's link spans the
   whole row, so a tap on the chevron landed on the link and navigated away instead of
   opening the sub-menu - exactly what "submenus don't work on mobile" looks like on a phone.
   Measured, not reasoned: elementFromPoint at 390px returned A.wp-block-navigation-item__content
   for every chevron before this rule, and BUTTON.snb-sub-toggle for every chevron after.
   (An earlier version of this note blamed a z-index:1 on the core link. That was wrong - the
   link computes to position:static, where z-index is inert. What actually fixes it is giving
   the list item a stacking context of its own so the button can sit above the link.) ---- */
@media (max-width: 980px) {
  .snb-header .wp-block-navigation-item.has-child { position: relative; }
  .snb-sub-toggle { z-index: 5; pointer-events: auto; }
  .snb-header .is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { padding-right: 46px; }
}

/* ---- 18 Sep v34: the blog index scrolled sideways on a phone.
   At <=767px the blog grid drops to a single column, but a `1fr` track keeps an automatic
   minimum of min-content, and the card's featured image pushed that min-content to ~360px
   inside a 358px container - so the card, and the page with it, ran past the right edge of a
   390px screen and the whole page scrolled sideways. Grid items need min-width:0 before they
   are allowed to shrink below their own content.
   Measured at 390px: document scrollWidth 415 -> 395, card width 399 -> 358, card right edge
   415 -> 374, grid track 398.844px -> 358px. Desktop is untouched - still three 320.398px
   columns and no overflow. The residual 5px of scrollWidth is the testimonials slider's
   carousel track, which is clipped by its own overflow:hidden viewport; no unclipped element
   crosses 390px after this rule.
   NOTE: the .snb-bloggrid rules above are scoped to .wp-block-latest-posts and are DEAD -
   the blog index is a core Query Loop (.wp-block-post-template). Left in place deliberately
   rather than removed mid-fix; worth deleting in a tidy-up. ---- */
.wp-block-post-template.is-layout-grid > .wp-block-post { min-width: 0; }
.wp-block-post-featured-image img { max-width: 100%; }

/* ---- 18 Sep v35: the last 5px of sideways scroll on the blog index.
   With the grid fixed, the page still scrolled 5px at 390px. Bisecting by hiding subtrees
   found a single post excerpt: a long unbreakable word ("counterconditioning") painting past
   its 318px box, because the excerpt inherits overflow-wrap:normal. One long word in one post
   was moving the whole page. Titles can do the same, so both are covered.
   Measured at 390px: scrollWidth 395 -> 390, window.scrollX after scrollTo(9999,0) 5 -> 0. ---- */
.wp-block-post-excerpt__excerpt,
.wp-block-post-title { overflow-wrap: break-word; }

/* ---- 23 Sep v36: headings scale down on phones (see also the 767px block above).
   theme.json now carries live's type scale exactly (40/34/29/24 at weight 500). Live uses those
   same sizes at every width; Zoe asked for phones to scale instead.
   THREE traps found doing this, all silent:
   1. Each heading preset had a `fluid` block whose `max` still held the OLD size, and fluid's max
      CAPS the `size` field - changing `size` alone did nothing.
   2. WP's fluid formula interpolates across ~320-1600px, so `max` is only reached at 1600px. At a
      1280px desktop it lands ~75% of the way (38px, not 40px). Fluid cannot mean "exactly live on
      desktop" unless the viewport is 1600+. Hence fixed sizes.
   3. Overriding `--wp--preset--font-size--*` at a breakpoint LOOKS right and does nothing here:
      an older `.entry-content h1` rule (0,1,1) outranks the `h1` rule (0,0,1) that reads the var.
      The phone scale had to go in that existing block, not a new one. Measure which rule wins.
   Only h4 needs its own rule, being set to a literal size rather than a preset.
   Body stays 16px at every width. ---- */
@media (max-width: 767px) {
  h4, .entry-content h4 { font-size: 1.25rem; }  /* 24 -> 20 */
}

/* ---- 23 Sep v37: rotating town headline, promoted from page CSS to the stylesheet.
   `.snb-rot` is the block-theme equivalent of live's Divi Next dnxt_next_text_animation: every
   town stays in the DOM as live has it, and the visible one cycles. generic_assembler.py emits
   these two rules into each page's own <style>, which is fine for pages it builds - but the
   14 hand-built pages never pass through it, and /about/animal-behaviour-experts/ needed the
   module adding by hand. Global here so any page can carry one. Identical to the assembler's
   output, so the duplicate on assembler pages is harmless. ---- */
.snb-rot { color: #6d82a1 !important; font-family: Rokkitt, Georgia, serif; font-size: 16px !important; font-weight: 400; text-align: center; margin: .2rem 0 1rem; }
.snb-rot i { font-style: normal; }
.snb-rot i span { display: none; }
.snb-rot i span.on { display: inline; }

/* ---- 23 Sep v38: two pages scrolled sideways on a phone, from two different causes.
   Found by a layout sweep at 390px across the site.
   1. /book/consultation-room/ scrolled 5,811px. Three blocks of prose (the data protection
      notice, the Whereby privacy note) had been converted into <pre>, which does not wrap, so a
      single paragraph rendered 6,184px wide. pre-wrap keeps the intended line breaks and lets
      long lines wrap. The semantically correct fix is to turn those blocks back into paragraphs;
      this stops the damage everywhere in the meantime.
   2. /vet-referral/online-referral/ scrolled 48px. A form question H3 carries white-space:nowrap,
      so "What is the primary species you are referring?" could not break. A heading that forces a
      phone to scroll sideways is always wrong, and live wraps it. ---- */
.entry-content pre { white-space: pre-wrap; overflow-wrap: break-word; }
@media (max-width: 767px) {
  .entry-content :is(h1, h2, h3, h4) { white-space: normal; overflow-wrap: break-word; }
}

/* ---- 23 Sep v39: the text-divider label still forced a phone to scroll.
   .snb-textdiv is the "headline with a rule either side" component; its label is set nowrap so
   the rules sit tight against it, which is right on desktop. On the online referral form the
   label is a full question ("What is the primary species you are referring?") and at 390px it
   pushed the page 48px wide. The v38 rule lost because :is(h1,h2,h3,h4) carries only element
   specificity, so .entry-content :is(h3) ties with .snb-textdiv h3 at (0,1,1) - and the nowrap
   comes from the page's own <style>, which loads AFTER snb.css, so source order decided it.
   Hence the extra .entry-content qualifier here, (0,2,1). ---- */
@media (max-width: 767px) {
  .entry-content .snb-textdiv h1,
  .entry-content .snb-textdiv h2,
  .entry-content .snb-textdiv h3,
  .entry-content .snb-textdiv h4 { white-space: normal; overflow-wrap: break-word; }
  .entry-content .snb-textdiv { flex-wrap: wrap; }
}

/* ---- 24 Sep v40: footer band matched to live (#d3d3d3; cloud preset stays #f5f5f5 elsewhere) ---- */
.snb-footer.has-cloud-background-color,
.wp-block-group.snb-footer { background-color: #d3d3d3 !important; }

/* ---- 24 Sep v41: accordion block rhythm matched to live. Divi toggle = 20px padding + 10px gap (~50px chrome per item); staging was 6.4px + 20px (~33px). ---- */
.entry-content .snb-toggle { padding-top: 1rem; padding-bottom: 1rem; }

/* ---- 25 Sep v42: rule-either-side label matched to live. Live renders it as a Divi text-divider H3 in Rokkitt 24px/500; staging was falling back to Open Sans 16px/400 whenever the label was a <span> rather than an <h3>. ---- */
.entry-content .snb-textdiv,
.entry-content .snb-textdiv > span,
.entry-content .snb-textdiv > strong,
.entry-content .snb-textdiv h1,
.entry-content .snb-textdiv h2,
.entry-content .snb-textdiv h3,
.entry-content .snb-textdiv h4 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
}

/* ---- 25 Sep v43: CTA text colour. Each assembled page emits its own .snb-ctNN h2,h3,h4 { color:#3d353d } (four pages use #000000). That ties with .snb-cta h2 on specificity (0,1,1) and loads later, so 37 pages rendered dark text on the amber CTA where live renders white. Raised to (0,2,1) so the component wins. Hover recolour is kept for pointer devices only, so a sticky :hover after a tap cannot leave a phone showing dark text on gold. ---- */
.entry-content .snb-cta h2,
.entry-content .snb-cta h3,
.entry-content .snb-cta h4,
.entry-content .snb-cta p,
.entry-content .snb-cta li,
.entry-content .snb-cta strong,
.entry-content .snb-cta a { color: var(--wp--preset--color--white); }

@media (hover: hover) {
  .entry-content .snb-cta:hover h2,
  .entry-content .snb-cta:hover h3,
  .entry-content .snb-cta:hover h4,
  .entry-content .snb-cta:hover p,
  .entry-content .snb-cta:hover li,
  .entry-content .snb-cta:hover strong,
  .entry-content .snb-cta:hover a { color: var(--wp--preset--color--slate); }
}
/* v56: the (hover: none) amber override is gone - on a phone it turned every tapped CTA amber, blue ones included. Hover recolouring stays desktop-only (above). */

/* ---- 25 Sep v44: logo band was deliberately lopsided (padding-top 20px, padding-bottom 6px) and carried margin-top 20px with no margin-bottom, so the wordmark sat high in its own band. Equalised both, site-wide. ---- */
.snb-logoband { padding-top: 20px !important; padding-bottom: 20px !important; margin-top: 20px; margin-bottom: 20px; }

/* ---- 25 Sep v44: front page ends with a wave divider immediately above the footer, which reads as a stray rule on a phone. Hidden on the front page only; the other three .snb-div waves on that page are untouched. ---- */
body.home .entry-content > .snb-div:last-child { display: none; }

/* ---- 25 Sep v45: numbered-step numerals. Live styles the "1." ... "8." on the payment-options flow as 40px/700 display numerals; staging rendered them as ordinary H3s (24px/500 on a phone). Tagged .snb-stepnum in the page content and sized here. ---- */
.entry-content .snb-stepnum { font-size: 2.5rem; font-weight: 700; line-height: 1; margin-bottom: 0.25rem; }

/* ---- 25 Sep v46: instalments block on payment-options. Live renders the option headings at 20px and their sub-headings at 18px; staging had them at 24px/20px. The PayPal image also rendered 358x460 against live's 156x201. ---- */
@media (max-width: 767px) {
  .entry-content .snb-instal h3 { font-size: 1.25rem; }
  .entry-content .snb-instal h4 { font-size: 1.125rem; }
  .entry-content .snb-instal .snb-ppimg img { max-width: 160px; height: auto; }  /* PayPal panel only (tagged in content) - the Klarna/Clearpay strip stays full width, as on live */
}

/* ---- 25 Sep v47: species-page decorative icon. Live renders it as a 96px Divi glyph (108x96); staging ships an inline SVG with literal width="64" height="64" attributes. One such SVG per page, so the attribute selector is safe. ---- */
.entry-content svg[width="64"][height="64"] { width: 96px; height: 96px; }

/* ---- 25 Sep v49: blog species buttons to amber, matching live. Each blog page emits .snb-btNN .wp-block-button__link{background-color:#9ABCE1} at (0,2,0); the merged button row is tagged .snb-speciesbtns in content so this (0,3,0) rule wins. ---- */
.entry-content .snb-speciesbtns .wp-block-button__link {
  background-color: var(--wp--preset--color--amber);
  color: var(--wp--preset--color--white);
}

/* ---- 25 Sep v49: the "Or" between instalment options. Live renders it as a plain bold word (20px/800); staging had it as a rule-either-side .snb-textdiv. Converted to a heading in content and sized to match. ---- */
.entry-content .snb-or { font-size: 1.25rem; font-weight: 800; line-height: 1.2; margin: 0.5rem 0; }

/* ---- 25 Sep v50: icon-card headings. Live sizes the heading in every icon card at 20px (measured on all 10 cards of the vet-referral page); staging inherited the global H3 mobile scale of 24px. Scoped to groups that hold an .snb-ico paragraph. ---- */
@media (max-width: 767px) {
  .entry-content .wp-block-column:has(> p.snb-ico) h3 { font-size: 1.25rem; }
}

/* ---- 25 Sep v51: the "Free support on your journey..." line on the mentoring process page is an <h1> inside a raw-HTML block. Live sizes it at 22.4px per-module; staging gave it the full H1 scale (40px desktop / 32px phone). Tagged .snb-subhead in content. ---- */
.entry-content h1.snb-subhead { font-size: 1.4rem; font-weight: 500; line-height: 1.25; }

/* ---- 25 Sep v52: reverse stack on mobile. On the mentoring process page live shows the photo ABOVE the "Free support" headline and booking iframe on a phone, while keeping the photo on the RIGHT at desktop (Divi's reverse-column-order-on-mobile). Desktop already matched; only the stacking order differed. Uses order rather than column-reverse because WP stacks columns with flex-wrap, not flex-direction. ---- */
@media (max-width: 781px) {
  .entry-content .snb-revmob > .wp-block-column:first-child { order: 2; }
  .entry-content .snb-revmob > .wp-block-column:last-child  { order: 1; }
}

/* ---- 25 Sep v53: the four blog species buttons (All + three species) need
   327px of button plus 3x20px gap = 387px, but the content column is only
   vw-32, so anything narrower than ~420px wrapped and left "Dogs" alone on a
   second row. Shrunk type, padding and gap on phones so all four sit on one
   line; flex-wrap is deliberately left as wrap so a longer label can still
   fall over rather than overflow. Scoped to 480px, comfortably below the
   ~420px wrap point and above nothing that matters. ---- */
@media (max-width: 480px) {
  .entry-content .snb-speciesbtns { gap: 10px; }
  .entry-content .snb-speciesbtns .wp-block-button__link {
    font-size: 0.875rem;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---- 25 Sep v55: testimonial stars drawn once in CSS. Strong Testimonials
   inlined the same 393-byte SVG for every star - 575 per page, 221 KB, on
   all 58 pages with the slider. functions.php strips the solid-star SVGs
   from the view's HTML and leaves each <span class="star"> empty; this draws
   the identical Font Awesome star, #FFB900, 20 x 17.8px, bottom on the
   baseline exactly where the inline SVG sat.
   Deliberately sets no display: the plugin's hidden zero-star placeholder is
   also an empty .star, kept hidden by its inline display:none. A non-solid
   star (a future 4-star review) keeps its SVG, so it is not :empty and is
   left alone.
   Drawn in ::before, not on the span itself: the original SVG sat inside
   the span on the span's own text baseline, and an empty span-as-star
   builds its line box differently (measured 1.7px high). The pseudo-element
   reproduces the original structure, so geometry matches exactly.
   Selector is (0,4,2) to beat the plugin's own
   .strong-rating span.star:empty::before {width:20px;height:20px} (0,3,2). ---- */
.strong-rating-wrapper .strong-rating span.star:empty::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 17.8px;
  vertical-align: baseline;
  background-color: #ffb900;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 584 520'%3E%3Cpath d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 584 520'%3E%3Cpath d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =====================================================================
   v56 (26 Sep 2026) - Zoe's phone snags, round 2 + PageSpeed facade.
   Every rule below was test-injected and measured on all 107 pages at
   375px and 1280px before deploy (Part 15).
   ===================================================================== */

/* 1. Video facade (functions.php s.11): poster + play button; the real
      player loads on click. */
.snb-vfacade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; cursor: pointer; overflow: hidden; display: block; -webkit-appearance: none; appearance: none; }
.snb-vfacade img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; display: block; }
.snb-vfacade__btn { position: absolute; top: 50%; left: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(109, 130, 161, .92); box-shadow: 0 2px 12px rgba(0, 0, 0, .35); transition: transform .15s ease, background-color .15s ease; }
.snb-vfacade__btn::before { content: ""; position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -7px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }
@media (hover: hover) { .snb-vfacade:hover .snb-vfacade__btn { transform: scale(1.08); background: #6d82a1; } }
.snb-vfacade:focus-visible { outline: 3px solid #fbaf00; outline-offset: -3px; }
.snb-vfacade:focus-visible .snb-vfacade__btn { transform: scale(1.08); }

/* 2. Section dividers never cover content. functions.php (snb_divider_meta)
      tags each divider with its side and height. Only bottom dividers
      overlapped (44 cases on 18 pages; none of the top ones), so only
      they are padded. Tall ones shrink on phones as Divi's phone
      settings did (70px -> 50px). */
.snb-hasdiv { --snb-dvk: 1; }
@media (max-width: 767px) { .snb-hasdiv { --snb-dvk: .72; } }
.snb-hasdiv > .snb-dvl--b { height: calc(var(--snb-dvh) * var(--snb-dvk)) !important; background-size: 100% 100% !important; }
.snb-hasdiv.snb-dvb { padding-bottom: max(var(--snb-pb, 0px), calc(var(--snb-dvb) * var(--snb-dvk) + 8px)) !important; }

/* 3. Pre-footer: a bottom divider on a page's last section was drawn for
      a section that followed it on live; above the footer it painted a
      stray pale-blue band (vet referral, mentoring, parrot training,
      behaviour clinics). Hidden site-wide, as on the front page since
      v47, and no white strip between content and footer. */
.entry-content > .snb-hasdiv:last-child > .snb-dvl--b { display: none; }
.entry-content > .snb-hasdiv.snb-dvb:last-child { padding-bottom: var(--snb-pb, 30px) !important; }
@media (max-width: 767px) { .entry-content > .snb-hasdiv.snb-dvb:last-child { padding-bottom: 20px !important; } }
footer.wp-block-template-part { margin-block-start: 0; }

/* 4. Logo band (logo + rule under the banner): tighter and symmetrical.
      The band is the group holding the logo (attachment 39) and its rule;
      on some templates it is the last child of a wrapper group. Above:
      banner to logo. Below: rule to the first heading. A band that sits
      under a top divider keeps the divider as its top spacing, and a next
      section with a top divider keeps its padding. */
:root { --snb-lb: clamp(24px, 2.4vw, 32px); }
.entry-content .wp-block-group:has(> figure .wp-image-39):has(> hr):not(.snb-dvb) { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.entry-content > .wp-block-group:has(> figure .wp-image-39):not(.snb-dvt) { margin-top: 0 !important; padding-top: var(--snb-lb) !important; }
.entry-content > * > .wp-block-group:has(> figure .wp-image-39):has(> hr) { padding-top: 0 !important; }
.entry-content > .wp-block-group:has(> .wp-block-group:last-child > figure .wp-image-39):not(.snb-dvb) { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.entry-content > .wp-block-group:is(:has(> figure .wp-image-39), :has(> .wp-block-group:last-child > figure .wp-image-39)) + .wp-block-group:not(.snb-dvt) { padding-top: var(--snb-lb) !important; }
.entry-content > .wp-block-group:is(:has(> figure .wp-image-39), :has(> .wp-block-group:last-child > figure .wp-image-39)) + .wp-block-group:not(.snb-dvt) > :is(style, .snb-dvl) + :not(style, .snb-dvl) { margin-top: 0 !important; padding-top: 0 !important; }

/* 5. Rule-either-side labels: one rule each side (the page's own
      .snb-rule spans, not the theme's grey pseudo-rules as well), live's
      29px, and equal space above and below (38 / 40 at 375px; it was 3 /
      40). A label that opens its group keeps the group's own spacing. */
.snb-textdiv:has(> .snb-rule)::before, .snb-textdiv:has(> .snb-rule)::after { content: none; }
.snb-textdiv::before, .snb-textdiv::after { border-top-color: currentColor; }
.entry-content .snb-textdiv { margin-bottom: 0; flex-wrap: nowrap; }
.entry-content :not(style) + .snb-textdiv { margin-top: 36px; }
.entry-content .snb-textdiv, .entry-content .snb-textdiv > span, .entry-content .snb-textdiv > strong, .entry-content .snb-textdiv h1, .entry-content .snb-textdiv h2, .entry-content .snb-textdiv h3, .entry-content .snb-textdiv h4 { font-size: 1.8125rem; }
.entry-content .snb-textdiv > .snb-rule { flex: 1 1 20px; min-width: 20px; }
.entry-content .snb-textdiv > h1, .entry-content .snb-textdiv > h2, .entry-content .snb-textdiv > h3, .entry-content .snb-textdiv > h4 { flex: 0 1 auto; min-width: 0; text-align: center; }

/* =====================================================================
   v57 (26 Sep 2026) - Step cards on the problem pages (Initial
   Consultation, Treatment Plan ...): 106 cards on 17 pages, tagged
   snb-stepcard in content. Live: 23px card headings at every width; an
   amber rounded box and 30px between cards on phones only (Divi phone
   setting - none at 800px and up).
   ===================================================================== */
.entry-content .snb-stepcard h1, .entry-content .snb-stepcard h2, .entry-content .snb-stepcard h3, .entry-content .snb-stepcard h4 { font-size: 23px; line-height: 1.1; }
@media (max-width: 767px) {
  .entry-content .snb-stepcard { border: 4px solid #fbaf00; border-radius: 20px; padding: 11px 10px; }
  .entry-content .wp-block-columns:has(> .snb-stepcard) { row-gap: 30px; }
}

/* v58 (26 Sep 2026) - Logo band, last cases: Divi device copies ("show on
   phone / tablet" duplicates) right after the band start flush. The hidden
   desktop copy before them gave the visible one a 20px block gap (44px
   below the rule instead of 24px on three pages). */
.entry-content > .wp-block-group:is(:has(> figure .wp-image-39), :has(> .wp-block-group:last-child > figure .wp-image-39)) + .wp-block-group:not(.snb-dvt) > :is(.snb-v-ph, .snb-v-tb),
.entry-content > .wp-block-group:is(:has(> figure .wp-image-39), :has(> .wp-block-group:last-child > figure .wp-image-39)) + .wp-block-group:not(.snb-dvt) > :is(style, .snb-dvl) + :not(style, .snb-dvl) > :is(.snb-v-ph, .snb-v-tb) { margin-top: 0 !important; }

/* v59 (26 Sep 2026) - Layout shift: the Whereby consultation room embed has no
   size until its script runs, then takes 700px and pushes the rest of
   /book/consultation-room/ down. Reserve the space up front. */
whereby-embed { display: block; min-height: 700px; }

/* =====================================================================
   v60 (27 Sep 2026) - Pabau inline forms hold their space while Pabau's
   widget loads (Part 18). Both forms sit above the fold, and the widget
   inserts its frame about a second after load (consent form: 150px, then
   resized), which pushed the footer down on screen. Loaded heights,
   measured: consent form 547px at 390px wide / 525px at 1280px; bite
   matrix 1,808px / 1,549px. Reserved just under those, so a slightly
   shorter form never leaves a gap. The ids are Pabau's container ids
   from the embed code; a re-embedded form with a new id is unaffected.
   ===================================================================== */
.entry-content #c515 { min-height: 520px; }
.entry-content #c830 { min-height: 1540px; }
@media (max-width: 767px) {
  .entry-content #c515 { min-height: 540px; }
  .entry-content #c830 { min-height: 1600px; }
}

/* ---- 27 Sep v61: WCAG 2.2 AA and heading structure (Part 20) ----
   1. Focus not obscured (2.4.11). The menu bar is sticky (38px on desktop, 46px on
      phones, plus WordPress's admin bar for logged-in staff), so a link focused while
      tabbing backwards could scroll fully underneath it. :root outranks core's html rule.
   2. Target size (2.5.8). The desktop menu's dropdown arrows were 8x8px buttons touching
      their parent links. Padding makes each a 24x24px target; the matching negative
      margins leave the arrow and the menu exactly where they were.
   3. Pages whose title was an <h2> now use <h1> (Part 20); .snb-h2-look keeps the h2
      size so nothing moves on screen. */
:root { scroll-padding-top: calc(46px + 12px + var(--wp-admin--admin-bar--height, 0px)); }
@media (min-width: 981px) {
  :root { scroll-padding-top: calc(38px + 12px + var(--wp-admin--admin-bar--height, 0px)); }
  .snb-header .wp-block-navigation .wp-block-navigation__submenu-icon {
    box-sizing: content-box;
    padding: calc((24px - 0.6em) / 2);
    margin: calc((0.6em - 24px) / 2) calc((0.6em - 24px) / 2) calc((0.6em - 24px) / 2) calc(0.25em + (0.6em - 24px) / 2);
  }
}
.entry-content h1.snb-h2-look { font-size: var(--wp--preset--font-size--xx-large); line-height: 1; }
@media (max-width: 767px) {
  .entry-content h1.snb-h2-look { font-size: 1.75rem; line-height: 1.2; }
}

/* ---- 27 Sep v62: second H1s demoted (Part 22) ----
   /mentoring/ and /vet-referral/ each carried a second, visible <h1> inside a raw-HTML
   sign-up block ("Free support on your journey...", "Access our free guide..."). It is now
   an <h2 class="... snb-h1-look">, so each page has one H1. This keeps it exactly at the
   H1 size and spacing: 40px/1 on desktop, 32px/1.1 on phones, 0.67em margins. */
.entry-content h2.snb-h1-look { font-size: var(--wp--preset--font-size--huge); line-height: 1; margin-top: 0.67em; margin-bottom: 0.67em; }
@media (max-width: 767px) {
  .entry-content h2.snb-h1-look { font-size: 2rem; line-height: 1.1; }
}

/* ---- 27 Sep v63: course ratings section (Part 23) ----
   Printed by [snb_course_rating] only once a course has 3 or more ratings collected for it
   (mentoring, dog training classes), so nothing on any page changes until then. The quote
   is plain text under its stars, without the boxed-quote marks used elsewhere. */
.snb-course-rating { margin-block: 2rem; }
.snb-course-rating__list { list-style: none; padding-left: 0; margin: 1rem 0 0; }
.snb-course-rating__item { margin: 0 0 1.25rem; }
.snb-course-rating__meta { margin: 0; }
.snb-course-rating__stars { letter-spacing: 0.1em; margin-right: 0.25em; color: #b45309; } /* amber #b45309 is 5.0:1 on white (WCAG 1.4.11 needs 3:1); the slider gold #ffb900 is about 1.7:1 */
.entry-content blockquote.snb-course-rating__text { margin: 0.25rem 0 0; padding: 0; border: 0; background: none; font-style: normal; font-size: inherit; }
.entry-content blockquote.snb-course-rating__text::before, .entry-content blockquote.snb-course-rating__text::after { content: none; }
.snb-course-rating__text p { margin: 0; }


/* ---- 5 Oct 2026 v41 (0.3.63): four things Zoe saw at a 2000px window on cutover day ----
   1. Band dividers stopped at the content width. The divider div is a direct child of a constrained
      group, so WordPress's layout rule capped it at the content size and centred it with auto
      margins; at 1512px that is nearly the full width, at 2000px it is obviously not. The wave now
      spans the band.
   2. The assembler's testimonial card (span.snb-quote + image + h4 + p inside .snb-testimonial) wore
      the quote-card pattern's styles, because .snb-quote is that pattern's container class, so the
      quotation mark sat in its own bordered box. The span is now the badge on the top edge as on the
      Divi site, with the photo left and the words right from 768px.
   3. Cards in a row were not one height: the card is a group inside the column, so the column
      stretched and the card did not.
   4. One portrait photo in a card grid made its card taller: grid (.snb-tile) images are square-cropped. ---- */
.snb-hasdiv > .snb-dvl { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; left: 0; right: 0; width: 100%; }
.snb-testimonial { position: relative; }
.snb-testimonial > span.snb-quote { position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 2.4rem; height: 2.4rem; padding: .8rem 0 0; margin: 0; max-width: none; border: 2px solid var(--wp--preset--color--slate); border-radius: 9999px; background: #fff; color: var(--wp--preset--color--slate); font-family: var(--wp--preset--font-family--heading); font-size: 2.4rem; line-height: 1; }
@media (min-width: 768px) {
  .snb-testimonial { display: grid; grid-template-columns: 10rem 1fr; column-gap: 1.5rem; align-items: center; text-align: left; }
  .snb-testimonial > .wp-block-image { grid-column: 1; grid-row: 1 / span 2; margin: 0 !important; }
  .snb-testimonial > h4, .snb-testimonial > p, .snb-testimonial > p.has-text-align-center { grid-column: 2; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; text-align: left; }
  .snb-testimonial > h4 { margin-top: 0; margin-bottom: .5rem; }
  .snb-testimonial > p { margin-top: 0; }
}
.wp-block-column:has(> .snb-tile) { display: flex; flex-direction: column; }
.wp-block-column > .snb-tile { flex: 1 1 auto; }
.snb-tile > .wp-block-image img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; }

/* ---- 5 Oct 2026 v42 (0.3.64): blog posts read at Divi's width (Zoe "blog post a") ----
   The single-post template's post-content is a constrained group, so WordPress caps each child at the
   theme's 1080px content size; Divi's post body was 795px, and every image on the 26 posts measured
   x1.32 against the archive. The body and the featured banner now stop at 800px (about 65-75 characters
   a line in Open Sans 17px). The migrated posts wrap their content in a full-width constrained group, so the
   rule also reaches the children of any constrained group inside the post. Full-width blocks are left alone. ---- */
body.single-post .wp-block-post-content > :where(:not(.alignfull)),
body.single-post .wp-block-post-content :where(.is-layout-constrained) > :where(:not(.alignfull)) { max-width: 800px; }
body.single-post .wp-block-post-featured-image.alignwide { max-width: 800px; margin-left: auto; margin-right: auto; }

/* ==== v0.3.66 (7 Oct 2026, Patch): review snags #3 #9 #13 #27 #28 + desktop menu-arrow tap targets ==== */
/* #3 hub problem-grid thumbnails square + centred (was 0.3.65, never deployed) */
.wp-block-column.snb-narrow > figure.wp-block-image{text-align:center}
.wp-block-column.snb-narrow > figure.wp-block-image img{aspect-ratio:1 / 1;object-fit:cover}
/* #13 CTA hover: text stays white; amber CTAs flip to slate, slate CTAs flip to amber
   (slate CTAs kept their slate background while the text turned slate, so it vanished) */
@media (hover: hover){
.snb-cta:hover,.entry-content .snb-cta:hover{background-color:var(--wp--preset--color--slate)}
.snb-cta.snb-cta-slate:hover,.snb-cta.snb-cta--slate:hover,.entry-content .snb-cta.snb-cta-slate:hover,.entry-content .snb-cta.snb-cta--slate:hover{background-color:var(--wp--preset--color--amber)}
.snb-cta:hover :is(h2,h3,h4,p,li,strong,a),.entry-content .snb-cta:hover :is(h2,h3,h4,p,li,strong,a){color:var(--wp--preset--color--white)}
}
/* #9 CTA headings 29px -> 34px like the old site (the x-large preset is !important, hence !important) */
.snb-cta h2.has-x-large-font-size{font-size:clamp(1.6rem, 1.2rem + 2vw, 2.125rem)!important;line-height:1.15}
/* PageSpeed target-size: desktop submenu arrows overlapped their label by 4.3px. Same glyph position, no overlap, menu width unchanged */
@media (min-width:981px){
.snb-header .wp-block-navigation .wp-block-navigation__submenu-icon{margin-left:0;margin-right:calc(.85em - 24px);padding:calc(12px - .3em) calc(24px - .85em) calc(12px - .3em) .25em}
}
/* #28 /dog-training-classes/ hero: picture centred against the taller text column */
body.page-id-15193 .snb-b9 .wp-block-columns > .wp-block-column{align-self:center}
/* #27 /dog-training-classes/ instructors: both photos 450x300 (no upscaling) + space under the amber rule */
body.page-id-15193 .snb-b49 .wp-block-column figure.wp-block-image{margin-top:1.25rem}
body.page-id-15193 .snb-b49 .wp-block-column figure.wp-block-image img{width:450px;max-width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}

/* ==== v0.3.67 (7 Oct 2026, Patch): new header (#34) - logo lockup left, menu, call / WhatsApp / message icons right; footer "Our Location Hubs" links to /our-locations/ (#24) ==== */
.snb-header .snb-hdr-row{gap:16px;flex-wrap:nowrap;position:relative}
.snb-hdr-brand{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0;text-decoration:none}
.snb-hdr-brand svg{display:block;height:44px;width:auto}
.snb-header .snb-hdr-nav{flex:1 1 auto;min-width:0}
.snb-hdr-contact{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.snb-hdr-contact a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--wp--preset--color--slate);text-decoration:none;transition:background-color .15s,color .15s}
.snb-hdr-contact svg{width:21px;height:21px;fill:currentColor;pointer-events:none}
.snb-hdr-contact a:focus-visible{outline:2px solid var(--wp--preset--color--slate);outline-offset:2px}
@media (hover:hover){
.snb-hdr-contact a:hover{background-color:var(--wp--preset--color--amber);color:#fff}
.snb-hdr-contact a.is-wa:hover{background-color:#25d366;color:#fff}
}
/* desktop: menu in Rokkitt (brand subheading font), 14px gaps; Book as an amber pill */
@media (min-width:981px){
.snb-header .snb-hdr-nav .wp-block-navigation__container{font-family:var(--wp--preset--font-family--heading);font-weight:700;gap:14px}
.snb-header .snb-hdr-nav .wp-block-navigation__container > li > a[href$="/book/"]{background-color:var(--wp--preset--color--amber);color:#fff !important;padding:3px 12px;border-radius:7px}
:root{scroll-padding-top:calc(58px + 12px + var(--wp-admin--admin-bar--height,0px))}
}
@media (min-width:981px) and (hover:hover){
.snb-header .snb-hdr-nav .wp-block-navigation__container > li > a[href$="/book/"]:hover{background-color:var(--wp--preset--color--golden);color:var(--wp--preset--color--slate) !important}
}
/* wide screens: one row, allowed wider than the 1200px content width so the whole menu fits */
@media (min-width:1360px){
.snb-header .snb-hdr-row{max-width:1400px}
}
/* laptops 981-1359px: logo + icons on top, the full menu centred underneath */
@media (min-width:981px) and (max-width:1359px){
.snb-header .snb-hdr-row{flex-wrap:wrap !important;row-gap:2px}
.snb-header .snb-hdr-row .snb-hdr-nav{order:3;flex:1 0 100%}
.snb-header .snb-hdr-row > .snb-hdr-brand{margin-right:auto}
:root{scroll-padding-top:calc(92px + 12px + var(--wp-admin--admin-bar--height,0px))}
}
/* phones + tablets: logo left, icons + menu button right; the menu panel drops under the whole header */
@media (max-width:980px){
.snb-header .snb-hdr-row{gap:6px}
.snb-header .snb-hdr-row > .snb-hdr-brand{margin-right:auto}
.snb-hdr-brand svg{height:clamp(24px,7.4vw,34px)}
.snb-header .snb-hdr-row .wp-block-navigation{width:auto;flex:0 0 auto;order:3;position:static}
.snb-hdr-contact{order:2;gap:0}
.snb-header .snb-hdr-row .wp-block-navigation__responsive-container-open{width:40px;height:40px;margin:0;padding:0;justify-content:center;background:none;border-radius:8px}
.snb-header .snb-hdr-row .wp-block-navigation__responsive-container-open::before{content:none}
.snb-header .snb-hdr-row .wp-block-navigation__responsive-container-open svg{display:block;width:28px;height:28px;fill:var(--wp--preset--color--slate)}
.snb-header .is-menu-open .wp-block-navigation__responsive-dialog{margin-top:0 !important}
:root{scroll-padding-top:calc(54px + 12px + var(--wp-admin--admin-bar--height,0px))}
}
/* #155 FAQ questions move from <h4> to <h3> (heading order under an H2). Same look: mirrors the existing .snb-toggle summary h4 rule. */
.snb-toggle summary h3{margin:0;display:inline;font:inherit !important;color:inherit}
/* #24 footer: the "Our Location Hubs" heading is now a link */
.snb-footer h3 a{color:inherit;text-decoration:none}
@media (hover:hover){.snb-footer h3 a:hover{text-decoration:underline}}


/* ==== v0.3.68 (8 Oct 2026, Patch): review snags #4 #5 #6 #7 #8 #10 #15 #16 #18 #25 #26 #29 #30 #31, Learning Clinic H1, contact label on phones, phone logo (Zoe's option b: tagline under the wordmark, both left-aligned) ==== */

/* #4 + #5 + #6 team cards (/about/our-team/, /about/animal-behaviour-experts/): every photo 3:2 so the cards line up (Beverley's was 4:3);
   role titles one size (were H5 small / H4 24px) and slate, never white on the light toggle panel */
.snb-teamcard figure img{aspect-ratio:3 / 2;object-fit:cover;width:100%;height:auto}
.entry-content .snb-teamcard .snb-toggle :is(h3,h4,h5){font-family:var(--wp--preset--font-family--heading);font-size:1.25rem!important;line-height:1.3;font-weight:700;color:var(--wp--preset--color--slate)!important;margin:.5rem 0 .4rem}

/* #7 breadcrumb band: 20px above and below a 30px line was 70px of furniture; now 8px either side */
body:not(.home) main:has(.entry-content > .wp-block-group:first-child > .snb-breadcrumb:first-child){margin-block-start:8px!important}
.entry-content .snb-breadcrumb{padding-block:0!important}
.entry-content .snb-breadcrumb + *{margin-block-start:8px!important}

/* #8 payment options: the "Or" between the two instalment options sits in a narrow middle column, centred, 20px/800 like the old site */
@media (min-width:782px){ .entry-content .wp-block-column:has(> .snb-or:only-child){flex:0 0 3rem!important;align-self:center} }
.entry-content .snb-or{font-size:1.25rem!important;font-weight:800;margin:.5rem 0}
.entry-content .snb-or strong{font-weight:800}

/* #10 /cat-training/ trainer cards: photo no longer flush against the amber border (same treatment as #27) */
body.page-id-14414 .snb-b24 .wp-block-column > figure.wp-block-image:first-child{margin-top:1.25rem}

/* #15 + #29 masked bands (mentoring sign-up, species case-study bands): the diagonal backdrop was clamped to the
   content width by the constrained layout, and the block gap after it pushed every band's content ~24px down */
.snb-hasmask > .snb-mask{max-width:none!important;margin:0!important}
.snb-hasmask > .snb-mask + *{margin-block-start:0!important}
/* #30 a band with a mask AND a wave: the mask rule (.snb-hasmask > :not(.snb-mask){position:relative}) made the wave position:relative, so it rendered at the top,
   inset by the padding (e.g. /dog-behaviour-problems/dog-repetitive-behaviours/ before the FAQ) */
.snb-hasmask > .snb-dvl{position:absolute!important;z-index:2}
/* ...and the divider rule (.snb-hasdiv > :not(.snb-dvl){position:relative}) collapsed the mask to 0px high, so those bands lost their diagonal backdrop */
.snb-hasmask.snb-hasdiv > .snb-mask{position:absolute!important;inset:0;z-index:0!important}
.snb-hasmask > .snb-dvl + *, .snb-hasmask > .snb-dvl + .snb-dvl + *{margin-block-start:0}

/* #15 mentoring sign-up form (Keila): labelled fields, full-width inputs, amber button */
.snb-form form{display:flex;flex-direction:column;gap:.75rem}
.snb-form form .flex-col{display:flex;flex-direction:column;gap:4px}
.snb-form label{font-weight:700;font-size:.875rem;color:var(--wp--preset--color--slate)}
.snb-form input[type="email"],.snb-form input[type="text"]{width:100%;max-width:340px;padding:10px 12px;border:1px solid #9aa3ae;border-radius:8px;font:inherit;font-size:1rem;box-sizing:border-box}
.snb-form button{border:0;border-radius:10px;padding:10px 24px;font-weight:700;font-size:1rem;cursor:pointer;align-self:flex-start}
.snb-form button:hover{background-color:var(--wp--preset--color--slate)!important}
.snb-form .text-xs{font-size:.8rem;line-height:1.5}

/* #16 a CTA with no sub-line (mentoring "Get in touch"): the heading sat at the top of a padding box built for two lines */
.snb-cta:has(> h2:only-child){display:flex;align-items:center;justify-content:center;min-height:72px;padding:1rem 2rem}
.snb-cta:has(> h2:only-child) > h2{margin:0}

/* #18 vets: "We Work On Veterinary Referral Only" is now a plain section inside the amber box (was a mis-sized CTA card) */
.entry-content .snb-vetonly{padding:0 1.5rem 1.5rem}
.entry-content .snb-vetonly h2{margin-top:.25rem}
.entry-content .snb-vetonly .wp-block-buttons{margin-top:1rem}

/* #25 /our-locations/: the four hub cards lay out as columns and the map sits at the foot of each, so all four line up */
.entry-content .snb-hubcard:has(> iframe){display:flex;flex-direction:column}
.entry-content .snb-hubcard:has(> iframe) > iframe{margin-top:auto!important}
.entry-content .snb-hubcard:has(> iframe) > figure img{aspect-ratio:1600 / 1341;object-fit:cover;width:100%;height:auto}

/* #26 /dog-training-classes/ (and any map beside a text column): the map fills the column height on desktop */
@media (min-width:782px){
  .entry-content .wp-block-column > iframe[src*="maps.google"]:only-child{height:100%!important;min-height:320px;box-sizing:border-box}
}

/* #31 blog cards (/blog/ and the species pages): photos one shape and "read more" on one line across a row */
.snb-bloggrid .wp-block-post{display:flex;flex-direction:column}
.snb-bloggrid .wp-block-post-featured-image img{aspect-ratio:3 / 2;object-fit:cover;width:100%;height:auto!important}
.snb-bloggrid .wp-block-post-excerpt{flex:1 1 auto;display:flex;flex-direction:column}
.snb-bloggrid .wp-block-post-excerpt__more-text{margin-top:auto}
/* #31 category archives (templates/archive.html): same cards as /blog/, single border, species strip */
.snb-archstrip{gap:12px;margin:0 0 2rem}
.snb-archstrip .wp-block-button__link{background-color:var(--wp--preset--color--amber);color:#fff;border-radius:10px;font-weight:700;font-size:.9rem;padding:.55rem 1.4rem}
.snb-archstrip .wp-block-button__link:hover{background-color:var(--wp--preset--color--slate)}
.snb-archgrid .wp-block-post-template{gap:2rem 5.5%;margin:0}
.snb-archgrid .wp-block-post{border:1px solid #d8d8d8;padding:19px;background:#fff;margin:0;border-radius:0;box-shadow:none}
.snb-archgrid .wp-block-post-featured-image{margin:0 0 .75rem}
.snb-archgrid .wp-block-post-title{font-size:20px;line-height:1.3;margin:0 0 .35rem}
.snb-archgrid .wp-block-post-title a{color:var(--wp--preset--color--slate);text-decoration:underline}
.snb-archgrid .wp-block-post-date{font-size:14px;font-weight:600;color:#666;margin:0 0 .6rem}
.snb-archgrid .wp-block-post-excerpt{font-size:15px;color:#666;margin:0}
.snb-archgrid .wp-block-post-excerpt__more-link{color:#666;text-decoration:underline}
@media (max-width:781px){ .snb-archgrid .wp-block-post-template{grid-template-columns:minmax(0,1fr)!important} }

/* Learning Clinic (/services/behaviour-clinics/): H1 sat 5px under its wave; now the same ~45px as the other service pages */
body.page-id-94 .snb-b4{padding-top:45px!important}

/* /contact/ "What are you contacting us about?": centred when it wraps on a phone */
.entry-content .snb-textdiv > span{text-align:center}
@media (max-width:600px){ .entry-content .snb-textdiv{flex-wrap:nowrap} .entry-content .snb-textdiv > span{flex:0 1 auto;min-width:0} }

/* Phone logo (<=980px): stacked lockup - cat/dog mark, SECOND NATURE, tagline underneath, both left-aligned; icons + menu button 34px */
.snb-hdr-brand svg.snb-logo-phone{display:none}
@media (max-width:980px){
  .snb-header .snb-hdr-brand svg.snb-logo-svg:not(.snb-logo-phone){display:none}
  .snb-header .snb-hdr-brand svg.snb-logo-phone{display:block;width:min(calc(100vw - 196px),300px);height:auto}
  .snb-header .snb-hdr-row{gap:8px}
  .snb-header .snb-hdr-contact a{width:34px;height:34px}
  .snb-header .snb-hdr-contact a svg{width:20px;height:20px}
  .snb-header .snb-hdr-row .wp-block-navigation__responsive-container-open{width:34px;height:34px}
}


/* ==== v0.3.69 (8 Oct 2026, Patch): title spacing under waves, contact hours + map, phone menu spacing, hub subtitle, category banners, VB-or-CAB infographic on phones ==== */

/* Title spacing: a band that starts with a wave divider gave its first block a 20px block gap on top of the band padding
   (e.g. /dog-training-classes/ 64px wave->H1, the home page 30px). Same 30px as the home page everywhere. */
.snb-hasdiv > .snb-dvl + :not(.snb-dvl),
.snb-hasdiv > .snb-dvl + .snb-dvl + :not(.snb-dvl){margin-block-start:0!important}

/* ...and the wave-only band above the title (a group holding nothing but the top wave) carried 30px of bottom padding (now 20px),
   and the title's own wrapper added 4-20px more. Wave -> title is now the band's 30px, as on the home page. */
.entry-content > .snb-hasdiv:not(:has(> :not(.snb-dvl))){padding-bottom:20px!important}
.entry-content > .snb-hasdiv:not(:has(> :not(.snb-dvl))) + .wp-block-group > .snb-dvl + :not(.snb-dvl):has(h1),
.entry-content > .snb-hasdiv:not(:has(> :not(.snb-dvl))) + .wp-block-group > :first-child:not(.snb-dvl):has(h1){padding-top:0!important;margin-top:0!important}

/* /contact/ opening hours right-aligned against the map, the pair centred on the page */
.entry-content .snb-hoursmap{justify-content:center;gap:2rem}
.entry-content .snb-hoursmap > .wp-block-column{flex:0 1 auto!important}
.entry-content .snb-hoursmap .wpseo-opening-hours{margin:0}
.entry-content .snb-hoursmap > .wp-block-column:first-child{display:flex;flex-direction:column;align-items:flex-end}
.entry-content .snb-hoursmap > .wp-block-column:first-child h3{margin-top:0}
.entry-content .snb-hoursmap .snb-mapwrap{max-width:400px;width:100%}
@media (max-width:781px){
  .entry-content .snb-hoursmap > .wp-block-column:first-child{align-items:center}
  .entry-content .snb-hoursmap > .wp-block-column:first-child h3{text-align:center!important}
  .entry-content .snb-hoursmap .snb-mapwrap{margin-inline:auto}
}
/* /contact/ + /vet-referral/online-referral/ species buttons: one row on phones */
.entry-content .snb-speciesrow{gap:10px}
@media (max-width:781px){ .entry-content .snb-speciesrow [class^="cf-popup-btn-"]{font-size:17px!important;padding:10px 4px!important} }

/* Phone menu: the list used its content width (chevrons ~65px in from the right edge); full width now, a hairline
   between items like the old menu, deeper indent for each level, and room under the last item */
@media (max-width:980px){
  .snb-header .is-menu-open .wp-block-navigation__responsive-dialog,
  .snb-header .is-menu-open .wp-block-navigation__responsive-container-content,
  .snb-header .is-menu-open .wp-block-navigation__container{width:100%!important}
  .snb-header .wp-block-navigation__responsive-container.is-menu-open{padding:12px 16px 20px!important}
  .snb-header .is-menu-open .wp-block-navigation-item{border-bottom:1px solid rgba(0,0,0,.06)}
  .snb-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child,
  .snb-header .is-menu-open .wp-block-navigation__container > li:last-child{border-bottom:0}
  .snb-header .is-menu-open .wp-block-navigation__submenu-container{padding:0 0 0 20px!important;border-top:1px solid rgba(0,0,0,.06)!important}
  .snb-header .is-menu-open .wp-block-navigation__submenu-container a{font-weight:600}
  .snb-sub-toggle{right:-6px}
}

/* Location hubs: the intro line under the H1 is slate, 500 weight, tight leading in a narrower column, centred on
   phones - as on the old site (it had turned into 24px body text in ink with 1.7 leading, full width) */
.single-wpseo_locations .entry-content > .wp-block-group:first-child .snb-b2 :is(p,li){color:var(--wp--preset--color--slate)!important;font-weight:500;line-height:1.15;max-width:864px;margin-inline:auto}
@media (max-width:781px){ .single-wpseo_locations .entry-content > .wp-block-group:first-child .snb-b2 p{text-align:center;font-size:22px!important;padding-inline:8%} }

/* Category archives (templates/archive.html): the species banner for each category, same as its blog page */
.category-felines .snb-archhead figure img{content:url("https://secondnature.b-cdn.net/wp-content/uploads/2021/06/faq_banner.jpg")}
.category-canines .snb-archhead figure img{content:url("https://secondnature.b-cdn.net/wp-content/uploads/2021/06/clinic_banner.jpg")}
.snb-archhead figure.alignfull{margin-block:8px 0!important}
.snb-archhead + .wp-block-group{margin-block-start:0!important}
.snb-archhead + .wp-block-group .wp-block-query-title{margin-top:0}

/* #20 VB-or-CAB infographic: full width on phones (it was 75% of the column, 269px of text-heavy graphic) */
@media (max-width:781px){ body.page-id-113 .snb-iw10{max-width:100%!important} }

/* ==== v0.3.70 (9 Oct 2026, Patch): phone menu - no sideways scroll, and the panel reaches the bottom of the screen ==== */
/* The links were width:100% PLUS 47px right padding (content-box), so every row stuck out ~30px past the panel and the
   panel scrolled left/right. The panel was also capped at 72% of the screen height, so with a section opened CONTACT sat
   below the cut-off inside a small scrolling box. The header is sticky here (the old Divi header was not, so its menu just
   ran down the page); the panel now fills the screen under the header and scrolls inside itself when a section is open. */
@media (max-width:980px){
  .snb-header .wp-block-navigation__responsive-container.is-menu-open{
    max-height:calc(100vh - 52px);max-height:calc(100dvh - 52px);
    overflow-x:hidden!important;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .snb-header .is-menu-open .wp-block-navigation-item,
  .snb-header .is-menu-open .wp-block-navigation-item > a,
  .snb-header .is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content,
  .snb-header .is-menu-open .wp-block-navigation__submenu-container{box-sizing:border-box;max-width:100%}
  .snb-sub-toggle{right:0}
}

/* ==== v0.3.71 (9 Oct 2026, Patch): phone menu - room under CONTACT, and the whole menu fits small phones without scrolling ==== */
/* Zoe's iPhone SE (320 x ~460 visible): the open menu needed 458px and the screen gave it 406, so CONTACT sat on the
   bottom edge of a scrolling panel. 28px under the last item everywhere; rows 6px top/bottom on short screens
   (<=600px tall) so all nine items fit with the gap (tested 320x460, 375x560, 390x664). */
@media (max-width:980px){
  .snb-header .wp-block-navigation__responsive-container.is-menu-open{padding-bottom:28px!important}
}
@media (max-width:980px) and (max-height:600px){
  .snb-header .is-menu-open .wp-block-navigation__container > li > a,
  .snb-header .is-menu-open .wp-block-navigation__container > li > .wp-block-navigation-item__content{padding-top:6px!important;padding-bottom:6px!important}
  .snb-header .is-menu-open .wp-block-navigation__submenu-container a{padding-top:6px!important;padding-bottom:6px!important}
  .snb-sub-toggle{height:32px;line-height:32px;top:0}
}

/* ==== v0.3.72 (9 Oct 2026, Patch): phone menu - the space under CONTACT now matches the space above ABOUT (12px + the row's own padding) ==== */
@media (max-width:980px){
  .snb-header .wp-block-navigation__responsive-container.is-menu-open{padding-bottom:12px!important}
}





/* ==== v0.3.73 (10 Oct 2026, Patch): Zoe's round-19 snags ==== */
/* 1. Testimonial badge (species pages, "Recommended by vets" etc.): the original Divi badge was a dark, bold closing-quote
      glyph in a dark-ringed circle; ours was a thin slate opening quote that read too small. Same glyph as the original
      (FontAwesome quote-right outline, drawn as an inline SVG - no icon font), dark ring. */
.snb-testimonial > span.snb-quote { width: 2.25rem; height: 2.25rem; padding: 0; border: 3px solid #3d353d; font-size: 0 !important; color: transparent; top: -1.125rem; }
.snb-testimonial > span.snb-quote::before { content: ''; display: block; width: 1.05rem; height: 1.05rem; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-448%20512%20512'%3E%3Cpath%20fill='%233d353d'%20d='M464%20-416Q484%20-416%20498.0%20-402.0Q512%20-388%20512%20-368V-128Q512%20-62%20465.0%20-15.0Q418%2032%20352%2032H344Q334%2032%20327.0%2025.0Q320%2018%20320%208V-40Q320%20-50%20327.0%20-57.0Q334%20-64%20344%20-64H352Q378%20-64%20397.0%20-83.0Q416%20-102%20416%20-128V-192H336Q316%20-192%20302.0%20-206.0Q288%20-220%20288%20-240V-368Q288%20-388%20302.0%20-402.0Q316%20-416%20336%20-416ZM176%20-416Q196%20-416%20210.0%20-402.0Q224%20-388%20224%20-368V-128Q224%20-62%20177.0%20-15.0Q130%2032%2064%2032H56Q46%2032%2039.0%2025.0Q32%2018%2032%208V-40Q32%20-50%2039.0%20-57.0Q46%20-64%2056%20-64H64Q90%20-64%20109.0%20-83.0Q128%20-102%20128%20-128V-192H48Q28%20-192%2014.0%20-206.0Q0%20-220%200%20-240V-368Q0%20-388%2014.0%20-402.0Q28%20-416%2048%20-416Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 2. Testimonial slider on phones: it was capped at 80% of the screen (copied from the Divi site) which left the quote in
      a narrow box. Full content width on phones; tablets keep their cap. */
@media (max-width: 767px) {
  .is-layout-constrained > .alignwide.snb-slider { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* 3. "Claim on pet insurance" cards (species, service and reactivity pages): the original was a WHITE card with the amber
      ring, dark heading and a plain "find out more" link - not a solid amber block. Targets only the CTA whose heading
      links to the payment-options page, so every other amber CTA is untouched. */
.snb-cta:has(> h2 > a[href*="/about/payment-options/"]) { background-color: #fff !important; }
.snb-cta:has(> h2 > a[href*="/about/payment-options/"]) h2,
.snb-cta:has(> h2 > a[href*="/about/payment-options/"]) h2 a { color: #000 !important; }
.snb-cta:has(> h2 > a[href*="/about/payment-options/"]) p,
.snb-cta:has(> h2 > a[href*="/about/payment-options/"]) p span { color: #000 !important; font-style: normal; }
.snb-cta:has(> h2 > a[href*="/about/payment-options/"]) .wp-block-button__link { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; color: var(--wp--preset--color--slate) !important; text-decoration: underline; font-size: 0.875rem; font-family: inherit; }
.snb-cta:has(> h2 > a[href*="/about/payment-options/"]):hover { background-color: #fff8e6 !important; }
.snb-cta:has(> h2 > a[href*="/about/payment-options/"]):hover h2 a { color: #000 !important; }

/* 4. Paying in instalments (payment options + Life Skills classes): the original layout - amber "3 Options", each "Or"
      sat on an amber rule, quieter option headings, and room above the PayPal panel. */
.entry-content .snb-instal mark.snb-amber, .entry-content .snb-amber { background: none; color: var(--wp--preset--color--amber); }
.entry-content .snb-instal .snb-or { display: flex; align-items: center; justify-content: center; gap: 0.75rem; color: var(--wp--preset--color--slate); font-size: 1.125rem !important; margin: 1rem 0 !important; }
.entry-content .snb-instal .snb-or::before, .entry-content .snb-instal .snb-or::after { content: ''; flex: 1 1 0; height: 2px; background: var(--wp--preset--color--amber); max-width: 14rem; }
@media (min-width: 782px) {
  .entry-content .snb-instal .wp-block-column:has(> .snb-or:only-child) { flex: 0 0 9rem !important; }
  .entry-content .snb-instal .wp-block-column:has(> .snb-or:only-child) .snb-or::before,
  .entry-content .snb-instal .wp-block-column:has(> .snb-or:only-child) .snb-or::after { max-width: 2.5rem; }
}
.entry-content .snb-instal h3:not(.snb-or) { font-size: 1.125rem !important; margin-bottom: 0.25rem; }
.entry-content .snb-instal h4, .entry-content .snb-instal h5 { font-size: 0.95rem !important; font-weight: 600; color: var(--wp--preset--color--slate); margin-top: 0.25rem; }
.entry-content .snb-instal .wp-block-columns:has(.snb-ppimg) { margin-top: 1.5rem; }
.entry-content .snb-instal > .wp-block-separator { border-color: var(--wp--preset--color--amber); background-color: var(--wp--preset--color--amber) !important; max-width: 10rem; height: 2px; margin: 1.25rem auto; }

/* 5. Linked section titles (home "Why Second Nature Behaviour?" reasons, training/consultation/insurance/team titles and
      the same blocks on the vets, services and species pages): keep the heading's own colour, underline on hover only. */
.entry-content :is(h2, h3) > a.snb-hlink { color: inherit; text-decoration: none; }
.entry-content :is(h2, h3) > a.snb-hlink:hover, .entry-content :is(h2, h3) > a.snb-hlink:focus-visible { text-decoration: underline; }
.entry-content .snb-ico a { display: inline-block; line-height: 0; }

/* 6. Rescue page team: the same tap-to-open cards as Our Team, four across on desktop. */
.entry-content .snb-rescueteam > .wp-block-column { min-width: 0; }

/* 7. Accreditation logo rows in narrow columns: the square photo crop (aspect-ratio 1/1 + cover) was slicing the sides off
      wide logos (Fear Free, PACT, ABTC). Logos keep their own shape. */
.wp-block-column.snb-narrow > figure.wp-block-image img[src*="logo"] { aspect-ratio: auto; object-fit: contain; }

/* 8. Payment-options claim steps: two per row on every phone, as on the original page (the team-grid rule stacks them
      one per row below 480px). Only this section carries .snb-steps2. */
@media (max-width: 781px) {
  .wp-block-columns.snb-teamgrid.snb-steps2 { flex-wrap: wrap !important; gap: 1.25rem 0.75rem !important; }
  .wp-block-columns.snb-teamgrid.snb-steps2 > .wp-block-column { flex-basis: calc(50% - 0.375rem - 1px) !important; box-sizing: border-box; }
}

/* 9. Instalments on phones, as the original: the "Or" rules run the full width, the PayPal logos sit centred above
      option 3, and option headings stay compact. */
@media (max-width: 781px) {
  .entry-content .snb-instal .snb-or::before, .entry-content .snb-instal .snb-or::after { max-width: none; }
  .entry-content .snb-instal .wp-block-column:has(> .snb-or:only-child) { flex-basis: 100% !important; }
  .entry-content .snb-instal figure.snb-ppimg { margin-left: auto !important; margin-right: auto !important; text-align: center; }
  .entry-content .snb-instal figure.snb-ppimg img { max-width: 200px !important; margin: 0 auto; }
  .entry-content .snb-instal h3:not(.snb-or) { font-size: 1rem !important; }
}


/* ==== v0.3.74 (10 Oct 2026, Patch) ==== */
/* Services tile for Calm in Company: the class photo is mostly field in the centre, so the square crop now leans right,
   onto Megan and the dog. */
.snb-tile figure.snb-objright img { object-position: 80% 55%; }
/* FAQ "jump to" links as a row of compact buttons. */
.entry-content .snb-jump { gap: 0.5rem !important; margin-bottom: 1.5rem; }
.entry-content .snb-jump .wp-block-button__link { font-size: 0.9rem; padding: 0.45rem 1rem; }
/* Sign-up form headings demoted from <h1> to <h2> (one H1 per page): keep the mentoring-process one at its smaller size. */
.entry-content h2.snb-subhead { font-size: 1.4rem; font-weight: 500; line-height: 1.25; }


/* ==== 0.3.75 (10 Oct 2026, Patch) ==================================== */

/* Hub (location) pages: title gets the same side gutters and phone size as other pages */
.single-wpseo_locations h1.wp-block-post-title { padding-inline: 16px; box-sizing: border-box; }
@media (max-width: 781px) { .single-wpseo_locations h1.wp-block-post-title { font-size: 32px !important; line-height: 1.15; } }
.single-wpseo_locations .entry-content h2.snb-subhead { font-size: 20px !important; line-height: 1.35; font-weight: 700; margin-top: .5rem; }

/* Card and step titles that now link to the same place as their picture/icon */
.entry-content .snb-narrow h3 a, .entry-content .snb-tile h3 a, .entry-content .snb-card4 h3 a { color: inherit; text-decoration: none; }
.entry-content .snb-narrow h3 a:hover, .entry-content .snb-tile h3 a:hover, .entry-content .snb-card4 h3 a:hover { text-decoration: underline; }
.entry-content .snb-ico a { color: inherit; display: inline-block; }

/* "Dog training with us" switch as two pill buttons */
.entry-content .snb-trainswitch { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.entry-content .snb-trainswitch .snb-ts-label { flex-basis: 100%; text-align: center; font-weight: 600; }
.entry-content .snb-trainswitch a { display: inline-block; padding: 8px 18px; border: 2px solid var(--wp--preset--color--slate); border-radius: 999px; color: var(--wp--preset--color--slate); text-decoration: none; font-weight: 600; line-height: 1.3; }
.entry-content .snb-trainswitch a.snb-ts-on { background: var(--wp--preset--color--slate); color: #fff; }
.entry-content .snb-trainswitch a:not(.snb-ts-on):hover { background: #eef2f7; }

/* Payment options: bigger claim step numbers; instalment headings readable on phones */
.entry-content h3.snb-stepnum { font-size: 2.25rem !important; line-height: 1; margin: .35rem 0 .5rem; }
@media (max-width: 781px) {
  .entry-content .snb-instal h3:not(.snb-or) { font-size: 1.4rem !important; line-height: 1.25; }
  .entry-content .snb-instal figure.snb-ppimg img { max-width: 170px !important; }
  .entry-content .snb-instal h4, .entry-content .snb-instal h5 { font-size: 1.1rem !important; }
}

/* "Let's get started" / "Contact us" style CTA boxes: full width on phones, never cramped on desktop */
@media (max-width: 781px) { .entry-content .snb-cta[class*="snb-ct"] { width: auto !important; max-width: 100% !important; } }
@media (min-width: 782px) { .entry-content .snb-cta[class*="snb-ct"] { min-width: min(100%, 440px); } }

/* Headings sitting straight on the diagonal-stripe backgrounds: darker with a soft white halo */
.snb-hasmask > h2.wp-block-heading:not(.has-text-color), .snb-hasmask > h4.wp-block-heading:not(.has-text-color),
.snb-hasmask > .wp-block-group > h2.wp-block-heading:not(.has-text-color) {
  color: #4f6280; text-shadow: 0 0 6px #fff, 0 0 12px #fff, 0 0 18px #fff;
}

/* Testimonial sliders: wider text area on phones */
@media (max-width: 781px) {
  .snb-slider .wpmtst-testimonial-inner { padding-left: 30px !important; padding-right: 30px !important; }
  .snb-slider .wpmslider-prev { left: 2px !important; }
  .snb-slider .wpmslider-next { right: 2px !important; }
}

/* Lists: paragraphs inside list items no longer add extra gaps */
.entry-content li > p { margin-top: 0; margin-bottom: 0; }

/* Phones: empty spacer columns (25/50/25 layouts) collapse instead of adding gaps */
@media (max-width: 781px) { .entry-content .wp-block-column:empty { display: none; } }

/* Phones: an icon-only column always sits above its text, so alternating rows stack the same way */
@media (max-width: 781px) {
  .entry-content .wp-block-columns > .wp-block-column:has(> .snb-ico:only-child) { order: -1; }
  .entry-content .wp-block-columns:has(> .wp-block-column > .snb-ico:only-child) { row-gap: 8px; }
}

/* Testimonial quote badge: larger quote mark inside the circle */
.snb-testimonial > span.snb-quote::before { width: 1.35rem; height: 1.35rem; }

/* Logo rows (accreditation logos in one column each): side by side on phones, not stacked */
@media (max-width: 781px) {
  .entry-content .wp-block-columns:has(> .snb-narrow > figure img[src*="logo"]):not(:has(> .wp-block-column:not(.snb-narrow))) {
    flex-direction: row !important; flex-wrap: wrap !important; justify-content: center; align-items: center; gap: 14px 22px !important;
  }
  .entry-content .wp-block-columns:has(> .snb-narrow > figure img[src*="logo"]):not(:has(> .wp-block-column:not(.snb-narrow))) > .wp-block-column {
    flex: 0 0 auto !important; width: auto !important; margin: 0 !important;
  }
  .entry-content .wp-block-columns:has(> .snb-narrow > figure img[src*="logo"]):not(:has(> .wp-block-column:not(.snb-narrow))) img { max-height: 60px; width: auto !important; }
}

/* Mentoring process page: breathing room under the Case Roleplays photo */
.page-id-6118 .snb-im52 { margin-bottom: 24px !important; }


/* ==== 0.3.77 (10 Oct 2026, Patch) - stop text jumping when the web fonts arrive ====
 * PageSpeed flagged layout shift on hub and problem pages (0.16-0.18): headings and the
 * first paragraph are drawn in a system font, then move when Rokkitt / Open Sans load.
 * These fallback faces stretch the system font to the web fonts' measurements (measured
 * from our own font files), so the swap no longer moves anything. Brand fonts unchanged. */
@font-face{font-family:"Open Sans Fallback";font-style:normal;font-weight:300 500;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo"),local("Helvetica");size-adjust:104.85%;ascent-override:101.94%;descent-override:27.94%;line-gap-override:0%}
@font-face{font-family:"Open Sans Fallback";font-style:normal;font-weight:600 800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold"),local("Helvetica Bold");size-adjust:104.11%;ascent-override:102.67%;descent-override:28.14%;line-gap-override:0%}
@font-face{font-family:"Rokkitt Fallback";font-style:normal;font-weight:100 500;src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Liberation Serif"),local("Tinos");size-adjust:104.86%;ascent-override:77.91%;descent-override:30.52%;line-gap-override:0%}
@font-face{font-family:"Rokkitt Fallback";font-style:normal;font-weight:600 900;src:local("Times New Roman Bold"),local("TimesNewRomanPS-BoldMT"),local("Liberation Serif Bold"),local("Tinos Bold");size-adjust:101.19%;ascent-override:80.74%;descent-override:31.62%;line-gap-override:0%}
html:root{--wp--preset--font-family--heading:Rokkitt,"Rokkitt Fallback",Rockwell,'Rockwell Nova','Roboto Slab',Georgia,serif;--wp--preset--font-family--body:'Open Sans',"Open Sans Fallback",'Segoe UI',Helvetica,Arial,sans-serif}
.snb-rot,.snb-textdiv h3{font-family:Rokkitt,"Rokkitt Fallback",Georgia,serif}


/* ==== 0.3.79 (10 Oct 2026, Patch) ====================================================== */
/* a. Android: 0.3.77's stand-in fonts are matched to Arial / Times New Roman, which Android
 *    doesn't have, so Android still saw text jump when the web fonts arrived. These second
 *    stand-ins are matched to Android's own Roboto / Noto Serif (measured from those fonts).
 *    Phones with Arial keep using the first set; Android skips it and uses these. */
@font-face{font-family:"Open Sans Fallback Android";font-style:normal;font-weight:300 500;src:local("Roboto"),local("Roboto-Regular");size-adjust:105.46%;ascent-override:101.35%;descent-override:27.78%;line-gap-override:0%}
@font-face{font-family:"Open Sans Fallback Android";font-style:normal;font-weight:600 800;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:110.81%;ascent-override:96.46%;descent-override:26.44%;line-gap-override:0%}
@font-face{font-family:"Rokkitt Fallback Android";font-style:normal;font-weight:100 500;src:local("Noto Serif"),local("NotoSerif-Regular");size-adjust:88.33%;ascent-override:92.50%;descent-override:36.23%;line-gap-override:0%}
@font-face{font-family:"Rokkitt Fallback Android";font-style:normal;font-weight:600 900;src:local("Noto Serif Bold"),local("NotoSerif-Bold");size-adjust:85.72%;ascent-override:95.31%;descent-override:37.33%;line-gap-override:0%}
html:root{--wp--preset--font-family--heading:Rokkitt,"Rokkitt Fallback","Rokkitt Fallback Android",Rockwell,'Rockwell Nova','Roboto Slab',Georgia,serif;--wp--preset--font-family--body:'Open Sans',"Open Sans Fallback","Open Sans Fallback Android",'Segoe UI',Helvetica,Arial,sans-serif}
.snb-rot,.snb-textdiv h3{font-family:Rokkitt,"Rokkitt Fallback","Rokkitt Fallback Android",Georgia,serif}

/* b. Thin white line under wave dividers (seen on iPhone): the wave is scaled to a height
 *    like 50.4px and Safari leaves its last, part-transparent pixel row showing the white
 *    page behind. Each wave now overlaps the next band by 1px, so that row sits on the
 *    band's own colour. Top waves get the same 1px the other way. */
.snb-hasdiv > .snb-dvl--b{bottom:-1px!important}
.snb-hasdiv > .snb-dvl--t{top:-1px!important}