/* ==========================================================================
   100th Salford (St Luke's) Scout Group — New Starter Information site
   Colours, type and spacing follow the official UK Scouts brand palette,
   as used in the Bootscout WordPress theme this site's styling is based on.
   ========================================================================== */

@font-face {
	font-family: "Nunito Sans";
	src: url("../fonts/NunitoSans.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("../fonts/NunitoSans-Italic.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Official UK Scouts colour palette */
	--scout-purple: #7413dc;
	--scout-green: #25b755;
	--scout-forest-green: #205b41;
	--scout-blue: #006ddf;
	--scout-navy: #003982;
	--scout-teal: #088486;
	--scout-red: #ed3f23;
	--scout-orange: #ff912a;
	--scout-pink: #ffb4e5;
	--scout-yellow: #ffe627;
	--scout-section-green: #004a53;

	--white: #ffffff;
	--grey-5: #f2f2f2;
	--grey-20: #cccccc;
	--grey-40: #999999;
	--grey-60: #666666;
	--grey-80: #333333;
	--black: #000000;

	/* Section colours (matches official section branding) */
	--squirrels-colour: var(--scout-red);
	--beavers-colour: var(--scout-blue);
	--cubs-colour: var(--scout-green);
	--scouts-colour: var(--scout-section-green);
	--leadership-colour: var(--scout-purple);
	

	--primary: var(--scout-purple);
	--secondary: var(--scout-teal);

	--radius: 0.5rem;
	--max-width: 1100px;
	--header-height: 92px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--grey-80);
	line-height: 1.6;
	background: var(--white);
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: var(--secondary);
}

a:hover {
	color: var(--primary);
}

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

h1, h2, h3, h4 {
	font-weight: 800;
	line-height: 1.2;
	margin-top: 0;
}

h1 {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
}

h2 {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
}

h3 {
	font-size: 1.15rem;
}

p {
	margin-top: 0;
}

/* ---------------------------------------------------------------------- */
/* Site header                                                            */
/* ---------------------------------------------------------------------- */

.site-header {
	background: var(--white);
	border-bottom: 3px solid var(--primary);
	padding: 1rem 0;
	position: sticky;
	top: 0;
	z-index: 20;
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.site-title {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 0.75rem;
	text-decoration: none;
	width: auto;
	color: var(--grey-80);
}

.site-title img {
	grid-column: 1;
	grid-row: 1 / span 2;
	height: 44px;
	width: auto;
	max-width: none;
	object-fit: contain;
}

.site-title strong {
	grid-column: 2;
	grid-row: 1;
	font-size: 1.15rem;
	font-weight: 800;
}

.site-title span {
	grid-column: 2;
	grid-row: 2;
	font-size: 0.85rem;
	color: var(--grey-60);
}

@media (max-width: 500px) {
	.site-title img {
		height: 34px;
	}
}

.site-nav {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.site-nav a {
	text-decoration: none;
	font-weight: 700;
	color: var(--white);
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	font-size: 0.9rem;
}

.site-nav a.nav-squirrels { background: var(--squirrels-colour); }
.site-nav a.nav-beavers { background: var(--beavers-colour); }
.site-nav a.nav-cubs { background: var(--cubs-colour); }
.site-nav a.nav-scouts { background: var(--scouts-colour); }
.site-nav a.nav-leadership { background: var(--leadership-colour); }
.site-nav a.nav-home { background: var(--grey-80); }

.site-nav a:hover { opacity: 0.85; }

/* ---------------------------------------------------------------------- */
/* Hero                                                                   */
/* ---------------------------------------------------------------------- */

.hero {
	background: var(--primary);
	color: var(--white);
	padding: 3rem 0 2.5rem;
}

.hero h1 {
	color: var(--white);
	margin-bottom: 0.75rem;
}

.hero p {
	font-size: 1.1rem;
	max-width: 42em;
	opacity: 0.95;
}

.hero.section-hero {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 2.5rem 0;
}

.hero.section-hero img {
	height: 64px;
	width: auto;
}

/* ---------------------------------------------------------------------- */
/* Page jump nav (homepage, below hero)                                  */
/* ---------------------------------------------------------------------- */

.page-jump-nav {
	background: var(--grey-5);
	border-bottom: 1px solid var(--grey-20);
	padding: 0.75rem 0;
	scroll-margin-top: var(--header-height);
}

/* On narrow screens this collapses behind a "Jump to a section" button
   (toggled by js/blocks.js, which already has to run for this page's
   content to appear at all) so a long list of links doesn't push the
   page's real content down or overflow sideways. On wider screens it's
   always shown, laid out as the original single-row pill nav — see the
   min-width:801px block below. */
.jump-nav-toggle {
	font: inherit;
	font-weight: 800;
	font-size: 0.85rem;
	color: var(--grey-60);
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.jump-nav-toggle::after {
	content: "\25BE"; /* ▾ */
	font-size: 0.7rem;
	transition: transform 0.15s ease;
}

.jump-nav-toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.jump-nav-links {
	display: none;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.6rem;
	width: 100%;
}

.jump-nav-links.is-open {
	display: flex;
}

.jump-nav-links a {
	text-decoration: none;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--secondary);
	background: var(--white);
	border: 1px solid var(--grey-20);
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.jump-nav-links a:hover {
	background: var(--secondary);
	border-color: var(--secondary);
	color: var(--white);
}

@media (min-width: 801px) {
	.page-jump-nav .container {
		display: flex;
		align-items: center;
		gap: 0.65rem;
	}

	.jump-nav-toggle {
		cursor: default;
		pointer-events: none; /* always shown on desktop — nothing to toggle */
	}

	.jump-nav-toggle::after {
		content: ":";
	}

	.jump-nav-links {
		display: flex !important; /* always shown on desktop, regardless of toggle state */
		flex: 1 1 auto;
		min-width: 0; /* lets this flex item actually shrink/wrap instead of overflowing */
		margin-top: 0;
		width: auto;
	}
}

.back-to-top {
	margin: 1.75rem 0 0;
	text-align: right;
}

.back-to-top a {
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--grey-60);
}

.back-to-top a:hover {
	color: var(--primary);
}

/* ---------------------------------------------------------------------- */
/* Section logo picker (homepage)                                        */
/* ---------------------------------------------------------------------- */

.section-picker {
	padding: 2.5rem 0 3rem;
	background: var(--grey-5);
}

.section-picker h2 {
	text-align: center;
	margin-bottom: 0.4rem;
}

.section-picker .intro {
	text-align: center;
	color: var(--grey-60);
	max-width: 40em;
	margin: 0 auto 2rem;
}

.section-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.25rem;
}

.section-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	text-decoration: none;
	padding: 2rem 1.25rem;
	border-radius: var(--radius);
	color: var(--white);
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.section-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.section-card img {
	height: 48px;
	width: auto;
	margin-bottom: 0.25rem;
}

.section-card .age-range {
	font-weight: 700;
	font-size: 0.95rem;
	opacity: 0.95;
}

.section-card.card-squirrels { background: var(--squirrels-colour); }
.section-card.card-beavers { background: var(--beavers-colour); }
.section-card.card-cubs { background: var(--cubs-colour); }
.section-card.card-scouts { background: var(--scouts-colour); }

/* ---------------------------------------------------------------------- */
/* Content sections                                                      */
/* ---------------------------------------------------------------------- */

.info-section {
	padding: 2.75rem 0;
	border-bottom: 1px solid var(--grey-20);
	scroll-margin-top: var(--header-height);
}

.info-section:nth-of-type(even) {
	background: var(--grey-5);
}

/* js/blocks.js renders sections into a wrapper div, so their :nth-of-type
   position resets relative to any static sections before them (e.g. the
   Section Contacts block) and would stripe incorrectly. Override it with
   explicit striping driven by each section's real position on the page. */
[data-sections-src] .info-section:nth-of-type(even) {
	background: var(--white);
}

[data-sections-src] .info-section.info-section--stripe {
	background: var(--grey-5);
}

.info-section .eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--secondary);
	margin-bottom: 0.4rem;
	display: block;
}

.info-section .icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	font-size: 1.3rem;
	margin-bottom: 0.75rem;
}

.two-col {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 2rem;
	align-items: start;
}

@media (max-width: 800px) {
	.two-col {
		grid-template-columns: 1fr;
	}
	.hero.section-hero {
		flex-direction: column;
		text-align: center;
	}
}

.checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.checklist li {
	position: relative;
	background: var(--white);
	border: 1px solid var(--grey-20);
	border-radius: var(--radius);
	padding: 0.75rem 1rem 0.75rem 2.35rem;
}

.info-section:nth-of-type(even) .checklist li,
.info-section--stripe .checklist li {
	background: var(--white);
}

.checklist li::before {
	content: "✓";
	color: var(--scout-green);
	font-weight: 800;
	position: absolute;
	left: 1rem;
	top: 0.75rem;
}

.card {
	background: var(--white);
	border: 1px solid var(--grey-20);
	border-radius: var(--radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
}

.card h3 {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.pill {
	display: inline-block;
	background: var(--grey-5);
	border-radius: 999px;
	padding: 0.2rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--grey-60);
	margin-bottom: 0.5rem;
}

.cost-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.cost-card {
	border-radius: var(--radius);
	padding: 1.25rem 1.5rem;
	color: var(--white);
}

.cost-card .amount {
	font-size: 2rem;
	font-weight: 800;
	display: block;
}

.cost-card.squirrels { background: var(--squirrels-colour); }
.cost-card.other-sections { background: var(--primary); }

table.payment-details {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.5rem;
}

table.payment-details td {
	padding: 0.4rem 0.6rem;
	border-bottom: 1px solid var(--grey-20);
}

table.payment-details td:first-child {
	font-weight: 700;
	width: 40%;
	color: var(--grey-60);
}

.contact-card {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: var(--white);
	border: 1px solid var(--grey-20);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin-bottom: 0.85rem;
}

.contact-avatar {
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	font-weight: 800;
	font-size: 1.1rem;
}

.contact-card h4 {
	margin: 0 0 0.15rem;
	font-size: 1.05rem;
}

.contact-card .role {
	color: var(--grey-60);
	font-size: 0.85rem;
	margin-bottom: 0.35rem;
}

.contact-card a {
	font-weight: 700;
	text-decoration: none;
}

/* Team members — compact sub-cards nested under a lead's contact-card,
   for people with no direct contact info to publish. */
.team-members {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.5rem;
	margin: -0.35rem 0 0.85rem 1rem;
}

.contact-card--sub {
	gap: 0.65rem;
	padding: 0.55rem 0.85rem;
	margin-bottom: 0;
}

.contact-card--sub .contact-avatar {
	width: 2.25rem;
	height: 2.25rem;
	font-size: 0.85rem;
}

.contact-card--sub h4 {
	font-size: 0.95rem;
	margin-bottom: 0;
}

.contact-card--sub .role {
	font-size: 0.8rem;
	margin-bottom: 0;
}

.promise-box {
	border-left: 4px solid var(--primary);
	background: var(--grey-5);
	padding: 1.25rem 1.5rem;
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: italic;
	margin-bottom: 0.75rem;
}

.badge-image-wrap {
	background: var(--white);
	border: 1px solid var(--grey-20);
	border-radius: var(--radius);
	padding: 1rem;
	text-align: center;
}

.badge-image-wrap figcaption {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--grey-60);
}

.placeholder-note {
	background: #ffb4e5;
	border: 1px dashed var(--scout-orange);
	border-radius: var(--radius);
	padding: 0.85rem 1.1rem;
	color: #7a4a00;
	font-size: 0.92rem;
	margin-bottom: 1.25rem;
}

.callout {
	background: var(--scout-yellow);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.safety-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

@media (max-width: 800px) {
	.safety-grid { grid-template-columns: 1fr; }
	.cost-grid { grid-template-columns: 1fr; }
}

.safety-grid ul {
	padding-left: 1.1rem;
}

.ceop-logo {
	max-width: 150px;
	margin-top: 1rem;
}

.btn {
	display: inline-block;
	background: var(--primary);
	color: var(--white);
	text-decoration: none;
	font-weight: 700;
	padding: 0.6rem 1.3rem;
	border-radius: 999px;
}

.btn:hover {
	background: var(--scout-purple);
	opacity: 0.9;
	color: var(--white);
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */

.site-footer {
	background: var(--grey-80);
	color: var(--grey-20);
	padding: 2.5rem 0 2rem;
	font-size: 0.9rem;
}

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

.site-footer .footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2rem;
	margin-bottom: 1.5rem;
}

@media (max-width: 700px) {
	.site-footer .footer-grid { grid-template-columns: 1fr; }
}

.site-footer .credit {
	border-top: 1px solid #555;
	padding-top: 1rem;
	font-size: 0.8rem;
	color: var(--grey-40);
}

.section-jump {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

.section-jump a {
	text-decoration: none;
	color: var(--white);
	font-weight: 700;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	font-size: 0.85rem;
}

.section-jump a.jump-squirrels { background: var(--squirrels-colour); }
.section-jump a.jump-beavers { background: var(--beavers-colour); }
.section-jump a.jump-cubs { background: var(--cubs-colour); }
.section-jump a.jump-scouts { background: var(--scouts-colour); }