/*
 * Hyperlocal shared styles: fonts, derived tokens and the primitives every
 * block uses. Values come from the approved "All About {Town}" Design System.
 * A town theme sets only --hl-accent (and its mascot); everything else here
 * is fixed across towns. Block-specific CSS lives in each block's style.css.
 */

@font-face {
	font-family: "Public Sans";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url(fonts/public-sans-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Public Sans";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url(fonts/public-sans-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--hl-accent: #472363;
	--hl-tint: color-mix(in oklch, var(--hl-accent) 8%, white);
	--hl-tint-2: color-mix(in oklch, var(--hl-accent) 16%, white);
	--hl-deep: color-mix(in oklch, var(--hl-accent) 80%, black);
	--hl-gold: #e3b23c;
	--hl-gold-ink: #2a1f05;
	--hl-gold-tint: #fbf2dc;
	--hl-gold-text: #6b4e0a;
	--hl-gold-line: #e9c766;
	--hl-ink: #1d1b20;
	--hl-ink-2: #4f4a55;
	--hl-ink-3: #6e6874;
	--hl-line: #e7e4ea;
	--hl-line-2: #d9d5dd;
	--hl-surface: #f4f2f6;
	--hl-green: #24603f;
	--hl-green-tint: #e5f1e9;
	--hl-cream: #faf6ef;
	--hl-wrap: 1120px;
	--hl-gutter: 20px;
	--hl-radius-btn: 12px;
	--hl-radius-card: 16px;
	--hl-font: "Public Sans", system-ui, sans-serif;
}

/* Base ------------------------------------------------------------------ */

body {
	margin: 0;
	font-family: var(--hl-font);
	color: var(--hl-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

a {
	color: var(--hl-accent);
	text-underline-offset: 2px;
}

a:hover {
	color: var(--hl-deep);
}

button,
input,
select,
textarea {
	font-family: inherit;
}

/* Sections own their spacing: undo WordPress's blockGap between top-level blocks. */
:where(.wp-site-blocks) > *,
:where(.wp-block-post-content.is-layout-flow) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Material Symbols icon, rendered by hl_icon(). */
.hl-icon {
	font-family: "Material Symbols Rounded";
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "liga";
	flex: none;
}

.hl-icon--fill {
	font-variation-settings: "FILL" 1;
}

/* Layout ---------------------------------------------------------------- */

/* Content column: 1120 wide with a 20px minimum gutter, as in the design. */
.hl-wrap {
	padding-left: max(var(--hl-gutter), calc((100% - var(--hl-wrap)) / 2));
	padding-right: max(var(--hl-gutter), calc((100% - var(--hl-wrap)) / 2));
}

.hl-section {
	padding-top: 32px;
	padding-bottom: 32px;
}

@media (min-width: 900px) {
	.hl-section {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

.hl-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Type ------------------------------------------------------------------ */

.hl-display,
.hl-h1 {
	margin: 0;
	font-size: 28px;
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
}

@media (min-width: 900px) {
	.hl-display {
		font-size: 40px;
	}

	.hl-h1 {
		font-size: 36px;
	}
}

.hl-h2 {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.hl-title {
	font-size: 17px;
	line-height: 1.25;
	font-weight: 700;
}

.hl-body {
	font-size: 16px;
	line-height: 1.625;
}

.hl-small {
	font-size: 14px;
	line-height: 1.43;
	color: var(--hl-ink-2);
}

.hl-eyebrow {
	font-size: 13px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hl-ink-2);
}

.hl-meta {
	font-size: 12px;
	line-height: 1.3;
	color: var(--hl-ink-3);
}

.hl-lede {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--hl-ink-2);
}

/* Buttons --------------------------------------------------------------- */

.hl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 20px;
	border-radius: var(--hl-radius-btn);
	border: 0;
	background: var(--hl-accent);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.hl-btn:hover {
	background: var(--hl-deep);
	color: #fff;
}

.hl-btn .hl-icon {
	font-size: 20px;
}

.hl-btn--secondary {
	background: #fff;
	color: var(--hl-ink);
	border: 1px solid var(--hl-line-2);
}

.hl-btn--secondary:hover {
	background: var(--hl-surface);
	color: var(--hl-ink);
}

.hl-btn--gold {
	background: var(--hl-gold);
	color: var(--hl-gold-ink);
}

.hl-btn--gold:hover {
	background: #d6a530;
	color: var(--hl-gold-ink);
}

.hl-btn--dark {
	background: var(--hl-ink);
	color: #fff;
}

.hl-btn--block {
	width: 100%;
}

/* Category chip (big, with icon) and filter pill (small, on/off). */
.hl-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px 0 12px;
	border-radius: 999px;
	border: 1px solid #e1dde5;
	background: #fff;
	color: var(--hl-ink);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}

.hl-chip .hl-icon {
	color: var(--hl-accent);
}

.hl-pill {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid #e1dde5;
	background: #fff;
	color: var(--hl-ink);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.hl-pill.is-on,
.hl-pill[aria-pressed="true"],
.hl-pill[aria-current="page"] {
	background: var(--hl-accent);
	border-color: var(--hl-accent);
	color: #fff;
}

/* Tags, badges and flags ------------------------------------------------ */

/* Category tag: grey pill with a coloured dot (colour from hl_category_color()). */
.hl-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--hl-surface);
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: #3d3843;
	text-decoration: none;
}

.hl-tag__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hl-dot, var(--hl-ink-3));
	flex: none;
}

.hl-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border-radius: 8px;
	padding: 4px 9px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	background: var(--hl-tint);
	color: var(--hl-accent);
}

.hl-badge .hl-icon {
	font-size: 15px;
	font-variation-settings: "FILL" 1;
}

.hl-badge--green {
	background: var(--hl-green-tint);
	color: var(--hl-green);
}

.hl-flag {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hl-gold-text);
	background: var(--hl-gold-tint);
	border-radius: 6px;
	padding: 3px 7px;
	white-space: nowrap;
}

.hl-flag--today {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	background: var(--hl-accent);
	color: #fff;
}

.hl-flag--nearby {
	font-weight: 600;
	border-radius: 999px;
	padding: 4px 10px;
}

.hl-flag--home,
.hl-flag--away {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 4px 8px;
	border: 1.5px solid var(--hl-ink);
	background: var(--hl-ink);
	color: #fff;
}

.hl-flag--away {
	background: #fff;
	color: var(--hl-ink);
}

/* Source labels: every listing shows where it came from. */
.hl-source {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--hl-ink-3);
}

.hl-source .hl-icon {
	font-size: 15px;
}

.hl-source-block {
	background: var(--hl-tint);
	border-radius: 12px;
	padding: 12px 14px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.43;
}

.hl-source-block > .hl-icon {
	color: var(--hl-accent);
}

.hl-source-block__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hl-source-block__text strong {
	font-weight: 600;
}

.hl-source-block a {
	font-weight: 600;
}

/* Cards ----------------------------------------------------------------- */

.hl-card {
	background: #fff;
	border: 1px solid var(--hl-line);
	border-radius: var(--hl-radius-card);
}

/* Date tile: accent square with weekday over day number. */
.hl-datetile {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 52px;
	border-radius: 10px;
	background: var(--hl-accent);
	color: #fff;
	flex: none;
	line-height: 1;
}

.hl-datetile__dow {
	font-size: 12px;
	font-weight: 700;
}

.hl-datetile__day {
	font-size: 20px;
	font-weight: 800;
	margin-top: 3px;
}

.hl-datetile--ink {
	background: var(--hl-ink);
}

/* Photo placeholder: diagonal stripes, used until a real photo exists. */
.hl-photo-ph {
	background: repeating-linear-gradient(135deg, #efecf2 0 8px, #f7f5f8 8px 16px);
}

/* Form fields. */
.hl-input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border-radius: var(--hl-radius-btn);
	border: 1px solid var(--hl-line-2);
	background: #fff;
	color: var(--hl-ink);
	font-size: 16px;
}

textarea.hl-input {
	height: auto;
	min-height: 120px;
	padding: 12px 14px;
	line-height: 1.5;
}

.hl-input:focus {
	outline: 2px solid var(--hl-accent);
	outline-offset: 1px;
}

.hl-label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 6px;
}

/* Visually hidden, still read by screen readers. */
.hl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Editor-only notice for an empty block (hl_empty_notice()). */
.hl-empty-notice {
	margin: 0;
	padding: 16px;
	border: 1px dashed var(--hl-line-2);
	border-radius: 12px;
	color: var(--hl-ink-3);
	font-size: 14px;
}

/* gm8-base sets overflow-x:hidden here, which stops the sticky header sticking; clip does the same job without that. */
.wp-site-blocks {
	overflow-x: clip;
}