/**
 * LAHC Design System
 *
 * The theme ships a pre-compiled Tailwind build with no build step, so any new
 * utility class written in a template silently does nothing. These component
 * classes are the canonical patterns for headings, buttons and section rhythm;
 * templates should use them instead of ad-hoc utility stacks.
 *
 * Values were taken from the dominant existing patterns so applying them shifts
 * as little as possible:
 *   - heading tiers  <- the 6-block "clamp(26px,3.5vw,40px)" majority
 *   - buttons        <- the existing .btn-p component in style.css
 *   - section rhythm <- "py-16 lg:py-20", the most common of 14 variants
 *
 * @package lahc
 */

/* ---------------------------------------------------------------------------
 * 1. HEADING TIERS
 *
 * Four tiers replace the 23 different clamp() scales previously in use.
 * Every tier shares tracking, leading and color so adjacent blocks read as the
 * same design language. Bottom margin is deliberately NOT set here: some blocks
 * rely on a parent flex/grid gap. Use .lahc-h-mb when a heading needs its own
 * spacing.
 * ------------------------------------------------------------------------- */

.lahc-h-hero,
.lahc-h-section,
.lahc-h-sub,
.lahc-h-card {
	font-weight: 800;
	letter-spacing: -0.025em;   /* tracking-tight */
	text-wrap: balance;
}

/* Tier 1 - page hero <h1>. */
.lahc-h-hero {
	font-size: clamp(36px, 5.5vw, 68px);
	line-height: 1.06;
}

/* Tier 2 - primary section <h2>. The workhorse. */
.lahc-h-section {
	font-size: clamp(26px, 3.5vw, 40px);
	line-height: 1.15;
}

/* Tier 3 - secondary heading inside a section. */
.lahc-h-sub {
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.25;
}

/* Tier 4 - card / list-item title. */
.lahc-h-card {
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.015em;
}

/* Opt-in bottom margin for headings that are not spaced by a parent gap. */
.lahc-h-mb { margin-bottom: 2.5rem; }
@media (max-width: 1023px) { .lahc-h-mb { margin-bottom: 2rem; } }

/* ---------------------------------------------------------------------------
 * 2. BUTTONS
 *
 * style.css already defines .btn-p / .btn-s / .btn-sw. These add the two
 * legitimate variants that were previously hand-rolled, and align every CTA on
 * one hover language: orange darkens to org-dk. Nothing hovers to black.
 * ------------------------------------------------------------------------- */

.btn-p-lg,
.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

/* Large primary CTA - for panel//accordion footers where 13px reads too small. */
.btn-p-lg {
	font-size: 15px;
	padding: 17px 34px;
	color: #fff;
	background: var(--color-lahc-orange);
}
.btn-p-lg:hover {
	background: var(--color-lahc-org-dk);
	color: #fff;
	transform: translateY(-1px);
}

/* Outline variant on light backgrounds. */
.btn-outline {
	font-size: 13px;
	padding: 12px 26px;
	color: var(--color-lahc-orange);
	background: transparent;
	border: 2px solid var(--color-lahc-orange);
}
.btn-outline:hover {
	background: var(--color-lahc-orange);
	color: #fff;
	transform: translateY(-1px);
}

/* Align the pre-existing components on the same hover language. .btn-p already
   darkens correctly in style.css; this only guarantees the shared affordances. */
.btn-p, .btn-s, .btn-p-lg, .btn-outline { cursor: pointer; }
.btn-p:focus-visible,
.btn-s:focus-visible,
.btn-p-lg:focus-visible,
.btn-outline:focus-visible {
	outline: 3px solid var(--color-lahc-orange);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.btn-p, .btn-s, .btn-p-lg, .btn-outline { transition: none; }
	.btn-p:hover, .btn-p-lg:hover, .btn-outline:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
 * 3. SECTION RHYTHM
 *
 * One vertical scale, replacing 14 variants. Applied to the INNER container so
 * anchor offsets and background bleeds behave the same in every block.
 * ------------------------------------------------------------------------- */

/* Tightened by 40% across the board on 2026-08-10. Previous values are kept in the
 * comments so the original rhythm can be restored exactly. */
.lahc-section-y      { padding-top: 2.4rem; padding-bottom: 2.4rem; }  /* 38px, was 4rem   */
.lahc-section-y-tight{ padding-top: 1.5rem; padding-bottom: 1.5rem; }  /* 24px, was 2.5rem */

@media (min-width: 1024px) {
	.lahc-section-y       { padding-top: 3rem;   padding-bottom: 3rem; }   /* 48px, was 5rem   */
	.lahc-section-y-tight { padding-top: 2.1rem; padding-bottom: 2.1rem; } /* 34px, was 3.5rem */
}

/* Standard content well. Mirrors "max-w-[1360px] mx-auto px-6 sm:px-10 lg:px-20",
   which was already 100% consistent across the theme. */
.lahc-wrap {
	max-width: 1360px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
@media (min-width: 640px)  { .lahc-wrap { padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (min-width: 1024px) { .lahc-wrap { padding-left: 5rem;   padding-right: 5rem; } }

/* Anchor targets clear the sticky header consistently, whatever block they sit in. */
[data-lahc-section-target] { scroll-margin-top: calc(68px + 24px); }
@media (min-width: 768px) { [data-lahc-section-target] { scroll-margin-top: calc(84px + 28px); } }

/* ---------------------------------------------------------------------------
 * Buttons inside prose copy.
 *
 * A CTA pasted into a WYSIWYG body sits inside .prose, and this theme's
 * `.prose a` rule is hand written rather than generated, so it carries no
 * not-prose escape hatch and out-specifies the button classes on its own.
 * Adding `not-prose` to the markup therefore does nothing. Restore the button
 * appearance here instead, where the selector is specific enough to win.
 * ------------------------------------------------------------------------- */

.prose a.btn-p,
.prose a.btn-p-lg,
.prose a.btn-s,
.prose a.btn-sw,
.prose a.btn-outline {
	text-decoration: none;
	font-weight: 700;
}

.prose a.btn-p,
.prose a.btn-p-lg,
.prose a.btn-sw,
.prose a.btn-p:hover,
.prose a.btn-p-lg:hover,
.prose a.btn-sw:hover {
	color: #fff;
}

/* .btn-sw and .btn-p are display:inline-block, so pairing an icon with a label
 * needs more than the inline-flex utility: equal specificity means stylesheet
 * order decides and the button rule wins. Let an explicit pairing opt in. */
.btn-p.inline-flex,
.btn-s.inline-flex,
.btn-sw.inline-flex,
.btn-outline.inline-flex {
	display: inline-flex;
}

/* Third level navigation: a panel that flies out to the right of its parent row
 * in the Programs dropdown. Written by hand because the utilities this needs,
 * left-full most of all, are absent from the compiled stylesheet and the theme
 * has no build step to generate them.
 *
 * Opens on :focus-within as well as :hover so the flyout is reachable by keyboard
 * when its parent is a non-link grouping label. The negative offset lines the
 * panel's first row up with the parent row rather than its padding box, and the
 * bridging pseudo element keeps the pointer inside the hover target while it
 * travels across the gap. */
.lahc-flyout-parent {
	position: relative;
}

.lahc-flyout {
	position: absolute;
	left: 100%;
	top: -0.5rem;
	min-width: 240px;
	z-index: 60;
	padding-left: 2px;
	visibility: hidden;
	opacity: 0;
	transition: opacity .15s ease, visibility .15s ease;
}

.lahc-flyout-parent:hover > .lahc-flyout,
.lahc-flyout-parent:focus-within > .lahc-flyout {
	visibility: visible;
	opacity: 1;
}

/* Without this the pointer leaves the parent before it reaches the panel and the
 * flyout closes underneath it. */
.lahc-flyout-parent::after {
	content: '';
	position: absolute;
	top: 0;
	left: 100%;
	width: 4px;
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * 9. ORANGE, BY CONTEXT
 *
 * One orange cannot serve both jobs. Measured against white and near black:
 *
 *   rgb(180 95 41)   white on it 4.56:1   as text on near black 3.89:1
 *   rgb(212 122 64)  white on it 3.15:1   as text on near black 5.62:1
 *
 * So the darker value is the token, which is what buttons and orange text on
 * light backgrounds use, and the lighter value is restored only where the text
 * sits on a dark ground. Both directions then clear WCAG AA.
 * ------------------------------------------------------------------------- */
.bg-lahc-blk .text-lahc-orange,
.hero-overlay .text-lahc-orange,
.bg-lahc-blk .lbl.text-lahc-orange,
footer .text-lahc-orange {
	color: rgb(212 122 64);
}

/* Orange text on the two tinted light grounds needs to go one step darker again:
 * rgb(180 95 41) clears white at 4.56:1 but only reaches 4.23:1 on warm and
 * 3.88:1 on sand, because those grounds are not white. rgb(164 87 37) clears both. */
.bg-lahc-warm .text-lahc-orange,
.bg-lahc-sand .text-lahc-orange,
.bg-lahc-warm .group-open\:text-lahc-orange,
.bg-lahc-sand .group-open\:text-lahc-orange {
	color: rgb(164 87 37);
}

/* The founder band is dark red. No orange in the palette is legible on it:
 * the light brand orange reaches 2.68:1 and the dark one 1.85:1, both far below
 * the 4.5:1 minimum, so this is a genuine barrier rather than a near miss.
 * Sand is already in the palette and clears it at 7.18:1, keeping the accent warm
 * rather than switching to stark white. */
.bg-lahc-red .text-lahc-orange,
.bg-lahc-red-dk .text-lahc-orange {
	color: rgb(242 236 226);
}