/*
 * CouncilWare Gateway — home page layout.
 *
 * Everything here is styling for the structures in the council's design file.
 * It is loaded after custom.css and reads its tokens; it defines none of its
 * own colours as literals except where a measured contrast note says otherwise.
 *
 * These class names are the contract with the Elementor layout: the Elementor
 * page carries no colour settings at all, only these classes in each element's
 * CSS Classes field (PLAN.md §2.3). A hex picked in Elementor is written into
 * _elementor_data and no theme can ever restyle it — that is why the styling
 * lives here and not there.
 *
 * Contents
 *   1. Header bar
 *   2. Navigation panel
 *   3. Hero trio
 *   4. Quick-links band
 *   5. Panels and sections
 *   6. Event grid
 *   7. Supporters
 *   8. Footer
 */

/* --- 1. Header bar ------------------------------------------------------- */

/*
 * Three zones: the NAVIGATE patch, the centred lockup, and the utility links.
 * The lockup is centred against the *bar*, not against the space left over
 * between the other two, so it does not drift as items are added to either
 * side. Grid with equal outer tracks does that; flex cannot without hacks.
 */
.site-header .wrap {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--cw-space-s);
	padding-block: 0.625rem;
}

.site-header .title-area {
	grid-column: 2;
	justify-self: center;
	text-align: center;
}

.cw-nav-toggle {
	grid-column: 1;
	justify-self: start;
}

/*
 * With the council's art set, the toggle *is* the patch: three embroidered
 * bars and the NAVIGATE badge are one image, so there is nothing left to draw.
 * The CSS bars and the border are dropped and the button becomes a transparent
 * frame around the artwork.
 *
 * The text label stays in the markup and is only hidden visually -- it is the
 * button's accessible name, and it is what a screen reader reads. The patch
 * itself is background, never the name.
 */
/*
 * Sized by height rather than width. The patch sets the height of the whole
 * header bar, so driving it from a viewport width made the bar grow with the
 * window -- at 1440px it was a 187px badge in a 140px-tall header, which
 * dominated a design whose header is meant to be a thin strip.
 */
/*
 * 0.1.1: the council's full patch artwork, bars uncropped, so the aspect is
 * wider (420 x 234) and the height steps up slightly -- 56px at desktop,
 * from 48px.
 */
.cw-nav-toggle--patch {
	height: clamp(2.5rem, 3.8vw, 3.5rem);
	width: auto;
	aspect-ratio: 420 / 234;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-image: var(--cw-navigate-patch);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.cw-nav-toggle--patch .cw-nav-toggle__bars {
	display: none;
}

.cw-nav-toggle--patch:hover {
	filter: brightness(1.07);
}

/* The focus ring has to clear the artwork rather than sit on top of it. */
.cw-nav-toggle--patch:focus-visible {
	outline: 3px solid var(--cw-accent-yellow);
	outline-offset: 4px;
	border-radius: var(--cw-radius);
}

.cw-header-controls {
	grid-column: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--cw-space-m);
}

.cw-lockup__link {
	align-items: center;
	gap: 0.15rem;
}

/*
 * The reversed signature is 312px wide natively -- a white knockout lockup, not
 * the colour art recoloured. Capped at 168px so it renders at roughly 1.9x on a
 * high-density screen; the shared rule in custom.css allows up to 260px, which
 * would put this asset barely above 1x and visibly soft.
 *
 * Upscaling the source to reach a nominal 2x was the alternative and is worse:
 * it adds bytes and softness without adding detail.
 */
.cw-lockup__mark {
	width: clamp(8rem, 14vw, 10.5rem);
	max-width: 100%;
	height: auto;
}

/*
 * The council name sits under the signature, constrained to its width so the
 * two read as one lockup rather than a logo with a caption beneath it.
 */
.cw-lockup__name {
	max-width: 10.5rem;
	font-size: clamp(0.5625rem, 0.5rem + 0.22vw, 0.6875rem);
	letter-spacing: 0.12em;
}

/*
 * The council's own signature (council-signature.webp) replaces the wordmark
 * plus typed name. It is one image at about 4.7:1, so it is sized by width
 * alone; 13.5rem is ~216px, which the 640px source covers at 2.9x -- sharp on
 * any screen. It is wider than the old wordmark because the council name is
 * now part of the art rather than a line of small caps beneath it.
 */
.cw-lockup--signature .cw-lockup__mark--signature {
	width: clamp(10rem, 16vw, 13.5rem);
}

/* --- Utility links ------------------------------------------------------- */

.cw-utility__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cw-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.cw-utility__menu) a {
	color: var(--cw-white);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

:where(.cw-utility__menu) a:hover {
	text-decoration: underline;
}

/*
 * Below 64em the right-hand track of the header grid is too narrow for four
 * links: at tablet width "Join Us" wrapped to a second line, and on a phone the
 * links stacked into a column that made the header ~190px tall. So below that
 * width the links drop to their own full-width row under the bar, centred on
 * the same axis as the lockup, where they fit on one line down to ~340px and
 * wrap as a row (not a column) below that.
 */
@media (max-width: 63.99em) {
	.cw-header-controls {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-content: center;
		padding-block-start: 0.5rem;
		border-block-start: 1px solid rgba(255, 255, 255, 0.18);
	}

	.cw-utility__menu {
		justify-content: center;
		gap: 0.25rem 1.25rem;
	}
}

/* --- 2. Navigation drawer ------------------------------------------------ */

/*
 * Every menu item lives behind the NAVIGATE patch, at every width, so this
 * drawer is the only route to the site.
 *
 * That is why the whole block is scoped to .cw-js. The rules below take the
 * menu out of the flow and park it off the left edge; if the class is absent --
 * JavaScript blocked, failed, or still loading -- none of them apply and the
 * menu renders as an ordinary list under the header. Degraded, but reachable.
 * Without that scoping a JS failure would hide the navigation with nothing able
 * to bring it back.
 */

.cw-nav-drawer__head {
	display: flex;
	justify-content: flex-end;
}

.cw-nav-close {
	display: none;
}

.cw-nav-backdrop {
	display: none;
}

.cw-nav-drawer .genesis-nav-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem var(--cw-space-s);
	width: min(100% - 2rem, var(--cw-wrap));
	margin-inline: auto;
	padding: var(--cw-space-s) 0;
	list-style: none;
}

.cw-nav-drawer .genesis-nav-menu a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--cw-radius);
	color: var(--cw-white);
	font-weight: 500;
	text-decoration: none;
}

.cw-nav-drawer {
	background: var(--cw-dark-navy);
}

/* --- with JavaScript: the drawer proper ---------------------------------- */

.cw-js .cw-nav-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	width: min(21rem, 86vw);
	padding: var(--cw-space-s) 0 var(--cw-space-l);
	background: var(--cw-dark-navy);
	box-shadow: 4px 0 32px rgba(0, 20, 45, 0.45);
	overflow-y: auto;
	overscroll-behavior: contain;

	/*
	 * visibility, not display or the hidden attribute, is what takes the closed
	 * drawer out of the tab order and out of the accessibility tree -- and
	 * unlike display it can be transitioned. Delaying it by the slide duration
	 * on close lets the panel finish moving before it disappears; on open it
	 * switches immediately so focus can move inside straight away.
	 */
	visibility: hidden;
	transform: translateX(-100%);
	transition: transform 260ms ease, visibility 0s linear 260ms;
}

.cw-js .cw-nav-drawer.is-open {
	visibility: visible;
	transform: translateX(0);
	transition: transform 260ms ease, visibility 0s linear 0s;
}

/*
 * The backdrop follows exactly the same open/closed pattern as the drawer:
 * visibility carries the state and opacity carries the animation. It used to
 * be toggled with the hidden attribute inside a requestAnimationFrame, to give
 * the browser a frame to paint opacity 0 before the fade started. That worked
 * but leaned on rAF firing -- and it is unnecessary, because a delayed
 * visibility transition does the same job declaratively.
 */
.cw-js .cw-nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: block;
	background: rgba(0, 20, 45, 0.55);
	visibility: hidden;
	opacity: 0;
	transition: opacity 260ms ease, visibility 0s linear 260ms;
}

.cw-js .cw-nav-backdrop.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity 260ms ease, visibility 0s linear 0s;
}

/* Scroll is locked while the drawer is open so the page cannot move under it. */
.cw-nav-open {
	overflow: hidden;
}

.cw-js .cw-nav-close {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-inline-end: var(--cw-space-s);
	padding: 0;
	border: 0;
	border-radius: var(--cw-radius-pill);
	background: transparent;
	color: var(--cw-white);
	cursor: pointer;
}

.cw-js .cw-nav-close:hover {
	background: rgba(255, 255, 255, 0.14);
}

.cw-js .cw-nav-close:focus-visible {
	outline: 3px solid var(--cw-accent-yellow);
	outline-offset: 2px;
}

.cw-nav-close__mark {
	position: relative;
	display: block;
	width: 1.125rem;
	height: 1.125rem;
}

.cw-nav-close__mark::before,
.cw-nav-close__mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.cw-nav-close__mark::before {
	transform: rotate(45deg);
}

.cw-nav-close__mark::after {
	transform: rotate(-45deg);
}

/* Stacked, full-width targets rather than the centred row of the flat menu. */
.cw-js .cw-nav-drawer .genesis-nav-menu {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

.cw-js .cw-nav-drawer .genesis-nav-menu li {
	list-style: none;
}

.cw-js .cw-nav-drawer .genesis-nav-menu a {
	padding: 0.875rem var(--cw-space-m);
	border-radius: 0;
	font-size: 1.0625rem;
}

.cw-js .cw-nav-drawer .genesis-nav-menu .sub-menu {
	margin: 0;
	padding: 0;
}

.cw-js .cw-nav-drawer .genesis-nav-menu .sub-menu a {
	padding-inline-start: var(--cw-space-xl);
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
}

.cw-nav-drawer .genesis-nav-menu a:hover,
.cw-nav-drawer .genesis-nav-menu .current-menu-item > a {
	background: rgba(255, 255, 255, 0.14);
}

.cw-nav-drawer .genesis-nav-menu a:focus-visible {
	outline: 3px solid var(--cw-accent-yellow);
	outline-offset: -3px;
}

/*
 * A drawer that flies in is motion, and motion is exactly what a reduced-motion
 * preference is asking us not to do. It still appears and disappears, just
 * without travelling.
 */
@media (prefers-reduced-motion: reduce) {
	.cw-js .cw-nav-drawer,
	.cw-js .cw-nav-drawer.is-open {
		transition: none;
	}

	.cw-js .cw-nav-backdrop {
		transition: none;
	}
}

/* --- 3. Hero trio -------------------------------------------------------- */

/*
 * Three Elementor containers, each holding an Image widget over a body
 * container with heading, text and a Button widget.
 *
 * Every cw-* class here lands on an Elementor *wrapper*, never on the tag that
 * finally paints. That distinction caused the two faults this block was rewritten
 * to fix: .cw-hero__cta carried a border and padding, which drew a pill around
 * the wrapper while the .elementor-button inside drew its own -- a visible double
 * border -- and a panel-hover rule set the wrapper's background to white while
 * the button kept white text, so hovering produced white text on white.
 *
 * The rule now: layout and colour context on the wrapper, everything that paints
 * a control on the control itself.
 */

.cw-hero {
	padding-block: var(--cw-space-l) var(--cw-space-m);
}

/*
 * Boxed container: custom properties, not resolved ones -- see the note on the
 * quick-links row below.
 *
 * --flex-wrap is deliberately not set. Elementor's default is nowrap with its
 * own `--flex-wrap-mobile: wrap`, which already gives three across on desktop
 * and a single column on small screens. Forcing wrap here overrode that at
 * every width: a child container carries --width: 100%, so the moment wrapping
 * is allowed each panel takes a line of its own and the trio stacks even on a
 * 1440px screen.
 */
.cw-gateway .cw-hero {
	--align-items: stretch;
	--justify-content: center;
	--row-gap: var(--cw-space-m);
	--column-gap: var(--cw-space-m);
}

.cw-gateway .cw-hero__panel {
	--border-radius: var(--cw-radius-lg);
	--overflow: hidden;
	--padding-top: 0.625rem;
	--padding-right: 0.625rem;
	--padding-bottom: 0;
	--padding-left: 0.625rem;
	--gap: 0;
	background: var(--cw-primary-navy);
	color: var(--cw-white);
	box-shadow: 0 2px 6px rgba(0, 32, 68, 0.12), 0 12px 28px rgba(0, 32, 68, 0.14);
	transition: box-shadow 160ms ease;
}

/*
 * The accent panel carries the council's primary ask. A modifier, not an
 * nth-child rule: re-ordering the three must not silently move the emphasis.
 */
.cw-gateway .cw-hero__panel--accent {
	background: var(--cw-scouting-red);
}

/*
 * A shadow, not a lift. The panel is not clickable -- only the button inside it
 * is -- and translating the whole card on hover advertises a target that is not
 * there. :focus-within so reaching the button by keyboard lights the card too.
 */
.cw-gateway .cw-hero__panel:hover,
.cw-gateway .cw-hero__panel:focus-within {
	box-shadow: 0 8px 18px rgba(0, 32, 68, 0.18), 0 24px 48px rgba(0, 32, 68, 0.22);
}

.cw-gateway .cw-hero__panel .cw-hero__art img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: calc(var(--cw-radius-lg) - 0.25rem);
}

/* Everything inside a panel sits on navy or red: state white, never inherit. */
.cw-gateway .cw-hero__panel :is(h1, h2, h3, h4, h5, h6),
.cw-gateway .cw-hero__panel p,
.cw-gateway .cw-hero__panel .elementor-heading-title,
.cw-gateway .cw-hero__panel .elementor-widget-container {
	color: var(--cw-white);
}

.cw-gateway .cw-hero__panel .cw-hero__body {
	--padding-top: var(--cw-space-m);
	--padding-right: var(--cw-space-m);
	--padding-bottom: var(--cw-space-l);
	--padding-left: var(--cw-space-m);
	--gap: 0.5rem;
	--align-items: center;
	flex: 1;
	text-align: center;
}

.cw-gateway .cw-hero__title .elementor-heading-title {
	margin: 0;
	font-family: "Roboto Slab", Georgia, serif;
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
	font-weight: 700;
	line-height: 1.15;
}

.cw-gateway .cw-hero__subtitle .elementor-heading-title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
}

.cw-gateway .cw-hero__text p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* The button wrapper is spacing only. It paints nothing. */
.cw-gateway .cw-hero__cta {
	margin-block-start: auto;
	padding: 0;
	border: 0;
	background: none;
}

/*
 * The pill itself, on the anchor Elementor renders.
 *
 * Contrast is symmetric, so inverting the fill on hover cannot make a pair
 * worse -- the same two colours are still being compared:
 *
 *   white / navy #003F87   10.19:1
 *   white / red  #CE1126    5.63:1
 *
 * Both clear AA in either direction, so default and hover are safe on either
 * panel.
 *
 * Note this has to out-specify two later stylesheets: Elementor's
 * frontend.min.css sets .elementor-button to a grey fill and forces white text
 * on :hover, and the per-page post-*.css fills .elementor-widget-button
 * .elementor-button from --e-global-color-accent. Both load after the theme,
 * so the selectors below are deliberately three classes deep rather than the
 * one they would otherwise need.
 */
.cw-gateway .cw-hero__cta .elementor-button {
	display: inline-block;
	padding: 0.5rem 1.75rem;
	border: 2px solid var(--cw-white);
	border-radius: var(--cw-radius-pill);
	background-color: transparent;
	color: var(--cw-white);
	fill: var(--cw-white);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.cw-gateway .cw-hero__cta .elementor-button:hover,
.cw-gateway .cw-hero__cta .elementor-button:focus {
	background-color: var(--cw-white);
	color: var(--cw-primary-navy);
}

.cw-gateway .cw-hero__panel--accent .cw-hero__cta .elementor-button:hover,
.cw-gateway .cw-hero__panel--accent .cw-hero__cta .elementor-button:focus {
	background-color: var(--cw-white);
	color: var(--cw-scouting-red);
}

/*
 * Yellow, not white: the focus ring has to be visible against the button's own
 * white hover fill as well as against navy and red.
 */
.cw-gateway .cw-hero__cta .elementor-button:focus-visible {
	outline: 3px solid var(--cw-accent-yellow);
	outline-offset: 3px;
}

.cw-gateway .cw-hero__cta .elementor-button:active {
	transform: translateY(1px);
}

/* --- 4. Quick-links band ------------------------------------------------- */

.cw-band--patches {
	background: var(--cw-light-blue);
	padding-block: var(--cw-space-s);
}

/*
 * The row is a flex container of Elementor Image widgets, one per patch. There
 * is no custom widget and no plugin markup: an image that links somewhere is
 * what the Image widget is for, and everything below dresses its output.
 *
 * Each patch is therefore a single link whose accessible name is the image's
 * alt text. That is why the alt text on these attachments is the label and not
 * empty -- it is the only name the link has.
 */
/*
 * Set through Elementor's custom properties, not the resolved properties.
 *
 * A boxed container renders as .e-con > .e-con-inner, and the flex layout lives
 * on the *inner* -- so `justify-content: center` written on the element that
 * carries this class never reached the items, and the row sat hard left with
 * 320px of space to its right. Custom properties inherit, so setting the ones
 * Elementor's own rules read (`justify-content: var(--justify-content)`) does
 * reach the inner.
 *
 * Note gap is composed from --row-gap and --column-gap; --gap alone is only the
 * fallback Elementor itself assigns from --widgets-spacing, and setting it has
 * no effect.
 */
.cw-gateway .cw-patch-links {
	--justify-content: center;
	--align-items: center;
	--flex-wrap: wrap;
	--row-gap: 0.25rem;
	--column-gap: 0.5rem;
	--padding-top: 0;
	--padding-bottom: 0;
}

.cw-patch-link {
	flex: 0 1 auto;
}

.cw-gateway .cw-patch-link img {
	display: block;
	width: clamp(4.25rem, 7.5vw, 6.25rem);
	height: auto;
	transition: transform 160ms ease;
}

.cw-patch-link:hover img {
	transform: scale(1.06);
}

.cw-patch-link a:focus-visible {
	outline: 3px solid var(--cw-dark-navy);
	outline-offset: 3px;
	border-radius: var(--cw-radius-pill);
	display: inline-block;
}

/* --- 5. Panels and sections ---------------------------------------------- */

.cw-panel {
	padding: var(--cw-space-l) var(--cw-space-m);
	border-radius: var(--cw-radius-lg);
	background: var(--cw-surface-alt);
}

.cw-section__heading--centred {
	text-align: center;
}

.cw-section__heading--centred::after {
	margin-inline: auto;
}

.cw-section--events .cw-section__heading {
	margin-block-end: var(--cw-space-l);
	font-family: "Roboto Slab", Georgia, serif;
	text-align: center;
	color: var(--cw-dark-navy);
}

.cw-section--events .cw-section__heading::after {
	margin-inline: auto;
}

.cw-event-grid__header {
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

/* --- 6. Event grid ------------------------------------------------------- */

/*
 * Styling the CouncilWare Services plugin's own markup rather than rewrapping
 * it. The grid emits .councilware-eventgrid > .eventgrid-event > a >
 * .eventgrid-content with an h3, .event-location and .event-duration.
 *
 * Note it emits no image. The design file shows a photograph on every event
 * card; the shortcode cannot currently supply one, so the cards render as
 * type-only until the service app exposes a cover image.
 */
.councilware-eventgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cw-space-m);
}

@media (min-width: 40em) {
	.councilware-eventgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.councilware-eventgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.councilware-eventgrid .eventgrid-event {
	border-radius: var(--cw-radius);
	background: var(--cw-white);
	box-shadow: 0 1px 2px rgba(0, 63, 135, 0.06), 0 6px 16px rgba(0, 63, 135, 0.08);
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.councilware-eventgrid .eventgrid-event:hover,
.councilware-eventgrid .eventgrid-event:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(0, 63, 135, 0.1), 0 20px 40px rgba(0, 63, 135, 0.12);
}

.councilware-eventgrid .eventgrid-event > a {
	display: block;
	height: 100%;
	padding: var(--cw-space-m);
	color: inherit;
	text-decoration: none;
}

.councilware-eventgrid .eventgrid-content h3 {
	margin: 0 0 0.5rem;
	color: var(--cw-accent);
	font-size: 1.125rem;
	text-align: center;
}

.councilware-eventgrid .event-duration {
	margin-block-end: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	text-align: center;
}

.councilware-eventgrid .event-location {
	margin-block-end: 0.25rem;
	font-size: 0.875rem;
	text-align: center;
	color: #5c6066;
}

.councilware-eventgrid .event-description {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #4a4d52;
}

/* --- 7. Supporters ------------------------------------------------------- */

.cw-section--supporters .cw-section__heading {
	font-family: "Roboto Slab", Georgia, serif;
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
}

/*
 * Also a flex container of Image widgets. The row is shuffled in the browser on
 * every load -- see theme.js. Shuffling in PHP would look equivalent and is
 * not: the result is baked into the page cache, so every visitor sees the same
 * "random" order until the cache clears, which is exactly what the council
 * asked to avoid.
 */
/*
 * A full-width container has no .e-con-inner, so the resolved properties would
 * work here -- but they are written the same way as the boxed containers above
 * so the two cannot drift, and so changing a container's width setting in
 * Elementor does not silently break its layout.
 */
.cw-gateway .cw-supporters {
	--justify-content: center;
	--align-items: center;
	--flex-wrap: wrap;
	--row-gap: var(--cw-space-l);
	--column-gap: var(--cw-space-xl);
	--padding-top: 0;
	--padding-bottom: 0;
}

.cw-supporter {
	flex: 0 1 auto;
}

/*
 * The body class is load-bearing. Elementor's frontend.min.css carries
 * `.elementor img { height: auto }` -- the same specificity as
 * `.cw-supporter img`, but its stylesheet is enqueued after the theme's, so on
 * a tie it wins and the logos render at their intrinsic size. Constraining the
 * height is what makes six logos of six different proportions line up, so it
 * has to outrank that rule rather than tie with it.
 *
 * Elementor also loads a per-widget stylesheet (widget-image.css) later still,
 * which sets display: inline-block on the same element -- hence stating display
 * here too rather than assuming the earlier declaration survives.
 */
.cw-gateway .cw-supporter img {
	display: block;
	width: auto;
	max-width: 100%;
	height: clamp(3.25rem, 6vw, 5rem);
	object-fit: contain;
}

/* --- 8. Footer ----------------------------------------------------------- */

.cw-footer__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cw-space-l);
	align-items: center;
	justify-items: center;
	text-align: center;
}

@media (min-width: 56em) {
	.cw-footer__columns {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
	}
}

.cw-footer__map img {
	display: block;
	width: 100%;
	max-width: 16rem;
	height: auto;
	border-radius: var(--cw-radius);
}

/*
 * The map links to the council's map listing. A slight lift on hover says it
 * is clickable without adding a caption the design file does not have.
 */
.cw-footer__map-link {
	display: block;
	max-width: 16rem;
	border-radius: var(--cw-radius);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cw-footer__map-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.cw-footer__map-link:focus-visible {
	outline-color: var(--cw-accent-yellow);
	outline-offset: 4px;
}

.cw-footer__identity {
	display: grid;
	gap: 0.35rem;
}

/*
 * The reversed signature, when one is set. Sized a little larger than in the
 * header: the footer column has the room, and this is where the council's
 * identity is stated in full.
 */
.cw-footer__mark {
	display: block;
	width: clamp(9rem, 18vw, 13rem);
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	margin-block-end: 0.35rem;
}

/* The council signature carries the name, so it takes the name's room too. */
.cw-footer__mark--signature {
	width: clamp(13rem, 24vw, 18rem);
	margin-block-end: 0.75rem;
}

/*
 * The council name. It sits beneath the signature when there is one, and stands
 * in for it when there is not -- so it is never the only thing missing.
 */
.cw-footer__name {
	margin: 0;
	font-family: "Roboto Slab", Georgia, serif;
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.cw-footer__contact {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

.cw-footer__contact a {
	color: inherit;
}

.cw-social__list {
	justify-content: center;
	margin-block-end: 0;
}

/*
 * Social links. Where the council supplied artwork the link is the artwork and
 * nothing else -- no ring around it, since the icons are already round badges.
 * Networks with no art keep a lettered initial in a circle: a visible, readable
 * fallback beats an empty ring, and both carry the same accessible name.
 */
/*
 * No border, no padding. The supplied icons are merit badges with their own
 * stitched ring, so a CSS circle around them draws a second, thinner ring
 * outside the first. The ring belongs only to .cw-social__initials, which is
 * the fallback for networks with no artwork.
 *
 * These resets are explicit because custom.css styles this same selector for
 * the artless case, and inheriting its border is what produced the double ring.
 */
.cw-social__list a {
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: var(--cw-radius-pill);
	text-decoration: none;
}

.cw-social__art {
	display: block;
	width: 3rem;
	height: auto;
	transition: transform 160ms ease;
}

.cw-social__list a:hover .cw-social__art {
	transform: scale(1.08);
}

.cw-social__initials {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 2px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--cw-radius-pill);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
}

.cw-social__list a:hover .cw-social__initials {
	background: rgba(255, 255, 255, 0.16);
	border-color: var(--cw-white);
}

.cw-social__list a:focus-visible {
	outline: 3px solid var(--cw-accent-yellow);
	outline-offset: 3px;
}

/* --- 9. Elementor interop ------------------------------------------------ */

/*
 * Elementor's Global Colors are deliberately left unconfigured (PLAN.md §2.3):
 * staff must not be given a palette in Elementor that competes with the
 * theme's. What that leaves behind, though, is Elementor's *own* defaults --
 * #6EC1E4 for primary and #61CE70 for accent -- and its widgets resolve to them
 * through these custom properties. That is why every heading first rendered in
 * Elementor blue and every button in Elementor green: two colours from no
 * council's brand, on a Scouting America site.
 *
 * Remapping the variables fixes it at the source, for every Elementor widget at
 * once, instead of chasing each widget's default with a more specific selector.
 * Nothing is written into the page: the kit stays unconfigured, the content
 * stores no hex, and a different CouncilWare theme restyles it by redefining
 * these same four lines.
 *
 * On body rather than :root so it outranks Elementor's own :root declaration
 * regardless of which stylesheet the browser sees last.
 */
body.cw-gateway {
	--e-global-color-primary: var(--cw-dark-navy);
	--e-global-color-secondary: var(--cw-primary-navy);
	--e-global-color-text: var(--cw-text);
	--e-global-color-accent: var(--cw-accent);
}

/*
 * The cw-* classes set in Elementor land on the element *wrapper*
 * (.elementor-element.cw-hero__title), not on the tag inside it. Every rule
 * below therefore targets both the wrapper and the inner element, so the same
 * class works whether the markup came from Elementor or from the PHP stub in
 * templates/front-page.php.
 *
 * This is also where Elementor's own defaults get overridden. They are the
 * reason the panels first rendered with dark body text on navy and green
 * buttons: Elementor styles its widgets from its own kit, which this build
 * deliberately leaves unconfigured (PLAN.md §2.3) so that nothing writes a
 * colour into the page. The consequence is that the theme has to state these
 * explicitly rather than inherit them.
 */

/* Section headings authored as Elementor heading widgets. */
.cw-gateway .cw-section__heading .elementor-heading-title {
	margin: 0;
	color: var(--cw-dark-navy);
	font-family: "Roboto Slab", Georgia, serif;
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
	font-weight: 700;
}

.cw-section__heading--centred .elementor-heading-title {
	text-align: center;
}

/* The accent rule under a heading: draw it once, on whichever element exists. */
.cw-section__heading .elementor-heading-title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 4px;
	margin-block-start: 0.625rem;
	border-radius: var(--cw-radius-pill);
	background: var(--cw-accent);
}

.cw-section__heading--centred .elementor-heading-title::after {
	margin-inline: auto;
}

/* ...and suppress the wrapper's own, so it is not drawn twice. */
.cw-section__heading:has(.elementor-heading-title)::after {
	display: none;
}

.cw-panel {
	width: 100%;
}

/*
 * Card grids.
 *
 * The row itself comes from the Container's own layout settings, which
 * Elementor does emit: direction, wrap, gap, justify. What it will not emit for
 * a *nested* container is a width -- the `width` control writes --width, and
 * only :is(.elementor-section-wrap,[data-elementor-id])>.e-con reads it, which
 * is top-level containers only. A nested container is sized as a flex item
 * instead, through .e-con.e-flex { flex: var(--flex-grow) var(--flex-shrink)
 * var(--flex-basis) }.
 *
 * So the basis is set here, the same way .cw-hero and .cw-patch-links already
 * hand Elementor its custom properties. Content carries .cw-card and the theme
 * decides what a card is worth -- which is also what lets the next council's
 * theme lay the same page out differently.
 *
 * The subtractions match the grid's 1.5rem gap, so three cards and two gaps
 * come to exactly 100%.
 */
.cw-gateway .cw-card {
	--flex-grow: 0;
	--flex-shrink: 1;
	--flex-basis: 100%;
}

@media (min-width: 40em) {

	.cw-gateway .cw-card {
		--flex-basis: calc((100% - var(--cw-space-m)) / 2);
	}
}

@media (min-width: 62em) {

	.cw-gateway .cw-card {
		--flex-basis: calc((100% - 2 * var(--cw-space-m)) / 3);
	}

	.cw-gateway .cw-card--half {
		--flex-basis: calc((100% - var(--cw-space-m)) / 2);
	}

	.cw-gateway .cw-card--quarter {
		--flex-basis: calc((100% - 3 * var(--cw-space-m)) / 4);
	}
}

/*
 * The card is a column flex container, so an auto top margin pushes the call to
 * action to the bottom edge. Cards in a row are stretched to equal height by
 * the grid, and without this their buttons sit wherever the copy above happens
 * to end -- which reads as a ragged row rather than a set.
 */
.cw-gateway .cw-card > .elementor-widget-button {
	margin-block-start: auto;
}

/*
 * A panel inside a tinted section. Both default to --cw-surface-alt, so the
 * panel would be exactly the colour of the band behind it and simply vanish --
 * the card reads as a gap in the page rather than an object on it. Inside a
 * tint the panel takes the plain surface instead, which keeps the same
 * figure-on-ground relationship the untinted case has.
 */
.cw-gateway .cw-section--tint .cw-panel {
	background: var(--cw-surface);
}