/* Scout Post theme — main styles. Colours and type come from theme.json. */

:root {
	--sp-blue: var(--wp--preset--color--blue, #006EE0);
	--sp-navy: var(--wp--preset--color--navy, #04213F);
	--sp-yellow: var(--wp--preset--color--yellow, #FFE627);
	--sp-red: var(--wp--preset--color--red, #D6331B);
	--sp-green: var(--wp--preset--color--green, #1D8A43);
	--sp-ink: var(--wp--preset--color--ink, #1B2430);
	--sp-muted: var(--wp--preset--color--muted, #4A5566);
	--sp-line: var(--wp--preset--color--line, #DDE3EA);
	--sp-paper: var(--wp--preset--color--paper, #F4F7FB);
	--sp-radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
:focus-visible { outline: 3px solid var(--sp-yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--sp-navy); }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; z-index: 100000; background: #fff; padding: .75rem 1rem; }

/* ---------- Header ---------- */
.sp-header { background: #fff; border-bottom: 1px solid var(--sp-line); }
.sp-strip { background: var(--sp-navy); color: #fff; font-size: .875rem; }
.sp-strip__inner { padding-block: .45rem; gap: .25rem 1.5rem !important; }
.sp-strip p { margin: 0; }
.sp-strip a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.sp-strip a:hover { color: var(--sp-yellow); }
.sp-strip__by { opacity: .85; }
.sp-status { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.sp-status__dot { width: .55rem; height: .55rem; border-radius: 50%; background: #8FA3B8; flex: none; }
.sp-live .sp-status__dot { background: var(--sp-yellow); box-shadow: 0 0 0 3px rgba(255,230,39,.25); }

.sp-bar__inner { padding-block: .9rem; gap: 1rem; position: relative; }
.sp-brand { gap: .75rem; align-items: center; }
.sp-brand__logo img { display: block; height: 72px; width: auto; }
.sp-brand__title { margin: 0; font-size: 1.35rem; font-weight: 900; line-height: 1.05; letter-spacing: -.01em; }
.sp-brand__title a { color: var(--sp-navy); text-decoration: none; }
/* The logo already says "Inverness Scout Post", so the text title is only shown when there is no logo. */
.sp-brand:has(.sp-brand__logo img) .sp-brand__title { display: none; }
@media (max-width: 860px) { .sp-brand__logo img { height: 52px; } }

/* Menu: wide list on desktop, a <details> disclosure on small screens. No JavaScript. */
.sp-nav ul { list-style: none; margin: 0; padding: 0; }
.sp-nav a { display: block; color: var(--sp-ink); font-weight: 700; text-decoration: none; padding: .55rem .7rem; border-radius: 8px; }
.sp-nav a:hover { background: var(--sp-paper); color: var(--sp-blue); }
.sp-nav a[aria-current="page"] { color: var(--sp-blue); box-shadow: inset 0 -3px 0 var(--sp-blue); border-radius: 0; }
.sp-nav__list--wide { display: flex; gap: .15rem; flex-wrap: wrap; justify-content: flex-end; }
.sp-nav__toggle { display: none; }
.sp-nav__toggle summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; font-weight: 800; padding: .55rem .85rem; border: 2px solid var(--sp-line); border-radius: 8px; }
.sp-nav__toggle summary::-webkit-details-marker { display: none; }
.sp-nav__burger, .sp-nav__burger::before, .sp-nav__burger::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.sp-nav__burger::before, .sp-nav__burger::after { content: ""; position: absolute; left: 0; }
.sp-nav__burger::before { top: -6px; }
.sp-nav__burger::after { top: 6px; }
.sp-nav__toggle[open] .sp-nav__burger { background: transparent; }
.sp-nav__toggle[open] .sp-nav__burger::before { top: 0; transform: rotate(45deg); }
.sp-nav__toggle[open] .sp-nav__burger::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 860px) {
	.sp-nav__list--wide { display: none; }
	.sp-nav__toggle { display: block; }
	.sp-nav__list--mobile { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: #fff; border: 1px solid var(--sp-line); border-radius: 0 0 var(--sp-radius) var(--sp-radius); box-shadow: 0 12px 24px rgba(4,33,63,.12); padding: .5rem; }
	.sp-nav__list--mobile a { padding: .8rem 1rem; font-size: 1.05rem; }
	.sp-nav__list--mobile a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--sp-blue); }
	.sp-brand__title { font-size: 1.15rem; }
}

/* ---------- Page structure ---------- */
.sp-main { padding-bottom: var(--wp--preset--spacing--60); }
.sp-main--home { padding-bottom: 0; }
.sp-pagehead { background: var(--sp-paper); border-bottom: 1px solid var(--sp-line); padding-block: var(--wp--preset--spacing--50); margin-bottom: var(--wp--preset--spacing--50); }
.sp-pagehead h1 { margin: 0; }
.sp-body > * + h2 { margin-top: 2.5rem; }

/* ---------- Hero ---------- */
.sp-hero { background: var(--sp-navy); color: #fff; padding-block: var(--wp--preset--spacing--60) !important; position: relative; overflow: hidden; }
.sp-hero h1, .sp-hero h2 { color: #fff; }
.sp-hero h1 { margin-top: .25rem; }
.sp-hero .wp-block-column h1 { max-width: 16ch; }
.sp-hero a:not(.wp-element-button) { color: #fff; }
.sp-hero .sp-lead { font-size: var(--wp--preset--font-size--large); max-width: 38rem; opacity: .95; }
.sp-hero::after { /* airmail edge */
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
	background: repeating-linear-gradient(-45deg, var(--sp-red) 0 18px, #fff 18px 30px, var(--sp-blue) 30px 48px, #fff 48px 60px);
}
.sp-off .sp-hero::after { background: repeating-linear-gradient(-45deg, var(--sp-blue) 0 18px, #fff 18px 30px, var(--sp-yellow) 30px 48px, #fff 48px 60px); }
.sp-kicker { display: inline-block; font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-navy) !important; background: var(--sp-yellow); padding: .3rem .7rem; border-radius: 999px; margin: 0; }
.sp-hero .wp-block-button__link { background: var(--sp-yellow); color: var(--sp-navy); }
.sp-hero .wp-block-button__link:hover { background: #fff; color: var(--sp-navy); }
.sp-hero .is-style-outline .wp-block-button__link { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); }
.sp-hero .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--sp-navy); border-color: #fff; }
.sp-hero .wp-block-columns { align-items: center !important; gap: 2.5rem; }

/* The stamp: the real Inverness Scout Post stamp artwork. The text inside the block
   ("Scout Post 50p per card") stays in the page for screen readers and search, but is
   hidden visually because the picture replaces it. */
.sp-stamp {
	width: 100%; max-width: 440px; aspect-ratio: 16 / 9; margin-inline: auto; padding: 0 !important;
	position: relative; background: url("../images/scout-post-stamp-2026.webp") center / contain no-repeat;
	transform: rotate(-4deg); filter: drop-shadow(0 16px 24px rgba(0,0,0,.45));
}
.sp-stamp > .wp-block-group { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; }
.wp-block-column:has(> .sp-stamp) { width: 100%; }
@media (max-width: 781px) { .sp-stamp { max-width: 300px; transform: rotate(-3deg); margin-top: .5rem; } }

/* ---------- Sections ---------- */
.sp-section { padding-block: var(--wp--preset--spacing--60) !important; }
.sp-section + .sp-section { padding-top: 0 !important; }
.sp-band { background: var(--sp-paper); padding-block: var(--wp--preset--spacing--60) !important; }
.sp-section > h2:first-child, .sp-band h2:first-child { margin-top: 0; }
.sp-intro { color: var(--sp-muted); font-size: var(--wp--preset--font-size--large); }

/* Key facts */
.sp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.sp-facts__tile { background: #fff; border: 1px solid var(--sp-line); border-top: 5px solid var(--sp-blue); border-radius: var(--sp-radius); padding: 1.1rem 1.25rem; }
.sp-facts__tile:nth-child(3) { border-top-color: var(--sp-red); }
.sp-facts__tile p { margin: 0; }
.sp-facts__label { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--sp-muted); }
.sp-facts__value { font-size: 1.6rem; font-weight: 900; color: var(--sp-navy); line-height: 1.2; margin-top: .25rem !important; }
.sp-facts__note { color: var(--sp-muted); font-size: .95rem; margin-top: .3rem !important; }

/* Steps: an ordered list with big numbers */
ol.sp-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
ol.sp-steps > li { counter-increment: step; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 1.25rem; position: relative; }
ol.sp-steps > li::before { content: counter(step); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--sp-blue); color: #fff; font-weight: 900; font-size: 1.2rem; margin-bottom: .75rem; }
ol.sp-steps > li strong { display: block; color: var(--sp-navy); font-size: 1.1rem; margin-bottom: .2rem; }

/* Steps with photos */
.sp-stepgrid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; counter-reset: step; }
.sp-stepgrid > * { margin: 0 !important; }
.sp-step { counter-increment: step; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); overflow: hidden; display: flex; flex-direction: column; }
.sp-step > * { margin: 0 !important; }
.sp-step figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sp-step .sp-stamp-art img { object-fit: contain; background: var(--sp-paper); padding: 1.5rem; box-sizing: border-box; }
.sp-step h3 { padding: 1rem 1.25rem 0; font-size: 1.15rem; display: flex; align-items: center; gap: .6rem; }
.sp-step h3::before { content: counter(step); flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sp-blue); color: #fff; font-size: 1rem; }
.sp-step p { padding: .4rem 1.25rem 1.25rem; color: var(--sp-muted); }

/* Photos */
.sp-photo img { display: block; width: 100%; height: auto; border-radius: var(--sp-radius); }
.sp-photo figcaption, .sp-gallery figcaption { font-size: .9rem; color: var(--sp-muted); margin-top: .5rem; text-align: left; }
.sp-gallery { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.sp-gallery > * { margin: 0 !important; }
.sp-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sp-radius); }

/* Map (Google My Maps, loaded on request) */
.sp-map { margin: 0; }
.sp-map__frame { position: relative; aspect-ratio: 4 / 3; max-height: 560px; width: 100%; border-radius: var(--sp-radius); overflow: hidden; border: 1px solid var(--sp-line);
	background: var(--sp-paper) repeating-linear-gradient(45deg, transparent 0 22px, rgba(0,110,224,.05) 22px 44px); }
@media (min-width: 782px) { .sp-map__frame { aspect-ratio: 16 / 9; } }
.sp-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-map__cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .75rem; padding: 1.5rem; }
.sp-map__cover p { margin: 0; max-width: 30rem; }
.sp-map__lead { font-weight: 800; color: var(--sp-navy); font-size: 1.1rem; }
.sp-map__note { font-size: .85rem; color: var(--sp-muted); }
.sp-map__load { cursor: pointer; border: 0; }
.sp-map figcaption { font-size: .9rem; color: var(--sp-muted); margin-top: .5rem; }

/* Sponsor line (footer) */
.sp-sponsor { margin-top: 1.5rem; font-weight: 700; }

/* Callout */
.sp-note { background: #FFF9C7; border-left: 5px solid var(--sp-yellow); border-radius: 8px; padding: 1rem 1.25rem !important; }
.sp-note p { margin: 0; }
.sp-area { margin: 0; }

/* Stalls */
.sp-stalls { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.sp-stalls li { background: #fff; border: 1px solid var(--sp-line); border-radius: 10px; padding: .8rem 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; }
.sp-stalls strong { color: var(--sp-navy); }
.sp-stalls span { color: var(--sp-muted); font-weight: 700; }

/* Locations */
.sp-locations { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; align-items: start; }
.sp-locations__area { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 1rem 1.15rem; }
.sp-locations__area h3 { font-size: 1.05rem; margin: 0 0 .5rem; padding-bottom: .5rem; border-bottom: 2px solid var(--sp-paper); }
.sp-locations ul { list-style: none; margin: 0; padding: 0; }
.sp-locations li { padding: .55rem 0; border-top: 1px solid var(--sp-line); }
.sp-locations li:first-child { border-top: 0; }
.sp-locations__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .5rem; }
.sp-locations__head strong { color: var(--sp-ink); }
.sp-locations__tags { display: inline-flex; gap: .3rem; }
.sp-locations p { margin: .15rem 0 0; font-size: .95rem; color: var(--sp-muted); }
.sp-locations__notes { font-style: italic; }
.sp-tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .12rem .45rem; border-radius: 999px; white-space: nowrap; }
.sp-tag--stamps { background: #FDE8E4; color: #A5260F; }
.sp-tag--box { background: #E1EEFC; color: #0050A6; }

.sp-empty { background: #fff; border: 2px dashed var(--sp-line); border-radius: var(--sp-radius); padding: 1rem 1.25rem; color: var(--sp-muted); margin: 0; }

/* Thank you */
.sp-thanks__stats { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
/* Light tiles by default (About page); dark tiles inside the navy hero. */
.sp-thanks__stats li { background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 1rem 1.2rem; color: var(--sp-ink); }
.sp-thanks__num { display: block; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 1000; line-height: 1.05; color: var(--sp-blue); }
.sp-thanks__label { font-weight: 700; }
.sp-hero .sp-thanks__stats li { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.sp-hero .sp-thanks__num { color: var(--sp-yellow); }
.sp-thanks__msg { font-size: var(--wp--preset--font-size--large); max-width: 40rem; margin: 0; }

/* Call to action card */
.sp-cta { background: var(--sp-blue); color: #fff; border-radius: 16px; padding: clamp(1.5rem, 4vw, 2.5rem) !important; }
.sp-cta h2 { color: #fff; margin-top: 0; }
.sp-cta a:not(.wp-element-button) { color: #fff; }
.sp-cta .wp-block-button__link { background: var(--sp-yellow); color: var(--sp-navy); }
.sp-cta .wp-block-button__link:hover { background: #fff; color: var(--sp-navy); }

/* Contact list */
.sp-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.sp-body .sp-contact { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-block: 1.5rem; }
.sp-body .sp-contact li { background: var(--sp-paper); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 1rem 1.25rem; font-size: 1.1rem; font-weight: 700; }
.sp-contact__label { display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }

/* FAQ (core Details block) */
.wp-block-details { border: 1px solid var(--sp-line); border-radius: 10px; padding: .85rem 1.1rem; background: #fff; }
.wp-block-details + .wp-block-details { margin-top: .6rem; }
.wp-block-details summary { font-weight: 800; color: var(--sp-navy); cursor: pointer; }
.wp-block-details[open] summary { margin-bottom: .5rem; }

/* ---------- Footer ---------- */
.sp-footer { background: var(--sp-navy); color: #E4ECF5; padding-block: var(--wp--preset--spacing--50) 1.5rem; font-size: .95rem; }
.sp-footer a { color: #fff; }
.sp-footer a:hover { color: var(--sp-yellow); }
.sp-footer__logo { margin: 0 0 1rem; }
.sp-footer__logo img { display: block; width: 200px; max-width: 100%; height: auto; }
.sp-footer__name { font-weight: 900; font-size: 1.2rem; color: #fff; margin-bottom: .25rem; }
.sp-footer__h { color: #fff; font-size: .85rem !important; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .75rem; }
.sp-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.sp-footer__legal { border-top: 1px solid rgba(255,255,255,.15); padding-top: 1rem; margin-top: 2rem; font-size: .85rem; opacity: .8; }

/* Editor: make the season/holding wrapper visible while editing */
.sp-when-editor { outline: 2px dashed #8FA3B8; outline-offset: 6px; padding: 4px; }
.sp-when-editor.is-live { outline-color: var(--sp-red); }
.sp-when-editor.is-off { outline-color: var(--sp-blue); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media print { .sp-header, .sp-footer, .sp-hero::after { display: none; } }

/* Christmas snow (season site only, see assets/js/snow.js) */
.sp-snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.has-snow { position: relative; overflow: hidden; }
.has-snow > :not(.sp-snow) { position: relative; z-index: 1; }
.sp-live .sp-hero { background: radial-gradient(120% 90% at 85% 0%, #0A3566 0%, var(--sp-navy) 60%); padding-bottom: calc(var(--wp--preset--spacing--60) + 26px) !important; }
.sp-live .sp-hero::before { /* snow drift resting on the airmail edge */
	content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 26px; z-index: 1; pointer-events: none;
	background:
		radial-gradient(14% 70% at 4% 100%, #fff 99%, transparent 100%),
		radial-gradient(18% 95% at 17% 100%, #fff 99%, transparent 100%),
		radial-gradient(15% 60% at 31% 100%, #fff 99%, transparent 100%),
		radial-gradient(20% 100% at 46% 100%, #fff 99%, transparent 100%),
		radial-gradient(16% 70% at 61% 100%, #fff 99%, transparent 100%),
		radial-gradient(19% 90% at 76% 100%, #fff 99%, transparent 100%),
		radial-gradient(15% 65% at 90% 100%, #fff 99%, transparent 100%),
		radial-gradient(12% 80% at 100% 100%, #fff 99%, transparent 100%),
		linear-gradient(#fff, #fff) bottom / 100% 7px;
	background-repeat: no-repeat;
	filter: drop-shadow(0 -1px 2px rgba(0,0,0,.25));
}
@media (max-width: 600px) { .sp-live .sp-hero::before { height: 16px; } }