/**
 * Long-form content and the templates that surround it.
 *
 *     1  Reading measure
 *     2  Post meta, tags and post-to-post navigation
 *     3  Listings and pagination
 *     4  Comments
 *     5  Search form
 *     6  Empty states and 404
 *     7  Prose typography
 *     8  Blocks inside prose
 *     9  Event page
 *    10  Link states
 *
 * Loaded after home.css, and it only ever adds: nothing here restyles a homepage
 * section. base.css strips every heading and flow element back to inheriting, which is
 * what the section layouts want — but prose needs that typography back, and §§ 7-8 are
 * where it is put back, scoped to .entry-content so it can never leak into a section.
 *
 * Prose comes last on purpose. Its rules reach elements through bare tag selectors and
 * so outweigh the component rules above; putting them at the end keeps the cascade
 * running in one direction and the file free of specificity overrides.
 *
 * @package Edible
 */

/* -----------------------------------------------------------------------------
   1  Reading measure
   -------------------------------------------------------------------------- */

.edible-theme .section--entry .section-container,
.edible-theme .section--comments .section-container {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-4xl);
}

.edible-theme .entry-content {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
}

/*
 * The measure, and the flow rhythm that goes with it, are for prose — and only prose.
 *
 * core/post-content wraps a page body in .entry-content whatever is inside it, so on a
 * page built from Edible sections these two rules would squeeze every full-bleed section
 * to a reading measure and then space them apart like paragraphs. Excluding core's
 * wrapper costs nothing, because prose on a post has an .entry-content of its own inside
 * .section--entry — see template-parts/content/single.php — and that one still matches.
 */
.edible-theme .entry-content:not(.wp-block-post-content) {
	max-width: 68ch;
}

/* The flow rhythm. Lives here rather than with the rest of the prose rules in § 7 so
   that the comment thread's own flow rule, which is more specific, comes after it. */
.edible-theme .entry-content:not(.wp-block-post-content) > * + * {
	margin-top: var(--space-lg);
}

/* Wide and full alignments are the reason the measure lives on .entry-content rather
   than on a wrapper — these break back out of it.

   Excluded from core's post-content wrapper for the same reason as the measure itself:
   there is no measure to break out of there, and the negative margin would drag every
   full-width section a gutter off the left edge. .section-flow .alignfull in home.css is
   what governs those, and this rule would otherwise beat it on load order alone. */
.edible-theme .entry-content:not(.wp-block-post-content) .alignwide {
	max-width: min(100%, 90rem);
}

.edible-theme .entry-content:not(.wp-block-post-content) .alignfull {
	max-width: none;
	margin-inline: calc(var(--gutter) * -1);
}

.edible-theme .entry-media {
	margin-bottom: var(--space-2xl);
}

.edible-theme .entry-media img {
	width: 100%;
}

/* -----------------------------------------------------------------------------
   2  Post meta, tags and post-to-post navigation
   -------------------------------------------------------------------------- */

.edible-theme .entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-2xl);
}

.edible-theme .entry-tags a {
	padding: var(--space-xs) var(--space-md);
	border: 1px solid var(--scheme-text);
	border-radius: 100vmax;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.edible-theme .entry-event__pills {
	margin-bottom: var(--space-xl);
}

.edible-theme .entry-pages {
	display: flex;
	gap: var(--space-md);
	margin-top: var(--space-2xl);
	font-size: var(--text-sm);
}

.edible-theme .post-nav {
	display: grid;
	gap: var(--space-lg);
}

.edible-theme .post-nav__link {
	display: block;
}

.edible-theme .post-nav__label {
	display: block;
	color: var(--scheme-accent);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.edible-theme .post-nav__title {
	display: block;
	margin-top: var(--space-xs);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-style: italic;
	line-height: var(--leading-snug);
}

.edible-theme .post-nav__link:hover .post-nav__title {
	transform: skewX(calc(var(--menu-hover-skew) * -1));
	transform-origin: bottom left;
	transition: transform 0.3s ease;
}

@media (min-width: 48em) {

	.edible-theme .post-nav {
		grid-template-columns: 1fr 1fr;
	}

	.edible-theme .post-nav__link--next {
		text-align: right;
	}

	.edible-theme .post-nav__link--next:only-child {
		grid-column: 2;
	}

	.edible-theme .post-nav__link--next:hover .post-nav__title {
		transform-origin: bottom right;
	}
}

/* -----------------------------------------------------------------------------
   3  Listings and pagination
   -------------------------------------------------------------------------- */

.edible-theme .section--news-archive .section-container {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-4xl);
}

.edible-theme .edible-pagination {
	margin-top: var(--space-3xl);
}

.edible-theme .edible-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

.edible-theme .edible-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	padding: var(--space-xs) var(--space-sm);
	border: 1px solid var(--scheme-text);
	font-size: var(--text-sm);
}

.edible-theme .edible-pagination .page-numbers.current,
.edible-theme .edible-pagination a.page-numbers:hover {
	background-color: var(--scheme-solid-bg);
	color: var(--scheme-solid-text);
}

.edible-theme .edible-pagination .page-numbers.dots {
	border-color: transparent;
}

/* -----------------------------------------------------------------------------
   4  Comments
   -------------------------------------------------------------------------- */

.edible-theme .comments {
	max-width: 68ch;
}

.edible-theme .comments__title,
.edible-theme .comments .comment-reply-title {
	margin-bottom: var(--space-xl);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-style: italic;
}

.edible-theme .comments__list,
.edible-theme .comments__list .children {
	list-style: none;
}

.edible-theme .comments__list .children {
	margin-left: var(--space-lg);
	padding-left: var(--space-lg);
	border-left: 1px solid var(--scheme-opacity);
}

.edible-theme .comments__list li {
	margin-top: var(--space-xl);
}

.edible-theme .comments .comment-meta {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
	font-size: var(--text-sm);
}

.edible-theme .comments .avatar {
	border-radius: 50%;
}

.edible-theme .comments .comment-metadata {
	color: var(--scheme-accent);
	font-size: var(--text-xs);
}

.edible-theme .comments .comment-content > * + * {
	margin-top: var(--space-md);
}

.edible-theme .comments .reply {
	margin-top: var(--space-sm);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.edible-theme .comment-respond {
	margin-top: var(--space-3xl);
}

.edible-theme .comment-form > p {
	margin-top: var(--space-md);
}

.edible-theme .comment-form label {
	display: block;
	margin-bottom: var(--space-xs);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.edible-theme .comment-form input[type="text"],
.edible-theme .comment-form input[type="email"],
.edible-theme .comment-form input[type="url"],
.edible-theme .comment-form textarea {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--scheme-text);
	background: transparent;
}

.edible-theme .comment-form .submit,
.edible-theme .comments__submit {
	padding: var(--space-sm) var(--space-xl);
	border: 1px solid var(--scheme-text);
	background-color: var(--scheme-solid-bg);
	color: var(--scheme-solid-text);
	cursor: pointer;
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.edible-theme .comments__closed {
	margin-top: var(--space-xl);
	color: var(--scheme-accent);
	font-size: var(--text-sm);
}

/* -----------------------------------------------------------------------------
   5  Search form
   -------------------------------------------------------------------------- */

.edible-theme .search-form {
	display: flex;
	max-width: var(--width-xl);
	gap: var(--space-sm);
}

.edible-theme .search-form .search-field {
	flex: 1;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--scheme-text);
	background: transparent;
}

.edible-theme .search-form .search-submit {
	padding: var(--space-sm) var(--space-xl);
	border: 1px solid var(--scheme-text);
	background-color: var(--scheme-solid-bg);
	color: var(--scheme-solid-text);
	cursor: pointer;
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

/* -----------------------------------------------------------------------------
   6  Empty states and 404
   -------------------------------------------------------------------------- */

.edible-theme .section--none .section-container,
.edible-theme .section--404 .section-wrapper {
	padding-block: var(--space-3xl);
}

.edible-theme .section--404 .section-container {
	padding-top: var(--space-4xl);
	padding-bottom: var(--space-4xl);
	border-bottom: 0;
}

.edible-theme .entry-none__message {
	margin-bottom: var(--space-xl);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-style: italic;
}

.edible-theme .entry-none__back a,
.edible-theme .entry-404__home {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.edible-theme .entry-404__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xl);
	margin-top: var(--space-2xl);
}

/* -----------------------------------------------------------------------------
   7  Prose typography

   Everything below reaches elements by tag name. Scoped to .entry-content, and last in
   the file — see the note at the top.
   -------------------------------------------------------------------------- */

.edible-theme .entry-content h2,
.edible-theme .entry-content h3,
.edible-theme .entry-content h4,
.edible-theme .entry-content h5,
.edible-theme .entry-content h6 {
	font-weight: 700;
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-negative);
}

.edible-theme .entry-content h2 {
	font-size: var(--text-xl);
}

.edible-theme .entry-content h3 {
	font-size: var(--text-lg);
}

.edible-theme .entry-content h4,
.edible-theme .entry-content h5,
.edible-theme .entry-content h6 {
	font-size: var(--text-base);
}

/* Extra air above a heading, but not when it opens the post. */
.edible-theme .entry-content > h2:not(:first-child),
.edible-theme .entry-content > h3:not(:first-child),
.edible-theme .entry-content > h4:not(:first-child) {
	margin-top: var(--space-2xl);
}

.edible-theme .entry-content a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.edible-theme .entry-content strong,
.edible-theme .entry-content b {
	font-weight: 700;
}

.edible-theme .entry-content em,
.edible-theme .entry-content i {
	font-style: italic;
}

/* base.css takes the markers off every list on the site. Prose is the one place they
   are wanted back. */
.edible-theme .entry-content ul,
.edible-theme .entry-content ol {
	padding-left: var(--space-lg);
	list-style: revert;
}

/* Except a list the theme lays out itself. The partner grid and the partner strip are blocks
   that go in a page body, so on the Partners page they land inside .entry-content — where the
   rule above, which cannot tell prose from a layout, gave a grid of logos bullet points and an
   indent to hang them in. Markers belong to lists that are being read as lists. */
.edible-theme .entry-content .partner-grid,
.edible-theme .entry-content .partner-logos,
.edible-theme .entry-content .title__meta-row {
	padding-left: 0;
	list-style: none;
}

.edible-theme .entry-content li + li {
	margin-top: var(--space-sm);
}

/* The hero's category and date rows, for the same reason: a hero placed in a page body
   lands inside .entry-content, which bulleted, indented, underlined and spaced them as
   though they were a list being read. They are the hero's layout, pinned to the wordmark
   by home.js, and they take their look from home.css § 4 wherever they render. */
.edible-theme .entry-content .title__meta-row li + li {
	margin-top: 0;
}

.edible-theme .entry-content .title__meta-row a {
	text-decoration: none;
}

.edible-theme .entry-content blockquote {
	padding-left: var(--space-lg);
	border-left: 2px solid var(--scheme-text);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-style: italic;
	line-height: var(--leading-snug);
}

.edible-theme .entry-content hr {
	height: 0;
	margin-block: var(--space-2xl);
	border: 0;
	border-top: 1px solid var(--scheme-text);
	opacity: 0.35;
}

/* -----------------------------------------------------------------------------
   8  Blocks inside prose
   -------------------------------------------------------------------------- */

.edible-theme .entry-content figure {
	margin-block: var(--space-2xl);
}

.edible-theme .entry-content figcaption {
	margin-top: var(--space-sm);
	color: var(--scheme-accent);
	font-size: var(--text-sm);
}

.edible-theme .entry-content code,
.edible-theme .entry-content kbd,
.edible-theme .entry-content pre {
	font-family: ui-monospace, sfmono-regular, menlo, monospace;
	font-size: 0.9em;
}

.edible-theme .entry-content pre {
	padding: var(--space-md);
	overflow-x: auto;
	background-color: var(--color-off-white);
	line-height: var(--leading-normal);
}

.edible-theme .entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.edible-theme .entry-content th,
.edible-theme .entry-content td {
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid var(--scheme-text);
	text-align: left;
}

.edible-theme .entry-content th {
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
   9  Event page

   A split screen: the image holds the right half at full height, the left half carries
   three bands — dates and pills, then the title and description, then the venue and the
   booking link. Mobile-first, so the split only arrives at 64em; below that the image
   sits on top and the bands stack.
   -------------------------------------------------------------------------- */

.edible-theme .event {
	display: grid;
}

/* Above the panel on a phone. Reordering an image carries no reading-order cost — the
   panel still comes first in the document. */
.edible-theme .event__media {
	order: -1;
	margin: 0;
	aspect-ratio: 4 / 3;
}

.edible-theme .event__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.edible-theme .event__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	padding: var(--space-xl) var(--gutter) var(--space-2xl);
}

.edible-theme .event__band--top,
.edible-theme .event__band--bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-md);
	font-size: var(--text-sm);
}

.edible-theme .event__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

/* .pill--category reads its colour from the enclosing scheme, which on this page is the
   panel itself — so on the event page it would be invisible. Invert it back. */
.edible-theme .event__pills .pill--category {
	background-color: var(--scheme-text);
	color: var(--scheme-bg);
}

.edible-theme .event__when {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.edible-theme .event__title {
	margin-bottom: var(--space-lg);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-negative);
}

.edible-theme .event__description {
	max-width: 60ch;
	font-size: var(--text-sm);
}

.edible-theme .event__venue {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

.edible-theme .event__map,
.edible-theme .event__tickets {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.edible-theme .event__map {
	opacity: var(--text-opacity-highlight);
}

.edible-theme .event__map svg {
	display: inline-block;
	flex: none;
}

@media (min-width: 64em) {

	/*
	 * minmax(0, 1fr), not 1fr. A bare 1fr floors at min-content, and the min-content of
	 * the media column is the intrinsic width of the photographs — so a 1200px image
	 * pushes that column past half the screen and squeezes the text into a gutter.
	 * Flooring at 0 is what actually holds the halves equal.
	 */
	.edible-theme .event {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

		/* Start below the fixed header. The admin bar counts too, because everything
		   that pins on this site offsets by it — see tokens.css. */
		padding-top: calc(var(--header-height) + var(--admin-bar-height));

		/* Without this the media stretches to the row height and sticky has nowhere to
		   travel — the pane would simply grow with the text instead of holding still. */
		align-items: start;
	}

	/*
	 * A long description scrolls; the image does not. The pane is pinned at exactly one
	 * screen below the header, so it stays whole while the left half runs past it.
	 *
	 * A short event still fills the screen because the panel carries the same min-height,
	 * which keeps the two halves the same size when there is nothing to scroll.
	 */
	.edible-theme .event__media {
		position: sticky;
		top: calc(var(--header-height) + var(--admin-bar-height));
		order: 0;
		height: calc(100svh - var(--header-height) - var(--admin-bar-height));
		aspect-ratio: auto;
	}

	/* The three bands sit at the top, the middle and the foot of the panel. */
	.edible-theme .event__panel {
		justify-content: space-between;
		min-height: calc(100svh - var(--header-height) - var(--admin-bar-height));
		padding: var(--space-2xl);
	}

	.edible-theme .event__band--body {
		margin-block: auto;
	}

	.edible-theme .event__when {
		align-items: flex-end;
		text-align: right;
	}
}

/*
 * The gallery fills the pane exactly as a single image would — Swiper needs the height
 * spelled out at every level or it collapses to the slide's intrinsic ratio.
 *
 * Note which element is NOT in this list: .event__media--gallery itself. It is the pane,
 * and its height is already set — by aspect-ratio on a phone, and by the sticky rule in
 * the media query above on desktop. Adding it here would match that rule's specificity
 * and, coming later in the file, win: the pane would resolve to its content height and
 * quietly stop being one screen tall.
 */
.edible-theme .event-gallery,
.edible-theme .event-gallery .swiper-wrapper,
.edible-theme .event-gallery .swiper-slide {
	height: 100%;
}

.edible-theme .event-gallery .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dots sit on a photograph, so they carry their own contrast rather than borrowing the
   section scheme — the image underneath them is whatever the event supplied. */
.edible-theme .event-gallery__pagination {
	position: absolute;
	right: var(--space-lg);
	bottom: var(--space-lg);
	left: auto;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	gap: var(--space-sm);
	width: auto;
}

.edible-theme .event-gallery__pagination .swiper-pagination-bullet {
	width: 0.6rem;
	height: 0.6rem;
	margin: 0;
	border: 1px solid var(--color-white);
	opacity: 1;
	background: transparent;
}

.edible-theme .event-gallery__pagination .swiper-pagination-bullet-active {
	background: var(--color-white);
}

/* Recommendations. */
.edible-theme .section--related .section-container {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-4xl);
	border-bottom: 0;
}

.edible-theme .related__heading {
	margin-bottom: var(--space-xl);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

/* -----------------------------------------------------------------------------
   10  Link states

   Collected here rather than beside each component. A :hover outranks the plain rule
   for the same element, so keeping every one of them last is what lets the sections
   above be ordered by page region instead of by specificity.
   -------------------------------------------------------------------------- */

.edible-theme .entry-tags a:hover {
	background-color: var(--scheme-solid-bg);
	color: var(--scheme-solid-text);
}

.edible-theme .entry-content a:hover {
	opacity: var(--text-opacity-highlight);
}