/* WordPress integration.
   Hand-maintained — NOT generated by extract.py, so it survives a rebuild.
   Everything here bridges our markup to something WordPress or a plugin renders. */

/* The kit's global Accent line-height is stored as 1.6px instead of 1.6em, which
   collapses EVERY Elementor button on the site to ~2px tall. Our own header no
   longer uses an Elementor button, but the quote popup's submit button still does,
   and that is the conversion path. Same specificity as post-5.css, loaded after it.
   DELETE THIS RULE once the kit is corrected in
   Site Settings → Global Fonts → Accent → Line Height (switch the unit to EM). */
.elementor-kit-5 { --e-global-typography-accent-line-height: 1.6em; }

/* The mobile menu button.
   Our markup sets type="button" (correct HTML — it must not submit anything), and
   the parent theme's reset styles [type="button"]. That selector ties .burger on
   specificity and wins on source order, so the burger collapsed to 0x0 and the
   mobile menu could not be opened at all. One extra class settles it.
   Breakpoint must stay in step with the .burger rule in chrome.css. */
.site-head .burger { display: none; }
@media (max-width: 1040px) {
	.site-head .burger { display: flex; }
}

/* The footer logo. chrome.css sets `.foot-brand img{height:34px}` and no width, so the
   SVG — which carries width/height attributes in the markup — kept its attribute width
   of 158px against a correct 100px (viewBox 158.3x53.8 at 34px tall). It rendered 58%
   too wide, which reads as "not aligned" because the wordmark no longer starts where
   the paragraph under it starts. The header's `.brand img` already sets width:auto;
   this is the same rule the footer was missing. */
.foot-brand img { width: auto; }

/* The parent theme's reset declares `a:hover{color:#336}`, and it loads AFTER our
   chrome sheets, so any link of ours that does not state its own hover colour turns
   dark blue. It catches the links nobody styled — breadcrumbs, inline body copy, the
   skip link.

   The old comment here claimed "component rules (specificity 20+) still win over this".
   They do not. `body.tds-owned a:hover` is (0,2,2) — two classes/pseudo-classes AND two
   elements — so it beat `.btn-g:hover` (0,2,0) and every other single-class button rule,
   and quietly repainted button text gold on hover no matter what the component asked
   for. That mattered much more once the button hovers stopped restating their own
   colour. Anything that is a BUTTON is excluded here rather than fighting it downstream.
   Simple :not() only: a complex selector inside :not() would invalidate the whole rule
   on an older engine and send every unstyled link back to blue.
   The exclusion list is wrapped in :where() on purpose. A bare :not() chain counts every
   argument, which pushed this rule to (0,7,2) — high enough to out-rank the very button
   rules it was meant to leave alone, and to beat the footer's own social-icon rule.
   :where() contributes ZERO specificity, so the rule stays at its original (0,2,2) and
   only its REACH changes, which is all we wanted. It also accepts a descendant selector,
   which a bare :not() does not, so `.foot-social a` (those links carry no class of their
   own) can finally be excluded too. */
body.tds-owned a:not(:where([class*="btn"], .nav-cta, .f, .lb-nav, .svc-more, .foot-social a)):hover { color: var(--accent); }

/* "You are here" in the nav and footer. The Elementor footer used #FF0000 for this,
   which is in no part of the palette; brand accent is already the hover colour, so
   the active state reads as a deliberate state rather than an error. */
.foot-col a.active,
.foot-col a[aria-current="page"],
.site-head .lnk.active,
.mega-panel a.active { color: var(--accent); }

/* chrome.css scopes a reset — `.site-head a, .m-nav a, .foot a { color: inherit }` —
   at specificity 11, which outranks `.btn-p { color:#fff }` at 10. So the gold CTA
   inside the mobile drawer rendered with grey label text on a gold pill: real
   contrast failure, and only on the mobile menu, which is why it survived review. */
.site-head .btn-p, .m-nav .btn-p, .foot .btn-p,
.site-head .btn-guide, .m-nav .btn-guide, .foot .btn-guide { color: #fff; }

/* SERVICES and INDUSTRIES rendered grey (#333) while WORK/PRICING/BLOG/ABOUT rendered
   near-black. Same reset, same collision as the block above, and it is a regression from
   making the dropdown triggers real links: the prototype has `<button class="mega-t">`,
   and a <button> can never match `.site-head a { color: inherit }` (0,1,1). header.php
   turned them into `<a class="mega-t">`, at which point that reset began outranking
   `.mega-t` (0,1,0) and the two triggers resolved to `inherit` — walking .mega →
   .nav-links → .bar → .site-head → body and landing on hello-elementor's `body{color:#333}`.
   The four plain links escaped only because their rule is `.nav-links a.lnk` (0,2,1).
   The master prototype is unaffected, which is why this is invisible there.
   Specificity 20 on purpose: clears the reset, stays under the hover/open rules at 30. */
.site-head .mega-t { color: var(--ink); }

/* Footer width: REVERTED to the shared 1560px column, on Siim's call. This block used to
   force `max-width:none` so the footer matched the full-bleed gallery above it. It read
   worse, not better: five link columns stretched across 1900px put "Rated 4.9" 170px
   outside the header's own right edge, so the footer lined up with nothing. The header is
   the line the eye actually holds. `.wrap` already carries max-width:var(--w), so the fix
   is to stop overriding it — only .foot-bot keeps its gutter restated, because it is a
   flex row rather than the grid above. */
.foot .wrap { max-width: var(--w); margin-inline: auto; padding-inline: var(--gut); }

/* And it has to be stated HERE, not left to the prototype. `.wrap{max-width:var(--w)}`
   ships in the page-gated components sheet, which only loads on the four hand-built
   pages. The footer renders on all ~60, so on /pricing/, /contact/ and every Elementor
   page the footer wrap had no max-width at all and ran the full 1900px while the header
   above it stayed at 1560. The override this replaced was hiding that everywhere. */

/* CRISP LAUNCHER.
   It was raised 108px on the home page to clear the hero's proof band. Now that the
   rating is right-aligned to the header CTA there is room beside it, and a bubble
   floating halfway up the hero reads as misplaced. Back to Crisp's own position, just
   tucked slightly closer to the edge so it sits clear of the rating. */
body.home .crisp-client #crisp-chatbox > div > div { bottom: 20px !important; right: 16px !important; }