/**
 * Creative GOAT child-theme foundation.
 *
 * Phase 3 Step 2B scope: approved CSS state variables plus the technical
 * accessibility foundation (keyboard focus, reduced motion, skip link).
 * No component, layout, spacing, colour or typography design rules are
 * applied to existing page elements in this step. The radius and width
 * variables below are declared for later approved phases only.
 */

/* ------------------------------------------------------------------
   1. Approved foundation variables (declared for later use)
   ------------------------------------------------------------------ */
:root {
	--cg-focus-dark: #22D3EE;
	--cg-focus-light: #0E7490;
	--cg-success-dark: #34D399;
	--cg-success-light: #047857;
	--cg-warning-dark: #FBBF24;
	--cg-warning-light: #92400E;
	--cg-error-dark: #FCA5A5;
	--cg-error-light: #DC2626;
	--cg-radius-control: 2px;
	--cg-radius-card: 8px;
	--cg-content-max: 1200px;
	--cg-content-narrow: 760px;
}

/* ------------------------------------------------------------------
   2. Two-tone keyboard focus indicator
   Context independent: an inner band of --cg-focus-light (#0E7490) sits
   against the element edge and an outer band of --cg-focus-dark (#22D3EE)
   sits outside it, so at least one band stays visible on white, #F6F8FB,
   #050810, #0B1220, #0F1626 and on cyan button fills. Outline and
   box-shadow are both outside the border box, so nothing resizes or
   shifts. Mouse and touch activation are unaffected because the rules
   only match :focus-visible.
   ------------------------------------------------------------------ */
a[href]:focus-visible,
area[href]:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible,
[tabindex]:not([tabindex^="-"]):focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[contenteditable="true"]:focus-visible {
	outline: 2px solid var(--cg-focus-dark) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px var(--cg-focus-light) !important;
}

/* Form controls inside the two existing WPForms forms currently receive
   outline:none from local page CSS. LOCAL OVERRIDE — see the Phase 3
   local-overrides register. Specificity is raised only enough to restore
   a visible keyboard indicator; the mouse :focus styling is untouched. */
html body[class] :is(#wpforms-form-189, #wpforms-form-191) :is(input, select, textarea, button, a[href]):focus-visible {
	outline: 2px solid var(--cg-focus-dark) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px var(--cg-focus-light) !important;
}

/* Never draw the indicator on unavailable or hidden controls. */
:disabled:focus-visible,
[disabled]:focus-visible,
[aria-disabled="true"]:focus-visible,
[hidden]:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* ------------------------------------------------------------------
   3. Reduced motion
   Durations collapse instead of being removed, so scripts that wait for
   transitionend/animationend still receive their events and menus,
   drawers and forms keep working. Transforms are not reset globally,
   because off-canvas panels rely on them for their open state.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto !important;
	}

	html body *,
	html body *::before,
	html body *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

	/* Elementor holds entrance-animated elements at opacity:0 until their
	   animation runs. With animation suppressed they must still be shown. */
	html body .elementor-invisible,
	html body .elementor-widget.elementor-invisible,
	html body .elementor-element.elementor-invisible,
	html body .animated {
		opacity: 1 !important;
		visibility: visible !important;
		animation: none !important;
	}

	/* Decorative hover movement only. */
	html body a[href]:hover,
	html body .elementor-button:hover {
		transform: none !important;
	}
}

/* ------------------------------------------------------------------
   4. Skip link
   Hidden until it receives focus, then pinned to the top-left corner,
   clear of the right-hand icon rail, above all site chrome.
   ------------------------------------------------------------------ */
.cg-skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus,
.skip-link:focus-visible,
.cg-skip-link:focus,
.cg-skip-link:focus-visible {
	position: fixed !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 12px 20px !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: nowrap !important;
	display: inline-block !important;
	z-index: 2147483647 !important;
	background: #0B1220 !important;
	color: #FFFFFF !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: underline !important;
	border: 0 !important;
	border-radius: 2px !important;
	outline: 2px solid var(--cg-focus-dark) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px var(--cg-focus-light), 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

/* The WordPress admin toolbar only exists for signed-in administrators;
   nudge the focused skip link below it so it is never covered. */
body.admin-bar .skip-link:focus,
body.admin-bar .cg-skip-link:focus {
	top: 44px !important;
}