/*
Theme Name: FolkCalendar
Theme URI: https://folkcalendar.org
Description: A simple, mobile-first theme for the FolkCalendar listings platform. Session and venue pages, upcoming-dates feeds, and widget areas for ads. Requires the FolkCalendar and FolkCalendar: Sessions plugins.
Version: 0.1.5
Requires at least: 6.4
Requires PHP: 8.1
Author: FolkCalendar
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: folkcalendar
*/

/* ==========================================================================
   1. Design tokens
   Change these and the whole theme follows. Colours are the main lever; the
   dark palette below only needs to override the colour tokens.
   ========================================================================== */

:root {
	/* Surfaces and text */
	--fc-bg: #f7f1e3;          /* page: warm cream */
	--fc-surface: #fffdf8;     /* cards */
	--fc-ink: #2a221b;         /* body text */
	--fc-muted: #6b5f52;       /* secondary text */
	--fc-line: #e3d8c2;        /* borders */

	/* Brand */
	--fc-primary: #24513a;     /* bottle green: header, hero, date chips */
	--fc-on-primary: #f7f1e3;
	--fc-link: #24513a;
	--fc-tint: #e2eee4;        /* pale green: time blocks */
	--fc-on-tint: #1b3d2b;

	/* Accent: buttons, "next up" highlight */
	--fc-accent: #e8a936;      /* harvest amber */
	--fc-on-accent: #2a221b;
	--fc-accent-tint: #fbefd2;

	/* Status */
	--fc-danger: #a23b3b;      /* cancelled */
	--fc-danger-tint: #f8e3e0;

	--fc-chip: #f0e8d4;

	/* Copies of tokens the find-sessions plugin CSS redeclares on .fc-find
	   (--fc-surface, --fc-muted, --fc-accent, --fc-radius), under names it
	   does not touch, so section 10 can hand the theme's values back to it.
	   Follow the tokens above automatically, dark mode included. */
	--fc-card: var(--fc-surface);
	--fc-quiet: var(--fc-muted);
	--fc-amber: var(--fc-accent);
	--fc-round: var(--fc-radius);

	/* Shape and type */
	--fc-radius: 14px;
	--fc-gap: 16px;
	--fc-wrap: 44rem;
	--fc-shadow: 0 1px 2px rgba(42, 34, 27, 0.06);
	--fc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--fc-font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fc-bg: #16130f;
		--fc-surface: #211d17;
		--fc-ink: #f0e8d8;
		--fc-muted: #b8ac96;
		--fc-line: #3a3226;
		--fc-primary: #1c3f2c;
		--fc-on-primary: #f0e8d8;
		--fc-link: #93c9a4;
		--fc-tint: #24392b;
		--fc-on-tint: #d5ecdb;
		--fc-accent-tint: #3a2f17;
		--fc-danger: #ee8c85;
		--fc-danger-tint: #3b2321;
		--fc-chip: #2c261d;
		--fc-shadow: none;
	}
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--fc-bg);
	color: var(--fc-ink);
	font: 1rem/1.55 var(--fc-font);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--fc-link);
}

a:focus-visible,
summary:focus-visible,
button:focus-visible {
	outline: 3px solid var(--fc-accent);
	outline-offset: 2px;
}

h1,
h2,
h3 {
	margin: 0 0 0.5em;
	font-family: var(--fc-font-display);
	line-height: 1.2;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

address { font-style: normal; }

.wrap {
	width: 100%;
	max-width: var(--fc-wrap);
	margin-inline: auto;
	padding-inline: var(--fc-gap);
}

.site-main {
	padding-block: var(--fc-gap) 32px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 16px;
	clip-path: none;
	background: var(--fc-accent);
	color: var(--fc-on-accent);
	font-weight: 700;
}

/* ==========================================================================
   3. Header and footer
   ========================================================================== */

.site-header {
	background: var(--fc-primary);
	color: var(--fc-on-primary);
}

.site-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 16px;
	padding-block: 8px;
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: inherit;
	font-family: var(--fc-font-display);
	font-size: 1.4rem;
	font-weight: 700;
	text-decoration: none;
}

/* The accordion-calendar mark. The PNG is only a stencil: it is painted in
   the brand's text colour (currentcolor), so it follows the theme, dark mode
   included. Change its colour by setting `color` on .site-brand__mark. */
.site-brand__mark {
	display: none;
}

@supports (mask-image: url("x.png")) or (-webkit-mask-image: url("x.png")) {
	.site-brand__mark {
		display: block;
		flex: none;
		width: 38px;
		height: 38px;
		background: currentcolor;
		-webkit-mask: url("assets/img/logo-mark.png") center / contain no-repeat;
		mask: url("assets/img/logo-mark.png") center / contain no-repeat;
	}
}

.custom-logo {
	max-height: 40px;
	width: auto;
}

/* On a phone the nav takes its own full-width row under the brand and wraps
   onto further rows, each item stretching to fill its row, so any number of
   menu items fits without a sideways scroll. */
.site-nav {
	flex: 1 1 100%;
	min-width: 0;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav li {
	flex: 1 1 auto;
}

.site-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 999px;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a {
	background: rgba(255, 255, 255, 0.16);
}

.site-footer {
	padding-block: 24px 40px;
	border-top: 1px solid var(--fc-line);
	color: var(--fc-muted);
	font-size: 0.9rem;
}

.site-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.site-footer a {
	color: inherit;
}

.site-footer p {
	margin: 0;
}

/* ==========================================================================
   4. Shared components
   ========================================================================== */

.eyebrow {
	margin: 0 0 4px;
	color: var(--fc-muted);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lede {
	color: var(--fc-muted);
	font-size: 1.05rem;
}

.fc-panel {
	margin: 0 0 var(--fc-gap);
	padding: var(--fc-gap);
	background: var(--fc-surface);
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
	box-shadow: var(--fc-shadow);
}

.fc-panel > :last-child {
	margin-bottom: 0;
}

.fc-panel h2 {
	font-size: 1.15rem;
}

.fc-section-title {
	margin: 28px 0 12px;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 2px solid var(--fc-accent);
	border-radius: 999px;
	background: var(--fc-accent);
	color: var(--fc-on-accent);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.button--ghost {
	background: transparent;
	color: var(--fc-link);
	border-color: currentcolor;
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: var(--fc-gap) 0;
}

.button-row .button {
	flex: 1 1 9rem;
}

.fc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--fc-line);
	border-radius: 999px;
	background: var(--fc-chip);
	color: var(--fc-ink);
	font-size: 0.85rem;
	text-decoration: none;
}

/* A session's type is its one prominent chip; styles and tags stay quiet. */
.fc-chip--type {
	border-color: var(--fc-primary);
	background: var(--fc-primary);
	color: var(--fc-on-primary);
	font-weight: 700;
}

.fc-notice {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-left: 4px solid var(--fc-danger);
	border-radius: 8px;
	background: var(--fc-danger-tint);
	font-size: 0.95rem;
}

.fc-empty {
	padding: 24px 0;
	color: var(--fc-muted);
	text-align: center;
}

/* ==========================================================================
   5. Occurrence lists
   ========================================================================== */

.fc-list {
	display: grid;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.fc-row {
	position: relative;
	display: grid;
	grid-template-columns: 4.25rem 1fr;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
	background: var(--fc-surface);
	box-shadow: var(--fc-shadow);
}

.fc-row__when {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 6px 0;
	border-radius: 10px;
	background: var(--fc-tint);
	color: var(--fc-on-tint);
	line-height: 1.15;
}

.fc-row__start {
	font-size: 1.15rem;
	font-weight: 700;
}

.fc-row__end {
	font-size: 0.8rem;
	opacity: 0.8;
}

.fc-datechip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 6px 0;
	border-radius: 10px;
	background: var(--fc-primary);
	color: var(--fc-on-primary);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-transform: uppercase;
}

.fc-datechip strong {
	font-family: var(--fc-font-display);
	font-size: 1.5rem;
	letter-spacing: 0;
}

.fc-row__main {
	min-width: 0;
}

.fc-row__title {
	margin: 0;
	font-size: 1.1rem;
}

/* Whole card is tappable; inner links sit above the stretched link. */
.fc-row__title a {
	color: inherit;
	text-decoration: none;
}

.fc-row__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.fc-row__where,
.fc-row__time,
.fc-row__note {
	margin: 2px 0 0;
	color: var(--fc-muted);
	font-size: 0.95rem;
}

.fc-row__time {
	color: var(--fc-ink);
	font-weight: 600;
}

.fc-row__where a,
.fc-row__time a,
.fc-row .fc-chips {
	position: relative;
	z-index: 1;
}

.fc-row .fc-chips {
	margin-top: 8px;
}

.fc-row--cancelled {
	opacity: 0.85;
}

.fc-row--cancelled .fc-row__title a,
.fc-row--cancelled .fc-row__time {
	text-decoration: line-through;
	color: var(--fc-muted);
}

.fc-badge {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--fc-danger);
	color: var(--fc-surface);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Feed: one heading per day. */

.fc-feed__meta {
	margin: 0 0 4px;
	color: var(--fc-muted);
	font-size: 0.9rem;
}

.fc-day__title {
	position: sticky;
	top: 0;
	z-index: 2;
	margin: 0;
	padding: 12px 0 8px;
	background: var(--fc-bg);
	color: var(--fc-muted);
	font: 700 0.8rem/1.2 var(--fc-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fc-day--today .fc-day__title {
	color: var(--fc-link);
}

/* Dates list: month headings, collapsible tail. */

.fc-dates__month {
	margin: 16px 0 8px;
	color: var(--fc-muted);
	font: 700 0.8rem/1.2 var(--fc-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fc-dates > .fc-dates__month:first-child {
	margin-top: 0;
}

.fc-more > summary {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-bottom: 12px;
	border: 2px solid var(--fc-line);
	border-radius: 999px;
	color: var(--fc-link);
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.fc-more > summary::-webkit-details-marker {
	display: none;
}

.fc-more[open] > summary {
	display: none;
}

.fc-more-link {
	text-align: center;
}

/* ==========================================================================
   6. Session and venue pages
   ========================================================================== */

.fc-session > header,
.fc-venue > header {
	margin-bottom: var(--fc-gap);
}

.fc-facts {
	margin: 0 0 12px;
	color: var(--fc-muted);
	font-size: 1.05rem;
}

.fc-next {
	border-color: var(--fc-accent);
	background: var(--fc-accent-tint);
}

.fc-next__label {
	margin: 0 0 2px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fc-next__when {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: 1.35rem;
	line-height: 1.25;
}

.fc-where__name {
	margin: 0 0 4px;
	font-size: 1.15rem;
}

.fc-where__name a {
	color: inherit;
}

.fc-prose > * + * {
	margin-top: 1em;
}

.fc-prose img {
	border-radius: 8px;
}

.fc-definition {
	margin: 0;
}

.fc-definition dt {
	margin-top: 12px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fc-muted);
}

.fc-definition dd {
	margin: 2px 0 0;
}

/* Venue and generic cards */

.fc-card {
	position: relative;
	padding: 14px var(--fc-gap);
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
	background: var(--fc-surface);
	box-shadow: var(--fc-shadow);
}

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

.fc-card__title a {
	color: inherit;
	text-decoration: none;
}

.fc-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.fc-card__meta {
	margin: 2px 0 0;
	color: var(--fc-muted);
	font-size: 0.95rem;
}

/* Post content and pagination */

.entry-content > * + * {
	margin-top: 1em;
}

.alignleft { float: left; margin: 0 1em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1em; }
.aligncenter { display: block; margin-inline: auto; }

.navigation.pagination {
	margin-top: 24px;
}

.navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--fc-line);
	border-radius: 999px;
	background: var(--fc-surface);
	color: var(--fc-link);
	font-weight: 600;
	text-decoration: none;
}

.page-numbers.current {
	background: var(--fc-primary);
	border-color: var(--fc-primary);
	color: var(--fc-on-primary);
}

/* ==========================================================================
   7. Comments
   On a session page only (comments.php); the plugin keeps venue comments
   closed. WordPress's own markup, so the class names are its: .comment-body,
   .comment-meta, .children and so on.
   ========================================================================== */

.fc-comments {
	margin-top: 28px;
}

.fc-comments__title {
	margin: 0 0 var(--fc-gap);
}

.fc-comments__list,
.fc-comments .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fc-comments__list > li + li {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--fc-line);
}

/* A reply sits in from its parent, with a rule to follow back up the thread. */
.fc-comments .children {
	margin: 12px 0 0 12px;
	padding-left: 12px;
	border-left: 2px solid var(--fc-line);
}

.fc-comments .children > li + li {
	margin-top: 12px;
}

.comment-body {
	margin: 0;
}

.comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}

.comment-author .avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

/* "says:" earns nothing on a listings page and reads oddly aloud. */
.comment-author .says {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.comment-metadata {
	color: var(--fc-muted);
	font-size: 0.85rem;
}

.comment-metadata a {
	color: inherit;
}

.comment-content {
	margin: 0;
}

.comment-content p {
	margin: 0 0 8px;
}

.comment-content > :last-child {
	margin-bottom: 0;
}

/* Only its author sees this, and only until a moderator gets to it. */
.comment-awaiting-moderation {
	flex-basis: 100%;
	margin: 0;
	padding: 6px 12px;
	border-radius: 8px;
	background: var(--fc-accent-tint);
	color: var(--fc-ink);
	font-size: 0.85rem;
}

.comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

.bypostauthor > .comment-body .fn {
	color: var(--fc-primary);
}

.fc-comments__closed,
.fc-comments__note {
	margin: var(--fc-gap) 0 0;
	color: var(--fc-muted);
	font-size: 0.9rem;
}

/* ---- The form ---- */

.comment-respond {
	margin-top: var(--fc-gap);
	padding-top: var(--fc-gap);
	border-top: 1px solid var(--fc-line);
}

.fc-comments__list + .comment-respond {
	margin-top: 20px;
}

.comment-reply-title {
	margin: 0;
	font-size: 1.15rem;
}

.comment-reply-title small {
	margin-left: 8px;
	font-size: 0.85rem;
	font-weight: 400;
}

.comment-form p {
	margin: 12px 0 0;
}

.comment-form label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--fc-line);
	border-radius: 10px;
	background: var(--fc-bg);
	color: var(--fc-ink);
	font: inherit;
}

.comment-form textarea {
	min-height: 7rem;
	resize: vertical;
}

.comment-form input:focus-visible,
.comment-form textarea:focus-visible {
	outline: 2px solid var(--fc-primary);
	outline-offset: 1px;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.comment-form-cookies-consent input {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 2px;
	flex: 0 0 auto;
}

.comment-form-cookies-consent label {
	font-weight: 400;
}

.form-submit {
	margin-top: var(--fc-gap);
}

/* ==========================================================================
   8. Ad slots
   Widget areas (Appearance > Widgets). Each slot reserves its height so ads
   loading late do not shove the page around. Adjust the min-heights to the
   ad sizes you sell.
   ========================================================================== */

.fc-ad {
	max-width: var(--fc-wrap);
	margin: var(--fc-gap) auto;
	padding-inline: var(--fc-gap);
	text-align: center;
}

.site-main .fc-ad {
	padding-inline: 0;
}

.fc-ad__label {
	display: block;
	margin-bottom: 4px;
	color: var(--fc-muted);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fc-ad__unit {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;    /* 320x100 mobile banner */
	overflow: hidden;
}

.fc-ad--inline .fc-ad__unit {
	min-height: 250px;    /* 300x250 medium rectangle */
}

/* Only logged-in admins see the placeholder, so they can find the slots. */
.fc-ad--placeholder .fc-ad__unit {
	padding: 12px;
	border: 2px dashed var(--fc-line);
	border-radius: 10px;
	color: var(--fc-muted);
	font-size: 0.85rem;
}

/* ==========================================================================
   9. Maps (Leaflet; see inc/maps.php and assets/map.js)
   Hidden until JavaScript is available, so no empty box appears without it.
   ========================================================================== */

.fc-map {
	display: none;
	position: relative;
	z-index: 0;            /* contain Leaflet's own z-indexes below the sticky day headings */
	height: 220px;
	/* On a phone a map fills the width and one finger on it pans the map, not
	   the page. Generous space above, below and to each side leaves somewhere
	   to put a thumb and keep scrolling. Desktop resets this (section 10). */
	margin: 28px 20px;
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-radius);
	background: var(--fc-tint);
	overflow: hidden;
}

.js .fc-map {
	display: block;
}

.fc-map--large {
	height: 280px;
}

/* Inside a panel the panel's own padding already gives the sides room. */
.fc-where .fc-map {
	margin: 24px 0 20px;
}

.fc-map .leaflet-popup-content-wrapper,
.fc-map .leaflet-popup-tip {
	background: var(--fc-surface);
	color: var(--fc-ink);
}

.fc-popup {
	font: 0.95rem/1.4 var(--fc-font);
}

.fc-popup a {
	color: var(--fc-link);
}

.fc-popup ul {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.fc-popup li {
	padding: 3px 0;
}

/* Marker: a green teardrop with an amber dot. */
.fc-pin span {
	display: block;
	width: 28px;
	height: 28px;
	border: 3px solid var(--fc-surface);
	border-radius: 50% 50% 50% 0;
	background: var(--fc-primary);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	transform: rotate(-45deg);
}

.fc-pin span::after {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin: 6px;
	border-radius: 50%;
	background: var(--fc-accent);
}

/* ==========================================================================
   10. Plugin markup: [fc_find_sessions]
   The core plugin renders the find-sessions page with its own stylesheet and
   its own --fc-* variables scoped to .fc-find, which shadow the theme's
   same-named tokens. Everything here is prefixed .site-main so it outranks the
   plugin's single-class rules whatever order the stylesheets load in, and it
   reads the theme tokens through the aliases at the top of the file. The
   results become the same cards as the feed in section 5.
   ========================================================================== */

.site-main .fc-find {
	--fc-radius: var(--fc-round);
	--fc-border: var(--fc-line);
	--fc-muted: var(--fc-quiet);
	--fc-surface: var(--fc-card);
	--fc-accent: var(--fc-amber);
	--fc-accent-contrast: var(--fc-on-accent);
	--fc-cancelled: var(--fc-danger);
}

/* Form */

.site-main .fc-find__form {
	box-shadow: var(--fc-shadow);
}

.site-main .fc-find__field input,
.site-main .fc-find__field select {
	min-height: 44px;
	border-color: var(--fc-line);
	background: var(--fc-bg);
	color: var(--fc-ink);
}

.site-main .fc-find input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--fc-link);
}

.site-main .fc-find__checklist label {
	min-height: 40px;
}

.site-main .fc-find__filters summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--fc-link);
}

.site-main .fc-find__submit,
.site-main .fc-find__near-me {
	min-height: 48px;
	border-radius: 999px;
	font-weight: 700;
}

.site-main .fc-find__near-me {
	border: 2px solid currentcolor;
	background: transparent;
	color: var(--fc-link);
}

.site-main .fc-find__summary,
.site-main .fc-find__empty {
	color: var(--fc-quiet);
}

/* Results: a day heading, then one card per session. */

.site-main .fc-find__map {
	position: relative;
	z-index: 0;            /* contain Leaflet's z-indexes below the sticky day headings */
	margin: 12px 20px;     /* room to scroll past on a phone, as .fc-map */
	overflow: hidden;
	border-radius: var(--fc-round);
}

.site-main .fc-find__day {
	margin-bottom: 0;
}

.site-main .fc-find__day-heading {
	z-index: 2;
	margin: 0;
	padding: 12px 0 8px;
	border: 0;
	background: var(--fc-bg);
	color: var(--fc-quiet);
	font: 700 0.8rem/1.2 var(--fc-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-main .fc-find__list {
	display: grid;
	gap: 10px;
	margin: 0 0 20px;
}

/* Time on the left in the same tinted block as the feed, everything else to
   its right. The plugin prints "start – end" as one string, which wraps onto
   two lines in the block. */
.site-main .fc-find__result {
	position: relative;
	display: grid;
	grid-template-columns: 5.25rem 1fr;
	column-gap: 12px;
	align-items: start;
	padding: 12px;
	border: 1px solid var(--fc-line);
	border-radius: var(--fc-round);
	background: var(--fc-card);
	box-shadow: var(--fc-shadow);
}

.site-main .fc-find__result > * {
	grid-column: 2;
	min-width: 0;
}

.site-main .fc-find__result p {
	margin: 2px 0 0;
}

.site-main .fc-find__result-time {
	grid-column: 1;
	grid-row: 1 / span 5;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 8px 6px;
	border-radius: 10px;
	background: var(--fc-tint);
	color: var(--fc-on-tint);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

.site-main .fc-find__result-name {
	margin: 0;
	font-family: var(--fc-font-display);
	font-size: 1.1rem;
	line-height: 1.2;
}

/* Whole card is tappable; the venue link sits above the stretched link. */
.site-main .fc-find__result-name a {
	color: inherit;
	text-decoration: none;
}

.site-main .fc-find__result-name a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.site-main .fc-find__result-where a {
	position: relative;
	z-index: 1;
}

.site-main .fc-find__result--cancelled {
	opacity: 0.85;
}

.site-main .fc-find__result--cancelled .fc-find__result-name a,
.site-main .fc-find__result--cancelled .fc-find__result-time {
	color: var(--fc-quiet);
	text-decoration: line-through;
}

.site-main .fc-find__cancelled {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--fc-danger);
	color: var(--fc-card);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.site-main .fc-find__tags {
	gap: 6px;
	margin-top: 8px;
}

.site-main .fc-find__tags li {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border-color: var(--fc-line);
	background: var(--fc-chip);
	color: var(--fc-ink);
	font-size: 0.85rem;
}

/* Pagination and feed link */

.site-main .fc-find__page-link {
	justify-content: center;
	min-width: 44px;
	border: 2px solid var(--fc-line);
	border-radius: 999px;
	background: var(--fc-card);
	color: var(--fc-link);
	font-weight: 700;
	text-decoration: none;
}

/* ==========================================================================
   11. Larger screens
   ========================================================================== */

@media (min-width: 40rem) {
	h1 { font-size: 2.3rem; }

	.site-nav {
		flex: 0 1 auto;
	}

	.site-nav li {
		flex: 0 0 auto;
	}

	.fc-map {
		height: 260px;
		margin: 0 0 var(--fc-gap);
	}

	.fc-map--large { height: 360px; }

	.fc-where .fc-map {
		margin: 12px 0 0;
	}

	.site-main .fc-find__map {
		margin: 0;
	}

	.button-row .button {
		flex: 0 1 auto;
	}
}