/**
 * Elephant in the Room — Site-specific CSS overrides.
 *
 * This file is loaded last of THIS THEME'S OWN files. That is not the same as
 * last on the page: plugins that enqueue during content rendering still print
 * after it. Measure the emitted head order before assuming you win the cascade
 * — see the inc/enqueue.php docblock.
 *
 * Only add styles specific to THIS site's design that cannot be done via the
 * Blocksy Customizer.
 *
 * Decision checklist: Would this rule make sense on a different MDSC site?
 *   YES → put it in assets/css/components/{component}.css (shared)
 *   NO  → put it here (site-specific)
 *
 * RULES (non-negotiable — see docs/STRUCTURE.md, "CSS rules that bind every file"):
 * - Global styling is set in the Blocksy CUSTOMIZER, not here.
 * - Every var() MUST have a hardcoded fallback: var(--theme-palette-color-N, #hex).
 * - Every rule block, or every coherent group of adjacent related rules, MUST
 *   have a WHY comment + an @date tag.
 * - No !important by default — use cascade specificity. ONE exception: where a
 *   plugin's own stylesheet loads AFTER this theme and marks the same property
 *   !important, cascade position cannot win. Measure the load order, and name
 *   the adversary in a comment on every instance. A bare !important with no
 *   named adversary is a defect.
 *
 * @package MDSC_Child
 * @site    Elephant in the Room
 */

/* ==========================================================================
   Ported from Additional CSS (custom_css post 9) on 2026-09-22, bucket C of
   .local/10-eitr/css-triage-2026-09-22.md. Section order follows the source
   so the two files stay diffable while both are live. Source comments were
   French; they are rewritten in English here, not translated literally.

   Greenshift generated ids (#gspb_… / .gspb_text-id-gsbp-…) are carried over
   structurally unchanged — rewriting them means rebuilding the blocks, which
   regenerates the ids. Each carries a comment naming EVERY page it appears
   on, because the rows were copied between pages and five ids are live on
   three or four pages at once. See README.md → Accepted debt.
   ========================================================================== */

/* EITR brand tint used on dark heroes. #F0F9FC also sits in palette slot 10,
   so it is referenced through the token with the literal as fallback, and
   declared once here rather than repeated per rule. @date 2026-09-22 */
:root {
	--eitr-on-dark: var(--theme-palette-color-10, #F0F9FC);
	/* Deep teal #003741 at a 56% tint. 3.47:1 on white and 3.25:1 on #F0F9FC,
	   so it clears the 3:1 threshold (WCAG 1.4.11) on both surfaces, where
	   Blocksy's own border colour #E9EBEC is 1.20:1. @date 2026-09-28 */
	--eitr-border-strong: #708F95;
}

/* --------------------------------------------------------------------------
   1. Header and offcanvas
   -------------------------------------------------------------------------- */

/* Offcanvas panel blur. INHERITED from the Blocksy demo import (it appears
   verbatim in the orphaned custom_css post 713), not authored for EITR — but
   data-behaviour="left-side" renders on every page, so the mobile panel
   really is blurred today and removing it would be a visible design change.
   Blocksy's headerRowBlur applies to header ROWS only; the offcanvas panel
   exposes background/backdrop colour and no blur, so the Customizer cannot
   express this. Flagged in README.md as a design question, not a bug.
   @date 2026-09-22 */
[data-behaviour*='side'] .ct-panel-inner {
	backdrop-filter: blur(7px);
}

/* Header menu sitting over a dark hero. Blocksy stamps
   [data-transparent-row="yes"] on every page including the light-hero ones,
   so transparentMenuFontColor — which is global to the header — cannot
   express this. The hook has to be the hero, hence .has-dark-hero on the
   hero row. @date 2026-09-22 */
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="menu"] > ul > li > a {
	--theme-link-initial-color: var(--eitr-on-dark, #F0F9FC);
	--theme-link-hover-color: var(--theme-palette-color-1, #C9EF6A);
	color: var(--eitr-on-dark, #F0F9FC);
}

/* The "Get in touch" header button over a dark hero. It is a ghost button, so
   Blocksy paints its BORDER from --theme-button-background-initial-color and its
   label from --theme-button-text-initial-color — both #003741. On /who-we-are/
   the hero is also #003741, so the button rendered at 1.00:1 against its own
   background: not low contrast, the identical colour. Measured 2026-09-23 with
   the button at 126px wide and fully in the DOM, so it was invisible rather
   than absent.
   The rule above already handled the MENU on a dark hero, and section 7 handles
   the Resources button over lime, but this case was never covered.
   Setting Blocksy's own variables rather than color/border-color directly, so
   the button keeps working if Blocksy changes how it composes a ghost button.
   --eitr-on-dark on #003741 = 12.12:1.
   The hover pair is overridden too: Blocksy's default hover is #ffffff on
   #37B9FF, which is 2.2:1 and fails AA. #003741 on #37B9FF is 5.88:1.
   @date 2026-09-23 */
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] .ct-header-cta .ct-button-ghost {
	--theme-button-text-initial-color: var(--eitr-on-dark, #F0F9FC);
	--theme-button-background-initial-color: var(--eitr-on-dark, #F0F9FC);
}

/* The hover pair, on EVERY page — not only the dark hero. Blocksy's default
   hover for this button is #ffffff on #37B9FF = 2.20:1, which fails AA.
   Corrected 2026-09-23 after a red-team pass found the first version of this
   fix scoped inside the dark-hero rule above, so the identical failure the
   comment condemned was still live on the other six pages. axe cannot catch it
   — it does not evaluate hover states.
   #003741 on #37B9FF = 5.88:1.

   The selector is deliberately long. Blocksy sets this variable per header
   element with
     [data-header*="type-1"] .ct-header [data-id="button"] .ct-button-ghost
   which is (0,4,0). The first attempt at this rule used
     .ct-header .ct-header-cta .ct-button-ghost
   at (0,3,0) and lost silently — the variable was set, the cascade discarded
   it, and the hover stayed at 2.20:1. Measured, not assumed: the computed
   value still read #ffffff afterwards.
   (0,5,0) here beats Blocksy outright rather than relying on source order,
   which would break if the enqueue order ever changed. @date 2026-09-23 */
[data-header] .ct-header .ct-header-cta[data-id] .ct-button-ghost {
	--theme-button-text-hover-color: var(--theme-palette-color-3, #003741);
	--theme-button-background-hover-color: var(--theme-palette-color-2, #37B9FF);
}

/* Active menu item in bold, all pages. headerMenuFont is a single typography
   control for the whole menu, and the Active state in menuFontColor is
   colour-only — there is no per-state font-weight anywhere in Blocksy's
   panel-builder/header/menu/options.php. So this cannot be a Customizer
   setting. @date 2026-09-22 */
.ct-header .menu-item.current-menu-item > .ct-menu-link,
.ct-header .menu-item.current_page_item > .ct-menu-link,
.ct-header .menu-item.current-menu-ancestor > .ct-menu-link,
.ct-header .menu-item.current-menu-parent > .ct-menu-link,
.mobile-menu .menu-item.current-menu-item > .ct-menu-link,
.mobile-menu .menu-item.current_page_item > .ct-menu-link,
.mobile-menu .menu-item.current-menu-ancestor > .ct-menu-link,
.mobile-menu .menu-item.current-menu-parent > .ct-menu-link {
	font-weight: 700;
}

/* Reversed logo over a dark hero. The URL is root-relative so it survives a
   domain migration. @date 2026-09-22
   Scoped to the transparent row since the sticky header (2026-10-09): once
   stuck, Blocksy sets data-transparent-row="no" and paints the row white, and
   the reversed logo's pale wordmark nearly vanished on it. @date 2026-10-09 */
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] .site-logo-container .default-logo {
	content: url("/wp-content/uploads/2026/09/EITR_SecondaryLogo_Black_ENG_RGB-1.svg");
}

/* --------------------------------------------------------------------------
   2. Partner logo strip (Who We Are) and logo grid (Partners)

   Both use the same 2:1 "same-box" logo files (each logo already centred at
   equal visual weight on a transparent 480x240 or 600x300 canvas; pipeline in
   .local/10-eitr/blocks/partner-logos/uniform/), so one box rule each and no
   per-logo rules. Until 2026-10-28 the strip used its own ~190px files with
   24 per-image heights (IDs 1334–1357); those files were soft and are retired.
   @date 2026-10-28
   -------------------------------------------------------------------------- */
.eitr-logo-strip .swiper-slide,
.eitr-logo-strip .swiper-slide-inner,
.eitr-logo-strip .slider-content-zone,
.eitr-logo-strip .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.eitr-logo-strip .swiper-slide {
	min-height: 110px;
	height: auto;
}

/* Since 2026-10-28 the strip uses the SAME 480x240 same-box files as the Partners grid (Jayr: "make sure all logos
   are sharp"; the old ~190px files were drawn up to 210px, soft everywhere). Each file already holds its logo at
   equal visual weight, so one 2:1 box for every slide and no per-logo rules: about 188x94 at 6 per view, 163x81 on
   phones (2 per view), so the 480px files stay sharp on retina. @date 2026-10-28 */
.eitr-logo-strip .swiper-slide img {
	width: 100%;
	max-width: 220px;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: contain;
}
/* Keep the edge logos clear of the 46px arrows (10px from each edge): red team 2026-10-28 saw the arrow
   covering "DALHOUSIE". The padding sits on the Swiper's parent (which also anchors the arrows), so the
   clipped slider area itself ends before the arrows; padding on .swiper would still show slides under them. */
.eitr-logo-strip .gs-swiper-init {
	padding-inline: 64px;
}

/* Partners page logo grid (/our-partners/): every logo in the SAME box,
   240x120 (160x80 on phones). Each file is a 2:1 transparent canvas with the
   logo already centred and sized for equal visual weight, so no per-logo
   rule is needed: a new partner only needs its file exported the same way
   (script + sources: .local/10-eitr/blocks/partner-logos/uniform/). The Group
   uses the native Flex layout (wrap, centred), so a short last row is centred
   whatever the count; the cell width has no block-editor setting. Up to 5 per
   row at full width. Jayr 2026-10-09. @date 2026-10-09 */
.eitr-logo-grid .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 240px;
	max-width: 100%;
	min-height: 110px;
	margin: 0;
}
.eitr-logo-grid .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
}
/* Current Partners only (row gsbp-04790b5): 4 per row, wider boxes (Jayr 2026-10-28, "from 5 column to 4 column
   so it's wider"). A quarter of the row minus the 3 gaps of 16px, capped at 300px: 300px on a 1290 row, and still 4
   per row on 1280-1366 laptops (a fixed 300px broke into 3/3/1 there, red team 2026-10-28). Desktop breakpoint as
   the rest of the file; below it the 240px / phone rules apply. Files are 600x300 for retina. @date 2026-10-28 */
@media (min-width: 1000px) {
	body.page-id-2098 #gspb_row-id-gsbp-04790b5 .eitr-logo-grid .wp-block-image {
		width: calc((100% - 48px) / 4);
		max-width: 300px;
		min-height: 140px;
	}
}

/* Mobile strip sizing. NOTE the 767px breakpoint: it matches nothing else —
   every other query in this file, and both of Blocksy's, is 999.98/689.98.
   It leaves a 768–999px band where the strip keeps desktop sizing while the
   rest of the page is in tablet layout. Ported unchanged so the migration
   fingerprint stays meaningful; recorded in README.md as a suspected defect
   for a visual check at 800px. @date 2026-09-22 */
@media (max-width: 767px) {
	.eitr-logo-strip .swiper-slide { min-height: 76px; }
	.eitr-logo-strip .gs-swiper-init { padding-inline: 58px; }
	/* Partners grid on phones: 2 per row (half the row minus half the 16px
	   gap), logo box up to 160x80. @date 2026-10-09 */
	.eitr-logo-grid .wp-block-image { width: calc(50% - 8px); min-height: 76px; }
	.eitr-logo-grid .wp-block-image img { width: 160px; max-width: 100%; }
}

/* --------------------------------------------------------------------------
   3. "How To End the Stigma" accordion toggle (Get Involved)
   Greenshift freezes the plus/minus toggle at 14×2px and exposes no control
   for it, in Design or in Block and Items Spacing. The comp asks for 22×4.
   .eitr-stigma-accordion is a hand-added class, used in preference to the
   generated gsbp id so the rule survives a block rebuild. @date 2026-09-22
   -------------------------------------------------------------------------- */
.eitr-stigma-accordion .gs-accordion-item__title span.iconfortoggle {
	width: 22px;
	height: 22px;
}

.eitr-stigma-accordion .gs-accordion-item__title span.iconfortoggle .gs-iconbefore,
.eitr-stigma-accordion .gs-accordion-item__title span.iconfortoggle .gs-iconafter {
	width: 22px;
	height: 4px;
}

/* ==========================================================================
   4. Home, Who We Are, Get Involved — shared Greenshift rows

   The rows and containers were copied from page to page, so the same
   generated ids serve several pages at once. Greenshift's breakpoints match
   Blocksy's: 999.98px (tablet) and 689.98px (mobile).

   Body type 18/17/16 at line-height 1.6 and H1 70/1.2/800 are set in
   Blocksy → Typography. The H1 rule below exists only to get past the 65px
   entered at block level.
   ========================================================================== */

/* --------------------------------------------------------------------------
   4a. Desktop — aligned to the Figma 1440 frame. Measured off the exports:
   hero 924px, sections at 80 or 100px, "Who the Campaign Speaks To" cards
   with a 100px icon then 56px before the title, "What Does an Ambassador Do"
   rows at 56px with a 110px icon aligned to the top. @date 2026-09-22
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
	/* Hero row — Home, Who We Are, Get Involved, Resources, Partners (/our-partners/). */
	#gspb_row-id-gsbp-7edf5ee {
		padding-bottom: 120px;
	}
	/* Hero H1 — Home, Who We Are, Get Involved, Resources, Partners (/our-partners/). */
	#gspb_heading-id-gsbp-d37f723 {
		font-size: 70px;
		line-height: 1.2;
	}
	/* "Who the Campaign Speaks To" section wrapper — Home. */
	#gspb_row-id-gsbp-4475586 {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	/* "How To End the Stigma" section wrapper — Get Involved, Resources. */
	#gspb_row-id-gsbp-d6a02e7 {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	/* Section intro block above the cards — Home. */
	#gspb_row-id-gsbp-d0eb7e3 {
		margin-bottom: 36px;
	}
	/* Card icon in "Who the Campaign Speaks To" — Home. The icon wrapper
	   already carries 32px of margin, so 24 + 32 = the 56px in the comp. */
	#gspb_row-id-gsbp-2888663 .gspb_iconBox {
		margin-bottom: 24px;
	}
	/* Card title in "Who the Campaign Speaks To" — Home. */
	#gspb_row-id-gsbp-2888663 h3 {
		margin-bottom: 24px;
	}
	/* The three "What Does an Ambassador Do" rows — Get Involved. */
	#gspb_container-id-gsbp-d44f625,
	#gspb_container-id-gsbp-830fa9b,
	#gspb_container-id-gsbp-7d208fb {
		/* !important ×2: outranked by #gspb_container-id-gsbp-<id>.gspb_container
		   in greenshift-post-css-inline-css, which sets padding-top:40px and
		   padding-bottom:40px at (1,1,0) against our (1,0,0). */
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
	/* First of the three rows sits tighter under the heading — Get Involved. */
	#gspb_container-id-gsbp-d44f625 {
		/* !important: same adversary, #gspb_container-id-gsbp-d44f625.gspb_container
		   padding-top:0/40px in greenshift-post-css-inline-css. */
		padding-top: 24px !important;
	}
	/* Icon and copy align to the top of the row, not centred — Get Involved. */
	#gspb_container-id-gsbp-d44f625 > *,
	#gspb_container-id-gsbp-830fa9b > *,
	#gspb_container-id-gsbp-7d208fb > * {
		/* !important: the CHILD carries its own Greenshift id, and
		   body.gspb-bodyfront #gspb_container-id-gsbp-c38e89d.gspb_container
		   (greenshift-post-css-inline-css) sets align-self:center at (1,3,0)
		   against our (1,1,0). A child selector cannot out-specify it. */
		align-self: start !important;
	}
	/* Row icon — Get Involved. */
	#gspb_container-id-gsbp-d44f625 .gspb_image img,
	#gspb_container-id-gsbp-830fa9b .gspb_image img,
	#gspb_container-id-gsbp-7d208fb .gspb_image img {
		width: 110px;
	}
}

/* --------------------------------------------------------------------------
   4b. Tablet, 690–999px. @date 2026-09-22
   -------------------------------------------------------------------------- */
@media (max-width: 999.98px) {
	/* Hero row — Home, Who We Are, Get Involved, Resources, Partners (/our-partners/). 140px = the
	   100px transparent header plus breathing room. */
	#gspb_row-id-gsbp-7edf5ee {
		padding-top: 140px;
		padding-bottom: 48px;
	}
	/* "Who the Campaign Speaks To" cards — Home. Three across is too narrow
	   on tablet, titles break mid-word, so they go full width. */
	#gspb_row-id-gsbp-2888663 > .gspb_row__content > .gspb_row__col--4 {
		width: 100%;
	}
	#gspb_row-id-gsbp-2888663 > .gspb_row__content {
		row-gap: 20px;
	}
}

@media (min-width: 690px) and (max-width: 999.98px) {
	/* "What Does an Ambassador Do" rows — Get Involved. Icon left, title and
	   text stacked to its right, replacing the desktop 8-column grid. */
	#gspb_container-id-gsbp-d44f625,
	#gspb_container-id-gsbp-830fa9b,
	#gspb_container-id-gsbp-7d208fb {
		/* !important ×3: #gspb_container-id-gsbp-<id>.gspb_container in
		   greenshift-post-css-inline-css sets grid-template-columns
		   repeat(8,…)/repeat(1,…), column-gap:32px and row-gap:20px at (1,1,0)
		   against our (1,0,0). */
		grid-template-columns: 96px 1fr !important;
		column-gap: 24px !important;
		row-gap: 8px !important;
	}
	/* Icon spans both rows of the grid — Get Involved. */
	#gspb_container-id-gsbp-d44f625 > :nth-child(1),
	#gspb_container-id-gsbp-830fa9b > :nth-child(1),
	#gspb_container-id-gsbp-7d208fb > :nth-child(1) {
		/* !important: the child carries its own Greenshift id and
		   body.gspb-bodyfront #gspb_container-id-gsbp-c38e89d.gspb_container
		   (greenshift-post-css-inline-css) sets grid placement and align-self
		   at (1,3,0) against our (1,1,0). */
		grid-column: 1 / 2 !important;
		grid-row: 1 / 3 !important;
		align-self: start !important;
	}
	/* Title, top right — Get Involved. */
	#gspb_container-id-gsbp-d44f625 > :nth-child(2),
	#gspb_container-id-gsbp-830fa9b > :nth-child(2),
	#gspb_container-id-gsbp-7d208fb > :nth-child(2) {
		/* !important: the child carries its own Greenshift id and
		   body.gspb-bodyfront #gspb_container-id-gsbp-c38e89d.gspb_container
		   (greenshift-post-css-inline-css) sets grid placement and align-self
		   at (1,3,0) against our (1,1,0). */
		grid-column: 2 / 3 !important;
		grid-row: 1 / 2;
		align-self: start !important;
	}
	/* Body copy, below the title — Get Involved. */
	#gspb_container-id-gsbp-d44f625 > :nth-child(3),
	#gspb_container-id-gsbp-830fa9b > :nth-child(3),
	#gspb_container-id-gsbp-7d208fb > :nth-child(3) {
		/* !important: the child carries its own Greenshift id and
		   body.gspb-bodyfront #gspb_container-id-gsbp-c38e89d.gspb_container
		   (greenshift-post-css-inline-css) sets grid placement and align-self
		   at (1,3,0) against our (1,1,0). */
		grid-column: 2 / 3 !important;
		grid-row: 2 / 3 !important;
		align-self: start !important;
	}
}

/* --------------------------------------------------------------------------
   4c. Mobile, under 690px.
   Scale: H1 35 and H2 25 come from the block, H3 22, body 16/1.6, intro 17.
   Spacing: sections 56, between cards 40, card padding 28, 28 under a
   section title, 12 under an H3, 24 under a paragraph. Everything stays
   left-aligned, as the desktop comp is. @date 2026-09-22
   -------------------------------------------------------------------------- */
@media (max-width: 689.98px) {
	/* Hero row — Home, Who We Are, Get Involved, Resources, Partners (/our-partners/). */
	#gspb_row-id-gsbp-7edf5ee {
		padding-top: 128px;
		padding-bottom: 40px;
	}
	/* Hero intro paragraph — Home, Who We Are, Get Involved, Resources, Partners (/our-partners/).
	   Class selector, not an id, but the same generated-id family. */
	.gspb_text-id-gsbp-5c0e1d9 {
		font-size: 17px;
		line-height: 1.6;
		/* !important: greenshift-post-css-inline-css marks this very property
		   !important on this very selector (.gspb_text-id-gsbp-5c0e1d9
		   { margin-bottom:50px!important }). Neither order nor specificity wins
		   against that — only !important does. */
		margin-bottom: 32px !important;
	}

	/* Section wrappers — ff04535 Home, 4475586 Home,
	   d6a02e7 Get Involved and Resources. */
	#gspb_row-id-gsbp-ff04535,
	#gspb_row-id-gsbp-4475586,
	#gspb_row-id-gsbp-d6a02e7 {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	/* Section intro blocks — d0eb7e3 Home, afad9d4 Get Involved. */
	#gspb_row-id-gsbp-d0eb7e3,
	#gspb_container-id-gsbp-afad9d4 {
		/* !important: outranked by #gspb_container-id-gsbp-afad9d4.gspb_container
		   (margin-bottom:50px) in greenshift-post-css-inline-css, (1,1,0)
		   against our (1,0,0). */
		margin-bottom: 28px !important;
	}
	/* "How To End the Stigma" H2 — Get Involved, Resources. */
	#gspb_row-id-gsbp-d6a02e7 h2 {
		margin-bottom: 28px;
		/* !important: greenshift-post-css-inline-css marks text-align !important
		   on the heading's own id (#gspb_heading-id-gsbp-59afc4a
		   { text-align:center!important }). */
		text-align: left !important;
	}
	/* Stacked columns — bd7631c Get Involved and Resources; 642d48b Home,
	   Who We Are, Get Involved and Resources; ff7ae4f Home, Who We Are and
	   Get Involved; 4348e63 Who We Are; 9a2baae Get Involved.
	   24px between image and text instead of the desktop 50. */
	#gspb_row-id-gsbp-bd7631c > .gspb_row__content,
	#gspb_row-id-gsbp-642d48b > .gspb_row__content,
	#gspb_row-id-gsbp-ff7ae4f > .gspb_row__content,
	#gspb_row-id-gsbp-4348e63 > .gspb_row__content,
	#gspb_row-id-gsbp-9a2baae > .gspb_row__content {
		row-gap: 24px;
	}
	/* Stigma accordion — Get Involved, Resources. */
	#gspb_accordion-id-gsbp-7419a86 {
		margin-bottom: 0;
	}

	/* Full-width feature cards — Wellness Trunk (642d48b: Home, Who We Are,
	   Get Involved, Resources), Ambassador (ff7ae4f: Home, Who We Are, Get
	   Involved), Who We Are (4348e63: Who We Are), Donate (9a2baae: Get
	   Involved). */
	#gspb_row-id-gsbp-642d48b,
	#gspb_row-id-gsbp-ff7ae4f,
	#gspb_row-id-gsbp-4348e63,
	#gspb_row-id-gsbp-9a2baae {
		margin-top: 0;
		margin-bottom: 40px;
	}
	/* Full-width feature cards plus the Who We Are mission container —
	   642d48b Home, Who We Are, Get Involved, Resources; ff7ae4f Home,
	   Who We Are, Get Involved; 4348e63 Who We Are; 9a2baae Get Involved;
	   16867f9 Who We Are. */
	#gspb_row-id-gsbp-642d48b,
	#gspb_row-id-gsbp-ff7ae4f,
	#gspb_row-id-gsbp-4348e63,
	#gspb_row-id-gsbp-9a2baae,
	#gspb_container-id-gsbp-16867f9 {
		/* !important: outranked by #gspb_container-id-gsbp-16867f9.gspb_container
		   (padding:30px) in greenshift-post-css-inline-css, (1,1,0) vs (1,0,0).
		   The four row ids in this group do not need it; they share the rule. */
		padding: 28px !important;
	}
	/* Card titles in the five feature blocks — 642d48b Home, Who We Are,
	   Get Involved, Resources; ff7ae4f Home,
	   Who We Are, Get Involved; 4348e63 Who We Are; 9a2baae Get Involved;
	   16867f9 Who We Are. */
	#gspb_row-id-gsbp-642d48b h3,
	#gspb_row-id-gsbp-ff7ae4f h3,
	#gspb_row-id-gsbp-4348e63 h3,
	#gspb_row-id-gsbp-9a2baae h3,
	#gspb_container-id-gsbp-16867f9 h3 {
		margin-bottom: 12px;
	}
	/* Card body copy in the five feature blocks — 642d48b Home, Who We Are,
	   Get Involved, Resources; ff7ae4f Home,
	   Who We Are, Get Involved; 4348e63 Who We Are; 9a2baae Get Involved;
	   16867f9 Who We Are. */
	#gspb_row-id-gsbp-642d48b .gspb_text,
	#gspb_row-id-gsbp-ff7ae4f .gspb_text,
	#gspb_row-id-gsbp-4348e63 .gspb_text,
	#gspb_row-id-gsbp-9a2baae .gspb_text,
	#gspb_container-id-gsbp-16867f9 .gspb_text {
		/* !important: greenshift-post-css-inline-css marks margin-bottom
		   !important on each text block's own id (e.g. .gspb_text-id-gsbp-943595d
		   { margin-bottom:35px!important }). */
		margin-bottom: 24px !important;
	}
	/* Mission container — Who We Are. */
	#gspb_container-id-gsbp-16867f9 {
		/* !important: outranked by #gspb_container-id-gsbp-16867f9.gspb_container
		   (margin-bottom:60px) in greenshift-post-css-inline-css. */
		margin-bottom: 40px !important;
	}

	/* "Who the Campaign Speaks To" cards — Home. */
	#gspb_row-id-gsbp-2888663 > .gspb_row__content > .gspb_row__col--4 {
		padding: 28px;
	}
	#gspb_row-id-gsbp-2888663 > .gspb_row__content {
		row-gap: 16px;
	}
	/* Card icon, left-aligned on mobile — Home. */
	#gspb_row-id-gsbp-2888663 .gspb_iconBox {
		justify-content: flex-start;
		margin-bottom: 0;
	}
	#gspb_row-id-gsbp-2888663 .gspb_iconBox__wrapper {
		margin-bottom: 20px;
		width: auto;
		height: auto;
	}
	#gspb_row-id-gsbp-2888663 .gspb_iconBox img {
		width: auto;
		height: 64px;
	}
	/* Card title — Home. */
	#gspb_row-id-gsbp-2888663 h3 {
		font-size: 22px;
		line-height: 1.3;
		margin-bottom: 12px;
	}

	/* Left-align everything on mobile; these blocks default to centred.
	   2888663 Home, 4475586 Home, 16867f9 Who We Are. */
	#gspb_row-id-gsbp-2888663 .gspb_heading,
	#gspb_row-id-gsbp-2888663 .gspb_text,
	#gspb_row-id-gsbp-4475586 .gspb_heading,
	#gspb_row-id-gsbp-4475586 .gspb_text,
	#gspb_container-id-gsbp-16867f9 .gspb_heading,
	#gspb_container-id-gsbp-16867f9 .gspb_text {
		/* !important: greenshift-post-css-inline-css marks text-align !important
		   on each heading's and text block's own id (e.g.
		   #gspb_heading-id-gsbp-f5ccbab, .gspb_text-id-gsbp-85feb59). */
		text-align: left !important;
	}
	/* Mission container and its button — Who We Are. */
	#gspb_container-id-gsbp-16867f9 .gspb_container,
	#gspb_container-id-gsbp-16867f9 .gspb_button_wrapper {
		align-items: flex-start;
		justify-content: flex-start;
	}

	/* "What Does an Ambassador Do" rows — Get Involved. */
	#gspb_container-id-gsbp-d44f625,
	#gspb_container-id-gsbp-830fa9b,
	#gspb_container-id-gsbp-7d208fb {
		/* !important ×2: outranked by #gspb_container-id-gsbp-<id>.gspb_container
		   (row-gap:20px, padding-bottom:40px) in greenshift-post-css-inline-css. */
		row-gap: 12px !important;
		padding-bottom: 32px !important;
	}
	/* Row icon — Get Involved. */
	#gspb_container-id-gsbp-d44f625 .gspb_image img,
	#gspb_container-id-gsbp-830fa9b .gspb_image img,
	#gspb_container-id-gsbp-7d208fb .gspb_image img {
		width: auto;
		height: 72px;
	}
}

/* --------------------------------------------------------------------------
   5. "How To End the Stigma" accordion, all screens (Get Involved, Resources)
   Greenshift defect, not an EITR preference: the first item opens on load
   with a max-height computed before the webfont arrives, so its content
   overflowed onto the next title. Keyed to the plugin's own classes with no
   EITR hook, so it would qualify as a shared component — kept here because a
   component holding one declaration is more ceremony than it earns. README.md
   records the promotion trigger: the second MDSC site that hits this.
   @date 2026-09-22
   -------------------------------------------------------------------------- */
.gs-accordion .gs-accordion-item.gsopen > .gs-accordion-item__content {
	/* !important: outranked by #gspb_accordion-id-gsbp-7419a86
	   .gs-accordion-item.gsopen > .gs-accordion-item__content (max-height:5000px)
	   in greenshift-post-css-inline-css — (1,2,2) against our (0,3,2). Keeping
	   the semantic selector rather than pasting the generated id is the reason
	   the source used !important here too. */
	max-height: none !important;
}

/* --------------------------------------------------------------------------
   6. "How To End the Stigma" section (Get Involved, Resources)
   Heading left-aligned at every width, accordion aligned to the top of the
   photo, and the photo keeps its ratio — it was being forced to 500px with a
   cover crop on tablet and mobile. On tablet the two columns stay side by
   side as on desktop rather than stacking a portrait photo.
   @date 2026-09-22
   -------------------------------------------------------------------------- */
/* Section H2 — Get Involved, Resources. */
#gspb_row-id-gsbp-d6a02e7 h2 {
	/* !important: greenshift-post-css-inline-css marks text-align !important on
	   the heading's own id (#gspb_heading-id-gsbp-59afc4a
	   { text-align:center!important } under max-width:999.98px). */
	text-align: left !important;
}
/* Section photo — Get Involved, Resources. */
#gspb_row-id-gsbp-d6a02e7 .gspb_image,
#gspb_row-id-gsbp-d6a02e7 .gspb_image img {
	height: auto;
	object-fit: contain;
}
@media (min-width: 690px) {
	/* Accordion — Get Involved, Resources. */
	#gspb_accordion-id-gsbp-7419a86 {
		margin-top: 0;
	}
}
@media (min-width: 690px) and (max-width: 999.98px) {
	/* Two-column row — Get Involved, Resources. */
	#gspb_row-id-gsbp-bd7631c > .gspb_row__content {
		flex-wrap: nowrap;
		column-gap: 32px;
		align-items: flex-start;
	}
	#gspb_row-id-gsbp-bd7631c > .gspb_row__content > .gspb_row__col--6 {
		width: calc(50% - 16px);
	}
}

/* --------------------------------------------------------------------------
   7. Resources (page 1463)
   Built from the same rows as the other pages. The two "Wellness Trunk
   Initiative" panels are made equal height, the four "Each trunk" columns are
   separated by a rule, and everything stays left-aligned on mobile.
   @date 2026-09-22
   -------------------------------------------------------------------------- */
/* Wellness Trunk two-panel row — Resources. */
#gspb_row-id-gsbp-0dcbbfd > .gspb_row__content {
	align-items: stretch;
}
/* Text panel, right — Resources. Flex column so it can fill the matched
   height without the copy floating mid-panel. */
#gspb_row-id-gsbp-0dcbbfd > .gspb_row__content > .gspb_row__col--6:last-child {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
}
/* Photo panel, left — Resources. Fills the matched height by cropping. */
#gspb_row-id-gsbp-0dcbbfd > .gspb_row__content > .gspb_row__col--6:first-child .gspb_image,
#gspb_row-id-gsbp-0dcbbfd > .gspb_row__content > .gspb_row__col--6:first-child img {
	height: 100%;
	object-fit: cover;
}
@media (min-width: 1000px) {
	/* "Each trunk contains" four-column row — Resources. Divider between
	   adjacent columns only, so the first column has no leading rule. */
	#gspb_row-id-gsbp-tail0001 > .gspb_row__content > .gspb_row__col--3 + .gspb_row__col--3 {
		border-left: 2px solid var(--theme-palette-color-2, #37B9FF);
	}
}

/* "Each trunk contains" lists — Resources. The bullets line up with the left
   edge of the surrounding text: the native outside marker overflows the list
   box, so it is replaced by a positioned dot. No block control owns the <ul>
   and <li> inside a Greenshift text block, so this stays CSS permanently.
   @date 2026-09-22 */
#gspb_row-id-gsbp-tail0001 ul {
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}

#gspb_row-id-gsbp-tail0001 li {
	position: relative;
	padding-left: 18px;
}

#gspb_row-id-gsbp-tail0001 li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.61em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: currentColor;
}

@media (min-width: 690px) and (max-width: 999.98px) {
	/* Four-column row wraps to two on tablet — Resources. */
	#gspb_row-id-gsbp-tail0001 > .gspb_row__content {
		row-gap: 40px;
	}
}

@media (max-width: 689.98px) {
	/* Left-align the Resources sections on mobile; they default to centred.
	   wti0001, 4e0afad, d0e8c23 — all Resources; 0df4b84 — Resources and Partners (/our-partners/). */
	#gspb_row-id-gsbp-wti0001 .gspb_heading,
	#gspb_row-id-gsbp-wti0001 .gspb_text,
	#gspb_row-id-gsbp-4e0afad .gspb_heading,
	#gspb_row-id-gsbp-4e0afad .gspb_text,
	#gspb_row-id-gsbp-d0e8c23 .gspb_heading,
	#gspb_row-id-gsbp-d0e8c23 .gspb_text,
	#gspb_row-id-gsbp-0df4b84 .gspb_heading,
	#gspb_row-id-gsbp-0df4b84 .gspb_text {
		/* !important: greenshift-post-css-inline-css marks text-align !important
		   on each heading's own id (e.g. #gspb_heading-id-gsbp-355365f
		   { text-align:center!important }). */
		text-align: left !important;
	}
	/* Section wrappers — Resources. */
	#gspb_row-id-gsbp-wti0001,
	#gspb_row-id-gsbp-4e0afad {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	/* Stacked columns — dd7044a, 0dcbbfd, d0e8c23, tail0001 — all
	   Resources; 0df4b84 — Resources and Partners (/our-partners/). tail0001 is overridden immediately below: it stacks four
	   columns rather than two and needs the wider gap. */
	#gspb_row-id-gsbp-dd7044a > .gspb_row__content,
	#gspb_row-id-gsbp-0dcbbfd > .gspb_row__content,
	#gspb_row-id-gsbp-d0e8c23 > .gspb_row__content,
	#gspb_row-id-gsbp-0df4b84 > .gspb_row__content,
	#gspb_row-id-gsbp-tail0001 > .gspb_row__content {
		row-gap: 24px;
	}
	#gspb_row-id-gsbp-tail0001 > .gspb_row__content {
		row-gap: 40px;
	}
	/* "Order Now" button block — Resources. */
	#gspb_row-id-gsbp-d0e8c23 .gspb_button_wrapper {
		justify-content: flex-start;
	}
}

/* Resources header CTA. The Resources hero is green, so the header button
   goes teal-on-green as in the comp; the site default would be green on
   green. Blocksy Companion Pro 2.1.53 CAN do this natively via conditional
   headers (blocksy_premium_header_conditions), but only by cloning the whole
   14-item header section for one page — every future header change would
   then have to be made twice. Declined deliberately; see triage §7.1.
   @date 2026-09-22 */
body.page-id-1463 .ct-header [data-transparent-row="yes"] .ct-header-cta[data-id="tvpBhj"] .ct-button {
	border: 2px solid var(--theme-palette-color-3, #003741);
	--theme-button-background-hover-color: var(--theme-palette-color-3, #003741);
	--theme-button-text-hover-color: var(--theme-palette-color-1, #C9EF6A);
}

/* 🔴 Why the selector gained [data-id="tvpBhj"] on 2026-09-23.
   The rule above was written when "Get in touch" was the SOLID button
   (.ct-button) and Donate was the ghost — its original comment says the site
   default would be "green on green", which describes Get in touch.
   The Donate redesign then swapped the two: Donate became .ct-button and Get in
   touch became .ct-button-ghost. The selector did not change, but what it
   MATCHED did, so it silently began recolouring Donate instead. Measured
   2026-09-23: Donate rendered #003741 on Resources against #FF7212 on all six
   other pages.
   The fix is to target the element by IDENTITY (its header element id) rather
   than by APPEARANCE (.ct-button), so a future restyle cannot re-point it.

   The problem this solves: the orange fill alone is 2.09:1 against the #C9EF6A
   hero, below the 3:1 WCAG 1.4.11 asks of a component boundary.

   🔴 REVISED 2026-09-23 after a red-team pass. The first version recoloured the
   whole button near-black, because it scored highest — 20.5:1 label, 15.66:1
   boundary. It did, and it was still wrong twice over. Donate is orange on the
   six other pages, so this page alone lost the brand's "give money" signal; and
   near-black #040404 against the header's own teal state pill #003741 is
   1.58:1, the exact figure section 9 cites as the point where two colours stop
   being distinguishable. Two dark pills in one row, one a button and one a
   state.

   1.4.11 asks that the component be identifiable, not that the FILL carry the
   ratio. A border does it: #003741 against the lime hero is 9.88:1. So the fill
   stays brand orange, the label stays #003741 at 4.72:1, and the button reads
   4.72:1 against the nav pill instead of 1.58:1. Nothing about Donate changes
   on the other six pages.
   Get in touch needs no override here — its ghost styling is teal on lime at
   9.88:1 and already passes. @date 2026-09-23 */

/* Resources "Get In Touch" button keeps the site default pill size —
   Resources, Partners (/our-partners/). "Order Now" on the same page is intentionally larger (18px,
   padding 14/40) because it is the page's main call to action, so this one
   has to be pulled back down. @date 2026-09-22 */
#gspb_button-id-gsbp-fa83218 > .gspb-buttonbox {
	font-size: 15px;
	font-weight: 600;
	padding: 12px 26px;
}

/* --------------------------------------------------------------------------
   8. Get In Touch (page 1546)
   The hero row is a clone of the Get Involved hero — same paddings
   (180/120 desktop, 140/48 tablet, 128/40 mobile), same 50/50 columns, same
   H1 and intro. Its background is pattes.svg, already used on Who We Are,
   positioned bottom-left as in the Figma frame.
   The Fluent Forms styling that accompanied this section in the source is
   NOT here — it is a shared component, assets/css/components/fluent-forms.css.
   @date 2026-09-22
   -------------------------------------------------------------------------- */
@media (max-width: 999.98px) {
	/* Hero row — Get In Touch. The paw pattern is hidden once the columns
	   stack, where it would sit behind the form. */
	#gspb_row-id-gsbp-a6430c0 {
		/* !important: outranked by #gspb_row-id-gsbp-a6430c0.gs-active-view in
		   greenshift-post-css-inline-css, (1,1,0) against our (1,0,0). */
		background-image: none !important;
	}
}

@media (max-width: 689.98px) {
	/* Hero intro paragraph — Get In Touch. Same mobile step as the Get
	   Involved hero text, 18 to 17px. Class selector, not an id, but the
	   same generated-id family. */
	.gspb_text-id-gsbp-e5f639f {
		font-size: 17px;
		line-height: 1.6;
	}
}

/* --------------------------------------------------------------------------
   9. Footer menu — current page
   -------------------------------------------------------------------------- */

/* The footer menu marks the current page with colour alone, and every item is
   Bold 700, so weight cannot carry the signal either. Measured 2026-09-23:
   active #040404 against the other items' #003741 is 1.58:1 — below the ~1.5
   threshold at which most people stop being able to tell two colours apart.
   WCAG 1.4.1 also advises against colour as the sole visual signal.

   Blocksy cannot fix this natively: footerMenuFont is one typography control
   for the whole menu and the Active state in its font-colour control is
   colour-only, the same limitation documented on the header rule in section 1.

   A filled pill adds a non-colour signal — shape. White on deep teal is
   12.94:1, and the pill itself is 5.88:1 against the #37B9FF footer, above the
   3:1 that WCAG 1.4.11 asks of a component boundary.

   Vertical padding is applied to EVERY item, not just the active one, so the
   active pill is never taller than its neighbours. The 20px horizontal padding
   Blocksy already applies becomes the pill's side padding.

   🔴 CORRECTED 2026-09-23 after a red-team pass. The first version of this
   comment claimed the padding "does not change the row's height or shift its
   neighbours". That was measured only at 1440 and is false elsewhere. Actual,
   measured at three widths with the rule neutralised at runtime:
     link height  18px -> 36px at EVERY width
     footer total 1440: 459 -> 459   (absorbed by a fixed-height row)
                   800: 453 -> 489   (+36)
                   390: 792 -> 882   (+90)
   The change is still correct, for a better reason than the one first given:
   an 18px-tall link FAILS WCAG 2.2 SC 2.5.8 Target Size (Minimum), which asks
   for 24x24 CSS px. 36px passes. So this rule fixed an undetected 2.5.8 issue
   as well as the 1.4.1 one it was written for — axe does not flag 2.5.8.
   @date 2026-09-23 */
.ct-footer [data-id="menu"] .menu > li > .ct-menu-link {
	padding-block: 9px;
}

.ct-footer [data-id="menu"] .menu > li.current-menu-item > .ct-menu-link,
.ct-footer [data-id="menu"] .menu > li.current_page_item > .ct-menu-link,
.ct-footer [data-id="menu"] .menu > li.current-menu-ancestor > .ct-menu-link,
.ct-footer [data-id="menu"] .menu > li.current-menu-parent > .ct-menu-link {
	background-color: var(--theme-palette-color-3, #003741);
	color: var(--theme-palette-color-8, #ffffff);
	border-radius: 100px;
	/* Below ~690px the footer menu stacks and each item becomes full width, so
	   without this the pill spans the whole viewport as a bar rather than a
	   pill — measured x=3 to x=387 in a 390 viewport, breaking the footer's
	   23px left gutter. fit-content is a no-op at desktop, where the link is
	   already sized to its text. Found by red team 2026-09-23. */
	width: fit-content;
}

/* --------------------------------------------------------------------------
   10. Header menu — current page
   -------------------------------------------------------------------------- */

/* Matches the footer pill in section 9, for the same reason: colour alone is a
   weak state signal. The header does at least vary weight (700 active against
   500 normal) via the rule in section 1, so this is reinforcement rather than a
   fix — but a site that marks the current page two different ways in two menus
   teaches the visitor nothing. Both now use a pill and both land at 36px.

   The header is harder than the footer because the nav is transparent and sits
   on three different hero backgrounds, measured 2026-09-23:
     #F0F9FC pale   — home, get-involved, get-in-touch, terms, privacy
     #003741 dark   — who-we-are (carries .has-dark-hero)
     #C9EF6A lime   — resources
   A single deep-teal pill would be invisible on the dark hero, which is exactly
   the failure the "Get in touch" button had in section 1. So the dark-hero case
   inverts: pale pill, deep teal label.

   align-self and height:auto are required. The link is a flex child that
   stretches to the header row's full 100px, so a background alone would paint a
   100px slab rather than a pill. Setting both sizes it to its text: verified
   100px -> 36px with the header row itself unchanged at 100px on all four
   pages that have a current item. @date 2026-09-23
   padding-inline pinned 2026-10-07: the menu's Items Inner Spacing dropped
   25 -> 14 to fit the Partners item; the pill keeps its previous width.
   Measured with the pin: all six items fit at 1366 on every page. */
.ct-header [data-id="menu"] .menu > li.current-menu-item > .ct-menu-link,
.ct-header [data-id="menu"] .menu > li.current_page_item > .ct-menu-link,
.ct-header [data-id="menu"] .menu > li.current-menu-ancestor > .ct-menu-link,
.ct-header [data-id="menu"] .menu > li.current-menu-parent > .ct-menu-link {
	align-self: center;
	height: auto;
	padding-block: 9px;
	padding-inline: 12.5px;
	background-color: var(--theme-palette-color-3, #003741);
	color: var(--theme-palette-color-8, #ffffff);
	border-radius: 100px;
}

/* Dark hero: invert the pill so it does not disappear into the hero.
   Pale pill on #003741 = 12.12:1, and the deep teal label on the pale pill is
   the same 12.12:1. @date 2026-09-23 */
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="menu"] .menu > li.current-menu-item > .ct-menu-link,
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="menu"] .menu > li.current_page_item > .ct-menu-link,
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="menu"] .menu > li.current-menu-ancestor > .ct-menu-link,
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="menu"] .menu > li.current-menu-parent > .ct-menu-link {
	background-color: var(--eitr-on-dark, #F0F9FC);
	color: var(--theme-palette-color-3, #003741);
}

/* The mobile offcanvas menu — the third place this site marked the current
   page, found by red team 2026-09-23 and missed by every automated scan
   because axe cannot see a closed panel.
   Measured: the panel's current item was #37B9FF at 20px/700 on the panel's
   rgba(255,255,255,.9) = 2.20:1. That fails 1.4.3 even against the 3:1 large
   text threshold. It does carry aria-current and 700-vs-500 weight, so 1.4.1
   was satisfied — which is exactly why only a contrast measurement caught it.

   The §10 selectors above cannot reach it: the panel's nav is data-id
   "mobile-menu" rather than "menu", and its <ul> carries NO class at all, so
   ".menu >" matches nothing. Hence a separate selector rather than a longer
   list on the rule above.
   Same pill, same 12.94:1, so all three menus now mark the current page one
   way. @date 2026-09-23

   Restyled 2026-10-08 (Jayr): the centred dark-teal pill with 0 side padding
   sat off the left edge every other item uses and read as heavy. Now every
   item is a left-aligned row with the same padding, pulled back by an equal
   negative margin so the TEXT stays on the original left edge; the current
   page gets a brand-lime row (#003741 on #C9EF6A ≈ 10:1), hover and keyboard
   focus get a light lime tint (text contrast unchanged, ≥ 9:1). Still bold
   (rule near the top of this file) and still aria-current, so the state is
   not carried by colour alone. @date 2026-10-08 */
.ct-panel [data-id="mobile-menu"] li > .ct-menu-link {
	align-self: stretch;
	width: auto; /* Blocksy sets .ct-menu-link{width:100%}, which kept the -14px margins from widening the row — it sat off-centre */
	height: auto;
	padding-block: 9px;
	padding-inline: 14px;
	margin-inline: -14px;
	border-radius: 12px;
	transition: background-color 0.15s ease;
}
.ct-panel [data-id="mobile-menu"] li > .ct-menu-link:hover,
.ct-panel [data-id="mobile-menu"] li > .ct-menu-link:focus-visible {
	background-color: rgba(201, 239, 106, 0.4); /* fallback for browsers without color-mix() */
	background-color: color-mix(in srgb, var(--theme-palette-color-1, #C9EF6A) 40%, transparent);
	color: var(--theme-palette-color-3, #003741);
}
.ct-panel [data-id="mobile-menu"] li > .ct-menu-link:focus-visible {
	outline: 2px solid var(--theme-palette-color-3, #003741);
	outline-offset: 2px;
}
.ct-panel [data-id="mobile-menu"] li.current-menu-item > .ct-menu-link,
.ct-panel [data-id="mobile-menu"] li.current_page_item > .ct-menu-link,
.ct-panel [data-id="mobile-menu"] li.current-menu-ancestor > .ct-menu-link,
.ct-panel [data-id="mobile-menu"] li.current-menu-parent > .ct-menu-link {
	background-color: var(--theme-palette-color-1, #C9EF6A);
	color: var(--theme-palette-color-3, #003741);
}
@media (prefers-reduced-motion: reduce) {
	.ct-panel [data-id="mobile-menu"] li > .ct-menu-link {
		transition: none;
	}
}

/* ⚠️ ACCEPTED RISK, recorded rather than mitigated — red team 2026-09-23.
   Both dark-hero rules in this file depend on :has(), which has no fallback.
   On a browser without support (pre-Chrome 105, Aug 2022; pre-Safari 15.4,
   March 2022) the base rules win and BOTH the Get in touch button and the
   header pill revert to #003741 on the #003741 dark hero — invisible, silently.
   Nothing catches this: axe passes on every browser that supports :has(), so
   the failure is only reachable on browsers the test tooling does not use.
   Accepted because support is now ~95%+ and both affected elements are
   duplicated elsewhere on the page (the nav repeats in the footer, and the
   Donate button sits beside Get in touch). Revisit if analytics ever show
   meaningful traffic from those versions.

   ⚠️ A SECOND, closer dependency, recorded by red team 2026-09-23: both
   dark-hero rules are scoped to [data-transparent-row="yes"]. This build has no
   sticky header — verified by scrolling 2000px, after which both header rows
   still carry that attribute and the header simply scrolls away. Enabling
   Blocksy's sticky header in the Customizer is the single change that would
   drop it, and the base rules would then paint #003741 on the #003741 dark hero
   again: invisible, silently, with axe still passing. Nothing guards this.
   If sticky is ever enabled, re-measure the header CTA and the header pill on
   /who-we-are/ before shipping. */

/* --------------------------------------------------------------------------
   11. Donate button — heartbeat
   -------------------------------------------------------------------------- */

/* A slow pulse on the Donate heart. Deliberately gentle: one beat every 2.4s
   with most of the cycle at rest. A fast or insistent pulse on a mental health
   charity's donate button reads as pressure rather than warmth.

   Only transform is animated, so it runs on the compositor and never triggers
   layout or paint — the button's box, and therefore its neighbours, cannot move.

   🔴 The reduced-motion guard is not optional. WCAG 2.3.3 and the vestibular
   guidance both expect an infinite animation to stop for anyone who has asked
   their OS for less motion. This site already ignores that preference on the
   hero video (logged as a known issue); this rule does not add a second case.
   @date 2026-09-23 */
@keyframes eitr-heart-pulse {
	0%, 45%, 100% { transform: scale(1); }
	15%           { transform: scale(1.22); }
	30%           { transform: scale(1.06); }
}

.ct-header-cta[data-id="tvpBhj"] .ct-button .ct-icon {
	transform-origin: center;
	animation: eitr-heart-pulse 2.4s ease-in-out infinite;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.ct-header-cta[data-id="tvpBhj"] .ct-button .ct-icon {
		animation: none;
		will-change: auto;
	}
}

/* ==========================================================================
   11. Shop utility row — dark hero and focus
   ========================================================================== */

/* The utility row added 2026-09-24 (search, wishlist, account, cart) over a
   dark hero. Same failure, same page, as the "Get in touch" button in section 1:
   Blocksy's transparent-state colour is ONE value for the whole site, but
   /who-we-are/ is #003741 and /resources/ is #C9EF6A. No single colour clears
   4.5:1 on both, so the Customizer cannot express this and the hook has to be
   the hero again.

   Measured 2026-09-24 before this rule: search text, account icon and cart all
   computed to rgb(0,55,65) on a rgb(0,55,65) hero = 1.00:1 — the identical
   colour, invisible while still focusable and clickable. The nav beside them
   sat at 12.12:1 because it already had the rule above.

   Surveyed all twelve main pages: /who-we-are/ is the ONLY one carrying
   .has-dark-hero, so this is correctly scoped to it. Everywhere else the
   default deep teal already passes — 12.11:1 on the pale hero, 9.88:1 on lime.

   --eitr-on-dark on #003741 = 12.12:1.
   @date 2026-09-24 */
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="search-input"] input[type="search"],
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="search-input"] .ct-search-form-controls,
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="wish-list"] a,
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="account"] a,
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="cart"] a,
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="search"] {
	color: var(--eitr-on-dark, #F0F9FC);
}

/* Mobile search icon (Blocksy "search" item, added to the mobile middle row
   2026-09-28). Same failure as above: measured #003741 on the #003741 hero =
   1.00:1 at 390px on /who-we-are/. The icon paints via --theme-icon-color, so
   the variable is set rather than fill. @date 2026-09-28 */
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="search"] {
	--theme-icon-color: var(--eitr-on-dark, #F0F9FC);
	--theme-icon-hover-color: var(--eitr-on-dark, #F0F9FC);
}

/* The search field's own boundary and placeholder over the dark hero. The
   border is #E9EBEC by default, which is 11.11:1 here and would pass — but the
   text inside it was the 1.00:1 failure, so the box read as empty. Both are
   set together so the control reads as one component.
   @date 2026-09-24 */
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="search-input"] input[type="search"] {
	border-color: var(--eitr-on-dark, #F0F9FC);
	background-color: transparent;
}

body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="search-input"] input[type="search"]::placeholder {
	color: var(--eitr-on-dark, #F0F9FC);
	opacity: 0.85;
}

/* Focus indicator for the header search input — WCAG 2.4.7, Level A.
   Measured 2026-09-24: outline-style none, box-shadow none, and the border
   unchanged on :focus. Blocksy exposes no focus-state control for this item,
   so there is no native setting to use.

   It matters more here than usual: this control is now the FIRST tab stop on
   every page, ahead of the logo and the whole navigation.

   [Corrected 2026-10-01: the original note here said lime "clears 3:1 against
   all three hero backgrounds". It clears one of the three: 9.88:1 on #003741,
   but 1.23:1 on #F0F9FC and 1.00:1 on #C9EF6A (audit 2026-09-28). It only ever
   passed because this control sits on the teal bar. Lime is no longer used.]
   outline-offset keeps the ring off the 50px pill radius. @date 2026-09-24

   Changed 2026-09-28 (Jayr's screenshot): the ring sat on the <input>, which is
   square (radius 0) and 40px short of the pill, so it drew a lime rectangle
   through the rounded field and skipped the search button. The pill is
   .ct-search-form-inner (radius 25px), so the ring now goes there whenever
   anything inside it has keyboard focus — field or button — and follows the
   radius. Colour moved from lime to --eitr-on-dark: the bar is solid #003741 on
   every page since 2026-09-24, so the lime-for-every-hero reasoning above no
   longer applies. #F0F9FC on #003741 = 12.12:1, matching the bar's icons. */
.ct-header [data-id="search-input"] .ct-search-form-inner:has(:focus-visible),
.ct-header [data-id="wish-list"] a:focus-visible,
.ct-header [data-id="account"] a:focus-visible,
.ct-header [data-id="cart"] a:focus-visible {
	outline: 2px solid var(--eitr-on-dark, #F0F9FC);
	outline-offset: 2px;
}

.ct-header [data-id="search-input"] .ct-search-form-inner :focus-visible {
	outline: none;
}

/* The utility row now carries a solid deep-teal background on EVERY page
   (set in the Customizer 2026-09-24), not only over a dark hero. That makes the
   .has-dark-hero scoping above insufficient: the bar is dark everywhere, so its
   contents must be light everywhere.

   Measured on / after the background change:
     wishlist svg  #ffffff on #003741 = 12.94:1  (already correct)
     cart svg      #ffffff on #003741 = 12.94:1  (already correct)
     account svg   #003741 on #003741 =  1.00:1  <- invisible
     search text   #003741 on #003741 =  1.00:1  <- invisible
     search border #003741 on #003741 =  1.00:1  <- invisible

   Only the account icon and the search field are wrong. Blocksy generates a
   rule for the cart (--theme-icon-color) but emits nothing for these two, so
   there is no Customizer control to reach them — hence CSS.

   Scoped to the top row only, so the middle row (white background, deep teal
   contents) is untouched. --eitr-on-dark on #003741 = 12.12:1.
   @date 2026-09-24 */
.ct-header [data-row*="top"] [data-id="account"] svg,
.ct-header [data-row*="top"] [data-id="account"] .ct-icon {
	fill: var(--eitr-on-dark, #F0F9FC);
	color: var(--eitr-on-dark, #F0F9FC);
}

.ct-header [data-row*="top"] [data-id="search-input"] input[type="search"] {
	color: var(--eitr-on-dark, #F0F9FC);
	border-color: var(--eitr-on-dark, #F0F9FC);
}

.ct-header [data-row*="top"] [data-id="search-input"] input[type="search"]::placeholder {
	color: var(--eitr-on-dark, #F0F9FC);
	opacity: 0.8;
}

.ct-header [data-row*="top"] [data-id="search-input"] svg,
.ct-header [data-row*="top"] [data-id="search-input"] .ct-icon {
	fill: var(--eitr-on-dark, #F0F9FC);
	color: var(--eitr-on-dark, #F0F9FC);
}

/* Bulk-order CTA — content block 1706, shop archives.

   Reuses the site's existing "Get In Touch" button wholesale (Resources
   "Questions?" panel): #7AD7FC background, #003741 label, 50px radius,
   12/26 padding, 15px/600, hovering to #37B9FF. Measured from the live button
   rather than reinvented — an earlier version of this CTA invented a
   teal -> near-black hover, which was the wrong instinct when the site already
   had a contrast-checked pair for this exact label and destination.

   rest   #003741 on #7AD7FC = 7.98:1
   hover  #003741 on #37B9FF = 5.88:1

   🔴 !important is required, not laziness. WordPress emits
     .has-palette-color-9-background-color { background-color: … !important }
   in global-styles-inline-css, so ANY non-important hover on a block using a
   palette preset class is discarded. A previous version of this rule set the
   hover without !important and never applied once — the button had no hover
   affordance at all while a comment above it claimed otherwise. Verified in the
   served HTML before writing this.
   @date 2026-09-24 */
.eitr-bulk-cta .wp-block-button__link {
	transition: background-color 0.2s ease;
}

.eitr-bulk-cta .wp-block-button__link:hover,
.eitr-bulk-cta .wp-block-button__link:focus-visible {
	background-color: var(--theme-palette-color-2, #37B9FF) !important;
	color: var(--theme-palette-color-3, #003741) !important;
}

/* Blocksy's default focus ring is --theme-palette-color-1 (#C9EF6A). On a lime
   panel that is 1.00:1 — an invisible ring. Deep teal is 9.88:1 on lime and
   11.6:1 on this block's pale-blue panel, so it works whichever panel colour
   this CTA ends up using. @date 2026-09-24 */
.eitr-bulk-cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--theme-palette-color-3, #003741);
	outline-offset: 3px;
}

/* Mobile: 50px padding eats 41% of a 390px panel, and the stacked button
   stays hard-right with 81px of dead space beside the copy it belongs to.
   28px matches the padding the site's own Greenshift panels drop to at this
   width. @date 2026-09-24 */
@media (max-width: 781px) {
	.eitr-bulk-cta {
		padding: 28px !important;
	}
	.eitr-bulk-cta .wp-block-buttons {
		justify-content: flex-start;
	}
	.eitr-bulk-cta .wp-block-column:last-child {
		margin-top: 8px;
	}
}

/* ==========================================================================
   12. Single product — bordered buy box (option A, 2026-09-28)
   ========================================================================== */

/* Jayr's brief: the right-hand summary gets a 1px border with a radius, as on
   the BBC reference. Blocksy has this exact control ("Container Border" and
   "Container Border Radius", entry_summary_container_border*), but only
   renders it for the Top Gallery layouts (inc/dynamic-styles/global/
   woocommerce/single-product-layers.php, the product_view_type check). EITR
   uses Default Gallery, so there is no native setting to reach it. Everything
   else in option A is set in the Customizer — see
   .local/10-eitr/blocks/product-page-option-a-2026-09-28.php.

   27px radius = the shop's own product cards. Tablet and up only: under 690px
   the summary is full width under the gallery, and a box there only costs
   horizontal space. @date 2026-09-28 */
@media (min-width: 690px) {
	.single-product .product-entry-wrapper .entry-summary {
		border: 1px solid var(--eitr-border-strong, #708F95);
		border-radius: 27px;
		padding: 36px 36px 28px;
		align-self: start;
	}
}

/* ==========================================================================
   13. Site-wide focus ring and mobile cart icon (accessibility, 2026-10-01)
   ========================================================================== */

/* Site-wide keyboard focus ring: WCAG 2.4.7 (A) and 1.4.11 (AA).
   Blocksy hard-codes the ring to palette slot 1 in its parent stylesheet
   (static/bundle/main.min.css: a:focus-visible, button:focus-visible
   { outline: 2px solid var(--theme-palette-color-1) }). There is no Customizer
   control for it. Lime measured 1.00:1 on the lime /resources/ hero, 1.23:1 on
   #F0F9FC, 1.31:1 on white and 1.68:1 on the sky footer (audit 2026-09-28).

   Two tones, so it clears 3:1 on EVERY surface the site uses: an inner pale band
   (box-shadow, 0–2px) inside a deep-teal outline (2–4px, given the 2px offset).
     teal  on white 12.94 · on #F0F9FC 12.12 · on lime 9.88 · on sky 5.88 · on orange 4.72
     pale  on teal 12.12  · on #040404 19.19 (where the teal half disappears)
   Same specificity as Blocksy's rule (0,1,1) and loaded after it, so it wins on
   cascade order alone. Every more specific focus rule above (the teal header
   bar, the search pill, .eitr-bulk-cta) still wins, on purpose.
   The box-shadow replaces any shadow an element has, only while it is focused.
   @date 2026-10-01 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
select:focus-visible {
	outline: 2px solid var(--theme-palette-color-3, #003741);
	outline-offset: var(--outline-offset, 2px);
	box-shadow: 0 0 0 2px var(--eitr-on-dark, #F0F9FC);
}

/* Mobile header cart icon: WCAG 1.4.11. The Customizer has one icon colour for
   the cart item across devices. On desktop the cart sits on the teal top bar, so
   white is right (12.94:1). On mobile the same item sits in the middle row over
   the pale heroes and white product pages: white measured 1.16:1 on #D8F2FD,
   1.00:1 on white, 1.56:1 on the lime hero. No device-specific control exists.
   Deep teal there: 12.94:1 on white, 9.88:1 on lime. Hover stays teal; lime
   hover was 1.31:1. @date 2026-10-01 */
.ct-header [data-device="mobile"] [data-row*="middle"] [data-id="cart"] .ct-cart-item {
	--theme-icon-color: var(--theme-palette-color-3, #003741);
	--theme-icon-hover-color: var(--theme-palette-color-3, #003741);
}

/* …except over /who-we-are/'s dark hero, where teal would be 1.00:1. Same
   reasoning and token as the §11 .has-dark-hero rules. @date 2026-10-01 */
body:has(.has-dark-hero) .ct-header [data-device="mobile"] [data-transparent-row="yes"] [data-id="cart"] .ct-cart-item {
	--theme-icon-color: var(--eitr-on-dark, #F0F9FC);
	--theme-icon-hover-color: var(--eitr-on-dark, #F0F9FC);
}

/* The §11 header icon ring (#F0F9FC) assumes the teal top bar. On mobile the
   cart sits in the pale middle row, where that ring measured 1.09:1 (focus walk
   2026-10-01, / at 390). Teal there, 11.12:1 on #D8F2FD; pale again over the
   dark hero. Specificity (0,5,1) beats §11's (0,3,1). @date 2026-10-01 */
.ct-header [data-device="mobile"] [data-row*="middle"] [data-id="cart"] a:focus-visible {
	outline-color: var(--theme-palette-color-3, #003741);
}

body:has(.has-dark-hero) .ct-header [data-device="mobile"] [data-transparent-row="yes"] [data-id="cart"] a:focus-visible {
	outline-color: var(--eitr-on-dark, #F0F9FC);
}

/* Over /who-we-are/'s dark hero the teal half of the §13 ring is 1.00:1, and on
   Blocksy's header toggles (mobile Search, Menu) the pale box-shadow band does
   not render at all: the focus walk measured NO visible change on both
   (2026-10-01). Lime used to pass here at 9.88:1, so this was a regression of
   my own. The whole ring goes pale in the transparent rows over that hero:
   #F0F9FC on #003741 = 12.12:1. Covers the nav, the cart and both toggles.
   @date 2026-10-01 */
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] :focus-visible {
	outline-color: var(--eitr-on-dark, #F0F9FC);
}

/* Product-card image links: the ring was clipped to its bottom edge. The card
   <li> has overflow:hidden with a 27px radius and the image sits flush with its
   top and sides (measured 2026-10-01; drawing the ring inside the edge put it
   on the photo instead, 2.36:1 on the dark Pins image). An element's own
   overflow never clips its own outline, so the ring goes on the whole card and
   follows its 27px corners. The link's ring is turned off so there is one ring,
   not two. The card's shadow is replaced while it has focus.
   @date 2026-10-01 */
.products li.product:has(> figure > .ct-media-container:focus-visible) {
	outline: 2px solid var(--theme-palette-color-3, #003741);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--eitr-on-dark, #F0F9FC);
}

.products .ct-media-container:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Cookie banner on phones: Blocksy's banner is a fixed, full-width bar below
   690px (134px tall at 390, taller at 320) and sat on top of the footer's
   Privacy Policy and Terms links, the two links a visitor reads before
   accepting. While the banner is in the page, the footer gets room to scroll
   past it. Tablet and desktop show a 450px corner box that covers no links
   (measured 2026-10-06 at 768 and 1440). Blocksy removes the banner once a
   choice is made, so the room goes with it.
   @date 2026-10-06 */
@media (max-width: 689.98px) {
	body:has(.ct-drawer-canvas > .cookie-notification) .ct-footer {
		padding-bottom: 180px;
	}
}

/* ==========================================================================
   14. Wellness Trunk audience tabs (page 1652, Greenshift Tabs block
   gsbp-wttabs, class eitr-trunk-tabs)
   Kristina 2026-10-08: Schools / Workplaces / Veterans in one row as tabs, the
   homepage image before each name, hover in each tab's own colour. The block
   has one colour for all tabs and no per-tab image without alt="tab-image"
   (which would make every tab's accessible name "tab-image Schools"), so the
   per-tab colours, images, active state and phone grid live here.
   Greenshift's generated tab CSS loads BEFORE this file and is the adversary:
     .t-btn{font-size:20px} · > .t-btn-container > .t-btn{background:#f5f5f5}
     · .t-btn.active{background:#e5e5e5} · pills: a margin on each .t-btn
       (60px lost at 390, "Workplaces" overflows) and
       .gspb_tabs-id-gsbp-wttabs.gspb-tabs > .t-btn-container
       {margin-left/right:calc(-10px/2) !important} (row 5px left of the text —
       hence the one !important below) · .gstabs-tabs .t-btn:focus{outline:none}
     · .gstabs-tabs .t-btn.active{background:#fff;color:#333}
     · .t-panel-container{margin-bottom:25px;overflow:hidden;border;background}
     · .gswipertabs, .t-panel{overflow:hidden} (clips focus rings)
   Most rules are (0,4,0)–(0,5,0) and win on specificity; the tab margin ties
   with Greenshift's (0,4,0) and wins only because this file loads later.
   Open tab = 2px border in a deeper shade of its audience colour (closed:
   1px, ≥3:1 — see below), matching its content card. Label contrast ≥ 7.9:1 in every state (teal #003741).
   @date 2026-10-08
   ========================================================================== */
.eitr-trunk-tabs.gspb-tabs > .t-btn-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	/* !important: Greenshift's pills rule above marks its negative margin !important. */
	margin: 0 !important;
}

.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	margin: 0;
	/* Kristina 2026-10-09: text the size of the "Be part of the herd" heading
	   (28px), icon to match, inner padding 24px 28px. Tablet steps down below. */
	padding: 24px 28px;
	border: 1px solid rgba(0, 55, 65, 0.3);
	border-radius: 16px;
	color: var(--theme-palette-color-3, #003741);
	font-family: "Work Sans", sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	transition: background-color 0.15s ease;
}

/* Homepage icons, decorative — the tab's name is its text alone. Schools and
   Workplaces use the uploaded SVG shapes as a MASK painted in the homepage's
   colours: the homepage draws them inline (Schools orange, Workplaces sky),
   and the uploaded files carry those two colours swapped. Veterans' file is
   already the homepage's green, so it stays an image. Jayr 2026-10-08. */
.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn::before {
	content: "";
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	background: center / contain no-repeat;
}

.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn:nth-child(1)::before {
	background-color: var(--theme-palette-color-12, #FF7212);
	-webkit-mask: url("/wp-content/uploads/2026/09/schools-icon.svg") center / contain no-repeat;
	mask: url("/wp-content/uploads/2026/09/schools-icon.svg") center / contain no-repeat;
}

.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn:nth-child(2)::before {
	background-color: var(--theme-palette-color-2, #37B9FF);
	-webkit-mask: url("/wp-content/uploads/2026/09/workplaces-icon.svg") center / contain no-repeat;
	mask: url("/wp-content/uploads/2026/09/workplaces-icon.svg") center / contain no-repeat;
}

.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn:nth-child(3)::before {
	background-image: url("/wp-content/uploads/2026/09/veterans-icons.svg");
}

.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn .tabtitlelabel {
	min-width: 0;
	font: inherit;
	color: inherit;
}

/* Per-tab colours = the homepage audience boxes; hover is the same hue, stronger. */
.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn:nth-child(1) {
	background-color: var(--theme-palette-color-11, rgba(255, 114, 18, 0.2));
}

.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn:nth-child(1):hover {
	background-color: rgba(255, 114, 18, 0.32);
}

.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn:nth-child(2) {
	background-color: var(--theme-palette-color-10, #F0F9FC);
}

.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn:nth-child(2):hover {
	background-color: #DCEFF6;
}

.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn:nth-child(3) {
	background-color: var(--theme-palette-color-1, #C9EF6A);
}

.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn:nth-child(3):hover {
	background-color: #B8E04F;
}

.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn.active {
	/* Open tab: a 2px border in its card's colour (closed tabs have 1px), so
	   the state is not carried by colour alone and the tab matches its card.
	   No dark border, underline or pointer (Jayr 2026-10-08). 1px less
	   padding keeps every tab the same height. */
	padding: 23px 27px;
	border-width: 2px;
	box-shadow: none;
	color: var(--theme-palette-color-3, #003741);
}

/* Deeper shades of the audience colours: the brand tones are 2.1–2.6:1 on
   their own tab fills, below the 3:1 a state indicator needs (WCAG 1.4.11).
   These are the lightest that pass with margin — vs tab fill / vs page:
   Schools #D45500 3.36 / 4.12 · Workplaces #0A84C6 3.83 / 4.09 ·
   Veterans #357F05 3.83 / 5.01. No palette token holds them. */
.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn.active:nth-child(1) {
	border-color: #D45500;
}

.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn.active:nth-child(2) {
	border-color: #0A84C6;
}

.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn.active:nth-child(3) {
	border-color: #357F05;
}

/* 3px, so it is distinguishable from the 2px site-wide ring in §13. */
.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn:focus-visible {
	outline: 3px solid var(--theme-palette-color-3, #003741);
	outline-offset: 2px;
}

/* Panels: no Greenshift card, no clipping. 16px from the tab row. */
.eitr-trunk-tabs.gspb-tabs .t-panel-container {
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.eitr-trunk-tabs.gspb-tabs .gswipertabs,
.eitr-trunk-tabs.gspb-tabs .t-panel {
	overflow: visible;
}

/* Each panel is a card like the homepage audience boxes (30px radius, roomy
   padding), outlined in the same shade as its open tab so the content is
   clearly that tab's. White inside: the big sky numerals already sit at 2.2:1 on
   white and a tinted card would lower that further. Jayr 2026-10-08. */
.eitr-trunk-tabs.gspb-tabs .swiper-wrapper > .t-panel {
	box-sizing: border-box;
	padding: 40px;
	border: 2px solid var(--theme-palette-color-3, #003741);
	border-radius: 30px;
	background-color: #FFFFFF;
}

.eitr-trunk-tabs.gspb-tabs .swiper-wrapper > .t-panel:nth-child(1) {
	border-color: #D45500;
}

.eitr-trunk-tabs.gspb-tabs .swiper-wrapper > .t-panel:nth-child(2) {
	border-color: #0A84C6;
}

.eitr-trunk-tabs.gspb-tabs .swiper-wrapper > .t-panel:nth-child(3) {
	border-color: #357F05;
}

/* Order buttons: keyboard focus gets the hover colours too (Greenshift sets
   them on :hover only, via #gspb_button-id-… > .gspb-buttonbox at (1,1,0), so
   these use the same ids plus :focus-visible to win without !important). */
#gspb_button-id-gsbp-wtcta1 > .gspb-buttonbox:focus-visible,
#gspb_button-id-gsbp-wtcta2 > .gspb-buttonbox:focus-visible,
#gspb_button-id-gsbp-wtcta3 > .gspb-buttonbox:focus-visible {
	background-color: var(--theme-palette-color-1, #C9EF6A);
	color: var(--theme-palette-color-3, #003741);
}

@media (prefers-reduced-motion: reduce) {
	.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn {
		transition: none;
	}
}

/* Windows high contrast replaces every colour, so the open tab also gets a
   6px bottom border there; 4px less bottom padding keeps its height equal. */
@media (forced-colors: active) {
	.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn.active {
		border-bottom-width: 6px;
		padding-bottom: 19px;
	}
}

/* Phones: three equal columns, image above the name. Measured at 390: each tab
   is ~108px wide; "Workplaces" at 14px fits with 4px side padding, at 15px it
   does not. */
@media (max-width: 689.98px) {
	.eitr-trunk-tabs.gspb-tabs > .t-btn-container {
		gap: 8px;
	}

	.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn {
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		padding: 12px 4px;
		font-size: 14px;
		text-align: center;
	}

	.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn.active {
		padding: 11px 3px;
	}

	.eitr-trunk-tabs.gspb-tabs .swiper-wrapper > .t-panel {
		padding: 28px 20px;
		border-radius: 24px;
	}

	.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn::before {
		flex-basis: 28px;
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 374.98px) {
	.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn {
		font-size: 13px;
	}
}

/* Forced colours on phones — after the phone block so it wins on order. */
@media (forced-colors: active) and (max-width: 689.98px) {
	.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn.active {
		padding-bottom: 7px;
	}
}

/* ==========================================================================
   15. Interaction kit (homepage pilot, Jayr 2026-10-09)
   Spec: docs/superpowers/specs/2026-10-09-eitr-homepage-polish-design.md
   Opt-in classes, added in a block's "Additional CSS class(es)" field. Hover
   effects have no native Greenshift/Blocksy setting, which is the case the
   block-editor-first rule names for a custom class.
     eitr-card-link  card column whose heading holds ONE link: the whole card
                     is clickable, lifts on hover and on keyboard focus
     eitr-zoom       block holding a Greenshift image: the photo zooms 4%
                     inside its own frame
     eitr-arrow      Greenshift button with an icon: icon nudges, text
                     underline draws
     eitr-reveal     any block below the fold: fades up as it enters view
                     (eitr.js marks below-fold blocks .is-pending; without JS
                     or above the fold nothing is ever hidden)
   Only transform, opacity, box-shadow and background-size animate, so layout
   never moves (CLS stays 0). Hover rules apply only where the device hovers,
   :focus-visible mirrors them, prefers-reduced-motion removes the movement.
   Never put eitr-reveal on a hero: hiding the first screen delays LCP.
   ========================================================================== */
:root {
	--eitr-ease: cubic-bezier(.2, .7, .2, 1);
	--eitr-lift-shadow: 0 18px 34px -18px rgba(0, 55, 65, .45);
}

/* Card link. Greenshift columns have no link setting, and wrapping a column in
   <a> would nest block markup inside a link, so the heading's own link is
   stretched over the card with ::after: one link, one accessible name (the
   heading). The heading is forced static so the ::after measures from the
   card, not from the heading. @date 2026-10-09
   Icon selector covers svg AND img: Greenshift prints Schools/Workplaces as
   inline SVG but Veterans as an <img>, so an svg-only rule left the Veterans
   icon still on hover (Jayr, 2026-10-09). */
.eitr-card-link {
	position: relative;
	transition: transform .25s var(--eitr-ease), box-shadow .25s var(--eitr-ease);
}
.eitr-card-link .gspb_heading {
	position: static;
}
.eitr-card-link .gspb_heading a {
	color: inherit;
	text-decoration: none;
}
.eitr-card-link .gspb_heading a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.eitr-card-link .gspb_iconBox :is(svg, img) {
	transition: transform .35s var(--eitr-ease);
}
@media (hover: hover) {
	.eitr-card-link:hover {
		transform: translateY(-6px);
		box-shadow: var(--eitr-lift-shadow);
	}
	.eitr-card-link:hover .gspb_iconBox :is(svg, img) {
		transform: scale(1.08) rotate(-3deg);
	}
	.eitr-card-link:hover .gspb_heading a {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
	}
}

/* Keyboard focus rings the whole card, not just the heading text, because the
   whole card is the target. Teal on the white page is 12.94:1 (§13 values).
   (0,3,1) on the link beats §13's site-wide (0,1,1) ring, so the heading does
   not get a second ring inside the card's. @date 2026-10-09 */
.eitr-card-link:has(a:focus-visible) {
	transform: translateY(-6px);
	box-shadow: var(--eitr-lift-shadow);
	outline: 3px solid var(--theme-palette-color-3, #003741);
	outline-offset: 4px;
}
.eitr-card-link .gspb_heading a:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Photo zoom. The frame is the image's own wrapper, given the 8px radius that
   Greenshift puts on the <img>, so the zoomed photo stays inside the rounded
   corners. @date 2026-10-09 */
.eitr-zoom .gspb_image {
	overflow: hidden;
	border-radius: 8px;
}
.eitr-zoom .gspb_image img {
	transition: transform .6s var(--eitr-ease);
}
@media (hover: hover) {
	.eitr-zoom:hover .gspb_image img {
		transform: scale(1.04);
	}
}
.eitr-zoom:has(a:focus-visible) .gspb_image img {
	transform: scale(1.04);
}

/* Button arrow + underline. The underline is a background, not a border, so
   the button's box never changes size. @date 2026-10-09 */
.eitr-arrow .gspb-buttonbox-icon {
	transition: transform .25s var(--eitr-ease);
}
.eitr-arrow .gspb-buttonbox-title {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	transition: background-size .3s var(--eitr-ease);
}
@media (hover: hover) {
	.eitr-arrow:hover .gspb-buttonbox-icon {
		transform: translateX(4px);
	}
	.eitr-arrow:hover .gspb-buttonbox-title {
		background-size: 100% 2px;
	}
}
.eitr-arrow:has(:focus-visible) .gspb-buttonbox-icon,
.eitr-arrow:focus-visible .gspb-buttonbox-icon {
	transform: translateX(4px);
}
.eitr-arrow:has(:focus-visible) .gspb-buttonbox-title,
.eitr-arrow:focus-visible .gspb-buttonbox-title {
	background-size: 100% 2px;
}

/* Reveal. .is-pending is only ever added by eitr.js, and only to blocks that
   are below the fold when it runs. Siblings stagger by 80ms. @date 2026-10-09 */
.eitr-reveal {
	transition: opacity .6s var(--eitr-ease), transform .6s var(--eitr-ease);
}
.eitr-reveal.is-pending {
	opacity: 0;
	transform: translateY(16px);
}
.eitr-reveal + .eitr-reveal {
	transition-delay: .08s;
}
.eitr-reveal + .eitr-reveal + .eitr-reveal {
	transition-delay: .16s;
}

/* Reduced motion: keep the non-moving feedback (shadow, ring, underline), drop
   every movement. eitr.js also skips reveal and film autoplay. @date 2026-10-09 */
@media (prefers-reduced-motion: reduce) {
	.eitr-card-link,
	.eitr-card-link .gspb_iconBox :is(svg, img),
	.eitr-zoom .gspb_image img,
	.eitr-arrow .gspb-buttonbox-icon,
	.eitr-arrow .gspb-buttonbox-title,
	.eitr-reveal {
		transition: none;
	}
	.eitr-card-link:hover,
	.eitr-card-link:has(a:focus-visible),
	.eitr-card-link:hover .gspb_iconBox :is(svg, img),
	.eitr-zoom:hover .gspb_image img,
	.eitr-zoom:has(a:focus-visible) .gspb_image img,
	.eitr-arrow:hover .gspb-buttonbox-icon,
	.eitr-arrow:has(:focus-visible) .gspb-buttonbox-icon,
	.eitr-arrow:focus-visible .gspb-buttonbox-icon {
		transform: none;
	}
}

/* Phone/tablet header cart: name kept, label not shown. With the desktop
   "Cart" label on (2026-10-09), Blocksy stops printing its screen-reader-only
   name and hides the label below desktop with display:none, so the phone cart
   link had no accessible name at all (final review I1). The label is now on
   for every device in the Customizer and visually hidden here on the mobile
   header only: screen readers read "Cart", the phone row stays icon-only.
   The amount inside the label is hidden with it. @date 2026-10-09 */
.ct-header [data-device="mobile"] [data-id="cart"] .ct-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Main menu hover = Blocksy's own Menu Type 2 underline, "Left to Right"
   (Customizer → Header → Menu, Jayr 2026-10-09: "make sure it's from blocksy
   settings"). Blocksy also draws that underline under the CURRENT item, which
   here is already the §10 teal pill, so the line doubled up under it. There is
   no Customizer control to exclude the current item, hence this one rule.
   (0,5,1) beats Blocksy's [data-menu*=type-2]>ul>li[class*=current-menu-]>a. @date 2026-10-09 */
.ct-header [data-id="menu"] .menu > li[class*="current-menu-"] > .ct-menu-link {
	--menu-indicator-opacity: 0;
}

/* Same underline, placed under the text. Blocksy draws it at the bottom of the
   link, and the link fills the 100px header row, so the line sat ~40px below
   the label and read as detached. Blocksy reads --menu-indicator-y-position
   for that offset (no Customizer control). 50% − 16px = half the row minus
   half the 14px label minus a 7px gap, so it tracks the shrunk sticky row too. @date 2026-10-09 */
.ct-header [data-device="desktop"] [data-id="menu"] {
	--menu-indicator-y-position: calc(50% - 16px);
}

/* Reveal: never hide what the keyboard or the printer is on (red team
   2026-10-09). Tabbing into a block that has not faded in yet left the focused
   link at opacity 0 for up to 0.8 s; :focus-within shows it at once. Printing
   a page that was not scrolled through printed those blocks blank. @date 2026-10-09 */
.eitr-reveal.is-pending:focus-within {
	opacity: 1;
	transform: none;
	transition: none;
}
@media print {
	.eitr-reveal.is-pending {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Menu underline over the dark hero only. The Customizer now sets the
   underline (Header → Menu → Indicator Color, all three states) to teal
   palette-3, because sky #37B9FF was ~2.2:1 on the white and pale header (red
   team 2026-10-09). On the teal /who-we-are/ hero teal would vanish, so the
   transparent row there keeps sky: 5.88:1 on #003741. No per-page Customizer
   control exists. @date 2026-10-09 */
body:has(.has-dark-hero) .ct-header [data-transparent-row="yes"] [data-id="menu"] {
	--menu-indicator-hover-color: var(--theme-palette-color-2, #37B9FF);
	--menu-indicator-active-color: var(--theme-palette-color-2, #37B9FF);
}

/* Wellness Trunk tabs, tablet (690–1099px): the desktop 28px label with a
   48px icon no longer fits "Workplaces" in a third of the row, so a middle
   size. Phones keep their own rules (§14, max-width 689.98px). @date 2026-10-09 */
@media (min-width: 690px) and (max-width: 1099.98px) {
	.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn {
		padding: 18px 20px;
		font-size: 20px;
		gap: 10px;
	}
	.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn.active {
		padding: 17px 19px;
	}
	.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn::before {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
	}
}
@media (forced-colors: active) and (min-width: 690px) and (max-width: 1099.98px) {
	.eitr-trunk-tabs.gspb-tabs > .t-btn-container > .t-btn.active {
		padding-bottom: 13px;
	}
}

/* (2026-10-09 rule zeroing the Wellness Trunk "Trunk Contents" section's top padding removed 2026-11-12: the section
   is Thunder Teal since v3 and needs its own 80/80/60 padding; see the v3 block at the end.) */

/* "Wellness Trunk" heading inside the blue panel (page 1652). It became the
   page H1 on 2026-10-09 (Kristina's new top layout), which pulls in the
   theme's serif H1 face; her mock-up keeps the panel heading in the sans used
   by the panel's other headings. The Greenshift heading block has no font
   family control without loading a custom font. @date 2026-10-09 */
#gspb_heading-id-gsbp-27bfd73 {
	font-family: "Work Sans", sans-serif;
	font-weight: 600;
}

/* Dropdown arrow inside the current-page pill (Resources on /resources/ and
   /wellness-trunk/, Jayr 2026-10-09). Blocksy paints the arrow in the menu's
   link colour (teal), which vanished on the teal pill and left a blank space
   on its right, so the pill looked lopsided. The arrow now follows the pill's
   own text colour: white on the teal pill, teal on the pale dark-hero pill. @date 2026-10-09 */
.ct-header [data-id="menu"] .menu > li[class*="current-menu-"] > .ct-menu-link .ct-toggle-dropdown-desktop svg {
	fill: currentColor;
}

/* Homepage film caption: hidden on screen, kept for screen readers (Kristina
   2026-10-09: "remove the visible title below the video"). A video has no alt
   attribute; the <figure>/<figcaption> pair names it, and eitr.php also gives
   the <video> an aria-label. Clip-style hiding, never display:none, so the
   name survives. No block setting hides a caption only visually. @date 2026-10-09 */
.eitr-film figcaption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Homepage: no padding below the film (Kristina 2026-10-09) so the space
   below matches the space above. Desktop/tablet are set natively on the block;
   on phones the shared §-phone rule (56px on #gspb_row-id-gsbp-ff04535, also
   used by the Wellness Trunk page) wins, so Home is scoped here. @date 2026-10-09 */
body.home #gspb_row-id-gsbp-ff04535 {
	padding-bottom: 0;
}

/* Resources intro: "Wellness Trunk" link (Kristina 2026-10-09: underline,
   colour change on hover, same window). At rest it keeps the paragraph's teal
   (9.88:1 on the lime hero) and is marked by the underline; hover and keyboard
   focus turn it navy (7.90:1) with a thicker underline, so the change is not
   colour-only. Brand blues/oranges are 1.7–3.2:1 on lime. Scoped to page 1463:
   gsbp-5c0e1d9 is every page's hero intro. @date 2026-10-09 */
body.page-id-1463 #gspb_text-id-gsbp-5c0e1d9 a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}
body.page-id-1463 #gspb_text-id-gsbp-5c0e1d9 a:hover,
body.page-id-1463 #gspb_text-id-gsbp-5c0e1d9 a:focus-visible {
	color: #1B3A8C;
	text-decoration-thickness: 3px;
}

/* ==========================================================================
   16. Partner activity flip cards (Kristina 2026-10-27, "eitr.ca more updates")
   Pages /partners/schools|workplaces|veterans/activity/ (children of the hubs,
   members of that type only). Each card is a core Group "eitr-flip-card" with
   two Groups inside, "eitr-flip-front" (the scenario) and "eitr-flip-back"
   (observation + one step forward), all editable in the block editor.
   eitr.js §4 adds the Flip buttons and the .is-flipped state. Both faces sit
   in the same grid cell, so a card is as tall as its longer face and nothing
   is clipped. The face turned away gets `inert` from the script, so keyboard
   and screen-reader focus stay on the face that shows.
   Audience colour = the homepage audience boxes and the guide covers:
   .is-school orange, .is-workplace sky blue, .is-veteran green.
   No script: no flip, both faces show one after the other.
   @date 2026-10-27
   ========================================================================== */
.eitr-flip-grid {
	--eitr-accent: var(--theme-palette-color-3, #003741);
	--eitr-tint: var(--theme-palette-color-10, #F0F9FC);
}
.eitr-flip-grid.is-school {
	--eitr-accent: var(--theme-palette-color-12, #FF7212);
	--eitr-tint: #FFE3D0; /* palette-11 (orange at 20%) flattened on white, so it stays opaque */
}
.eitr-flip-grid.is-workplace {
	--eitr-accent: var(--theme-palette-color-2, #37B9FF);
	--eitr-tint: var(--theme-palette-color-10, #F0F9FC);
}
.eitr-flip-grid.is-veteran {
	--eitr-accent: var(--theme-palette-color-13, #409E04);
	--eitr-tint: #EFFBD2; /* palette-1 lime at 30% on white */
}
.eitr-flip-card {
	perspective: 1600px;
}
.eitr-flip-card > .eitr-flip-front,
.eitr-flip-card > .eitr-flip-back {
	border-radius: 20px;
	padding: 32px 32px 28px;
	margin: 0;
}
.eitr-flip-card > .eitr-flip-front {
	position: relative;
	overflow: hidden; /* clips the arrow at the rounded corners */
	background: var(--eitr-tint);
	border-top: 8px solid var(--eitr-accent);
}
.eitr-flip-card > .eitr-flip-front > * {
	position: relative;
	z-index: 1; /* text and button above the arrow */
}
/* Brand graphic on each front (Kristina 2026-10-30, Teams: "make all the flip cards just use the arrow like this"):
   the hand-drawn EITR Arrow curving down to the Flip button, the same on every card. It replaces the per-card trail /
   footprint / circle set of 2026-10-28. The arrow's tip is the bottom-left corner of its box, so the box sits just
   above the button: 82px = button 46px + bottom padding 28px + 8px (phones: padding 22px, so 14px). The arrow
   stays clear of the text on every card at 320-1600px (measured 2026-10-30, verify runner), never under it. CSS mask, so the shape
   takes the audience colour; decorative only, behind the text (z-index above). img/eitr-arrow.svg is the brand SVG in
   black (the mask uses only its shape). Without mask support nothing is drawn, rather than a solid block. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
.eitr-flip-card > .eitr-flip-front::after {
	content: "";
	position: absolute;
	bottom: 82px;
	left: 38px;
	width: 200px;
	height: 118px;
	background: var(--eitr-accent);
	opacity: 0.45;
	transform: scaleX(-1) rotate(-4deg);
	-webkit-mask: url("img/eitr-arrow.svg") center / contain no-repeat;
	mask: url("img/eitr-arrow.svg") center / contain no-repeat;
	pointer-events: none;
}
}
@media print {
	.eitr-flip-card > .eitr-flip-front::after {
		display: none;
	}
}
/* Card back (Kristina 2026-10-28, "a little splash of colour"): the two titles in a dark shade of the audience colour
   (the brand orange / blue / green are 2.2-3.4:1 on white, too light for 14px text; these are 5.7 / 6.7 / 6.3:1) and
   the official footprint beside "One step forward", as in the guide. Inline, so the card does not get taller. */
.eitr-flip-grid.is-school { --eitr-dark: #B5400B; }
.eitr-flip-grid.is-workplace { --eitr-dark: #0B5F9E; }
.eitr-flip-grid.is-veteran { --eitr-dark: #2F6E05; }
.eitr-flip-card .eitr-flip-back > .eitr-flip-label {
	color: var(--eitr-dark, inherit);
}
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
.eitr-flip-card .eitr-flip-back > .eitr-flip-label ~ .eitr-flip-label::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 22px;
	margin: -4px 8px -2px 0;
	vertical-align: middle;
	background: var(--eitr-accent);
	-webkit-mask: url("img/eitr-footprint.svg") center / contain no-repeat;
	mask: url("img/eitr-footprint.svg") center / contain no-repeat;
}
}
.eitr-flip-card > .eitr-flip-back {
	background: #fff;
	border: 2px solid var(--eitr-accent);
}
.eitr-flip-card .eitr-flip-front > *,
.eitr-flip-card .eitr-flip-back > * {
	margin-top: 0;
}
.eitr-flip-card .eitr-flip-label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
/* Flip buttons (added by eitr.js): teal with white text, 14.9:1, on every card colour. */
.eitr-flip-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--theme-palette-color-3, #003741);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}
.eitr-flip-btn:hover {
	background: #00262D;
}
.eitr-flip-btn:focus-visible {
	outline: 3px solid var(--theme-palette-color-3, #003741);
	outline-offset: 3px;
}
/* After a flip the script focuses the face itself (so a screen reader starts at its top); show where focus is. */
.eitr-flip-card > .eitr-flip-front:focus,
.eitr-flip-card > .eitr-flip-back:focus {
	outline: 3px solid var(--theme-palette-color-3, #003741);
	outline-offset: 3px;
}
/* With the script: both faces in one grid cell, the back turned away until flipped. */
.eitr-flip-card.is-ready {
	display: grid !important;
}
.eitr-flip-card.is-ready > .eitr-flip-front,
.eitr-flip-card.is-ready > .eitr-flip-back {
	grid-area: 1 / 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
/* The card is as tall as its back (~150 words), so the front's shorter scenario sits at the top in larger
   type and its Flip button goes to the bottom edge instead of floating mid-card. */
.eitr-flip-card.is-ready > .eitr-flip-front {
	display: flex;
	flex-direction: column;
}
.eitr-flip-card.is-ready > .eitr-flip-front > p:not(.eitr-flip-label) {
	font-size: 20px;
	line-height: 1.55;
}
.eitr-flip-card.is-ready > .eitr-flip-front > .eitr-flip-btn {
	margin-top: auto;
	align-self: flex-start;
}
.eitr-flip-card.is-ready > .eitr-flip-front > :nth-last-child(2) {
	margin-bottom: 28px;
}
/* .is-animated is added a frame after .is-ready, so the back does not visibly turn over on page load. */
.eitr-flip-card.is-animated > .eitr-flip-front,
.eitr-flip-card.is-animated > .eitr-flip-back {
	transition: transform 0.6s ease;
}
.eitr-flip-card.is-ready > .eitr-flip-back {
	transform: rotateY(180deg);
}
.eitr-flip-card.is-ready.is-flipped > .eitr-flip-front {
	transform: rotateY(-180deg);
}
.eitr-flip-card.is-ready.is-flipped > .eitr-flip-back {
	transform: rotateY(0deg);
}
@media (prefers-reduced-motion: reduce) {
	.eitr-flip-card.is-animated > .eitr-flip-front,
	.eitr-flip-card.is-animated > .eitr-flip-back {
		transition: none;
	}
}
@media (max-width: 689.98px) {
	.eitr-flip-card > .eitr-flip-front,
	.eitr-flip-card > .eitr-flip-back {
		padding: 24px 20px 22px;
	}
}
/* Printing: no 3D; both faces print one after the other and the buttons are left out (red team 2026-10-27:
   every unflipped back printed blank). */
@media print {
	.eitr-flip-card.is-ready {
		display: block !important;
	}
	.eitr-flip-card.is-ready > .eitr-flip-front,
	.eitr-flip-card.is-ready > .eitr-flip-back {
		transform: none !important;
		-webkit-backface-visibility: visible;
		backface-visibility: visible;
		break-inside: avoid;
		margin-bottom: 12px;
	}
	.eitr-flip-btn {
		display: none !important;
	}
}

/* Digital Guides (partner-resources): Blocksy's "Product additional info" lines are set once for every product
   ("Ships anywhere in Canada, flat $25", "Official Elephant in the Room merchandise") and read wrong for a
   guide whose default format is a $10 download. Blocksy has no per-category setting for this element, so
   it is hidden on guide pages only. @date 2026-10-27 */
.product.product_cat-partner-resources .ct-product-additional-info {
	display: none;
}

/* /our-partners/ hero photo (Greenshift image gsbp-1969229, 2364, 1200x800): Greenshift prints width = the custom
   574px but height = the photo's 800px, so the browser reserves a 574x800 box and the page jumps when the photo
   arrives. The block has no ratio setting and re-saves its originalWidth/Height from the file (tried in the editor
   2026-10-28, revision 2374 then 2375), so the photo's own 3:2 is set here. Scoped to page 2098: the hero
   blocks on Home, Who We Are, Get Involved, Resources and Wellness Trunk share this Greenshift id and hold
   square photos, which 3:2 squashed. Corners match the site's other photos (8px). @date 2026-10-28 */
body.page-id-2098 .gspb_image-id-gsbp-1969229 > img {
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover; /* a future non-3:2 photo crops instead of squashing */
	border-radius: 8px;
}

/* §17 My Account / checkout: the "show password" eye was 14px (e2e 2026-11-04, WCAG 2.5.8 target size 24px).
   Same icon, larger tap target, still centred in the field. */
.woocommerce .password-input .show-password-input,
.woocommerce-page .password-input .show-password-input {
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	transform: translateY(-50%);
}

/* ==========================================================================
   Partner Hub resource cards + footer MDSC credit (Kristina 2026-11-10 "Fw: eitr.ca").
   WHY: there is no native block setting for hover or a lift effect. Cards carry the
   class `eitr-resource-card` (Group → Additional CSS class), the footer MDSC logo
   `eitr-footer-credit` (Image → Additional CSS class).
   - Card hover: a small lift + soft shadow, only where hover exists and the visitor
     has not asked for reduced motion.
   - Button hover/focus: orange → dark teal with white text (12.9:1; the resting
     teal-on-orange is 4.7:1). !important is required because WordPress core's
     preset classes `.has-palette-color-12-background-color` and
     `.has-palette-color-3-color` are themselves !important, so the cascade can't
     win regardless of load order (adversary: core global-styles).
   - Footer credit: the logo link lifts 2px on hover and gets a visible focus ring.
   @date 2026-11-10 */
.eitr-resource-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.eitr-resource-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 14px 28px -14px var(--theme-palette-color-3, #003741);
	}

	.eitr-footer-credit a:hover img {
		transform: translateY(-2px);
	}
}

.eitr-resource-card .wp-block-button__link:hover,
.eitr-resource-card .wp-block-button__link:focus-visible {
	background-color: var(--theme-palette-color-3, #003741) !important; /* adversary: core .has-palette-color-12-background-color */
	color: var(--theme-palette-color-8, #ffffff) !important; /* adversary: core .has-palette-color-3-color */
}

.eitr-footer-credit img {
	transition: transform 0.2s ease;
}

.eitr-footer-credit a:focus-visible {
	outline: 2px solid var(--theme-palette-color-3, #003741);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Footer MDSC credit spacing: the space above the credit equals the space below it
   (Jayr 2026-11-10, "should be the same spacing"). Desktop/tablet: 55px = the gap from
   the credit to the copyright row (middle-row 30px + bottom-row 25px padding). Phones:
   Blocksy stacks the footer mark under the credit with a 32px column gap, so 32px.
   689.98px = Blocksy's mobile breakpoint (global.css). The slogan paragraph has its own
   bottom margin set to 0 in the block, so this margin is the whole gap. @date 2026-11-10 */
.eitr-footer-credit-group {
	margin-top: 55px;
}

@media (max-width: 689.98px) {
	.eitr-footer-credit-group {
		margin-top: 32px;
	}
}

/* Wellness Trunk (page 1652) "Trunk Contents" v3, 2026-11-12 pm. Kristina: no bullets, four short paragraphs, photo
   left / text right; Jayr: "splashy, commercial grade". Design "Unboxing the trunk": the section is Thunder Teal
   (Greenshift background setting), the trunk cut-out (media 2543, transparent WebP) sits on a sky disc ringed by the
   brand hand-drawn loop (the one bold element), and each of the four headings carries the brand elephant footprint
   in its own colour (sky / orange / lime / pale blue). Not numbered: the four groups are not a sequence.
   Native block settings carry the colours, sizes and gaps; this CSS only draws what has no setting (disc, loop,
   footprints) and sets the reading measure. Replaces the 2026-11-12 list rules (gsbp-tail0001s, removed).
   - Heading row d0eb7e3: the shared phone rule adds 28px !important; zeroed so heading -> intro is one gap.
   - The 10-09 rule that zeroed this section's top padding is gone: on teal the section needs its own 80/80/60.
   @date 2026-11-12 */
body.page-id-1652 #gspb_row-id-gsbp-d0eb7e3 {
	margin-bottom: 0 !important; /* adversary: the shared phone rule's !important */
}
body.page-id-1652 #gspb_heading-id-gsbp-ceebda9 {
	margin-bottom: 16px;
}
body.page-id-1652 .gspb_text-id-gsbp-wtint1 {
	max-width: 600px; /* ~70 characters of Inter (62ch ran to 85: "ch" is the wide zero) */
	opacity: 0.92;
}

/* The stage: disc + loop are pseudo-elements behind the photo (decorative, not in the accessibility tree). */
.eitr-trunk-contents .eitr-trunk-stage {
	position: relative;
	isolation: isolate;
	max-width: 500px;
	margin: 0 auto;
	padding: 5%;
}
.eitr-trunk-contents .eitr-trunk-stage::before {
	content: "";
	position: absolute;
	inset: 6%;
	z-index: -2;
	border-radius: 50%;
	background-color: var(--theme-palette-color-2, #37B9FF);
}
.eitr-trunk-contents .eitr-trunk-stage::after {
	content: "";
	position: absolute;
	left: -9%;
	top: 11%;
	z-index: -1;
	width: 118%;
	aspect-ratio: 430 / 308; /* the loop graphic's own ratio, so its stroke is not stretched */
	background-color: var(--theme-palette-color-1, #C9EF6A);
	-webkit-mask: url("img/eitr-circle.svg") center / contain no-repeat;
	mask: url("img/eitr-circle.svg") center / contain no-repeat;
	transform: rotate(-8deg);
	pointer-events: none;
}
.eitr-trunk-contents .eitr-trunk-stage img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 22px 28px rgba(0, 24, 30, 0.38));
}

/* The four groups: footprint marker before each heading, paragraph aligned under the heading text. */
.eitr-trunk-items {
	max-width: 620px;
}
.eitr-trunk-item {
	--eitr-paw: var(--theme-palette-color-2, #37B9FF);
	position: relative;
	padding-left: 44px;
}
.eitr-trunk-item.is-orange { --eitr-paw: var(--theme-palette-color-12, #FF7212); }
.eitr-trunk-item.is-lime { --eitr-paw: var(--theme-palette-color-1, #C9EF6A); }
.eitr-trunk-item.is-pale { --eitr-paw: var(--theme-palette-color-9, #7AD7FC); }
.eitr-trunk-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 26px;
	height: 29px;
	background-color: var(--eitr-paw);
	-webkit-mask: url("img/eitr-footprint.svg") center / contain no-repeat;
	mask: url("img/eitr-footprint.svg") center / contain no-repeat;
	transform: rotate(-14deg);
}
.eitr-trunk-item h3 {
	margin: 0;
	/* Set here, not as the block's font size: WordPress fluid typography turned a 22px block size into
	   clamp(14.6px … 22px), smaller than the body text on phones. */
	font-size: 22px;
	line-height: 1.35;
}
.eitr-trunk-item p {
	margin: 0;
	opacity: 0.9;
}

@media (max-width: 1280px) {
	/* below 1281px the columns are too close for the loop's overhang: keep it inside the stage
	   (red team 2026-11-12: it reached the lime footprint and passed the content edge at 782-1280) */
	.eitr-trunk-contents .eitr-trunk-stage::after {
		left: 0;
		width: 100%;
		top: 14%;
	}
}
@media (max-width: 1024px) {
	/* stack from 1024px down (core Columns would only stack below 782px; at 782-1024 the two columns were cramped:
	   ~45 characters per line and empty teal above/below the trunk): trunk first, then the four groups at full width */
	body.page-id-1652 .wp-block-columns.eitr-trunk-contents {
		flex-wrap: wrap !important; /* adversary: core layout's flex-wrap:nowrap on the wp-container class */
		row-gap: 48px;
	}
	body.page-id-1652 .wp-block-columns.eitr-trunk-contents > .wp-block-column {
		flex-basis: 100% !important; /* adversary: the column's inline flex-basis (45% / 55%) */
	}
	/* one left edge when stacked: trunk, heading, intro and groups all start at the container edge; the groups keep
	   a ~75-character measure */
	.eitr-trunk-contents .eitr-trunk-stage {
		max-width: 420px;
	}
	body.page-id-1652 .eitr-trunk-contents .wp-block-image.aligncenter.eitr-trunk-stage {
		margin-left: 0 !important; /* adversary: core layout's `.is-layout-flow > .aligncenter{margin-left:auto !important}` */
	}
	.eitr-trunk-items {
		max-width: 680px;
	}
}
@media (max-width: 781.98px) {
	.eitr-trunk-contents .eitr-trunk-stage {
		max-width: 380px;
	}
}
@media (max-width: 689.98px) {
	/* phones: the loop stays inside the column (no clipping at the screen edges) */
	.eitr-trunk-contents .eitr-trunk-stage {
		padding: 8%;
	}
	.eitr-trunk-contents .eitr-trunk-stage::before {
		inset: 9%;
	}
	.eitr-trunk-contents .eitr-trunk-stage::after {
		left: 0;
		top: 16%;
		width: 100%;
	}
	.eitr-trunk-item {
		padding-left: 38px;
	}
	.eitr-trunk-item h3 {
		font-size: 20px;
	}
	.eitr-trunk-item::before {
		width: 22px;
		height: 25px;
	}
	body.page-id-1652 #gspb_heading-id-gsbp-ceebda9 {
		text-align: left !important; /* adversary: greenshift-post-css-inline-css text-align !important */
	}
}
@media (forced-colors: active) {
	.eitr-trunk-item::before,
	.eitr-trunk-contents .eitr-trunk-stage::before,
	.eitr-trunk-contents .eitr-trunk-stage::after {
		forced-color-adjust: none;
	}
}

/* Get In Touch (page 1546) form: "Upload photos of support here" (Diana 2026-11-12). Fluent Forms free has no upload
   field, so a Custom HTML element in form 2 links to the MDSC SharePoint "Request files" page (new tab). It shows only
   when the reason "Share photos of support" is picked (Fluent conditional logic, Jayr). v2 (Jayr: "make sure there's an
   indicator that this is clickable"): solid teal pill, pointer cursor, upload icon before the text, new-tab arrow after
   it (UI icons, inline SVG masks in currentColor), sky fill on hover/focus. Screen readers also hear "(opens in a new
   tab)". Contrast: white on #003741 12.9:1; #003741 on #37B9FF 6.1:1. @date 2026-11-12 */
.eitr-upload-photos {
	margin: 4px 0 8px;
}
.eitr-upload-photos .eitr-upload-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 22px 10px 18px;
	border: 2px solid var(--theme-palette-color-3, #003741);
	border-radius: 50px;
	color: #ffffff;
	background-color: var(--theme-palette-color-3, #003741);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 0 rgba(0, 55, 65, 0.18);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.eitr-upload-photos .eitr-upload-button::before,
.eitr-upload-photos .eitr-upload-button::after {
	content: "";
	flex: none;
	background-color: currentColor;
}
.eitr-upload-photos .eitr-upload-button::before { /* upload: arrow up into a tray */
	width: 20px;
	height: 20px;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.6l5.7 5.7-1.4 1.4L13 6.4V16h-2V6.4L7.7 9.7 6.3 8.3 12 2.6zM4 14h2v4.5c0 .3.2.5.5.5h11c.3 0 .5-.2.5-.5V14h2v4.5c0 1.4-1.1 2.5-2.5 2.5h-11C5.1 21 4 19.9 4 18.5V14z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.6l5.7 5.7-1.4 1.4L13 6.4V16h-2V6.4L7.7 9.7 6.3 8.3 12 2.6zM4 14h2v4.5c0 .3.2.5.5.5h11c.3 0 .5-.2.5-.5V14h2v4.5c0 1.4-1.1 2.5-2.5 2.5h-11C5.1 21 4 19.9 4 18.5V14z'/></svg>") center / contain no-repeat;
}
.eitr-upload-photos .eitr-upload-button::after { /* opens in a new tab */
	width: 14px;
	height: 14px;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h6v2H7v10h10v-4h2v6H5V5z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14V3zM5 5h6v2H7v10h10v-4h2v6H5V5z'/></svg>") center / contain no-repeat;
}
.eitr-upload-photos .eitr-upload-button:hover,
.eitr-upload-photos .eitr-upload-button:focus-visible {
	background-color: var(--theme-palette-color-2, #37B9FF);
	border-color: var(--theme-palette-color-2, #37B9FF);
	color: var(--theme-palette-color-3, #003741);
	transform: translateY(-1px);
}
.eitr-upload-photos .eitr-upload-button:focus-visible {
	outline: 3px solid var(--theme-palette-color-3, #003741);
	outline-offset: 3px;
}
.eitr-upload-photos .eitr-upload-note {
	margin: 8px 0 0;
	max-width: 52ch;
	font-size: 14px;
	color: var(--theme-palette-color-3, #003741);
}
@media (prefers-reduced-motion: reduce) {
	.eitr-upload-photos .eitr-upload-button {
		transition: none;
		transform: none !important;
	}
}
@media (forced-colors: active) {
	.eitr-upload-photos .eitr-upload-button::before,
	.eitr-upload-photos .eitr-upload-button::after {
		background-color: LinkText;
	}
}