/*
 * CouncilWare Gateway — tokens and theme chrome.
 *
 * theme.json is the source of truth. This file mirrors those tokens as --cw-*
 * custom properties, because the header, footer and the CouncilWare Components
 * plugin all render outside the block editor and never see --wp--preset--*
 * unless something hands it to them. Change theme.json first, then this file,
 * then assets/css/editor.css.
 *
 * Contents
 *   1. Tokens
 *   2. Base
 *   3. Utility strip
 *   4. Header, lockup and NAVIGATE toggle
 *   5. Navigation
 *   6. Buttons
 *   7. Front page sections
 *   8. Footer
 *   9. Placeholders
 */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
	/* Palette — mirrors theme.json settings.color.palette. */
	--cw-primary-navy: #003f87;
	--cw-dark-navy: #003366;
	--cw-light-blue: #9ab3d5;
	/*
	 * Brand "Informative Blue". Measures 4.04:1 on white -- under AA 4.5 for
	 * body text -- so it is a display/UI colour, never a link colour.
	 */
	--cw-accent-blue: #067eeb;

	/*
	 * What body links actually use. 6.07:1 on white and 4.98:1 on the
	 * --cw-surface-alt section fill, so it passes AA on both grounds a link
	 * actually appears on. Same reasoning as --cw-cta-green below.
	 */
	--cw-link-blue: #0061bf;
	--cw-scouting-red: #ce1126;
	--cw-scouting-dark-red: #860d1a;
	--cw-accent-orange: #ff6200;
	--cw-accent-yellow: #ffb225;
	--cw-tan: #d6cebd;
	--cw-dark-tan: #ad9d7b;
	--cw-light-gray: #e9e9e4;
	--cw-medium-gray: #969897;
	--cw-dark-gray: #232528;
	--cw-white: #fff;

	/*
	 * Display-only green. #039B03 measures 3.69:1 on white and fails AA for
	 * body text — it may be used for large display type and graphics, never
	 * for a link or a button label.
	 */
	--cw-accent-green: #039b03;

	/* What green CTAs actually use: 6.32:1 on white. */
	--cw-cta-green: #02700b;

	/* Roles. Section schemes override these; nothing else should. */
	--cw-accent: var(--cw-primary-navy);
	--cw-accent-hover: var(--cw-dark-navy);
	--cw-link: var(--cw-link-blue);
	--cw-surface: var(--cw-white);
	--cw-surface-alt: var(--cw-light-gray);
	--cw-text: var(--cw-dark-gray);
	--cw-rule: var(--cw-medium-gray);
	--cw-focus: var(--cw-accent-orange);

	/* Shape. Toby: "rounded boxes mean you took time to care." */
	--cw-radius: 10px;
	--cw-radius-lg: 16px;
	--cw-radius-pill: 999px;

	/* Spacing — mirrors theme.json settings.spacing.spacingSizes. */
	--cw-space-xs: 0.5rem;
	--cw-space-s: 1rem;
	--cw-space-m: 1.5rem;
	--cw-space-l: 2rem;
	--cw-space-xl: clamp(2.5rem, 5vw, 3rem);
	--cw-space-xxl: clamp(3.5rem, 8vw, 6rem);

	/*
	 * Section rhythm. Previously this was --cw-space-xxl, i.e. up to 6rem above
	 * AND below every section -- which on a section containing a heading and one
	 * line of text produced a 200px band of nothing and made the page read as
	 * broken rather than spacious. Padding should be proportional to what it
	 * surrounds.
	 */
	--cw-space-section: clamp(2.75rem, 5vw, 4rem);

	/* The comfortable reading measure for running text. */
	--cw-measure: 62ch;

	--cw-wrap: 1280px;
}

/* --- 2. Base ------------------------------------------------------------ */

body {
	background: var(--cw-surface);
	color: var(--cw-text);
}

.wrap {
	width: min(100% - 2rem, var(--cw-wrap));
	margin-inline: auto;
}

/*
 * [hidden] is a UA rule at zero specificity, so any class that sets `display`
 * silently defeats it -- which is exactly what happened to .cw-nav-toggle
 * (display: inline-flex) and left the toggle on screen at desktop widths while
 * theme.js believed it had hidden it. Anything toggled from JS relies on this.
 */
[hidden] {
	display: none !important;
}

/*
 * Deliberately no `overflow-x: hidden` on html/body. It looks like cheap
 * insurance and is actually a gag: it hides a runaway element instead of
 * fixing it, and it breaks position: sticky in every descendant. The real
 * fixes are min-width: 0 on the header flex items and the list resets below.
 * If something overflows, it should be visible so it gets fixed.
 */

/* --- Accessibility primitives ------------------------------------------- */

/*
 * Genesis emits skip links (WCAG 2.4.1, Bypass Blocks) because
 * config/theme-supports.php asks for 'skip-links', and it emits
 * .screen-reader-text wherever a control needs a name a sighted user does not
 * need to read. It ships no front-end CSS for either: Genesis is a framework
 * and the child theme owns presentation. Without these rules the skip links
 * render as a visible bulleted list at the top of every page.
 *
 * .screen-reader-text is defined here rather than left alone deliberately.
 * It was in fact being hidden -- by Elementor's frontend stylesheet, which
 * happens to define the same class. That is an accident, not a dependency
 * worth keeping: deactivate Elementor, or load a page it does not enqueue on,
 * and every hidden label in the theme and the components plugin becomes
 * visible text.
 */
.screen-reader-text,
.screen-reader-shortcut {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * The list itself is collapsed to nothing. The anchors inside are absolutely
 * positioned, so without this the empty <li>s still claim a line-height each
 * and leave a gap above the header.
 */
.genesis-skip-link {
	margin: 0;
	padding: 0;
}

.genesis-skip-link li {
	width: 0;
	height: 0;
	list-style: none;
}

/*
 * Hidden until focused, then unmistakably visible -- a skip link that stays
 * invisible when tabbed to is worse than none, because the keyboard user has
 * moved somewhere they cannot see. position: fixed so it appears at the top of
 * the viewport regardless of the collapsed list it belongs to.
 */
.screen-reader-text:focus,
.screen-reader-shortcut:focus {
	position: fixed;
	top: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	overflow: visible;
	clip-path: none;
	border-radius: var(--cw-radius);
	background: var(--cw-white);
	box-shadow: 0 8px 24px rgba(0, 32, 68, 0.28);
	color: var(--cw-dark-navy);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	outline: 3px solid var(--cw-accent-orange);
	outline-offset: 2px;
}

/*
 * Focus is never removed, only restyled. The ring has to stay visible against
 * navy, which rules out anything blue.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--cw-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- 3. Utility strip --------------------------------------------------- */

.cw-utility-bar {
	background: var(--cw-dark-navy);
	color: var(--cw-white);
	font-size: 0.875rem;
}

.cw-utility-bar .wrap {
	display: flex;
	justify-content: flex-end;
	gap: var(--cw-space-m);
	padding-block: 0.4rem;
}

/*
 * :where() so this contributes zero specificity. A rule naming a menu
 * *location* must never outrank a rule naming a *component* — that is how a
 * green Donate button inside a styled menu ends up with navy text on green at
 * 2.0:1. Component classes (.cw-btn-*) below are not wrapped.
 */
:where(.cw-utility-bar .menu-utility) a {
	color: var(--cw-white);
	text-decoration: none;
}

:where(.cw-utility-bar .menu-utility) a:hover {
	text-decoration: underline;
}

/* --- 4. Header, lockup and NAVIGATE toggle ------------------------------ */

.site-header {
	background: var(--cw-primary-navy);
	color: var(--cw-white);
}

.site-header .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cw-space-m);
	padding-block: var(--cw-space-m);
}

/*
 * A flex item's default min-width is auto, i.e. its content width, so a long
 * menu or a wide logo refuses to shrink and overflows the row instead of
 * wrapping. This is what makes flex-wrap above actually work.
 */
.site-header .wrap > * {
	min-width: 0;
}

.title-area {
	max-width: 100%;
}

.cw-lockup {
	margin: 0;
	font-size: inherit;
}

.cw-lockup__link {
	display: inline-flex;
	flex-direction: column;
	gap: 0.35rem;
	color: var(--cw-white);
	text-decoration: none;
}

.cw-lockup__mark {
	display: block;
	width: auto;
	max-width: min(260px, 100%);
	height: auto;
}

/*
 * Type-only wordmark, used until a reversed asset is supplied. Set at the
 * signature's proportions so the lockup keeps its shape either way, and in
 * white so it actually reads on navy -- which is the whole point.
 */
.cw-lockup__wordmark {
	display: block;
	color: var(--cw-white);
	font-family: "Roboto Slab", Georgia, serif;
	font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
}

/*
 * The council name is constrained to the wordmark's own width so the two read
 * as one signature rather than as a logo with a caption.
 */
.cw-lockup__name {
	display: block;
	max-width: 320px;
	font-family: "Roboto Slab", Georgia, serif;
	font-size: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	opacity: 0.92;
}

.cw-header-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

/* Long names get a tighter step. theme.js re-measures and can override. */
.cw-lockup[data-length="long"] .cw-lockup__name {
	letter-spacing: 0.04em;
}

.cw-header-controls {
	display: flex;
	align-items: center;
	gap: var(--cw-space-m);
}

/*
 * A real button with a real label. The embroidered patch is a background
 * image, never the accessible name — if the art fails to load, or the theme is
 * gone, the control still says Navigate.
 */
.cw-nav-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 1.1rem;
	border: 2px solid var(--cw-white);
	border-radius: var(--cw-radius-pill);
	background: transparent;
	color: var(--cw-white);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

/* The patch is the whole control whenever artwork resolved. */
.cw-nav-toggle--patch {
	border-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__label,
.cw-nav-toggle--patch .cw-nav-toggle__bars {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cw-nav-toggle__bars {
	display: inline-block;
	width: 1.25rem;
	height: 2px;
	background: currentColor;
	box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.cw-nav-toggle:focus-visible {
	outline-color: var(--cw-accent-yellow);
}

/*
 * The secondary menu is a slim band beneath the primary navigation. It used to
 * render inside the header flex row, where its items floated in the middle of
 * the navy band looking like rendering debris. The list reset matters either
 * way: without it the UA <ul> defaults (disc markers, 40px inline padding) were
 * what pushed the header past the viewport at 390px.
 */
:where(.nav-secondary) {
	background: var(--cw-light-gray);
}

:where(.nav-secondary) .genesis-nav-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cw-space-m);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.nav-secondary) .genesis-nav-menu a {
	display: block;
	padding: 0.5rem 0;
	color: var(--cw-dark-navy);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

:where(.nav-secondary) .genesis-nav-menu a:hover {
	text-decoration: underline;
}

/* --- 5. Navigation ------------------------------------------------------ */

/*
 * The primary menu has no presentation here. It is not a horizontal bar in this
 * design -- it is the slide-in drawer, and everything about it lives in
 * layout.css under "Navigation drawer".
 *
 * What stood here was the flat-bar treatment plus a --cw-nav-scale auto-fit
 * that measured the menu against the width of a bar that no longer exists.
 * Both are gone rather than left to rot: the calc() values referenced a custom
 * property nothing sets any more, which resolves to an invalid declaration.
 *
 * The :where() specificity contract still applies to any rule that names a menu
 * *location* -- see the note in section 3.
 */

/* --- 6. Buttons --------------------------------------------------------- */

/*
 * Scoped to button[type="submit"], never bare <button>: Elementor and several
 * plugins use bare buttons for icon controls and toggles, and restyling those
 * breaks their layout.
 */
button[type="submit"],
input[type="submit"],
.cw-btn {
	display: inline-block;
	padding: 0.875rem 1.75rem;
	border: 2px solid transparent;
	border-radius: var(--cw-radius);
	background: var(--cw-accent);
	color: var(--cw-white);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

/*
 * Role classes, not position classes. These are what staff type into a menu
 * item's CSS Classes field, so they are cw-*, never gw-* -- content authored
 * here has to restyle cleanly under the next council's theme.
 *
 * .cw-header-cta a is wrapped in :where() so it contributes zero specificity.
 * It is a *location* rule (style whatever lands in the header CTA area) and it
 * must never outrank a *component* rule -- unwrapped at (0,1,1) it beat
 * .cw-btn-join at (0,1,0) and silently stripped the Join button's outline,
 * leaving white text on navy with no visible control. Same contract as the
 * menu rules in section 3.
 */
:where(.cw-header-cta a),
.cw-btn-donate,
.cw-btn-join,
.cw-btn-navy,
.cw-btn-red,
.cw-btn-green,
.cw-btn-yellow,
.cw-btn-outline,
.cw-btn-ghost {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border: 2px solid transparent;
	border-radius: var(--cw-radius);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
}

.cw-btn-donate {
	background: var(--cw-cta-green);
	color: var(--cw-white);
}

.cw-btn-join {
	border-color: var(--cw-white);
	background: transparent;
	color: var(--cw-white);
}

.cw-btn-navy {
	background: var(--cw-primary-navy);
	color: var(--cw-white);
}

.cw-btn-red {
	background: var(--cw-scouting-red);
	color: var(--cw-white);
}

.cw-btn-green {
	background: var(--cw-cta-green);
	color: var(--cw-white);
}

/* Yellow needs dark text: white on #FFB225 is 1.80:1; dark gray is 8.52:1. */
.cw-btn-yellow {
	background: var(--cw-accent-yellow);
	color: var(--cw-dark-gray);
}

.cw-btn-outline {
	border-color: currentColor;
	background: transparent;
	color: inherit;
}

.cw-btn-ghost {
	background: transparent;
	color: inherit;
	text-decoration: underline;
}

/* --- 7. Front page sections --------------------------------------------- */

.cw-section {
	padding-block: var(--cw-space-section);
}

/*
 * Alternating fills need something in them to justify the band. nth-of-type on
 * near-empty sections produced a run of grey stripes that read as a broken
 * layout, so the tint is carried by an explicit class on the sections that
 * earn it rather than applied blindly to every other one.
 */
.cw-section--tint {
	background: var(--cw-surface-alt);
}

.cw-section__heading {
	margin-block: 0 var(--cw-space-m);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	letter-spacing: -0.01em;
}

/*
 * A short accent rule under each section heading. Cheap, and it gives an empty
 * section a visible anchor instead of a lone line of text floating in a band.
 */
.cw-section__heading::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 4px;
	margin-block-start: 0.625rem;
	border-radius: var(--cw-radius-pill);
	background: var(--cw-accent);
}

/* --- Masthead ----------------------------------------------------------- */

/*
 * An empty section is a normal state here -- no events tagged yet, no logos
 * uploaded yet -- and it needs to say so. A heading over blank space reads as
 * something that failed to load.
 */
.cw-empty {
	margin: 0;
	padding: var(--cw-space-l);
	border: 1px solid rgba(0, 63, 135, 0.12);
	border-radius: var(--cw-radius-lg);
	background: var(--cw-surface);
	color: #6b6e73;
	text-align: center;
}

.cw-link-more {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.875rem;
}

.cw-hero__panel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(0, 63, 135, 0.08);
	border-radius: var(--cw-radius-lg);
	background: var(--cw-surface);
	box-shadow: 0 1px 2px rgba(0, 63, 135, 0.05), 0 6px 18px rgba(0, 63, 135, 0.07);
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.cw-hero__panel:hover,
.cw-hero__panel:focus-within {
	transform: translateY(-3px);
	border-color: rgba(0, 63, 135, 0.2);
	box-shadow: 0 8px 16px rgba(0, 63, 135, 0.1), 0 20px 40px rgba(0, 63, 135, 0.12);
}

.cw-hero__art {
	aspect-ratio: 16 / 10;
}

.cw-hero__body {
	padding: var(--cw-space-m);
}

.cw-hero__title {
	margin-block: 0 0.375rem;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
}

.cw-hero__text {
	margin: 0;
	color: #4a4d52;
	font-size: 1rem;
	line-height: 1.5;
}

/*
 * A 3:2 box at the full 1280px content width is roughly 850px tall -- most of a
 * laptop screen given over to a placeholder. Capped, and a wider crop.
 */
.cw-event-grid__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cw-space-s);
}

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

.cw-before-footer {
	padding-block: var(--cw-space-xl);
	background: var(--cw-light-blue);
}

.site-footer {
	padding-block: var(--cw-space-xl);
	background: var(--cw-dark-navy);
	color: var(--cw-white);
}

.site-footer a {
	color: var(--cw-white);
}

.cw-footer__credits {
	color: rgba(255, 255, 255, 0.7);
}

.footer-widgets {
	padding-block: var(--cw-space-xl);
	background: var(--cw-primary-navy);
	color: var(--cw-white);
}

.footer-widgets .wrap {
	display: grid;
	gap: var(--cw-space-l);
	grid-template-columns: 1fr;
}

@media (min-width: 48em) {
	.footer-widgets .wrap {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.footer-widgets a {
	color: var(--cw-white);
}

.cw-social__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cw-space-s);
	margin: 0 0 var(--cw-space-m);
	padding: 0;
	list-style: none;
}

/*
 * Social links carry no chrome of their own. The council's icons are merit
 * badges with a stitched ring already in the artwork; presentation for both the
 * art and the no-art fallback lives in layout.css.
 */
.cw-social__list a {
	text-decoration: none;
}

.cw-footer__credits {
	margin: 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
}

/* --- 9. Placeholders ---------------------------------------------------- */

/*
 * Phase 0 stubs. Loud on purpose: a placeholder that looks finished is a
 * placeholder that ships. Delete these rules when the last one is gone.
 */
.cw-placeholder {
	margin-block: var(--cw-space-m) 0;
	padding: 0.75rem 0.875rem 0.75rem 2.25rem;
	position: relative;
	border: 1px dashed #d98b4a;
	border-radius: var(--cw-radius);
	background: #fffaf5;
	color: #5c4630;
	font-size: 0.875rem;
	line-height: 1.45;
}

/*
 * Still obviously a placeholder, but a hairline rule and a marker rather than a
 * 2px orange box -- these were shouting louder than the design around them,
 * which made a page of stubs look like a page of errors.
 */
.cw-placeholder::before {
	content: "\270E";
	position: absolute;
	inset-inline-start: 0.875rem;
	color: #d98b4a;
	font-size: 1rem;
	line-height: inherit;
}

[data-cw-placeholder="image"] {
	position: relative;
}

/* Label the empty art boxes so they read as intentional, not as a failed load. */
[data-cw-placeholder="image"]::after {
	content: "Image to come";
	position: absolute;
	inset-block-end: 0.625rem;
	inset-inline-start: 0.75rem;
	padding: 0.2rem 0.5rem;
	border-radius: var(--cw-radius-pill);
	background: rgba(255, 255, 255, 0.85);
	color: #6b6e73;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

[data-cw-placeholder="image"] {
	background: repeating-linear-gradient(
		45deg,
		var(--cw-light-gray),
		var(--cw-light-gray) 12px,
		#dcdcd4 12px,
		#dcdcd4 24px
	);
	aspect-ratio: 4 / 3;
}

/* --------------------------------------------------------------------------
 * Scoutly launcher
 *
 * Fixed to the bottom-right corner, where visitors look for a chat button.
 * z-index sits below the navigation drawer (999/1000 in layout.css) so an open
 * menu covers it rather than the other way round. Safe-area insets keep it
 * clear of the home indicator on notched phones.
 *
 * The whole figure is shown, uncropped: no disc, no clipping. The artwork is a
 * cut-out on transparency, so a soft drop shadow is what separates it from the
 * page -- it has to read on white sections and on the navy footer alike.
 * ----------------------------------------------------------------------- */
.cw-scoutly {
	position: fixed;
	z-index: 900;
	inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
	inset-inline-end: calc(1rem + env(safe-area-inset-right, 0px));
	display: block;
	width: 5.25rem;
	text-decoration: none;
}

.cw-scoutly__figure {
	display: block;
	transition: transform 0.15s ease;
}

.cw-scoutly:hover .cw-scoutly__figure {
	transform: translateY(-3px) scale(1.04);
}

.cw-scoutly:focus-visible {
	outline: 3px solid var(--cw-focus);
	outline-offset: 4px;
	border-radius: var(--cw-radius);
}

.cw-scoutly picture {
	display: block;
}

/* 160 x 176 source at 84px wide: ~1.9x, sharp on high-density screens. */
.cw-scoutly__art {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 3px 6px rgba(0, 25, 60, 0.35)) drop-shadow(0 0 1px rgba(0, 25, 60, 0.5));
}

/*
 * The label is always in the accessibility tree (it names the link) but only
 * shown on hover or focus, as a pill to the left of the figure -- the usual
 * chat-launcher pattern, and it keeps the corner uncluttered while reading.
 */
.cw-scoutly__label {
	position: absolute;
	inset-inline-end: calc(100% + 0.5rem);
	top: 50%;
	padding: 0.4rem 0.85rem;
	border-radius: var(--cw-radius-pill);
	background: var(--cw-primary-navy);
	color: var(--cw-white);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: translate(0.5rem, -50%);
	transition: opacity 0.15s ease, transform 0.15s ease;
	pointer-events: none;
}

.cw-scoutly:hover .cw-scoutly__label,
.cw-scoutly:focus-visible .cw-scoutly__label {
	opacity: 1;
	transform: translate(0, -50%);
}

@media (max-width: 40em) {
	.cw-scoutly {
		width: 4.25rem;
		inset-block-end: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		inset-inline-end: calc(0.75rem + env(safe-area-inset-right, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cw-scoutly__figure,
	.cw-scoutly__label,
	.cw-footer__map-link {
		transition: none;
	}

	.cw-scoutly:hover .cw-scoutly__figure,
	.cw-footer__map-link:hover {
		transform: none;
	}
}

@media print {
	.cw-scoutly {
		display: none;
	}
}