/*
Theme Name: Abule
Theme URI: https://abule.education/
Description: Abule identity, Vol. 01: paper and ink, one thread of color. Libre Caslon Text, Inter, IBM Plex Mono. Child theme of Twenty Twenty-Five.
Author: Floating Freedom Foundation
Template: twentytwentyfive
Version: 2.3.2
Requires at least: 6.7
Text Domain: abule
*/

/* Course pages still load the LMS's Bootstrap 3, which shrinks rem sizes and resets type. Restore the theme's base. */
html { font-size: 100%; }

html body {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
}

html body :is(h1, h2, h3) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* Italic is the voice of the individual: the reader's word, never decoration. */
em { font-style: italic; }

/* ---------- Header ---------- */

.ab-site-header {
	border-bottom: 1px solid var(--wp--preset--color--ink);
	padding-left: var(--wp--style--root--padding-left, clamp(16px, 4vw, 40px));
	padding-right: var(--wp--style--root--padding-right, clamp(16px, 4vw, 40px));
}

.ab-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	line-height: 0;
}

.ab-logo img { display: block; height: auto; }
.ab-logo .ab-logo-mark { width: 30px; }
.ab-logo .ab-logo-word { width: 92px; }

.ab-site-header .wp-block-navigation a { text-decoration: none; }
.ab-site-header .wp-block-navigation a:hover { color: var(--wp--preset--color--vermilion); }

.ab-site-header .wp-block-button__link {
	padding: 0.55rem 1rem;
	font-size: 0.8125rem;
}

/* ---------- Type helpers ---------- */

.ab-eyebrow,
.ab-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.5;
}

.ab-eyebrow.is-accent { color: var(--wp--preset--color--vermilion); }
.ab-label { color: var(--wp--preset--color--moss); }

.ab-display {
	font-size: var(--wp--preset--font-size--display) !important;
	line-height: 1.0 !important;
	letter-spacing: -0.02em;
}

.ab-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.4;
	max-width: 640px;
}

.ab-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.25rem;
	line-height: 1;
	color: var(--wp--preset--color--moss);
	margin-bottom: 0.5rem !important;
}

/* ---------- Hero ---------- */

.ab-hero {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.ab-hero .ab-hero-row {
	align-items: stretch !important;
	gap: clamp(32px, 5vw, 72px) !important;
}

.ab-hero .ab-hero-row > .wp-block-group:first-child {
	flex: 1 1 520px;
	min-width: 0;
	align-self: center;
}

.ab-weave {
	flex: 0 1 380px;
	margin: 0 !important;
	border: 1px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	overflow: hidden;
}

.ab-weave img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
}

/* ---------- Sections ---------- */

.ab-section {
	border-top: 1px solid var(--wp--preset--color--ink);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--60);
}

.ab-section-head {
	align-items: baseline !important;
	margin-bottom: var(--wp--preset--spacing--40);
}

.ab-section-head h2 { margin: 0; }

ul.ab-ruled {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.ab-ruled li {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding: 0.7rem 0;
}

ul.ab-ruled li:last-child { border-bottom: 1px solid var(--wp--preset--color--rule); }

/* Sandstone field for cards and asides. */
.ab-field {
	background: var(--wp--preset--color--sandstone);
	padding: clamp(20px, 3vw, 32px) !important;
}

/* The tagline, set as the guide shows it: three short lines, "you" in the thread color. */
.ab-tagline {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0;
}

.ab-tagline em,
em.ab-you { color: var(--wp--preset--color--vermilion); }

/* Reversed (ink) sections. */
.ab-reversed {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.ab-reversed :is(h1, h2, h3, p, li, a) { color: var(--wp--preset--color--paper); }
.ab-reversed .ab-eyebrow,
.ab-reversed .ab-tagline em { color: var(--wp--preset--color--ochre); }

/* ---------- Buttons ---------- */

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* ---------- Footer ---------- */

.ab-site-footer {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.ab-site-footer :is(p, li, a, h4) { color: var(--wp--preset--color--paper); }
.ab-site-footer h4 { color: var(--wp--preset--color--ochre); }
.ab-site-footer a { text-decoration: none; }
.ab-site-footer a:hover { text-decoration: underline; color: var(--wp--preset--color--paper); }
.ab-site-footer ul.ab-ruled li { border-color: rgba(243, 240, 232, 0.22); }
.ab-site-footer .ab-signature img { width: min(100%, 420px); height: auto; display: block; }

.ab-band {
	display: block;
	width: 100%;
	height: 48px;
	background: url("assets/brand/abule-weave-band.svg") center / auto 100% repeat-x;
}

/* ---------- Fluent Forms ---------- */

.frm-fluent-form { font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); }
.frm-fluent-form .ff-el-input--label label { font-weight: 500; color: var(--wp--preset--color--ink); }
.frm-fluent-form .ff-el-section-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.75rem;
}
.frm-fluent-form .ff-el-form-control,
.frm-fluent-form .ff-el-datepicker {
	background: #FFFDF8 !important;
	border: 1px solid var(--wp--preset--color--ink) !important;
	border-radius: 0 !important;
	opacity: 1 !important;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
}
.frm-fluent-form .ff-el-form-control:focus { outline: 2px solid var(--wp--preset--color--vermilion); outline-offset: 1px; }
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form .ff-btn-next,
.frm-fluent-form .ff-btn-prev {
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 500 !important;
	border-radius: 0 !important;
	padding: 12px 22px !important;
}
.frm-fluent-form .ff-btn-submit {
	background: var(--wp--preset--color--vermilion) !important;
	border: 1px solid var(--wp--preset--color--vermilion) !important;
	color: var(--wp--preset--color--paper) !important;
}
.frm-fluent-form .ff-btn-next,
.frm-fluent-form .ff-btn-prev {
	background: transparent !important;
	border: 1px solid var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--ink) !important;
}
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form .ff-btn-next:hover,
.frm-fluent-form .ff-btn-prev:hover {
	background: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--paper) !important;
}
.frm-fluent-form .ff-step-titles li { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; }
.frm-fluent-form .ff-step-titles li.ff_active:before,
.frm-fluent-form .ff-step-titles li.ff_completed:before { background: var(--wp--preset--color--vermilion) !important; border-color: var(--wp--preset--color--vermilion) !important; }
.frm-fluent-form .text-danger,
.frm-fluent-form .error { color: var(--wp--preset--color--vermilion); }

/* ---------- MasterStudy course pages ---------- */

[class^="masterstudy"],
[class*=" masterstudy"],
.stm_lms_courses,
.stm-lms-wrapper {
	font-family: var(--wp--preset--font-family--body);
}

.masterstudy-single-course__title,
.masterstudy-single-course h1,
.stm-lms-wrapper h1,
.stm_lms_courses_wrapper h1 {
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: -0.01em;
}

[class*="masterstudy-button"],
.masterstudy-buy-button__link,
.btn.btn-default,
.stm_lms_courses_wrapper .btn {
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

[class*="masterstudy"] [class*="__card"],
.stm_lms_courses__single,
.stm_lms_courses__filter {
	border-radius: 0 !important;
}

/* Older catalog components hard-code blue; bring them to ink. */
.stm_lms_courses_wrapper .lms-search-btn,
.stm_lms_courses_wrapper .sort_label,
.stm_lms_courses_wrapper input.heading_font,
.stm_lms_load_more_courses {
	background-color: var(--wp--preset--color--ink) !important;
	border-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--paper) !important;
	border-radius: 0 !important;
}

.stm_lms_courses_wrapper .stmlms-grid.active,
.stm_lms_courses_wrapper .stmlms-list.active { color: var(--wp--preset--color--vermilion) !important; }

.stm_lms_courses__filter.active { border-top-color: var(--wp--preset--color--ink) !important; }

/* ---------- Phones ---------- */

@media (max-width: 781px) {
	.ab-weave { flex-basis: 100%; }
	.ab-weave img { min-height: 0; max-height: 200px; }
}

/* Constrained layouts centre narrow children; the lead and tagline stay on the left edge. */
.is-layout-constrained > :is(.ab-lead, .ab-tagline, .ab-statement) {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* The ink sign-off runs edge to edge and sits flush on the footer band. */
.ab-reversed.alignfull {
	margin-bottom: 0;
	border-top: 0;
}

.ab-reversed.alignfull {
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 40px)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 40px)) !important;
	padding-left: var(--wp--style--root--padding-left, 40px);
	padding-right: var(--wp--style--root--padding-right, 40px);
	max-width: none !important;
}

/* The footer band follows the page directly. */
.wp-site-blocks > .wp-block-template-part:last-child,
.wp-site-blocks > footer:last-child { margin-block-start: 0; }

/* Course sidebar and curriculum cards: sandstone-tinted paper instead of blue-grey. */
.masterstudy-single-course-modern-curriculum__details,
.masterstudy-single-course-modern-curriculum__additional-info,
.masterstudy-single-course-modern-curriculum__sidebar,
.masterstudy-curriculum-list__item {
	background-color: #ECE6D9 !important;
	border-radius: 0 !important;
}

/* Form step titles: ink, not the plugin's blue. */
.frm-fluent-form .ff-step-titles li,
.frm-fluent-form .ff-step-titles li.ff_active { color: var(--wp--preset--color--ink) !important; }

/* ---------- Footer additions ---------- */

.ab-footer-mission { font-size: var(--wp--preset--font-size--lead); line-height: 1.4; max-width: 460px; margin-top: 1.5rem !important; }

.ab-social { display: flex; gap: 10px; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ab-social a,
.ab-social .ab-social-pending {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(243, 240, 232, 0.45);
	color: var(--wp--preset--color--paper);
}
.ab-social svg { width: 20px; height: 20px; fill: currentColor; }
.ab-social a:hover { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); text-decoration: none; }
.ab-social .ab-social-pending { opacity: 0.45; cursor: default; }

.ab-footer-statements {
	margin-top: var(--wp--preset--spacing--50) !important;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgba(243, 240, 232, 0.22);
	gap: clamp(24px, 4vw, 56px) !important;
}
.ab-footer-statements p { font-size: 0.9375rem; line-height: 1.6; max-width: 560px; color: rgba(243, 240, 232, 0.86); }

.ab-footer-legal {
	margin-top: var(--wp--preset--spacing--40) !important;
	padding-top: 1rem;
	border-top: 1px solid rgba(243, 240, 232, 0.22);
	gap: 12px 32px !important;
}
.ab-footer-legal p { margin: 0; font-size: 0.8125rem; color: rgba(243, 240, 232, 0.75); max-width: 820px; }
.ab-footer-legal a { color: var(--wp--preset--color--paper); text-decoration: underline; }

/* ---------- Texture: strip, bands, cards ---------- */

/* Values strip under the hero, set like the guide's running heads. */
.ab-strip {
	border-top: 1px solid var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--ink);
	padding-top: 0.9rem !important;
	padding-bottom: 0.9rem !important;
	gap: 10px 28px !important;
}
.ab-strip p {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.ab-strip p::before {
	content: "";
	width: 9px;
	height: 9px;
	background: var(--wp--preset--color--ink);
	display: inline-block;
}
.ab-strip p:nth-child(2)::before { background: var(--wp--preset--color--vermilion); }

/* Full-width sandstone band. */
.ab-sand.alignfull {
	background: var(--wp--preset--color--sandstone);
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 40px)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 40px)) !important;
	padding-left: var(--wp--style--root--padding-left, 40px);
	padding-right: var(--wp--style--root--padding-right, 40px);
	max-width: none !important;
	border-top: 0;
}
.ab-sand .ab-big {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	max-width: 900px;
}

/* Bordered cards for numbered points. */
.ab-card {
	border: 1px solid var(--wp--preset--color--ink);
	padding: clamp(20px, 2.5vw, 28px) !important;
	height: 100%;
	background: rgba(255, 253, 248, 0.45);
}
.wp-block-columns.ab-cards { align-items: stretch !important; }

/* Pull quote with the thread as a rule. */
.ab-pull p {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	line-height: 1.25;
	margin: 0;
}

/* Small-by-design seat grid, large. */
.ab-seats-large img { width: min(100%, 340px); height: auto; display: block; }


/* Policy pages read at a comfortable measure. */
.ab-legal.is-layout-constrained > * { max-width: 760px; margin-left: 0 !important; }
.ab-legal h3 { margin-top: 2.25rem; }


.ab-strip + .ab-section { border-top: 0; }

/* ---------- Split hero: the photo is half the composition ---------- */

.ab-hero-split.alignfull {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	min-height: clamp(560px, 80vh, 860px);
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 40px)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 40px)) !important;
	max-width: none !important;
	padding: 0 !important;
	gap: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--ink);
}

.ab-hero-split > .ab-hero-copy {
	align-self: center;
	margin: 0 !important;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
	padding-right: clamp(24px, 5vw, 72px);
	/* Line the copy up with the 1200px content column. */
	padding-left: max(var(--wp--style--root--padding-left, 40px), calc((100vw - 1200px) / 2));
}

.ab-hero-split > .ab-hero-media {
	margin: 0 !important;
	position: relative;
	min-height: 100%;
	background: var(--wp--preset--color--sandstone);
}

.ab-hero-split > .ab-hero-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
	display: block;
}

.ab-hero-split + .ab-strip { border-top: 0; }

@media (max-width: 781px) {
	.ab-hero-split.alignfull {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.ab-hero-split > .ab-hero-media {
		order: -1;
		height: min(64vh, 560px);
	}
	.ab-hero-split > .ab-hero-copy {
		padding: 36px var(--wp--style--root--padding-right, 16px) 44px var(--wp--style--root--padding-left, 16px);
	}
}

/* ---------- About: the brandmark, explained ---------- */

.ab-mark-diagram svg { display: block; width: 100%; height: auto; }
.ab-mark-diagram text { font-family: var(--wp--preset--font-family--mono); font-size: 13px; fill: var(--wp--preset--color--paper); }

ol.ab-legend { list-style: none; margin: 0; padding: 0; counter-reset: legend; }
ol.ab-legend li {
	counter-increment: legend;
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid var(--wp--preset--color--rule);
}
ol.ab-legend li:last-child { border-bottom: 1px solid var(--wp--preset--color--rule); }
ol.ab-legend li::before {
	content: counter(legend);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}
ol.ab-legend strong { display: block; font-weight: 500; }

/* ---------- About: think and do ---------- */

.ab-quote-photo { margin: 0 !important; }
.ab-quote-photo img { display: block; width: 100%; height: auto; }
.ab-quote-photo figcaption { margin-top: 10px; }

.ab-bigquote p {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.45rem, 2.6vw, 2rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0;
}
.ab-bigquote cite {
	display: block;
	margin-top: 1rem;
	font-style: normal;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--moss);
}

/* Closing statement inside a section. */
.ab-statement {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
	max-width: 900px;
}

/* ---------- The Abule learning cycle ---------- */

.ab-cycle {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 420px) minmax(0, 1fr);
	grid-template-areas: ". s1 ." "s4 ring s2" ". s3 .";
	align-items: center;
	gap: 10px clamp(20px, 3vw, 40px);
	margin-top: var(--wp--preset--spacing--40);
}
.ab-cycle-center { grid-area: ring; }
.ab-cycle-ring { display: block; width: 100%; height: auto; }
.ab-cycle-ring text.n { font-family: var(--wp--preset--font-family--display); font-size: 26px; fill: var(--wp--preset--color--ink); }
.ab-cycle-ring text.n.on { fill: var(--wp--preset--color--paper); }
.ab-cycle-ring text.k { font-family: var(--wp--preset--font-family--mono); font-size: 13px; letter-spacing: 0.24em; fill: var(--wp--preset--color--ink); }
.ab-cycle-ring text.t { font-family: var(--wp--preset--font-family--display); font-size: 34px; fill: var(--wp--preset--color--ink); }

.ab-stage h3 { margin: 0 0 6px; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.1; }
.ab-stage h3 em { color: var(--wp--preset--color--vermilion); }
.ab-stage p { margin: 0; max-width: 300px; }
.ab-stage-n { display: none; }
.ab-stage.s1 { grid-area: s1; text-align: center; }
.ab-stage.s1 p { margin: 0 auto; }
.ab-stage.s2 { grid-area: s2; text-align: left; }
.ab-stage.s3 { grid-area: s3; text-align: center; }
.ab-stage.s3 p { margin: 0 auto; }
.ab-stage.s4 { grid-area: s4; text-align: right; }
.ab-stage.s4 p { margin-left: auto; }

@media (max-width: 781px) {
	.ab-cycle {
		grid-template-columns: 1fr;
		grid-template-areas: "ring" "s1" "s2" "s3" "s4";
		gap: 0;
	}
	.ab-cycle-center { max-width: 300px; margin: 0 auto 20px; width: 100%; }
	.ab-stage,
	.ab-stage.s1,
	.ab-stage.s2,
	.ab-stage.s3,
	.ab-stage.s4 {
		text-align: left;
		display: grid;
		grid-template-columns: 34px 1fr;
		column-gap: 14px;
		padding: 14px 0;
		border-top: 1px solid var(--wp--preset--color--rule);
	}
	.ab-stage.s4 { border-bottom: 1px solid var(--wp--preset--color--rule); }
	.ab-stage-n {
		display: inline-flex;
		grid-row: span 2;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		border: 1px solid var(--wp--preset--color--ink);
		align-items: center;
		justify-content: center;
		font-family: var(--wp--preset--font-family--display);
	}
	.ab-stage.s1 .ab-stage-n { background: var(--wp--preset--color--vermilion); border-color: var(--wp--preset--color--vermilion); color: var(--wp--preset--color--paper); }
	.ab-stage p,
	.ab-stage.s1 p,
	.ab-stage.s3 p,
	.ab-stage.s4 p { margin: 0; max-width: none; }
}

/* The split hero sits directly under the header. */
.wp-site-blocks > main:has(.ab-hero-split) { margin-block-start: 0 !important; }