/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* ============================================================
   CITY SHUL - CHILD THEME STYLESHEET (cleaned consolidation)
   Project: cityshul | 2026-06-12
   Layout lives in Fusion Builder; this file is paint only.
   ============================================================ */

/* ===== City Shul tokens - Visual Identity p.15 =====
   Palette is closed. Do not add hues outside this block.
   Values taken from the REVISED Brand Identity colour page, which
   corrected the earlier deck's Pale Purple hex typo and its duplicated
   Pale Blue / Black entries. Do not re-import from the older deck.
   ================================================================== */
:root {
  --cs-red:         #a71e33;
  --cs-blue:        #5779bc;   /* LARGE TEXT / DECORATIVE ONLY.
                                  White on this = 4.32:1, fails AA for
                                  normal text. Never a small-text bg. */
  --cs-purple:      #9e287f;
  --cs-dark-blue:   #0f5195;
  --cs-pale-purple: #e8e3f1;   /* PMS 2635  */
  --cs-pale-blue:   #dee5f4;   /* PMS 538C  */
  --cs-grey:        #595959;   /* PMS 425C  */
  --cs-black:       #0a0a0a;   /* PMS Black 6C */
  --cs-white:       #ffffff;

  /* Derived - neutral only, no new hues */
  --cs-line:      rgba(10,10,10,.12);
  --cs-shadow:    0 18px 45px -22px rgba(10,10,10,.28);
  --cs-shadow-sm: 0 8px 22px -14px rgba(10,10,10,.32);

  --cs-radius:    12px;
  --cs-radius-lg: 28px;
}









/* ===== Avada flex containers: stack rows vertically ===== */
.section-hero,
.section-events,
.section-media,
.section-quote,
.section-subscribe,
.section-footer {
  flex-direction: column !important;
}

/* ===== Global page padding (intentional site-wide gutter) ===== */
#main {
	margin-top:-20px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   HEADER (Layout Section: Shul Header)
   ============================================================ */
.header-logo img {
  width: 180px;
  height: auto;
}
.header-main-menu .awb-menu__main-ul {
  gap:20px;
}
.header-utility-menu .awb-menu__main-ul {
  gap: 10px;
  align-items: center;
}
/* Donate as a filled text button (menu item c#mainlass: cs-donate) */
.header-utility-menu .cs-donate > a {
  background-color: var(--cs-purple);
  color: #ffffff !important;
  padding: 9px 20px;
  border-radius: 4px;
}
.header-utility-menu .cs-donate > a:hover {
  background-color: var(--cs-dark-blue);
}


/* ============================================================
   INTERIOR PAGE HERO OVERLAY  (global)
   Puts the purple wash behind the transparent header on every
   interior page, matching the homepage hero. Also restores nav
   contrast (light menu over purple, not bare paper).
   ============================================================ */
.cs-phero {
  background-color: var(--cs-purple);
  background-image: linear-gradient(155deg,
                      var(--cs-purple) 0%,
                      var(--cs-dark-blue) 100%);
}

/* Headline + lede flip to light on the band */
.cs-phero .cs-h1 h1  { color: #ffffff; }
.cs-phero .cs-lede p { color: rgba(255,255,255,.85); }
.cs-phero .cs-accent { color: var(--cs-red); }   /* accent word - white on the band */

/* Eyebrow -> gold so it reads on purple */
.cs-phero .cs-eyebrow,
.cs-phero .cs-eyebrow * { color: var(--cs-red) !important; }
.cs-phero .cs-eyebrow--tick::before { background-color: var(--cs-red) !important; }

/* Arc deco for .cs-phero is defined once, further down (search cs-phero::before).
   The duplicate that used to live here never applied - it was overridden by
   the later rule with identical specificity. */




/***BEN FIXING IMAGES **/
img {
	border-radius:14px;
}



/* ============================================================
   SECTION 1 - HERO
   ============================================================ */
/* Purple wash over the background slider.
   NOTE: lives on the slider layer, NOT .section-hero::after -
   Avada claims the container's pseudo-elements for its
   pattern/mask background features. */
/* Hero slider wash REMOVED per brand feedback: primary hero imagery
   shows full colour, full resolution, no tint. Tile tints below stay.

   In its place, the brand arch asset (city-curve-lines-blue-light.png)
   as a translucent layer over the image, per Brand Identity "Graphics"
   example (A). Anchored left and cropped by the container - cropping
   is permitted, distortion is not, so the box is held at the asset's
   true 800:1346 ratio and background-size is contain.
   Lives on the slider layer, NOT .section-hero::after - Avada claims
   the container's pseudo-elements for its own pattern/mask features. */
.section-hero .awb-background-slider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  height: 520px;
  width: 400px;          /* 673 x (800/1346). Change BOTH or you
                            distort the shape - see brand rules above. */
  background: var(--g-arch-blue) no-repeat center;
  background-size: contain;
  opacity: .55;
  z-index: 2;            /* swiper slides sit at 1 */
  pointer-events: none;
}
.section-hero .hero-card {
  background-color: #ffffff;
  border-radius: var(--cs-radius);
  box-shadow: 0 8px 28px rgba(10,10,10,.15);
}
/* Avada inlines font-size:1em on heading tags - size the
   wrapper (heading inherits), color the heading. */
.section-hero .hero-title {
  font-size: var(--fs-h3);
}
.section-hero .hero-title h1 {
  color: var(--cs-dark-blue);
  line-height: 1.2;
}
.section-hero .hero-text p {
  color: var(--cs-grey);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ============================================================
   SECTIONS 2 + 3 - UPCOMING EVENTS / WATCH & LISTEN (cards)
   ============================================================ */
/* Card surface = column INNER wrapper, never the column itself
   (Avada applies the gutter as padding on the column - painting
   the column fills the gutter and cards appear to touch). */
.section-events .event-card > .fusion-column-wrapper,
.section-media .media-card > .fusion-column-wrapper {
  background-color: #ffffff;
  border-radius: var(--cs-radius);
  box-shadow: 0 4px 16px rgba(15, 81, 149, 0.08);
}
.section-events .section-title,
.section-media .section-title {
  font-size: var(--fs-lead-sm); /* wrapper carries size */
}
.section-media .section-title h2 {
  color: var(--cs-purple); /* Watch & Listen title is magenta */
}
.section-events .card-title h3,
.section-media .card-title h3 {
  color: var(--cs-dark-blue);
  font-size: var(--fs-body);
  line-height: 1.35;
}
.section-events .card-text p,
.section-media .card-text p {
  color: var(--cs-grey);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ===== Card image tint (site-wide utility) ===== */
.cs-img-tint {
  display: block; /* imageframe renders as a span - won't clip otherwise */
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.cs-img-tint::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(158, 40, 127, 0.28); /* City Purple wash - tune */
  pointer-events: none;
}
.cs-img-tint--blue::after {
  background-color: rgba(87, 121, 188, 0.28); /* City Blue variant - matched to purple */
}

/* ============================================================
   SECTION 4 - QUOTE BAND
   ============================================================ */
.section-quote .quote-title {
  font-size: var(--fs-h4);
}
.section-quote .quote-title h2 {
  color: #ffffff;
  line-height: 1.3;
}
.section-quote .quote-attr p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-sm);
}
.section-quote .quote-text p {
  color: #ffffff;
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* ============================================================
   SECTION 5 - SUBSCRIBE BAND
   ============================================================ */
.section-subscribe .subscribe-title {
  font-size: var(--fs-h4);
}
.section-subscribe .subscribe-title h2 {
  color: #ffffff;
}
/* Underline-style form fields on purple */
.section-subscribe .fusion-form label {
  color: #ffffff;
  font-size: var(--fs-sm);
}
.section-subscribe .fusion-form input[type="text"],
.section-subscribe .fusion-form input[type="email"] {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0;
  box-shadow: none;
  color: #ffffff;
}
.section-subscribe .fusion-form input[type="text"]:focus,
.section-subscribe .fusion-form input[type="email"]:focus {
  border-bottom-color: #ffffff;
}
.section-subscribe .fusion-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   FOOTER (Layout Section: Shul Footer)
   ============================================================ */
.section-footer .footer-logo img {
  width: 200px;
  height: auto;
}
.section-footer .footer-contact p,
.section-footer .footer-contact a {
  color: var(--cs-dark-blue);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.section-footer .footer-urj {
  display: block;
  text-align: right;
}
.section-footer .footer-urj img {
  width: 70px;
  height: auto;
}
.section-footer .footer-legal p {
  text-align: center;
  font-size: var(--fs-sm);
}
.section-footer .footer-legal a {
  color: var(--cs-grey);
}
.section-footer .footer-fineprint p,
.section-footer .footer-fineprint a {
  color: var(--cs-grey);
  font-size: var(--fs-label);
}





/* ============================================================
   CITY SHUL - INTERIOR PAGES STYLESHEET
   Append to the child theme style.css (BELOW the :root tokens
   block from cityshul-child-theme.css - this file reuses
   --cs-* and the .cs-img-tint utility defined there).
   Paint only. Layout (widths, columns, padding, gutters) is
   owned by Avada in the builder.
   ============================================================ */

/* Avada flex containers: stack rows vertically */
.cs-section,
.cs-intro {
  flex-direction: column !important;
}

/* ===== Section bands ===== */
.cs-section--alt {
  background-color: var(--cs-pale-purple); /* #E7E4F1 */
}

/* ===== Intro (centered title + hero) ===== */
.cs-intro .cs-h1,
.cs-intro .cs-lede p {
  text-align: center;
}

/* ===== Page hero image ===== */
.cs-page-hero {
  display: block;             /* imageframe is a span - needed to clip radius */
  border-radius: var(--cs-radius);
  overflow: hidden;
  margin-bottom: 28px;
}

/* ===== Headings (size on wrapper, colour on tag - Avada
   inlines font-size:1em on the heading element itself) ===== */
.cs-h1 {
  font-size: var(--fs-h1);
}
.cs-h1 h1 {
  color: var(--cs-dark-blue);
  line-height: 1.15;
}
.cs-h2 {
  font-size: var(--fs-h4);
}
.cs-h2 h2 {
  color: var(--cs-dark-blue);
  line-height: 1.25;
}
.cs-h3 {
  font-size: var(--fs-lg);
}
.cs-h3 h3 {
  color: var(--cs-purple);
  line-height: 1.3;
}

/* ===== Body copy ===== */
.cs-lede p {
  color: var(--cs-dark-blue);
  font-size: var(--fs-lg);
  line-height: 1.6;
}
.cs-body p {
  color: var(--cs-grey);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.cs-body p:last-child {
  margin-bottom: 0;
}
.cs-list ul {
  color: var(--cs-grey);
  font-size: var(--fs-body);
  line-height: 1.8;
}

/* ===== Value cards (Mission & Vision "Our Values") =====
   Surface on the column INNER wrapper, never the column - so
   Avada's gutter stays a gap between cards (same rule as the
   homepage event/media cards). */
.cs-value-card > .fusion-column-wrapper {
  background-color: #ffffff;
  border-radius: var(--cs-radius);
  box-shadow: 0 4px 16px rgba(15, 81, 149, 0.08);
}

/* NOTE on line length: prose columns are 1_1 (full site width)
   per the no-max-width rule. If the measure reads too wide,
   narrow the prose column in the builder (e.g. 4_5 or 3_4,
   centered) - a native column change, not a CSS max-width. */




/* Full-width template: re-centre each band's content row.
   The outer content row is max-width:100% (full viewport), so Avada
   doesn't centre the inner rows - they carry symmetric gutter margins,
   not auto, and pin left on wide screens. auto margins on the flex-item
   row absorb the free space and centre it. Band backgrounds stay
   full-bleed (they're on the container, not the row). */
.fusion-flex-container > .fusion-builder-row.fusion-row {
  margin-left: auto !important;
  margin-right: auto !important;
}





/* ===== Interior design kit (bands / eyebrows / image rows / CTA) ===== */
.cs-band, .cs-band--intro, .cs-band--lav, .cs-band--blue, .cs-band--purple {
  flex-direction: column !important;
}
.cs-band--lav    { background-color: var(--cs-pale-purple); }
.cs-band--blue   { background-color: var(--cs-blue); }
.cs-band--purple { background-color: var(--cs-purple); }

/* Inverted text on colour bands */
.cs-band--blue .cs-h2 h2,
.cs-band--purple .cs-h2 h2,
.cs-band--blue .cs-body p,
.cs-band--purple .cs-body p,
.cs-band--blue .cs-lede p,
.cs-band--purple .cs-lede p {
  color: #ffffff;
}

/* Eyebrow (icon list-item kicker) */
.cs-eyebrow { margin-bottom: 6px; }
.cs-eyebrow .fusion-li-item-content,
.cs-eyebrow li {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cs-purple);
}

/* Feature image in side-by-side rows */
.cs-feature-img {
  display: block;
  border-radius: var(--cs-radius);
  overflow: hidden;
}

/* Intro + statement + CTA centering */
.cs-band--intro .cs-h1,
.cs-band--intro .cs-lede p { text-align: center; }
.cs-band--intro .cs-eyebrow { text-align: center; }
.cs-band--intro .cs-eyebrow ul { display: inline-block; }
.cs-body--center p { text-align: center; }

/* Light CTA button on colour bands */
.cs-btn-light {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--cs-purple) !important;
}
.cs-btn-light:hover {
  background-color: var(--cs-dark-blue) !important;
  border-color: var(--cs-dark-blue) !important;
  color: #ffffff !important;
}





/* ============================================================
   LEADERSHIP & STAFF (Team) page
   Append to the interior stylesheet. Reuses the interior kit
   (.cs-band, .cs-eyebrow, .cs-h1/2, .cs-lede). Paint only.
   ============================================================ */

/* Section heading block (eyebrow + H2) centred above each grid */
.cs-team-head { text-align: center; }
.cs-team-head .cs-eyebrow { text-align: center; }
.cs-team-head .cs-eyebrow ul { display: inline-block; }

/* Card surface = column INNER wrapper, never the column itself
   (keeps the 32px gutters; same rule we use on the homepage cards) */
.cs-band .cs-team-card > .fusion-column-wrapper {
  background-color: #ffffff;
  border-radius: var(--cs-radius);
  box-shadow: 0 4px 16px rgba(15, 81, 149, 0.08);
}

/* Photo - rounded, full-bleed to the card, intentionally NOT tinted
   (faces shouldn't get the purple wash) */
.cs-team-photo {
  display: block;
  border-radius: var(--cs-radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.cs-team-photo img {
  display: block;
  width: 100%;
  height: auto;
}
/* Missing-photo placeholder (Amy Madras) - soft lavender block */
.cs-team-photo--missing {
  background-color: var(--cs-pale-purple);
  min-height: 220px;
}

/* Name / role / email */
.cs-team-name h3 {
  color: var(--cs-dark-blue);
  font-size: var(--fs-lg);
  line-height: 1.3;
  margin-bottom: 2px;
}
.cs-team-role p {
  color: var(--cs-purple);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cs-team-email p,
.cs-team-email a {
  color: var(--cs-grey);
  font-size: var(--fs-sm);
  word-break: break-word;
}
.cs-team-email a:hover { color: var(--cs-purple); }

/* Bio toggle - quiet until opened. Avada renders the wrapper as
   .fusion-accordian and the clickable title as .fusion-toggle-heading.
   Verify these against the live DOM and ping me if they differ. */
.cs-team-accordion { margin-top: 10px; }
.cs-team-accordion .fusion-toggle-heading {
  color: var(--cs-blue);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.cs-team-accordion .fusion-panel,
.cs-team-accordion .panel-title a {
  border: 0 !important;
  padding-left: 0;
  padding-right: 0;
}
.cs-team-bio p {
  color: var(--cs-grey);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.cs-team-bio p:not(:last-child) { margin-bottom: 12px; }



/* ============================================================
   CITY SHUL - "RADIANT EDITORIAL" foundation + ABOUT page
   Append below the existing child-theme CSS. Paint only;
   layout (widths, padding, column types) lives in Fusion.
   Font: add Poppins (all weights) via Avada -> Typography /
   Custom Fonts; do NOT load Google Fonts here.
   ============================================================ */

/* ===== Type token =====
   Off-brand paint tokens (paper, paper-2, ink, gold, gold-soft) were
   removed here; all colour now resolves from the palette block above. */
:root {
  /* Poppins is the ONLY brand typeface (Visual Identity p.12).
     Add it via Avada -> Theme Options -> Typography. If Avada exposes
     a different family name, change it here only. */
  --cs-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ===== Type scale - 11 steps, replaces 26 ad-hoc sizes ===== */
  --fs-display: 60px;   --fs-h1:    42px;   --fs-h2:   36px;
  --fs-h3:      30px;   --fs-h4:    26px;   --fs-lead: 24px;
  --fs-lead-sm: 22px;   --fs-lg:    18px;   --fs-body: 16px;
  --fs-sm:      14px;   --fs-label: 12px;

  /* ===== Brand graphic assets (media library, verified live) =====
     Base: https://cityshul.ca/wp-content/uploads/2026/07/

     SIX SHAPE FAMILIES x FOUR COLOURS. Exact filenames - the naming
     is NOT consistent, do not pattern-guess:
       curve-*            quarter round     1016x856   ratio 1.187
       city-curve-lines-* concentric arch    800x1346  ratio 0.594
       lines-*            diagonal stripes  1040x1140  ratio 0.912
       angled-*           wedge              549x1621  ratio 0.339
       circle-*           solid circle       839x839   ratio 1.000
       flat-lines-*       straight stripes  1984x536   ratio 3.702

     Colour suffixes:  -red  -purple  -blue (DARK blue #0f5195)
       and City Blue #5779bc is:
         -light-blue  on angled / circle / lines / flat-lines
         -blue-light  on curve / city-curve-lines
       (curve-light-blue.png and city-curve-lines-light-blue.png 404)

     NOTE: angled-blue.png and angled-blue-1.png are identical
     duplicates - delete the -1 in Media Library.

     BRAND RULES (Brand Identity, "Graphics"):
       - use purposefully and sparingly; support, don't compete
       - may be cropped
       - NEVER distort - always size to the ratios above, or use
         background-size: contain
       - straight line stripes are the only shape exempt from the
         no-distortion rule
     ================================================================ */
  --g-base:       https://cityshul.ca/wp-content/uploads/2026/07;
  --g-arch-blue:  url("https://cityshul.ca/wp-content/uploads/2026/07/city-curve-lines-blue-light.png");
}

/* ===== Stack rows on the new containers ===== */
.cs-phero, .cs-block, .cs-give { flex-direction: column !important; }

/* ===== Band backgrounds ===== */
.cs-block { background-color: var(--cs-white); }   /* .cs-phero keeps its gradient */
.cs-block.cs-tint    { background-color: var(--cs-pale-purple); }

/* ===== Accent word (hero/phero headlines) - Poppins 700 ===== */
.cs-accent {
  font-family: var(--cs-sans);
  font-weight: 400;
  color: var(--cs-purple);
}

/* ===== Eyebrow (purple kicker; --tick adds the dash) ===== */
.cs-eyebrow, .cs-eyebrow p {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cs-purple);
  margin-bottom: 8px;
}
.cs-eyebrow--tick p::before,
.cs-eyebrow--tick::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--cs-purple);
  vertical-align: middle;
}

/* ===== Headlines ===== */
.cs-phero .cs-h1 { font-size: var(--fs-h1); }
.cs-phero .cs-h1 h1 { color: #ffffff; line-height: 1.05; letter-spacing: -.02em; }
.cs-phero .cs-lede p { color: var(--cs-grey); font-size: var(--fs-lg); line-height: 1.6; max-width: 60ch; }

/* ===== Buttons (pills; override Avada defaults) ===== */
.fusion-button.cs-btn {
  border-radius: 999px !important;
  border-width: 2px !important;
  border-style: solid !important;
  font-weight: 600 !important;
  font-size: var(--fs-body) !important;
  padding: 13px 26px !important;
  transition: transform .25s, box-shadow .25s !important;
}
.fusion-button.cs-btn:hover { transform: translateY(-2px) !important; box-shadow: var(--cs-shadow-sm) !important; }
.fusion-button.cs-btn-primary, .fusion-button.cs-btn-primary .fusion-button-text { background: var(--cs-dark-blue) !important; border-color: var(--cs-dark-blue) !important; color: #fff !important; }
.fusion-button.cs-btn-ghost, .fusion-button.cs-btn-ghost .fusion-button-text { background: transparent !important; border-color: var(--cs-line) !important; color: var(--cs-dark-blue) !important; }
.fusion-button.cs-btn-gold, .fusion-button.cs-btn-gold .fusion-button-text { background: var(--cs-red) !important; border-color: var(--cs-red) !important; color: #ffffff !important; }
.fusion-button.cs-btn-ghost-light, .fusion-button.cs-btn-ghost-light .fusion-button-text { background: transparent !important; border-color: rgba(255,255,255,.5) !important; color: #fff !important; }

/* ===== Arc decoration (CSS data-URI; survives the editor) ===== */
/* .cs-phero { position: relative; overflow: hidden; }
.cs-phero::before {
  content: "";
  position: absolute;
  top: 24px; right: 28px;
  width: 170px; height: 170px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M110 110a100 100 0 0 0-100-100' stroke='%23ffffff'/%3E%3Cpath d='M110 110a72 72 0 0 0-72-72' stroke='%23e8e3f1'/%3E%3Cpath d='M110 110a44 44 0 0 0-44-44' stroke='%23dee5f4'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  background-size: contain;   
  opacity: .55; pointer-events: none; z-index: 0;
}
 */
/* ============================================================
   BLOCK 2 - STORY (image + text, floating stat chip)
   ============================================================ */
.cs-serif-lead p {
  font-family: var(--cs-sans);
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--cs-black);
  margin-bottom: 18px;
}
.cs-block .cs-body p { color: var(--cs-grey); font-size: var(--fs-body); line-height: 1.7; margin-bottom: 14px; }
.cs-stxt .fusion-button-wrapper { display: inline-block; margin: 26px 12px 0 0; }

/* Image column is the positioning context for the stat chip */
.cs-story-img { position: relative; }
.cs-story-img .cs-story-photo {
  display: block;
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  box-shadow: var(--cs-shadow);
}
.cs-story-img .cs-story-photo img { width: 100%; height: auto; display: block; }
.cs-story-img .cs-stat {
  position: absolute;
  left: 18px; bottom: 18px;
  background: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: var(--cs-shadow-sm);
	z-index: 22;
}
.cs-stat b { display: block; font-family: var(--cs-sans); font-size: var(--fs-h3); color: var(--cs-dark-blue); line-height: 1; }
.cs-stat span { font-size: var(--fs-sm); color: var(--cs-grey); }

/* ============================================================
   BLOCK 3 - TIMELINE
   ============================================================ */
.cs-shead { margin-bottom: 30px; }
.cs-shead .cs-h2 h2 { color: var(--cs-dark-blue); font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em; }
.cs-shead .cs-shead-note p { color: var(--cs-grey); font-size: var(--fs-body); margin-top: 8px; }

.cs-tline { position: relative; padding-left: 28px; border-left: 2px solid var(--cs-line); padding-bottom: 26px; }
.cs-tline::before {
  content: "";
  position: absolute; left: -8px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cs-grey);
}
.cs-tline--red::before    { background: var(--cs-red); }
.cs-tline--purple::before { background: var(--cs-purple); }
.cs-tline--navy::before   { background: var(--cs-dark-blue); }
.cs-tline--gold::before   { background: var(--cs-red); }
.cs-tline-yr p { font-family: var(--cs-sans); font-size: var(--fs-lg); margin-bottom: 2px; }
.cs-tline--red .cs-tline-yr p    { color: var(--cs-red); }
.cs-tline--purple .cs-tline-yr p { color: var(--cs-purple); }
.cs-tline--navy .cs-tline-yr p   { color: var(--cs-dark-blue); }
.cs-tline--gold .cs-tline-yr p   { color: var(--cs-red); }
.cs-tline-h3 h3 { color: var(--cs-dark-blue); font-size: var(--fs-body); margin-bottom: 4px; }
.cs-tline-body p { color: var(--cs-grey); font-size: var(--fs-sm); line-height: 1.65; }

/* ============================================================
   BLOCK 4 - LEADERSHIP cards (real headshots)
   ============================================================ */
.cs-tcard > .fusion-column-wrapper {
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius-lg);
  text-align: center;
}
.cs-tcard-photo {
  display: block;
  width: 84px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
}
.cs-tcard-photo img { width: 84px; height: 84px; object-fit: cover; display: block; }
.cs-tcard-name h3 { color: var(--cs-dark-blue); font-size: var(--fs-lg); }
.cs-tcard-role p { color: var(--cs-purple); font-size: var(--fs-sm); font-weight: 600; margin-top: 4px; }
.cs-tcard-line p { color: var(--cs-grey); font-size: var(--fs-sm); line-height: 1.6; margin-top: 10px; }

/* ============================================================
   BLOCK 5 - CHARACTER / value cards
   ============================================================ */
.cs-vcard > .fusion-column-wrapper {
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
}
.cs-vic {
/*   width: 46px; height: 46px; */
  border-radius: 13px;
/* 	border-radius:50%; */
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-lead-sm);
  margin-bottom: 14px;
}
.cs-vic--navy   { background: rgba(15,81,149,.12); }
.cs-vic--purple { background: rgba(158,40,127,.13); }
.cs-vic--red    { background: rgba(167,30,51,.12); }
.cs-vic--gold   { background: rgba(167,30,51,.12); }
.cs-vic--blue   { background: rgba(87,121,188,.16); }
.cs-vic--grey   { background: rgba(107,112,105,.16); }
.cs-vcard-title h3 { color: var(--cs-dark-blue); font-size: var(--fs-lg); }
.cs-vcard-body p { color: var(--cs-grey); font-size: var(--fs-body); line-height: 1.6; margin-top: 8px; }

/* ============================================================
   BLOCK 6 - GIVE band (red, rounded, inset)
   ============================================================ */
.cs-give {
  background: var(--cs-red);
  color: #fff;
  border-radius: 42px;
  margin: 30px 16px 0 !important;
  position: relative;
  overflow: hidden;
}
.cs-give .cs-eyebrow, .cs-give .cs-eyebrow p { color: var(--cs-pale-purple); }
.cs-give .cs-h2 h2 { color: #fff; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.02em; }
.cs-give .cs-give-body p { color: rgba(255,255,255,.92); font-size: var(--fs-body); line-height: 1.6; margin-top: 10px; }
.cs-give .fusion-button-wrapper { display: inline-block; margin: 0 10px 10px 0; }
.cs-give::before {
  content: "";
  position: absolute; left: -10px; bottom: -10px;
  width: 150px; height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M10 110a100 100 0 0 1 100-100'/%3E%3Cpath d='M10 110a72 72 0 0 1 72-72'/%3E%3Cpath d='M10 110a44 44 0 0 1 44-44'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  background-size: contain;   /* brand rule: never distort the shapes */
  opacity: .35; pointer-events: none;
}

/* ============================================================
   OPTIONAL - editorial column width (the design's 1180px).
   Uncomment to narrow these pages from the 1700 site width to
   the tighter editorial measure. Scoped to the new bands only.
   ============================================================ */
/*
.cs-phero > .fusion-row,
.cs-block > .fusion-row {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
*/






/* ============================================================
   CITY SHUL - WORSHIP page components
   Append below the About CSS. Reuses the foundation tokens,
   .cs-vcard/.cs-vic (icon cards), .cs-shead, .cs-give.
   ============================================================ */

/* Stack rows on the new bands + cap their content at 1180 */
.cs-newhere, .cs-quote { flex-direction: column !important; }
.cs-newhere > .fusion-builder-row.fusion-row,
.cs-quote   > .fusion-builder-row.fusion-row {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Gold eyebrow variant (on dark bands) */
.cs-eyebrow--gold, .cs-eyebrow--gold p { color: var(--cs-red); }

/* ============================================================
   SCHEDULE - stacked white cards, three cells each
   ============================================================ */
.cs-sched-head .cs-shead { margin-bottom: 0; }
.cs-srow { margin-bottom: 14px; }
.cs-srow > .fusion-column-wrapper {
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
}
.cs-sname h4 { color: var(--cs-dark-blue); font-size: var(--fs-body); line-height: 1.2; }
.cs-heb {
  font-family: var(--cs-sans);
  font-weight: 400;
  color: var(--cs-purple);
  font-size: var(--fs-sm);
  margin-left: 6px;
}
.cs-sdesc p { color: var(--cs-grey); font-size: 13.5px; line-height: 1.55; margin-top: 4px; }
.cs-swhen p { color: var(--cs-dark-blue); font-size: var(--fs-sm); font-weight: 600; }
.cs-swhen-sub { display: block; color: var(--cs-grey); font-size: 12.5px; font-weight: 400; margin-top: 2px; }

/* Small pill button (schedule + nav-scale CTAs) */
.fusion-button.cs-btn-sm { padding: 9px 16px !important; font-size: var(--fs-sm) !important; }

/* ============================================================
   IMAGE + TEXT SPLIT (siddur)
   ============================================================ */
.cs-split-img {
  display: block;
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  box-shadow: var(--cs-shadow);
}
.cs-split-img img { width: 100%; height: auto; display: block; }

/* ============================================================
   QUOTE band (reusable - scatter across the site)
   purple->navy gradient, red quote mark, Poppins 500 blockquote
   ============================================================ */
.cs-quote {
  background: linear-gradient(135deg, var(--cs-blue), var(--cs-dark-blue));
/*   color: #fff; */
  border-radius: 42px;
  margin: 30px 16px 0 !important;
  position: relative;
  overflow: hidden;
}
.cs-qmark p {
  font-family: var(--cs-sans);
  font-size: var(--fs-display);
  line-height: .6;
  color: var(--cs-dark-blue);
  margin-bottom: 8px;
}
.cs-quote-text p {
  font-family: var(--cs-sans);
  font-size: var(--fs-h3);
  line-height: 1.3;
/*   color: #fff; */
  max-width: 34ch;
}
.cs-quote-cite p {
  margin-top: 18px;
  font-size: var(--fs-body);
  font-weight: 500;
/*   color: rgba(255,255,255,.8); */
}
.cs-quote::before {
  content: "";
  position: absolute; right: -50px; bottom: -50px;
  width: 260px; height: 260px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M110 110a100 100 0 0 0-100-100'/%3E%3Cpath d='M110 110a72 72 0 0 0-72-72'/%3E%3Cpath d='M110 110a44 44 0 0 0-44-44'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  background-size: contain;   /* brand rule: never distort the shapes */
  opacity: .25; pointer-events: none;
}

/* ============================================================
   NEWHERE / High Holidays band (dark ink, 3 steps)
   ============================================================ */
.cs-newhere {
  background: var(--cs-dark-blue);
  color: #fff;
  border-radius: 42px;
  margin: 30px 16px 0 !important;
  position: relative;
  overflow: hidden;
}
.cs-newhere .cs-h2 h2 { color: #fff; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.02em; }
.cs-nh-lead p { color: rgba(255,255,255,.8); font-size: var(--fs-body); line-height: 1.6; max-width: 64ch; margin-top: 10px; }
.cs-step > .fusion-column-wrapper {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--cs-radius-lg);
}
.cs-step-num p { font-family: var(--cs-sans); font-size: var(--fs-h2); line-height: 1; color: var(--cs-red); margin-bottom: 8px; }
.cs-step-h3 h3 { color: #fff; font-size: var(--fs-lg); margin-bottom: 6px; }
.cs-step-body p { color: rgba(255,255,255,.72); font-size: var(--fs-body); line-height: 1.6; }
.cs-step-body a { color: var(--cs-red); }







/*BEN FIX ON ICONS IMAGES*/
.cs-vic img {
	width:60px!important;
	height:60px!important;
}




/* ============================================================
   CITY SHUL - CONTACT page components
   Append AFTER the Calendar CSS. Reuses foundation + buttons +
   the toggle/accordion pattern (FAQ).
   ============================================================ */

/* ===== Form card ===== */
.cs-form-card > .fusion-column-wrapper {
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-sm);
}
.cs-form-card .cs-h2 h2 { color: var(--cs-dark-blue); font-size: var(--fs-h4); margin: 10px 0 6px; }
.cs-formnote p { color: var(--cs-grey); font-size: var(--fs-sm); line-height: 1.6; }
.cs-gf-badge p { color: var(--cs-grey); font-size: var(--fs-label); margin-top: 8px; }

/* Avada form fields themed (build the contact form in Avada Form
   Builder, then drop it into .cs-form-card) */
.cs-form-card input[type="text"], .cs-form-card input[type="email"],
.cs-form-card input[type="tel"], .cs-form-card textarea, .cs-form-card select {
  width: 100%; font-size: var(--fs-body); padding: .8em 1em;
  border: 1.5px solid var(--cs-line); border-radius: 13px; background: var(--cs-white);
}
.cs-form-card input:focus, .cs-form-card textarea:focus, .cs-form-card select:focus {
  outline: none; border-color: var(--cs-blue); box-shadow: 0 0 0 4px rgba(87,121,188,.16);
}
.cs-form-card label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--cs-black); margin-bottom: 6px; }

/* ===== Info card (dark) ===== */
.cs-cinfo-card > .fusion-column-wrapper {
  background: radial-gradient(circle at bottom right, rgba(158,40,127,.4), transparent 55%), var(--cs-dark-blue);
  color: #fff;
  border-radius: var(--cs-radius-lg);
}
.cs-cinfo-card .cs-eyebrow, .cs-cinfo-card .cs-eyebrow p { color: #FFF; }
.cs-cinfo-card .cs-h2 h2 { color: #fff; font-size: var(--fs-lead-sm); margin: 10px 0 8px; }
.cs-cinfo-lead p { color: rgba(255,255,255,.75); font-size: 14.5px; line-height: 1.55; margin-bottom: 8px; }

.cs-ci-row { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.cs-ci-row:last-of-type { border-bottom: 0; }
.cs-ci-row, .cs-ci-row > p { display: flex; gap: 14px; align-items: flex-start; }
.cs-ci-row > p { margin: 0; }
.cs-ci-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); }
.cs-ci-tx { display: flex; flex-direction: column; }
.cs-ci-k { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: #FFF; font-weight: 700; }
.cs-ci-v { font-weight: 500; margin-top: 3px; color: #fff; font-size: var(--fs-body); }
.cs-ci-v small { color: rgba(255,255,255,.7); font-weight: 400; }
.cs-ci-v a { color: #FFF; }

/* Map placeholder (swap for a real Google Maps embed) */
.cs-map { position: relative; display: block; height: 200px; margin-top: 20px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, var(--cs-pale-blue), var(--cs-pale-purple)); }
.cs-map-pin { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%) rotate(-45deg); width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: var(--cs-red); }
.cs-map-label { position: absolute; left: 16px; bottom: 14px; background: #fff; border-radius: 11px; padding: 8px 13px; font-size: var(--fs-sm); font-weight: 600; color: var(--cs-dark-blue); }

/* ===== FAQ accordion ===== */
.cs-faq .fusion-toggle-heading { color: var(--cs-dark-blue); font-size: var(--fs-body); font-weight: 600; }
.cs-faq .fusion-panel { background: #fff !important; border: 1px solid var(--cs-line) !important; border-radius: var(--cs-radius) !important; margin-bottom: 12px; padding:20px!important; }
.cs-faq-body p { color: var(--cs-grey); font-size: 14.5px; line-height: 1.6; }















/* ============================================================
   CITY SHUL  -  About > Our Approach to Jewish Life
   Shared sub-page component kit (cs- BEM)  +  page specifics
   Append below the WP header comment in the child theme style.css.
   Reuses existing tokens (--cs-*) and the section-hero/hero-card
   rules already in the child theme.
   ============================================================ */

/* ---- Avada flex containers: stack rows vertically ---- */
.block,
.cs-cta-band { flex-direction: column !important; }

/* ---- Editorial content width (1180) for the new sections ---- */
.block > .fusion-builder-row.fusion-row,
.cs-cta-band > .fusion-builder-row.fusion-row {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Eyebrow kicker + tick (scoped, no global bleed) ---- */
.section-hero .eyebrow,
.block .eyebrow,
.cs-cta-band .eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cs-purple);
}
.block .eyebrow .tick,
.cs-cta-band .eyebrow .tick {
  display: inline-block;
  width: 26px; height: 2px;
  background: var(--cs-purple);
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 6px;
}
.cs-cta-band .eyebrow--soft { color: var(--cs-pale-purple); }

/* ---- Accent word in headings - Poppins 700 ---- */
.hero-title .accent,
.shead-title .accent {
  font-family: var(--cs-sans);
  font-weight: 400;
  color: var(--cs-purple);
}

/* ============================================================
   PROSE LEAD
   ============================================================ */
.cs-prose { max-width: 72ch; margin: 0 auto; }
.cs-prose .cs-prose__lead p {
  font-family: var(--cs-sans);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--cs-black);
}

/* ============================================================
   SECTION HEADING
   ============================================================ */
.shead-title { font-size: var(--fs-h2); }
.shead-title h2 { color: var(--cs-dark-blue); line-height: 1.15; letter-spacing: -.01em; }

/* ============================================================
   CARD GRID  (card paint on .fusion-column-wrapper to keep gutters)
   ============================================================ */
.cs-card .fusion-column-wrapper {
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius-lg);
}
.cs-card__ic {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  font-size: var(--fs-lead-sm);
  margin-bottom: 16px;
}
.cs-card__ic--navy   { background: rgba(15,81,149,.12); }
.cs-card__ic--purple { background: rgba(158,40,127,.13); }
.cs-card__ic--gold   { background: rgba(167,30,51,.12); }
.cs-card__ic--blue   { background: rgba(87,121,188,.16); }
.cs-card__ic--red    { background: rgba(167,30,51,.12); }
.cs-card .cs-card__title { font-size: var(--fs-lg); }
.cs-card .cs-card__title h3 { color: var(--cs-dark-blue); line-height: 1.25; }
.cs-card .cs-card__body p { font-size: var(--fs-body); color: var(--cs-grey); line-height: 1.6; margin-top: 9px; }

/* dark "Come curious" tile */
.cs-card--dark .fusion-column-wrapper {
  background: var(--cs-dark-blue);
  border-color: transparent;
  display: flex; flex-direction: column; justify-content: center;
}
.cs-card--dark .cs-card__title h3 { color: #ffffff; }
.cs-card--dark .cs-card__body p { color: rgba(255,255,255,.8); }
.cs-card-more a.more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-weight: 600; font-size: var(--fs-sm);
  color: var(--cs-red);
}
.more { color: var(--cs-dark-blue); font-weight: 600; font-size: var(--fs-sm); }

/* ============================================================
   CALLOUT  (left-aligned pull-quote block)
   ============================================================ */
.cs-callout .fusion-column-wrapper {
  background: var(--cs-pale-purple);
  border-radius: var(--cs-radius-lg);
}
.cs-callout .cs-callout__quote p {
  font-family: var(--cs-sans);
  font-size: var(--fs-h3);
  line-height: 1.32;
  color: var(--cs-black);
  max-width: 30ch;
  margin: 14px 0 0;
}
.cs-callout .cs-callout__body p {
  color: var(--cs-grey);
  font-size: var(--fs-lg);
  line-height: 1.7;
  max-width: 62ch;
  margin-top: 14px;
}

/* ============================================================
   CTA BAND  (gradient + radius set in the builder; paint here)
   ============================================================ */
.cs-cta-band__title { font-size: var(--fs-h1); }
.cs-cta-band__title h2 { color: #ffffff; line-height: 1.15; }
.cs-cta-band .cs-cta-band__body p { color: rgba(255,255,255,.85); font-size: var(--fs-body); line-height: 1.6; max-width: 46ch; }
.cs-cta-band__actions .fusion-button-wrapper { display: block; margin: 0 0 12px auto; text-align: right; }

/* ---- Pill buttons (.btn kit) - beat Avada defaults ---- */
.fusion-button.btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 13px 24px !important;
  border: 2px solid transparent !important;
}
.fusion-button.btn-gold, .fusion-button.btn-gold .fusion-button-text {
  background: var(--cs-red) !important; color: #ffffff !important; border-color: transparent !important;
}
.fusion-button.btn-ghost, .fusion-button.btn-ghost .fusion-button-text {
  background: transparent !important; border-color: var(--cs-line) !important; color: var(--cs-dark-blue) !important;
}
.fusion-button.btn-ghost-light, .fusion-button.btn-ghost-light .fusion-button-text {
  background: transparent !important; border-color: rgba(255,255,255,.5) !important; color: #ffffff !important;
}








/* ============================================================
   CITY SHUL  -  About > Vision & Mission
   ADDITIVE rules - append AFTER cityshul-our-approach.css (the kit).
   Adds: cs-feature blocks, the ink "newhere" band, green icon tint.
   ============================================================ */

/* newhere needs the column-stack fix + editorial width cap */
.newhere { flex-direction: column !important; }
.newhere > .fusion-builder-row.fusion-row {
  max-width: 1180px; margin-left: auto; margin-right: auto;
}

/* ---- FEATURE blocks (image + text, alternating) ---- */
.cs-feature__index p,
.cs-feature__index {
  font-family: var(--cs-sans);
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--cs-red);
  margin-bottom: 10px;
}
.cs-feature__eyebrow { margin-bottom: 12px; }
.cs-feature__title { font-size: var(--fs-h3); }
.cs-feature__title h2 { color: var(--cs-dark-blue); line-height: 1.2; letter-spacing: -.02em; }
.cs-feature__body p { color: var(--cs-grey); font-size: var(--fs-lg); line-height: 1.7; margin-top: 14px; }

/* media: positioning context for the caption pill */
.cs-feature__media .fusion-column-wrapper { position: relative; }
.cs-feature__img img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow);
}
.cs-feature__tag {
  position: absolute;
  left: 16px; bottom: 16px;
  background: #ffffff;
  border-radius: 13px;
  padding: 9px 14px;
  box-shadow: var(--cs-shadow-sm);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--cs-dark-blue);
  z-index: 2;
}
.cs-feature__tag p { margin: 0; }

/* ---- INK "newhere" band ---- */
.newhere .eyebrow {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.newhere .eyebrow--gold { color: var(--cs-red); }
.newhere .nh-title { font-size: var(--fs-h1); }
.newhere .nh-title h2 { color: #ffffff; ; line-height: 1.15; letter-spacing: -.01em; }
.newhere .nh-lead p {
  color: rgba(255,255,255,.78);
/*   max-width: 46ch; */
  font-size: var(--fs-body);
  line-height: 1.6;
  margin-top: 16px;
}

/* ---- extra icon tint ---- */
.cs-card__ic--green { background: rgba(87,121,188,.16); }











/* ============================================================
   CITY SHUL  -  About > What Makes City Shul Distinctive
   ADDITIVE - append AFTER the kit (our-approach.css) and
   vision-mission.css. Adds: centered callout, story/stat block,
   primary pill button. (cs-feature + cs-cta-band reused.)
   ============================================================ */

/* ---- Centered quote callout (+ citation) ---- */
.cs-callout--center { text-align: center; }
.cs-callout--center .cs-callout__quote p { margin-left: auto; margin-right: auto; }
.cs-callout__cite {
  margin-top: 18px;
  font-size: var(--fs-body);
  color: var(--cs-grey);
  font-weight: 500;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---- STORY block (text + portrait image + floating stat) ---- */
.stxt-title { font-size: var(--fs-h2); }
.stxt-title h2 { color: var(--cs-dark-blue); line-height: 1.2; letter-spacing: -.01em; }
.stxt p { color: var(--cs-grey); font-size: var(--fs-lg); line-height: 1.7; margin-top: 16px; }

.story-img .fusion-column-wrapper { position: relative; }
.story-img-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow);
}
.stat {
  position: absolute;
  left: 18px; bottom: 18px;
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: var(--cs-shadow-sm);
  z-index: 2;
}
.stat b {
  display: block;
  font-family: var(--cs-sans);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--cs-dark-blue);
}
.stat span { font-size: var(--fs-label); color: var(--cs-grey); }

/* ---- Primary pill button ---- */
.fusion-button.btn-primary,
.fusion-button.btn-primary .fusion-button-text {
  background: var(--cs-dark-blue) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}




/* ============================================================
   CITY SHUL  -  Worship > Festivals & Holidays  (page CSS)
   Requires: cityshul-components.css (shared kit).
   Adds only the holiday "chip" list used in "A year filled with meaning".
   ============================================================ */
.cs-chips-wrap { margin-top: 6px; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-chip {
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--cs-line);
  font-weight: 600; font-size: var(--fs-sm);
  color: var(--cs-black);
}
.cs-chips-foot p { color: var(--cs-grey); font-size: var(--fs-body); line-height: 1.6; margin-top: 18px; }






/* ============================================================
   CITY SHUL  -  Worship > high-holy-days  (page CSS)
   ------------------------------------------------------------
   No page-specific CSS required. Every component on this page
   (hero / prose / cs-feature / cs-checklist / cs-callout /
   newhere / cs-cta-band / .btn) is fully covered by the shared
   kit. Append cityshul-components.css once and this page is styled.
   ============================================================ */



/* ============================================================
   CITY SHUL  -  Worship > music-prayer  (page CSS)
   ------------------------------------------------------------
   No page-specific CSS required. Every component on this page
   (hero / prose / cs-feature / cs-checklist / cs-callout /
   newhere / cs-cta-band / .btn) is fully covered by the shared
   kit. Append cityshul-components.css once and this page is styled.
   ============================================================ */





/* ============================================================
   CITY SHUL  -  Worship > participating-in-services  (page CSS)
   ------------------------------------------------------------
   No page-specific CSS required. Every component on this page
   (hero / prose / cs-feature / cs-checklist / cs-callout /
   newhere / cs-cta-band / .btn) is fully covered by the shared
   kit. Append cityshul-components.css once and this page is styled.
   ============================================================ */





/* ============================================================
   CITY SHUL  -  Worship > shabbat-services  (page CSS)
   ------------------------------------------------------------
   No page-specific CSS required. Every component on this page
   (hero / prose / cs-feature / cs-checklist / cs-callout /
   newhere / cs-cta-band / .btn) is fully covered by the shared
   kit. Append cityshul-components.css once and this page is styled.
   ============================================================ */



/* ============================================================
   CITY SHUL  -  Worship > What to Expect  (page CSS)
   Requires: cityshul-components.css (shared kit).
   Adds styling for the FAQ accordion (Avada renders the wrapper
   as .fusion-accordian - their spelling).
   ============================================================ */
.cs-faq { max-width: 820px; margin: 0 auto; }
.cs-faq .fusion-accordian .fusion-panel {
  background: var(--cs-pale-purple) !important;
  border: 1px solid var(--cs-line) !important;
  border-radius: var(--cs-radius-lg) !important;
  margin-bottom: 14px;
  overflow: hidden;
}
.cs-faq .fusion-accordian .panel-title a {
  color: var(--cs-dark-blue) !important;
  font-weight: 600;
  font-size: var(--fs-lg);
  padding: 20px 22px;
}
.cs-faq .fusion-accordian .panel-title a .fusion-toggle-icon-wrapper { color: var(--cs-purple) !important; }
.cs-faq .fusion-accordian .panel-body { padding: 0 22px 20px; }
.cs-faq .fusion-accordian .panel-body p { color: var(--cs-grey); font-size: var(--fs-body); line-height: 1.7; }





/* ============================================================
   CITY SHUL  -  Learning  (landing page CSS)
   ------------------------------------------------------------
   No page-specific CSS required. The hub uses hero / prose /
   cs-feature / cs-card grid / cs-callout / cs-cta-band - all
   covered by the shared kit. Append cityshul-components.css once.
   ============================================================ */









/* ============================================================
   CITY SHUL  -  SUB-PAGE COMPONENT KIT  (consolidated)
   Append ONCE below the WP header comment in the child theme.
   Covers every About + Worship sub-page component. Replaces the
   earlier per-page files (our-approach / vision-mission /
   distinctive). Reuses existing --cs-* tokens and the
   section-hero / hero-card rules already in the child theme.
   ============================================================ */

/* ---- Avada flex containers: stack rows vertically ---- */
.block,
.newhere,
.cs-cta-band { flex-direction: column !important; }

/* ---- Editorial content width (1180) ---- */
.block > .fusion-builder-row.fusion-row,
.newhere > .fusion-builder-row.fusion-row,
.cs-cta-band > .fusion-builder-row.fusion-row {
  max-width: 1180px; margin-left: auto; margin-right: auto;
}

/* ---- Eyebrow kicker + tick ---- */
.section-hero .eyebrow,
.block .eyebrow,
.newhere .eyebrow,
.cs-cta-band .eyebrow {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cs-purple);
}
.block .eyebrow .tick,
.cs-cta-band .eyebrow .tick,
.newhere .eyebrow .tick {
  display: inline-block; width: 26px; height: 2px;
  background: var(--cs-purple); border-radius: 2px;
  vertical-align: middle; margin-right: 6px;
}
.eyebrow--soft { color: var(--cs-pale-purple) !important; }
.eyebrow--gold { color: var(--cs-red) !important; }

/* ---- Accent word - Poppins 700 ---- */
.hero-title .accent,
.shead-title .accent,
.cs-feature__title .accent { font-family: var(--cs-sans); font-weight: 400; color: var(--cs-purple); }

/* ============================================================
   PROSE
   ============================================================ */
.cs-prose { max-width: 72ch; margin: 0 auto; }
.cs-prose .cs-prose__lead p { font-family: var(--cs-sans); font-size: var(--fs-lead); line-height: 1.45; color: var(--cs-black); }
.cs-prose p { color: var(--cs-grey); font-size: var(--fs-lg); line-height: 1.7; margin-top: 14px; }

/* ============================================================
   SECTION HEADING
   ============================================================ */
.shead-title { font-size: var(--fs-h2); }
.shead-title h2 { color: var(--cs-dark-blue); line-height: 1.15; letter-spacing: -.01em; }
.shead-intro p { color: var(--cs-grey); font-size: var(--fs-lg); line-height: 1.6; margin-top: 12px; max-width: 60ch; }

/* ============================================================
   CARD GRID  (paint on .fusion-column-wrapper to keep gutters)
   ============================================================ */
.cs-card .fusion-column-wrapper { height: 100%; background: #fff; border: 1px solid var(--cs-line); border-radius: var(--cs-radius-lg); }
.cs-card__ic { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; font-size: var(--fs-lead-sm); margin-bottom: 16px; }
.cs-card__ic--navy{background:rgba(15,81,149,.12)} .cs-card__ic--purple{background:rgba(158,40,127,.13)}
.cs-card__ic--gold{background:rgba(167,30,51,.12)}  .cs-card__ic--blue{background:rgba(87,121,188,.16)}
.cs-card__ic--red{background:rgba(167,30,51,.12)}   .cs-card__ic--green{background:rgba(87,121,188,.16)}
.cs-card .cs-card__title { font-size: var(--fs-lg); }
.cs-card .cs-card__title h3 { color: var(--cs-dark-blue); line-height: 1.25; }
.cs-card .cs-card__body p { font-size: var(--fs-body); color: var(--cs-grey); line-height: 1.6; margin-top: 9px; }
.cs-card--dark .fusion-column-wrapper { background: var(--cs-dark-blue); border-color: transparent; display: flex; flex-direction: column; justify-content: center; }
.cs-card--dark .cs-card__title h3 { color: #fff; }
.cs-card--dark .cs-card__body p { color: rgba(255,255,255,.8); }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-sm); color: var(--cs-dark-blue); }
.cs-card-more a.more { margin-top: 14px; }
.cs-card--dark .cs-card-more a.more { color: var(--cs-red); }

/* ============================================================
   CALLOUT
   ============================================================ */
.cs-callout .fusion-column-wrapper { background: var(--cs-pale-purple); border-radius: var(--cs-radius-lg); }
.cs-callout .cs-callout__quote p { font-family: var(--cs-sans); font-size: var(--fs-h3); line-height: 1.32; color: var(--cs-black); max-width: 30ch; margin: 14px 0 0; }
.cs-callout .cs-callout__body p { color: var(--cs-grey); font-size: var(--fs-lg); line-height: 1.7; max-width: 62ch; margin-top: 14px; }
.cs-callout--center { text-align: center; }
.cs-callout--center .cs-callout__quote p { margin-left: auto; margin-right: auto; }
.cs-callout__cite { margin-top: 18px; font-size: var(--fs-body); color: var(--cs-grey); font-weight: 500; max-width: 62ch; margin-left: auto; margin-right: auto; }

/* ============================================================
   FEATURE  (image + text, alternating)
   ============================================================ */
.cs-feature__index { line-height: 1; margin-bottom: 10px; }
.cs-feature__index p { font-family: var(--cs-sans); font-size: var(--fs-display); line-height: 1; color: var(--cs-red); margin: 0; }
.cs-feature__eyebrow { margin-bottom: 12px; }
.cs-feature__title { font-size: var(--fs-h3); }
.cs-feature__title h2 { color: var(--cs-dark-blue); line-height: 1.2; letter-spacing: -.02em; }
.cs-feature__body p { color: var(--cs-grey); font-size: var(--fs-lg); line-height: 1.7; margin-top: 14px; }
.cs-feature__media .fusion-column-wrapper { position: relative; }
.cs-feature__img img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow); }
.cs-feature__tag { position: absolute; left: 16px; bottom: 16px; background: #fff; border-radius: 13px; padding: 9px 14px; box-shadow: var(--cs-shadow-sm); font-weight: 600; font-size: var(--fs-sm); color: var(--cs-dark-blue); z-index: 2; }
.cs-feature__tag p { margin: 0; }

/* ============================================================
   INK "newhere" BAND
   ============================================================ */
/* .newhere .eyebrow { font-size: var(--fs-label); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.newhere .nh-title { font-size: var(--fs-h1); }
.newhere .nh-title h2 { color: #fff; max-width: 18ch; line-height: 1.15; letter-spacing: -.01em; }
.newhere .nh-lead p { color: rgba(255,255,255,.78); max-width: 46ch; font-size: var(--fs-body); line-height: 1.6; margin-top: 16px; }
 */
/* ============================================================
   STORY block (text + portrait image + floating stat)
   ============================================================ */
.stxt-title { font-size: var(--fs-h2); }
.stxt-title h2 { color: var(--cs-dark-blue); line-height: 1.2; letter-spacing: -.01em; }
.stxt p { color: var(--cs-grey); font-size: var(--fs-lg); line-height: 1.7; margin-top: 16px; }
.story-img .fusion-column-wrapper { position: relative; }
.story-img-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow); }
.stat { position: absolute; left: 18px; bottom: 18px; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: var(--cs-shadow-sm); z-index: 2; }
.stat b { display: block; font-family: var(--cs-sans); font-size: var(--fs-h3); line-height: 1; color: var(--cs-dark-blue); }
.stat span { font-size: var(--fs-label); color: var(--cs-grey); }

/* ============================================================
   CHECKLIST  (grid via Fusion columns; item internals here)
   ============================================================ */
.cs-checklist__item { display: flex; gap: 12px; align-items: flex-start; }
.cs-checklist__mark { flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(87,121,188,.16); color: var(--cs-dark-blue); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; }
.cs-checklist__item h4 { font-size: var(--fs-body); font-weight: 600; color: var(--cs-dark-blue); }
.cs-checklist__item p { font-size: var(--fs-sm); color: var(--cs-grey); margin-top: 3px; line-height: 1.55; }

/* ============================================================
   CTA BAND  (gradient + radius set in the builder; paint here)
   ============================================================ */
.cs-cta-band__title { font-size: var(--fs-h1); }
.cs-cta-band__title h2 { color: #fff; line-height: 1.15; }
.cs-cta-band .cs-cta-band__body p { color: rgba(255,255,255,.85); font-size: var(--fs-body); line-height: 1.6; max-width: 46ch; }
.cs-cta-band__actions .fusion-button-wrapper { display: block; margin: 0 0 12px auto; text-align: right; }

/* ============================================================
   PILL BUTTONS  (.btn kit - beat Avada defaults)
   ============================================================ */
.fusion-button.btn { border-radius: 999px !important; font-weight: 600 !important; padding: 13px 24px !important; border: 2px solid transparent !important; }
.fusion-button.btn-sm { padding: 9px 17px !important; font-size: var(--fs-sm) !important; }
.fusion-button.btn-primary, .fusion-button.btn-primary .fusion-button-text { background: var(--cs-dark-blue) !important; color: #fff !important; border-color: transparent !important; }
.fusion-button.btn-gold, .fusion-button.btn-gold .fusion-button-text { background: var(--cs-red) !important; color: #ffffff !important; border-color: transparent !important; }
.fusion-button.btn-ghost, .fusion-button.btn-ghost .fusion-button-text { background: transparent !important; border-color: var(--cs-line) !important; color: var(--cs-dark-blue) !important; }
.fusion-button.btn-ghost-light, .fusion-button.btn-ghost-light .fusion-button-text { background: transparent !important; border-color: rgba(255,255,255,.5) !important; color: #fff !important; }


/* ---- icon fixes (override older rules) ---- */

/* feature glyph (★ / ✦ / ↓) - bigger + gold */
.cs-feature__index p { font-size: var(--fs-display); line-height: 1; margin: 0; color: var(--cs-red); font-family: var(--cs-sans); }

/* "Our character" badges (About) -> circular */
.cs-vcard .cs-vic { width: 60px !important; height: 60px !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; margin: 0 0 16px !important; padding: 0 !important; }
.cs-vcard .cs-vic > p { margin: 0 !important; line-height: 0; }
.cs-vcard .cs-vic img.emoji, .cs-vcard .cs-vic .emoji { width: 30px !important; height: 30px !important; }

/* new-kit card icons (Our Approach / Vision / Learning) -> contained tiles, not bars */
.cs-card .cs-card__ic { display: flex !important; align-items: center; justify-content: center; width: 52px !important; height: 52px !important; border-radius: 14px; margin-bottom: 16px; padding: 0 !important; }
.cs-card .cs-card__ic > p { margin: 0; line-height: 0; }
.cs-card .cs-card__ic img.emoji, .cs-card .cs-card__ic .emoji { width: 28px !important; height: 28px !important; }




/* checklist cells */
.cs-checklist-cell p { margin: 0; }
.cs-checklist-cell .cs-ck { display: flex; gap: 12px; align-items: flex-start; }
.cs-checklist-cell .cs-ck__m { flex: none; width: 28px; height: 28px; border-radius: 8px; background: rgba(87,121,188,.16); color: var(--cs-dark-blue); display: flex; align-items: center; justify-content: center; font-size: var(--fs-body); font-weight: 700; margin-top: 1px; }
.cs-checklist-cell .cs-ck__b { display: flex; flex-direction: column; }
.cs-checklist-cell .cs-ck__t { font-size: var(--fs-body); font-weight: 600; color: var(--cs-dark-blue); line-height: 1.3; }
.cs-checklist-cell .cs-ck__d { font-size: var(--fs-sm); color: var(--cs-grey); line-height: 1.55; margin-top: 3px; }





/**BEN EDITS */
#about-give {
    margin: 0 !important;
    margin-top: 0px !important;
    background-color: #9e287f;
    width: 100%;
    max-width: 3000px;
}
.cs-team-photo img {
  width: 495px;
  height: 400px;
  object-fit: cover;
  object-position: center;
  display: block;
  max-width: 100%;
}







/* =====================================================================
   CITY SHUL - /calendar/  The Events Calendar brand polish
   2026-07-19
   APPEND to the child theme style.css. Additive - nothing here
   replaces existing rules.

   Everything is scoped under .cs-cal so ONLY the embedded calendar on
   /calendar/ is restyled. The /events/ archive keeps TEC defaults.

   Uses the existing --cs-* tokens already declared in the child theme
   (--cs-dark-blue, --cs-purple, --cs-red, --cs-black, --cs-pale-purple,
   --cs-grey, --cs-line, --cs-sans, --cs-shadow-sm, --cs-shadow).
   No new :root block needed.

   CAVEAT: written against TEC Views v2 class names, which is what the
   [tribe_events] shortcode outputs. Selectors NOT verified against
   this site's rendered DOM - the page is currently empty. Paste,
   render once, then send me the DOM if anything sits wrong.
   ===================================================================== */

/* ---- stack rows on the new container ----------------------------- */
.cs-cal { flex-direction: column !important; }

/* ---- local paint tokens for the calendar only -------------------- */
.cs-cal {
  --cal-pale: rgba(87,121,188,.14);   /* event pill fill (from --cs-blue) */
  --cal-faint: rgba(10,10,10,.45);    /* other-month day numbers         */
}

/* ---- chrome we don't want ---------------------------------------- */
.cs-cal .tribe-events-c-events-bar        { display: none !important; }
.cs-cal .tribe-events-c-subscribe-dropdown{ display: none !important; }
.cs-cal .tribe-events-calendar-list__month-separator { display: none !important; }


/* =====================================================================
   MONTH VIEW
   ===================================================================== */

/* top bar -> navy header with month + prev/next */
.cs-cal .tribe-events-c-top-bar {
  background: var(--cs-dark-blue) !important;
  border-radius: var(--cs-radius) var(--cs-radius) 0 0;
  padding: 12px 16px;
  margin-bottom: 0;
}
.cs-cal .tribe-events-c-top-bar__datepicker-button,
.cs-cal .tribe-events-c-top-bar__datepicker-time,
.cs-cal .tribe-events-c-top-bar__today-button,
.cs-cal .tribe-events-c-top-bar__nav-link { color: #fff !important; }

.cs-cal .tribe-events-c-top-bar__datepicker-time {
  font-family: var(--cs-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
}
.cs-cal .tribe-events-c-top-bar svg { color: #fff !important; fill: #fff !important; }

.cs-cal .tribe-events-c-top-bar__nav-link {
  background: rgba(255,255,255,.12);
  border-radius: 6px;
  transition: background .18s;
}
.cs-cal .tribe-events-c-top-bar__nav-link:hover { background: rgba(255,255,255,.26); }

.cs-cal .tribe-events-c-top-bar__today-button {
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px;
}

/* weekday header row */
.cs-cal .tribe-events-calendar-month__header-column {
  background: var(--cs-pale-purple) !important;
  border-color: var(--cs-line) !important;
}
.cs-cal .tribe-events-calendar-month__header-column-title {
  color: var(--cs-grey) !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: var(--fs-label);
}

/* day cells */
.cs-cal .tribe-events-calendar-month__day { border-color: var(--cs-line) !important; }
.cs-cal .tribe-events-calendar-month__day-date,
.cs-cal .tribe-events-calendar-month__day-date-link {
  color: var(--cs-dark-blue) !important;
  font-family: var(--cs-sans);
  font-weight: 600;
}
.cs-cal .tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-date {
  color: var(--cal-faint) !important;
}

/* today -> gold pip (candlelight accent) */
.cs-cal .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
  background: var(--cs-red);
  color: #ffffff !important;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

/* event inside a day cell -> pale blue pill, title only */
.cs-cal .tribe-events-calendar-month__calendar-event {
  background: var(--cal-pale) !important;
  border-left: 3px solid var(--cs-purple);
  border-radius: 5px;
  padding: 4px 8px;
  margin-bottom: 5px;
}
.cs-cal .tribe-events-calendar-month__calendar-event-datetime { display: none !important; }
.cs-cal .tribe-events-calendar-month__calendar-event-title,
.cs-cal .tribe-events-calendar-month__calendar-event-title-link {
  color: var(--cs-dark-blue) !important;
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: 1.25;
}


/* =====================================================================
   LIST VIEW ("Upcoming")
   card = .tribe-events-calendar-list__event-row (date tag + body)
   ===================================================================== */

.cs-cal .tribe-events-calendar-list__event-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--cs-line) !important;
  border-radius: var(--cs-radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--cs-shadow-sm);
  transition: border-color .18s, box-shadow .18s;
}
.cs-cal .tribe-events-calendar-list__event-row:hover {
  border-color: var(--cs-purple) !important;
  box-shadow: var(--cs-shadow);
}

/* strip TEC's own article border - the row carries the card */
.cs-cal .tribe-events-calendar-list__event {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* date badge -> navy box */
.cs-cal .tribe-events-calendar-list__event-date-tag {
  flex-shrink: 0;
  min-width: 58px;
  text-align: center;
  background: var(--cs-dark-blue);
  border-radius: 8px;
  padding: 9px 10px;
}
.cs-cal .tribe-events-calendar-list__event-date-tag-weekday {
  display: block;
  color: #fff;
  opacity: .85;
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: .08em;
  font-weight: 600;
}
.cs-cal .tribe-events-calendar-list__event-date-tag-daynum {
  display: block;
  color: #fff;
  font-family: var(--cs-sans);
  font-weight: 700;
  font-size: var(--fs-lead-sm);
  line-height: 1.05;
}

/* title */
.cs-cal .tribe-events-calendar-list__event-title { margin: 0 0 4px; }
.cs-cal .tribe-events-calendar-list__event-title-link {
  color: var(--cs-dark-blue) !important;
  font-family: var(--cs-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.2;
}
.cs-cal .tribe-events-calendar-list__event-title-link:hover { color: var(--cs-purple) !important; }

/* datetime, cost, venue, description */
.cs-cal .tribe-events-calendar-list__event-datetime { color: var(--cs-grey); font-size: var(--fs-sm); }
.cs-cal .tribe-events-calendar-list__event-venue    { color: var(--cs-grey); font-size: var(--fs-sm); }
.cs-cal .tribe-events-calendar-list__event-cost {
  color: var(--cs-purple) !important;
  font-weight: 600;
}
.cs-cal .tribe-events-calendar-list__event-description {
  color: var(--cs-grey);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* "Upcoming" column headings */
.cs-cal .cs-cal-uphead h2 {
  font-family: var(--cs-sans);
  color: var(--cs-dark-blue);
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.cs-cal .cs-cal-upsub p {
  color: var(--cs-grey);
  font-size: var(--fs-sm);
}

/* date badge - force white on the day number and its link wrapper */
.cs-cal .tribe-events-calendar-list__event-date-tag-daynum,
.cs-cal .tribe-events-calendar-list__event-date-tag-link,
.cs-cal .tribe-events-calendar-list__event-date-tag-link .tribe-events-calendar-list__event-date-tag-daynum,
.cs-cal .tribe-events-calendar-list__event-date-tag-link:hover .tribe-events-calendar-list__event-date-tag-daynum {
  color: #fff !important;
}



/* ============================================================
   CITY SHUL  -  FAQs  (page CSS)
   Requires: cityshul-components.css (shared cs- kit).
   Additive - append below the existing page CSS in the child
   theme style.css. No new tokens; everything reuses --cs-*.
   ============================================================ */

/* ---- Avada flex-container fix (rows stack, never side by side) ---- */
.cs-faq-welcome,
.cs-faqpage,
.cs-faq-help {
  flex-direction: column !important;
}

/* ============================================================
   HERO - jump chips (extends the shared .cs-chips / .cs-chip)
   ============================================================ */
.cs-chips a.cs-chip {
  gap: 8px;
  color: var(--cs-black);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cs-chips a.cs-chip:hover {
  border-color: var(--cs-purple);
  box-shadow: var(--cs-shadow-sm);
  transform: translateY(-2px);
}
.cs-chip__n {
  font-family: var(--cs-sans);
  font-size: var(--fs-body);
  color: var(--cs-purple);
  margin-right: 8px;
}

/* ============================================================
   WELCOME PANEL  (dark card, reuses .cs-card--dark wrapper paint)
   ============================================================ */
.cs-welcome > .fusion-column-wrapper {
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  position: relative;
}
/* .cs-welcome > .fusion-column-wrapper::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -140px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(158,40,127,.45), transparent 68%);
  pointer-events: none;
} */
.cs-welcome .cs-eyebrow,
.cs-welcome .cs-eyebrow p { color: var(--cs-red); }
.cs-welcome__title h2 { color: #fff; font-size: var(--fs-h3); letter-spacing: -.02em; }
.cs-welcome__body p {
/*   color: rgba(255,255,255,.78); */
  font-size: var(--fs-body);
  line-height: 1.65;
  margin-top: 12px;
}

.cs-welcome__pull-text p {
  font-family: var(--cs-sans);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: #fff;
  border-left: 3px solid var(--cs-red);
  padding-left: 24px;
  margin: 0;
}
.cs-welcome__k {
  display: block;
  font-family: inherit;
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
/*   color: rgba(255,255,255,.55); */
  margin-bottom: 12px;
}

/* ============================================================
   SIDE NAV
   ============================================================ */
.cs-faq-side > .fusion-column-wrapper {
  position: sticky;
  top: 96px;
}
.cs-faq-side__k p {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cs-grey);
  margin-bottom: 12px;
}
.cs-faq-side__nav a {
  display: block;
  padding: 9px 0 9px 15px;
  border-left: 2px solid var(--cs-line);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--cs-grey);
  transition: color .2s, border-color .2s;
}
.cs-faq-side__nav a:hover {
  color: var(--cs-dark-blue);
  border-color: var(--cs-blue);
}

/* ============================================================
   GROUP HEADINGS
   ============================================================ */
.cs-faq-group__title {
  scroll-margin-top: 110px;
  margin-top: 46px;
}
.cs-faq-group__title:first-of-type { margin-top: 0; }
.cs-faq-group__title h2 {
  color: var(--cs-dark-blue);
  font-size: var(--fs-h4);
  letter-spacing: -.02em;
}
.cs-faq-group__n {
  font-family: var(--cs-sans);
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--cs-red);
  margin-right: 14px;
}
.cs-faq-group__note p {
  color: var(--cs-grey);
  font-size: var(--fs-body);
  margin: 4px 0 18px;
}

/* ============================================================
   ACCORDION
   Base paint lives in the shared kit (.cs-faq .fusion-accordian).
   Only page-level spacing is added here.
   ============================================================ */
.cs-faqpage .cs-faq { max-width: none; margin: 0 0 10px; }

/* ---- TODO flag (build-time only - remove before launch) ---- */
.cs-todo {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cs-red);
  background: rgba(167,30,51,.1);
  border: 1px dashed rgba(167,30,51,.45);
  border-radius: 6px;
  padding: 3px 8px;
}

/* ============================================================
   HELP CARD
   ============================================================ */
.cs-help-card > .fusion-column-wrapper {
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-sm);
}
.cs-help-card .cs-h2 h2 { color: var(--cs-dark-blue); font-size: var(--fs-h3); margin-top: 8px; }
.cs-help-card__body p {
  color: var(--cs-grey);
  font-size: var(--fs-body);
  line-height: 1.65;
  margin-top: 10px;
}
.cs-help-card__body a { color: var(--cs-dark-blue); font-weight: 600; }
.cs-help-card__actions .fusion-button-wrapper {
  display: block;
  margin: 0 0 12px auto;
  text-align: right;
}

@media (max-width: 800px) {
  .cs-welcome__pull-text p { font-size: var(--fs-lead); }
  .cs-help-card__actions .fusion-button-wrapper { margin-left: 0; text-align: left; }
}



/* ============================================================
   THANK YOU PAGE (Gravity Forms confirmation)  -  2026-07-24
   Reuses the interior kit (cs-band / cs-h1 / cs-card / cs-btn).
   ============================================================ */

/* Avada flex containers: stack rows vertically */
.section-thankyou,
.section-thankyou-next,
.section-thankyou-cta {
  flex-direction: column !important;
}

/* Card icons centred with the rest of the card content is NOT wanted -
   cards stay left-aligned, matching the homepage grid. */

/* CTA band heading centred (cs-band--intro is not used here) */
.section-thankyou-cta .cs-ty-cta-title,
.section-thankyou-cta .cs-ty-cta-title h2 { text-align: center; }

/* ============================================================
   TYPOGRAPHY PASS - brand feedback item 2
   Poppins only. No serif, no italics. Emphasis is carried by
   weight, colour, size and capitalisation - never by typeface.
   This block runs last so it wins on equal specificity.
   ============================================================ */

/* ---- Accent word inside a headline: was Fraunces italic ---- */
.cs-accent,
.hero-title .accent,
.shead-title .accent,
.cs-feature__title .accent {
  font-family: var(--cs-sans);
  font-weight: 700;
  font-style: normal;
  color: var(--cs-purple);
}
.cs-phero .cs-accent { color: var(--cs-white); font-weight: 700; }

/* ---- Hebrew / transliterated term: was Fraunces italic ---- */
.cs-heb { font-family: var(--cs-sans); font-weight: 500; color: var(--cs-purple); }

/* ---- Pull quotes: was Fraunces italic ---- */
.cs-quote-text p,
.cs-callout .cs-callout__quote p,
.cs-welcome__pull-text p {
  font-family: var(--cs-sans);
  font-weight: 500;
  font-style: normal;
}
.cs-qmark p { font-family: var(--cs-sans); font-weight: 700; }

/* ---- Display numerals: was Fraunces ---- */
.cs-step-num p,
.cs-feature__index,
.cs-feature__index p,
.cs-stat b,
.stat b,
.cs-tline-yr p,
.cs-chip__n {
  font-family: var(--cs-sans);
  font-weight: 700;
}

/* ---- Lead paragraphs: was Fraunces ---- */
.cs-serif-lead p,
.cs-prose .cs-prose__lead p {
  font-family: var(--cs-sans);
  font-weight: 400;
}

/* ---- ONE all-caps label treatment, applied everywhere ----
   Replaces 13 variants that used 7 different letter-spacings. */
.cs-eyebrow,
.cs-eyebrow p,
.cs-eyebrow li,
.cs-eyebrow .fusion-li-item-content,
.section-hero .eyebrow,
.block .eyebrow,
.newhere .eyebrow,
.cs-cta-band .eyebrow,
.cs-welcome__k,
.cs-faq-side__k p,
.cs-ci-k,
.cs-team-role p {
  font-family: var(--cs-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-style: normal;
}




/* Main nav hover - purple.
   Avada's rule is (0,3,0) !important and fusion-styles loads AFTER
   the child theme, so this must win on specificity, not order.
   This is (0,5,0). Do not simplify it. */
.awb-menu.header-main-menu .awb-menu__main-li_regular:hover > .awb-menu__main-a,
.awb-menu.header-main-menu .awb-menu__main-li_regular:hover > .awb-menu__main-a .menu-text,
.awb-menu.header-main-menu .awb-menu__main-li_regular:focus-within > .awb-menu__main-a,
.awb-menu.header-main-menu .awb-menu__main-li_regular:focus-within > .awb-menu__main-a .menu-text {
  color: var(--cs-purple) !important;
}








/* ==== Main nav: hover + current page in City Purple ====
   Avada's rules are (0,3,0) with !important, and fusion-styles loads
   AFTER the child theme - so these must win on specificity, not order.
   Each selector below is (0,5,0) or (0,6,0). Do not shorten them. */
.awb-menu.header-main-menu .awb-menu__main-li_regular:hover                  > .awb-menu__main-a,
.awb-menu.header-main-menu .awb-menu__main-li_regular:focus-within           > .awb-menu__main-a,
.awb-menu.header-main-menu .awb-menu__main-li_regular.current-menu-item      > .awb-menu__main-a,
.awb-menu.header-main-menu .awb-menu__main-li_regular.current-menu-parent    > .awb-menu__main-a,
.awb-menu.header-main-menu .awb-menu__main-li_regular.current-menu-ancestor  > .awb-menu__main-a,
.awb-menu.header-main-menu .awb-menu__main-li_regular:hover                  > .awb-menu__main-a .menu-text,
.awb-menu.header-main-menu .awb-menu__main-li_regular:focus-within           > .awb-menu__main-a .menu-text,
.awb-menu.header-main-menu .awb-menu__main-li_regular.current-menu-item      > .awb-menu__main-a .menu-text,
.awb-menu.header-main-menu .awb-menu__main-li_regular.current-menu-parent    > .awb-menu__main-a .menu-text,
.awb-menu.header-main-menu .awb-menu__main-li_regular.current-menu-ancestor  > .awb-menu__main-a .menu-text {
  color: var(--cs-purple) !important;
}

/* The active highlight bar - body carries avada-menu-highlight-style-bar,
   and --awb-active-border-color is currently unset, so no !important needed. */
.awb-menu.header-main-menu {
  --awb-active-border-color: var(--cs-purple);
}


/***BEN EDITS */
.tribe-events-calendar-list__event-date-tag-weekday {
	color:#FFF!important;
}


.shead-kicker p,
.cta-kicker p,
.callout-kicker p {
	text-transform: uppercase;
	font-weight: bold;
}