/**
 * ABL Redesign — 2026 design system (enhancement / compatibility layer)
 *
 * SCOPE OF THIS FILE
 * ------------------
 * Elementor owns the design. Widths, padding, margins, backgrounds, borders,
 * radii, gaps, grid/flex configuration, typography, colours and alignment all
 * live in each element's own Elementor controls, so a client can edit them in
 * the editor and they travel with a template export.
 *
 * What remains here is only what Elementor cannot express, plus fixes for
 * conflicts coming from the active theme and Bootstrap:
 *
 *   1. Theme/Bootstrap compatibility resets (bare `p` selectors that beat
 *      inherited values regardless of specificity).
 *   2. Multi-stop brand gradients — Elementor's gradient control supports two
 *      colour stops; the ABL teal uses five.
 *   3. Decorative assets and pseudo-elements — the segmented ring, the brush
 *      stroke behind a headline word, the ribbon glyph before a card title,
 *      the pinstripe texture overlay.
 *   4. Small structural behaviours with no Elementor control (list styling
 *      inside a Text Editor, hero stacking context, focus visibility).
 *
 * Everything is scoped under .abl26 so it only affects pages that opt in.
 * .abl26 itself is the only bare selector in the file; the theme, Customizer
 * CSS and Elementor Global Styles are untouched.
 *
 * CRITICAL: nothing here may override an explicit Elementor setting. Rules
 * are kept at the lowest specificity that still does their job, and use
 * `inherit` (rather than literal values) wherever the intent is "let the
 * value set on the Elementor element flow through".
 *
 */

/* =========================================================
   0. TOKENS — only the values still referenced below
   ========================================================= */
.abl26 {
	--abl-gold: #b0842c;
	--abl-teal: #00918e;

	/* The ABL teal gradient has five colour stops. Elementor's Background
	   > Gradient control offers exactly two, so reproducing this accurately
	   is not possible through the editor — it stays here and is applied via
	   .abl-grad / .abl-grad--steep. Everything else about a gradient
	   element (padding, radius, size) is still an Elementor control. */
	--abl-grad-stops: #008381 8.16%, #006462 45.07%, #006e6c 64.51%, #00a19d 81.97%, #027a77 90.70%;
	/* Gold five-stop variant — confirmed on Student Business Shadow's Key
	   Outcomes tiles (Figma: rgb(153,113,34) 8.16%, rgb(160,119,38) 39.51%,
	   rgb(176,132,44) 64.51%, rgb(148,110,34) 79.59%, rgb(176,132,44) 90.7%),
	   the same non-representable-in-Elementor five-stop case as the teal
	   gradient above. Likely reusable wherever another program page needs a
	   gold rather than teal gradient surface. */
	--abl-grad-gold-stops: #997122 8.16%, #a07726 39.51%, #b0842c 64.51%, #946e22 79.59%, #b0842c 90.70%;

	--abl-texture: url("../img/abl-pinstripe.png");
	--abl-ring: url("../img/abl-ring.png");
	--abl-ribbon: url("../img/abl-ribbon-gold.svg");
	--abl-brush-gold: url("../img/abl-brush-gold.svg");
	--abl-brush-teal: url("../img/abl-brush-teal.svg");
}

/* Elementor's kit emits `.elementor-element{--widgets-spacing:20px 20px}`
   from an inline <style> that loads after this file, which silently adds a
   20px gap to every container that has not set one. Each page now sets real
   Gap values in Elementor, so the inherited default is zeroed here to keep
   "no gap set" meaning no gap. Doubled class beats the kit's (0,1,0) rule
   regardless of source order; an explicit Elementor Gap still wins, because
   Elementor writes --gap directly on the element itself. */
.abl26.abl26 {
	--widgets-spacing: 0px;
	--widgets-spacing-row: 0px;
	--widgets-spacing-column: 0px;
}

/* =========================================================
   1. THEME / BOOTSTRAP COMPATIBILITY
   These are the only reset rules left. Each neutralises a bare element
   selector shipped by the active theme or Bootstrap. Bare selectors match
   the element directly, so they beat any value inherited from an Elementor
   wrapper no matter how specific that wrapper's rule is — which is why a
   fix is unavoidable here rather than a matter of tidiness.
   ========================================================= */
.abl26,
.abl26 * {
	box-sizing: border-box;
}

/* The theme's stylesheet sets a bare
   `p { font-weight:300; font-size:20px; line-height:25px; color:#484848 }`
   and Bootstrap adds `p { margin-top:0; margin-bottom:1rem }`.
   Resolving each property to `inherit` hands control back to the Text Editor
   widget, which is exactly where Elementor writes the client's typography —
   so this rule enables the Elementor value rather than overriding it.
   Paragraph spacing is a real Elementor control (it writes
   `<wrapper> p { margin-block-end: … }` at a higher specificity than this),
   so the margin reset here only supplies the "nothing set" default. */
.abl26 p {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	font-family: inherit;
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Elementor's Paragraph Spacing control writes `margin-block-end` on every
   <p> in a Text Editor, including the last one, which adds a phantom gap
   below the widget that no design value accounts for. Trimming only the
   trailing paragraph keeps the client's Paragraph Spacing fully effective
   *between* paragraphs — which is what the control is for — while stopping
   it from inflating the element's outer box. */
.abl26.abl26 .elementor-widget-text-editor p:last-child {
	margin-block-end: 0;
}

.abl26 img {
	max-width: 100%;
	height: auto;
}

/* Keyboard focus visibility — an accessibility behaviour with no Elementor
   equivalent. */
.abl26 :focus-visible {
	outline: 2px solid var(--abl-teal);
	outline-offset: 2px;
}

/* =========================================================
   2. BRAND GRADIENTS — not representable in Elementor
   Only the background-image is set. Padding, radius, min-height, text
   colour and every other property of a gradient element remain Elementor
   controls. Note: because this paints a background-image, setting a
   Background Color on the same element in Elementor will not be visible —
   that is the one trade-off of keeping the five-stop gradient accurate.
   ========================================================= */
.abl26 .abl-grad {
	background-image: linear-gradient(154.5deg, var(--abl-grad-stops));
}
.abl26 .abl-grad--steep {
	background-image: linear-gradient(171.2deg, var(--abl-grad-stops));
}
.abl26 .abl-grad--gold {
	background-image: linear-gradient(138.7deg, var(--abl-grad-gold-stops));
}

/* =========================================================
   3. DECORATIVE ASSETS & PSEUDO-ELEMENTS
   ========================================================= */

/* Pinstripe texture laid over a card's own (Elementor-set) background
   colour. The PNG is opaque and near-white, so it needs no blend mode: over
   white it reproduces the Figma texture exactly, and if a client recolours
   the card in Elementor the texture simply sits on the new colour. */
.abl26 .abl-texture {
	background-image: var(--abl-texture);
	background-size: 569px;
	background-repeat: repeat;
}

/* Segmented decorative ring. Position/offset/width are Elementor controls;
   only the asset and its aspect ratio live here. No `position` is declared:
   a hardcoded value would silently defeat Elementor's own --position
   mechanism, which is how the element is actually placed. */
.abl26 .abl-ring {
	aspect-ratio: 573 / 564;
	background-image: var(--abl-ring);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* Brush stroke behind a single word of a headline. Geometry is expressed in
   em so it scales with whatever font size the Heading widget is set to —
   measured off the Bridge hero at 80px: 19px of left overhang, 29px right,
   38px tall, flush with the line-box bottom.
   .abl-mark must wrap the text inline (a <span> inside the heading), not sit
   on the widget wrapper, or it stretches the full column. */
.abl26 .abl-mark {
	position: relative;
	display: inline-block;
	isolation: isolate;
	padding-inline: 0.08em;
}
.abl26 .abl-mark::after {
	content: "";
	position: absolute;
	left: -0.24em;
	right: -0.36em;
	bottom: 0;
	height: 0.475em;
	background-image: var(--abl-brush-gold);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: -1;
}
.abl26 .abl-mark--teal::after {
	background-image: var(--abl-brush-teal);
}

/* Ribbon glyph before a card title. It has to hang off the inner heading
   element: on the widget wrapper (a block box whose only child is another
   block) an inline-block ::before is forced onto its own line. */
.abl26 .abl-card-ribbon .elementor-widget-heading .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 41px;
	height: 12px;
	margin-right: 14px;
	vertical-align: middle;
	background-image: var(--abl-ribbon);
	background-repeat: no-repeat;
	background-size: contain;
}

/* =========================================================
   4. STRUCTURAL BEHAVIOUR WITH NO ELEMENTOR CONTROL
   ========================================================= */

/* Bulleted content inside a Text Editor widget. Elementor styles the widget
   but ships no list controls, and the theme removes list markers. Font,
   size, colour and spacing all still come from the widget's own typography,
   because only layout properties are set here. */
.abl26 .abl-list ul {
	margin: 0 0 10px;
	padding-left: 22px;
	list-style: disc;
}
.abl26 .abl-list li {
	margin-bottom: 8px;
}
.abl26 .abl-list li:last-child {
	margin-bottom: 0;
}

/* A hero uses Elementor's native Background Overlay for its scrim. That
   overlay is an absolutely-positioned ::before, which paints above static
   in-flow siblings, so hero children need a stacking position of their own.
   Reading Elementor's --position custom property with a fallback preserves
   any child that is using the Position control itself (the ring). */
.abl26 .abl-hero-band > .e-con-inner > * {
	position: var(--position, relative);
	z-index: 1;
}

/* The requirement-bar copy is capped at 921px inside a 1129px bar (Figma).
   It targets the inner heading element rather than the widget wrapper
   because Elementor ships `.elementor.elementor .e-con>.elementor-widget
   {max-width:100%}` at (0,4,0) from a stylesheet that loads after this one,
   so a wrapper-level max-width could never win. */
.abl26 .abl-bar-text .elementor-heading-title {
	max-width: 921px;
}

/* =========================================================
   5. RESPONSIVE — only what Elementor's own responsive controls
   cannot carry. Section padding, grid column counts, flex direction,
   alignment and type sizes are all set per breakpoint in Elementor and
   deliberately have no rules here.
   ========================================================= */
@media (max-width: 767px) {
	/* At this size the segmented ring would dominate the hero rather than
	   read as an accent. Elementor's own Responsive > Hide On Mobile could
	   express this, but it is kept here so the behaviour follows the ring
	   component itself wherever it is reused. */
	.abl26 .abl-ring {
		display: none;
	}
}