/**
 * Down County Events — front end.
 *
 * Designed to inherit the site's design rather than impose one.
 *
 * Three layers, in order of preference:
 *   1. WordPress global styles (theme.json) — --wp--preset--* variables, which
 *      block themes and Full Site Editing themes expose automatically.
 *   2. The surrounding page — font, text colour, and background are inherited,
 *      and greys are derived from the inherited text colour with color-mix()
 *      so the calendar adapts to a light or dark section without media queries.
 *   3. Plain fallback values, for classic themes that provide neither.
 *
 * To restyle, override the tokens on .dce-calendar. Nothing below hardcodes a
 * colour that a theme cannot displace.
 */

.dce-calendar {
	/* Typography comes from the page. */
	--dce-font: inherit;
	/* Twenty Twenty-Five publishes neither a "heading" nor a "body" slug, so
	   this must degrade to plain inheritance rather than assume one exists. */
	--dce-heading-font: var(--wp--preset--font-family--heading,
		var(--theme-font-family, var(--dce-font)));

	/* Divi sets heading colour globally; safe to adopt because Divi guarantees
	   it reads against the site background — that is what it is for. */
	--dce-heading-color: var(--gcid-heading-color, var(--dce-muted));

	/* Layout. */
	--dce-gap: 1.25rem;
	--dce-radius: 10px;

	/*
	 * Secondary text keeps the FULL inherited colour. Hierarchy comes from
	 * size and weight, not from lightening.
	 *
	 * Fading text toward the background is the usual trick, and it is unsafe
	 * on a theme whose body text already sits near the contrast floor. Divi's
	 * default body colour is #666 on white — 5.74:1, only just over AA.
	 * Fading that to 70% gives 3.04:1; even 85% only reaches 4.12:1. The
	 * lowest fade that stays compliant is 90%, which is not visibly muted at
	 * all. The technique buys nothing and costs legibility on exactly the
	 * themes that can least afford it.
	 *
	 * Soften it deliberately where the theme's body text has headroom:
	 *
	 *   .dce-calendar { --dce-muted: color-mix(in srgb, currentColor 70%, transparent); }
	 */
	--dce-muted: currentColor;

	/* Borders and tag fills are decorative surfaces rather than text, so
	   deriving them by transparency is safe. Plain values first, for browsers
	   without color-mix(). */
	--dce-border: #e2e5e9;
	--dce-tag-bg: #eef2f5;
	--dce-border: color-mix(in srgb, currentColor 16%, transparent);
	--dce-tag-bg: color-mix(in srgb, currentColor 7%, transparent);
	--dce-border: var(--theme-border-color, color-mix(in srgb, currentColor 16%, transparent));
	--dce-tag-bg: color-mix(in srgb, currentColor 7%, transparent);

	/*
	 * Accent — the date and time line.
	 *
	 * Defaults to currentColor, which is readable on any background by
	 * definition; the date is distinguished by weight rather than hue. Set
	 * this to your brand colour to add hue back:
	 *
	 *     .dce-calendar { --dce-accent: #1f5673; }
	 *
	 * Deliberately NOT taken from a block theme's "accent" preset. In the
	 * stock themes that slug is a decorative tint, not an action colour:
	 * Twenty Twenty-Four's is pale beige #cfcabe, and Twenty Twenty-Five has
	 * no "accent" slug at all (only accent-1..6: yellow, pink, purple).
	 * Pairing those with the theme's base colour measured 1.55:1.
	 */
	--dce-accent: currentColor;

	/*
	 * Divi is a classic theme: it publishes no --wp--preset--* variables at
	 * all, only its own global colours. Those are opt-in rather than
	 * automatic, because a brand colour is not guaranteed to meet contrast as
	 * small text — the site's own blue on downinthecounty.com measures 3.33:1.
	 * To adopt Divi's palette, uncomment in your child theme or Divi's custom
	 * CSS box, then check the result:
	 *
	 *     .dce-calendar { --dce-accent: var(--gcid-primary-color); }
	 *
	 * Divi's global colours are --gcid-primary-color, --gcid-secondary-color,
	 * --gcid-heading-color, and --gcid-body-color.
	 */

	/*
	 * The filter button is a ghost control by default: inherited text on the
	 * page background, which is the one colour pair every theme guarantees is
	 * readable, on light and dark alike.
	 *
	 * Both halves fall back TOGETHER. An earlier version took the background
	 * from one source and the text from another, so a theme publishing
	 * --wp--preset--color--base but not --contrast produced dark-on-dark at
	 * 2.26:1. Sourcing both from the same theme namespace makes the pair
	 * atomic: a theme that publishes one publishes the other.
	 */
	--dce-button-bg: var(--theme-button-background-initial-color, transparent);
	--dce-button-text: var(--theme-button-text-initial-color, inherit);

	/* Cards sit on the page background by default. */
	--dce-card-bg: transparent;

	font-family: var(--dce-font);
	color: inherit;
	container-type: inline-size;
}

/* Most themes define .screen-reader-text, but not all do, and a visible
   "Search events" label above the input looks like a bug. Scope our own. */

.dce-calendar .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Filters ---------------------------------------------------------------- */

.dce-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: var(--dce-gap);
}

.dce-filters .dce-field { flex: 0 1 auto; margin: 0; }
.dce-filters .dce-field--search { flex: 1 1 14rem; }

/* Inherit the theme's own form styling where it has any, and only fill in
   what is missing. Themes that style inputs will win on the visual details. */
.dce-filters input[type="search"],
.dce-filters select {
	width: 100%;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--dce-border);
	border-radius: var(--dce-radius);
	background-color: var(--dce-card-bg);
	color: inherit;
	font: inherit;
}

.dce-submit {
	padding: 0.5rem 1rem;
	border: 1px solid var(--dce-border);
	border-radius: var(--dce-radius);
	background-color: var(--dce-button-bg);
	color: var(--dce-button-text);
	font-weight: 600;
	font: inherit;
	line-height: 1.3;
	cursor: pointer;
}

.dce-clear {
	color: var(--dce-muted);
	font-size: 0.9em;
}

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

.dce-day-heading {
	margin: 1.5rem 0 0.5rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--dce-border);
	font-family: var(--dce-heading-font);
	font-size: 0.95em;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--dce-heading-color);
}

.dce-day-heading:first-child { margin-top: 0; }

.dce-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: var(--dce-gap);
	/* Size each card to its own content. Stretching them to match the tallest
	   in the row leaves a large void under the ones without a photo, and
	   whether an event has a photo varies row by row. */
	align-items: start;
}

/* Day headings must span the full grid row. */
.dce-grid .dce-day-heading { grid-column: 1 / -1; }

.dce-list .dce-event + .dce-event { margin-top: 0.75rem; }

/* Card ------------------------------------------------------------------- */

.dce-event {
	display: flex;
	gap: 1rem;
	padding: 1rem;
	border: 1px solid var(--dce-border);
	border-radius: var(--dce-radius);
	background-color: var(--dce-card-bg);
}

.dce-grid .dce-event { flex-direction: column; gap: 0.75rem; }

/*
 * Images are shown whole, never cropped.
 *
 * Community event imagery is very often a flyer rather than a photograph, and
 * a flyer carries its information as text inside the image. Cropping one to a
 * uniform tile cuts off the date, the price, or the venue — exactly the parts
 * a reader needs. So the default is to letterbox rather than crop: rows are
 * slightly less uniform, and nothing is destroyed.
 *
 * To trade that back for uniform tiles, set the two tokens:
 *
 *     .dce-calendar { --dce-image-fit: cover; --dce-image-height: 10rem; }
 */

.dce-calendar {
	--dce-image-fit: contain;
	--dce-image-height: auto;
	--dce-image-max-height: 11rem;
}

.dce-event__media {
	flex: 0 0 7rem;
	display: block;
	overflow: hidden;
	border-radius: calc(var(--dce-radius) - 3px);
	align-self: flex-start;
}

.dce-grid .dce-event__media {
	flex: 0 0 auto;
	width: 100%;
}

.dce-event__media img {
	display: block;
	width: 100%;
	height: var(--dce-image-height);
	max-height: var(--dce-image-max-height);
	object-fit: var(--dce-image-fit);
}

.dce-event__body { flex: 1 1 auto; min-width: 0; }

.dce-event__when {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--dce-accent);
}

/* Grouped lists hide the per-card date; don't leave its gap behind. */
.dce-event__when time:empty { display: none; }

.dce-event__time { color: var(--dce-muted); font-weight: 400; }

.dce-event__title {
	margin: 0.2rem 0 0.35rem;
	font-family: var(--dce-heading-font);
	font-size: 1.1em;
	line-height: 1.3;
}

.dce-event__title a { color: inherit; text-decoration: none; }
.dce-event__title a:hover,
.dce-event__title a:focus-visible { text-decoration: underline; }

.dce-event__where,
.dce-event__excerpt {
	margin: 0 0 0.4rem;
	font-size: 0.9em;
	color: var(--dce-muted);
}

.dce-event__where { font-weight: 500; }

.dce-event__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}

.dce-tag,
.dce-price {
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background-color: var(--dce-tag-bg);
	font-size: 0.78em;
	color: var(--dce-muted);
}

.dce-price { font-weight: 600; color: inherit; }

/* Pagination and empty state --------------------------------------------- */

.dce-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: var(--dce-gap);
	padding-top: 0.75rem;
	border-top: 1px solid var(--dce-border);
	font-size: 0.92em;
}

.dce-page-count { color: var(--dce-muted); }

.dce-empty {
	padding: 2rem 1rem;
	border: 1px dashed var(--dce-border);
	border-radius: var(--dce-radius);
	text-align: center;
	color: var(--dce-muted);
}

/* Cards reflow on the width of their own column, not the viewport, so the
   calendar behaves correctly inside a narrow sidebar or a wide full-width
   block alike. */
@container (max-width: 30rem) {
	.dce-event { flex-direction: column; }
	.dce-event__media { flex: 0 0 auto; }
	.dce-pagination { flex-direction: column; }
}

/* Respect a reader's motion preference for any theme-added transitions. */
@media (prefers-reduced-motion: reduce) {
	.dce-calendar * { transition: none !important; animation: none !important; }
}