/*
Theme Name: Shaadi Baraat & Co
Theme URI: https://shaadibaraatco.com
Author: Shaadi Baraat & Co
Description: Custom theme for Shaadi Baraat & Co — premium Indian & South Asian wedding planners, Sydney. Lightweight, fast, SEO-ready.
Version: 1.5.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sbc
Tags: custom-menu, featured-images, translation-ready
*/

/* ---------------------------------------------
   1. Brand tokens
--------------------------------------------- */
:root {
  /* Gallery Ivory — photography-led, restrained chrome */
  --sbc-maroon: #761D38;
  --sbc-maroon-dark: #5C162B;
  --sbc-gold: #B08D3F;

  --sbc-ivory: #FDFCFA;        /* page background — near white */
  --sbc-ivory-light: #FFFFFF;  /* cards */
  --sbc-charcoal: #1C1917;     /* headings */
  --sbc-body: #57534E;         /* body copy */
  --sbc-muted: #8C837B;
  --sbc-blush: #F7F4EE;        /* alternate band — warm stone, no longer pink */
  --sbc-hairline: #E7E2D8;
  --sbc-placeholder: #EDE8E0;

  --sbc-serif: 'Cormorant Garamond', Georgia, serif;
  --sbc-sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sbc-radius: 2px;           /* squared edges read more editorial */
  --sbc-max: 1240px;
  --sbc-narrow: 700px;

  /* Type scale.
     Every heading in the theme resolves to one of these. Before, h2 was 40px on
     About and 24px on Journal because three components carried their own ad-hoc
     font-size; those now point here instead. Two families is deliberate —
     Cormorant Garamond for headings, Mulish for body. */
  --sbc-t-h1: clamp(2.6rem, 5.6vw, 4rem);          /* 41.6 -> 64px */
  --sbc-t-h2: clamp(1.9rem, 3.6vw, 2.5rem);        /* 30.4 -> 40px */
  --sbc-t-statement: clamp(1.5rem, 3vw, 2rem);     /* 24   -> 32px */
  --sbc-t-quote: clamp(1.35rem, 2.6vw, 1.75rem);   /* 21.6 -> 28px */
  --sbc-t-h3: 1.4rem;                              /* 22.4px */
  --sbc-t-h4: 1.25rem;                             /* 20px   */
  --sbc-t-eyebrow: .7rem;                          /* 11.2px */

  /* Spacing scale.
     Replaces the loose set of hardcoded values (96/84/64/56/46/34/26) that made
     vertical rhythm inconsistent from page to page. */
  --sbc-space-3xs: 8px;
  --sbc-space-2xs: 12px;
  --sbc-space-xs: 16px;
  --sbc-space-sm: 24px;
  --sbc-space-md: 32px;
  --sbc-space-lg: 48px;
  --sbc-space-xl: 64px;
  --sbc-space-2xl: 96px;

  --sbc-gutter: var(--sbc-space-sm);               /* horizontal page padding */
  --sbc-section-y: var(--sbc-space-2xl);
  --sbc-section-y-tight: var(--sbc-space-xl);

  /* Measures. In em so they track the clamped font-size rather than fighting it. */
  --sbc-measure-display: 14em;                     /* headline line length */
  --sbc-measure-lede: 32em;                        /* hero intro paragraph */
  --sbc-measure-lede-tight: 24em;                  /* CTA band paragraph */
}

/* ---------------------------------------------
   2. Reset & base
--------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sbc-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--sbc-body);
  background: var(--sbc-ivory);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--sbc-serif);
  color: var(--sbc-charcoal);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  /* Safety net. A single long word — a venue name, a hyphen-free compound, or
     any heading rendered in the Georgia fallback before Cormorant loads — would
     otherwise push past its container and get clipped. */
  overflow-wrap: break-word;
}

h1 { font-size: var(--sbc-t-h1); }
h2 { font-size: var(--sbc-t-h2); }
h3 { font-size: var(--sbc-t-h3); }
h4 { font-size: var(--sbc-t-h4); }

p { margin: 0 0 1.1em; overflow-wrap: break-word; }
a { color: var(--sbc-maroon); text-decoration: none; }
a:hover { color: var(--sbc-gold); }
img { max-width: 100%; height: auto; display: block; }

.sbc-wrap { max-width: var(--sbc-max); margin: 0 auto; padding: 0 var(--sbc-gutter); }
.sbc-narrow { max-width: var(--sbc-narrow); margin: 0 auto; }
.sbc-center { text-align: center; }

/* Shared measures, replacing ten hand-written inline max-widths that ranged from
   400px to 540px across seven templates. */
.sbc-lede { max-width: var(--sbc-measure-lede); margin-left: auto; margin-right: auto; }
/* The narrow variant is only ever the one line above a CTA button. All six of
   the inline versions it replaces set a 1.6rem gap to the button rather than
   the paragraph default, so that gap is kept here rather than lost. */
.sbc-lede--tight {
  max-width: var(--sbc-measure-lede-tight);
  margin-bottom: var(--sbc-space-sm);
}

/* Grid and flex children default to min-width:auto, which lets a wide child
   (a long word, an image) blow the track out past the viewport. */
.sbc-grid > *, .sbc-steps > *, .sbc-features > * { min-width: 0; }

.sbc-eyebrow {
  font-size: var(--sbc-t-eyebrow);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sbc-gold);
  margin-bottom: 1rem;
  font-weight: 600;
}

.sbc-section { padding: var(--sbc-section-y) 0; }
.sbc-section--tight { padding: var(--sbc-section-y-tight) 0; }
/* A section's last child should not push its own bottom margin into the
   section's padding — that stacking is what produced the dead bands. */
.sbc-section > .sbc-wrap > *:last-child,
.sbc-page-hero > .sbc-wrap > *:last-child { margin-bottom: 0; }
/* Band heading plus its supporting line. These bands previously carried only an
   eyebrow, which left the homepage outline as h1 followed by h3s with no h2
   between them — the same defect already fixed on the About page. */
.sbc-section-intro { margin-bottom: var(--sbc-space-md); }
.sbc-section-intro > *:last-child { margin-bottom: 0; }

.sbc-blush { background: var(--sbc-blush); }
.sbc-maroon-band { background: var(--sbc-charcoal); }
.sbc-maroon-band h2, .sbc-maroon-band h3 { color: var(--sbc-ivory); }
.sbc-maroon-band p { color: #B7B0A8; }

/* ---------------------------------------------
   3. Buttons
--------------------------------------------- */
.sbc-btn {
  display: inline-block;
  font-family: var(--sbc-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 14px 30px;
  border-radius: var(--sbc-radius);
  background: var(--sbc-maroon);
  color: var(--sbc-ivory);
  border: 1px solid var(--sbc-maroon);
  transition: background .2s ease, color .2s ease;
  cursor: pointer;
}
.sbc-btn:hover { background: var(--sbc-maroon-dark); color: var(--sbc-ivory); }

.sbc-btn--ghost {
  background: transparent;
  color: var(--sbc-maroon);
  border: 1px solid var(--sbc-gold);
}
.sbc-btn--ghost:hover { background: var(--sbc-gold); color: #fff; }

.sbc-link-arrow {
  font-size: .95rem;
  color: var(--sbc-maroon);
  border-bottom: 1px solid var(--sbc-gold);
  padding-bottom: 2px;
}

/* ---------------------------------------------
   4. Header
--------------------------------------------- */
.sbc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sbc-ivory);
  border-bottom: 1px solid var(--sbc-hairline);
}
.sbc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  /* 38px logo + 20px padding each side; box-sizing is border-box globally */
  min-height: 78px;
  max-width: var(--sbc-max);
  margin: 0 auto;
}
.sbc-logo { display: inline-flex; align-items: center; flex: 0 0 auto; overflow: visible; }
.sbc-logo img, .sbc-logo svg { max-height: 38px; width: auto; display: block; }
.sbc-logo .custom-logo { max-height: 38px; width: auto; }
.sbc-header__inner > .sbc-nav { margin-left: auto; }
.sbc-logo__text {
  font-family: var(--sbc-serif);
  font-size: 1.4rem;
  letter-spacing: 1px;
  color: var(--sbc-maroon);
}
.sbc-logo__text span { color: var(--sbc-gold); }

.sbc-nav ul {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Dropdown submenus --- */
.sbc-nav li { position: relative; }

.sbc-nav .sub-menu,
.sbc-nav .children {
  display: block;
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 230px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 10px 0;
  margin: 0;
  background: var(--sbc-ivory-light);
  border: 1px solid var(--sbc-hairline);
  border-radius: var(--sbc-radius);
  box-shadow: 0 10px 26px rgba(36, 28, 26, .09);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 120;
}

.sbc-nav li:hover > .sub-menu,
.sbc-nav li:focus-within > .sub-menu,
.sbc-nav li:hover > .children,
.sbc-nav li:focus-within > .children {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sbc-nav .sub-menu li,
.sbc-nav .children li { width: 100%; }

.sbc-nav .sub-menu a,
.sbc-nav .children a {
  display: block;
  padding: 9px 20px;
  font-size: .9rem;
  color: var(--sbc-body);
  white-space: nowrap;
  border-bottom: 0;
}
.sbc-nav .sub-menu a:hover,
.sbc-nav .children a:hover {
  background: var(--sbc-blush);
  color: var(--sbc-maroon);
  border-bottom: 0;
  padding-bottom: 9px;
}

/* Parent item gets a small caret */
.sbc-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 7px;
  vertical-align: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
}
.sbc-nav a {
  font-size: .78rem;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--sbc-body);
}
.sbc-nav a:hover,
.sbc-nav .current-menu-item > a {
  color: var(--sbc-maroon);
  border-bottom: 1px solid var(--sbc-gold);
  padding-bottom: 2px;
}
.sbc-nav .sbc-nav-cta > a {
  background: var(--sbc-maroon);
  color: var(--sbc-ivory);
  padding: 9px 18px;
  border-radius: var(--sbc-radius);
  border-bottom: 0;
}
.sbc-nav .sbc-nav-cta > a:hover { background: var(--sbc-maroon-dark); border-bottom: 0; }

.sbc-burger {
  display: none;
  background: none;
  border: 0;
  font-size: 1.5rem;
  color: var(--sbc-maroon);
  cursor: pointer;
  padding: 4px 8px;
}


/* --- Dropdown submenus --- */
.sbc-nav li { position: relative; }

.sbc-nav .sub-menu,
.sbc-nav .children {
  display: block;
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 230px;
  padding: 12px 0;
  margin: 0;
  background: var(--sbc-ivory-light);
  border: 1px solid var(--sbc-hairline);
  box-shadow: 0 12px 30px rgba(28, 25, 23, .07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 120;
}
.sbc-nav li:hover > .sub-menu,
.sbc-nav li:focus-within > .sub-menu,
.sbc-nav li:hover > .children,
.sbc-nav li:focus-within > .children {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.sbc-nav .sub-menu li, .sbc-nav .children li { width: 100%; }
.sbc-nav .sub-menu a, .sbc-nav .children a {
  display: block;
  padding: 10px 22px;
  font-size: .74rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sbc-body);
  white-space: nowrap;
  border-bottom: 0;
}
.sbc-nav .sub-menu a:hover, .sbc-nav .children a:hover {
  background: var(--sbc-blush);
  color: var(--sbc-maroon);
  border-bottom: 0;
}
.sbc-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 7px;
  vertical-align: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
}

/* --- Wedding page --- */
.sbc-wed-meta {
  display: grid;
  gap: 18px 40px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: var(--sbc-space-md) 0;
  border-top: 1px solid var(--sbc-hairline);
  border-bottom: 1px solid var(--sbc-hairline);
}
.sbc-wed-meta dt {
  font-size: .68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sbc-gold);
  margin-bottom: 6px;
}
.sbc-wed-meta dd { margin: 0; font-size: .95rem; color: var(--sbc-charcoal); }

.sbc-gallery { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sbc-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; }
.sbc-gallery .sbc-tile__media { aspect-ratio: 3/4; }
.sbc-gallery--wide { grid-template-columns: 1fr; }
.sbc-credits { font-size: .85rem; color: var(--sbc-muted); }
.sbc-credits strong { color: var(--sbc-body); font-weight: 600; }

/* Wedding story body. Already inside .sbc-narrow, so this sets rhythm only — it
   is not a second container. The generic .sbc-content rules do not reach here. */
.sbc-wed-story h2 { font-size: var(--sbc-t-h3); margin: 1.9em 0 .55em; }
.sbc-wed-story h2:first-child { margin-top: 0; }
.sbc-wed-story ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.sbc-wed-story li { margin-bottom: .45em; }
.sbc-wed-story blockquote {
  border-left: 3px solid var(--sbc-gold);
  margin: 1.9em 0;
  padding-left: 1.3em;
  font-family: var(--sbc-serif);
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--sbc-charcoal);
}
.sbc-wed-story blockquote cite {
  display: block;
  margin-top: .8em;
  font-family: var(--sbc-sans);
  font-size: .75rem;
  font-style: normal;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sbc-muted);
}
/* The theme dequeues wp-block-library on the front end, so the gallery block
   carries no layout of its own — without these rules the images stack full
   width. Kept minimal and scoped rather than re-enqueuing the whole block CSS. */
.sbc-wed-story .wp-block-gallery { display: flex; flex-wrap: wrap; gap: 16px; margin: 2.2em 0; }
.sbc-wed-story .wp-block-gallery figure.wp-block-image { flex: 1 1 calc(50% - 8px); margin: 0; }
.sbc-wed-story .wp-block-gallery figure.wp-block-image img { width: 100%; height: auto; }

/* ---------------------------------------------
   5. Hero
--------------------------------------------- */
.sbc-hero {
  background: var(--sbc-ivory);
  padding: var(--sbc-space-2xl) var(--sbc-gutter) 0;
  text-align: center;
}
.sbc-hero h1 { margin-bottom: .4em; }
.sbc-hero__sub {
  font-size: 1.05rem;
  max-width: var(--sbc-measure-lede);
  margin: 0 auto 2rem;
}
.sbc-hero__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sbc-hero__media {
  /* Negative inline margins cancel .sbc-hero's horizontal padding so the image
     is full-bleed. Driven off --sbc-gutter so the two stay in step — they used
     to be hardcoded in two places and drifted apart at the mobile breakpoint. */
  margin: var(--sbc-space-xl) calc(-1 * var(--sbc-gutter)) 0;
  overflow: hidden;
}
.sbc-hero__media picture { display: block; }
.sbc-hero__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: cover;
  /* Set per image from the Customizer, because the right crop depends entirely
     on where the subject sits: the previous hero needed 88% to hold a couple at
     the foot of the frame, the current one needs roughly the middle. The custom
     property comes from the wrapper so it survives Imagify moving attributes
     off the <img> and onto a <picture>. */
  object-position: var(--sbc-hero-focal, center 55%);
}

/* Wedding page hero.
   The aspect-ratio is what makes the crop work: with height:auto the box has no
   fixed height, so object-fit has nothing to fit into and the image simply
   overflows and gets clipped from the top. Two of the three featured images are
   portraits, so that clipped the couples out of frame entirely. */
.sbc-wed-hero {
  width: 100%;
  overflow: hidden;
}
.sbc-wed-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 640px;
  object-fit: cover;
  object-position: var(--sbc-wed-focal, center 30%);
}

/* Page hero (interior pages).
   Horizontal padding lives on the .sbc-wrap inside, not here: every template
   using this class previously omitted the wrapper, so interior H1s were bounded
   only by the viewport — 1392px at 1440, 2512px at 2560. That produced a ~62
   character single line with no measure, and is why seven templates had grown
   their own inline max-width on the paragraph beneath. */
.sbc-page-hero {
  background: var(--sbc-ivory);
  padding: var(--sbc-space-2xl) 0 var(--sbc-space-lg);
  text-align: center;
  border-bottom: 1px solid var(--sbc-hairline);
}
.sbc-page-hero h1,
.sbc-hero h1 {
  max-width: var(--sbc-measure-display);
  margin-left: auto;
  margin-right: auto;
}

/* Interior hero followed immediately by a photograph — the wedding pages, and
   Enquire once an image is set. The hairline is dropped because the image is
   already the separator; a rule on top of a photograph reads as a mistake. */
.sbc-page-hero--media {
  padding-bottom: var(--sbc-space-md);
  border-bottom: 0;
}
/* .sbc-hero__media uses negative inline margins to cancel .sbc-hero's padding.
   .sbc-page-hero has none — that padding lives on the .sbc-wrap inside — so
   inheriting them here would push the image a full gutter past the viewport on
   each side and reintroduce exactly the horizontal overflow this pass removed.
   The top margin goes too: the section's own bottom padding already sets that
   gap, and the two would stack. */
.sbc-page-hero .sbc-hero__media {
  margin: 0;
}

/* Service page image slots.
   The aspect-ratio lives on the <figure>, not the <img>: Imagify's picture-tag
   mode wraps the image in a <picture> and lifts class and style off it, so any
   rule hung on the <img> itself would apply locally and vanish on the live
   site. The same reason the team photos and the wedding hero are built this
   way. Sized against .sbc-narrow so they line up with the body copy above. */
.sbc-svc-img {
  margin: 0;
  overflow: hidden;
  background: var(--sbc-placeholder);
}
.sbc-svc-img picture { display: block; width: 100%; height: 100%; }
.sbc-svc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* No margin of its own. The hero's bottom padding sits above it and
   .sbc-content's top padding sits below it; adding a third gap here is how the
   dead bands this pass removed got there in the first place. */
.sbc-svc-img--wide { aspect-ratio: 16 / 9; }
.sbc-svc-img--tall { aspect-ratio: 4 / 5; }

.sbc-svc-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sbc-space-sm);
  margin-bottom: var(--sbc-space-lg);
}
/* A pair with only one field filled renders one figure. Left at two columns it
   would sit in the left half with dead space beside it, so collapse to one. */
.sbc-svc-pair:has(> :only-child) { grid-template-columns: 1fr; }

/* ---------------------------------------------
   6. Grids & cards
--------------------------------------------- */
.sbc-grid { display: grid; gap: var(--sbc-space-sm); }
.sbc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sbc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.sbc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.sbc-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--sbc-hairline);
  border-radius: 0;
  padding: var(--sbc-space-sm) 0 0;
}
.sbc-card h3 { margin-bottom: .4em; }
.sbc-card p { font-size: .95rem; margin-bottom: .8em; }
.sbc-card__icon { font-size: 1.6rem; color: var(--sbc-gold); margin-bottom: 10px; }

/* Wedding / portfolio tiles */
.sbc-tile__media {
  aspect-ratio: 3 / 4;
  background: var(--sbc-placeholder);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sbc-muted);
  font-size: .85rem;
}
/* The flex parent would otherwise shrink a <picture> to its content and leave the
   img without a height to fill. */
.sbc-tile__media picture { display: block; width: 100%; height: 100%; }
/* --sbc-focal is set on the wrapper by whichever template needs an off-centre
   crop; it rides down as an inherited custom property so it survives Imagify
   lifting style off the <img>. */
.sbc-tile__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--sbc-focal, center); }
.sbc-tile__name { font-size: var(--sbc-t-h4); color: var(--sbc-charcoal); margin-top: 14px; font-weight: 500; font-family: var(--sbc-serif); }
.sbc-tile__meta { font-size: .72rem; color: var(--sbc-muted); letter-spacing: 1.6px; text-transform: uppercase; margin-top: 2px; }

/* Statement band */
.sbc-statement {
  font-family: var(--sbc-serif);
  font-size: var(--sbc-t-statement);
  line-height: 1.45;
  color: var(--sbc-charcoal);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
/* Body-size continuation of the statement. Setting the whole passage at
   statement size would make the band shout for six lines rather than one. */
.sbc-statement__support {
  max-width: var(--sbc-narrow);
  margin: var(--sbc-space-sm) auto 0;
  text-align: center;
}

/* ---------------------------------------------
   7. Feature list (service inclusions)
--------------------------------------------- */
.sbc-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sbc-features li { position: relative; padding-left: 28px; font-size: .95rem; line-height: 1.6; }
.sbc-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sbc-gold);
  font-weight: 700;
}

/* Numbered process steps */
.sbc-steps { counter-reset: step; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sbc-step { counter-increment: step; }
.sbc-step::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--sbc-gold);
  color: var(--sbc-gold);
  font-family: var(--sbc-serif);
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.sbc-step h3 { font-size: var(--sbc-t-h3); margin-bottom: .3em; }
.sbc-step p { font-size: .92rem; }

/* ---------------------------------------------
   8. Testimonial
--------------------------------------------- */
.sbc-testimonial { text-align: center; padding: 0 var(--sbc-gutter); }
.sbc-testimonial__stars { color: var(--sbc-gold); letter-spacing: 3px; margin-bottom: 14px; }
.sbc-testimonial__quote {
  font-family: var(--sbc-serif);
  font-size: var(--sbc-t-quote);
  line-height: 1.45;
  color: var(--sbc-charcoal);
  max-width: 620px;
  margin: 0 auto .8rem;
}
.sbc-maroon-band .sbc-testimonial__quote { color: var(--sbc-ivory); }
.sbc-testimonial__by { font-size: .9rem; color: var(--sbc-muted); }
.sbc-maroon-band .sbc-testimonial__by { color: #B7B0A8; }

/* ---------------------------------------------
   9. Team
--------------------------------------------- */
/* Two columns, not six. The old minmax(150px) portrait grid was built for a
   name and a role; the bios are 2-3 paragraphs, which at 150px wide gives an
   unreadable measure. Each member is now a media object: circle left, text
   right, with the text column landing around 60-70 characters. */
.sbc-team {
  display: grid;
  gap: 42px 38px;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  margin-top: var(--sbc-space-md);
}
.sbc-team__member {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  align-items: start;
  text-align: left;
}
.sbc-team__photo {
  width: 120px; height: 120px;
  border-radius: 50%;
  margin: 0;
  /* Placeholder rather than blush: the section sits on ivory now, and a blush
     circle on ivory is almost invisible when a member has no photo yet. */
  background: var(--sbc-placeholder);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sbc-serif);
  font-size: 2rem;
  color: var(--sbc-maroon);
  overflow: hidden;
}
/* Imagify's picture-tag mode may wrap the <img> in a <picture>. Without this the
   inline wrapper breaks the img's height:100% and the circle collapses. */
.sbc-team__photo picture { display: block; width: 100%; height: 100%; }
/* The headshots are full-length portraits, so a centred crop lands on the chest.
   --sbc-focal is set per member on the .sbc-team__photo wrapper by the template;
   the fallback here is what applies when no focal point has been chosen. It must
   stay in sync with SBC_TEAM_FOCAL_DEFAULT in functions.php. */
.sbc-team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sbc-focal, center 25%);
}
.sbc-team__name { font-size: .98rem; color: var(--sbc-charcoal); font-weight: 600; }
/* Maroon, not the usual gold accent. Gold (#B08D3F) on ivory is only about
   3:1 — fine for the decorative eyebrows, too weak for a .85rem text label.
   Maroon reads at roughly 10:1 and stays on-brand. */
.sbc-team__role { font-size: .85rem; color: var(--sbc-maroon); }
.sbc-team__bio { margin-top: .6rem; }
.sbc-team__bio p { font-size: .9rem; line-height: 1.7; margin: 0 0 .7rem; }
.sbc-team__bio p:last-child { margin-bottom: 0; }

/* ---------------------------------------------
   10. Content (blog / generic pages)
--------------------------------------------- */
.sbc-content { max-width: var(--sbc-narrow); margin: 0 auto; padding: var(--sbc-space-lg) var(--sbc-gutter); }
.sbc-content h2 { margin-top: 1.6em; }
.sbc-content ul, .sbc-content ol { padding-left: 1.3em; }
.sbc-content blockquote {
  border-left: 3px solid var(--sbc-gold);
  margin: 1.5em 0;
  padding-left: 1.2em;
  font-family: var(--sbc-serif);
  font-size: 1.25rem;
  color: var(--sbc-charcoal);
}
.sbc-post-meta { font-size: .85rem; color: var(--sbc-muted); margin-bottom: 1.5rem; }

/* Journal index */
.sbc-post-card { border-bottom: 1px solid var(--sbc-hairline); padding: var(--sbc-space-sm) 0; }
.sbc-post-card:last-child { border-bottom: 0; }
/* Journal card titles are h2 for document outline reasons, but they are list
   items, not section headings — they take the h3 step so the page's real h1
   still reads as the largest thing on it. */
.sbc-post-card h2 { font-size: var(--sbc-t-h3); margin-bottom: .3em; }

/* ---------------------------------------------
   11. Forms
--------------------------------------------- */
.sbc-form label { display: block; font-size: .9rem; margin-bottom: 6px; color: var(--sbc-charcoal); font-weight: 600; }
.sbc-form input, .sbc-form select, .sbc-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sbc-hairline);
  border-radius: var(--sbc-radius);
  font-family: var(--sbc-sans);
  font-size: .95rem;
  background: #fff;
  margin-bottom: 18px;
  color: var(--sbc-charcoal);
}
.sbc-form input:focus, .sbc-form textarea:focus, .sbc-form select:focus {
  outline: 2px solid var(--sbc-gold);
  outline-offset: 1px;
}

/* --- WPForms (Enquire page) ---
   WPForms ships its own stylesheet and writes every rule at
   `div.wpforms-container-full .wpforms-form ...`. That is one ID-less but
   three-part selector with an element qualifier, so a bare `.wpforms-submit`
   here would lose. These selectors deliberately mirror the plugin's shape
   rather than reaching for !important — if WPForms ever drops the -full suffix
   the styling falls back to plugin defaults instead of leaving `!important`
   rules fighting whatever replaces them.

   Every value comes from a brand token. The plugin's defaults were a #066AAB
   blue button and an #E0FFC7 green confirmation, neither of which appears
   anywhere else on this site. */

/* The plugin's own 24px top margin stacked on top of .sbc-content's padding,
   which is part of what made the Enquire page's headline-to-form gap the widest
   on the site. The section padding owns that space now. */
.sbc-content > .wpforms-container,
.sbc-content > .wpforms-container-full {
  margin-top: 0;
}

/* Re-point the plugin's own custom properties rather than out-specifying it.

   WPForms' modern renderer emits these on :root from the form's builder settings
   (#066AAB blue, #FFFFFF text, 3px radius, fixed 41px height) and then colours
   the button through a rule carrying `:not(:hover):not(:active)`. That pseudo-
   class pair pushes its specificity above the plain rule below, so the maroon
   there only ever took effect on hover and the button sat blue at rest — which
   is precisely the defect a file-level read misses and a rendered page shows.

   Setting the variables on the container instead of :root wins without a
   specificity contest at all: both declarations reach the button by inheritance,
   and the nearer ancestor supplies the value regardless of source order. The
   plugin's own rules then paint in brand colours of their own accord.

   `-alt` is set alongside the base because the plugin reads
   `var(--…-alt, var(--…))` and prefers it when defined. */
div.wpforms-container,
div.wpforms-container-full {
  --wpforms-button-background-color: var(--sbc-maroon);
  --wpforms-button-background-color-alt: var(--sbc-maroon);
  --wpforms-button-text-color: var(--sbc-ivory);
  --wpforms-button-border-color: var(--sbc-maroon);
  --wpforms-button-border-style: solid;
  --wpforms-button-border-size: 1px;
  --wpforms-button-border-radius: var(--sbc-radius);
  --wpforms-button-size-height: auto;
  --wpforms-button-size-font-size: .8rem;
  --wpforms-button-size-padding-h: 30px;
}

div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container .wpforms-form button[type=submit] {
  font-family: var(--sbc-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 14px 30px;
  height: auto;              /* the plugin sets a fixed 41px, which crops the caps */
  border-radius: var(--sbc-radius);
  background: var(--sbc-maroon);
  color: var(--sbc-ivory);
  border: 1px solid var(--sbc-maroon);
  transition: background .2s ease, color .2s ease;
  cursor: pointer;
}

/* Same two-step as .sbc-btn and the nav Enquire button: darken, don't shift. */
div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form button[type=submit]:active,
div.wpforms-container .wpforms-form button[type=submit]:hover,
div.wpforms-container .wpforms-form button[type=submit]:active {
  background: var(--sbc-maroon-dark);
  border-color: var(--sbc-maroon-dark);
  color: var(--sbc-ivory);
}

/* WPForms sets `outline: none` on its submit button. Putting the ring back is
   not optional — it is the only focus indicator a keyboard user gets, and the
   button is maroon on ivory so a maroon ring would be invisible against it.
   Gold, offset clear of the border, matches the field focus above. */
div.wpforms-container-full .wpforms-form button[type=submit]:focus,
div.wpforms-container .wpforms-form button[type=submit]:focus {
  outline: 2px solid var(--sbc-gold);
  outline-offset: 2px;
}
div.wpforms-container-full .wpforms-form button[type=submit]:focus:not(:focus-visible),
div.wpforms-container .wpforms-form button[type=submit]:focus:not(:focus-visible) {
  outline: none;  /* mouse click shouldn't leave a ring behind */
}

/* Confirmation message.
   Stone panel, gold hairline, charcoal text — the same palette as the blush
   bands. Not a tinted green: the plugin's success colour is replaced outright,
   per the brief.

   There are two render paths and both have to be covered. The plugin styles
   them in one rule:

     div.wpforms-container-full .wpforms-confirmation-container-full,
     div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message)
       { background:#e0ffc7; border:1px solid #b4d39b }

   The earlier version here matched the second of those but opened with a bare
   `div.wpforms-confirmation-container-full`, one class short of the first. This
   form submits over AJAX, so the visible path happened to be the one that won
   and the green would have survived only on the non-AJAX fallback — a latent
   fault rather than an obvious one. The container class is included now so both
   paths are matched at equal specificity, and the theme stylesheet is enqueued
   after the plugin's, so equal specificity resolves our way.

   `color` and `padding` matter for the same reason: the plugin sets #333 and
   15px on that same two-class selector, so they need the matching shape too. */
div.wpforms-container-full .wpforms-confirmation-container-full,
div.wpforms-container .wpforms-confirmation-container,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
  background: var(--sbc-blush);
  border: 1px solid var(--sbc-gold);
  border-radius: var(--sbc-radius);
  color: var(--sbc-charcoal);
  padding: var(--sbc-space-sm);
}
div.wpforms-container-full .wpforms-confirmation-container-full p,
div.wpforms-container .wpforms-confirmation-container p,
div[submit-success] > .wpforms-confirmation-container-full p {
  color: var(--sbc-charcoal);
}
div.wpforms-container-full .wpforms-confirmation-container-full p:last-of-type,
div.wpforms-container .wpforms-confirmation-container p:last-of-type,
div[submit-success] > .wpforms-confirmation-container-full p:last-of-type {
  margin-bottom: 0;
}

/* ---------------------------------------------
   12. Footer
--------------------------------------------- */
.sbc-footer {
  background: var(--sbc-charcoal);
  color: #A69E95;
  padding: var(--sbc-space-lg) var(--sbc-gutter) var(--sbc-space-md);
}
.sbc-footer__inner {
  max-width: var(--sbc-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sbc-space-sm);
  justify-content: space-between;
  align-items: flex-start;
}
.sbc-footer a { color: #A69E95; }
.sbc-footer a:hover { color: var(--sbc-gold); }
.sbc-footer__brand {
  font-family: var(--sbc-serif);
  font-size: 1.3rem;
  color: var(--sbc-ivory);
  letter-spacing: 1px;
}
.sbc-footer__brand span { color: var(--sbc-gold); }
.sbc-footer__tag { font-size: .85rem; margin-top: 6px; }
.sbc-footer ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.sbc-footer li { margin-bottom: 6px; }
/* Social icons: colour and hover come from .sbc-footer a via currentColor */
.sbc-footer__social { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.sbc-footer__social a { display: inline-flex; }
.sbc-footer__social svg { width: 20px; height: 20px; display: block; }
.sbc-footer__bottom {
  max-width: var(--sbc-max);
  margin: 28px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}

/* ---------------------------------------------
   13. Accessibility
--------------------------------------------- */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  top: 10px; left: 10px;
  width: auto; height: auto;
  clip: auto;
  background: var(--sbc-maroon);
  color: #fff;
  padding: 10px 18px;
  z-index: 999;
  border-radius: var(--sbc-radius);
}

/* ---------------------------------------------
   14. Responsive
--------------------------------------------- */
@media (max-width: 860px) {
  /* Retune the scale, don't override the components.
     Previously this block restated .sbc-section's padding and .sbc-hero's
     padding and .sbc-hero__media's negative margin as three separate hardcoded
     values, which is how the gutter and the full-bleed offset drifted out of
     sync. Everything downstream of these tokens now moves together. */
  :root {
    --sbc-gutter: 20px;
    --sbc-section-y: var(--sbc-space-lg);        /* 96 -> 48 */
    --sbc-section-y-tight: var(--sbc-space-md);  /* 64 -> 32 */
  }

  .sbc-burger { display: block; }
  .sbc-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--sbc-ivory);
    border-bottom: 1px solid var(--sbc-hairline);
    padding: 14px 24px 22px;
  }
  .sbc-nav.is-open { display: block; }
  .sbc-nav ul { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sbc-header__inner { position: relative; }
  /* Only the parts the tokens can't express: the homepage hero loses its tall
     top padding, and the media gap tightens. Horizontal padding and the
     full-bleed offset both come from --sbc-gutter above. */
  .sbc-hero { padding-top: var(--sbc-space-xl); padding-bottom: var(--sbc-space-xl); }
  .sbc-hero__media { margin-top: var(--sbc-space-lg); }
  .sbc-hero__img { max-height: 56vh; }
  .sbc-page-hero { padding: var(--sbc-space-xl) 0 var(--sbc-space-md); }

  /* The 430px minimum track would overflow a 360px phone — auto-fit can't shrink
     a column below its minmax() floor. Force one column, and stack the circle
     above the text so the bio keeps the full width for a readable measure. */
  .sbc-team { grid-template-columns: 1fr; gap: 36px; }
  .sbc-team__member {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }
  .sbc-team__photo { width: 108px; height: 108px; }
  .sbc-team__text { text-align: center; }
  .sbc-team__bio { text-align: left; }

  /* Two-up gallery would leave each photo around 150px wide on a phone */
  .sbc-wed-story .wp-block-gallery figure.wp-block-image { flex: 1 1 100%; }

  /* Service-page pair: two 4:5 portraits side by side on a 360px screen is
     ~158px each. Stack them. This also covers browsers without :has(), which
     is the only other thing collapsing that grid. */
  .sbc-svc-pair { grid-template-columns: 1fr; }

  /* 16:7 across a 360px screen is a 157px letterbox — too thin to read as a hero */
  .sbc-wed-hero img { aspect-ratio: 4 / 3; }

  /* Submenus stack inline on mobile — no hover on touch devices */
  .sbc-nav .sub-menu,
  .sbc-nav .children {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    min-width: 0;
    padding: 8px 0 0 14px;
    border-left: 1px solid var(--sbc-hairline);
    margin-top: 10px;
  }
  .sbc-nav .sub-menu a,
  .sbc-nav .children a { padding: 6px 0; }
  .sbc-nav .sub-menu a:hover,
  .sbc-nav .children a:hover { background: transparent; }
  .sbc-nav .menu-item-has-children > a::after { display: none; }
}