/* Styling for raw imported WordPress page/post content — plain tags with no
   classes (h1/h2/p/ul/img/a), scoped under .page-content so it never leaks
   into the hand-built homepage sections in styles.css.

   This is deliberately basic: these pages haven't had their real visual
   rebuild yet (see Modules/Content/app/Console/Commands/ImportWordPressContent.php),
   so the goal here is "reads cleanly", not "matches the new design exactly". */

.page-header{
  padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2rem);
  background: var(--stone);
  border-bottom: 1px solid var(--stone-2);
}
.page-header h1{
  font: 500 clamp(1.9rem, 1.4rem + 2vw, 3rem)/1.12 var(--display);
  letter-spacing: -.02em;
  color: var(--navy);
  max-width: 26ch;
  text-wrap: balance;
}

.page-content{
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  max-width: 72ch;
  margin-inline: auto;
}
.page-content > *{ margin-bottom: 1.35rem; }
.page-content > *:last-child{ margin-bottom: 0; }

.page-content h1,
.page-content h2,
.page-content h3{
  font-family: var(--display);
  color: var(--navy);
  letter-spacing: -.015em;
  line-height: 1.2;
  margin-top: 2rem;
}
.page-content h1{ font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); font-weight: 500; }
.page-content h2{ font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); font-weight: 500; }
.page-content h3{ font-size: 1.15rem; font-weight: 600; }

.page-content p{ color: var(--text-mid); line-height: 1.7; }
.page-content strong{ color: var(--navy); font-weight: 600; }
.page-content a{ color: var(--crimson); text-decoration: underline; text-underline-offset: .15em; }
.page-content a:hover{ color: var(--crimson-lt); }

.page-content ul,
.page-content ol{ padding-left: 1.4rem; color: var(--text-mid); }
.page-content ul{ list-style: disc; }
.page-content ol{ list-style: decimal; }
.page-content li + li{ margin-top: .4rem; }

.page-content img{
  max-width: 100%; height: auto; border-radius: 3px; display: block;
}

.page-content blockquote{
  border-left: 2px solid var(--crimson);
  background: var(--stone);
  padding: 1.1rem 1.4rem;
  font-style: italic;
  color: var(--navy);
}

/* ============================================================
   Donations module — form controls not covered by styles.css
   (that file is the hand-authored homepage design; these are
   generic enough to earn a place alongside it, not bolted on).
   ============================================================ */
.field-label{
  font: 500 .6875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mid);
}
.pill-group{ display: grid; gap: .6rem; }
.pill{
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  padding: .75rem 1rem; font: 500 .9375rem/1 var(--body); color: var(--navy);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.pill.is-active{ background: var(--navy); border-color: var(--navy); color: #fff; }
.pill:not(.is-active):hover{ border-color: var(--silver); }

.text-field{
  display: block; width: 100%; margin-top: .4rem;
  border: 1px solid var(--rule); border-radius: 3px;
  padding: .7rem .85rem; font: 400 .9375rem var(--body); color: var(--navy);
  background: var(--paper);
}
.text-field:focus{ outline: none; border-color: var(--navy); }
.currency-field{
  display: flex; align-items: center; gap: .3rem; margin-top: .4rem;
  border: 1px solid var(--rule); border-radius: 3px; padding: .7rem .85rem;
  background: var(--paper);
}
.currency-field:focus-within{ border-color: var(--navy); }
.currency-field span{ color: var(--text-mid); }
.currency-field input{
  border: 0; padding: 0; width: 6rem; font: 400 .9375rem var(--body); color: var(--navy);
}
.currency-field input:focus{ outline: none; }

.form-error{
  border: 1px solid var(--crimson); background: #FBEAEC; color: var(--crimson);
  border-radius: 3px; padding: .9rem 1.1rem; font-size: .9375rem;
}
.form-error ul{ list-style: disc; padding-left: 1.2rem; }

/* ============================================================
   Hub pages (who-we-are, what-we-do) and other hand-built
   Content templates — card grids matching styles.css's .give /
   .panel tile language.
   ============================================================ */
.tile-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 2rem;
}
.tile{
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--paper); border-top: 2px solid var(--navy);
  padding: 1.5rem 1.4rem; text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.tile:hover{
  transform: translateY(-4px); border-top-color: var(--crimson);
  box-shadow: 0 22px 40px -28px rgba(11,23,41,.4);
}
.tile:active{ transform: translateY(-1px) scale(.98); transition-duration: .12s; }
.tile__h{ font: 500 1.1rem/1.3 var(--display); color: var(--navy); letter-spacing: -.01em; }
.tile__p{ font-size: .875rem; line-height: 1.55; color: var(--text-mid); }
.tile__go{
  margin-top: auto; font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--crimson);
}

.photo-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .85rem; margin-top: 2rem;
}
.photo-grid figure{ overflow: hidden; border-radius: 3px; background: var(--stone); aspect-ratio: 4/3; }
.photo-grid img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.photo-grid a:hover img{ transform: scale(1.05); }

.directory-cta{
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--rule);
}

/* ============================================================
   Five Strategic Pillars — image cards (replaces the old tabbed
   explorer, whose two independently-sized columns left uneven
   whitespace once the pillar names got long).
   ============================================================ */
.pillars-grid{
  /* flex+wrap, not grid — see .person-grid's identical fix note. An odd
     item count (gallery.blade.php's 5 albums, home.blade.php's 5 pillars)
     otherwise strands the last row's item(s) against the left edge with
     empty grid cells beside them instead of centering the short row. */
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: 2.5rem;
}
.pillar-card{
  flex: 1 1 21rem; max-width: 26rem;
  display: flex; flex-direction: column;
  background: var(--paper); border-top: 2px solid var(--navy);
  overflow: hidden; text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.pillar-card:hover{
  transform: translateY(-4px); border-top-color: var(--crimson);
  box-shadow: 0 26px 48px -30px rgba(11,23,41,.4);
}
.pillar-card__media{ aspect-ratio: 16/10; overflow: hidden; background: var(--stone-2); }
.pillar-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.pillar-card__body{ padding: clamp(1.25rem, 2.5vw, 1.6rem); display: flex; flex-direction: column; flex: 1; }
.pillar-card__num{
  font: 600 .75rem var(--mono); color: var(--crimson); letter-spacing: .06em; margin-bottom: .6rem;
}
.pillar-card__h{
  font: 500 1.1875rem/1.25 var(--display); color: var(--navy); letter-spacing: -.01em; margin-bottom: .65rem;
}
.pillar-card__p{ color: var(--text-mid); font-size: .9375rem; line-height: 1.6; margin-bottom: 1rem; }
.pillar-card .give__cta{ margin-top: auto; padding-top: .25rem; }

/* .pillar-card is shared with the Gallery album grid (gallery.blade.php),
   where image-first is correct — you browse albums by their cover photo.
   On the homepage's "Five Strategic Pillars" (the only other user of this
   class), mobile stacking order should instead match every other
   text-with-supporting-image section on the site (.section-split: title
   and copy first, image second) — scoped to .programs so the gallery
   grid is untouched. */
@media (max-width:900px){
  .programs .pillar-card__media{ order: 2; }
  .programs .pillar-card__body{ order: 1; }
}

/* Business directory two-column content (For Community Members / For Businesses) */
.biz-cols{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2rem;
}
.biz-cols h3{ font: 600 1.0625rem var(--body); color: var(--navy); margin-bottom: .6rem; }
.biz-cols p{ color: var(--text-mid); font-size: .9375rem; line-height: 1.65; }
.biz-cols ul{ margin-top: .85rem; padding-left: 1.15rem; list-style: disc; color: var(--text-mid); font-size: .9375rem; }
.biz-cols li + li{ margin-top: .45rem; }
@media (max-width: 720px){ .biz-cols{ grid-template-columns: 1fr; } }

/* Section intro paired with a real photo — used where the text column alone
   left a block of empty space beside it at the top of the section. */
.section-split{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-split__media{
  border-radius: 3px; overflow: hidden; aspect-ratio: 4/3; background: var(--stone-2);
}
.section-split__media img{ width: 100%; height: 100%; object-fit: cover; }
/* <x-responsive-image> wraps the img in a <picture> the caller can't reach
   (its class/style attrs land on the img — see responsive-image.blade.php),
   so a shrunk, non-cover image (e.g. the Mission & Vision logo, sized well
   under 100% with object-fit:contain) was left up to <picture>'s own
   default inline sizing/position instead of being centered in the media
   box — it rendered pinned to the top-left. Centering here fixes that for
   any current or future non-cover use without affecting normal cover
   photos, which already fill this box edge-to-edge. */
.section-split__media picture{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
@media (max-width: 900px){ .section-split{ grid-template-columns: 1fr; } }

/* For a logo (who-we-are-hub's Mission & Vision figure) rather than a
   cover photo: the shared 4/3 aspect-ratio assumes a photo filling the
   box edge-to-edge, but a short, wide wordmark shown at well under 100%
   width left a mostly-empty box — worse on mobile, where the box is full
   viewport width and the logo stays small. Size to content instead. */
.section-split__media--logo{ aspect-ratio: auto; padding: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 5vw, 3rem); }

/* Alternates the photo to the left instead of the right, for rhythm across
   a run of stacked section-splits (e.g. who-we-are's "Get to Know SSA"). */
.section-split--reverse{ grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.section-split--reverse > :first-child{ order: 2; }
.section-split--reverse > :last-child{ order: 1; }
/* :first-child/:last-child carry the same specificity as a class, which
   beat a bare `> *` reset below despite this media query coming later in
   the cascade — the mobile reset silently never applied, so every
   .section-split--reverse on the site showed image-before-text on
   mobile instead of matching .section-split's text-before-image. Match
   the selector specificity exactly so the later rule actually wins. */
@media (max-width: 900px){
  .section-split--reverse{ grid-template-columns: 1fr; }
  .section-split--reverse > :first-child{ order: initial; }
  .section-split--reverse > :last-child{ order: initial; }
}

/* Honest placeholder for sections without real data yet (Community Calendar) */
.coming-soon{
  margin-top: 2rem;
  border: 1px dashed var(--rule); border-radius: 4px;
  padding: 2rem 1.75rem; text-align: center;
  background: var(--paper); color: var(--text-mid); font-size: .9375rem; line-height: 1.6;
}
.coming-soon strong{
  display: block; color: var(--navy); font: 600 .9375rem var(--body); margin-bottom: .4rem;
}

/* FAQ answers that include a link (donation info, partner/volunteer CTAs) */
.qa__a a{ color: var(--crimson); text-decoration: underline; text-underline-offset: .15em; font-weight: 500; }
.qa__a p + p{ margin-top: .75rem; }

/* Org facts + contact card (About Us) — a quick-reference summary paired
   with the address and primary CTAs, closing out the page. */
.facts-panel{
  display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  background: var(--stone); border-top: 2px solid var(--navy);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.facts-panel__h{ font: 500 1.25rem var(--display); color: var(--navy); margin-bottom: 1.1rem; letter-spacing: -.01em; }
.facts-panel__addr{ font: 400 clamp(1.0625rem,1rem + .4vw,1.25rem)/1.4 var(--display); color: var(--navy); margin-top: .5rem; }
.facts-panel__addr a{ color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--silver); }
.facts-panel__addr a:hover{ text-decoration-color: var(--navy); }
@media (max-width: 720px){ .facts-panel{ grid-template-columns: 1fr; } }

/* Event page hero — organization-branded (color + logo), never the
   uploaded flyer itself: flyers are often portrait posters and must never
   be cropped, so that image moves into .event-flyer-grid below instead. */
.event-hero{
  background: linear-gradient(135deg, color-mix(in srgb, var(--org-color, var(--navy)) 70%, black) 0%, var(--navy) 100%);
}
.event-hero .slavs__inner{ padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.event-hero__inner{ display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2rem); flex-wrap: wrap; }
.event-hero__badge{
  width: clamp(72px, 9vw, 104px); height: clamp(72px, 9vw, 104px); flex: 0 0 auto;
  border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
  padding: .85rem; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.event-hero__badge img{ width: 100%; height: 100%; object-fit: contain; }

/* Flyer shown at full size next to the description — never cropped
   (see event.blade.php: only used when the event has an uploaded photo). */
.event-body{ padding-bottom: clamp(2rem, 4vw, 2.75rem); }
.event-flyer-grid{
  display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}
/* Top-align the text with the flyer, and let it fill its grid column. */
.event-flyer-grid .page-content{ max-width: none; margin-inline: 0; padding-top: 0; }
/* The details column is narrower beside a flyer — stack its two halves. */
.event-flyer-grid .facts-panel{ grid-template-columns: 1fr; }
.event-flyer{
  border-radius: 8px; overflow: hidden; border: 1px solid var(--rule);
  box-shadow: 0 12px 32px rgba(13,27,48,.14);
  max-width: 460px; margin-inline: auto;
}
.event-flyer img{ display: block; width: 100%; height: auto; }
@media (max-width: 860px){
  .event-flyer-grid{ grid-template-columns: 1fr; }
  .event-flyer-grid .event-flyer{ order: -1; }
}

.facts{ display: grid; gap: .9rem; }
.facts > div{ display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.facts dt{
  flex: 0 0 9rem;
  font: 500 .6875rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-mid);
}
.facts dd{ font: 500 .9375rem var(--body); color: var(--navy); }

/* ============================================================
   People cards (Leadership & Team) — no real staff photos exist yet,
   so each person gets an initials avatar (like .icon-badge, but a
   name's initials instead of an icon) rather than a stand-in stock
   photo misattributed to a real, named individual.
   ============================================================ */
.person-grid{
  /* flex+wrap, not grid — a grid's row tracks stay fixed in count
     regardless of how many items land in the last row, so 5 people in a
     4-column grid left the 5th stranded alone against the left edge with
     three empty columns beside it. flex-wrap naturally lets a short
     trailing row size to its own content and justify-content centers it,
     the standard pattern for exactly this "odd item count" case. */
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: 2rem;
}
.person-card{
  /* basis matches the grid's old minmax(16rem,…) column width; the cap
     keeps a lone trailing card from stretching to the full row width. */
  flex: 1 1 16rem; max-width: 19rem;
  background: var(--paper); border-top: 2px solid var(--navy);
  padding: 1.75rem 1.6rem; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.person-card:hover{
  transform: translateY(-4px); border-top-color: var(--crimson);
  box-shadow: 0 22px 40px -28px rgba(11,23,41,.4);
}
.avatar{
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--navy); color: #fff;
  font: 500 1.125rem var(--display); letter-spacing: -.02em;
  margin-bottom: 1.1rem;
}
/* A real headshot, once one exists for that person — same slot, bigger,
   since a photo reads better at a larger size than initials do. */
.avatar--photo{
  width: 4.5rem; height: 4.5rem; overflow: hidden; background: var(--stone-2);
}
.avatar--photo img{ width: 100%; height: 100%; object-fit: cover; }
.person-card__name{ font: 500 1.125rem/1.3 var(--display); color: var(--navy); letter-spacing: -.01em; }
.person-card__role{
  font: 600 .6875rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--crimson); margin-top: .4rem; margin-bottom: .85rem;
}
.person-card__bio{ font-size: .9375rem; line-height: 1.6; color: var(--text-mid); }

/* ============================================================
   Lightbox (Gallery albums) — vanilla-JS popup viewer with prev/next,
   built by design/js/lightbox.js. Markup is created by JS on first
   use; this is purely presentational.
   ============================================================ */
.lightbox{
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,23,41,.94);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.lightbox.is-open{ opacity: 1; visibility: visible; transition: opacity .25s var(--ease); }
.lightbox__frame{ position: relative; max-width: min(92vw, 1200px); max-height: 86vh; }
.lightbox__img{ display: block; max-width: 100%; max-height: 86vh; width: auto; height: auto; border-radius: 3px; }
.lightbox__close,
.lightbox__nav{
  position: fixed; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.32); cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover{ background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.lightbox__close{ top: 1.25rem; right: 1.25rem; width: 2.75rem; height: 2.75rem; }
.lightbox__nav{ top: 50%; transform: translateY(-50%); width: 3.25rem; height: 3.25rem; }
.lightbox__prev{ left: 1.25rem; }
.lightbox__next{ right: 1.25rem; }
.lightbox__close svg,
.lightbox__nav svg{ width: 1.375rem; height: 1.375rem; }
.lightbox__count{
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.78); font: 500 .8125rem/1 var(--mono); letter-spacing: .06em;
}
@media (max-width: 640px){
  .lightbox__nav{ width: 2.5rem; height: 2.5rem; }
  .lightbox__prev{ left: .5rem; }
  .lightbox__next{ right: .5rem; }
  .lightbox__close{ top: .5rem; right: .5rem; width: 2.5rem; height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce){ .lightbox{ transition: none; } }

/* Gallery album page — optional short description under the title */
.album-desc{ margin-top: .85rem; max-width: 62ch; color: var(--text-mid); font-size: 1.0625rem; line-height: 1.6; }
.album-back{
  display: inline-flex; align-items: center; gap: .5rem;
  font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--crimson); text-decoration: none; margin-bottom: 1.5rem;
}
.album-back:hover span:last-child{ transform: translateX(-4px); }
.album-back span:last-child{ display: inline-block; transition: transform .3s var(--ease); }

/* ============================================================
   Pathway flow (Mission & Vision) — a horizontal chain of pill
   steps connected by arrows; wraps to a vertical chain on mobile
   with the arrows rotated to point down instead of right.
   ============================================================ */
.pathway-flow{
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 0;
  margin-top: 2rem;
}
.pathway-flow__step{
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 999px;
  padding: .65rem 1.25rem .65rem .6rem;
}
.pathway-flow__num{
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--navy); color: #fff; font: 600 .75rem/1 var(--mono);
}
.pathway-flow__label{ font: 500 .9375rem var(--body); color: var(--navy); white-space: nowrap; }
.pathway-flow__arrow{ flex: none; width: 1.25rem; height: 1.25rem; margin-inline: .5rem; color: var(--crimson); }
@media (max-width: 720px){
  .pathway-flow{ flex-direction: column; align-items: stretch; gap: .6rem; }
  .pathway-flow__step{ width: 100%; }
  .pathway-flow__arrow{ align-self: center; transform: rotate(90deg); }
}

/* ============================================================
   Closing CTA band (Mission & Vision) — a solid-navy band with a
   centered headline and 2-3 buttons, for pages that don't already
   end on their own Get Involved section (the homepage's version of
   this was removed as redundant with its own Get Involved section;
   this page has no such section, so it earns a real closing band).
   ============================================================ */
.close-cta{ background: var(--navy); text-align: center; padding-block: clamp(3rem, 6vw, 4.5rem); }
.close-cta__h{
  font: 500 clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem)/1.15 var(--display);
  color: #fff; letter-spacing: -.02em; max-width: 26ch; margin-inline: auto; text-wrap: balance;
}
.close-cta__p{
  margin-top: 1.1rem; color: rgba(255,255,255,.78);
  max-width: 52ch; margin-inline: auto; font-size: 1.0625rem; line-height: 1.6;
}
.close-cta__actions{ display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

/* ============================================================
   Community Calendar — real month grid (public /slavic-calendar/).
   Sunday-first, 7 columns; leading/trailing days from adjacent
   months are dimmed but still show their own events for continuity.
   No JavaScript required — month nav and the organization filter are
   plain links/a GET form.
   ============================================================ */
.cal-filter{
  display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.cal-filter label{
  display: block; font: 500 .6875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mid); margin-bottom: .4rem;
}
.cal-filter select{
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  padding: .55rem .75rem; font: 500 .875rem var(--body); color: var(--navy); min-width: 14rem;
}
.cal-grid{
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
  border-radius: 3px; overflow: hidden;
}
.cal-grid__weekday{
  padding: .6rem .5rem; text-align: center;
  font: 600 .6875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mid); background: var(--stone);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.cal-cell{
  min-height: 7rem; padding: .5rem;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .3rem; background: var(--paper);
}
.cal-cell--outside{ background: var(--stone); }
.cal-cell--today{ background: var(--mist); }
.cal-cell__num{ font: 600 .8125rem var(--mono); color: var(--navy); }
.cal-cell--outside .cal-cell__num{ color: var(--silver); }
.cal-chip{
  display: flex; align-items: center; gap: .35rem;
  padding: .2rem .4rem; border-radius: 3px;
  background: var(--paper); border: 1px solid var(--rule);
  font-size: .75rem; line-height: 1.3; color: var(--navy); text-decoration: none;
  transition: border-color .2s var(--ease);
}
.cal-chip:hover{ border-color: var(--navy); }
.cal-chip__logo{ width: 1.1rem; height: 1.1rem; border-radius: 50%; object-fit: cover; flex: none; }
.cal-chip__dot{ width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.cal-chip__time{ font: 500 .6875rem var(--mono); color: var(--text-mid); flex: none; }
.cal-chip__title{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px){
  .cal-grid__weekday{ font-size: .5625rem; padding: .4rem .2rem; }
  .cal-cell{ min-height: auto; padding: .35rem; }
  .cal-chip{ font-size: .6875rem; }
  .cal-chip__title{ white-space: normal; }
}

/* Every event chip above opens this instead of navigating away (the
   real /slavic-calendar/{slug}/ page still exists — the chip's href is
   only prevented, not removed, so JS-disabled/crawler/middle-click all
   still work). */
[x-cloak]{ display: none !important; }
.cal-modal{
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: rgba(11,23,41,.55);
}
.cal-modal__panel{
  position: relative;
  background: var(--paper); border-radius: 6px; max-width: 42rem; width: 100%;
  max-height: calc(100vh - 3rem); overflow-y: auto;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 30px 60px -20px rgba(11,23,41,.5);
}
.cal-modal__close{
  position: absolute; top: 1rem; right: 1rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--stone); color: var(--navy); border: none; cursor: pointer;
  transition: background .2s var(--ease);
}
.cal-modal__close:hover{ background: var(--mist-2); }
.cal-modal__close svg{ width: 1.125rem; height: 1.125rem; }
.cal-modal__eyebrow{
  display: flex; align-items: center; gap: .5rem;
  font: 500 .6875rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mid); padding-right: 2.5rem;
}
.cal-modal__logo{ width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: cover; }
.cal-modal__title{ font: 500 1.5rem/1.3 var(--display); color: var(--navy); margin-top: .5rem; }
.cal-modal__meta{ margin-top: .35rem; color: var(--text-mid); font-size: .9375rem; }
.cal-modal__body{ margin-top: 1.25rem; }

.cal-modal-fade-enter, .cal-modal-fade-leave{ transition: opacity .2s var(--ease); }
.cal-modal-fade-enter-start, .cal-modal-fade-leave-end{ opacity: 0; }
.cal-modal-fade-enter-end, .cal-modal-fade-leave-start{ opacity: 1; }
.cal-modal-panel-enter, .cal-modal-panel-leave{ transition: opacity .2s var(--ease), transform .2s var(--ease); }
.cal-modal-panel-enter-start, .cal-modal-panel-leave-end{ opacity: 0; transform: scale(.96) translateY(8px); }
.cal-modal-panel-enter-end, .cal-modal-panel-leave-start{ opacity: 1; transform: scale(1) translateY(0); }
@media (prefers-reduced-motion: reduce){
  .cal-modal-fade-enter, .cal-modal-fade-leave,
  .cal-modal-panel-enter, .cal-modal-panel-leave{ transition-duration: .01s; }
  .cal-modal-panel-enter-start, .cal-modal-panel-enter-end,
  .cal-modal-panel-leave-start, .cal-modal-panel-leave-end{ transform: none; }
}

/* ============================================================
   Business Directory — listing cards (public /business-directory/)
   and the profile-page facts/social row. Card visuals follow
   .pillar-card's established language (paper surface, navy top rule
   that turns crimson on hover) with a circular logo avatar in place
   of a full-bleed photo, since a logo is far more reliably available
   than a banner image across real listings.
   ============================================================ */
.biz-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: 2rem;
}
.biz-card{
  position: relative;
  background: var(--paper); border-top: 2px solid var(--navy);
  padding: 1.75rem 1.6rem; display: flex; flex-direction: column;
  text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.biz-card:hover{
  transform: translateY(-4px); border-top-color: var(--crimson);
  box-shadow: 0 22px 40px -28px rgba(11,23,41,.4);
}
.biz-card__head{ display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.biz-card__logo{
  width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--stone);
}
.biz-card__name{ font: 500 1.125rem/1.3 var(--display); color: var(--navy); letter-spacing: -.01em; }
.biz-card__tagline{ font-size: .875rem; color: var(--text-mid); margin-top: .2rem; }
.biz-card__tags{ display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.biz-card__tag{
  font: 500 .6875rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  background: var(--stone); color: var(--navy); padding: .3rem .6rem; border-radius: 999px;
}
.biz-card .give__cta{ margin-top: auto; padding-top: .25rem; }

/* Sponsor corner ribbon — deliberately louder than .biz-card__tag so a
   sponsored listing reads as a trust/status signal at a glance, not just
   another category. Icon + text together (never color alone). */
.biz-card__sponsor{
  position: absolute; top: 0; right: 1.1rem;
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--crimson); color: #fff;
  font: 700 .625rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding: .45rem .65rem; border-radius: 0 0 7px 7px;
  box-shadow: 0 10px 18px -10px rgba(150,24,43,.6);
}
.biz-card__sponsor svg{ width: .8rem; height: .8rem; flex: none; }

/* Status badges (Russian-speaking, Sponsor) — kept visually distinct from
   the plain .biz-card__tag categories: bolder weight, an icon, and a
   dedicated color per badge instead of the neutral stone/navy tag style.
   Shared between the directory card and the profile hero. */
.biz-badges{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; }
.biz-badge{
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font: 700 .6875rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  padding: .4rem .7rem; border-radius: 999px;
}
.biz-badge svg{ width: .9rem; height: .9rem; flex: none; }
.biz-badge--lang{ background: var(--mist); color: var(--navy); border: 1px solid var(--mist-2); }
.biz-badge--sponsor{ background: var(--crimson); color: #fff; }
/* green = opportunity, distinct from the navy language label and crimson sponsor */
.biz-badge--hiring{ background: #E7F4EC; color: #1D5E3A; border: 1px solid #C5E3D1; }

/* Profile page's social-link row */
.biz-social{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.biz-social__link{
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--stone); color: var(--navy); border: 1px solid var(--rule);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.biz-social__link:hover{ background: var(--navy); color: #fff; border-color: var(--navy); }
.biz-social__link svg{ width: 1.125rem; height: 1.125rem; }

/* ── SSA social links (<x-social-links>) ─────────────────────── */
.social{ display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.social__link{
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-width: 2.75rem; height: 2.75rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper); color: var(--brand);
  text-decoration: none; transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.social__link svg{ width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; }
.social__link:hover{ background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }
.social--labels .social__link{ padding: 0 1rem 0 .85rem; font: 500 .9375rem var(--body); color: var(--navy); }
.social--labels .social__link svg{ color: var(--brand); }
.social--labels .social__link:hover, .social--labels .social__link:hover svg{ color: #fff; }
.social--dark .social__link{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff; }
.social--dark .social__link:hover{ background: var(--brand); border-color: var(--brand); }
.foot .social{ margin-top: 1.1rem; }
@media (prefers-reduced-motion: reduce){ .social__link{ transition: none; } .social__link:hover{ transform: none; } }

/* "Follow us" band on content pages */
.follow{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); }
.follow__h{ font: 500 clamp(1.25rem, 1.1rem + .6vw, 1.55rem)/1.25 var(--display); color: var(--navy); }
.follow__p{ margin-top: .35rem; color: var(--text-mid); font-size: 1rem; line-height: 1.6; max-width: 52ch; }

/* ── Bulleted list inside a .section-split text column ─────────
   Two balanced columns on desktop, one on narrow screens. */
.split-list{
  margin-top: 1rem; padding-left: 1.15rem; list-style: disc; color: var(--text-mid);
  line-height: 1.6; columns: 2; column-gap: 2rem; max-width: 62ch;
}
.split-list li{ break-inside: avoid; margin-bottom: .4rem; }
@media (max-width: 560px){ .split-list{ columns: 1; } }

/* ── "Next steps" link rows (replaces a wrapped pile of buttons) ── */
.next-steps{ list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; max-width: 62ch; }
.next-steps a{
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center;
  padding: .9rem 1.1rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper);
  color: inherit; text-decoration: none; min-height: 3.25rem;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.next-steps a:hover{ border-color: var(--navy); background: var(--mist); }
.next-steps__t{ font-weight: 600; color: var(--navy); }
.next-steps__d{ grid-column: 1; font-size: .9375rem; color: var(--text-mid); margin-top: .15rem; }
.next-steps__go{ grid-column: 2; grid-row: 1 / span 2; color: var(--crimson); font-weight: 600; transition: transform .18s var(--ease); }
.next-steps a:hover .next-steps__go{ transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){ .next-steps a, .next-steps__go{ transition: none; } }

/* Business Directory "show only" toggles — independent checkboxes */
.biz-toggles{ display: flex; flex-wrap: wrap; gap: .5rem; border: 0; margin: 0; padding: 0; align-self: flex-end; }
.biz-toggle{ position: relative; display: inline-flex; cursor: pointer; }
.biz-toggle input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.biz-toggle span{
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.6rem; padding: 0 .95rem;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--paper);
  font: 500 .875rem var(--body); color: var(--navy); transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.biz-toggle span::before{
  content: ""; width: .95rem; height: .95rem; border: 1.5px solid var(--navy-soft); border-radius: 3px; flex: none;
}
.biz-toggle input:checked + span{ background: var(--navy); border-color: var(--navy); color: #fff; }
.biz-toggle input:checked + span::before{
  border-color: #fff; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310243F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/80% no-repeat;
}
.biz-toggle input:focus-visible + span{ outline: 2px solid var(--crimson-lt); outline-offset: 2px; }
.biz-toggle:hover span{ border-color: var(--navy); }
.cal-filter .biz-toggle{ display: inline-flex; margin: 0; font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }

/* Four-per-row benefits grid for 4 / 8 item lists (and 7 → 4+3) so no row
   ends with a lone stretched card. Desktop only — below 1080px the
   styles.css breakpoints (2-up, then 1-up) still apply. */
@media (min-width: 1081px){ .benefits--4{ --benefits-basis: 25%; } }

/* Buttons inside .page-content prose keep their own colours — the prose
   link rule (crimson + underline) made a .btn--solid's text crimson on a
   crimson background, i.e. invisible. */
.page-content a.btn{ text-decoration: none; }
.page-content a.btn--solid, .page-content a.btn--solid:hover{ color: #fff; }
.page-content a.btn--ghost{ color: var(--navy); }
.page-content a.btn--ghost:hover{ color: #fff; }
.page-content a.btn--light{ color: #fff; }
.page-content a.btn--light:hover{ color: var(--navy); }

/* "Business ↔ …" relationship tags */
.connect-tags{ list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.connect-tags li{
  padding: .45rem .9rem; border: 1px solid var(--mist-2); border-radius: 999px; background: var(--paper);
  font: 500 .9375rem var(--display); color: var(--navy);
}

/* Short "who needs whom" examples, each on its own line with a link marker */
.b2b-list{ list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; max-width: 62ch; }
.b2b-list li{ position: relative; padding-left: 1.6rem; color: var(--text-mid); line-height: 1.55; }
.b2b-list li::before{
  content: ""; position: absolute; left: 0; top: .35em; width: 1rem; height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2396182B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Clean Start pricing ─────────────────────────────────────── */
.price-tag{ margin-top: 1.25rem; }
.price-tag__amount{ font: 500 clamp(2.4rem, 1.8rem + 2vw, 3.2rem)/1 var(--display); color: var(--navy); }
.price-tag__amount span{ font: 500 1rem var(--body); color: var(--text-mid); margin-left: .35rem; }
.price-tag__note{ margin-top: .5rem; color: var(--text-mid); }

.check-list{ list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .7rem; max-width: 62ch; }
.check-list li{ position: relative; padding-left: 2rem; color: var(--navy); line-height: 1.5; }
.check-list li strong{ font-weight: 600; }
.check-list li::before{
  content: ""; position: absolute; left: 0; top: .1em; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--crimson) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat;
}
.check-list--inline{ display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }

.money-split{ display: grid; gap: .6rem; max-width: 62ch; }
.money-split__row{
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: .9rem; row-gap: .35rem; align-items: center;
  background: var(--paper); border-radius: 3px; padding: .85rem 1.1rem;
}
.money-split__amt{ grid-row: 1 / span 2; font: 600 1.5rem var(--display); color: var(--navy); }
.money-split__bar{ display: block; height: .4rem; border-radius: 999px; background: linear-gradient(to right, var(--crimson) var(--w), var(--stone-2) var(--w)); }
.money-split__txt{ color: var(--text-mid); font-size: .9375rem; line-height: 1.45; }

/* Text column of a .section-split built from a former full-width prose
   block (.page-content) or text-only section — keep the prose styles,
   drop the standalone block's own padding/width. */
.page-content.split-prose{ padding: 0; max-width: none; margin: 0; }
.split-col > .business__head{ margin-bottom: 1.25rem; }
.split-col > *:last-child{ margin-bottom: 0; }
.page-content.split-prose h2.h2{ font: 500 clamp(2rem, 1.35rem + 2.6vw, 3.35rem)/1.08 var(--display); letter-spacing: -.02em; }

/* Numbered short statements ("Know where you came from…") */
.mantra{ list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .65rem; }
.page-content .mantra li + li{ margin-top: 0; }
.mantra li{
  display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem;
  background: var(--paper); border-left: 3px solid var(--crimson); border-radius: 3px;
  font: 500 1.125rem/1.35 var(--display); color: var(--navy);
}
.mantra__n{
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font: 600 .875rem var(--body);
}

/* Program leader feature: portrait + bio */
.leader{ display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.leader__photo{ margin: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--stone); }
.leader__photo img{ width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.leader__name{ margin-top: 1.25rem; font: 600 1.25rem var(--body); color: var(--navy); }
.leader__role{ margin-top: .25rem; font: 500 .8125rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--crimson); }
@media (max-width: 760px){ .leader{ grid-template-columns: minmax(0, 1fr); } .leader__photo{ max-width: 16rem; } }

/* Topic list shown as pill tags (who/what a section covers) */
.tag-list{ list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; max-width: 62ch; }
.tag-list li{
  padding: .4rem .8rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper);
  font-size: .9375rem; color: var(--navy); line-height: 1.3;
}
/* Long bullet lists beside an image: two columns so the text column
   doesn't run far past the photo. */
.page-content.split-prose > ul{ columns: 2; column-gap: 2rem; }
.page-content.split-prose > ul li{ break-inside: avoid; }
.page-content.split-prose > ul li + li{ margin-top: 0; }
.page-content.split-prose > ul li{ margin-bottom: .4rem; }
@media (max-width: 560px){ .page-content.split-prose > ul{ columns: 1; } }

/* ═══════════════ Community Voting (Modules/Voting) ═══════════════ */
.vote-hero{ background: var(--navy); color: #fff; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; }
.vote-hero__bg{ position: absolute; inset: 0; opacity: .22; }
.vote-hero__bg img{ width: 100%; height: 100%; object-fit: cover; }
.vote-hero .shell{ position: relative; }
.vote-hero__h{ font: 500 clamp(2rem, 1.4rem + 2.6vw, 3.25rem)/1.1 var(--display); letter-spacing: -.015em; max-width: 22ch; }
.vote-hero__p{ margin-top: 1rem; max-width: 60ch; color: var(--text-light); font-size: 1.0938rem; line-height: 1.65; }
.vote-hero__meta{ display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 1.5rem; font: 500 .8125rem var(--mono); letter-spacing: .03em; color: rgba(255,255,255,.85); }
.vote-hero__meta strong{ color: #fff; }
.vote-hero .vote-share{ margin-top: 1.5rem; }
.vote-crumb{ font: 500 .75rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 1rem; display: inline-block; }
.vote-crumb:hover{ color: #fff; }

.vote-section{ padding-block: clamp(2.5rem, 5vw, 4rem); }
.vote-section + .vote-section{ padding-top: 0; }
.vote-section__h{ font: 500 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.2 var(--display); color: var(--navy); margin-bottom: 1.25rem; }
.vote-label{ font: 600 .6875rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--crimson); margin-bottom: .5rem; display: block; }
.vote-prose{ color: var(--text-mid); line-height: 1.7; max-width: 70ch; }
.vote-prose p + p, .vote-prose ul, .vote-prose ol{ margin-top: .85rem; }
.vote-prose ul{ list-style: disc; padding-left: 1.3rem; }
.vote-prose ol{ list-style: decimal; padding-left: 1.3rem; }
.vote-prose h2, .vote-prose h3{ font: 500 1.25rem/1.3 var(--display); color: var(--navy); margin-top: 1.5rem; }
.vote-prose a{ color: var(--navy-soft); text-decoration: underline; }

.vote-chip{ display: inline-flex; align-items: center; gap: .35rem; font: 700 .6875rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: .4rem .65rem; border-radius: 999px; background: var(--stone); color: var(--text-mid); white-space: nowrap; }
.vote-chip--open{ background: #E7F4EC; color: #1D5E3A; }
.vote-chip--soon{ background: var(--mist); color: var(--navy); }
.vote-chip--done{ background: var(--stone); color: var(--silver-tx); }
.vote-chip--voted{ background: var(--navy); color: #fff; }
.vote-chip--warn{ background: #FBEDEF; color: var(--crimson); }

.vote-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; }
.vote-card{ display: flex; flex-direction: column; gap: .6rem; background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--navy); padding: 1.35rem 1.4rem; text-decoration: none; color: inherit; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
a.vote-card:hover{ transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(11,23,41,.45); }
.vote-card__h{ font: 500 1.25rem/1.25 var(--display); color: var(--navy); }
.vote-card__p{ color: var(--text-mid); font-size: .9375rem; line-height: 1.6; }
.vote-card__foot{ margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.vote-card--primary{ border-top-color: var(--crimson); padding: clamp(1.5rem, 3vw, 2.25rem); background: linear-gradient(180deg, #FFF 0%, #FBF7F2 100%); }
.vote-card--primary .vote-card__h{ font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); }
.vote-card--primary .vote-card__p{ font-size: 1.0313rem; max-width: 60ch; }

.vote-panel{ background: var(--mist); border: 1px solid var(--mist-2); padding: clamp(1.25rem, 3vw, 1.75rem); }
.vote-panel--ok{ background: #EEF7F1; border-color: #C5E3D1; }
.vote-panel--warn{ background: #FBEDEF; border-color: #F0C9CF; }
.vote-panel h2, .vote-panel h3{ font: 500 1.25rem/1.3 var(--display); color: var(--navy); margin-bottom: .4rem; }
.vote-panel p{ color: var(--text-mid); line-height: 1.6; }
.vote-panel + .vote-panel{ margin-top: 1rem; }
.vote-inline-form{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; align-items: stretch; }
.vote-inline-form .text-field{ flex: 1 1 16rem; min-width: 0; }
.vote-progress{ display: grid; gap: .5rem; margin-top: 1rem; }
.vote-progress li{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .8rem; background: var(--paper); border: 1px solid var(--rule); }
.vote-progress a{ color: var(--navy); font-weight: 500; }
.vote-link-btn{ background: none; border: 0; padding: 0; color: var(--navy-soft); text-decoration: underline; cursor: pointer; font: inherit; }

.vote-ballot{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.vote-candidate{ position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; scroll-margin-top: calc(var(--head-h) + 1rem); transition: border-color .2s, box-shadow .2s; }
.vote-candidate__media{ aspect-ratio: 4/3; background: var(--stone); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vote-candidate__media img{ width: 100%; height: 100%; object-fit: cover; }
.vote-candidate__media--initial{ font: 500 2.5rem var(--display); color: var(--navy); }
.vote-candidate__body{ padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.vote-candidate__name{ font: 500 1.125rem/1.3 var(--display); color: var(--navy); }
.vote-candidate__cat{ font: 500 .75rem var(--mono); color: var(--silver-tx); letter-spacing: .03em; }
.vote-candidate__desc{ color: var(--text-mid); font-size: .9063rem; line-height: 1.55; }
.vote-candidate__links{ display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .8438rem; }
.vote-candidate__links a{ color: var(--navy-soft); text-decoration: underline; text-underline-offset: 2px; }
.vote-candidate__pick{ margin-top: auto; padding-top: .6rem; }
.vote-candidate__pick label{ display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; border: 1px solid var(--navy); color: var(--navy); font: 600 .8125rem var(--body); letter-spacing: .02em; cursor: pointer; transition: background .2s, color .2s; }
.vote-candidate__pick input{ position: absolute; opacity: 0; pointer-events: none; }
.vote-candidate__pick label:has(input:focus-visible){ outline: 2px solid var(--navy-soft); outline-offset: 3px; }
.vote-candidate.is-selected{ border-color: var(--crimson); box-shadow: 0 0 0 2px var(--crimson); }
.vote-candidate.is-selected .vote-candidate__pick label{ background: var(--crimson); border-color: var(--crimson); color: #fff; }
.vote-candidate.is-highlight{ box-shadow: 0 0 0 3px var(--navy-soft); }
.vote-candidate.is-mine{ border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); }
.vote-candidate__mine{ position: absolute; top: .6rem; left: .6rem; }
.vote-candidate__meta{ font-size: .8125rem; color: var(--silver-tx); }

.vote-submit{ position: sticky; bottom: 0; z-index: 5; margin-top: 1.5rem; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 -12px 30px -24px rgba(11,23,41,.5); padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem; }
.vote-check{ display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; color: var(--text); line-height: 1.5; cursor: pointer; }
.vote-check input{ width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--crimson); flex: none; }
.vote-check a{ color: var(--navy-soft); text-decoration: underline; }

.vote-results{ display: grid; gap: .75rem; }
.vote-result{ display: grid; grid-template-columns: 3.25rem 1fr auto; gap: .9rem; align-items: center; background: var(--paper); border: 1px solid var(--rule); padding: .9rem 1.1rem; }
.vote-result__pos{ font: 500 1.375rem var(--display); color: var(--navy); text-align: center; }
.vote-result__name{ font: 500 1.0625rem/1.3 var(--display); color: var(--navy); }
.vote-result__bar{ height: .4rem; background: var(--stone); margin-top: .5rem; border-radius: 99px; overflow: hidden; }
.vote-result__bar span{ display: block; height: 100%; background: var(--navy-soft); border-radius: 99px; }
.vote-result__num{ text-align: right; font: 500 .9375rem var(--mono); color: var(--text); white-space: nowrap; }
.vote-result__num small{ display: block; color: var(--silver-tx); font-size: .8125rem; }
.vote-result--winner{ border: 2px solid var(--crimson); background: linear-gradient(180deg, #FFF 0%, #FBF4F5 100%); padding: 1.25rem 1.3rem; }
.vote-result--winner .vote-result__name{ font-size: 1.375rem; }
.vote-result--winner .vote-result__bar span{ background: var(--crimson); }
@media (max-width: 520px){ .vote-result{ grid-template-columns: 2.5rem 1fr; } .vote-result__num{ grid-column: 2; text-align: left; } }

.vote-share{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.vote-share__label{ font: 500 .75rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--silver-tx); margin-right: .25rem; }
.vote-share a, .vote-share button{ display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; padding: 0 .8rem; border: 1px solid var(--rule); background: var(--paper); color: var(--navy); font: 500 .8125rem var(--body); text-decoration: none; cursor: pointer; border-radius: 3px; }
.vote-share a:hover, .vote-share button:hover{ border-color: var(--navy); }
.vote-share--sm a, .vote-share--sm button{ min-height: 2rem; padding: 0 .6rem; font-size: .75rem; }
.vote-hero .vote-share a, .vote-hero .vote-share button{ background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.vote-hero .vote-share__label{ color: rgba(255,255,255,.7); }

.vote-countdown{ display: inline-flex; gap: 1rem; margin-top: .5rem; }
.vote-countdown > span{ display: flex; flex-direction: column; align-items: center; font: 500 .6875rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--silver-tx); }
.vote-countdown b{ font: 500 1.75rem/1 var(--display); color: var(--navy); }
.vote-hero .vote-countdown > span{ color: rgba(255,255,255,.7); }
.vote-hero .vote-countdown b{ color: #fff; }

.vote-form{ display: grid; gap: 1.1rem; max-width: 46rem; }
.vote-form fieldset{ border: 1px solid var(--rule); padding: 1.25rem 1.25rem 1.4rem; display: grid; gap: 1rem; background: var(--paper); }
.vote-form legend{ font: 600 .75rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); padding: 0 .4rem; }
.vote-form .two{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.vote-form label > .field-label{ display: block; margin-bottom: .45rem; }
.vote-form .text-field{ width: 100%; }
.vote-req{ color: var(--crimson); }
.vote-hint{ font-size: .8125rem; color: var(--silver-tx); margin-top: .35rem; display: block; }

.vote-award-badge{ display: inline-flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .45rem .75rem .5rem; border-radius: 4px; background: linear-gradient(135deg, #10243F 0%, #2C5480 100%); color: #fff; font: 700 .625rem/1.15 var(--mono); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; }
.vote-award-badge strong{ font-size: .75rem; color: #F3D27A; }
.vote-award-badge--finalist strong{ color: #DCE6F0; }
.biz-card .vote-award-badge{ margin-bottom: .85rem; align-self: flex-start; }
.vote-awards{ display: grid; gap: .65rem; }
.vote-awards li{ display: grid; grid-template-columns: 4rem 1fr auto; gap: .9rem; align-items: center; padding: .85rem 1rem; background: var(--paper); border: 1px solid var(--rule); }
.vote-awards__year{ font: 500 1.25rem var(--display); color: var(--navy); }
.vote-awards__name{ font-weight: 500; color: var(--text); }
.vote-awards__name a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vote-awards__meta{ font: 500 .75rem var(--mono); color: var(--silver-tx); letter-spacing: .03em; }
@media (max-width: 520px){ .vote-awards li{ grid-template-columns: 3.25rem 1fr; } .vote-awards li > :last-child{ grid-column: 2; } }
.sr-only{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.vote-candidate__media--initial{ aspect-ratio: 3/1; }

/* SSA Member / Verified labels and the SSA interview video (Business Directory) */
.biz-badge--video{ background: #FBEDEF; color: var(--crimson); border: 1px solid #F0C9CF; }
.biz-interview{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; align-items: start; }
.biz-interview__yt{ aspect-ratio: 16/9; background: #000; border-radius: 4px; overflow: hidden; }
.biz-interview__yt iframe{ width: 100%; height: 100%; border: 0; display: block; }
.biz-interview__ig{ max-width: 34rem; width: 100%; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.biz-interview__ig iframe{ width: 100%; height: 640px; border: 0; display: block; }
.biz-interview__links{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* ── SSA status labels: Sponsor (crimson ★) · Member (gold) · Verified (green) ──
   Directory cards: tabs hanging from the card's top edge, in normal flow so
   several labels wrap instead of overlapping the logo/name. Profile header:
   the same colors as solid pills. Icon + text on each (never color alone);
   contrast — white/crimson 7.6:1, navy/gold 8.2:1, white/green 6.6:1. */
:root{
  --ssa-sponsor: var(--crimson);
  --ssa-member: #E3B341;  --ssa-member-ink: #10243F;
  --ssa-verified: #1E6B52;
}
.biz-card__ribbons{
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem;
  margin: -1.75rem -1.1rem 1.1rem;
}
.biz-ribbon{
  display: inline-flex; align-items: center; gap: .28rem; white-space: nowrap;
  font: 700 .625rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  padding: .5rem .5rem .45rem; border-radius: 0 0 7px 7px;
}
.biz-ribbon svg{ width: .85rem; height: .85rem; flex: none; }
.biz-ribbon--sponsor{ background: var(--ssa-sponsor); color: #fff; box-shadow: 0 10px 18px -10px rgba(150,24,43,.6); }
.biz-ribbon--member{ background: var(--ssa-member); color: var(--ssa-member-ink); box-shadow: 0 10px 18px -10px rgba(170,120,20,.65); }
.biz-ribbon--verified{ background: var(--ssa-verified); color: #fff; box-shadow: 0 10px 18px -10px rgba(30,107,82,.6); }
/* A labeled card also gets its top border in the strongest label's color. */
.biz-card:has(.biz-ribbon--verified){ border-top-color: var(--ssa-verified); }
.biz-card:has(.biz-ribbon--member){ border-top-color: var(--ssa-member); }
.biz-card:has(.biz-ribbon--sponsor){ border-top-color: var(--ssa-sponsor); }

.biz-badge--member{ background: var(--ssa-member); color: var(--ssa-member-ink); }
.biz-badge--verified{ background: var(--ssa-verified); color: #fff; }
/* Profile header (dark navy): status pills a touch larger with a light ring so they read on navy. */
.biz-badges--hero .biz-badge--sponsor,
.biz-badges--hero .biz-badge--member,
.biz-badges--hero .biz-badge--verified{ font-size: .75rem; padding: .5rem .85rem; box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.biz-badges--hero .biz-badge--sponsor svg,
.biz-badges--hero .biz-badge--member svg,
.biz-badges--hero .biz-badge--verified svg{ width: 1rem; height: 1rem; }

/* ═══════════════ Accessibility pass (2026-10-11 site audit) ═══════════════
   - Tap targets ≥ 24×24px (WCAG 2.2 target size): hit areas grow via padding
     balanced by negative margin, so nothing moves visually.
   - Small uppercase labels raised from 10–11px to 12px.
   - Out-of-month calendar day numbers: silver (3:1) → silver-tx (≈4.8:1). */
@media (min-width: 1081px){
  .nav__toggle{ width: 28px; height: 28px; margin: -5px; }
}
.foot__contact a:not(.social__link){ display: inline-block; padding-block: .3rem; margin-block: -.3rem; }
.album-back{ padding-block: .6rem; margin-top: -.6rem; margin-bottom: .9rem; }
.give__cta{ min-height: 24px; }

.eyebrow,
.field-label,
.facts dt,
.person-card__role,
.cal-filter label,
.cal-grid__weekday,
.biz-card__tag,
.cal-chip__time,
.hours__status,
.biz-badge,
.vote-label,
.vote-chip{ font-size: .75rem; }
.contact dt,
.navmeta__list dt,
.foot__label,
.vision__label{ font-size: .75rem; }
.biz-ribbon{ font-size: .6875rem; }

.cal-cell--outside .cal-cell__num{ color: var(--silver-tx); }
.hours__status{ color: var(--silver-tx); }

/* Community Calendar on phones: compact event markers in the month grid +
   a readable agenda list below it (community-calendar.blade.php). */
.cal-agenda{ display: none; }
@media (max-width: 720px){
  .cal-chip{ position: relative; justify-content: center; min-height: 24px; padding: .2rem; }
  .cal-chip__time{ display: none; }
  .cal-chip__title{ position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .cal-chip__dot{ width: .7rem; height: .7rem; }
  .cal-agenda{ display: block; margin-top: 1.75rem; }
  .cal-agenda__h{ font: 500 1.375rem/1.2 var(--display); color: var(--navy); margin-bottom: .85rem; }
  .cal-agenda__list{ display: grid; gap: .5rem; list-style: none; padding: 0; }
  .cal-agenda__item{
    display: grid; grid-template-columns: 3rem 1fr auto; gap: .85rem; align-items: center;
    padding: .7rem .85rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px;
    text-decoration: none; color: var(--navy);
  }
  .cal-agenda__date{ display: flex; flex-direction: column; align-items: center; font: 500 .75rem var(--mono); text-transform: uppercase; color: var(--crimson); }
  .cal-agenda__date strong{ font: 500 1.375rem/1.1 var(--display); color: var(--navy); }
  .cal-agenda__body{ display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
  .cal-agenda__title{ font-weight: 600; font-size: .9375rem; line-height: 1.35; overflow-wrap: anywhere; }
  .cal-agenda__meta{ font-size: .8125rem; color: var(--text-mid); }
}