/*
Theme Name: Salisbury Children's Choir
Theme URI: https://salisburychildrenschoir.com
Description: Child theme of Hello Elementor carrying the Salisbury Children's Choir brand: Cinzel display type, Montserrat body type, and the navy/cream/gold palette. Design direction from the 2026 site refresh; type direction from SCC's social-media brand guide.
Author: OmniTechPro
Author URI: https://omnitechpro.com
Template: hello-elementor
Version: 0.3.5
Text Domain: scc-child
*/

/* ---------------------------------------------------------------
   Brand tokens
   Palette from the 2026 design refresh; type from SCC social brand
   (Montserrat body, Cinzel titles). Gotham is a licensed font and is
   deliberately not used here.
   --------------------------------------------------------------- */
:root {
  --scc-navy:        #12294A; /* primary ink + brand */
  --scc-navy-soft:   #1E3A63; /* hover state on navy fills */
  --scc-cream:       #F7F4ED; /* page background */
  --scc-panel:       #E9E2D3; /* warm panel / image placeholder */
  --scc-border:      #E4DCCC;
  --scc-gold:        #E0B356; /* bright accent, decorative only */
  --scc-gold-deep:   #A97C21; /* accent that passes contrast on cream */
  --scc-body:        #3C4759; /* body copy, softer than pure navy */

  --scc-font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --scc-font-display: 'Cinzel', Georgia, 'Times New Roman', serif;

  --scc-max:      1240px;
  --scc-gutter:   36px;
  --scc-radius:   4px;
}

/* ---------------------------------------------------------------
   Base
   --------------------------------------------------------------- */
body {
  background: var(--scc-cream);
  color: var(--scc-body);
  font-family: var(--scc-font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--scc-font-display);
  color: var(--scc-navy);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(38px, 5.2vw, 64px); }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
h3 { font-size: clamp(21px, 2.1vw, 26px); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--scc-navy); text-decoration: none; }
a:hover, a:focus { color: var(--scc-gold-deep); }

/* Keyboard focus must stay visible: Hello Elementor does not ship one
   and Elementor widgets frequently strip it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--scc-gold-deep);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Eyebrow label — the small caps kicker above section headings
   --------------------------------------------------------------- */
.scc-eyebrow {
  display: inline-block;
  font-family: var(--scc-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--scc-gold-deep);
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.scc-btn,
.elementor-button {
  font-family: var(--scc-font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--scc-radius);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.scc-btn {
  display: inline-block;
  padding: 15px 30px;
  background: var(--scc-navy);
  color: var(--scc-cream);
  border: 1px solid var(--scc-navy);
}
.scc-btn:hover, .scc-btn:focus { background: var(--scc-navy-soft); color: #fff; }

.scc-btn--ghost {
  background: transparent;
  color: var(--scc-navy);
  border-color: var(--scc-border);
}
.scc-btn--ghost:hover, .scc-btn--ghost:focus {
  background: var(--scc-panel);
  color: var(--scc-navy);
  border-color: var(--scc-gold-deep);
}

/* ---------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------- */
.scc-wrap {
  max-width: var(--scc-max);
  margin: 0 auto;
  padding-inline: var(--scc-gutter);
}

.scc-section { padding: 84px 0; }
.scc-section--tint { background: var(--scc-panel); }
.scc-section--navy { background: var(--scc-navy); color: #E8E3D8; }
.scc-section--navy h1,
.scc-section--navy h2,
.scc-section--navy h3 { color: var(--scc-cream); }
.scc-section--navy .scc-eyebrow { color: var(--scc-gold); }
.scc-section--navy a { color: var(--scc-gold); }

.scc-rule {
  border: 0;
  border-top: 1px solid var(--scc-border);
  margin: 0;
}

/* ---------------------------------------------------------------
   Site header / footer (Hello Elementor markup)
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 244, 237, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--scc-border);
}

.site-header .site-navigation ul li a {
  font-family: var(--scc-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--scc-navy);
}
.site-header .site-navigation ul li a:hover { color: var(--scc-gold-deep); }

.site-footer {
  background: var(--scc-navy);
  color: #C9D0DC;
}
.site-footer a { color: var(--scc-cream); }
.site-footer a:hover { color: var(--scc-gold); }

/* ---------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (max-width: 767px) {
  :root { --scc-gutter: 20px; }
  .scc-section { padding: 56px 0; }
}

/* ---------------------------------------------------------------
   Components used by the seeded page templates
   --------------------------------------------------------------- */
.scc-narrow { max-width: 820px; }
.scc-lead { font-size: 20px; line-height: 1.55; color: var(--scc-navy); }

.scc-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 0; }

/* Hero -------------------------------------------------------- */
.scc-hero { position: relative; background: var(--scc-navy); overflow: hidden; }
.scc-hero__media { position: absolute; inset: 0; }
.scc-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.scc-hero__body {
  position: relative;
  padding-block: 116px 96px;
  max-width: var(--scc-max);
  color: var(--scc-cream);
}
.scc-hero h1 { color: var(--scc-cream); max-width: 15ch; }
.scc-hero .scc-eyebrow { color: var(--scc-gold); }
.scc-hero .scc-lead { color: #DDE3EC; max-width: 58ch; }

.scc-nextup {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 44px;
  padding: 20px 26px;
  border: 1px solid rgba(224, 179, 86, .45);
  border-radius: var(--scc-radius);
  background: rgba(0, 0, 0, .25);
  font-size: 15px;
}
.scc-nextup strong { color: var(--scc-cream); font-size: 17px; }
.scc-nextup span { color: #C6CEDB; }
.scc-nextup a { color: var(--scc-gold); font-weight: 600; margin-top: 6px; }

/* Buttons on navy --------------------------------------------- */
.scc-btn--gold { background: var(--scc-gold); border-color: var(--scc-gold); color: var(--scc-navy); }
.scc-btn--gold:hover, .scc-btn--gold:focus { background: #EFC873; color: var(--scc-navy); }
.scc-btn--onnavy { background: transparent; border-color: rgba(247,244,237,.5); color: var(--scc-cream); }
.scc-btn--onnavy:hover, .scc-btn--onnavy:focus { background: rgba(247,244,237,.12); color: #fff; }

/* Two-column split -------------------------------------------- */
.scc-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
.scc-figs { display: grid; gap: 18px; }
.scc-figs img { width: 100%; height: auto; border-radius: var(--scc-radius); display: block; }

/* Stat chips --------------------------------------------------- */
.scc-stats { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.scc-stats li {
  flex: 1 1 150px;
  padding: 16px 18px;
  background: var(--scc-panel);
  border-radius: var(--scc-radius);
}
.scc-stats strong { display: block; font-family: var(--scc-font-display); font-size: 22px; color: var(--scc-navy); }
.scc-stats span { font-size: 13px; color: var(--scc-body); }

/* Card grid ---------------------------------------------------- */
.scc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 34px; }
.scc-card {
  background: var(--scc-cream);
  border: 1px solid var(--scc-border);
  border-radius: var(--scc-radius);
  padding: 28px;
}
.scc-section--tint .scc-card { background: #fff; }
.scc-card__num { display: block; font-family: var(--scc-font-display); font-size: 13px; letter-spacing: .12em; color: var(--scc-gold-deep); margin-bottom: 10px; }
.scc-card p:last-child { margin-bottom: 0; }

/* Numbered steps ----------------------------------------------- */
.scc-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.scc-steps h3 { font-size: 19px; margin-bottom: 6px; }
.scc-steps p { margin: 0; }

/* Event list --------------------------------------------------- */
.scc-events { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--scc-border); }
.scc-events li { display: flex; gap: 28px; align-items: baseline; padding: 22px 4px; border-bottom: 1px solid var(--scc-border); }
.scc-events__date { flex: 0 0 90px; font-family: var(--scc-font-display); font-size: 19px; color: var(--scc-gold-deep); }
.scc-events__body { display: flex; flex-direction: column; gap: 3px; }
.scc-events__body strong { font-size: 19px; color: var(--scc-navy); }
.scc-events__body span { font-size: 15px; }

/* Link cards --------------------------------------------------- */
.scc-linkcards { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.scc-linkcards a {
  display: flex; flex-direction: column; gap: 5px;
  padding: 22px 24px;
  border: 1px solid var(--scc-border);
  border-radius: var(--scc-radius);
  background: var(--scc-panel);
  transition: border-color .18s ease;
}
.scc-linkcards a:hover, .scc-linkcards a:focus { border-color: var(--scc-gold-deep); }
.scc-linkcards strong { font-family: var(--scc-font-display); font-size: 19px; color: var(--scc-navy); }
.scc-linkcards span { font-size: 14px; color: var(--scc-body); }

/* Board + contact lists ---------------------------------------- */
.scc-board, .scc-contact { list-style: none; margin: 24px 0 0; padding: 0; }
.scc-board li, .scc-contact li {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline;
  padding: 13px 2px; border-bottom: 1px solid var(--scc-border);
}
.scc-board strong, .scc-contact strong { flex: 0 0 190px; color: var(--scc-navy); }
.scc-board span { font-size: 15px; }

/* Notes and unresolved content --------------------------------- */
.scc-note { margin-top: 22px; font-size: 15px; color: var(--scc-body); }
.scc-placeholder {
  margin-top: 14px;
  padding: 12px 16px;
  border-left: 3px solid var(--scc-gold);
  background: rgba(224, 179, 86, .12);
  font-size: 14px;
}

/* Bottom CTA band ---------------------------------------------- */
.scc-cta { display: flex; flex-wrap: wrap; gap: 30px 56px; align-items: center; justify-content: space-between; }
.scc-cta p { margin: 0; }
.scc-cta .scc-actions { margin: 0; }

/* Site logo sizing --------------------------------------------- */
.site-header .site-branding img,
.site-header .custom-logo { max-height: 54px; width: auto; }

@media (max-width: 900px) {
  .scc-split { grid-template-columns: 1fr; gap: 34px; }
  .scc-hero__body { padding-block: 80px 64px; }
  .scc-board strong, .scc-contact strong { flex: 1 0 100%; }
}

/* ---------------------------------------------------------------
   Button contrast on dark backgrounds
   .scc-section--navy a and .scc-hero a set a link colour that is more
   specific than .scc-btn--*, which repainted button labels the same
   colour as their own fill and made them unreadable. These rules win
   it back explicitly rather than by ordering.
   --------------------------------------------------------------- */
.scc-section--navy a.scc-btn--gold,
.scc-hero a.scc-btn--gold {
  background: var(--scc-gold);
  border-color: var(--scc-gold);
  color: var(--scc-navy);
}
.scc-section--navy a.scc-btn--gold:hover,
.scc-section--navy a.scc-btn--gold:focus,
.scc-hero a.scc-btn--gold:hover,
.scc-hero a.scc-btn--gold:focus { background: #EFC873; color: var(--scc-navy); }

.scc-section--navy a.scc-btn--onnavy,
.scc-hero a.scc-btn--onnavy {
  background: transparent;
  border-color: rgba(247, 244, 237, .55);
  color: var(--scc-cream);
}
.scc-section--navy a.scc-btn--onnavy:hover,
.scc-section--navy a.scc-btn--onnavy:focus,
.scc-hero a.scc-btn--onnavy:hover,
.scc-hero a.scc-btn--onnavy:focus { background: rgba(247,244,237,.14); color: #fff; }

/* The hero sits on a navy photo, so its primary button must not be navy. */
.scc-hero a.scc-btn {
  background: var(--scc-gold);
  border-color: var(--scc-gold);
  color: var(--scc-navy);
}
.scc-hero a.scc-btn:hover, .scc-hero a.scc-btn:focus { background: #EFC873; color: var(--scc-navy); }
.scc-hero a.scc-btn--ghost {
  background: transparent;
  border-color: rgba(247, 244, 237, .55);
  color: var(--scc-cream);
}
.scc-hero a.scc-btn--ghost:hover, .scc-hero a.scc-btn--ghost:focus { background: rgba(247,244,237,.14); color: #fff; }

/* Focus ring needs to be visible against navy too. */
.scc-section--navy a:focus-visible,
.scc-hero a:focus-visible { outline-color: var(--scc-gold); }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.site-footer { padding-top: 64px; margin-top: 0; }
.scc-footer {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.scc-footer__title { font-size: 26px; color: var(--scc-cream); margin-bottom: 12px; }
.scc-footer h3 {
  font-family: var(--scc-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--scc-gold);
  margin-bottom: 14px;
}
.scc-footer p { font-size: 14px; color: #A9B4C6; margin-bottom: .5em; }
.scc-footer ul { list-style: none; margin: 0; padding: 0; }
.scc-footer li { margin-bottom: 9px; font-size: 15px; }

.scc-footer__bar {
  border-top: 1px solid rgba(247, 244, 237, .16);
  padding-top: 22px;
  padding-bottom: 30px;
}
.scc-footer__bar p { margin: 0; font-size: 13px; color: #8E9AAE; }

@media (max-width: 800px) {
  .scc-footer { grid-template-columns: 1fr; gap: 30px; }
}

/* -------------------------------------------------------------------------
   Season gallery + full-bleed photo bands
   Added 2026-09-09 with the client's 2025-2026 photography.
   ------------------------------------------------------------------------- */

.scc-gallery-section { padding-bottom: 0; }

.scc-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 30px;
}

.scc-gallery__item {
  margin: 0;
  overflow: hidden;
  background: var(--scc-panel);
  border-radius: var(--scc-radius);
}

/* The two wide frames span the row; the rest sit two-up beneath them. */
.scc-gallery__item--wide { grid-column: span 4; }

/* Heights are clamped rather than set by aspect-ratio: the gallery runs
   edge to edge, so a ratio-driven height grew to ~975px on a 2560px display. */
.scc-gallery__item img {
  display: block;
  width: 100%;
  height: clamp(190px, 21vw, 330px);
  object-fit: cover;
  transition: transform .5s ease;
}

.scc-gallery__item--wide img { height: clamp(240px, 30vw, 520px); }

/* Respect a reduced-motion preference: no zoom on hover. */
@media (prefers-reduced-motion: no-preference) {
  .scc-gallery__item:hover img { transform: scale(1.03); }
}

/* A single full-width photo used to close a section. */
.scc-band {
  margin: 46px 0 0;
  overflow: hidden;
  background: var(--scc-panel);
}

.scc-band img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  object-position: center 40%;
}

@media (max-width: 900px) {
  .scc-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .scc-gallery__item--wide { grid-column: span 2; }
}

@media (max-width: 560px) {
  .scc-gallery { grid-template-columns: 1fr; }
  .scc-gallery__item--wide { grid-column: span 1; }
  .scc-band img { max-height: 300px; }
}

/* -------------------------------------------------------------------------
   Full-bleed layout fix
   Hello Elementor caps main.site-main at the Elementor kit content width
   (1140px), which boxed every scc-section inside cream margins on anything
   wider than a laptop. Our sections manage their own width through .scc-wrap,
   so the cap on the outer container is removed rather than raised.
   ------------------------------------------------------------------------- */
/* Hello Elementor's cap is `body:not([class*="elementor-page-"]) .site-main`,
   specificity (0,2,0). A plain `.site-main` or `main.site-main` override loses
   to it silently, so this matches their selector and adds the element to win
   on specificity rather than on load order. */
body:not([class*="elementor-page-"]) main.site-main {
  max-width: none;
  width: 100%;
}

/* -------------------------------------------------------------------------
   Hero legibility
   The hero photo is a blue-lit stage shot on a navy field. At .34 opacity it
   disappeared into the background colour. The photo now runs at full opacity
   with the darkening moved into a gradient scrim, so the image reads and the
   text keeps its contrast.
   ------------------------------------------------------------------------- */
.scc-hero__media img {
  opacity: 1;
  filter: saturate(1.06) brightness(1.06);
}

.scc-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 41, 74, .58) 0%, rgba(18, 41, 74, .74) 55%, rgba(18, 41, 74, .86) 100%);
}

/* -------------------------------------------------------------------------
   Header alignment + logo
   Added 2026-09-09 with the real horizontal logo lockup.
   ------------------------------------------------------------------------- */

/* Hello Elementor sizes .header-inner / .footer-inner to the kit content width
   (1140px), so the logo sat 50px right of where every heading below it starts.
   These match .scc-wrap instead. Prefixed with `body` to clear the theme's
   (0,2,0) selectors on specificity rather than on load order. */
body .site-header .header-inner,
body .site-footer .footer-inner {
  max-width: var(--scc-max);
  padding-inline: var(--scc-gutter);
}

/* The logo is a horizontal lockup (490x106) whose second line reads
   "CHILDREN'S CHOIR" in small caps. At 54px tall that line stopped being
   legible, so the cap is raised. */
.site-header .site-branding img,
.site-header .custom-logo {
  max-height: 64px;
  width: auto;
}

/* Both selectors are repeated here on purpose. The logo also matches
   `.site-header .site-branding img`, which is (0,2,1) because of the element
   selector, so a lone `.site-header .custom-logo` (0,2,0) loses to the rule
   above no matter that it comes later in the file. */
@media (max-width: 767px) {
  .site-header .site-branding img,
  .site-header .custom-logo { max-height: 46px; }
}

/* The site description is "Young voices, taken seriously.", which is also the
   home page H1 and is already implied by the wordmark. Stacking it under the
   logo made the sticky header 123px tall for a duplicate line. The option is
   left set in the database for feeds and meta; only the header rendering is
   dropped. Delete this rule to bring it back. */
.site-header .site-description { display: none; }

/* -------------------------------------------------------------------------
   Button label colours vs the Elementor global kit
   Fixed 2026-09-09 after Jeremy caught the primary button rendering as a solid
   navy block with no visible text on an iPhone.

   `set-kit.php` writes the brand navy into the Elementor kit as the link
   colour, and the kit emits `.elementor-kit-N a { color: #12294A }`. That is
   (0,2,0) and beats a bare `.scc-btn` (0,1,0), so every button label was
   repainted navy. On `.scc-btn`, whose fill is also navy, the label vanished.

   The earlier "buttons on navy" fix only covered `--gold` and `--onnavy` inside
   navy sections, so a plain `.scc-btn` on a normal section stayed broken. This
   block re-asserts every variant at (0,2,2), above the kit, and matches the kit
   by attribute rather than by its generated ID so it survives a kit rebuild or
   a move to production.
   ------------------------------------------------------------------------- */
/* Defaults on a light section, (0,2,2). */
body[class*="elementor-kit"] a.scc-btn {
  color: var(--scc-cream);
}
body[class*="elementor-kit"] a.scc-btn:hover,
body[class*="elementor-kit"] a.scc-btn:focus {
  color: #fff;
}

body[class*="elementor-kit"] a.scc-btn--ghost,
body[class*="elementor-kit"] a.scc-btn--ghost:hover,
body[class*="elementor-kit"] a.scc-btn--ghost:focus {
  color: var(--scc-navy);
}

body[class*="elementor-kit"] a.scc-btn--gold,
body[class*="elementor-kit"] a.scc-btn--gold:hover,
body[class*="elementor-kit"] a.scc-btn--gold:focus {
  color: var(--scc-navy);
}

body[class*="elementor-kit"] a.scc-btn--onnavy {
  color: var(--scc-cream);
}
body[class*="elementor-kit"] a.scc-btn--onnavy:hover,
body[class*="elementor-kit"] a.scc-btn--onnavy:focus {
  color: #fff;
}

/* Dark contexts, (0,3,2), so they stay above the light-section defaults above.
   Without these the same prefix that beats the kit would also beat
   `.scc-hero a.scc-btn` (0,2,1) and repaint the hero's gold button cream on
   gold. Both hero buttons regressed exactly that way before this was added. */
body[class*="elementor-kit"] .scc-hero a.scc-btn,
body[class*="elementor-kit"] .scc-hero a.scc-btn:hover,
body[class*="elementor-kit"] .scc-hero a.scc-btn:focus,
body[class*="elementor-kit"] .scc-section--navy a.scc-btn--gold,
body[class*="elementor-kit"] .scc-section--navy a.scc-btn--gold:hover,
body[class*="elementor-kit"] .scc-section--navy a.scc-btn--gold:focus {
  color: var(--scc-navy);
}

body[class*="elementor-kit"] .scc-hero a.scc-btn--ghost,
body[class*="elementor-kit"] .scc-hero a.scc-btn--onnavy,
body[class*="elementor-kit"] .scc-section--navy a.scc-btn--onnavy {
  color: var(--scc-cream);
}
body[class*="elementor-kit"] .scc-hero a.scc-btn--ghost:hover,
body[class*="elementor-kit"] .scc-hero a.scc-btn--ghost:focus,
body[class*="elementor-kit"] .scc-hero a.scc-btn--onnavy:hover,
body[class*="elementor-kit"] .scc-hero a.scc-btn--onnavy:focus,
body[class*="elementor-kit"] .scc-section--navy a.scc-btn--onnavy:hover,
body[class*="elementor-kit"] .scc-section--navy a.scc-btn--onnavy:focus {
  color: #fff;
}

/* Sponsorship tiers ------------------------------------------- */
/* Five tiers with uneven benefit counts. A stacked list beats the .scc-cards
   auto-fit grid here, which would put four across and orphan the fifth. */
.scc-tiers { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 18px; }
.scc-tier {
  background: #fff;
  border: 1px solid var(--scc-border);
  border-radius: var(--scc-radius);
  padding: 26px 28px;
}
.scc-section--tint .scc-tier { background: #fff; }
.scc-tier__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.scc-tier__name {
  font-family: var(--scc-font-display);
  font-size: 23px;
  line-height: 1.2;
  margin: 0;
  color: var(--scc-navy);
}
.scc-tier__price {
  font-family: var(--scc-font-display);
  font-size: 23px;
  line-height: 1.2;
  color: var(--scc-gold-deep);
}
.scc-tier__impact { margin: 10px 0 0; font-size: 15px; font-style: italic; color: var(--scc-body); }
.scc-tier__benefits { margin: 14px 0 0; padding-left: 20px; }
.scc-tier__benefits li { margin: 0 0 6px; }
.scc-tier__benefits li:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .scc-tier { padding: 22px 20px; }
  .scc-tier__name, .scc-tier__price { font-size: 20px; }
}

/* -------------------------------------------------------------------------
   Capped figure with caption

   .scc-figs img is width:100%, which upscales anything smaller than its
   container. Alice's choir photo is only 640px wide, so it needs a hard cap
   at its native width or it renders soft inside .scc-narrow (820px).
   Use .scc-fig--cap on the wrapper and set --scc-fig-max to the native width.
   ------------------------------------------------------------------------- */
.scc-fig--cap {
  margin: 34px auto 0;
  max-width: var(--scc-fig-max, 640px);
}
.scc-fig--cap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--scc-radius);
}
.scc-fig--cap figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--scc-body);
  text-align: center;
}

/* ---------------------------------------------------------------
   Suppress the Ultimate Social Media Icons floating badge
   ---------------------------------------------------------------
   2026-09-24: the plugin injects #sfsi_floater AFTER </footer> but
   styles it inline as `position:absolute; right:10px; top:2%;
   width:225px`. Absolute positioning against the page means it paints
   over the HEADER regardless of where the markup sits, and at 225px
   wide on a ~390px phone it landed squarely on the logo wordmark:
   "SALISBURY" rendered as "SALI(f)URY".

   The inline styles are written by the plugin on every request, so
   overriding position/width is a losing battle. Hiding the floater is
   the stable fix. Facebook is still reachable from the footer contact
   list and the Contact page, so nothing is lost.

   Proper fix when someone has wp-admin or a cPanel token: deactivate
   `ultimate-social-media-icons` entirely. It currently loads 5 CSS/JS
   files on every page for a badge we don't display.
   --------------------------------------------------------------- */
#sfsi_floater,
.sfsi_floater_position_top-right,
.sfsi_floater_position_top-left,
.sfsi_floater_position_center-right,
.sfsi_floater_position_center-left {
  display: none !important;
}