/*
Theme Name: Awakening Our Roots
Theme URI: https://awakeningourroots.com
Description: Child theme of Twenty Twenty-Five for Awakening Our Roots. An editorial,
  warm treatment of the practice's existing brand: Judson on a cream ground, with the
  crimson and purple carried over from the previous site. Block editor only, no page
  builder, and no third-party requests: the fonts are served from here, so the site sets
  no non-essential cookies.
Author: Awakening Our Roots
Template: twentytwentyfive
Version: 2.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aor
*/

/* ════════════════════════════════════════════════════════════════════════════════
   THE GRID

   One column, 1120px, centred. Every section sits on it and everything inside a
   section starts on its left edge — headings, text, lists, images, index rows.
   There is no second, narrower grid: the only other state is full-bleed, and a
   full-bleed band still puts its contents back on the same 1120px column.

   Running text is held to a readable measure, but anchored LEFT rather than centred.
   That is the whole trick: WordPress gives every child of a constrained layout
   `margin-inline: auto !important`, so anything narrower than its container is
   centred and drifts out of line with the heading above it. These rules override
   that with a higher specificity so the left edge holds all the way down the page.
   ════════════════════════════════════════════════════════════════════════════════ */

:root {
	--aor-measure: 40rem;      /* ~62 characters at the body size */
	--aor-measure-wide: 48rem; /* headings and leads, which take a wider line */
}

.aor-section > *,
.aor-band__inner > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.aor-section > :is(p, ul, ol, pre, blockquote),
.aor-band__inner > :is(p, ul, ol, pre, blockquote) {
	max-width: var(--aor-measure);
}

.aor-section > :is(h2, h3),
.aor-band__inner > :is(h2, h3),
.aor-section > .is-style-aor-lead,
.aor-band__inner > .is-style-aor-lead {
	max-width: var(--aor-measure-wide);
}

/* Columns, images and the index use the full grid width. */
.aor-section > :is(.wp-block-columns, .wp-block-image, .aor-index),
.aor-band__inner > :is(.wp-block-columns, .wp-block-image, .aor-index) {
	max-width: none;
}

/* ---------------------------------------------------------------- foundations */

:where(a, button, input, textarea, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

/* Inside a column the layout is flow, not constrained, so a cap here is safe. */
.wp-block-column > :is(p, ul, ol) {
	max-width: var(--aor-measure);
}

/* ---------------------------------------------------------------- header */

.aor-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	isolation: isolate;
}

/* The blur sits on a pseudo-element, NOT on the header itself.

   `backdrop-filter` makes an element a containing block for its `position: fixed`
   descendants. The mobile menu overlay is fixed, so putting the filter on the header
   trapped the overlay inside the header's ~90px height and only the first menu item
   was visible. On a pseudo-element the nav is no longer a descendant of the filtered
   box, so the overlay resolves against the viewport again. */
.aor-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.aor-header::before { background: var(--wp--preset--color--base); }
}

/* The open overlay paints its own ground and sets the menu at display size, so it
   reads like the rest of the site rather than a default list. */
.aor-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	padding: clamp(5rem, 16vw, 7rem) var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.aor-header .is-menu-open .wp-block-navigation__container {
	gap: clamp(.5rem, 2vw, 1rem);
	align-items: flex-start;
}

.aor-header .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 8vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -.015em;
	color: var(--wp--preset--color--secondary);
	border-bottom: 0;
	padding-block: .25rem;
}

.aor-header .is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

.aor-header .is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--secondary);
}

.aor-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .04em;
}

.aor-header .wp-block-navigation-item__content {
	padding-block: .35rem;
	border-bottom: 1px solid transparent;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: border-color .2s ease, color .2s ease;
}

.aor-header .wp-block-navigation-item__content:hover,
.aor-header .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------- eyebrow label */

.is-style-aor-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: .75rem;
	max-width: none !important;
}

.is-style-aor-label::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-top: .75rem;
	background: currentColor;
	opacity: .55;
}

/* ---------------------------------------------------------------- lead paragraph */

.is-style-aor-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	font-weight: 300;
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------- display heading */

/* Reserved for the hero and page titles. Section headings keep their own rank, so
   nothing below the top of the page competes with it. */
.is-style-aor-display {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1;
	letter-spacing: -.025em;
	color: var(--wp--preset--color--secondary);
	text-wrap: balance;
	/* The parent theme breaks long words mid-word; at this size that turns
	   "Awakening" into "Awaken / ing". */
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}

@media (max-width: 599px) {
	.is-style-aor-display {
		overflow-wrap: break-word;
		word-break: normal;
		hyphens: auto;
	}
}

/* ---------------------------------------------------------------- page head */

/* The page title is NOT an .aor-section: it keeps WordPress's own centring so its
   1120px box lands on the grid. Left-anchoring it would pin it to the viewport edge,
   because its parent <main> is a flow layout and therefore full width. */
.aor-page-head {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* ---------------------------------------------------------------- vertical rhythm */

/* Sections are separated by their own space, not by a uniform block gap, so the eye
   can tell where one ends and the next begins. */
.aor-section {
	padding-block: clamp(3.5rem, 7vw, 6rem);
}

.aor-band {
	padding-block: clamp(4rem, 8vw, 6.5rem);
}

/* Two plain sections in a row share one gap rather than stacking two. */
.aor-section + .aor-section {
	padding-top: 0;
}

.wp-block-post-content > :is(.aor-section, .aor-band):first-child {
	padding-top: clamp(2rem, 4vw, 3rem);
}

/* A hairline marks where a plain section starts, except at the top of the page and
   straight after a band, where the colour change already does the job. */
.aor-section + .aor-band,
.aor-band + .aor-section {
	border-top: 0;
}

/* ---------------------------------------------------------------- bands */

/* A band bleeds to the edges; its inner wrapper puts the contents back on the grid. */
.aor-band.has-deep-background-color,
.aor-band.has-secondary-background-color {
	color: var(--wp--preset--color--base);
}

.aor-band.has-deep-background-color :is(h1, h2, h3, p, li, cite, pre),
.aor-band.has-secondary-background-color :is(h1, h2, h3, p, li, cite, pre) {
	color: var(--wp--preset--color--base);
}

.aor-band.has-deep-background-color .is-style-aor-label,
.aor-band.has-secondary-background-color .is-style-aor-label {
	color: var(--wp--preset--color--surface);
}

/* The statement is the one line allowed to run at display size mid-page. */
.aor-statement .is-style-aor-display {
	max-width: 20ch !important;
}

/* ---------------------------------------------------------------- hero */

.aor-hero {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.aor-hero .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* The hero runs full width and the image bleeds off the right edge. The left column
   is inset to the same gutter as every other section.

   The gutter is worked out in percentages of the full-width row, not in vw, because
   vw includes the scrollbar and would push the whole page sideways by its width. */
@media (min-width: 900px) {
	.aor-hero .wp-block-columns { max-width: none; }

	.aor-hero .wp-block-column:first-child {
		padding-left: max(
			var(--wp--preset--spacing--30),
			calc((100% - var(--wp--style--global--wide-size)) / 2)
		);
		padding-right: var(--wp--preset--spacing--50);
	}
}

/* Stacked below that, the full-bleed row loses the page gutter, so the text column
   carries it itself. The image stays edge to edge. */
@media (max-width: 899px) {
	.aor-hero .wp-block-column:first-child {
		padding-inline: var(--wp--preset--spacing--30);
	}
}

/* The focal point — the two fists — sits high in the frame, so the crop is pulled up. */
.aor-hero-figure img {
	width: 100%;
	height: clamp(20rem, 42vw, 32rem);
	object-fit: cover;
	object-position: center 22%;
	border-radius: 2px;
	display: block;
}

/* ---------------------------------------------------------------- service index */

.aor-index { border-top: 1px solid var(--wp--preset--color--line); }

.aor-index-row {
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: background-color .25s ease;
}

.aor-index-row a {
	display: flex;
	align-items: baseline;
	gap: clamp(1rem, 4vw, 3rem);
	padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
	padding-inline: clamp(.5rem, 1.5vw, 1rem);
	text-decoration: none;
	color: inherit;
}

.aor-index-number {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--body);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.aor-index-row h3 {
	flex: 1 1 auto;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	line-height: 1.15;
	color: var(--wp--preset--color--secondary);
	margin: 0;
	transition: color .2s ease;
}

.aor-index-arrow {
	flex: 0 0 auto;
	color: var(--wp--preset--color--primary);
	font-size: 1.25rem;
	line-height: 1;
	opacity: .4;
	transform: translateX(-.35rem);
	transition: opacity .25s ease, transform .25s ease;
}

.aor-index-row:hover,
.aor-index-row:focus-within {
	background: var(--wp--preset--color--surface);
}

.aor-index-row:hover h3,
.aor-index-row:focus-within h3 {
	color: var(--wp--preset--color--primary);
}

.aor-index-row:hover .aor-index-arrow,
.aor-index-row:focus-within .aor-index-arrow {
	opacity: 1;
	transform: translateX(0);
}

/* ---------------------------------------------------------------- quotes */

.wp-block-quote {
	border: 0;
	padding: 0;
	margin-block: 0;
}

.wp-block-quote p {
	max-width: none;
	font-size: clamp(1.25rem, 1.8vw, 1.625rem);
	line-height: 1.4;
}

.wp-block-quote::before {
	content: "\201C";
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 4rem;
	line-height: .55;
	color: var(--wp--preset--color--primary);
	margin-bottom: .5rem;
}

.wp-block-quote cite {
	display: block;
	margin-top: 1.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- the poem */

.aor-verse { max-width: 46rem; }

.aor-verse pre.wp-block-verse {
	white-space: pre-wrap;
	overflow: visible;
	margin: 0;
	max-width: none;
	font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
	line-height: 1.8;
}

/* ---------------------------------------------------------------- fees */

.aor-fees {
	border-left: 3px solid var(--wp--preset--color--primary);
	max-width: var(--aor-measure) !important;
}

.aor-fees p {
	margin: 0;
	max-width: none;
	font-size: var(--wp--preset--font-size--large);
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--secondary);
}

/* ---------------------------------------------------------------- call to action */

.aor-cta {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* ---------------------------------------------------------------- images */

.wp-block-image img { border-radius: 2px; }

.wp-block-image figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	font-style: italic;
}

/* ---------------------------------------------------------------- footer */

.aor-footer { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }

.aor-footer a { text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* The professional body logos are supplied on white. Multiply drops the white out so
   they sit on the cream ground instead of floating in pale rectangles. */
.aor-accreditations {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2rem;
}

.aor-accreditations figure { margin: 0; flex: 0 0 auto; }

/* Normalised on height, not width, so logos of different proportions sit on one line.
   The inline width the image block writes has to be overridden for that to hold. */
.aor-accreditations img {
	height: 42px;
	width: auto !important;
	max-width: none;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: saturate(.9);
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}