/*
Theme Name: BASIC Borrego
Theme URI: https://borregobasic.org/
Author: BASIC Borrego Springs
Description: Classic-PHP sibling of Borrego BASIC. Same design system, same rendered site — but the page composition, the menus, the photographs and the flyout copy all live in the database, where staff can edit them without a deploy. Theme files hold the design system; the database holds the site.
Version: 0.2.1
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: basic-borrego
Tags: education, non-profit, editorial, one-column, custom-menu, block-patterns
*/

/*
 * THIS THEME LIVES IN GIT — edit it there, not here.
 *
 * The whole theme is committed to the borregobasic-web repository. Appearance ->
 * Theme File Editor and SSH both still work, and both are traps: they change
 * this server only, the checkout stays green, and the next deploy reverts the
 * edit with no diff to show for either event.
 *
 * WHY THIS THEME IS CLASSIC AND NOT A BLOCK THEME
 *
 * Short version: the Site Editor does not exist for classic themes, which
 * removes the wp_template / wp_template_part / wp_global_styles shadowing
 * failure mode and lets Editors hold `edit_theme_options` safely — which is
 * what makes Appearance -> Menus available and lets a 61.5 KB bespoke
 * navigation subsystem be deleted rather than ported.
 *
 * Full reasoning, including what the choice costs: docs/theme-architecture.md.
 *
 * WHY THIS FILE IS SHORT
 *
 * theme.json carries the design system. The stylesheets in assets/css/ carry
 * everything theme.json cannot express, in a deliberate cascade order enforced
 * through wp_enqueue_style dependencies in inc/enqueue.php:
 *
 *     style.css -> chrome.css -> sections.css -> components.css
 *               -> art-direction.css -> motion.css
 *
 * This file is only the base layer: section shapes, wave masks, structural
 * helpers, and the heading rules that apply inside coloured bands.
 */

/* --------------------------------------------------------------------------
   Organic section shapes
   -------------------------------------------------------------------------- */

/*
 * Wave-bottomed band. Used on the hero and the mission/donor bands where the
 * mockup shows a soft horizontal curve separating two color fields.
 */
.bb-shape-wave-bottom {
	-webkit-mask-image: var(--bb-wave-bottom);
	mask-image: var(--bb-wave-bottom);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.bb-shape-wave-top {
	-webkit-mask-image: var(--bb-wave-top);
	mask-image: var(--bb-wave-top);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/*
 * Organic "blob" frame — the soft asymmetric rounding on the hero photo and the
 * three program cards. border-radius with eight values gives the hand-drawn
 * asymmetry without an SVG.
 */
.bb-shape-blob {
	border-radius: 42% 58% 38% 62% / 46% 38% 62% 54%;
	overflow: hidden;
}

.bb-shape-blob-soft {
	border-radius: var(--bb-radius-blob-soft);
	overflow: hidden;
}

.bb-shape-blob-card {
	border-radius: 48% 52% 44% 56% / 8% 8% 6% 6%;
	overflow: hidden;
}

/* Pill / lozenge used behind the quote band. */
.bb-shape-lozenge {
	border-radius: 0 0 48% 12% / 0 0 34% 10%;
	overflow: hidden;
}

/*
 * Safari and iOS Safari need the -webkit- prefixed mask properties above, and
 * historically mis-render mask-image on elements that also create a stacking
 * context via transform. Isolation keeps compositing predictable.
 */
.bb-shape-wave-bottom,
.bb-shape-wave-top,
.bb-shape-blob,
.bb-shape-blob-soft,
.bb-shape-blob-card,
.bb-shape-lozenge {
	isolation: isolate;
}

/* --------------------------------------------------------------------------
   Wave mask definitions
   -------------------------------------------------------------------------- */

:root {
	--bb-wave-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M0,0 H100 V88 C74,100 58,84 34,92 C18,97 8,94 0,90 Z' fill='%23fff'/%3E%3C/svg%3E");
	/* The organic frame used on masthead photographs. Declared as a token
	   because motion.css needs the same shape for the window a photograph slides
	   inside during a page transition, and two copies would drift apart. */
	--bb-radius-blob-soft: 12% 40% 14% 40% / 30% 14% 36% 16%;

	--bb-wave-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M0,12 C16,2 30,14 52,8 C72,2 86,10 100,4 V100 H0 Z' fill='%23fff'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Structural helpers
   -------------------------------------------------------------------------- */

/* Decorative botanical sprigs — hidden from assistive tech via aria-hidden in
   the pattern markup; this only positions them. */
.bb-sprig {
	position: absolute;
	pointer-events: none;
	user-select: none;
	opacity: 0.55;
	z-index: 0;
}

.bb-sprig--right {
	right: 0;
	bottom: 0;
	width: min(18vw, 180px);
}

.bb-sprig--left {
	left: 0;
	top: 0;
	width: min(14vw, 140px);
}

/* Eyebrow label above section headings ("EVENT", "FEATURED PATHWAY"). */
.bb-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

/*
 * Underline accent beneath section headings. Uses currentColor at reduced
 * alpha so it inherits whatever color the heading has.
 */
.bb-underline-accent {
	position: relative;
	padding-bottom: 0.35em;
}

.bb-underline-accent::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.2em;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--terracotta);
}


/* --------------------------------------------------------------------------
   Headings inside coloured bands
   --------------------------------------------------------------------------
   theme.json sets a global heading colour (forest) so headings stand apart from
   body text on cream. That rule also lands on headings inside the forest and
   terracotta bands, where it renders forest-on-forest — invisible — and
   forest-on-terracotta at roughly 2:1. Inheriting from the band is correct in
   every one of those cases, because each band already declares a text colour
   that the contrast gate checks.

   theme.json emits its element styles inside :where(), which has zero
   specificity, so a single class selector wins cleanly. */

.has-forest-background-color :is( h1, h2, h3, h4, h5, h6 ),
.has-forest-deep-background-color :is( h1, h2, h3, h4, h5, h6 ),
.has-terracotta-text-background-color :is( h1, h2, h3, h4, h5, h6 ),
.bb-c2g :is( h1, h2, h3, h4, h5, h6 ) {
	color: inherit;
}

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

/* Kept in the BASE layer rather than motion.css so it applies even if motion.css
   ever fails to load — a user who has asked the operating system for less motion
   should not depend on the last stylesheet in the chain arriving. */
@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   The <main> element
   --------------------------------------------------------------------------
   Two shapes, chosen per page by basic_borrego_is_composed() rather than by
   template file — see inc/template-tags.php for why that judgement is made from
   the content instead of from a page template.

   ARTICLE  title + prose, constrained, with the vertical rhythm the block
            theme's page.html declared inline (spacing 60 above, 70 below).
   FLUSH    a composition of full-bleed patterns: no padding, nothing between
            the header and the first band. */

.bb-main--article {
	padding-block-start: var(--wp--preset--spacing--60);
	padding-block-end: var(--wp--preset--spacing--70);
}

.bb-main--flush {
	padding-block: 0;
}

/* The post title on article pages. Kept here rather than in sections.css: it is
   part of the page frame, not of any one section. */
.wp-block-post-title {
	margin-block-end: var(--wp--preset--spacing--50);
}

/* --------------------------------------------------------------------------
   Skip link
   --------------------------------------------------------------------------
   A classic theme gets no skip link for free. Visually hidden until focused,
   then pinned to the top-left — the standard treatment, and the only way a
   keyboard user gets past a nav with a mega panel in it without tabbing through
   every link in the panel. */

.skip-link.screen-reader-text {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--forest);
	border-radius: 0 0 6px 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	z-index: 100000;
}

.skip-link.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	left: 0;
	top: 0;
	width: auto;
	position: fixed;
	display: block;
}

/* screen-reader-text itself: core styles it only when a block theme or
   wp-block-styles supplies it, and this theme leans on it in the wordmark and
   the skip link. Declared here so it never depends on load order. */
.screen-reader-text {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}