/*
Theme Name: Sound Radio
Theme URI: https://soundradio.live/
Description: Lightweight block theme for Sound Radio (WPAE/KPAE). Child of Twenty Twenty-Five. No page builder, no jQuery, self-hosted fonts.
Author: Sound Radio
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: soundradio
*/

/* Everything that can live in theme.json lives there. This file is only for
   the handful of things theme.json cannot express: sticky behaviour, the card
   treatment, and the table styling for the Program Guide. Kept deliberately
   small — the old site shipped ~200 KB of inline Divi CSS per page and that is
   the single biggest thing this rebuild is fixing. */

:root {
  --sr-radius: 16px;
  --sr-shadow: 0 1px 2px rgba(38, 33, 32, .04), 0 8px 24px rgba(38, 33, 32, .06);
  --sr-shadow-lift: 0 2px 4px rgba(38, 33, 32, .06), 0 14px 36px rgba(38, 33, 32, .10);
}

/* ---- sticky header ---------------------------------------------------- */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  /* Progressive: browsers without backdrop-filter still get an opaque bar. */
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
@supports not (backdrop-filter: blur(1px)) {
  .wp-site-blocks > header { background: #fff; }
}

/* Respect users who ask for less motion — the sticky bar and any transition
   should never fight an accessibility preference. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- cards ------------------------------------------------------------ */
.sr-card,
.tribe-events-calendar-list__event-row,
.wp-block-post-template > li {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--sr-radius);
  box-shadow: var(--sr-shadow);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  transition: box-shadow .18s ease, transform .18s ease;
}
.sr-card:hover,
.wp-block-post-template > li:hover { box-shadow: var(--sr-shadow-lift); transform: translateY(-2px); }

/* ---- hero ------------------------------------------------------------- */
.sr-hero {
  background:
    radial-gradient(1100px 420px at 12% -10%, var(--wp--preset--color--brand-soft) 0%, transparent 60%),
    radial-gradient(900px 400px at 92% 0%, var(--wp--preset--color--accent-soft) 0%, transparent 55%),
    var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

/* ---- program guide tables --------------------------------------------- */
.wp-block-table table { border-collapse: separate; border-spacing: 0; width: 100%; }
.wp-block-table td {
  padding: .7rem .95rem;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  vertical-align: top;
}
/* First column is the time: keep it narrow, tabular and unmissable. */
.wp-block-table td:first-child {
  width: 6.5rem;
  white-space: nowrap;
  font-family: var(--wp--preset--font-family--ui);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--brand-dark);
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--wp--preset--color--surface-alt); }
.wp-block-table figcaption { color: var(--wp--preset--color--ink-muted); font-size: .85rem; }

/* The guide is wide on a phone; let it scroll rather than squash. */
@media (max-width: 600px) {
  .wp-block-table { overflow-x: auto; }
  .wp-block-table td:first-child { width: 5rem; }
}

/* ---- donate form ------------------------------------------------------ */
.soundradio-donate { margin: 1.25rem 0; }
.soundradio-donate button {
  background: var(--wp--preset--color--accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .9rem 2rem;
  font-family: var(--wp--preset--font-family--ui);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
}
.soundradio-donate button:hover { background: var(--wp--preset--color--accent-dark); }

/* ---- focus visibility -------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Leave room for the fixed Listen Live bar so it never covers the footer. */
body.sr-has-player { padding-bottom: 76px; }

/* =======================================================================
   SUNDAY-MORNING BROADCAST
   -----------------------------------------------------------------------
   A ministry radio station broadcasting since 1985 to a mostly older, local
   congregation. The aesthetic that fits is not a startup landing page: it is
   warm printed paper — a church bulletin or the Sunday edition — with a
   serif voice, unhurried spacing and type large enough to read without
   squinting. Orange carries warmth, green carries the "on air" signal.

   Deliberate choices:
   - paper-cream ground, never stark #fff, so long passages of scripture
     read comfortably
   - a transmission-wave motif drawn in pure CSS (no image, no request)
   - a fine grain overlay for texture, at very low opacity
   - rules and small-caps labels borrowed from print programmes
   ======================================================================= */

:root{
  --sr-paper:#fdfbf7;
  --sr-paper-2:#f7f2ea;
  --sr-rule:#e3dbcf;
  --sr-orange:#aa6815;
  --sr-orange-deep:#8a5410;
  --sr-green:#0a691e;
  --sr-ink:#262120;
  --sr-ink-soft:#5d5654;
}

body{ background:var(--sr-paper); }

/* Fine grain: texture without an HTTP request. Low enough not to muddy text. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.wp-site-blocks{position:relative;z-index:2}

.wp-site-blocks > header{ background:rgba(253,251,247,.9); border-bottom:1px solid var(--sr-rule); }
@supports not (backdrop-filter:blur(1px)){ .wp-site-blocks > header{background:var(--sr-paper)} }

/* ---- hero ------------------------------------------------------------- */
.sr-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(3.5rem,9vw,7rem) clamp(1.25rem,5vw,3rem) clamp(3rem,7vw,5.5rem);
  background:
    radial-gradient(120% 90% at 8% -20%, #fff6e7 0%, transparent 58%),
    radial-gradient(90% 80% at 100% 0%, #edf6ef 0%, transparent 55%),
    var(--sr-paper);
  border-bottom:1px solid var(--sr-rule);
  text-align:center;
}
/* Transmission arcs radiating from the top-left, like a broadcast mast. */
.sr-hero__waves{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sr-hero__waves span{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  border:1px solid var(--sr-orange);border-radius:50%;opacity:.10;
  animation:sr-emit 7s ease-out infinite;
}
.sr-hero__waves span:nth-child(1){width:240px;height:240px;animation-delay:0s}
.sr-hero__waves span:nth-child(2){width:240px;height:240px;animation-delay:1.75s}
.sr-hero__waves span:nth-child(3){width:240px;height:240px;animation-delay:3.5s}
.sr-hero__waves span:nth-child(4){width:240px;height:240px;animation-delay:5.25s}
@keyframes sr-emit{ from{transform:scale(.35);opacity:.22} to{transform:scale(4.2);opacity:0} }
@media (prefers-reduced-motion:reduce){
  .sr-hero__waves span{animation:none;opacity:.08}
  .sr-hero__waves span:nth-child(2){transform:translate(-50%,-50%) scale(2)}
  .sr-hero__waves span:nth-child(3){transform:translate(-50%,-50%) scale(3)}
  .sr-hero__waves span:nth-child(4){display:none}
}

.sr-hero__inner{max-width:52rem;margin-inline:auto;position:relative}
.sr-hero__eyebrow{
  font-family:Montserrat,system-ui,sans-serif;font-weight:700;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sr-orange-deep);margin:0 0 1.15rem;
}
.sr-hero__eyebrow::before,.sr-hero__eyebrow::after{
  content:"";display:inline-block;width:clamp(16px,5vw,46px);height:1px;
  background:var(--sr-orange);vertical-align:middle;margin:0 .7rem;opacity:.55;
}
.sr-hero__title{
  font-family:Domine,Georgia,serif;font-weight:700;
  font-size:clamp(1.85rem,4.6vw,3.15rem);line-height:1.12;
  letter-spacing:-.015em;color:var(--sr-ink);margin:0 0 1.1rem;text-wrap:balance;
}
.sr-hero__lede{
  font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.6;color:var(--sr-ink-soft);
  max-width:38rem;margin:0 auto 2.1rem;text-wrap:pretty;
}
.sr-hero__actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin:0}

.sr-btn{
  /* width:100% is applied on phones; without border-box the horizontal padding
     is added ON TOP and the buttons overflow a 390px screen by ~50px. */
  box-sizing:border-box;
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:Montserrat,system-ui,sans-serif;font-weight:700;
  /* 1.18rem = 18.9px. White on #aa6815 is 4.46:1, which misses the 4.5:1 AA
     threshold for normal text but clears the 3:1 threshold for LARGE text
     (>=18.67px bold). Sizing up keeps the station's actual brand orange
     instead of darkening it, and bigger buttons suit an older audience. */
  font-size:1.18rem;line-height:1.2;
  letter-spacing:.02em;text-decoration:none;border-radius:999px;
  padding:.9rem 2.1rem;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.sr-btn--primary{background:var(--sr-orange);color:#fff;box-shadow:0 6px 18px rgba(170,104,21,.26)}
.sr-btn--primary:hover{background:var(--sr-orange-deep);transform:translateY(-2px);box-shadow:0 10px 26px rgba(170,104,21,.32)}
.sr-btn--ghost{background:transparent;color:var(--sr-green);border:2px solid var(--sr-green)}
.sr-btn--ghost:hover{background:var(--sr-green);color:#fff;transform:translateY(-2px)}

/* ---- statement block --------------------------------------------------- */
.sr-statement{ padding:clamp(2.75rem,6vw,4.5rem) 0; }
.sr-eyebrow-h{
  font-family:Montserrat,system-ui,sans-serif!important;
  font-size:.76rem!important;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sr-green);margin-bottom:.6rem;
}
.sr-eyebrow-h + p{margin-top:0}
.sr-lead{
  font-family:Domine,Georgia,serif;font-size:clamp(1.3rem,2.7vw,1.85rem);
  line-height:1.4;color:var(--sr-ink);text-wrap:balance;
}
.sr-statement > p:last-child{ padding-bottom:0 }
.sr-statement{position:relative}
.sr-statement::after{
  content:"";display:block;width:64px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--sr-orange),var(--sr-green));margin:2.4rem auto 0;
}

/* ---- the three cards --------------------------------------------------- */
.sr-cards{ gap:1.25rem!important; padding:0 0 clamp(2.5rem,6vw,4rem); }
.sr-card--link{
  height:100%;display:flex;flex-direction:column;
  background:var(--sr-paper);border:1px solid var(--sr-rule);border-radius:18px;
  padding:1.9rem 1.6rem;position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
/* A thin signal stripe that fills in on hover. */
.sr-card--link::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--sr-orange),var(--sr-green));
  transform:scaleY(0);transform-origin:top;transition:transform .25s ease;
}
.sr-card--link:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(38,33,32,.10);border-color:#d8cdbd}
.sr-card--link:hover::before{transform:scaleY(1)}
/* The photo the old homepage showed above each card. Fixed aspect so the three
   cards stay the same height whatever the source image dimensions are. */
.sr-card__media{
  margin:-1.9rem -1.6rem 1.3rem;overflow:hidden;
  border-bottom:1px solid var(--sr-rule);background:var(--sr-paper-2);
}
.sr-card__media img{
  display:block;width:100%;height:auto;aspect-ratio:365/230;object-fit:cover;
  transition:transform .4s ease;
}
.sr-card--link:hover .sr-card__media img{transform:scale(1.04)}
.sr-card__title{
  font-family:Domine,Georgia,serif;font-size:1.3rem;margin:0 0 .5rem;color:var(--sr-ink);
}
.sr-card__body{color:var(--sr-ink-soft);margin:0 0 1.1rem;flex:1 1 auto;font-size:1rem}
.sr-card__cta{margin:0}
.sr-card__cta a{
  font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--sr-orange-deep);text-decoration:none;
}
.sr-card__cta a::after{content:" \2192";transition:margin .16s ease}
.sr-card--link:hover .sr-card__cta a::after{margin-left:.25rem}

/* ---- Meet the Team ------------------------------------------------------
   Four people, four portraits of wildly different dimensions (311x419 up to
   1125x1620). A fixed 3:4 frame with object-fit:cover is what makes them read
   as a set instead of a ransom note. */
.sr-team-h{ margin-top:clamp(2.25rem,5vw,3.25rem); }
.sr-team{ gap:1.5rem!important; margin-bottom:clamp(2.25rem,5vw,3.25rem); }
.sr-team .wp-block-column{ text-align:center; }
.sr-team__photo{ margin:0 0 .9rem; }
.sr-team__photo img{
  display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  object-position:center top;border-radius:14px;
  border:1px solid var(--sr-rule);box-shadow:var(--sr-shadow);
}
/* Greg Sullivan's portrait is lost — see scripts/restore_images.py. The frame
   keeps the row aligned and the label makes the gap obviously a to-do rather
   than a broken image. */
.sr-team__nophoto{
  aspect-ratio:3/4;border:1px dashed var(--sr-rule);border-radius:14px;
  background:var(--sr-paper-2);color:var(--sr-ink-soft);
  display:flex;align-items:center;justify-content:center;
  margin:0 0 .9rem;font-size:.9rem;
}
.sr-team__name{
  font-family:Domine,Georgia,serif;font-size:1.15rem;margin:0 0 .2rem;color:var(--sr-ink);
}
.sr-team__role{
  font-family:Montserrat,system-ui,sans-serif;font-size:.82rem;line-height:1.45;
  letter-spacing:.04em;text-transform:uppercase;color:var(--sr-orange-deep);margin:0;
}
/* Two-up rather than a single tall stack on phones. */
@media (max-width:781px){
  .sr-team{ display:grid!important; grid-template-columns:1fr 1fr; }
  .sr-team .wp-block-column{ flex-basis:auto!important; }
}

/* ---- donations band ---------------------------------------------------- */
.sr-donate-band{
  background:var(--sr-paper-2);border:1px solid var(--sr-rule);border-radius:22px;
  padding:clamp(2rem,5vw,3.25rem);margin-bottom:clamp(2.5rem,6vw,4rem);
}
.sr-donate-band h2{font-family:Domine,Georgia,serif;margin-top:0}

/* ---- interior page headers --------------------------------------------- */
.wp-block-post-title{
  font-family:Domine,Georgia,serif;text-wrap:balance;
  padding-top:clamp(1.5rem,4vw,2.75rem);
}
.wp-block-post-title::after{
  content:"";display:block;width:52px;height:3px;border-radius:2px;margin-top:.9rem;
  background:linear-gradient(90deg,var(--sr-orange),var(--sr-green));
}

/* ---- events ------------------------------------------------------------ */
.tribe-events-calendar-list__event-title a{font-family:Domine,Georgia,serif;text-decoration:none}
.tribe-events-calendar-list__event-datetime{font-family:Montserrat,system-ui,sans-serif;
  font-size:.8rem;letter-spacing:.06em;color:var(--sr-orange-deep)}

/* ---- hero: logo + photographic wash ------------------------------------ */
.sr-hero__logo{
  display:block;margin:0 auto 1.6rem;height:auto;
  width:min(440px,74vw);
  /* The logo art is dark-on-transparent; a soft drop keeps it off the paper. */
  filter:drop-shadow(0 2px 10px rgba(38,33,32,.10));
}
/* Louisiana skyline behind everything, washed almost to texture so it adds
   depth and place without competing with the type. */
.sr-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:62%;z-index:-2;
  /* This photo is a 13%-opacity TEXTURE, not a picture anyone looks at, so it
     does not need to be sharp. The 1536px original was 234 KB and was the
     largest-contentful-paint on mobile (4.1 s). 1024px = 117 KB, and phones
     get the 768px at 70 KB. */
  background-image:url("/wp-content/uploads/2026/11/capitol-169137-scaled-1-1024x683.jpg");
  background-size:cover;background-position:center 62%;
  opacity:.13;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 55%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 55%,#000 100%);
}
.sr-hero{padding-bottom:clamp(3.5rem,8vw,6.5rem)}

/* ---- header logo sizing ------------------------------------------------ */
.wp-block-site-logo img{max-height:52px;width:auto}
@media (max-width:600px){ .wp-block-site-logo img{max-height:40px} }

/* ---- full-bleed hero ---------------------------------------------------
   The hero is emitted inside a core/html block, which sits in the
   constrained content column. Breaking it out to the viewport edges is what
   makes it read as a hero rather than a boxed banner. 100vw + the negative
   half-gutter is used instead of align-full because the block is raw HTML and
   has no alignment support. */
/* superseded by the viewport-anchored rule at the end of this file */
/* The grain overlay sits above a 100vw child on some engines; keep it behind. */
body::before{z-index:0}

/* Pull the first section up tight under the sticky header. */
.wp-site-blocks > main > :first-child{margin-block-start:0}

/* ---- header: logo, not the site name ----------------------------------- */
.wp-block-site-title{display:none}
.wp-block-site-logo{display:block}
.wp-block-site-logo img{max-height:46px;width:auto}

/* Nav: quieter, letterspaced, with an underline that grows on hover. */
.wp-block-navigation{font-family:Montserrat,system-ui,sans-serif;font-size:.86rem;font-weight:600}
.wp-block-navigation .wp-block-navigation-item__content{
  text-decoration:none;color:var(--sr-ink);position:relative;padding-block:.35rem;
}
.wp-block-navigation .wp-block-navigation-item__content::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--sr-orange);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after{transform:scaleX(1)}
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after{transform:scaleX(1);background:var(--sr-green)}

/* ---- 100vw without the scrollbar overhang ------------------------------
   100vw includes the scrollbar on desktop engines, so a full-bleed child is
   wider than the document and creates a horizontal scroll. Pin it to the
   actual scroll width instead. */
html{overflow-x:hidden}
/* superseded by the viewport-anchored rule at the end of this file */

/* ---- header ------------------------------------------------------------ */
.sr-header{padding-block:.7rem}

/* ---- footer ------------------------------------------------------------ */
.sr-footer{
  background:var(--sr-paper-2);border-top:1px solid var(--sr-rule);
  padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,5vw,3rem) 1.5rem;
  margin-top:clamp(3rem,8vw,5rem);
  font-size:.95rem;
}
.sr-footer__cols{gap:2rem}
.sr-footer__h{
  font-family:Montserrat,system-ui,sans-serif!important;font-size:.72rem!important;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sr-green);
  margin:0 0 .75rem;
}
.sr-footer p{margin:0 0 .65rem;color:var(--sr-ink-soft);line-height:1.75}
.sr-footer a{color:var(--sr-ink-soft);text-decoration:none}
.sr-footer a:hover{color:var(--sr-orange-deep);text-decoration:underline}
.sr-footer__tag{font-family:Domine,Georgia,serif;font-size:1.02rem;color:var(--sr-ink)!important;margin-top:.9rem}
.sr-footer__freq{font-family:Montserrat,system-ui,sans-serif;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sr-orange-deep)!important}
.sr-footer__legal{
  border-top:1px solid var(--sr-rule);margin-top:2rem!important;padding-top:1.25rem;
  font-size:.82rem;text-align:center;color:var(--sr-ink-soft)!important;
}
.sr-social{gap:.4rem}

/* ---- kill the gap above the hero + the last of the h-scroll ------------ */
body{overflow-x:clip}
.wp-site-blocks > main{margin-block-start:0!important}
.wp-site-blocks > main > .wp-block-group:first-child,
.wp-site-blocks > main > *:first-child{margin-block-start:0!important}
/* Twenty Twenty-Five gives the content wrapper a top spacer; the hero is its
   own full-bleed band and should sit flush under the sticky header. */
.wp-site-blocks > main > .entry-content > *:first-child,
.entry-content > .sr-hero:first-child{margin-block-start:0!important}
.entry-content{margin-block-start:0!important}

/* Twenty Twenty-Five's page wrapper carries 80px of top padding. On the front
   page the hero is its own full-bleed band and must sit flush under the sticky
   header; interior pages keep the padding, which they need. */
body.home .wp-site-blocks > main > .wp-block-group,
body.home main > .wp-block-group.alignfull,
body.home .entry-content > .sr-hero{padding-top:0!important;margin-top:0!important}
/* the hero keeps its OWN internal padding — only the wrapper's is removed */
body.home .sr-hero{padding-top:clamp(3rem,7vw,5.5rem)!important}

/* ---- homepage quick links ---------------------------------------------
   The old homepage ended with About Us / Events / Contact Us. The acceptance
   gate caught their absence as content loss, so they are back — as a proper
   row rather than the bare inline links they used to be. */
.sr-quicklinks{
  display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;
  padding:0 0 clamp(2.5rem,6vw,4rem);
}
.sr-quicklinks__item{
  font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:.82rem;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  color:var(--sr-ink);background:var(--sr-paper);
  border:1px solid var(--sr-rule);border-radius:999px;padding:.75rem 1.6rem;
  transition:border-color .16s ease,color .16s ease,transform .16s ease;
}
.sr-quicklinks__item:hover{border-color:var(--sr-orange);color:var(--sr-orange-deep);transform:translateY(-2px)}


/* ---- full-bleed hero, anchored to the VIEWPORT not the parent ----------
   The first attempt used `margin-inline: calc(50% - 50vw)`, where the 50% is
   half the PARENT's content box. That only lines up when the parent's padding
   happens to match; on a phone it does not, so the hero sat 20px off-centre
   and 473px wide inside a 430px screen - which is exactly the "not centred on
   mobile but fine on laptop" symptom.

   left:50% + translateX(-50%) is measured against the viewport, so it is
   correct at every width regardless of what the parent is doing. */
.sr-hero{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  max-width:100vw;
  margin-inline:0;
  padding-inline:clamp(1.25rem,5vw,3rem);
  box-sizing:border-box;
}
/* dvw excludes the classic scrollbar where supported */
@supports (width:100dvw){ .sr-hero{width:100dvw;max-width:100dvw} }

/* ---- phone refinements -------------------------------------------------- */
@media (max-width:640px){
  .sr-hero__logo{width:min(300px,78vw);margin-bottom:1.1rem}
  .sr-hero__eyebrow{font-size:.64rem;letter-spacing:.14em}
  .sr-hero__eyebrow::before,.sr-hero__eyebrow::after{width:14px;margin:0 .45rem}
  .sr-hero__title{font-size:clamp(1.5rem,6.2vw,2rem);line-height:1.18}
  .sr-hero__lede{font-size:1.02rem}
  .sr-hero__actions{flex-direction:column;align-items:stretch;gap:.65rem}
  .sr-btn{justify-content:center;width:100%;padding-block:1rem}
  .sr-cards{gap:1rem!important}
  .sr-statement{padding-inline:0}
  .sr-donate-band{border-radius:16px}
  .sr-quicklinks__item{flex:1 1 auto;text-align:center}
  /* the fixed player is 64px tall on a phone; keep it clear of the footer */
  body.sr-has-player{padding-bottom:84px}
}
@media (max-width:420px){
  .sr-hero{padding-inline:1rem}
  .sr-hero__title{font-size:clamp(1.35rem,6.6vw,1.75rem)}
}

/* ---- stacked cards must not overlap ------------------------------------
   `.sr-card--link{height:100%}` makes the three cards equal height in a row.
   Once WordPress stacks the columns on a phone, each column's height is no
   longer constrained and height:100% collapses the layout so the cards sit on
   top of one another - the "Learn more" of one card disappears behind the
   next. Height matching is only wanted when they are side by side. */
@media (max-width:781px){
  .sr-cards{display:flex;flex-direction:column;gap:1rem!important}
  .sr-cards > .wp-block-column{flex:0 0 auto;width:100%;margin:0}
  .sr-card--link{height:auto}
}


/* Right-size the hero texture per viewport (see note above). */
@media (max-width:820px){
  .sr-hero::after{
    background-image:url("/wp-content/uploads/2026/11/capitol-169137-scaled-1-768x512.jpg");
  }
}

/* Visually hidden but available to screen readers and to accessible-name
   computation. Used to make "Learn more" links descriptive without altering
   the visible wording, which must stay exactly as the old site had it. */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* contact details block */
.sr-contact{font-style:normal;margin:2rem 0 0;padding:1.5rem 1.75rem;
  background:var(--sr-paper-2);border:1px solid var(--sr-rule);border-radius:16px}
.sr-contact p{margin:0 0 .5rem}
.sr-contact p:last-child{margin-bottom:0}
.sr-form p{margin-bottom:1.1rem}
.sr-form label{font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:.84rem;
  letter-spacing:.04em;color:var(--sr-ink)}
.sr-form input[type=text],.sr-form input[type=email],.sr-form textarea{
  width:100%;box-sizing:border-box;margin-top:.35rem;padding:.8rem .9rem;
  border:1px solid var(--sr-rule);border-radius:10px;background:#fff;
  font-family:inherit;font-size:1rem;color:var(--sr-ink)}
.sr-form input:focus,.sr-form textarea:focus{outline:3px solid var(--sr-green);outline-offset:1px;border-color:var(--sr-green)}
.sr-form input[type=submit]{background:var(--sr-orange-deep);color:#fff;border:0;border-radius:999px;
  padding:.95rem 2.2rem;font-family:Montserrat,system-ui,sans-serif;font-weight:700;cursor:pointer}
.sr-form input[type=submit]:hover{background:#6f430d}

/* ---- Events pages: the injected shell + brand styling -------------------
   The Events Calendar bypasses the block template, so the header/footer are
   injected by the mu-plugin. They need the same layout the normal header gets
   from theme.json, plus the plugin's own default styling toned to the brand. */
.sr-events-shell > header{
  position:sticky;top:0;z-index:100;
  background:rgba(253,251,247,.92);backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--sr-rule);
}
/* Force the single-row layout the normal header gets from theme.json; the
   injected copy does not inherit those layout styles. */
.sr-events-shell > header > .wp-block-group{
  max-width:1180px;margin-inline:auto;padding:.7rem clamp(1.25rem,5vw,3rem);
}
.sr-events-shell > header > .wp-block-group > .wp-block-group{
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap;
  align-items:center;justify-content:space-between;gap:1.5rem;
}
.sr-events-shell > header .wp-block-site-logo{flex:0 0 auto;margin:0}
.sr-events-shell > header .wp-block-navigation{
  flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap;row-gap:.2rem;
}
@media (max-width:860px){
  .sr-events-shell > header > .wp-block-group > .wp-block-group{flex-wrap:wrap;justify-content:center}
  .sr-events-shell > header .wp-block-navigation{justify-content:center}
}
@supports not (backdrop-filter:blur(1px)){ .sr-events-shell > header{background:var(--sr-paper)} }

/* Give the events content the page gutters the block template would have. */
.tribe-events,
.tribe-common{max-width:1180px;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem)}
.tribe-events{padding-block:clamp(1.5rem,4vw,2.5rem)}

/* Brand the plugin's defaults: it ships Helvetica/blue, which looks like a
   different website bolted on. */
.tribe-common .tribe-common-h1,.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3,.tribe-common .tribe-common-h4,
.tribe-events-calendar-list__event-title,
.tribe-events-single-event-title{
  font-family:Domine,Georgia,serif!important;color:var(--sr-ink)!important;
}
.tribe-common a,.tribe-events a{color:var(--sr-orange-deep)}
.tribe-common a:hover,.tribe-events a:hover{color:var(--sr-green)}
.tribe-events-calendar-list__event-title a{text-decoration:none}
.tribe-events-calendar-list__event-title a:hover{text-decoration:underline}
/* Only the real submit buttons - NOT the List/Month/Day view tabs, which are
   links and turned into orange blobs when this selector was too broad. */
.tribe-events .tribe-events-c-search__button,
.tribe-common button.tribe-common-c-btn{
  background:var(--sr-orange)!important;border-radius:999px!important;color:#fff!important;
}
.tribe-events-c-view-selector__list-item-link,
.tribe-events-header__events-bar .tribe-common-c-btn-border{
  background:transparent!important;border-radius:0!important;color:var(--sr-ink)!important;
}
.tribe-events-calendar-list__event-row{
  background:var(--sr-paper);border:1px solid var(--sr-rule);border-radius:16px;
  padding:1.25rem;margin-bottom:1rem;
}
.tribe-events-calendar-list__event-date-tag-daynum{color:var(--sr-orange-deep)!important}
.tribe-events-calendar-list__month-separator,
.tribe-common .tribe-common-h6{font-family:Montserrat,system-ui,sans-serif!important;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sr-green)!important}