/*
 * assets/css/generic.css · Out & Down theme · Phase 12.8
 *
 * templates/index.html, archive.html, single.html, page.html,
 * gd-archive.html, gd-single.html and gd-add-listing.html -- every page
 * type not explicitly templated by an earlier phase. One file, since
 * these seven templates share the same plain, minimal shape (heading
 * band, then either a hairline row list or prose), unlike the
 * one-file-per-template pattern used where each page has its own real
 * design (event.css, guide.css, home.css, ...).
 *
 * Loaded only on the generic templates -- see
 * outanddown_enqueue_generic_css() in functions.php.
 */

.oad-generic {
	background: var(--wp--preset--color--ground);
}

/* ------------------------------------------------------------------ */
/* Heading band -- same cell shape as error.css's 404 cell.            */
/* ------------------------------------------------------------------ */

.oad-generic__head {
	padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--24) 0;
}

@media (min-width: 1024px) {
	.oad-generic__head {
		padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40) 0;
	}
}

.oad-generic__head h1 {
	font-size: var(--wp--preset--font-size--display-l);
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Body gutter -- prose (page.html/single.html/gd-single.html) and the */
/* archive row list (index.html/archive.html/gd-archive.html) share    */
/* the same left/right padding as the heading band.                   */
/* ------------------------------------------------------------------ */

.oad-generic .oad-prose,
.oad-generic .oad-generic__image,
.oad-generic .oad-generic__body {
	padding: var(--wp--preset--spacing--24);
}

@media (min-width: 1024px) {
	.oad-generic .oad-prose,
	.oad-generic .oad-generic__image,
	.oad-generic .oad-generic__body {
		padding: var(--wp--preset--spacing--40);
	}
}

.oad-generic__image {
	width: 100%;
}

.oad-generic__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ */
/* Long-form text (blueprint v5.7). Body is Body L. Every gap is a top */
/* margin, so it reads the same in a block or a grid. Heading levels   */
/* in prose: h2 group (Section), h3 sub-group label (Display S),       */
/* h4 question (Display M). A paragraph with class oad-term opens with */
/* a bold label on its own line. Space, never a rule.                  */
/* ------------------------------------------------------------------ */

.oad-prose {
	font-family: var(--wp--preset--font-family--speak);
	font-size: var(--wp--preset--font-size--body-l);
	line-height: 1.5;
}

.oad-generic .oad-prose {
	padding: var(--oad-head-gap) var(--wp--preset--spacing--24) var(--oad-section-gap);
}

@media (min-width: 1024px) {
	.oad-generic .oad-prose {
		padding-inline: var(--wp--preset--spacing--40);
	}
}

.oad-prose > * {
	margin-block: 0;
}

.oad-prose > * + * {
	margin-top: var(--wp--preset--spacing--16);
}

.oad-prose h2 {
	margin-top: var(--oad-section-gap);
	line-height: 1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.oad-prose h3 {
	margin-top: var(--wp--preset--spacing--64);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.oad-prose h4 {
	margin-top: var(--wp--preset--spacing--32);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: 1.2;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-wrap: balance;
}

.oad-prose h4 strong {
	font-weight: 800;
}

/* A paragraph that opens with a bold label ("Cancelled events:") puts
   the label on its own line, as a Display S label. Marked in the
   content with the class oad-term, since CSS cannot tell a leading
   bold label from bold words mid-sentence. */
.oad-prose .oad-term {
	margin-top: var(--wp--preset--spacing--24);
}

/* A contents link lands the heading below the sticky header. */
.oad-prose [id] {
	scroll-margin-top: calc(var(--oad-header-h) + var(--wp--preset--spacing--24));
}

/* Space after a heading is set by the heading above it. */
.oad-prose > h2 + * {
	margin-top: var(--oad-head-gap);
}

.oad-prose > h3 + *:not(h2) {
	margin-top: var(--wp--preset--spacing--24);
}

.oad-prose > h4 + *:not(h2, h3) {
	margin-top: var(--wp--preset--spacing--8);
}

/* The label itself. */
.oad-prose .oad-term > strong:first-child {
	display: block;
	margin-bottom: var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.oad-prose > :first-child {
	margin-top: 0;
}

.oad-prose > :is(ul, ol) {
	padding-left: var(--wp--preset--spacing--24);
}

.oad-prose li + li {
	margin-top: var(--wp--preset--spacing--8);
}

.oad-prose li > :is(ul, ol) {
	margin-top: var(--wp--preset--spacing--8);
}

/* A list that is only links is a column of targets; a link inside a
   sentence stays inline. */
.oad-prose li > a:is(:only-child, :has(+ ul)) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ------------------------------------------------------------------ */
/* Contents. On a phone it is a list of bordered cells. From 1024 a    */
/* page with a contents block becomes the guide split: contents in     */
/* cols 1-2, sticky and open, text in cols 3-6 (Section 24).           */
/* ------------------------------------------------------------------ */

.oad-prose > .wp-block-rank-math-toc-block {
	margin-top: var(--wp--preset--spacing--32);
}

.wp-block-rank-math-toc-block::before {
	content: "On this page";
	display: block;
	margin-bottom: var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.oad-prose .wp-block-rank-math-toc-block :is(ul, li) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oad-prose .wp-block-rank-math-toc-block li a {
	display: flex;
	width: 100%;
	align-items: center;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--body-m);
	line-height: 1.3;
	text-decoration: none;
}

.wp-block-rank-math-toc-block a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

.wp-block-rank-math-toc-block nav > ul > li > a {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--display-s);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.oad-prose .wp-block-rank-math-toc-block nav > ul > li + li {
	margin-top: var(--wp--preset--spacing--16);
}

.wp-block-rank-math-toc-block li li a {
	color: var(--wp--preset--color--muted);
}

@media (max-width: 1023px) {
	.oad-prose .wp-block-rank-math-toc-block nav > ul > li + li {
		margin-top: 0;
	}

	.wp-block-rank-math-toc-block nav {
		border: 2px solid var(--wp--preset--color--ink);
	}

	.oad-prose .wp-block-rank-math-toc-block li a {
		padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	}

	.wp-block-rank-math-toc-block nav li + li > a,
	.wp-block-rank-math-toc-block li li > a {
		border-top: 2px solid var(--wp--preset--color--ink);
	}

	.oad-prose .wp-block-rank-math-toc-block li li a {
		padding-left: var(--wp--preset--spacing--32);
	}
}

@media (min-width: 1024px) {
	.oad-generic .oad-prose:has(> .wp-block-rank-math-toc-block) {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		padding-inline: 0;
	}

	.oad-prose:has(> .wp-block-rank-math-toc-block) > * {
		grid-column: 1 / -1;
		max-width: calc(62ch + var(--wp--preset--spacing--80));
		padding-inline: var(--wp--preset--spacing--40);
	}

	.oad-prose > .wp-block-rank-math-toc-block {
		grid-column: 1 / span 2;
		grid-row: span 200;
		align-self: start;
		position: sticky;
		top: calc(var(--oad-header-h) + var(--wp--preset--spacing--24));
		margin-top: var(--oad-section-gap);
	}

	.oad-prose > .wp-block-rank-math-toc-block ~ * {
		grid-column: 3 / span 4;
	}

	.oad-prose > .wp-block-rank-math-toc-block + * {
		margin-top: var(--oad-section-gap);
	}
}

/* ------------------------------------------------------------------ */
/* Archive row list.                                                   */
/* ------------------------------------------------------------------ */

.oad-generic__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oad-generic__row {
	padding: var(--wp--preset--spacing--24) 0;
	border-bottom: 2px solid var(--wp--preset--color--ink);
}

/* The pagination's own boxes draw the line beneath the list. */
.oad-generic__row:last-child {
	border-bottom: 0;
}

.oad-generic__row .wp-block-post-title {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--8);
}

.oad-generic__row .wp-block-post-title a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}


.oad-generic__row .wp-block-post-excerpt {
	font-family: var(--wp--preset--font-family--speak);
	margin: 0;
}

.oad-generic__empty {
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- */
/* Phase 14 · add-listing and account forms (Code Snippets 217, 228,   */
/* 218). Scoped to .oad-submit so nothing outside the add-listing template  */
/* is touched, unlike the site-wide originals.                          */
/* ---------------------------------------------------------------- */


.oad-submit fieldset.mb-3 h3.h3 {
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
}

/* Event form: the date helper lines and the neighbourhood field stay hidden. */
.oad-submit .col-sm-10:has(#event_start_date) > small.form-text.text-muted.d-block,
.oad-submit .col-sm-10:has(#event_end_date) > small.form-text.text-muted.d-block,
.oad-submit div[data-argument="address_neighbourhood"] {
	display: none !important;
}

.oad-generic input[name="uwp_account_submit"].btn.btn-primary {
	background-color: var(--wp--preset--color--ink) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
	display: block !important;
	font-family: var(--wp--preset--font-family--shout) !important;
	font-weight: 800 !important;
	margin: 0 !important;
	text-transform: uppercase !important;
	width: auto !important;
}

.oad-generic input[name="uwp_account_submit"].btn.btn-primary:hover {
	background-color: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
	outline: 2px solid var(--wp--preset--color--ink) !important;
	outline-offset: -2px !important;
}