/* theme-overrides.css
 *
 * Loaded after Elementor's per-page CSS (see functions.php) so equal-
 * specificity rules in this file win the cascade. Use it for styling that
 * would otherwise live only in the database — per-page Elementor edits,
 * Customizer color tokens, Simple Custom CSS — but that should travel
 * with the theme on deploy.
 *
 * When adding a rule, include a brief comment with the source page /
 * widget ID and the reason it's here rather than in admin. That's the
 * audit trail for the next developer.
 *
 * Things this file cannot ship in CSS (still need admin / DB migration):
 *   - Elementor widget content changes (text-editor HTML, HTML widget
 *     markup, image swaps)
 *   - Elementor functional settings (caption_source, caption_type,
 *     button text)
 *   - Anything that requires changing the DOM tree
 */

/* WCAG 1.4.3 Contrast (Minimum) — Elementor popup CTA links on yellow.
 * Mirror of the rule previously kept in child style.css. The Elementor
 * popup (library item 46544) authors a text-widget link with an inline
 * `background-color: #fcc834` (yellow). The anchor inherits the global
 * `a { color: #007DA3 }` rule from style.css:24, giving blue-on-yellow at
 * ratio ~3.01. Force the darker brand variant `#00465C` (already in use
 * on `.site-alert a`) for ~6.65:1, with `#002f56` on hover.
 *
 * This needs to be in theme-overrides.css rather than style.css because
 * the inline `style="background-color: #fcc834"` is authored in the popup
 * content (DB-stored Elementor JSON). Loading after Elementor's per-page
 * CSS ensures the override wins without `!important`. */
.elementor-location-popup a[style*="#fcc834"],
.elementor-location-popup a[style*="rgb(252, 200, 52)"] {
	color: #00465C;
}
.elementor-location-popup a[style*="#fcc834"]:hover,
.elementor-location-popup a[style*="rgb(252, 200, 52)"]:hover {
	color: #002f56;
}

/* Page 8503 (Computer Science) — three buttons in Prussian Blue.
 * Source: local Elementor edits identified in `.a11y/db-changes-since-seed.md`.
 * Widgets 7a8008f / 1574f06 / e457662 were retargeted to `#003153` in the
 * local DB but the change does not exist on dev/prod. Ship the styling
 * here so the visual lands on deploy without requiring admin replay. */
.elementor-8503 .elementor-element-7a8008f .elementor-button,
.elementor-8503 .elementor-element-1574f06 .elementor-button,
.elementor-8503 .elementor-element-e457662 .elementor-button {
	background-color: #003153;
}

/* Page 26772 (Computer Science Week / Hour of Code -> Hour of AI) —
 * Volunteer button widget a63cf55 retargeted from #01B7C2 to #003153.
 * Also tracked in admin-tasks.md #25. */
.elementor-26772 .elementor-element-a63cf55 .elementor-button {
	background-color: #003153;
}

/* Page 38823 (Idaho STEM Externship Program) — column b7fe2a8 background
 * set to a soft off-white. Source: local Elementor edit; tracked in
 * admin-tasks.md #18. */
.elementor-38823 .elementor-element-b7fe2a8 {
	background-color: #f9f9f9;
}

/* Page 10112 (Newsroom) — button cf3f819 and toggle 8052956 retargeted
 * to a darker teal variant of #0098DF for adequate contrast against
 * white text. Source: local Elementor edits; also relevant to
 * admin-tasks.md #27. */
.elementor-10112 .elementor-element-cf3f819 .elementor-button {
	background-color: #026A86;
}
.elementor-10112 .elementor-element-8052956 .elementor-toggle-item .elementor-tab-title {
	background-color: #026A86;
}

/* Page 10757 (Learning Blade) — button e2f3e13 retargeted from orange
 * #F49223 to grey #424847 with explicit white text. Source: local
 * Elementor edit. */
.elementor-10757 .elementor-element-e2f3e13 .elementor-button {
	background-color: #424847;
	color: #FFFFFF;
}

/* Page 8503 (Computer Science) — image carousel e0c357f navigation controls.
 * The arrows + dots are enabled from theme code, not the Elementor editor
 * (see stem_force_cs_carousel_navigation in functions.php), so their styling
 * has to ship with the theme too. Two fixes:
 *
 *  1. Dots — Swiper renders .swiper-pagination as position:absolute; bottom:10px,
 *     which lands on top of the figcaption that sits below each slide image.
 *     Drop it into normal flow so the dots sit BELOW the caption. The parent
 *     .swiper is overflow:hidden but grows to fit static content, so nothing
 *     is clipped.
 *
 *  2. Arrows — WCAG 2.1 SC 1.4.11 Non-text Contrast. The default chevron is a
 *     light glyph rendered straight over light photography, so the control is
 *     effectively invisible and below 3:1. Put a solid black pill behind each
 *     arrow with a white glyph (21:1) so it reads against any slide. 40x40 also
 *     satisfies SC 2.5.8 Target Size. */
.elementor-8503 .elementor-element-e0c357f .elementor-image-carousel-wrapper .swiper-pagination {
	position: static;
	width: 100%;
	margin-top: 0.75rem;
}
.elementor-8503 .elementor-element-e0c357f .elementor-swiper-button {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #000;
	border-radius: 4px;
}
.elementor-8503 .elementor-element-e0c357f .elementor-swiper-button,
.elementor-8503 .elementor-element-e0c357f .elementor-swiper-button i,
.elementor-8503 .elementor-element-e0c357f .elementor-swiper-button svg {
	color: #fff;
	fill: #fff;
}