✨ feature: Add independent chrome tint elements for iOS 26+ compatibility and enhance related tests

header.php

@@ -39,6 +39,27 @@ $showHero = $post->post_parent === $services ? true : false;
 		<?php echo esc_html__( 'Skip to main content' ); ?>
 	</a>
 
+	<?php
+	/*
+	 * Chrome tint elements.
+	 *
+	 * iOS 26+ Safari ignores the <meta name="theme-color"> tag and
+	 * instead samples the background-color of fixed/sticky elements
+	 * near the top and bottom of the viewport to tint the browser
+	 * chrome (status bar / home indicator). Their backgroundColor is
+	 * updated at runtime by static/js/modules/ChromeTint.js based on
+	 * which element (site-header or site-footer) is in view.
+	 *
+	 * Sampling windows (iOS 26):
+	 *   - top:    within 4px of top, width >=80%, min-height 12px
+	 *   - bottom: within 3px of bottom, width >=80%, min-height 3px
+	 *
+	 * aria-hidden because these are visual-only and carry no meaning.
+	 */
+	?>
+	<div class="chrome-tint chrome-tint--top" aria-hidden="true"></div>
+	<div class="chrome-tint chrome-tint--bottom" aria-hidden="true"></div>
+
 	<header role="banner" class="site-header bg-secondary flex flex-col items-center justify-start">
 		<?php get_template_part( 'views/components/nav-aux' ); ?>