/* ==========================================================================
   SAVERA UK — PATTERN STYLESHEET
   Paste into: Appearance > Customize > Additional CSS
   (or GP Pro > General > Additional CSS, or the child theme's style.css)

   Colors pull from theme.json via WP's --wp--preset--color--{slug} vars
   (hex fallback alongside each one). Change a color in Site Editor >
   Styles > Colors and it updates here automatically — edit theme.json /
   Global Styles for a permanent change, not this file.
   ========================================================================== */

:root{
  /* --wp--preset--color--{slug} pulled from theme.json, hex fallback after
     the comma. Site Editor > Styles > Colors changes flow through here. */
  --orange:        #ee7623;  /* primary CTA orange — updated to the authoritative header/card palette, no longer tracking the WP preset */
  --second-orange:  var(--wp--preset--color--second-orange, #e49152);  /* secondary card e.g. "worried about someone" — excluded from the 12-color header/card palette, stays as-is */
  --burnt-orange:  var(--wp--preset--color--burnt-orange, #c3502a);   /* alt CTA / hover accent — excluded from the 12-color header/card palette */
  --maroon:        var(--wp--preset--color--dark-red, #762e1a);      /* Fundraise / dark red-brown — excluded from the 12-color header/card palette */
  --red:           var(--wp--preset--color--red, #c94940);          /* alerts */
  --darkblue:          #324654;    /* professional / dark cards, footer contact box — updated to the authoritative header/card palette ("darkblue") */
  --purple:        #5d2659;       /* Community hub, advocate programme — updated to the authoritative header/card palette */
  --purple-light:  #ece5ec; /* light purple section background — updated to the authoritative header/card palette */
  --blue:          #008ba9;         /* Training block — updated to the authoritative header/card palette */
  --teal:          var(--blue);         /* Learning Hub brand (alias of blue) */
  --green:         #0b5846;        /* Savera Youth Collective — updated to the authoritative header/card palette */
  --sage:   var(--wp--preset--color--light-green, #aacfad);  /* light green accent — excluded from the 12-color header/card palette, kept distinct from --green-light below */
  --gold:          var(--wp--preset--color--mustard, #c7b13a);      /* "Culture is beautiful" heading text — separate from --mustard/Mustard below, unchanged */
  --mustard:        #ccae04;       /* Mustard — updated to the authoritative header/card palette */
  --pink:          var(--wp--preset--color--pink, #d22d7c);         /* accent */
  --lilac:         var(--wp--preset--color--light-purple, #a3a4ba); /* muted accent — excluded from the 12-color header/card palette, distinct from --purple-light above */
  --mustard-light:         #fff5cd; /* Mustard Light — updated to the authoritative header/card palette */
  --orange-light:         #fce0cf; /* Light Orange — updated to the authoritative header/card palette */
  --pale-pink:     #f6ebec;   /* mid-tone card background — hardcoded, not pulled from the WP preset var: WordPress core's own built-in default palette also registers a "Pale Pink" at #f78da7 under the identical slug/variable name, which was winning over this custom one */
  --darkblue-light:    #eaecee; /* Dark Blue Light — updated to the authoritative header/card palette (pairs with --darkblue, despite the "blue" name) */
  --green-light:    #e5f1e5; /* Green Light — updated to the authoritative header/card palette */
  --blue-light:           #e5f3f7; /* Blue Light — new addition, pairs with the updated --blue, completing the 12-color header/card palette */
  --gray-light:    #F1F1F1;  /* neutral — not in palette, used for footer/placeholder areas */
  --gray-mid:      #D9D9D9;  /* image placeholder fill — not in palette */
  --text-dark:     var(--wp--preset--color--savera-grey, #1a1a1a);
  --white:         #FFFFFF;
  --savera-radius:        0 10px 0 10px;
  --savera-radius-top:    0 10px 0 0; /* top two values from savera-radius, bottom squared off — keep in sync if that changes */
  --savera-gap:           28px;
  --savera-section-pad:   64px;
  --content-max:          1200px; /* match theme content width — Customize > Layout, or theme.json settings.layout.contentSize */

  /* Default section theme (used when no parent-* class is present, e.g. homepage) */
  --theme:         var(--orange);
  --theme-light:   var(--orange-light);
  --theme-card-img-1: url(backgrounds/cards/orange-light-a.jpg);
  --theme-card-img-2: url(backgrounds/cards/orange-light-b.jpg);
  --theme-section-img-1: url(backgrounds/orange-light1.jpg);
  --theme-section-img-2: url(backgrounds/orange-light2.jpg);
  --theme-border:  var(--orange);
  --theme-text:    var(--white);
}

/* ==========================================================================
   SECTION THEMING — driven by the parent-<slug> body class
   Each landing-page section overrides --theme / --theme-light for itself
   and its subpages. TODO: confirm about-us, whats-on and support-us —
   assigned from the initial design pass, not signed off yet.
   ========================================================================== */
body.parent-get-help{
  --theme: var(--orange);
  --theme-light: var(--orange-light);
  --theme-card-img-1: url(backgrounds/cards/orange-light-a.jpg);
  --theme-card-img-2: url(backgrounds/cards/orange-light-b.jpg);
  --theme-section-img-1: url(backgrounds/orange-light1.jpg);
  --theme-section-img-2: url(backgrounds/orange-light2.jpg);
  --theme-border: var(--orange);
  --theme-text: var(--white);
}
body.parent-for-professionals{
  --theme: var(--darkblue);
  --theme-light: var(--darkblue-light);
  --theme-card-img-1: url(backgrounds/cards/darkblue-light-a.jpg);
  --theme-card-img-2: url(backgrounds/cards/darkblue-light-b.jpg);
  --theme-section-img-1: url(backgrounds/darkblue-light1.jpg);
  --theme-section-img-2: url(backgrounds/darkblue-light2.jpg);
  --theme-border: var(--blue);
  --theme-text: var(--white);
}
body.parent-training{
  --theme: var(--blue);
  --theme-light: var(--darkblue-light);
  --theme-card-img-1: url(backgrounds/cards/darkblue-light-a.jpg);
  --theme-card-img-2: url(backgrounds/cards/darkblue-light-b.jpg);
  --theme-section-img-1: url(backgrounds/darkblue-light1.jpg);
  --theme-section-img-2: url(backgrounds/darkblue-light2.jpg);
  --theme-border: var(--blue);
  --theme-text: var(--white);
}
body.parent-community-hub{
  --theme: var(--purple);
  --theme-light: var(--purple-light);
  --theme-card-img-1: url(backgrounds/cards/purple-light-a.jpg);
  --theme-card-img-2: url(backgrounds/cards/purple-light-b.jpg);
  --theme-section-img-1: url(backgrounds/purple-light1.jpg);
  --theme-section-img-2: url(backgrounds/purple-light2.jpg);
  --theme-border: var(--purple);
  --theme-text: var(--white);
}
body.parent-whats-on{
  --theme: var(--gold);
  --theme-light: var(--mustard-light);
  --theme-card-img-1: url(backgrounds/cards/mustard-light-a.jpg);
  --theme-card-img-2: url(backgrounds/cards/mustard-light-b.jpg);
  --theme-section-img-1: url(backgrounds/mustard-light1.jpg);
  --theme-section-img-2: url(backgrounds/mustard-light2.jpg);
  --theme-border: var(--gold);
  --theme-text: var(--text-dark); /* gold is light — keep dark text for contrast */
}
body.parent-about-us{
  --theme: var(--darkblue);
  --theme-light: var(--darkblue-light);
  --theme-card-img-1: url(backgrounds/cards/darkblue-light-a.jpg);
  --theme-card-img-2: url(backgrounds/cards/darkblue-light-b.jpg);
  --theme-section-img-1: url(backgrounds/darkblue-light1.jpg);
  --theme-section-img-2: url(backgrounds/darkblue-light2.jpg);
  --theme-border: var(--blue);
  --theme-text: var(--white);
}
body.parent-support-us{
  --theme: var(--orange);
  --theme-light: var(--orange-light);
  --theme-card-img-1: url(backgrounds/cards/orange-light-a.jpg);
  --theme-card-img-2: url(backgrounds/cards/orange-light-b.jpg);
  --theme-section-img-1: url(backgrounds/orange-light1.jpg);
  --theme-section-img-2: url(backgrounds/orange-light2.jpg);
  --theme-border: var(--orange);
  --theme-text: var(--white);
  /* Note: pattern 13 (Support-us 3-col CTA) intentionally keeps its own
     explicit orange/pale-pink/maroon per card regardless of this theme —
     don't swap those to theme classes, the 3-color mix is deliberate. */
}
body.parent-learning-hub{
  --theme: var(--blue);
  --theme-light: var(--darkblue-light);
  --theme-card-img-1: url(backgrounds/cards/darkblue-light-a.jpg);
  --theme-card-img-2: url(backgrounds/cards/darkblue-light-b.jpg);
  --theme-section-img-1: url(backgrounds/darkblue-light1.jpg);
  --theme-section-img-2: url(backgrounds/darkblue-light2.jpg);
  --theme-border: var(--blue);
  --theme-text: var(--white);
}
body.parent-savera-youth{
  --theme: var(--green);
  --theme-light: var(--green-light);
  --theme-card-img-1: url(backgrounds/cards/green-light-a.jpg);
  --theme-card-img-2: url(backgrounds/cards/green-light-b.jpg);
  --theme-section-img-1: url(backgrounds/green-light1.jpg);
  --theme-section-img-2: url(backgrounds/green-light2.jpg);
  --theme-border: var(--green);
  --theme-text: var(--white);
}

/* ==========================================================================
   GLOBAL HELPERS — reused across every pattern
   ========================================================================== */

.savera-section{
  /* alignfull background bleeds edge to edge; padding-inline grows past 5%
     on wide screens so content caps at --content-max and stays centered —
     no extra wrapper div needed. */
  padding-block: var(--savera-section-pad);
  padding-inline: max(5%, calc((100% - var(--content-max)) / 2));
  box-sizing: border-box;
}
.savera-section.is-narrow-pad{ padding-block: 32px; }
.savera-eyebrow{
  display:inline-block;
  font-size:0.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:0.75rem;
}
.savera-placeholder-img{
  margin:0;
  width:100%;
  aspect-ratio: 4 / 3;
}
.savera-placeholder-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius: var(--savera-radius);
}

/* Background color utilities */
.savera-bg-orange{background:var(--orange); color:var(--white);}
.savera-bg-second-orange{background:var(--second-orange); color:var(--text-dark);}
.savera-bg-maroon{background:var(--maroon); color:var(--white);}
.savera-bg-darkblue{background:var(--darkblue); color:var(--white);}
.savera-bg-purple{background:var(--purple); color:var(--white);}
.savera-bg-purple-light{background:var(--purple-light); color:var(--text-dark);}
.savera-bg-blue{background:var(--blue); color:var(--white);}
.savera-bg-teal{background:var(--teal); color:var(--white);}
.savera-bg-green{background:var(--green); color:var(--white);}
.savera-bg-mustard-light{background:var(--mustard-light); color:var(--text-dark);}
.savera-bg-orange-light{background:var(--orange-light); color:var(--text-dark);}
.savera-bg-pale-pink{background:var(--pale-pink); color:var(--text-dark);}
.savera-bg-darkblue-light{background:var(--darkblue-light); color:var(--text-dark);}
.savera-bg-blue-light{background:var(--blue-light); color:var(--text-dark);}
.savera-bg-gray{background:var(--gray-light); color:var(--text-dark);}
.savera-bg-white{background:var(--white); color:var(--text-dark);}
.savera-bg-burnt-orange{background:var(--burnt-orange); color:var(--white);}
.savera-bg-red{background:var(--red); color:var(--white);}
.savera-bg-pink{background:var(--pink); color:var(--white);}
.savera-bg-mustard{background:var(--mustard); color:var(--text-dark);}
.savera-bg-green-light{background:var(--green-light); color:var(--text-dark);}
.savera-bg-sage{background:var(--sage); color:var(--text-dark);}
.savera-bg-lilac{background:var(--lilac); color:var(--white);}

/* Theme-aware utilities (optional) — follow whichever parent-<slug> section
   a page belongs to, instead of a fixed color. Use on elements that should
   auto-match the current section (hero CTA, accent heading, tag) — leave
   deliberately multi-color grids (pattern 4, pattern 13) on their explicit
   savera-bg-* classes instead. */
.savera-bg-theme{ background:var(--theme); color:var(--theme-text); }
.savera-bg-theme-light{ background:var(--theme-light); color:var(--text-dark); }
.savera-text-theme{ color:var(--theme); }
.savera-border-theme{ border-color:var(--theme) !important; }

/* Button utilities.
   Shape (padding, radius, layout, width) is fixed for every button
   regardless of style or color. Width defaults to auto/content-width —
   add savera-btn-full only where a button should stretch to fill its
   row (the stacked hero CTAs are the only current case).

   Style: use WordPress's own built-in Fill/Outline picker (block sidebar
   > Styles, at the top — not Additional CSS Class) rather than a custom
   class. Color has three paths, in priority order:

   1. Nothing picked — Outline style auto-contrasts with whatever section
      it's in (transparent fill, border/text pick up the section's own
      text color). Fill style with nothing picked falls back to an orange
      button with white text.
      Either way: zero effort, can't get it wrong.
   2. Native Text/Background color picker (sidebar > Color) — solid fill
      using whatever's picked. Works like any other WordPress site.
   3. savera-btn-{color} class — same solid-fill result as #2, just typed
      instead of clicked. Equivalent shortcut, not a requirement.

   Either #2 or #3 landing on a background that matches its own section
   (picked from the brand palette, or via the class) drops back to the
   safe outline automatically — a same-color mismatch can't happen by
   accident either way. Custom one-off hex colors typed into the picker
   aren't covered by the guard — same as anywhere else in WordPress, pick
   a readable text color to go with a custom background. */

/* Buttons always stack vertically, site-wide — not just the hero.
   savera-btn-full (full width + arrow) stays specific to whichever
   buttons carry that class (currently just the hero); this rule only
   changes the stacking DIRECTION, not width, for every button group.
   WP's own is-content-justification-{left/center/right} classes only
   affect the row-mode axis (justify-content), which becomes irrelevant
   once direction is column — remapped to align-items below so buttons
   built with a horizontal alignment already picked still land in the
   equivalent left/center/right position once stacked. !important since
   core's own button-layout CSS sets flex-direction directly on the same
   element (same pattern as the constrained-layout override above). */
:is(.entry-content, .is-root-container) .wp-block-buttons{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
:is(.entry-content, .is-root-container) .wp-block-buttons.is-content-justification-center{
  align-items: center !important;
}
:is(.entry-content, .is-root-container) .wp-block-buttons.is-content-justification-right{
  align-items: flex-end !important;
}

:is(.entry-content, .is-root-container) .wp-block-button__link{
  display:inline-flex !important;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 20px !important;
  border-radius: var(--savera-radius) !important;
  font-weight:600 !important;
  text-decoration:none !important;
  border-width:2px !important;
  border-style:solid !important;
  box-sizing:border-box;
  transition:opacity .18s ease, transform .18s ease;
}
:is(.entry-content, .is-root-container) .wp-block-button__link:hover{ opacity:.88; transform: translateY(-1px); }

/* Arrow icon at the right edge — only the stacked hero buttons
   (savera-btn-full), not every button site-wide. Via FontAwesome —
   requires the Webfont/CSS technology (the plugin's default), not SVG/JS;
   check the Font Awesome plugin's settings page if this doesn't show up.
   Fallback chain covers both FA5 and FA6 font-family names since either
   could be what's actually configured underneath. */
:is(.entry-content, .is-root-container) .savera-btn-full .wp-block-button__link::after{
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  content: "\f061";
  margin-left: auto;
  padding-left: 12px;
  flex-shrink: 0;
}
:is(.entry-content, .is-root-container) .savera-btn-full.wp-block-button{ width:100%; }
:is(.entry-content, .is-root-container) .savera-btn-full .wp-block-button__link{ width:100%; }

/* Nothing picked, Outline style: auto-contrast */
:is(.entry-content, .is-root-container) .wp-block-button.is-style-outline:not(.savera-btn-orange):not(.savera-btn-second-orange):not(.savera-btn-darkblue):not(.savera-btn-purple):not(.savera-btn-blue):not(.savera-btn-teal):not(.savera-btn-green):not(.savera-btn-maroon):not(.savera-btn-burnt-orange):not(.savera-btn-red):not(.savera-btn-pink):not(.savera-btn-mustard):not(.savera-btn-theme) .wp-block-button__link:not(.has-background):not(.has-text-color){
  background:transparent !important;
  border-color:currentColor !important;
  color:inherit !important;
}
/* Nothing picked, Fill style (default): orange with white text.
   Explicitly excludes every savera-btn-{color} class, not just relying on
   specificity — a button carrying one of those never gets WP's own
   has-background marker (it's our class doing the work, not the native
   picker), so without this exclusion this rule's chained :not() selectors
   end up with higher specificity than the color utilities and incorrectly
   win over them. */
:is(.entry-content, .is-root-container) .wp-block-button:not(.is-style-outline):not(.savera-btn-orange):not(.savera-btn-second-orange):not(.savera-btn-darkblue):not(.savera-btn-purple):not(.savera-btn-blue):not(.savera-btn-teal):not(.savera-btn-green):not(.savera-btn-maroon):not(.savera-btn-burnt-orange):not(.savera-btn-red):not(.savera-btn-pink):not(.savera-btn-mustard):not(.savera-btn-theme) .wp-block-button__link:not(.has-background):not(.has-text-color){
  background:var(--orange) !important;
  border-color:var(--orange) !important;
  color:var(--white) !important;
}

/* Native picker used (either style): let the picked color(s) show, just
   keep the border matching so it doesn't default to an odd color. If
   only a background was picked (no text color), pick a readable text
   color alongside it, same as any WordPress button. */
:is(.entry-content, .is-root-container) .wp-block-button__link.has-background{ border-color:currentColor; }

/* savera-btn-{color} class: identical solid-fill shortcut to picking the
   same color natively */
.savera-btn-orange .wp-block-button__link{ background:var(--orange) !important; border-color:var(--orange) !important; color:var(--white) !important; }
.savera-btn-second-orange .wp-block-button__link{ background:var(--second-orange) !important; border-color:var(--second-orange) !important; color:var(--text-dark) !important; }
.savera-btn-darkblue .wp-block-button__link{ background:var(--darkblue) !important; border-color:var(--darkblue) !important; color:var(--white) !important; }
.savera-btn-purple .wp-block-button__link{ background:var(--purple) !important; border-color:var(--purple) !important; color:var(--white) !important; }
.savera-btn-blue .wp-block-button__link{ background:var(--blue) !important; border-color:var(--blue) !important; color:var(--white) !important; }
.savera-btn-teal .wp-block-button__link{ background:var(--teal) !important; border-color:var(--teal) !important; color:var(--white) !important; }
.savera-btn-green .wp-block-button__link{ background:var(--green) !important; border-color:var(--green) !important; color:var(--white) !important; }
.savera-btn-maroon .wp-block-button__link{ background:var(--maroon) !important; border-color:var(--maroon) !important; color:var(--white) !important; }
.savera-btn-burnt-orange .wp-block-button__link{ background:var(--burnt-orange) !important; border-color:var(--burnt-orange) !important; color:var(--white) !important; }
.savera-btn-red .wp-block-button__link{ background:var(--red) !important; border-color:var(--red) !important; color:var(--white) !important; }
.savera-btn-pink .wp-block-button__link{ background:var(--pink) !important; border-color:var(--pink) !important; color:var(--white) !important; }
.savera-btn-mustard .wp-block-button__link{ background:var(--mustard) !important; border-color:var(--mustard) !important; color:var(--text-dark) !important; }
.savera-btn-theme .wp-block-button__link{ background:var(--theme) !important; border-color:var(--theme) !important; color:var(--theme-text) !important; }

/* Collision guard, class-based (savera-btn-{color} on its own matching section) */
.savera-bg-orange .savera-btn-orange .wp-block-button__link,
.savera-bg-second-orange .savera-btn-second-orange .wp-block-button__link,
.savera-bg-darkblue .savera-btn-darkblue .wp-block-button__link,
.savera-bg-purple .savera-btn-purple .wp-block-button__link,
.savera-bg-blue .savera-btn-blue .wp-block-button__link,
.savera-bg-teal .savera-btn-teal .wp-block-button__link,
.savera-bg-green .savera-btn-green .wp-block-button__link,
.savera-bg-maroon .savera-btn-maroon .wp-block-button__link,
.savera-bg-burnt-orange .savera-btn-burnt-orange .wp-block-button__link,
.savera-bg-red .savera-btn-red .wp-block-button__link,
.savera-bg-pink .savera-btn-pink .wp-block-button__link,
.savera-bg-mustard .savera-btn-mustard .wp-block-button__link,
/* Collision guard, native-picker-based (brand palette swatch picked on
   its own matching section — theme.json slug, not our shorthand var name) */
.savera-bg-orange .wp-block-button__link.has-savera-orange-background-color,
.savera-bg-second-orange .wp-block-button__link.has-second-orange-background-color,
.savera-bg-darkblue .wp-block-button__link.has-dark-blue-background-color,
.savera-bg-purple .wp-block-button__link.has-purple-background-color,
.savera-bg-purple-light .wp-block-button__link.has-pale-purple-background-color,
.savera-bg-blue .wp-block-button__link.has-blue-background-color,
.savera-bg-teal .wp-block-button__link.has-blue-background-color,
.savera-bg-green .wp-block-button__link.has-green-background-color,
.savera-bg-maroon .wp-block-button__link.has-dark-red-background-color,
.savera-bg-burnt-orange .wp-block-button__link.has-burnt-orange-background-color,
.savera-bg-red .wp-block-button__link.has-red-background-color,
.savera-bg-pink .wp-block-button__link.has-pink-background-color,
.savera-bg-mustard .wp-block-button__link.has-yellow-background-color,
.savera-bg-mustard-light .wp-block-button__link.has-pale-yellow-background-color,
.savera-bg-orange-light .wp-block-button__link.has-pale-orange-background-color,
.savera-bg-pale-pink .wp-block-button__link.has-pale-pink-background-color,
.savera-bg-darkblue-light .wp-block-button__link.has-pale-lilac-background-color,
.savera-bg-green-light .wp-block-button__link.has-pale-green-background-color,
.savera-bg-sage .wp-block-button__link.has-light-green-background-color,
.savera-bg-lilac .wp-block-button__link.has-light-purple-background-color{
  background:transparent !important;
  border-color:currentColor !important;
  color:inherit !important;
}

/* Simple card shell reused by grids */
.savera-card{
  padding:28px;
  border-radius: var(--savera-radius);
  height:100%;
}
.savera-card h3, .savera-card h4{ margin-top:0; }

/* Cards use WP core's "constrained" layout type, which applies
   margin-left/right:auto (and a max-width) to any child narrower than
   the container — centering things like the buttons wrapper as a box,
   even though the button's own justify-content is correctly set to
   left. Override with higher specificity than core's .is-layout-
   constrained rule (a :where() selector, so effectively just one
   class) to restore left alignment inside cards specifically, without
   touching constrained layout anywhere else on the site. */
.savera-card.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* Tag / badge (category labels on news & event cards) */
.savera-tag{
  display:inline-block;
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:4px 10px;
  border-radius:3px;
  margin-bottom:10px;
  background:var(--darkblue);
  color:var(--white);
}
.savera-tag.is-workshop{ background:var(--teal); }
.savera-tag.is-cultural{ background:var(--purple); }
.savera-tag.is-stall{ background:var(--green); }

/* Meta text (dates, roles, captions) */
.savera-meta{ font-size:0.85rem; opacity:0.75; margin-bottom:0.5rem; }

/* Arrow link */
.savera-arrow-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  text-decoration:none;
}

/* Arrow bullet list — opt-in via the sidebar toggle on a List block.
   Fixed brand orange regardless of section color, since it's a brand
   accent marker rather than body text that should adapt. */
ul.savera-list-arrow{
  list-style:none;
  padding-left:0;
  margin-left:0;
}
ul.savera-list-arrow > li{
  position:relative;
  padding-left:2.6em;
  margin-bottom:1rem;
}
ul.savera-list-arrow > li::before{
  content:"→";
  position:absolute;
  left:0;
  top:0;
  color:var(--orange);
  font-weight:400;
  font-size:2.6em;
  line-height:0.7;
}

@media (max-width:781px){
  :root{ --savera-section-pad: 40px; }
  :is(.entry-content, .is-root-container) .wp-block-button__link{ width:100%; }
}

/* ==========================================================================
   PATTERN 1 — HERO (SPLIT)
   ========================================================================== */
.savera-hero-split{ position:relative; overflow:hidden; }
.savera-hero-split .savera-hero-actions .wp-block-button{ display:block; margin-bottom:10px; }
.savera-hero-split .savera-hero-actions .wp-block-button__link{ text-align:left; }
.savera-hero-split h1{ font-size:2.1rem; line-height:1.15; margin-bottom:1rem; }
/* Hero (split) buttons - text flows normally (<br> works), arrow centred on the right */
:is(.entry-content, .is-root-container) .savera-hero-actions .wp-block-button__link {
	display: block !important;
	position: relative;
	padding-right: 3.5rem !important;
	text-align: left;
}
:is(.entry-content, .is-root-container) .savera-hero-actions .wp-block-button__link::after {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

/* ==========================================================================
   PATTERN 2 — HERO (SIMPLE)
   ========================================================================== */
.savera-hero-simple h1{ font-size:1.9rem; margin-bottom:0.75rem; }


/* ==========================================================================
   PATTERN 3 — ALERT / SAFETY BAR
   ========================================================================== */
.savera-alert-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-block: 14px;
  padding-inline: max(5%, calc((100% - var(--content-max)) / 2));
  box-sizing: border-box;
  font-weight:600;
}
.savera-alert-bar a{ color:inherit; text-decoration:underline; }

/* ==========================================================================
   PATTERN 4 — ACTION CARDS GRID (3–4 col)
   ========================================================================== */
.savera-action-grid .wp-block-column{ display:flex; }
.savera-action-grid .savera-card{ display:flex; flex-direction:column; justify-content:space-between; width:100%; }
.savera-action-grid .savera-card .wp-block-buttons{ margin-top:auto; }

/* ==========================================================================
   PATTERN 5 — HIGHLIGHT / CAMPAIGN BANNER
   ========================================================================== */
.savera-highlight-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
}
.savera-highlight-banner h2{ margin:0.25rem 0; }
.savera-highlight-banner .savera-highlight-cta{ flex-shrink:0; margin:0; padding:0; }
.savera-highlight-banner .wp-block-buttons{ margin:0; padding:0; }
.savera-highlight-banner.text-80{ display:block; }

/* ==========================================================================
   PATTERN 6 — INFO BOX
   ========================================================================== */
.savera-info-box h3{ margin-top:0; }

/* ==========================================================================
   PATTERN 7 — STATS ROW
   ========================================================================== */
.savera-stats-row .savera-stat-number{
  font-size:3rem;
  font-weight:800;
  color:var(--orange);
  line-height:1;
  margin-bottom:0.5rem;
}
.savera-stats-row .wp-block-column{ text-align:left; }

/* ==========================================================================
   PATTERN 8 — TWO-COLUMN CONTENT + CHECKLIST
   ========================================================================== */
.savera-checklist ul{ list-style:none; margin:0; padding:0; }
.savera-checklist li{
  position:relative;
  padding-left:1.6em;
  margin-bottom:0.85em;
}
.savera-checklist li::before{
  content:"";
  position:absolute;
  left:0; top:0.3em;
  width:0.9em; height:0.9em;
  border:2px solid currentColor;
  border-radius:2px;
}

/* ==========================================================================
   PATTERN 9 — CARD GRID WITH IMAGE (news / blog / publications / campaigns)
   ========================================================================== */
.savera-media-card{ display:flex; flex-direction:column; height:100%; }
.savera-media-card .savera-placeholder-img{ margin-bottom:1rem; }
.savera-media-card h3, .savera-media-card h4{ margin:0 0 0.4rem; }
.savera-media-card.is-featured{ margin-bottom: var(--savera-gap); }
.savera-media-card.is-featured .savera-placeholder-img{ aspect-ratio: 16/7; }

/* ==========================================================================
   PATTERN 10 — TESTIMONIAL QUOTE GRID
   ========================================================================== */
.savera-quote-card{ padding:24px; height:100%; background-color:transparent; border-radius:0; border-left:3px var(--orange) solid; }
.savera-quote-card p{ font-style:italic; font-size:1.05rem; }
.savera-quote-card .savera-meta{ font-style:normal; font-weight:600; opacity:1; }

/* ==========================================================================
   PATTERN 11 — PEOPLE GRID (team / trainers / board)
   ========================================================================== */
.savera-people-grid .savera-avatar{
  width:110px; height:110px;
  border-radius:50%;
  background:var(--gray-mid);
  margin-bottom:1rem;
}
.savera-people-grid h3, .savera-people-grid h4{ margin:0 0 0.2rem; }
.savera-people-grid .savera-meta{ margin-bottom:0.75rem; }

/* ==========================================================================
   PATTERN 12 — TWO-COLUMN FEATURE CARDS
   ========================================================================== */
.savera-feature-pair .savera-card{ height:100%; }

/* ==========================================================================
   PATTERN 13 — SUPPORT-US 3-COL CTA
   ========================================================================== */
.savera-support-grid .savera-card{ text-align:left; }

/* ==========================================================================
   PATTERN 14 — DUAL CTA BANNER (footer-area)
   ========================================================================== */
.savera-dual-banner .savera-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

/* ==========================================================================
   PATTERN 15 — CONTACT INFO COLUMNS
   ========================================================================== */
.savera-contact-columns h4{ margin-bottom:0.3rem; }
.savera-contact-columns .savera-contact-block{ margin-bottom:1.25rem; }
.savera-contact-columns hr{ border:none; border-top:1px solid rgba(0,0,0,0.15); margin:1.25rem 0; }

/* ==========================================================================
   PATTERN — CONTACT CARDS (3-COLUMN)
   Rounded, colored cards (not plain columns like pattern 15's Contact Info
   Columns) — for a "ways to contact us / out of hours / worried about being
   seen" style layout. Divider lines use currentColor so they read as light
   lines on a dark card (Orange) and dark lines on a pale card, automatically,
   without needing a separate class per card color.
   ========================================================================== */
.savera-contact-cards .savera-card h3{ margin-top:0; }
.savera-contact-cards .savera-card h4{ margin-bottom:0.3rem; }
.savera-contact-cards .savera-card .wp-block-separator{
  border:none;
  border-top:1px solid currentColor;
  opacity:0.35;
  margin:1.1rem 0;
}

/* ==========================================================================
   PATTERN 16 — FORM BOX (dark panel)
   ========================================================================== */
/* No pattern-specific CSS needed — the plugin placeholder uses the shared
   savera-plugin-placeholder styling. */

/* ==========================================================================
   PATTERN 17 — NUMBERED STEPS / PROCESS
   ========================================================================== */
.savera-steps{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:0; }
.savera-steps .savera-step{ flex:1 1 200px; padding:0 16px; position:relative; }
.savera-steps .savera-step-number{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:var(--orange); color:#fff; font-weight:700;
  margin-bottom:0.75rem;
}
.savera-steps .savera-step:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:0px; top:15%;
  font-size:3.2rem;
  opacity:0.4;
}
@media (max-width:781px){
  .savera-steps .savera-step:not(:last-child)::after{ display:none; }
}
/* Training page specifically uses its own theme color (teal) for the
   step connector and number circle, rather than the pattern's default
   orange — only applies once this pattern is actually placed on the
   Training page (body.page-training), not to a freshly-inserted copy
   elsewhere. */
.page-training .savera-steps .savera-step:not(:last-child)::after{ color:var(--teal); }
.page-training .savera-steps .savera-step-number{ background-color:var(--teal); }

/* ==========================================================================
   PATTERN 18 — EVENTS / CALENDAR PLACEHOLDER
   ========================================================================== */
/* No pattern-specific CSS needed — uses the shared savera-plugin-placeholder
   styling. */

/* ==========================================================================
   PATTERN 19 — DONATE
   ========================================================================== */
/* No pattern-specific CSS needed — uses the shared savera-plugin-placeholder
   styling. */

/* ==========================================================================
   BACKGROUND IMAGES — decorative textures on top-level full-width sections
   Only fires when .savera-bg-* is a direct child of :is(.entry-content, .is-root-container) (i.e.
   a top-level section) — nested cards using the same color class (e.g.
   the orange card inside the action-grid) stay untouched.

   Alternation is counted per COLOR via :nth-child(An+B of S), so the 2nd
   peach section gets image 2 even with a purple/blue section between the
   1st and 2nd peach ones. `of S` needs Chrome/Edge 111+, Firefox 113+,
   Safari 9+ — fine for our audience, and the plain .savera-bg-X rule sets
   image 1 as the fallback everywhere for anything older, so it degrades
   fine rather than breaking.

   Images: `backgrounds/` folder next to savera-patterns.css,
   <colorname>1.jpg / <colorname>2.jpg.

   Border colors are a first pass (bolder tone from the same family, or an
   existing pairing like navy+orange) — swap the var() on any border-bottom
   line that doesn't read right in practice.

   savera-bg-theme (the auto-follow-page-color default) works the same way
   as every explicit color below — each page's --theme-section-img-1/-2 and
   --theme-border (defined alongside --theme in the SECTION THEMING block)
   supply the two images and the border accent, so a section left on the
   theme default gets working images with no color override needed, same
   as the card version.
   ========================================================================== */
:is(.entry-content, .is-root-container) > .savera-bg-theme.wp-block-group
	{ border-bottom: 5px var(--theme-border) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-theme.wp-block-group
	{ background: var(--theme) var(--theme-section-img-1) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-theme.wp-block-group:nth-child(even of .savera-bg-theme)
	{ background: var(--theme) var(--theme-section-img-2) right bottom/cover no-repeat; }

:is(.entry-content, .is-root-container) > .savera-bg-orange.wp-block-group
	{ border-bottom: 5px var(--burnt-orange) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-orange.wp-block-group
	{ background: var(--orange) url(backgrounds/orange1.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-orange.wp-block-group:nth-child(even of .savera-bg-orange)
	{ background: var(--orange) url(backgrounds/orange2.jpg) right bottom/cover no-repeat; }

:is(.entry-content, .is-root-container) > .savera-bg-darkblue.wp-block-group
	{ border-bottom: 5px var(--orange) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-darkblue.wp-block-group
	{ background: var(--darkblue) url(backgrounds/darkblue1.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-darkblue.wp-block-group:nth-child(even of .savera-bg-darkblue)
	{ background: var(--darkblue) url(backgrounds/darkblue2.jpg) right bottom/cover no-repeat; }

:is(.entry-content, .is-root-container) > .savera-bg-purple.wp-block-group
	{ border-bottom: 5px var(--pink) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-purple.wp-block-group
	{ background: var(--purple) url(backgrounds/purple1.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-purple.wp-block-group:nth-child(even of .savera-bg-purple)
	{ background: var(--purple) url(backgrounds/purple2.jpg) right bottom/cover no-repeat; }

:is(.entry-content, .is-root-container) > .savera-bg-purple-light.wp-block-group
	{ border-bottom: 5px var(--purple) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-purple-light.wp-block-group
	{ background: var(--purple-light) url(backgrounds/purple-light1.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-purple-light.wp-block-group:nth-child(even of .savera-bg-purple-light)
	{ background: var(--purple-light) url(backgrounds/purple-light2.jpg) right bottom/cover no-repeat; }

:is(.entry-content, .is-root-container) > .savera-bg-blue.wp-block-group
	{ border-bottom: 5px var(--gold) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-blue.wp-block-group
	{ background: var(--blue) url(backgrounds/blue1.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-blue.wp-block-group:nth-child(even of .savera-bg-blue)
	{ background: var(--blue) url(backgrounds/blue2.jpg) right bottom/cover no-repeat; }

:is(.entry-content, .is-root-container) > .savera-bg-teal.wp-block-group
	{ border-bottom: 5px var(--gold) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-teal.wp-block-group
	{ background: var(--teal) url(backgrounds/teal1.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-teal.wp-block-group:nth-child(even of .savera-bg-teal)
	{ background: var(--teal) url(backgrounds/teal2.jpg) right bottom/cover no-repeat; }

:is(.entry-content, .is-root-container) > .savera-bg-green.wp-block-group
	{ border-bottom: 5px var(--gold) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-green.wp-block-group
	{ background: var(--green) url(backgrounds/green1.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-green.wp-block-group:nth-child(even of .savera-bg-green)
	{ background: var(--green) url(backgrounds/green2.jpg) right bottom/cover no-repeat; }

:is(.entry-content, .is-root-container) > .savera-bg-mustard-light.wp-block-group
	{ border-bottom: 5px var(--gold) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-mustard-light.wp-block-group
	{ background: var(--mustard-light) url(backgrounds/mustard-light1.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-mustard-light.wp-block-group:nth-child(even of .savera-bg-mustard-light)
	{ background: var(--mustard-light) url(backgrounds/mustard-light2.jpg) right bottom/cover no-repeat; }

:is(.entry-content, .is-root-container) > .savera-bg-orange-light.wp-block-group
	{ border-bottom: 5px var(--orange) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-orange-light.wp-block-group
	{ background: var(--orange-light) url(backgrounds/orange-light1.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-orange-light.wp-block-group:nth-child(even of .savera-bg-orange-light)
	{ background: var(--orange-light) url(backgrounds/orange-light2.jpg) right bottom/cover no-repeat; }

:is(.entry-content, .is-root-container) > .savera-bg-darkblue-light.wp-block-group
	{ border-bottom: 5px var(--darkblue) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-darkblue-light.wp-block-group
	{ background: var(--darkblue-light) url(backgrounds/darkblue-light1.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-darkblue-light.wp-block-group:nth-child(even of .savera-bg-darkblue-light)
	{ background: var(--darkblue-light) url(backgrounds/darkblue-light2.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-blue-light.wp-block-group
	{ border-bottom: 5px var(--blue) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-blue-light.wp-block-group
	{ background: var(--blue-light) url(backgrounds/blue-light1.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-blue-light.wp-block-group:nth-child(even of .savera-bg-blue-light)
	{ background: var(--blue-light) url(backgrounds/blue-light2.jpg) right bottom/cover no-repeat; }

:is(.entry-content, .is-root-container) > .savera-bg-mustard.wp-block-group
	{ border-bottom: 5px var(--burnt-orange) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-mustard.wp-block-group
	{ background: var(--mustard) url(backgrounds/mustard1.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-mustard.wp-block-group:nth-child(even of .savera-bg-mustard)
	{ background: var(--mustard) url(backgrounds/mustard2.jpg) right bottom/cover no-repeat; }

:is(.entry-content, .is-root-container) > .savera-bg-green-light.wp-block-group
	{ border-bottom: 5px var(--green) solid; }
:is(.entry-content, .is-root-container) > .savera-bg-green-light.wp-block-group
	{ background: var(--green-light) url(backgrounds/green-light1.jpg) right bottom/cover no-repeat; }
:is(.entry-content, .is-root-container) > .savera-bg-green-light.wp-block-group:nth-child(even of .savera-bg-green-light)
	{ background: var(--green-light) url(backgrounds/green-light2.jpg) right bottom/cover no-repeat; }

/* Add alongside any savera-bg-* class (same Additional CSS Class(es) field)
   to keep the plain color on that one section without its background
   image — e.g. the safety bar at the top of Get Help. Border stays;
   add a second override below if a section also needs that dropped. */
:is(.entry-content, .is-root-container) > .savera-no-bg-image.wp-block-group{
  background-image: none !important;
}

/* ==========================================================================
   CARD BACKGROUND IMAGES — opt-in, for the two cards in a 2-column layout
   (Two-Column Feature Cards — Board of Trustees / Ambassadors on About Us
   is the reference case). Add savera-card-bg-image alongside the card's
   existing savera-bg-* class (same Additional CSS Class(es) field, or the
   Card Settings sidebar panel) to swap its flat color for a photo.

   Twofold rotation, same idea as the section backgrounds but keyed to
   column position rather than same-color occurrence — the first column
   always gets image A, the second always gets image B, regardless of
   which color either card ends up using. This only resolves for the first
   two columns in a row by design — a 3rd/4th column falls back to flat
   color, since this feature is specifically for 2-column layouts.

   When the image is present it's the only thing visible — no color wash,
   no blend mode. The color is purely a fallback: it only shows through
   if the image fails to load or hasn't loaded yet, exactly like any
   normal CSS background-color/background-image pairing. Legibility over
   the photo is down to the photo itself — worth choosing or cropping
   images with a naturally darker/plainer area where the text sits.

   Images: backgrounds/cards/<colorname>-a.jpg / <colorname>-b.jpg.

   Cards default to savera-bg-theme (follows the parent page's section
   color). Each page's --theme-card-img-1/-2 (defined alongside --theme
   in the SECTION THEMING block above) point at the card image matching
   that page's own theme color, so background images work correctly on
   the theme-following default too — no need to override the color
   first. Picking an explicit color from the sidebar panel still works
   as normal and uses that color's own images instead.
   ========================================================================== */
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-theme
	{ background: var(--theme) var(--theme-card-img-1) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-theme
	{ background: var(--theme) var(--theme-card-img-2) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-orange
	{ background: var(--orange) url(backgrounds/cards/orange-a.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-orange
	{ background: var(--orange) url(backgrounds/cards/orange-b.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-darkblue
	{ background: var(--darkblue) url(backgrounds/cards/darkblue-a.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-darkblue
	{ background: var(--darkblue) url(backgrounds/cards/darkblue-b.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-purple
	{ background: var(--purple) url(backgrounds/cards/purple-a.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-purple
	{ background: var(--purple) url(backgrounds/cards/purple-b.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-purple-light
	{ background: var(--purple-light) url(backgrounds/cards/purple-light-a.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-purple-light
	{ background: var(--purple-light) url(backgrounds/cards/purple-light-b.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-blue
	{ background: var(--blue) url(backgrounds/cards/blue-a.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-blue
	{ background: var(--blue) url(backgrounds/cards/blue-b.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-teal
	{ background: var(--teal) url(backgrounds/cards/teal-a.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-teal
	{ background: var(--teal) url(backgrounds/cards/teal-b.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-green
	{ background: var(--green) url(backgrounds/cards/green-a.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-green
	{ background: var(--green) url(backgrounds/cards/green-b.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-mustard-light
	{ background: var(--mustard-light) url(backgrounds/cards/mustard-light-a.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-mustard-light
	{ background: var(--mustard-light) url(backgrounds/cards/mustard-light-b.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-orange-light
	{ background: var(--orange-light) url(backgrounds/cards/orange-light-a.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-orange-light
	{ background: var(--orange-light) url(backgrounds/cards/orange-light-b.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-darkblue-light
	{ background: var(--darkblue-light) url(backgrounds/cards/darkblue-light-a.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-darkblue-light
	{ background: var(--darkblue-light) url(backgrounds/cards/darkblue-light-b.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-blue-light
	{ background: var(--blue-light) url(backgrounds/cards/blue-light-a.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-blue-light
	{ background: var(--blue-light) url(backgrounds/cards/blue-light-b.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-mustard
	{ background: var(--mustard) url(backgrounds/cards/mustard-a.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-mustard
	{ background: var(--mustard) url(backgrounds/cards/mustard-b.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(odd) .savera-card-bg-image.savera-bg-green-light
	{ background: var(--green-light) url(backgrounds/cards/green-light-a.jpg) center/cover no-repeat; }
.wp-block-columns > .wp-block-column:nth-child(even) .savera-card-bg-image.savera-bg-green-light
	{ background: var(--green-light) url(backgrounds/cards/green-light-b.jpg) center/cover no-repeat; }

/* Narrow-pad sections (e.g. "We are here for everyone" on Get Help) crop
   their card images from the right instead of centered — equal
   specificity to the color-specific rules above, so it needs to come
   after them in source order to actually win the tie. */
.savera-section.is-narrow-pad .wp-block-columns > .wp-block-column .savera-card-bg-image{
  background-position-x: right;
}

/* ==========================================================================
   IMAGE GRID — CSS Grid (not core Columns) so the breakpoints are exact:
   4 across by default, 2x2 at <=1024px, single column at <=799px.
   Use savera-img-grid-4 for four-item grids (e.g. the homepage service
   cards); savera-img-grid-3 behaves the same but for three-item grids.
   ========================================================================== */
.savera-img-grid{
  display:grid;
  gap: var(--savera-gap);
}
.savera-img-grid-4{ grid-template-columns: repeat(4, 1fr); }
.savera-img-grid-3{ grid-template-columns: repeat(3, 1fr); }

@media (max-width:1024px){
  .savera-img-grid-4,
  .savera-img-grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:799px){
  .savera-img-grid-4,
  .savera-img-grid-3{ grid-template-columns: 1fr; }
}

.savera-img-card{
  display:flex;
  flex-direction:column;
}
.savera-img-card-image{ margin:0; }
.savera-img-card-image img{
  width:100%;
  object-fit:cover;
  display:block;
}
.savera-img-card-body{
  padding: 20px 4px 0;
}
.savera-img-card-body h3{ margin-top:0; margin-bottom:0.5rem; }
.savera-img-card-body .wp-block-buttons{ margin-top:auto; padding-top:0.75rem; }

/* Text-only grid — column count set via a modifier class (savera-flex-
   text-grid-cols-N), same pattern as savera-img-grid-4/-3, so one base
   class covers any N-across-dropping-to-2-across layout without inline
   styles (which risk WP's block-validity check flagging content that
   doesn't match a recognized attribute). Drops at 800px, no further
   single-column step — this is for short heading+blurb content, still
   reads fine at 2-up on a phone. Distinct from savera-img-grid, which
   has its own separate breakpoints for image-topped cards. */
.savera-flex-text-grid{
  display:grid;
  gap: var(--savera-gap);
}
.savera-flex-text-grid > *{ min-width:0; }
.savera-flex-text-grid h4{ margin-top:0; margin-bottom:0.4rem; }

.savera-flex-text-grid-cols-3{ grid-template-columns: repeat(3, 1fr); }
.savera-flex-text-grid-cols-4{ grid-template-columns: repeat(4, 1fr); }

@media (max-width:800px){
  .savera-flex-text-grid-cols-3,
  .savera-flex-text-grid-cols-4{ grid-template-columns: repeat(2, 1fr); }
}

/* Accent modifiers for savera-img-card — previously a thin colored line
   under the image via border-top; removed, kept as top padding only. */
.savera-img-card-accent-orange .savera-img-card-body{ padding-top:16px; }
.savera-img-card-accent-blue   .savera-img-card-body{ padding-top:16px; }
.savera-img-card-accent-purple .savera-img-card-body{ padding-top:16px; }
.savera-img-card-accent-green  .savera-img-card-body{ padding-top:16px; }
.savera-img-card-accent-navy   .savera-img-card-body{ padding-top:16px; }
.savera-img-card-accent-teal   .savera-img-card-body{ padding-top:16px; }

/* ==========================================================================
   PLUGIN PLACEHOLDER — marks where a Content Views / Events Manager
   shortcode should be dropped in, so it's obvious in the editor.
   ========================================================================== */
.savera-plugin-placeholder{
  border: 2px dashed rgba(0,0,0,0.25);
  border-radius: var(--savera-radius);
  padding: 24px;
  font-style: italic;
  color: rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.03);
}