/*
 * mySussex design tokens (04_DESIGN_SYSTEM.md §9).
 * Define once here; reference everywhere. A future county clone re-themes
 * by swapping the brand hues in this block only.
 *
 * Usage rules: forest for text/UI (AAA on white); lime is accent/decoration
 * ONLY — never body text (fails contrast); amber is reserved for affiliate
 * "Book/Reserve" CTAs so they stand apart from green editorial links.
 */
:root {
	/* Brand (from logo) */
	--ms-forest:      #006800;
	--ms-forest-dark: #004D00;
	--ms-lime:        #8DB600;
	--ms-lime-tint:   #EAF1D6;
	--ms-amber:       #E08A2B;

	/* Neutrals */
	--ms-ink:     #1F2421;
	--ms-bg:      #F7F6F2;
	--ms-surface: #FFFFFF;
	--ms-border:  #D9D6CE;

	/* Type */
	--ms-font-head: "Poppins", system-ui, sans-serif;
	--ms-font-body: "Inter", system-ui, sans-serif;

	/* Rhythm */
	--ms-radius:      10px;
	--ms-radius-card: 12px;
}

body {
	font-family: var(--ms-font-body);
	color: var(--ms-ink);
	background-color: var(--ms-bg);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ms-font-head);
	color: var(--ms-forest);
}

a {
	color: var(--ms-forest);
}

a:hover, a:focus {
	color: var(--ms-forest-dark);
}

/* ---- Listing card (image-optional: band + type carry the design) ---- */
.ms-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.ms-card {
	background: var(--ms-surface);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-card);
	overflow: hidden;
}

.ms-card--featured {
	border: 2px solid var(--ms-lime);
}

.ms-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ms-card__band {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 1rem;
	background: var(--ms-forest);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ms-card--featured .ms-card__band {
	background: var(--ms-forest-dark);
}

.ms-card__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.ms-card__body {
	padding: 1rem;
}

.ms-card__title {
	margin: 0 0 0.25rem;
	font-size: 1.15rem;
}

.ms-card__tagline {
	margin: 0;
	color: var(--ms-ink);
	font-size: 0.9rem;
}

.ms-badge {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	background: var(--ms-lime);
	color: var(--ms-ink);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---- Single listing ---- */
.ms-eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ms-listing__title {
	margin: 0 0 0.25rem;
}

.ms-listing__tagline {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	color: var(--ms-ink);
}

.ms-listing__image img {
	border-radius: var(--ms-radius-card);
	height: auto;
}

.ms-note {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: var(--ms-lime-tint);
	border-left: 4px solid var(--ms-lime);
	border-radius: var(--ms-radius);
}

.ms-note__title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.ms-cta {
	margin: 1.5rem 0;
}

.ms-btn {
	display: inline-block;
	padding: 0.65rem 1.4rem;
	border-radius: var(--ms-radius);
	font-family: var(--ms-font-head);
	font-weight: 600;
	text-decoration: none;
}

.ms-btn--amber {
	background: var(--ms-amber);
	color: #fff;
}

.ms-btn--amber:hover,
.ms-btn--amber:focus {
	background: #C77A24;
	color: #fff;
}

.ms-disclosure {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	color: var(--ms-ink);
	opacity: 0.8;
}

.ms-facts {
	margin: 1.5rem 0;
	padding: 1.25rem;
	background: var(--ms-surface);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-card);
}

.ms-facts__title {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
}

.ms-facts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-facts__list li {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--ms-border);
}

.ms-facts__list li:last-child {
	border-bottom: 0;
}

/* Fixed aspect ratio so the Leaflet map causes no layout shift while it loads */
.ms-map {
	margin: 1.5rem 0;
	aspect-ratio: 16 / 9;
	border-radius: var(--ms-radius-card);
	overflow: hidden;
}

.ms-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.75rem;
}

.ms-gallery__grid img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ms-radius);
}

.ms-related {
	margin: 2rem 0 1rem;
	padding: 1.25rem;
	background: var(--ms-lime-tint);
	border-radius: var(--ms-radius-card);
}

.ms-related__title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
}

/* ---- Guide: typographic hero (image optional) ---- */
.ms-hero {
	margin: 0 0 1.5rem;
	padding: 2rem 1.5rem;
	background: var(--ms-lime-tint);
	border-radius: var(--ms-radius-card);
}

.ms-hero__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.ms-hero__intro {
	max-width: 65ch;
	font-size: 1.05rem;
}

.ms-hero__intro > :last-child {
	margin-bottom: 0;
}

.ms-hero__meta {
	margin: 0.75rem 0 0;
	font-size: 0.95rem;
}

.ms-guide__image img {
	border-radius: var(--ms-radius-card);
	height: auto;
}

.ms-jump {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-card);
	background: var(--ms-surface);
}

.ms-jump__title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.ms-jump__list {
	margin: 0;
	padding-left: 1.25rem;
}

.ms-jump__list li {
	padding: 0.15rem 0;
}

.ms-guide-map {
	height: 420px;
	margin: 1.5rem 0;
	border-radius: var(--ms-radius-card);
	overflow: hidden;
}

.ms-stops__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ms-stop;
	display: grid;
	gap: 1.25rem;
}

.ms-stops__item {
	counter-increment: ms-stop;
	position: relative;
	padding-left: 2.75rem;
}

.ms-stops__item::before {
	content: counter(ms-stop);
	position: absolute;
	left: 0;
	top: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ms-forest);
	color: #fff;
	border-radius: 50%;
	font-family: var(--ms-font-head);
	font-weight: 700;
}

.ms-faq__item {
	margin: 0 0 0.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	background: var(--ms-surface);
}

.ms-faq__item summary {
	cursor: pointer;
	font-family: var(--ms-font-head);
	font-weight: 600;
	color: var(--ms-forest);
}

.ms-faq__answer {
	padding-top: 0.5rem;
}

/* ---- Homepage hub ---- */
.ms-home-hero {
	margin: 0 0 2rem;
	padding: 2.5rem 1.5rem;
	background: var(--ms-lime-tint);
	border-radius: var(--ms-radius-card);
	text-align: center;
}

.ms-home-hero__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.9rem, 5vw, 2.75rem);
}

.ms-home-hero__tagline {
	margin: 0;
	font-size: 1.1rem;
}

.ms-section {
	margin: 0 0 2.5rem;
}

.ms-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}

.ms-section__title {
	margin: 0;
}

.ms-section__more {
	font-weight: 600;
	white-space: nowrap;
}

/* ---- Homepage category grid (image-optional: typographic, lime-tint fill) ---- */
.ms-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.75rem;
}

.ms-category-card {
	display: block;
	padding: 1rem;
	background: var(--ms-lime-tint);
	border-radius: var(--ms-radius);
	color: var(--ms-forest);
	font-family: var(--ms-font-head);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.ms-category-card:hover,
.ms-category-card:focus {
	background: var(--ms-lime);
	color: var(--ms-forest-dark);
}

.ms-cta-band {
	margin: 0 0 2rem;
	padding: 2rem 1.5rem;
	background: var(--ms-forest);
	border-radius: var(--ms-radius-card);
	text-align: center;
	color: #fff;
}

.ms-cta-band__title {
	margin: 0 0 0.5rem;
	color: #fff;
}

.ms-cta-band__text {
	margin: 0 auto 1rem;
	max-width: 55ch;
}

/* ---- Filter bar (Claude Design pass, option 1a: labeled card) ---- */
.ms-filter {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin: 0 0 1.5rem;
	padding: 0.9rem 1rem;
	background: var(--ms-surface);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-card);
}

.ms-filter__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.ms-filter__eyebrow {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ms-ink);
	opacity: 0.55;
}

.ms-filter__reset {
	font-size: 0.8rem;
	font-weight: 600;
	text-underline-offset: 2px;
}

.ms-filter__row {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* Visually hidden but accessible field name (the select's own first
   option, e.g. "All towns", carries the visible label). */
.ms-filter__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ms-filter__field {
	position: relative;
	display: block;
}

.ms-filter__field::after {
	content: "\25BE";
	position: absolute;
	right: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.7rem;
	color: var(--ms-ink);
	opacity: 0.45;
	pointer-events: none;
}

.ms-filter__field select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 46px;
	padding: 0 2.1rem 0 0.9rem;
	background: var(--ms-surface);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	color: var(--ms-ink);
	font-family: inherit;
	font-size: 0.95rem;
}

.ms-filter__field.is-active select {
	background: var(--ms-lime-tint);
	border: 1.5px solid var(--ms-forest);
	font-weight: 600;
}

.ms-filter__field.is-active::after {
	color: var(--ms-forest);
	opacity: 1;
}

.ms-btn--forest {
	background: var(--ms-forest);
	color: #fff;
}

.ms-btn--forest:hover,
.ms-btn--forest:focus {
	background: var(--ms-forest-dark);
	color: #fff;
}

.ms-filter__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 1.2rem;
}

@media (min-width: 700px) {
	.ms-filter__row {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
	}

	/* flex-basis (not just flex:1) so a field never gets squeezed
	   narrower than its longest option text can comfortably show —
	   the row wraps to a second line instead of truncating selects. */
	.ms-filter__field {
		flex: 1 1 160px;
	}

	.ms-filter__field select {
		height: 44px;
		font-size: 0.9rem;
	}

	.ms-filter__submit {
		flex: none;
		height: 44px;
	}
}

/* ---- Knowledge catalog: status, highlights, freshness ---- */
/* Claude Design pass: status badge = option 1e, closed banner = 1i,
   highlights = 1m, freshness line = 1n. */

/* Derived record_status label — hollow pill + dot reads "state",
   distinct from the solid-lime Featured pill which reads "promo". */
.ms-badge--status {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--ms-surface);
	border: 1px solid var(--ms-border);
	color: var(--ms-ink);
}

.ms-badge--status::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--ms-forest);
}

/* Permanently-closed notice on single listings; the record stays
   published for continuity, the banner keeps it honest and offers an
   escape hatch to open alternatives instead of a dead end. */
.ms-status-banner {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin: 0 0 1.25rem;
	padding: 0.9rem 1rem;
	background: var(--ms-bg);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius-card);
}

.ms-status-banner__icon {
	flex: none;
	margin-top: 0.15rem;
	color: var(--ms-ink);
}

.ms-status-banner__title {
	margin: 0;
	font-family: var(--ms-font-head);
	font-weight: 600;
	font-size: 0.95rem;
}

.ms-status-banner__text {
	margin: 0.2rem 0 0;
	font-size: 0.85rem;
	color: var(--ms-ink);
	opacity: 0.7;
}

.ms-status-banner__link {
	display: inline-block;
	margin-top: 0.3rem;
	font-weight: 600;
	font-size: 0.85rem;
}

/* Top-3 editorial highlights — no container (Editor's Note already owns
   the lime-tint "card" treatment just above; stacking a second tinted
   panel here would read as two green boxes in a row). Diamond ticks +
   larger Poppins lines carry it typographically instead. */
.ms-highlights {
	margin: 1.5rem 0;
}

.ms-highlights__eyebrow {
	margin: 0 0 0.85rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ms-ink);
	opacity: 0.5;
}

.ms-highlights__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.ms-highlights__list li {
	position: relative;
	padding-left: 1.35rem;
	font-family: var(--ms-font-head);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.4;
}

.ms-highlights__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	background: var(--ms-lime);
	transform: rotate(45deg);
}

/* Selective public freshness line: a divider + quiet check glyph at the
   bottom of the facts panel. */
.ms-freshness {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.75rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--ms-border);
	font-size: 0.8rem;
	color: var(--ms-ink);
	opacity: 0.65;
}

.ms-freshness__icon {
	flex: none;
	color: var(--ms-forest);
}

.ms-facts__note {
	display: block;
	font-size: 0.9em;
	opacity: 0.8;
}

/* Per-stop editorial note under the stop card in guides. */
.ms-stops__note {
	margin: 0.5rem 0 0 0.25rem;
	padding: 0.6rem 1rem;
	background: var(--ms-lime-tint);
	border-radius: var(--ms-radius);
	font-size: 0.95rem;
}