/*
 * assets/css/base.css · Out & Down theme
 *
 * Guards for the ten blueprint rules that theme.json can't express
 * (see https://claude.ai/artifact/Y2Vi6NXXzeQUXMiZsUjVYF, Section 35).
 * Everything below is either an `!important` guard that makes a wrong
 * choice impossible, or a utility class that makes a right choice easy.
 *
 * `.stylelintrc.json` bans `border-radius`, `box-shadow`, `text-shadow`
 * and the `transition` shorthand everywhere in the theme (Rules 07/08/10)
 * — this file is where those properties are legitimately set, as guards,
 * so each one carries a `stylelint-disable-next-line property-disallowed-list`
 * comment naming the rule it enforces. Do not add a new one elsewhere
 * without the same justification.
 */

/* ------------------------------------------------------------------ */
/* Rule 01 · full bleed                                                */
/* No page container, no max-width, no side margins. Sections span the */
/* viewport; content only stops at the edge of a bordered cell.        */
/* ------------------------------------------------------------------ */

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

body {
	margin: 0;
}

/* Display type never pushes the page wider than the screen: a long word
   (a venue name, an organiser handle) breaks instead of overflowing. */
h1,
h2,
h3,
.wp-block-heading,
.oad-hero__title,
.oad-band__title,
.oad-event-head__title,
.oad-pf-title {
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* WordPress's constrained-layout widths lose to full bleed, always.
   `.oad-measure` is the one exempted way to keep a text column narrow. */
.wp-site-blocks,
.wp-block-group__inner-container,
.is-layout-constrained > :not(.oad-measure) {
	max-width: none !important;
	margin-inline: 0 !important;
}

/* The one sanctioned way to keep a text measure narrow inside a full-bleed
   section. Use this instead of a block's own contentSize/wideSize control. */
.oad-measure {
	max-width: 62ch;
}

/* Phase 12.8 -- the same 62ch measure, applied once to any prose block
   (page.html, single.html, gd-single.html) instead of hand-marking every
   paragraph .oad-measure. Only plain content elements are targeted, so
   shortcode output nested inside .oad-prose (a UsersWP form, a Ninja
   Forms form, the GetPaid checkout, [gd_add_listing]) is untouched and
   keeps the full gutter width. */
.oad-prose > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote, table) {
	max-width: 62ch;
}

/* ------------------------------------------------------------------ */
/* Rule 07 · hairlines, not shadows · space, not rules                 */
/* A 1-px ink border belongs to a grid of cells, an element, or a cell */
/* that frames something. A new section is marked by a 64/96 gap and a */
/* Section-tier heading, never by a line. No box-shadow, ever.         */
/* ------------------------------------------------------------------ */

/* No shadow may survive from a block style, a plugin stylesheet or an
   inline style. The bare `*` selector carries zero specificity, so the
   `:focus-visible` rule below (which also sets box-shadow) still wins. */
*,
*::before,
*::after {
	/* stylelint-disable-next-line property-disallowed-list -- Rule 07 guard */
	box-shadow: none !important;
	/* stylelint-disable-next-line property-disallowed-list -- Rule 07 guard */
	text-shadow: none !important;
}

/* Shared-hairline pattern: `gap: 2px` on an ink background lets exactly
   one 1-px line show through between cells. Use for programme surfaces —
   schedule rows, filter bars, chip rows, category strips — where cells are
   meant to butt up and share a line. Poster grids never use this: they
   keep the 16/24 "apart" gutter on Ground (see outanddown-blueprint-poster-gutter). */
.oad-grid {
	display: grid;
	gap: 2px;
	background: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--ink);
}

.oad-grid > * {
	background: var(--wp--preset--color--ground);
}

/* 6-col tram. Every horizontal bar resolves to repeat(6, 1fr) with children
   spanning 1, 2, 3, 4 or 6 columns (see outanddown-blueprint-6col-tram). */
.oad-tram {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}

.oad-span-1 {
	grid-column: span 1;
}

.oad-span-2 {
	grid-column: span 2;
}

.oad-span-3 {
	grid-column: span 3;
}

.oad-span-4 {
	grid-column: span 4;
}

.oad-span-6 {
	grid-column: 1 / -1;
}

/* ------------------------------------------------------------------ */
/* Rule 08 · square corners                                            */
/* No border-radius on anything the system draws. Iconography and the  */
/* admin bar (not part of the visitor-facing system) are exempt.       */
/* ------------------------------------------------------------------ */

/* Nothing the theme draws may round its corners. `:where()` keeps this
   at zero specificity so `.oad-spinner` below still wins its own
   exemption, and the admin bar (WordPress chrome, not site UI) is
   carved out entirely. */
:where(:not(#wpadminbar, #wpadminbar *)) {
	/* stylelint-disable-next-line property-disallowed-list -- Rule 08 guard */
	border-radius: 0 !important;
}

/* Same guard for ::before/::after pseudo-elements (decorative shapes,
   focus rings drawn as pseudo-elements) — they don't inherit the plain
   selector above. */
:where(:not(#wpadminbar *))::before,
:where(:not(#wpadminbar *))::after {
	/* stylelint-disable-next-line property-disallowed-list -- Rule 08 guard */
	border-radius: 0 !important;
}

/* AyeCode's utility classes (.rounded-circle, .rounded, .shadow, .shadow-sm...)
   are !important at one class of specificity, which beats the zero-specificity
   guards above. Naming them puts a plugin's avatar, card or alert back under
   Rules 07 and 08. */
.bsui [class*="rounded"]:not(.oad-spinner),
.bsui .card,
.bsui .alert,
.bsui .dropdown-menu,
.bsui .toast {
	/* stylelint-disable-next-line property-disallowed-list -- Rule 08 guard */
	border-radius: 0 !important;
}

.bsui [class*="shadow"],
.bsui .card,
.bsui .alert,
.bsui .dropdown-menu,
.bsui .modal-content,
.bsui .toast {
	/* stylelint-disable-next-line property-disallowed-list -- Rule 07 guard */
	box-shadow: none !important;
}

/* The one exemption: the loading spinner is drawn as a circle. */
.oad-spinner {
	/* stylelint-disable-next-line property-disallowed-list -- Rule 08 exemption */
	border-radius: 50% !important;
}

/* Rule 03 · no keyboard focus frame. Nothing is drawn on focus.        */
:focus,
:focus-visible {
	outline: none !important;
}

/* ------------------------------------------------------------------ */
/* Rule 10 · motion is state only                                      */
/* The reduced-motion default is no motion at all. Loading indicators  */
/* (spinner, skeleton pulse, live dot) are the only things that loop,  */
/* and they stop here too.                                             */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	/* Reduced motion is the default with no exceptions, including the
	   three looping indicators that are otherwise allowed to animate. */
	*,
	*::before,
	*::after {
		/* stylelint-disable-next-line property-disallowed-list -- Rule 10 guard,
		   the shorthand is the only way to unconditionally cancel every
		   transition regardless of what set it. */
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* Folders plugin prints its admin undo toast into the front end. */
.folders-undo-notification {
	display: none;
}

/* Section rhythm (Rule 07, v3.0) — the gap that replaces a section rule,
   and the space between a section heading and its content. Both values
   are rungs of the spacing ladder. */
:root {
	--oad-section-gap: var(--wp--preset--spacing--64);
	--oad-head-gap: var(--wp--preset--spacing--24);
}

@media (min-width: 1024px) {
	:root {
		--oad-section-gap: var(--wp--preset--spacing--96);
		--oad-head-gap: var(--wp--preset--spacing--32);
	}
}

/* Placeholders are hints, not content: lighter and smaller than the text
   typed over them, on every field. */
::placeholder {
	font-weight: 400;
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Pagination · one boxed style for every list on the site: the event  */
/* archives and search (.oad-af-pagination), guides and the fallback   */
/* archives (.oad-generic__pagination, WordPress' page-numbers), and   */
/* GeoDirectory's own. Square 2px Ink boxes, current page filled Ink.  */
/* Action yellow stays out: hover inverts to Ink, never yellow.        */
/* ------------------------------------------------------------------ */

body .oad-af-pagination,
body .oad-generic__pagination ul.page-numbers,
body .geodir-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--8);
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--24) 0;
	border: 0;
	background: transparent;
}

/* The event lists sit on the page's 24 / 40 side margin, same as the bar
   and the wall above, so the boxes end on the wall's right edge. */
body .oad-af-pagination {
	padding: var(--wp--preset--spacing--24);
}

@media (min-width: 1024px) {
	body .oad-af-pagination {
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	}
}

body .oad-af-pagination__numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
}

body .oad-af-pagination a,
body .oad-af-pagination .oad-af-pagination__gap,
body .oad-generic__pagination a.page-numbers,
body .oad-generic__pagination span.page-numbers,
body .geodir-pagination a.page-numbers,
body .geodir-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	min-width: 44px;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	border: 2px solid var(--wp--preset--color--ink);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

body .oad-af-pagination a:hover,
body .oad-af-pagination a.is-on,
body .oad-generic__pagination a.page-numbers:hover,
body .oad-generic__pagination span.page-numbers.current,
body .geodir-pagination a.page-numbers:hover,
body .geodir-pagination span.page-numbers.current {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Two number windows are rendered (wide and narrow); one shows at a time. */
body .oad-af-pagination__win {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
}

body .oad-pg {
	display: block;
	width: 100%;
}

body .oad-af-pagination__win--narrow,
body .oad-pg--narrow {
	display: none;
}

/* Phone and tablet: the same 40px squares as the event page's Save and
   Share, sharing one 2px line, one row that never wraps. Prev and Next
   are arrow-only. The narrow window reads 1 ... current ... last. */
@media (max-width: 1023px) {
	body .oad-af-pagination__win--wide,
	body .oad-pg--wide {
		display: none;
	}

	body .oad-af-pagination__win--narrow {
		display: flex;
	}

	body .oad-pg--narrow {
		display: block;
	}

	body .oad-af-pagination,
	body .oad-af-pagination__numbers,
	body .oad-af-pagination__win,
	body .oad-generic__pagination ul.page-numbers,
	body .geodir-pagination ul.page-numbers {
		flex-wrap: nowrap;
		gap: 0;
		max-width: 100%;
	}

	body .oad-af-pagination a,
	body .oad-af-pagination .oad-af-pagination__gap,
	body .oad-generic__pagination a.page-numbers,
	body .oad-generic__pagination span.page-numbers,
	body .geodir-pagination a.page-numbers,
	body .geodir-pagination span.page-numbers {
		min-width: 40px;
		min-height: 40px;
		height: 40px;
		padding: 0 var(--wp--preset--spacing--8);
		font-size: 13px;
		letter-spacing: 0.02em;
	}

	/* Shared line between neighbours, as Save and Share do. */
	body .oad-af-pagination a + .oad-af-pagination__numbers,
	body .oad-af-pagination__numbers + a,
	body .oad-af-pagination__win > * + *,
	body .oad-generic__pagination li + li > .page-numbers {
		margin-left: -2px;
	}

	body .oad-af-pagination .oad-af-pagination__txt,
	body .oad-generic__pagination .oad-af-pagination__txt {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	body .oad-af-pagination .oad-af-pagination__gap,
	body .oad-generic__pagination span.page-numbers.dots {
		min-width: 0;
		padding: 0 4px;
	}
}

/* The skipped-pages marker is text, not a control. */
body .oad-af-pagination .oad-af-pagination__gap,
body .oad-generic__pagination span.page-numbers.dots,
body .geodir-pagination span.page-numbers.dots {
	min-width: 0;
	padding: 0 var(--wp--preset--spacing--8);
	border: 0;
	color: var(--wp--preset--color--muted);
}