/*
Theme Name: Cape Town Theology Conference
Theme URI: https://cttheologyconference.co.za/
Author: YouMultiply
Author URI: https://youmultiply.com/
Description: Evergreen "Paper & Cobalt" child theme for the Cape Town Theology Conference. The permanent site design lives here; each year's theme is a contained skin applied only to the homepage hero and one or two themed bands.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.9
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: cttc
*/

/* -----------------------------------------------------------------
   Only what block supports genuinely cannot express.
   Everything else is handled in theme.json / block attributes.
   ----------------------------------------------------------------- */

/* Sticky, translucent evergreen header.
   Sticky sits on the template-part <header> (a direct child of .wp-site-blocks)
   rather than the inner group, so it pins against the whole page, not just its
   own box. The translucency lives on the inner bar that carries the background. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.cttc-header.has-paper-background-color {
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--paper) 88%,
		transparent
	);
	backdrop-filter: saturate(1.1) blur(8px);
}

/* backdrop-filter makes this element a containing block for position:fixed
   descendants, which traps the mobile nav overlay inside the header bar
   (it renders as a 63px-tall sliver instead of covering the screen). Drop the
   blur only while the menu is open — the overlay hides the bar anyway. */
.cttc-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
}

/* The global blockGap puts a 24px margin between every direct child of
   .wp-site-blocks — so a paper stripe appears both above <main> (between the
   header and the hero) and above <footer> (between the last band and the dark
   footer). Every band carries its own padding, so neither needs an outer gap.
   Note this is separate from the blockGap:0 already set inside main; that only
   governs the space *between* bands, not around main itself. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Same seam, different mechanism, on the Past Conferences archive: TT5's
   archive template ends with a pagination Group that is empty while there is
   only one page of results. A zero-height box self-collapses its margins, and
   with no bottom padding on main that 24px escapes main entirely and pushes the
   footer down — main's own box still ends flush. :not(:has(*)) keeps the margin
   the moment real pagination appears inside it. */
.wp-site-blocks main > .wp-block-query > .wp-block-group:last-child:not(:has(*)) {
	margin-block-start: 0;
}

/* Eyebrow label — uppercase, letterspaced */
.cttc-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

/* Wordmark: display serif over a letterspaced descender line */
.cttc-wordmark a {
	color: inherit;
	text-decoration: none;
}

/* Make the whole wordmark — both lines — the homepage link. The anchor only
   wraps "Cape Town" (the descender line is a separate paragraph block), so
   stretch its hit area over the group rather than adding a second anchor to the
   same destination, which would give screen readers a duplicate link. */
.cttc-wordmark {
	position: relative;
	width: fit-content;
}
.cttc-wordmark a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.cttc-wordmark-sub {
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

/* Navigation hover */
.cttc-nav a:hover {
	color: var(--wp--preset--color--cobalt);
}

/* Buttons: square-ish, weighty, subtle press */
.wp-block-button__link {
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.wp-block-button__link:active {
	transform: translateY(1px);
}

/* Button variants. These need real CSS because theme.json's button :hover
   would otherwise repaint every button cobalt on hover. */
.cttc-btn-amber .wp-block-button__link {
	background-color: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--navy);
}
.cttc-btn-amber .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--amber-light);
	color: var(--wp--preset--color--navy);
}
.cttc-btn-invert .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--cobalt);
}
.cttc-btn-invert .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--cobalt);
}
.cttc-btn-ym .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ym-ink);
}
.cttc-btn-ym .wp-block-button__link:hover {
	background-color: #e8ecf1;
	color: var(--wp--preset--color--ym-ink);
}

/* Measure utilities — cap a text block's line length without wrapping it in an
   extra layout block. Remove the class to let the text run the full column.
   Apply these INSIDE a flow (default-layout) Group, never as a direct child of
   a constrained Group — constrained layout auto-centres its children, which
   would pull a narrowed block off the page's left-hand axis. */
.cttc-measure {
	max-width: var(--wp--custom--measure);
}
.cttc-measure-narrow {
	max-width: var(--wp--custom--measure-narrow);
}
.cttc-measure-tight {
	max-width: 30ch;
}
.cttc-measure-hero {
	max-width: 15ch;
}

/* Arrow link — "See the full programme →" */
.cttc-arrow a::after,
a.cttc-arrow::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.55rem;
	transition: transform 0.15s ease;
}
.cttc-arrow a:hover::after,
a.cttc-arrow:hover::after {
	transform: translateX(4px);
}

/* Hairline separation between repeated rows (programme days, archive rows,
   About's trilogy). Uses a 1px background, never a border rule.
   Translucent Ink rather than the Tint token: Tint is also a section background,
   so a Tint line vanished whenever these rows sat on a Tint band — a trap that
   caught the Programme page and then the About page. Ink at 12% reads on Paper
   and on Tint alike. */
.cttc-rows > *:not(:first-child) {
	background: linear-gradient(
			color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent),
			color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent)
		)
		top / 100% 1px no-repeat;
}

/* Archive row: theme title picks up the accent on hover */
.cttc-archive-row:hover .cttc-archive-theme,
.cttc-archive-row:hover .cttc-archive-theme a {
	color: var(--wp--preset--color--cobalt);
}
.cttc-archive-row a {
	text-decoration: none;
}

/* Past-conference talk rows are time | title | Watch, kept side by side so the
   time reads as a gutter. At phone width three columns starve the title (152px,
   five lines), so let the Watch link drop onto its own line, indented past the
   time gutter to sit under the title. is-not-stacked-on-mobile forces
   flex-wrap:nowrap !important, hence the !important here. */
@media (max-width: 781px) {
	.cttc-talk-row.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
	}
	.cttc-talk-row > .cttc-talk-watch {
		flex-basis: 100% !important;
		margin-left: 4.4rem;
		margin-top: 0.4rem;
	}
}

/* Tabular numerals for the small talk numbers */
.cttc-num {
	font-variant-numeric: tabular-nums;
}

/* Speaker list and talk lists: no bullets, type-led */
.cttc-plain-list ul,
ul.cttc-plain-list,
.cttc-plain-list ol,
ol.cttc-plain-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

/* Venue & practical details: four columns (Dates, Address, Fees, Meals) fit
   comfortably on a wide screen, but between the columns breakpoint and roughly
   1180px a quarter-width column is too narrow — the fee lines start wrapping
   two-deep. Fold to a 2x2 grid through that band instead; below 782px core
   stacks them one-up on its own. */
@media (min-width: 782px) and (max-width: 1180px) {
	/* Core forces flex-wrap:nowrap!important above 782px, so this needs
	   !important too, plus the base class to outrank it on specificity. */
	.wp-block-columns.cttc-practical {
		flex-wrap: wrap !important;
	}
	.cttc-practical > .wp-block-column {
		flex: 1 1 40% !important;
	}
}

/* Register CTA bonus strip: small book cover beside two short lines. The text
   sits in a default-layout Group, which is a block-level div — as a flex item
   its intrinsic width is wide enough to force a wrap onto its own line, so it
   needs flex:1 1 0 and min-width:0 to shrink and sit beside the cover. Below
   the phone breakpoint the wrap is what we want, so let it happen. */
.cttc-bookbonus {
	flex-wrap: nowrap;
}
.cttc-bookbonus > figure {
	flex: 0 0 auto;
}
.cttc-bookbonus > .wp-block-group {
	flex: 1 1 0;
	min-width: 0;
	max-width: var(--wp--custom--measure);
}
@media (max-width: 600px) {
	.cttc-bookbonus {
		flex-wrap: wrap;
	}
}

/* Cover's "bottom left" content position shrink-wraps the inner container,
   which would pull the hero text out of the page's content column. Let it
   span the full width so its constrained children line up with the header. */
.wp-block-cover.cttc-hero.has-custom-content-position.has-custom-content-position
	> .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	margin: 0;
}

/* Gentle hero fade — the only motion in the design */
@media (prefers-reduced-motion: no-preference) {
	.cttc-hero-content > * {
		animation: cttc-fade-up 0.8s ease both;
	}
	.cttc-hero-content > *:nth-child(2) {
		animation-delay: 0.08s;
	}
	.cttc-hero-content > *:nth-child(3) {
		animation-delay: 0.16s;
	}
	.cttc-hero-content > *:nth-child(4) {
		animation-delay: 0.24s;
	}
	.cttc-hero-content > *:nth-child(5) {
		animation-delay: 0.32s;
	}
	@keyframes cttc-fade-up {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* Mobile header: collapse to core's overlay ("hamburger") menu.
   core/navigation is set to overlayMenu:"mobile", but core flips back to the
   inline nav at 600px — and this bar is already crowded well above that, since
   it carries a two-line wordmark and a Register button beside the menu. These
   two rules re-assert the overlay up to 880px by out-specifying core's
   min-width:600px pair (a descendant .cttc-nav adds the winning class). */
@media (max-width: 879px) {
	.cttc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.cttc-nav
		.wp-block-navigation__responsive-container:not(.hidden-by-default):not(
			.is-menu-open
		) {
		display: none;
	}

	/* Order the bar as wordmark … cart + Register | hamburger, so the toggle
	   sits at the far edge rather than stranded between the two. No
	   margin-left:auto — it eats the free space and wraps the hamburger onto a
	   second row. Order must be set on .cttc-header-actions, not the button
	   inside it: order only positions an element among its own flex siblings,
	   and the button is now a child of the actions group, not of this row. */
	.cttc-header-inner .cttc-header-actions {
		order: 2;
	}
	.cttc-header-inner .cttc-nav {
		order: 3;
	}

	/* Buy back the width the three items need to share one row. */
	.cttc-header-inner {
		gap: 0.75rem;
	}
	.cttc-wordmark-sub {
		letter-spacing: 0.08em;
	}
}

/* Phone: drop the mini-cart from the header. Measured at 360 and 390px the
   cart is exactly what tips the bar onto a second row (74px tall with it,
   36px without); from ~430px up it fits either way. Registration goes
   tier → checkout without visiting the cart, so the icon earns less than the
   row it costs. Still reachable at /cart/. */
@media (max-width: 479px) {
	.cttc-header-actions .wp-block-woocommerce-mini-cart {
		display: none;
	}
}

/* Mobile hero: the desktop composition is a tall field of sky with the title
   hung off the bottom. At phone width that pushes the title below the fold, so
   shorten the band and let the text sit nearer the top of it. svh (not vh)
   because mobile browsers size vh to the *toolbar-less* viewport, which is what
   put the title out of sight in the first place. !important is unavoidable:
   min-height and padding are Cover block attributes rendered inline. */
@media (max-width: 781px) {
	.wp-block-cover.cttc-hero {
		min-height: 60vh !important;
		min-height: 60svh !important;
		padding-top: 2.5rem !important;
		padding-bottom: 3rem !important;
	}
}