/*
 * Cosmick Tokens & Global Accessibility Layer
 * ===========================================
 * Added in 3.3.0. Loaded site-wide from header.php, immediately AFTER the five existing
 * hardcoded stylesheet links.
 *
 * WHY A HARDCODED <link> AND NOT wp_enqueue_style():
 * wp_head() runs at header.php:28, so every ENQUEUED stylesheet prints there - i.e.
 * BEFORE professional-clean.css, which is hardcoded further down the file and owns every
 * homepage selector. An enqueued file therefore loses every equal-specificity tie and
 * would need !important for each rule. That is exactly how mobile-adjustments.css ended
 * up with 414 !important declarations in 1,058 lines. Loading last means source order
 * does the work instead.
 *
 * CONTRAST RATIOS in the comments below are computed with the WCAG 2.x relative
 * luminance formula and verified independently, not estimated.
 */

:root {
	/* ---- Brand: display / decorative use ---- */
	--cm-coral:          #ff675b;
	--cm-coral-light:    #ff8a7a;
	--cm-gold:           #fdc785;

	/* ---- Action: anything that carries text or acts as a UI boundary ----
	 *
	 * #ff675b has a relative luminance of 0.317, which puts it in a dead zone: it can
	 * carry NEITHER white text (2.86:1) NOR #3c3c3c text (2.90:1) at the 4.5:1 required
	 * for body-scale type. No weight or size choice fixes that. So coral remains the
	 * display colour and a darkened shade carries text.
	 *
	 * #c0392f is 0.3 degrees off the brand hue and clears 4.5:1 with almost a full point
	 * of headroom, which survives subpixel antialiasing at Poppins 500.
	 *
	 * Rejected: #d94435 (4.35:1, fails) and the existing --cmgf-primary-deep #d04d41
	 * (4.36:1, also fails - do not reuse it for text).
	 */
	--cm-action:         #c0392f;  /* 5.43:1 on #fff | 5.15:1 on #f8f9fa */
	--cm-action-strong:  #a52c22;  /* 7.04:1 on #fff - hover/active */
	--cm-action-tint:    rgba(192, 57, 47, 0.08);
	--cm-accent-on-dark: #ff8a7a;  /* 4.82:1 on #3c3c3c | 6.01:1 on #2d2d2d */

	/* ---- Grey ramp: the twelve literals that existed only as raw hex ---- */
	--cm-grey-50:   #fafafa;
	--cm-grey-100:  #f8f9fa;
	--cm-grey-150:  #f0f0f0;
	--cm-grey-200:  #e0e0e0;  /* appeared 16x as a bare literal - every divider */
	--cm-grey-250:  #d8d8d8;
	--cm-grey-300:  #d0d0d0;
	--cm-grey-350:  #cccccc;
	--cm-grey-500:  #8a8a8a;  /* lowest value clearing 3:1 on BOTH #fff and #f8f9fa */
	--cm-grey-600:  #656d75;  /* 5.25:1 / 4.98:1 - accessible replacement for #6c757d */
	--cm-grey-650:  #5d646b;  /* 6.00:1 / 5.69:1 - for <=14px type */
	--cm-grey-700:  #4a4a4a;
	--cm-grey-800:  #3c3c3c;
	--cm-grey-850:  #2d2d2d;
	--cm-grey-900:  #252525;
	--cm-grey-950:  #1c1c1c;

	/* ---- Semantic ---- */
	--cm-ink:          var(--cm-grey-800);   /* 11.03:1 on #fff */
	--cm-ink-muted:    var(--cm-grey-600);
	--cm-ink-subtle:   var(--cm-grey-650);
	--cm-ink-inverse:  #ffffff;              /* 11.03:1 on #3c3c3c */
	--cm-surface:      #ffffff;
	--cm-surface-sunk: var(--cm-grey-100);
	--cm-surface-dark: var(--cm-grey-800);
	--cm-rule:         var(--cm-grey-200);   /* decorative - 1.4.11 does not apply */
	--cm-rule-strong:  var(--cm-grey-500);   /* UI boundaries - 1.4.11 DOES apply */

	/* ---- Type scale ---- */
	--cm-text-xs:    0.8125rem;
	--cm-text-sm:    0.875rem;
	--cm-text-base:  1rem;
	--cm-text-md:    1.0625rem;
	--cm-text-lg:    1.125rem;
	--cm-text-xl:    1.25rem;
	--cm-display-sm: clamp(1.375rem, 0.93vw + 1.167rem, 1.75rem);
	--cm-display-md: clamp(1.75rem,  1.48vw + 1.417rem, 2.75rem);
	--cm-display-lg: clamp(2rem,     1.48vw + 1.667rem, 3rem);
	--cm-display-xl: clamp(1.875rem, 3.15vw + 1.167rem, 4rem);
	--cm-leading-tight: 1.15;
	--cm-leading-snug:  1.3;
	--cm-leading-body:  1.65;
	--cm-leading-loose: 1.8;
	--cm-tracking-tight: -0.02em;
	--cm-tracking-wide:   0.12em;

	/* ---- Spacing: 4px base ---- */
	--cm-space-1:  4px;   --cm-space-2:  8px;   --cm-space-3: 12px;
	--cm-space-4: 16px;   --cm-space-5: 24px;   --cm-space-6: 32px;
	--cm-space-7: 40px;   --cm-space-8: 48px;   --cm-space-9: 64px;
	--cm-space-10: 80px;  --cm-space-11: 100px; --cm-space-12: 140px;

	/* ---- Layout ---- */
	--cm-container:        1200px;
	--cm-container-narrow:  860px;
	--cm-container-gutter: clamp(20px, 3vw, 40px);
	--cm-header-height:      90px;

	/* ---- Radii: one scale replacing 2px / 8px / 10px / 15px / .375rem ---- */
	--cm-radius-xs:      2px;
	--cm-radius-sm:      6px;
	--cm-radius-md:     10px;
	--cm-radius-lg:     16px;
	--cm-radius-pill:  999px;

	/* ---- Elevation: the homepage had no shadow token and no card shadow at all ---- */
	--cm-shadow-1: 0 1px 2px rgba(28,28,28,.04), 0 1px 3px rgba(28,28,28,.06);
	--cm-shadow-2: 0 2px 4px rgba(28,28,28,.04), 0 4px 12px rgba(28,28,28,.07);
	--cm-shadow-3: 0 4px 8px rgba(28,28,28,.05), 0 12px 28px rgba(28,28,28,.10);
	--cm-shadow-4: 0 8px 16px rgba(28,28,28,.06), 0 24px 48px rgba(28,28,28,.13);

	/* ---- Motion: resolves the two competing easings in the theme ---- */
	--cm-ease:     cubic-bezier(0.4, 0, 0.2, 1);
	--cm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--cm-dur-1: 120ms;  --cm-dur-2: 200ms;  --cm-dur-3: 320ms;  --cm-dur-4: 480ms;
	--cm-transition: all var(--cm-dur-3) var(--cm-ease);

	/* ---- Focus ---- */
	--cm-focus-ink:  #1f1f1f;
	--cm-focus-halo: #ffffff;
	--cm-focus-ring: 0 0 0 2px var(--cm-focus-halo),
	                 0 0 0 5px var(--cm-focus-ink),
	                 0 0 0 7px var(--cm-focus-halo);
	--cm-focus-ring-inset: inset 0 0 0 2px var(--cm-focus-halo),
	                       inset 0 0 0 5px var(--cm-focus-ink);

	/* Chevron for the FAQ disclosure, used as a MASK so it inherits currentColor.
	   Same data-URI technique as the --cmgf-icon-* set in gravity-forms.css. */
	--cm-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");

	/* ---- Fluid section rhythm ----
	 * professional-clean.css redeclares --section-padding inside two `:root` blocks
	 * nested in media queries (100px base, 80px at 991px, 60px at 767px). Media queries
	 * contribute NOTHING to specificity, so this plain :root - same specificity, loaded
	 * later - wins at every viewport width and makes both of those inert. Tracks the same
	 * intent without the 60->80 and 80->100 jumps. Delete this one line to revert.
	 */
	--section-padding: clamp(60px, 4.17vw + 40px, 100px);

	/* ---- Re-pointed legacy aliases ----
	 *
	 * These two lines do most of the contrast remediation in the entire project, because
	 * professional-clean.css consumes them everywhere.
	 *
	 * --medium-gray: 21 use sites, verified 100% of them `color:` declarations and all in
	 * one file - no backgrounds, no borders. #6c757d measured 4.45:1 on the #f8f9fa
	 * section backgrounds, a fail. #656d75 is ~1.5% darker, indistinguishable side by
	 * side, and clears AA everywhere.
	 *
	 * --primary-red: 49 use sites. Of those, exactly TWO sit on a dark ground
	 * (.accent-text and .hero-scroll-arrow:hover) and are restored to true coral in the
	 * block below. The other 47 are on #fff or #f8f9fa, where #ff675b failed at 2.86:1
	 * and #c0392f passes at 5.43:1.
	 */
	--medium-gray: #656d75;
	--primary-red: #c0392f;
}

/* ============================================================
   CORAL RESTORED where it is decorative, or sits on a dark ground
   ============================================================ */

/* 4.82:1 on #3c3c3c. The old #ff675b was 3.86:1 - which did technically pass the 3:1
   large-text threshold at the h1's 30px+ sizes, but only by relying on a size
   assumption that any future type change would silently break. */
.accent-text,
.hero-scroll-arrow:hover {
	color: var(--cm-accent-on-dark);
}

/* Purely decorative 3px edges - no contrast requirement, so keep the brand hue. */
.testimonial-professional-card { border-left-color: var(--cm-coral); }

/* ============================================================
   CONTRAST FIXES that the token re-point does not reach
   ============================================================ */

/* "View Our Work" in the hero. Its ONLY boundary was rgba(255,255,255,0.3) on #3c3c3c
   = 2.43:1, failing 1.4.11 Non-text Contrast. 0.45 alpha gives 3.64:1. */
.btn-professional-secondary {
	border-color: rgba(255, 255, 255, 0.45);
}

/* The CURRENT PAGE indicator in the primary nav failed: #ff675b on a 5% coral tint
   (~#fff7f7) = 2.71:1. Now 5.15:1. The inset underline also stops colour being the only
   means of conveying which page you are on (1.4.1 Use of Colour). */
.main-menu > li > a:hover,
.main-menu > li.current-menu-item > a,
.main-menu > li.current_page_item > a {
	color: var(--cm-action);
}
.main-menu > li.current-menu-item > a,
.main-menu > li.current_page_item > a {
	box-shadow: inset 0 -2px 0 var(--cm-action);
}

/* Header "Start Now": white on a #ff675b -> #ff8a7a gradient ran 2.86:1 down to 2.29:1.
   Flat --cm-action is 5.43:1 at every pixel. */
.header-cta-btn.header-cta-primary {
	background: var(--cm-action);
	background-image: none;
}
.header-cta-btn.header-cta-primary:hover,
.header-cta-btn.header-cta-primary:focus-visible {
	background: var(--cm-action-strong);
	background-image: none;
}
.mobile-phone-icon {
	background: var(--cm-action);
	background-image: none;
}

/* Footer column headings. These are now <h2 class="h6"> rather than <h6>, because
   h2 -> h6 was a heading-level skip. Two things must be neutralised:
     1. style.css's bare `h2, .h2` rule forces text-transform:uppercase and opacity:.8.
     2. The colour was #ff675b on #3c3c3c = 3.86:1 at 20px/weight 500. The 24px
        large-text exemption does NOT apply at weight 500, so it needed 4.5:1.
   The inline style="color:#ff675b !important" in footer.php is beaten with !important
   here - that inline declaration is why this cannot be fixed by specificity alone. */
.footer .sitemap h2.h6,
.footer h2.footer-partners-title {
	text-transform: none;
	opacity: 1;
}
.footer .sitemap h2.h6 {
	color: var(--cm-accent-on-dark) !important; /* 4.82:1 on #3c3c3c */
}
.footer .f_menus ul li a:hover,
.footer .footer-menu-links li a:hover {
	color: var(--cm-accent-on-dark); /* was #f2665d on #3c3c3c = 3.59:1 */
}

/* Modal close button glyph. */
.get-started-modal-close { color: var(--cm-action); }

/* ============================================================
   FOCUS VISIBILITY
   ============================================================
   Before this, a grep for ":focus" across the nine homepage stylesheets returned only
   two no-op rules (outline:none plus a 10%-alpha shadow measuring ~1.1:1) and one good
   ring in footer-partners.css. Nothing styled focus on 16+ interactive elements.

   NO SINGLE SOLID COLOUR CAN WORK: the page has four grounds (#fff, #f8f9fa, #3c3c3c,
   #2d2d2d) and any one colour fails 3:1 against at least one of them. A two-tone
   sandwich always leaves one component with huge contrast:
       ink #1f1f1f  -> 16.48:1 on #fff | 15.64:1 on #f8f9fa | 1.49 on #3c3c3c
       halo #ffffff ->  1.00  on #fff |  1.05   on #f8f9fa | 11.03:1 on #3c3c3c
   `outline: 2px solid transparent` keeps the ring alive in forced-colors mode, where
   box-shadows are discarded. Pattern follows gravity-forms.css:881. */
.btn-professional-primary:focus-visible,
.btn-professional-secondary:focus-visible,
.btn-professional-outline:focus-visible,
.client-logos-nav-btn:focus-visible,
.testimonials-nav-btn:focus-visible,
.service-professional-link:focus-visible,
.client-logo-item a:focus-visible,
.hero-scroll-arrow:focus-visible,
.header-cta-btn:focus-visible,
.header-phone-link:focus-visible,
.mobile-toggle:focus-visible,
.mobile-phone-icon:focus-visible,
.brand-link:focus-visible,
.main-menu a:focus-visible,
.mobile-menu-list a:focus-visible,
.mobile-contact-item:focus-visible,
button.submenu-toggle:focus-visible,
.get-started-modal-close:focus-visible,
.footer a:focus-visible,
.cm-faq-question:focus-visible,
.cm-hero-badge:focus-visible,
.skip-link:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--cm-focus-ring);
	border-radius: var(--cm-radius-xs);
}

/* .project-card sets overflow:hidden, which clips BOTH outline and box-shadow - so the
   ring has to go inside. :has() rather than :focus-within so a mouse click does not
   trigger it. */
.project-card:has(.project-card-link:focus-visible) {
	box-shadow: var(--cm-focus-ring-inset);
	border-color: transparent;
}
.project-card-link:focus-visible { outline: 2px solid transparent; }

/* professional-header.css removes the tap highlight sitewide with
   `* { -webkit-tap-highlight-color: transparent }`. It is a legitimate touch
   affordance; restore it on actual controls. */
a, button, [role="button"], input, select, textarea, summary {
	-webkit-tap-highlight-color: rgba(192, 57, 47, 0.18);
}

/* Replaces the two outline:none rules whose 10%-alpha replacement ring measured ~1.1:1
   (modal-styles.css and 404.php). The modal is the only place Gravity Forms appears on
   the homepage, so the bad layer was winning exactly where it mattered most. */
.get-started-form-wrapper input:focus-visible,
.get-started-form-wrapper select:focus-visible,
.get-started-form-wrapper textarea:focus-visible {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--cm-focus-ink);
}

/* ============================================================
   UTILITIES
   ============================================================ */

/* Visually hidden but available to assistive tech. Uses clip-path, NOT display:none.
   (Bootstrap's .visually-hidden exists in style.css, but this theme-owned copy does not
   depend on that 357KB file continuing to load.) */
.cm-sr-only {
	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 (WCAG 2.4.1). The hidden state comes from .visually-hidden-focusable in
   style.css; this is the visible-on-focus presentation. Fixed positioning so revealing
   it does not reflow the header. */
.skip-link:focus,
.skip-link:focus-visible {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	background: var(--cm-surface);
	color: var(--cm-ink);          /* 11.03:1 */
	font-weight: 600;
	font-size: var(--cm-text-base);
	text-decoration: none;
	border-radius: var(--cm-radius-sm);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	clip: auto;
	clip-path: none;
	white-space: nowrap;
}

/* ============================================================
   TAP TARGETS - WCAG 2.2 AA, 2.5.8 Target Size (Minimum), >=24x24
   ============================================================
   .mobile-toggle measured 28x20 at <=767px and 26x18 at <=430px, and it is the ONLY
   route to the navigation on a phone. box-sizing matters here: style.css sets
   border-box globally, under which padding would eat the 20px bar stack instead of
   extending the hit area, so content-box is required. */
@media (max-width: 767.98px) {
	.mobile-toggle {
		min-width: 44px;
		min-height: 44px;
		padding: 12px 8px;
		box-sizing: content-box;
		justify-content: space-between;
	}
	/* Ran ~23px tall, and 9.6px text at <=430px. */
	.header-cta-btn {
		min-height: 32px;
		padding: 8px 12px;
		font-size: 0.75rem;
	}
	.mobile-phone-icon {
		min-width: 40px;
		min-height: 40px;
	}
}
@media (max-width: 430px) {
	.header-cta-btn {
		min-height: 32px;
		padding: 8px 10px;
		font-size: 0.75rem;  /* was 0.6rem = 9.6px */
	}
}

/* ============================================================
   REDUCED MOTION
   ============================================================
   Coverage before this was effectively nil on desktop: the only theme-wide block lived
   inside `@media (max-width: 768px)` in cosmick-modern.css, so it never applied above
   768px.

   The `html, html *` selector is deliberate. cosmick-modern.css declares
   `* { animation-duration: .5s !important; transition-duration: .3s !important }` inside
   a phone media query at specificity (0,0,0). `html *` is (0,0,1), which beats it on
   SPECIFICITY rather than source order - so this holds regardless of load order. */
@media (prefers-reduced-motion: reduce) {
	html, html *, html *::before, html *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

	/* cosmick-modern.css sets an UNGUARDED `html { scroll-behavior: smooth }`. Bootstrap's
	   own copy is correctly wrapped in `prefers-reduced-motion: no-preference`, so the net
	   effect was that reduce users got MORE smooth scrolling, not less. */
	html { scroll-behavior: auto !important; }

	/* Named offenders, so the intent survives a future refactor. */
	.hero-scroll-arrow        { animation: none !important; }
	.case-study-badge::before { animation: none !important; opacity: 0.75 !important; }

	/* Equal specificity to professional-clean.css's `scroll-behavior: smooth !important`
	   on the two mobile snap scrollers; later file wins. */
	.client-logos-section .client-logos-slider,
	.testimonials-professional-section .testimonials-carousel {
		scroll-behavior: auto !important;
	}

	/* Kill the lift/scale hovers rather than merely shortening them. */
	.btn-professional-primary:hover,
	.btn-professional-secondary:hover,
	.btn-professional-outline:hover,
	.project-card:hover,
	.service-professional-card:hover,
	.header-cta-btn:hover,
	.mobile-phone-icon:hover,
	.cm-hero-badge:hover,
	.brand-link:hover .brand-logo,
	.client-logos-section .client-logo-item:hover img,
	.project-card:hover .project-image img {
		transform: none !important;
	}

	/* These two have a transform in their RESTING state (translateY(-50%) for vertical
	   centring), so a blanket `transform: none` would drop them 25px. */
	.client-logos-nav-btn:hover,
	.testimonials-nav-btn:hover {
		transform: translateY(-50%) !important;
	}
}