/*
 * 12Port — sitewide accessibility fixes.
 * Loaded on every front-end page by the twentytwentyfive-12port child theme.
 * Each rule fixes a real Lighthouse / axe-core finding from the 2026-05-01
 * audit. Colors stay within the 12Port brand token set documented in
 * 12port-tier1-brand-tokens.md.
 */

/* Jetpack Forms required-field asterisk.
 * Jetpack ships .grunion-label-required with opacity:.6 inside a
 * :where() pseudo-class (zero specificity), which combined with the
 * default red yields a rendered #d27475 that fails AA contrast on
 * #f7f8fa. We restore full opacity and switch to #B91C1C, which
 * yields 5.94:1 on white. The element is aria-hidden, so this is a
 * fix for low-vision users.
 */
.contact-form .grunion-label-required,
.wp-block-jetpack-contact-form .grunion-label-required,
label .grunion-label-required,
.grunion-label-required {
    color: #B91C1C !important;
    opacity: 1 !important;
}

/* Core block lightbox trigger.
 * The button has only an icon and a data-wp-bind--aria-label that
 * fills in after WP Interactivity hydrates. Before hydration, the
 * button has no accessible name. The render_block filter in
 * functions.php injects a static aria-label as a fallback; this
 * rule keeps the icon SVG aria-hidden so it is not announced twice.
 */
.lightbox-trigger svg {
    pointer-events: none;
}

/* Header logo CLS reserve.
 * The logo is an SVG inside a wp-block-site-logo. WP core CSS sets
 * .wp-block-site-logo img { height:auto; max-width:100%; } which,
 * combined with SVG having no intrinsic ratio until parsed, leaves
 * the slot unsized at first paint. Lighthouse cls-culprits-insight
 * attributed 0.277 of CLS on /blog/ to "Unsized image element" on
 * .custom-logo. Pinning explicit dimensions reserves the space
 * before the SVG resource is fetched and parsed. 160x36 matches the
 * width/height attributes on the IMG tag.
 */
.wp-block-site-logo,
.wp-block-site-logo a.custom-logo-link {
    min-height: 36px;
}
.wp-block-site-logo img.custom-logo {
    width: 160px !important;
    height: 36px !important;
    aspect-ratio: 160 / 36;
    max-width: 100%;
}