/*
Theme Name: Troop 949
Theme URI: https://troop949.com
Description: Design theme for Boy Scout Troop 949. Child of Twenty Twenty-Five, so the parent keeps receiving WordPress core security updates while the troop's design lives here and survives them.
Author: Troop 949
Version: 1.2.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
Template: twentytwentyfive
Text Domain: troop949
Tags: block-patterns, full-site-editing, one-column, custom-colors, accessibility-ready
*/

/*
 * Most styling is handled by theme.json. This file covers the illustrated
 * scenery, section dividers, the events feed, the Scout Law grid, the FAQ
 * accordion, the page header band, and the few things theme.json cannot
 * express.
 */

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
	border-radius: 2px;
}

.skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ============================================================
   SECTION FLOW
   Full-bleed sections on the front page butt against each other so the
   illustrated dividers can bridge them without paper stripes in between.
   Scoped to alignfull children of a top-level main, so ordinary page
   content keeps its normal rhythm.
   ============================================================ */

main.wp-block-group > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ============================================================
   SECTION DIVIDERS
   Inline SVG ridgelines that let one section's colour rise into the
   previous one. The div carries the colour of the section ABOVE as its
   background; the SVG is filled with the colour of the section BELOW.
   ============================================================ */

.troop-divider {
	display: block;
	width: 100%;
	margin: 0;
	line-height: 0;
	pointer-events: none;
}

.troop-divider svg {
	display: block;
	width: 100%;
	height: clamp(30px, 4.5vw, 64px);
}

/* ============================================================
   SECTION HEADING ACCENT
   A short gold bar under section headings. The one job the gold accent
   does everywhere: mark a heading, never carry body text.
   ============================================================ */

.troop-h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 4px;
	margin-top: 0.65rem;
	border-radius: 2px;
	background: var(--wp--preset--color--secondary);
}

.has-text-align-center.troop-h2::after {
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   HERO — illustrated night camp
   Built from gradients and one inline SVG scene rather than a photograph.
   Scout sites publish pictures of minors; until the troop has consented
   photos on file, drawn scenery is the safer default and it scales to any
   screen without a 2MB download.
   ============================================================ */

.troop-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(ellipse 70% 50% at 74% 18%, rgba(200, 169, 81, 0.16), transparent 60%),
		linear-gradient(178deg, #0C1A13 0%, #14261D 52%, #1B3324 100%);
}

/* Star field. Layers of tiny radial dots at different opacities. */
.troop-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 32% 0;
	z-index: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 22%, rgba(251, 250, 247, 0.85), transparent),
		radial-gradient(1.5px 1.5px at 28% 12%, rgba(251, 250, 247, 0.55), transparent),
		radial-gradient(1px 1px at 44% 30%, rgba(251, 250, 247, 0.7), transparent),
		radial-gradient(1.5px 1.5px at 58% 8%, rgba(251, 250, 247, 0.5), transparent),
		radial-gradient(1px 1px at 67% 26%, rgba(251, 250, 247, 0.75), transparent),
		radial-gradient(2px 2px at 82% 14%, rgba(251, 250, 247, 0.9), transparent),
		radial-gradient(1px 1px at 91% 32%, rgba(251, 250, 247, 0.6), transparent),
		radial-gradient(1.5px 1.5px at 36% 42%, rgba(251, 250, 247, 0.4), transparent),
		radial-gradient(1px 1px at 74% 44%, rgba(251, 250, 247, 0.45), transparent),
		radial-gradient(1px 1px at 6% 44%, rgba(251, 250, 247, 0.5), transparent),
		radial-gradient(1.5px 1.5px at 19% 6%, rgba(251, 250, 247, 0.65), transparent),
		radial-gradient(1px 1px at 52% 18%, rgba(251, 250, 247, 0.45), transparent),
		radial-gradient(1px 1px at 84% 40%, rgba(251, 250, 247, 0.4), transparent),
		radial-gradient(2px 2px at 39% 5%, rgba(251, 250, 247, 0.75), transparent),
		radial-gradient(1px 1px at 96% 8%, rgba(251, 250, 247, 0.55), transparent);
	pointer-events: none;
}

/* The moon. */
.troop-hero::after {
	content: "";
	position: absolute;
	top: clamp(2rem, 7vw, 5rem);
	right: clamp(2rem, 12vw, 10rem);
	width: clamp(48px, 7vw, 88px);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 62% 60%, rgba(214, 196, 140, 0.55) 0 8%, transparent 11%),
		radial-gradient(circle at 40% 68%, rgba(214, 196, 140, 0.45) 0 5%, transparent 8%),
		radial-gradient(circle at 70% 30%, rgba(214, 196, 140, 0.4) 0 6%, transparent 9%),
		radial-gradient(circle at 34% 32%, #FDF6E0, #E8D9A8 62%, #D6C48C);
	box-shadow: 0 0 44px 12px rgba(232, 217, 168, 0.22);
	z-index: 0;
	pointer-events: none;
}

/* The inline SVG scene sits between the sky and the copy. */
.troop-scene {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: auto;
	z-index: 1;
	display: block;
	pointer-events: none;
	max-height: 38vh;
}

/* Campfire flicker, disabled for reduced motion. */
.troop-scene .fire-glow {
	animation: troop-flicker 3.2s ease-in-out infinite;
	transform-origin: center 78%;
	transform-box: fill-box;
}

@keyframes troop-flicker {
	0%, 100% { opacity: 0.85; transform: scale(1); }
	38%      { opacity: 1;    transform: scale(1.06); }
	62%      { opacity: 0.75; transform: scale(0.97); }
	80%      { opacity: 0.95; transform: scale(1.03); }
}

/* Hero copy rides above the scenery.
 * The SVG and the copy group are siblings inside the cover's inner container,
 * so without an explicit z-index the later-in-source SVG paints over the text.
 */
.troop-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.troop-hero .wp-block-cover__inner-container > .wp-block-group {
	position: relative;
	z-index: 2;
	padding-bottom: clamp(3rem, 9vw, 6rem);
}

.troop-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
}

/* ============================================================
   FACT BAR
   The when / where / who strip rides up over the hero's treeline like a
   trail sign, instead of sitting flat below it.
   ============================================================ */

.troop-factbar {
	position: relative;
	z-index: 3;
	margin-top: clamp(-3.5rem, -5vw, -2.5rem) !important;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(28, 35, 33, 0.13);
	border: 1px solid var(--wp--preset--color--tertiary);
	border-top: 4px solid var(--wp--preset--color--secondary);
}

.troop-fact {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
}

.troop-fact svg {
	flex: none;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	stroke: var(--wp--preset--color--primary);
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ============================================================
   TOPO TEXTURE
   Faint contour lines for sand-coloured bands. Kept below 5% so it reads
   as paper grain, not pattern.
   ============================================================ */

.troop-topo {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%231E5B3E' stroke-opacity='0.05' stroke-width='1.5'%3E%3Cpath d='M-20 80 C60 40 140 120 220 90 S 380 30 460 70'/%3E%3Cpath d='M-20 130 C70 90 150 170 230 140 S 390 80 460 120'/%3E%3Cpath d='M-20 180 C80 140 160 220 240 190 S 400 130 460 170'/%3E%3Cpath d='M-20 260 C60 220 150 300 230 270 S 390 210 460 250'/%3E%3Cpath d='M-20 310 C70 270 160 350 240 320 S 400 260 460 300'/%3E%3Cpath d='M-20 380 C80 340 170 410 250 385 S 400 330 460 370'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 420px 420px;
}

/* ============================================================
   CARDS
   ============================================================ */

.troop-card {
	position: relative;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	height: 100%;
	overflow: hidden;
}

/* Gold thread across the top of a card, revealed on hover. */
.troop-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--wp--preset--color--secondary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.troop-card:hover,
.troop-card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgb(28 35 33 / 0.13);
}

.troop-card:hover::before,
.troop-card:focus-within::before {
	transform: scaleX(1);
}

/* Badge-style icon medallion at the top of each card. */
.troop-icon {
	width: 60px;
	height: 60px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--primary);
	margin-bottom: 1rem;
}

.troop-icon svg {
	width: 30px;
	height: 30px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ============================================================
   EVENTS FEED
   Live from the Scouting America unit calendar.
   ============================================================ */

.troop-events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.troop-events__item {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 1.1rem 1.35rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--tertiary);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 6px;
	transition: border-left-color 0.18s ease, transform 0.18s ease;
}

.troop-events__item:hover {
	border-left-color: var(--wp--preset--color--secondary);
	transform: translateX(2px);
}

.troop-events__date {
	flex: none;
	width: 58px;
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	line-height: 1;
	padding-top: 2px;
}

.troop-events__month {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.troop-events__day {
	display: block;
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
	margin-top: 3px;
}

.troop-events__body {
	min-width: 0;
}

.troop-events__title {
	font-size: 1.125rem;
	margin: 0 0 0.2rem;
	line-height: 1.3;
}

.troop-events__meta {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

.troop-events__empty {
	padding: 1.5rem;
	border: 2px dashed var(--wp--preset--color--tertiary);
	border-radius: 6px;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* ============================================================
   SCOUT LAW
   Twelve points. Explicit column counts at each width so the grid always
   divides evenly; auto-fit left ragged empty cells at some widths.
   ============================================================ */

.troop-law {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	background: rgba(232, 228, 217, 0.35);
	border: 1px solid rgba(232, 228, 217, 0.35);
	border-radius: 8px;
	overflow: hidden;
}

@media (max-width: 1080px) {
	.troop-law { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 700px) {
	.troop-law { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 460px) {
	.troop-law { grid-template-columns: repeat(2, 1fr); }
}

.troop-law li {
	background: var(--wp--preset--color--primary-dark);
	padding: 1.15rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	transition: background-color 0.2s ease;
}

.troop-law li:hover {
	background: #1B3324;
}

.troop-law .n {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

.troop-law .w {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	letter-spacing: -0.01em;
}

/* ============================================================
   PAGE HEADER BAND
   Every interior page opens under the same night sky as the front page,
   just less of it.
   ============================================================ */

.troop-pagehead {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(ellipse 60% 70% at 80% 0%, rgba(200, 169, 81, 0.12), transparent 60%),
		linear-gradient(178deg, #0E1F16 0%, #14261D 60%, #1B3324 100%);
}

.troop-pagehead::before {
	content: "";
	position: absolute;
	inset: 0 0 30% 0;
	z-index: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 15% 30%, rgba(251, 250, 247, 0.7), transparent),
		radial-gradient(1px 1px at 34% 14%, rgba(251, 250, 247, 0.5), transparent),
		radial-gradient(1.5px 1.5px at 55% 34%, rgba(251, 250, 247, 0.6), transparent),
		radial-gradient(1px 1px at 72% 18%, rgba(251, 250, 247, 0.55), transparent),
		radial-gradient(2px 2px at 88% 30%, rgba(251, 250, 247, 0.8), transparent),
		radial-gradient(1px 1px at 8% 12%, rgba(251, 250, 247, 0.45), transparent);
	pointer-events: none;
}

.troop-pagehead .wp-block-group {
	position: relative;
	z-index: 2;
}

.troop-pagehead .troop-scene {
	max-height: 90px;
	max-width: none;
}

.troop-pagehead h1 {
	margin-block-start: 0.5rem;
}

/* Interior page content rhythm: gold bar under section headings, breathing
   room above them, green list markers. */

.troop-content .entry-content h2 {
	margin-block-start: 2.75rem;
}

.troop-content .entry-content h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 4px;
	margin-top: 0.65rem;
	border-radius: 2px;
	background: var(--wp--preset--color--secondary);
}

.troop-content .entry-content :is(ul, ol) li::marker {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* ============================================================
   FAQ ACCORDION
   Native details/summary. No JavaScript, keyboard friendly for free.
   ============================================================ */

.troop-faq details {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--tertiary);
	border-left: 4px solid var(--wp--preset--color--tertiary);
	border-radius: 6px;
	margin-block-start: 0.75rem !important;
	transition: border-left-color 0.18s ease;
}

.troop-faq details[open] {
	border-left-color: var(--wp--preset--color--secondary);
}

.troop-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 1.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
}

.troop-faq summary::-webkit-details-marker {
	display: none;
}

.troop-faq summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.35rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	transition: transform 0.2s ease;
}

.troop-faq details[open] summary::after {
	transform: rotate(45deg);
}

.troop-faq summary:hover {
	color: var(--wp--preset--color--primary);
}

.troop-faq details > :not(summary) {
	padding: 0 1.25rem;
	margin-block-start: 0 !important;
}

.troop-faq details > :last-child {
	padding-bottom: 1.15rem;
}

/* ============================================================
   ADVANCEMENT TRAIL
   The seven ranks as stops on a trail: gold markers on a vertical line.
   ============================================================ */

.troop-trail {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.troop-trail::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: var(--wp--preset--color--tertiary);
}

.troop-trail li {
	position: relative;
	padding: 0 0 1.6rem 3rem;
}

.troop-trail li:last-child {
	padding-bottom: 0;
}

.troop-trail li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 3px solid var(--wp--preset--color--primary);
}

.troop-trail li:last-child::before {
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
}

.troop-trail .rank {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 700;
	display: block;
	margin-bottom: 0.2rem;
}

.troop-trail p {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* ============================================================
   YOUTH LEADERSHIP ORG CHART
   The standard Scouts BSA structure as a hoverable chart. On hover-capable
   devices each position reveals its responsibilities in a tooltip card; on
   touch devices the description renders inline, and keyboard focus reveals
   it everywhere.
   ============================================================ */

.troop-org {
	margin-top: 1.5rem;
}

.troop-org__tier {
	display: grid;
	gap: 0.75rem;
	justify-content: center;
}

.troop-org__tier--one {
	grid-template-columns: minmax(220px, 340px);
}

.troop-org__tier--two {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.troop-org__tier--two > .troop-org__node {
	flex: 0 1 240px;
	min-width: 184px;
}

.troop-org__tier--three {
	grid-template-columns: repeat(auto-fit, minmax(160px, 200px));
}

.troop-org__stem {
	width: 2px;
	height: 22px;
	background: var(--wp--preset--color--tertiary);
	margin: 0.4rem auto;
}

.troop-org__rowlabel {
	text-align: center;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.75rem;
}

.troop-org__node {
	box-sizing: border-box;
	position: relative;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--tertiary);
	border-top: 3px solid var(--wp--preset--color--primary);
	border-radius: 6px;
	padding: 0.85rem 1rem;
	text-align: center;
	transition: border-top-color 0.18s ease, transform 0.18s ease;
}

/* Patch-style badge medallion: embroidered-border look via a gold ring. */
.troop-org__badge {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--tertiary);
	border: 2px solid var(--wp--preset--color--secondary);
	display: grid;
	place-items: center;
	margin: 0 auto 0.55rem;
}

.troop-org__badge svg {
	width: 24px;
	height: 24px;
	stroke: var(--wp--preset--color--primary);
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.troop-org__node--spl .troop-org__badge {
	width: 54px;
	height: 54px;
	background: var(--wp--preset--color--primary-dark);
}

.troop-org__node--spl .troop-org__badge svg {
	stroke: var(--wp--preset--color--secondary);
	width: 28px;
	height: 28px;
}

.troop-org__node .t {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
}

.troop-org__node .k {
	display: block;
	margin-top: 3px;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.troop-org__node--spl {
	border-top-color: var(--wp--preset--color--secondary);
	box-shadow: 0 2px 6px rgba(28, 35, 33, 0.07), 0 8px 20px rgba(28, 35, 33, 0.06);
}

/* Hover-capable devices: description becomes a tooltip card. */
@media (hover: hover) {
	.troop-org__node .d {
		position: absolute;
		top: calc(100% + 10px);
		left: 50%;
		transform: translateX(-50%) translateY(6px);
		width: min(320px, 82vw);
		background: var(--wp--preset--color--primary-dark);
		color: var(--wp--preset--color--tertiary);
		text-align: left;
		font-size: 0.9375rem;
		line-height: 1.5;
		padding: 0.8rem 1rem;
		border-radius: 6px;
		box-shadow: 0 12px 28px rgba(28, 35, 33, 0.3);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
		z-index: 30;
		pointer-events: none;
	}

	.troop-org__node .d::before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		border: 7px solid transparent;
		border-bottom-color: var(--wp--preset--color--primary-dark);
	}

	.troop-org__node:hover,
	.troop-org__node:focus,
	.troop-org__node:focus-within {
		border-top-color: var(--wp--preset--color--secondary);
		transform: translateY(-2px);
		z-index: 40;
	}

	.troop-org__node:hover .d,
	.troop-org__node:focus .d,
	.troop-org__node:focus-within .d {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}
}

/* Touch devices: no hover exists, so descriptions render inline. */
@media (hover: none) {
	.troop-org__node {
		text-align: left;
	}

	.troop-org__badge {
		margin: 0 0 0.55rem;
	}

	.troop-org__node .d {
		display: block;
		margin-top: 0.5rem;
		font-size: 0.9rem;
		line-height: 1.5;
		color: var(--wp--preset--color--muted);
	}
}

/* ============================================================
   MERIT BADGE SLIDER
   The Eagle-required badges as a scroll-snap strip. Pure CSS: swipe or
   scroll on any device, tab through the links on a keyboard.
   ============================================================ */

.troop-mb {
	position: relative;
	margin-top: 1.5rem;
}

.troop-mb__track {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 4px 4px 1rem;
	scrollbar-color: var(--wp--preset--color--primary) var(--wp--preset--color--tertiary);
}

.troop-mb__card {
	box-sizing: border-box;
	flex: 0 0 182px;
	scroll-snap-align: start;
	display: block;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--tertiary);
	border-top: 3px solid var(--wp--preset--color--primary);
	border-radius: 6px;
	padding: 1rem 0.9rem 0.95rem;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: transform 0.18s ease, border-top-color 0.18s ease, box-shadow 0.18s ease;
}

.troop-mb__card:hover,
.troop-mb__card:focus-visible {
	color: var(--wp--preset--color--contrast);
	border-top-color: var(--wp--preset--color--secondary);
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(28, 35, 33, 0.13);
}

.troop-mb__badge {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--tertiary);
	border: 2px solid var(--wp--preset--color--secondary);
	display: grid;
	place-items: center;
	margin: 0 auto 0.6rem;
}

.troop-mb__badge svg {
	width: 28px;
	height: 28px;
	stroke: var(--wp--preset--color--primary);
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.troop-mb__name {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.25;
}

.troop-mb__chip {
	display: inline-block;
	margin-top: 0.45rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--secondary);
	border-radius: 999px;
	padding: 2px 9px;
}

/* Right-edge fade hints that the strip keeps going. */
.troop-mb::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 1rem;
	width: 48px;
	background: linear-gradient(to right, transparent, var(--wp--preset--color--base));
	pointer-events: none;
}

.troop-mb__hint {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	text-align: right;
}

/* ============================================================
   CALENDAR SUBSCRIBE
   ============================================================ */

.troop-subscribe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}

.troop-subscribe a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.35rem;
	border: 2px solid var(--wp--preset--color--tertiary);
	border-radius: 6px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.troop-subscribe a:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--primary);
}

.troop-subscribe .sub-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.troop-subscribe .sub-note {
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.troop-subscribe .arrow {
	flex: none;
	font-size: 1.25rem;
	color: var(--wp--preset--color--primary);
}

/* ============================================================
   PHOTO BANDS
   Licensed, people-free imagery. Fixed aspect crops keep mixed
   orientations in one clean line; radius and shadow match the cards.
   ============================================================ */

.troop-photostrip .wp-block-image,
.troop-photogrid .wp-block-image {
	margin: 0;
}

.troop-photostrip img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(28, 35, 33, 0.07), 0 8px 20px rgba(28, 35, 33, 0.06);
}

.troop-photogrid img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
}

.troop-photowide img {
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(28, 35, 33, 0.07), 0 8px 20px rgba(28, 35, 33, 0.06);
}

@media (max-width: 600px) {
	.troop-photowide img {
		aspect-ratio: 16 / 10;
	}
}

/* ============================================================
   MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.troop-card,
	.troop-card::before,
	.troop-events__item,
	.troop-law li,
	.troop-subscribe a,
	.troop-org__node,
	.troop-org__node .d,
	.troop-faq summary::after {
		transition: none;
	}

	.troop-card:hover,
	.troop-card:focus-within,
	.troop-events__item:hover,
	.troop-org__node:hover,
	.troop-org__node:focus-within {
		transform: none;
	}

	.troop-scene .fire-glow {
		animation: none;
	}
}