/*
 * Transcend Brand CSS
 *
 * Layout and typography for the Transcend Templates plugin. ALL colour
 * values resolve through Neve's customiser palette (--nv-*) so changing
 * the palette in Customize → Global → Colors & Background updates every
 * plugin-styled element. No literal hex values, no colour-named section
 * variants — sections are rendered as .wp-block-group with inline
 * background-color in the templates so Neve styles them directly.
 */

/* ============================================================
   Brand tokens — typography, spacing, sizing only
   ============================================================

   Colours come straight from Neve's global palette variables
   (--nv-*) so changing them in Customize → Global → Colors &
   Background propagates everywhere with no intermediate aliases.

   This file references Neve slots SEMANTICALLY, not by colour:
     --nv-text-color       body text / dark element backgrounds
     --nv-text-dark-bg     text on dark backgrounds
     --nv-site-bg          page background
     --nv-dark-bg          dark section background
     --nv-primary-accent   primary accent (buttons, hero titles,
                           soft section backgrounds)
     --nv-c-1, --nv-c-2    available for additional accents

   Do NOT reference --nv-secondary-accent or --nv-light-bg here —
   those slots have been re-purposed for loud highlights / muted
   alt tones in the active palette, and using them as soft accents
   produced ugly results. If a new accent is needed, add to the
   palette via the Customiser first, then map it here. */

:root {
	--tt-font-display: 'Norwester', Arial, Helvetica, sans-serif;
	--tt-font-body: 'Glacial Indifference', Arial, Helvetica, sans-serif;

	--tt-space-xs: 0.5rem;
	--tt-space-sm: 1rem;
	--tt-space-md: 2rem;
	--tt-space-lg: 4rem;
	--tt-space-xl: 6rem;

	--tt-container-max: 1200px;
	--tt-content-max: 720px;

	--tt-radius-pill: 30px;
	--tt-radius-card: 12px;
}

/* ============================================================
   Base wrapper
   ============================================================ */

.tt-template {
	font-family: var(--tt-font-body);
	color: var(--nv-text-color);
	line-height: 1.7;
	font-size: 1.125rem;
}

/* Match the homepage's body text scale for paragraphs and section copy. */
.tt-template p,
.tt-template li {
	font-size: 1.125rem;
	line-height: 1.7;
}

.tt-template h1,
.tt-template h2,
.tt-template h3,
.tt-template h4 {
	font-family: var(--tt-font-display);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.15;
}

.tt-container {
	max-width: var(--tt-container-max);
	margin: 0 auto;
	padding: 0 var(--tt-space-md);
}

.tt-content {
	max-width: var(--tt-content-max);
	margin: 0 auto;
}

/* ============================================================
   Hero — dark background, blue heading, location badges
   ============================================================ */

.tt-hero {
	background-color: var(--nv-text-color);
	background-size: cover;
	background-position: center;
	color: var(--nv-text-dark-bg);
	padding: var(--tt-space-xl) var(--tt-space-md);
	min-height: 70vh;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

/* Team-member hero is mostly photo + name — no need for a half-screen
 * void below it. Keep enough padding for breathing room, drop the 70vh.
 */
.tt-hero--team-member {
	min-height: 0;
	padding: var(--tt-space-lg) var(--tt-space-md);
}
/* Hub variant (Meet the Tribe) restores full hero height. The min-height:0
   override above is specifically for the team-member SINGLE pages where
   the image+text row doesn't need a tall hero. */
.tt-hero--team-member.tt-hero--centered {
	min-height: 70vh;
	padding: var(--tt-space-xl) var(--tt-space-md);
}

/* Dark overlay — always on. Solid dark heroes get a near-invisible darken,
 * image-backed heroes get the full readability gradient. */
.tt-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--nv-text-color) 65%, transparent) 0%, color-mix(in srgb, var(--nv-text-color) 85%, transparent) 100%);
	z-index: 1;
	pointer-events: none;
}

.tt-hero__inner {
	max-width: var(--tt-container-max);
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.tt-hero__title {
	color: var(--nv-primary-accent);
	font-size: clamp(2.2rem, 5vw, 3.5rem);
	margin: 0 0 var(--tt-space-md);
}

/* Per-CPT hero title colour overrides — match the plan's mockups */
.tt-hero--service .tt-hero__title       { color: var(--nv-primary-accent); }
.tt-hero--experience .tt-hero__title    { color: var(--nv-primary-accent); }
.tt-hero--vibe .tt-hero__title          { color: var(--nv-primary-accent); }
.tt-hero--team-member .tt-hero__title   { color: var(--nv-site-bg); }
.tt-hero--location .tt-hero__title      { color: var(--nv-primary-accent); }
.tt-hero--training .tt-hero__title      { color: var(--nv-site-bg); }

/* Centred hero variant (location, community) */
.tt-hero--centered {
	text-align: center;
}
.tt-hero--centered .tt-hero__copy {
	margin-left: auto;
	margin-right: auto;
}

/* Team member hero — photo on left, name + role on right */
.tt-hero--team-member .tt-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--tt-space-lg);
	align-items: center;
}
.tt-hero__photo {
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1 / 1;
	border-radius: var(--tt-radius-card, 14px);
	background-size: cover;
	background-position: center;
	background-color: color-mix(in srgb, var(--nv-primary-accent) 20%, transparent);
}
@media (max-width: 800px) {
	.tt-hero--team-member .tt-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}
	.tt-hero__photo {
		max-width: 280px;
	}
	.tt-hero--team-member .tt-hero__socials,
	.tt-hero--team-member .tt-booking-buttons {
		justify-content: center;
	}
}
.tt-hero__pronouns {
	font-family: var(--tt-font-body);
	color: color-mix(in srgb, var(--nv-text-dark-bg) 70%, transparent);
	font-size: 0.95rem;
	font-weight: 400;
	text-transform: none;
	margin: 0.1rem 0 0.4rem;
}
.tt-hero__role {
	font-family: var(--tt-font-display);
	color: var(--nv-primary-accent);
	font-size: 1rem;
	margin: 0 0 0.2rem;
}
.tt-team__pronouns {
	display: inline-block;
	font-family: var(--tt-font-body);
	font-weight: 400;
	font-size: 0.7em;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.65;
	margin-left: 0.4em;
	vertical-align: middle;
	white-space: nowrap;
}
.tt-hero__location {
	color: color-mix(in srgb, var(--nv-text-dark-bg) 65%, transparent);
	font-size: 0.95rem;
}

/* Team-member social links — sits below role/location in the hero. */
.tt-hero__socials {
	list-style: none;
	margin: var(--tt-space-md) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.tt-hero__social {
	margin: 0;
	padding: 0;
}
.tt-template .tt-hero .tt-hero__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--nv-primary-accent);
	background: color-mix(in srgb, var(--nv-primary-accent) 12%, transparent);
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.tt-template .tt-hero .tt-hero__social a:hover,
.tt-template .tt-hero .tt-hero__social a:focus {
	background: var(--nv-primary-accent);
	color: var(--nv-text-color);
	transform: translateY(-2px);
}
.tt-template .tt-hero .tt-hero__social a svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* Full-width hero image (used after Experience/Location heroes) */
.tt-hero-image {
	display: block;
	width: 100%;
	height: 280px;
	object-fit: cover;
}

.tt-hero__copy {
	max-width: 620px;
	font-size: 1rem;
	color: var(--nv-site-bg);
	text-shadow: 0 1px 8px color-mix(in srgb, var(--nv-text-color) 60%, transparent);
}

/* Force WHITE hero copy with !important so Neve's content styles cannot
 * override. The hero is always over a dark overlay or photographic
 * background; pure white with a soft shadow guarantees legibility.
 */
.tt-template .tt-hero .tt-hero__copy,
.tt-template .tt-hero .tt-hero__copy p,
.tt-template .tt-hero .tt-hero__copy a,
.tt-template .tt-hero .tt-hero__copy strong,
.tt-template .tt-hero .tt-hero__copy em,
.tt-template .tt-hero .tt-hero__copy span {
	color: var(--nv-site-bg) !important;
	text-shadow: 0 1px 8px color-mix(in srgb, var(--nv-text-color) 60%, transparent);
}

.tt-template .tt-hero .tt-hero__copy p {
	margin: 0 0 var(--tt-space-xs);
}

/* Location label on hero sections. Plain text on a single-line row, no
   pill chrome — only actual buttons get pills. */
.tt-loc-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tt-space-sm);
	margin-top: var(--tt-space-md);
	font-family: var(--tt-font-display);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

.tt-loc-badge {
	display: inline-block;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
}

.tt-loc-badge--active {
	background: none;
	color: inherit;
	border: 0;
}

/* Card-level location badges (kept compact, no pill — same rule). */
.tt-card .tt-loc-badges {
	margin-top: var(--tt-space-xs);
	font-size: 0.7rem;
}

/* Buttons
   ============================================================
   Buttons use Gutenberg block markup (.wp-block-button +
   .wp-block-button__link). Neve styles them via the Customiser
   — do not override here. */

/* ============================================================
   Sections — rendered as .wp-block-group with inline
   background-color so Neve's Customiser drives the palette.
   These rules only cover heading colour cascade + copy width.
   ============================================================ */

/* Headings on dark-bg sections get the primary accent colour
   (cream body text inherits the section's color rule). */
.tt-template .wp-block-group[style*="--nv-dark-bg"] h2,
.tt-template .wp-block-group[style*="--nv-dark-bg"] h3 {
	color: var(--nv-primary-accent);
}

.tt-section__copy {
	max-width: 720px;
	font-size: 1rem;
}

.tt-section__copy p {
	margin: 0 0 var(--tt-space-sm);
}

.tt-template .wp-block-group[style*="--nv-dark-bg"] .tt-section__copy p {
	color: color-mix(in srgb, var(--nv-text-dark-bg) 85%, transparent);
}

/* ============================================================
   Sub-service / experience card grid
   ============================================================ */

/* Flexbox layout so partial rows centre (8 cards → 4+4, 7 cards → 4+3
   with the trailing row centred). Grid + 1fr always stretches to fill,
   which is why partial rows used to look left-justified. */
.tt-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tt-space-md);
	margin-top: var(--tt-space-md);
}
.tt-cards .tt-card {
	flex: 0 0 100%;
	max-width: 100%;
}
@media (min-width: 540px) {
	.tt-cards .tt-card {
		flex-basis: calc(50% - var(--tt-space-md) / 2);
		max-width: calc(50% - var(--tt-space-md) / 2);
	}
}
@media (min-width: 800px) {
	.tt-cards .tt-card {
		flex-basis: calc(33.333% - var(--tt-space-md) * 2 / 3);
		max-width: calc(33.333% - var(--tt-space-md) * 2 / 3);
	}
}
@media (min-width: 1100px) {
	.tt-cards .tt-card {
		flex-basis: calc(25% - var(--tt-space-md) * 3 / 4);
		max-width: calc(25% - var(--tt-space-md) * 3 / 4);
	}
}

.tt-card {
	border-radius: var(--tt-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--nv-site-bg);
	color: var(--nv-text-color);
	text-decoration: none;
}

.tt-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--nv-text-color) 12%, transparent);
}

.tt-card__image {
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: var(--nv-primary-accent);
}

/* Cards without an image get a subtle gradient + monogram look so they
 * don't render as a flat lavender block. */
.tt-card__image--placeholder {
	background: linear-gradient(135deg, var(--nv-primary-accent) 0%, var(--nv-primary-accent) 100%);
	position: relative;
}
.tt-card__image--placeholder::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--nv-site-bg) 25%, transparent) 0%, transparent 60%);
}

.tt-card__body {
	padding: var(--tt-space-md);
}

.tt-card__title {
	font-family: var(--tt-font-display);
	font-size: 1.25rem;
	margin: 0 0 var(--tt-space-xs);
	color: var(--nv-text-color);
}
.tt-card__subtitle {
	font-family: var(--tt-font-body);
	font-size: 0.95rem;
	color: color-mix(in srgb, var(--nv-text-color) 70%, transparent);
	margin: 0 0 var(--tt-space-xs);
}

.tt-card__excerpt {
	font-size: 1rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--nv-text-color) 75%, transparent);
	margin: 0 0 var(--tt-space-xs);
}

.tt-card .tt-loc-badges {
	margin-top: var(--tt-space-xs);
}

.tt-card .tt-loc-badge {
	font-size: 0.65rem;
	background: var(--nv-primary-accent);
	border-color: var(--nv-primary-accent);
	color: var(--nv-text-color);
}

/* ============================================================
   Team grid (avatar + name + role)
   ============================================================ */

.tt-team {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--tt-space-md);
	margin-top: var(--tt-space-md);
}

.tt-team__card {
	text-align: center;
	text-decoration: none;
}

.tt-team__avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: color-mix(in srgb, var(--nv-text-dark-bg) 10%, transparent);
	margin: 0 auto var(--tt-space-xs);
}

.tt-team__name {
	font-family: var(--tt-font-display);
	font-size: 1rem;
	margin: 0 0 0.2rem;
	color: var(--nv-site-bg);
}

.tt-team__role {
	font-size: 0.85rem;
	color: var(--nv-text-dark-bg);
	margin: 0;
}

/* ============================================================
   Schedule (olive section)
   ============================================================ */

.tt-schedule {
	background: color-mix(in srgb, var(--nv-text-color) 15%, transparent);
	border-radius: var(--tt-radius-card);
	padding: var(--tt-space-md);
	margin-top: var(--tt-space-md);
}

.tt-schedule__row {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	gap: var(--tt-space-md);
	align-items: center;
	padding: var(--tt-space-sm) 0;
	border-bottom: 1px solid color-mix(in srgb, var(--nv-text-dark-bg) 15%, transparent);
}

.tt-schedule__row:last-child {
	border-bottom: none;
}

.tt-schedule__time {
	font-family: var(--tt-font-display);
	color: var(--nv-primary-accent);
	font-size: 0.95rem;
}

.tt-schedule__name {
	color: var(--nv-site-bg);
	font-weight: 600;
}

.tt-schedule__teacher {
	color: var(--nv-text-dark-bg);
	font-size: 0.9rem;
}

/* ============================================================
   Vibe pills
   ============================================================ */

.tt-vibe-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tt-space-xs);
	margin-top: var(--tt-space-sm);
}

.tt-vibe-pill,
.tt-vibe-pill:link,
.tt-vibe-pill:visited,
.tt-vibe-pill:hover,
.tt-vibe-pill:focus,
.tt-vibe-pill:active {
	display: inline-block;
	font-family: var(--tt-font-display);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	padding: 0.5rem 1.1rem;
	border-radius: var(--tt-radius-pill);
	background: var(--nv-site-bg);
	color: var(--nv-text-color);
	text-decoration: none;
	border: 1px solid color-mix(in srgb, var(--nv-text-color) 15%, transparent);
}

.tt-vibe-pill:hover {
	background: var(--nv-primary-accent);
	color: var(--nv-text-color);
}

/* ============================================================
   Bottom CTA — dark with blue heading
   ============================================================ */

/* Bottom CTA — rendered as .wp-block-group with inline background.
   Only the copy max-width helper lives here now. */
.tt-cta__copy {
	max-width: 580px;
	margin: 0 auto var(--tt-space-md);
}

/* Vibe page location filter bar */
.tt-filter-bar {
	background: var(--nv-text-color);
	color: var(--nv-text-dark-bg);
	padding: var(--tt-space-sm) var(--tt-space-md);
	display: flex;
	gap: var(--tt-space-xs);
	align-items: center;
	flex-wrap: wrap;
	border-top: 1px solid color-mix(in srgb, var(--nv-text-dark-bg) 12%, transparent);
}
.tt-filter-bar__label {
	color: color-mix(in srgb, var(--nv-text-dark-bg) 50%, transparent);
	font-size: 0.85rem;
}
.tt-filter-pill {
	display: inline-block;
	font-family: var(--tt-font-display);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	padding: 0.4rem 0.9rem;
	border-radius: var(--tt-radius-pill);
	background: color-mix(in srgb, var(--nv-text-dark-bg) 8%, transparent);
	color: var(--nv-text-dark-bg);
	text-decoration: none;
	border: 1px solid color-mix(in srgb, var(--nv-text-dark-bg) 20%, transparent);
}
.tt-filter-pill--active {
	background: var(--nv-primary-accent);
	color: var(--nv-text-color);
	border-color: var(--nv-primary-accent);
}

/* Training "Practical Details" two-column block (olive section) */
.tt-practical {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--tt-space-md);
	margin-top: var(--tt-space-md);
}
@media (min-width: 600px) {
	.tt-practical { grid-template-columns: 1fr 1fr; }
}
.tt-practical__label {
	color: var(--nv-primary-accent);
	font-family: var(--tt-font-display);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 0.25rem;
}
.tt-practical__value {
	color: color-mix(in srgb, var(--nv-text-dark-bg) 85%, transparent);
	margin: 0;
}

/* Map embed wrapper for Location pages */
.tt-map {
	width: 100%;
	min-height: 280px;
	border-radius: var(--tt-radius-card);
	overflow: hidden;
	margin-top: var(--tt-space-sm);
	background: color-mix(in srgb, var(--nv-text-color) 5%, transparent);
}
.tt-map iframe {
	width: 100%;
	height: 100%;
	min-height: 280px;
	border: 0;
	display: block;
}

/* ============================================================
   Schedule (.tmom-* classes from the Momence plugin) — context fixes
   ============================================================
   When the schedule is rendered inside a dark-bg .wp-block-group
   the default cream cards lose contrast. Reskin to translucent dark
   cards with primary-accent times and cream titles. */
.tt-template .wp-block-group[style*="--nv-dark-bg"] .tmom-layout-row .tmom-card {
	background: color-mix(in srgb, var(--nv-text-color) 15%, transparent);
	border-color: color-mix(in srgb, var(--nv-text-dark-bg) 12%, transparent);
	color: var(--nv-text-dark-bg);
}
.tt-template .wp-block-group[style*="--nv-dark-bg"] .tmom-layout-row .tmom-card:hover {
	border-color: color-mix(in srgb, var(--nv-text-dark-bg) 28%, transparent);
}
.tt-template .wp-block-group[style*="--nv-dark-bg"] .tmom-card-title {
	color: var(--nv-site-bg);
}
.tt-template .wp-block-group[style*="--nv-dark-bg"] .tmom-card-teacher,
.tt-template .wp-block-group[style*="--nv-dark-bg"] .tmom-card-location {
	color: color-mix(in srgb, var(--nv-text-dark-bg) 75%, transparent);
}
.tt-template .wp-block-group[style*="--nv-dark-bg"] .tmom-hour,
.tt-template .wp-block-group[style*="--nv-dark-bg"] .tmom-day {
	color: var(--nv-primary-accent);
}

/* Capacity badges use the display font for consistency. */
.tmom-schedule .tmom-badge {
	font-family: var(--tt-font-display);
	letter-spacing: 0.04em;
	font-weight: 700;
}

/* Filter pills — same explicit-state pattern */
.tt-filter-pill,
.tt-filter-pill:link,
.tt-filter-pill:visited,
.tt-filter-pill:hover,
.tt-filter-pill:focus,
.tt-filter-pill:active {
	color: var(--nv-text-dark-bg);
	text-decoration: none;
}
.tt-filter-pill--active,
.tt-filter-pill--active:link,
.tt-filter-pill--active:visited,
.tt-filter-pill--active:hover,
.tt-filter-pill--active:focus,
.tt-filter-pill--active:active {
	color: var(--nv-text-color);
}

/* Card and team-card link colour preservation. !important needed because
   Neve theme applies underlines to anchors with higher specificity than
   our class selector. */
.tt-card,
.tt-card:link,
.tt-card:visited,
.tt-card:hover,
.tt-card:focus,
.tt-card:active {
	color: var(--nv-text-color);
	text-decoration: none !important;
}
.tt-team__card,
.tt-team__card:link,
.tt-team__card:visited,
.tt-team__card:hover,
.tt-team__card:focus,
.tt-team__card:active {
	text-decoration: none !important;
}

/* Single-button wrappers inside our templates (Meet the full team, bottom CTA,
   schedule scroll). Core .wp-block-buttons is flex by default, but Neve's
   reset can drop the display:flex so the inline justify-content:center on
   the wrapper has nothing to act on and the button falls back to inline
   placement at the start of the line. Force flex + gap so the inline
   alignment style still works. */
.tt-template .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tt-space-sm);
	align-items: center;
}