/*
Theme Name: Birch
Theme URI: https://travisgrantdev.wpenginepowered.com
Author: Travis Grant
Author URI: https://travisgrantdev.wpenginepowered.com
Description: Custom WordPress block theme for Birch Marketing Engineering & IM/IT Consulting.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.2
License: Proprietary
License URI: https://travisgrantdev.wpenginepowered.com
Text Domain: tg-theme
*/

/*
 * Minimal global CSS not expressible in theme.json.
 * Design tokens live in theme.json. Reference custom properties here; never raw hex or pixel values
 * where a token exists. See assets/css/ for per-pattern supplementary CSS.
 */

/* Containment guard: no element may produce a document-wide horizontal scroll.
   overflow-x:clip (not hidden) so position:sticky on the header still works. */
html, body { overflow-x: clip; }

/* Skip link — visible on focus only */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 9999;
}

.skip-link:focus-visible,
.skip-link:focus {
	position: fixed;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: auto;
	height: auto;
	overflow: visible;
	padding: 12px 24px;
	background: var(--wp--custom--color--ink);
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-decoration: none;
	border-radius: 0 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md);
	outline: 2px solid var(--wp--preset--color--terracotta-deeper);
	outline-offset: 2px;
	box-shadow: var(--wp--custom--elevation--md);
	z-index: 9999;
}

/* Global focus-visible ring (applied globally; individual components may refine) */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta-deeper);
	outline-offset: 2px;
	box-shadow: var(--wp--custom--focus-ring);
}

/* Smooth scroll — disabled by prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Anchor targets clear sticky header (approx 72px header height + 8px buffer) */
[id] {
	scroll-margin-top: 80px;
}

/* Prevent CLS from image load before dimensions are set */
img {
	max-width: 100%;
	height: auto;
}

/* No outline removal without replacement — enforced globally */
:focus:not(:focus-visible) {
	outline: none;
}

/* Header unstick — toggled by assets/js/header-unstick.js at 50 % scroll progress.
   The block group in parts/header.html carries an INLINE style="position:sticky;top:0px"
   (set via the block JSON "style" attribute). Inline styles have specificity 1-0-0-0
   and win over any class rule without !important. The !important is intentionally scoped
   to this single rule so the override is surgical — it only applies when JS adds the
   class. Main .site-header rules live in assets/css/patterns.css. */
.site-header.site-header--unstuck {
	position: static !important;
}