/* Authentic Learning Lab — component layer on top of theme.json.
   Brand: Plum & Citrus Bible v1.1. Colors come from presets only. */

:root {
	--all-plum: var(--wp--preset--color--plum);
	--all-aub: var(--wp--preset--color--aubergine);
	--all-cit: var(--wp--preset--color--citrus);
	--all-lil: var(--wp--preset--color--lilac);
	--all-line: var(--wp--preset--color--line);
	--all-muted: var(--wp--preset--color--muted);
	--all-fh: var(--wp--preset--font-family--manrope);
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
body { -webkit-font-smoothing: antialiased; }

/* Visible focus everywhere (WCAG 2.2: 2.4.7, 2.4.11). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--all-plum);
	outline-offset: 3px;
}

/* ---------- Headline mark: citrus underline on one phrase per heading ---------- */
mark.all-mark {
	background: none;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--all-cit);
	text-decoration-thickness: 0.15em;
	text-underline-offset: 0.16em;
	text-decoration-skip-ink: none;
}

/* ---------- Text styles ---------- */
.is-style-eyebrow {
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--all-plum);
}
.is-style-eyebrow::before {
	content: "";
	display: inline-block;
	width: 0.62em;
	height: 0.62em;
	background: var(--all-cit);
	margin-right: 0.55em;
	vertical-align: 0.02em;
}
.is-style-lead { font-size: var(--wp--preset--font-size--lead); max-width: 60ch; }
.is-style-micro { font-size: 0.9375rem; color: var(--all-muted); }

/* ---------- Lists ---------- */
ul.is-style-squares { list-style: none; padding-left: 0; display: grid; gap: 0.625rem; }
ul.is-style-squares li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; }
ul.is-style-squares li::before { content: ""; width: 10px; height: 10px; background: var(--all-plum); margin-top: 0.55em; }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--all-plum);
	border-color: var(--all-plum);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover { background: var(--all-plum); color: #fff; }
.wp-block-button__link { transition: background-color .15s, color .15s; }

/* ---------- Sections ---------- */
.is-style-section-lilac { background: var(--all-lil); }
.is-style-section-citrus { background: var(--all-cit); color: var(--all-aub); }
.is-style-section-aubergine { background: var(--all-aub); color: #fff; }

.is-style-section-citrus .is-style-eyebrow,
.is-style-section-citrus .is-style-micro,
.is-style-section-citrus a:where(:not(.wp-element-button)) { color: var(--all-aub); }
.is-style-section-citrus .is-style-eyebrow::before { background: var(--all-aub); }
/* Bible v1.1: buttons flip to aubergine on citrus. */
.is-style-section-citrus .wp-element-button,
.is-style-section-citrus .wp-block-button__link { background: var(--all-aub); color: #fff; border-color: var(--all-aub); }
.is-style-section-citrus .wp-block-button__link:hover { background: #fff; color: var(--all-aub); }
.is-style-section-citrus .is-style-secondary .wp-block-button__link { background: transparent; color: var(--all-aub); border-color: var(--all-aub); }
.is-style-section-citrus ul.is-style-squares li::before { background: var(--all-aub); }

.is-style-section-aubergine .is-style-eyebrow { color: var(--all-cit); }
.is-style-section-aubergine .is-style-micro { color: #E9DFEB; }
.is-style-section-aubergine a:where(:not(.wp-element-button)) { color: #fff; }
.is-style-section-aubergine mark.all-mark { text-decoration: none; color: var(--all-cit); }
.is-style-section-aubergine ul.is-style-squares li::before { background: var(--all-cit); }
.is-style-section-aubergine .is-style-secondary .wp-block-button__link { background: transparent; color: #fff; border-color: #fff; }

/* ---------- Cards ---------- */
.is-style-card { border-top: 4px solid var(--all-cit); padding-top: 1rem; }
.is-style-section-citrus .is-style-card { border-top-color: var(--all-aub); }
.all-num {
	font-family: var(--all-fh);
	font-weight: 800;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--all-plum);
}
.all-q { font-family: var(--all-fh); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.is-style-card p:not(.all-num):not(.all-q) { font-size: 1rem; }

/* ---------- Open-square frame (logo motif: true square, opening on the lower right edge) ---------- */
.is-style-frame { position: relative; border: 2px solid var(--all-plum); }
.is-style-frame::after {
	content: "";
	position: absolute;
	right: -2px;
	bottom: 14%;
	width: 2px;
	height: 24%;
	background: var(--wp--preset--color--white);
}
.is-style-section-lilac .is-style-frame::after { background: var(--all-lil); }
.is-style-section-aubergine .is-style-frame { border-color: #fff; }
.is-style-section-aubergine .is-style-frame::after { background: var(--all-aub); }

/* ---------- Citrus prompt panel ---------- */
.is-style-callout { background: var(--all-cit); color: var(--all-aub); }
.is-style-callout .is-style-eyebrow { color: var(--all-aub); }
.is-style-callout .is-style-eyebrow::before { background: var(--all-aub); }
.is-style-callout ul.is-style-squares li::before { background: var(--all-aub); }

/* ---------- Three strands (learners / educators / institution) ---------- */
.all-strands > * { border-top: 2px solid currentColor; padding-block: 1.125rem; margin: 0 !important; }
.all-strands > p { display: grid; grid-template-columns: 10rem 1fr; gap: 1.5rem; align-items: baseline; }
.all-strands strong { font-family: var(--all-fh); font-size: 1.25rem; }

/* ---------- Photos ---------- */
.wp-block-image.is-style-tagged { position: relative; margin: 0; }
.wp-block-image.is-style-tagged img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-block-image.is-style-tagged figcaption {
	position: absolute;
	left: 10px;
	bottom: 10px;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	background: #fff;
	color: var(--all-aub);
	padding: 3px 8px;
	border-left: 4px solid var(--all-cit);
	max-width: 90%;
	text-align: left;
}

/* ---------- Announcement bar ---------- */
.all-bar { font-size: 0.9375rem; }
.all-bar a { color: var(--all-aub); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 700px) { .all-bar .all-long { display: none; } }
@media (min-width: 701px) { .all-bar .all-short { display: none; } }

/* ---------- Header ---------- */
.all-header { border-bottom: 1px solid var(--all-line); }
.all-header .wp-block-image img { display: block; }
.all-logo-mark { display: none !important; }
@media (max-width: 781px) {
	.all-logo-full { display: none !important; }
	.all-logo-mark { display: block !important; }
	.all-header .all-nav-cta { display: none; }
}
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--all-cit); }
.wp-block-navigation__responsive-container.is-menu-open { background: #fff; padding: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.25rem; }
.wp-block-navigation__submenu-container { border: 1px solid var(--all-line) !important; padding: 0.5rem 0 !important; }
.wp-block-navigation .wp-block-navigation__submenu-container a { padding: 0.5rem 1rem !important; }

/* ---------- Footer ---------- */
.all-footer { font-size: 0.96875rem; }
.all-footer h2 { font-size: 0.875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--all-cit); font-family: var(--wp--preset--font-family--source-sans); font-weight: 600; }
.all-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.all-footer a:not(.wp-element-button) { color: #fff; text-decoration: none; }
.all-footer p a:not(.wp-element-button) { text-decoration: underline; text-underline-offset: 2px; }
.all-footer a:hover { text-decoration: underline; }
.all-footer .is-style-micro { color: #E9DFEB; }
.all-footer .all-fine { border-top: 1px solid #6d5b72; font-size: 0.875rem; }

/* ---------- Diagram swap (usage guide: horizontal on desktop, 4:5 below 768px) ---------- */
.all-show-m { display: none !important; }
@media (max-width: 767px) {
	.all-show-d { display: none !important; }
	.all-show-m { display: block !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.wp-block-buttons { flex-direction: column; align-items: stretch; }
	.wp-block-buttons .wp-block-button__link { width: 100%; text-align: center; }
	.all-strands > p { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Forms (rendered by the all-core plugin) ---------- */
.all-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.125rem 1rem;
	background: #fff;
	color: var(--all-aub);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 2px solid var(--all-aub);
	font-size: 1rem;
}
.all-form > *:not(.all-form__field) { grid-column: 1 / -1; }
.all-form__field { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.all-form__field--wide { grid-column: 1 / -1; }
.all-form label, .all-form legend { font-weight: 600; }
.all-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.all-form legend { margin-bottom: 0.25rem; padding: 0; }
.all-form input[type="text"], .all-form input[type="email"], .all-form input[type="url"], .all-form select, .all-form textarea {
	width: 100%;
	min-height: 46px;
	padding: 0.6rem 0.75rem;
	border: 1.5px solid var(--all-aub);
	border-radius: 0;
	background: #fff;
	color: var(--all-aub);
	font: inherit;
	box-sizing: border-box;
}
.all-form textarea { min-height: 110px; resize: vertical; }
.all-form :is(input, select, textarea):focus-visible { outline: 3px solid var(--all-plum); outline-offset: 2px; }
.all-form__opt { display: flex; gap: 0.6rem; align-items: flex-start; }
.all-form__opt input { width: 20px; height: 20px; margin: 0.15rem 0 0; accent-color: var(--all-aub); flex: none; }
.all-form__opt label { font-weight: 400; }
.all-form__help { font-size: 0.875rem; color: var(--all-muted); margin: 0; }
.all-form__error { font-size: 0.9375rem; color: #9B1C31; font-weight: 600; margin: 0; }
.all-form .has-error :is(input, select, textarea) { border-color: #9B1C31; border-width: 2px; }
.all-form__summary { border: 2px solid #9B1C31; padding: 0.75rem 1rem; }
.all-form__summary ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.all-form__summary a { color: #9B1C31; }
.all-form__req { font-size: 0.875rem; color: var(--all-muted); margin: 0; }
.all-form__star { color: var(--all-plum); }
.all-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.all-form .wp-block-buttons { margin-top: 0.25rem; }
.all-form button.wp-element-button { cursor: pointer; }
.all-form--done { display: block; }
.all-form__done-title { font-family: var(--all-fh); font-weight: 700; font-size: var(--wp--preset--font-size--card); margin: 0 0 0.5rem; }
@media (max-width: 600px) { .all-form { grid-template-columns: 1fr; } }

/* ---------- Product cards / status ---------- */
.all-status { font-size: 0.9375rem; border-top: 1px solid var(--all-line); padding-top: 0.75rem; }

/* ---------- FAQ ---------- */
.all-faq .wp-block-details { border-top: 1px solid var(--all-line); padding: 1rem 0; }
.all-faq .wp-block-details:last-child { border-bottom: 1px solid var(--all-line); }
.all-faq summary { font-family: var(--all-fh); font-weight: 700; font-size: 1.1875rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.all-faq summary::-webkit-details-marker { display: none; }
.all-faq summary::after { content: "+"; color: var(--all-plum); font-size: 1.5rem; line-height: 1; }
.all-faq details[open] summary::after { content: "–"; }
.all-faq details p { margin-top: 0.75rem; }

/* anchor targets clear the header */
[id] { scroll-margin-top: 1.5rem; }