/*
 * Geometry guard for the 2026 chrome on templates migrated from the old
 * `thinkpalm` theme.
 *
 * Those pages link the old theme's own stylesheets from inside their <head>,
 * and `thinkpalm/css/main.css` happens to define a completely unrelated
 * `.site-header` (a full-bleed hero: `height: 100vh`, an Unsplash background,
 * `margin-bottom: 50px`). It is the same class name the 2026 header uses, at
 * the same specificity (0,1,0), so whichever sheet the page happens to load
 * last wins — `/uk/` rendered a 1000px-tall header, `/uk-2024/` a 130px one
 * (that page also picks up a bare `header { min-height: 130px }`).
 *
 * These rules restate header.css's own base box one specificity step higher
 * (`header.site-header` = 0,1,1) so no bare `.site-header` or `header` rule
 * can reach it regardless of load order. State rules in header.css are all
 * `.site-header.is-*` (0,2,0) and still win over this, so the scrolled,
 * search-open and menu-open states are unaffected. Responsive sizing also
 * still works: header.css changes `--tp-header-height` per breakpoint rather
 * than re-declaring `.site-header`, and the value below reads that token.
 */

header.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	width: auto;
	height: var(--tp-header-height);
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	background: transparent;
}

/*
 * ---------------------------------------------------------------------------
 * Reboot guard — client QA 2026-10-08
 * ---------------------------------------------------------------------------
 * chrome-standalone.css deliberately scopes its resets with `:where()` so they
 * weigh the same as the bare element selectors they mirror in base.css, and
 * relies on load order to win the resulting ties (see the note at the top of
 * that file). Two things on these pages break that bet:
 *
 *   1. thinkpalm/css/main.css's Bootstrap 4 — `a:hover { color: #0056b3;
 *      text-decoration: underline }`. That is (0,1,1); the `:where(…) a` reset
 *      is (0,0,1). A class beats an element whatever the order, so every
 *      chrome link underlined on hover on all ~35 migrated pages, and any link
 *      whose own :hover rule sets no colour — the three logos and the language
 *      pill, which only animate opacity — was repainted Bootstrap blue.
 *
 *   2. 17 pages additionally load cdn.jsdelivr.net/npm/bootstrap@5.2.2 from
 *      inside the page body, i.e. AFTER the chrome CSS. Its `a { text-decoration:
 *      underline }` and `ul { padding-left: 2rem; margin-bottom: 1rem }` are
 *      (0,0,1) and so win the tie on order, underlining links at rest and
 *      shoving the nav 32px left / 8px up.
 *
 * So these rules restate the affected resets one specificity step higher, the
 * same technique the geometry guard above uses: the region root is tag
 * qualified (`header.site-header` = 0,1,1, `.site-header` = <header>,
 * `.site-mobile-nav` = <div>, `.site-footer` = <footer>, `.tp-git` =
 * <section>), which puts each rule at (0,1,2) — above `a:hover` (0,1,1) and
 * `ul` (0,0,1), still below every two-class component rule such as
 * `.mega-menu__link:hover` (0,2,0). Written as rest-state rules with no
 * pseudo-class of their own, so they apply in every state without
 * out-ranking the component hover rules that give the links their colours.
 */

header.site-header a,
div.site-mobile-nav a,
footer.site-footer a,
section.tp-git a {
	text-decoration: none;
}

/* The three underlines the design does ask for, restated at (0,2,2) so the
   blanket reset above cannot reach them. `.site-footer__contact-link[href^=
   'mailto:'] span:last-child` needs no restating: it is (0,3,1) and targets a
   span, not an anchor. */
footer.site-footer .site-footer__legal a,
section.tp-git .tp-git__check-label a,
section.tp-git .tp-popup-checkbox__label a {
	text-decoration: underline;
}

/* Links whose own :hover rule animates opacity only, so a reboot `a:hover`
   colour reaches them. header.css/footer.css give the logos no colour at all
   and the pill only a (0,1,0) rest colour. */
header.site-header .site-header__logo,
div.site-mobile-nav .site-mobile-nav__logo,
footer.site-footer .site-footer__logo {
	color: inherit;
}

header.site-header .site-header__jp {
	color: var(--tp-white);
}

/* `ul { padding-left: 2rem; margin-bottom: 1rem }`. Only `.site-header__menu`
   showed the shift — the footer lists happen to declare `margin: 0; padding: 0`
   themselves — but the reboot reaches every chrome list, so guard the lot.
   The mega menu is excluded: it manages its own box (`.mega-menu__links` wants
   `padding-top: 8px`, `.mega-menu__children-list` `padding-left: 12px`, both at
   (0,1,0)), and it was never exposed to the reboot for that same reason. */
header.site-header :is(ul, ol):not([class*='mega-menu']),
div.site-mobile-nav :is(ul, ol):not([class*='mega-menu']),
footer.site-footer :is(ul, ol):not([class*='mega-menu']),
section.tp-git :is(ul, ol):not([class*='mega-menu']) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* `label { margin-bottom: 0.5rem }` — adds 8px under every Get In Touch field
   label, which is what made the footer form read as broken. */
header.site-header label,
div.site-mobile-nav label,
footer.site-footer label,
section.tp-git label {
	margin-bottom: 0;
}

/* The chrome takes its 24px line-height by inheritance from `body` -- from
   base.css on the homepage, and from Bootstrap's `body { line-height: 1.5 }`
   on the migrated pages. /services/ai-development-services/ loads neither, so
   its `body` stays at `normal` and every chrome element with no line-height of
   its own (the three logos, the five social links) fell back to the font's
   natural leading. Declaring it on the region roots reproduces the homepage's
   inheritance exactly, and leaves every component that sets its own
   line-height untouched. */
header.site-header,
div.site-mobile-nav,
footer.site-footer,
section.tp-git {
	line-height: 24px;
}

/* Same inheritance story as the line-height above, one property along. The
   migrated pages set `body.body { font-family: Poppins; letter-spacing: -0.4px }`
   in the old theme's sheet. The chrome re-declares font-family itself, so that
   part never showed, but nothing in the chrome declares letter-spacing -- so
   the -0.4px inherited straight through and squeezed every chrome label.
   It only became visible where it changed a box: "Start Your Project" measured
   199px instead of the Figma 207px, which pulled the whole nav row 8px right on
   /Industries/storage-industry-testing-service/ and /technologies/wireless-technology/
   while the other 40 pages sat at 207. `normal` is what the homepage inherits,
   so this restates the reference rather than inventing a value. */
header.site-header,
div.site-mobile-nav,
footer.site-footer,
section.tp-git {
	letter-spacing: normal;
}

/* wecdpp-rdkb/css/wifi2026-css/wecdpp.css lazy-renders that page's own sections
   with `content-visibility: auto`, and lists `.site-footer` among them. Under
   the old theme the selector matched nothing -- that page's footer markup is
   `<footer class="nsf">` -- but thinkpalm2026's footer IS .site-footer, so
   after the cutover the rule started deferring the real chrome footer: it
   rendered at full height but stayed render-skipped, so its text was not in
   the accessibility tree or innerText until scrolled near, and
   content-visibility:auto implies contain:paint, which also clips it.
   The same class-name collision this file already exists to undo, so the
   region root is restated one specificity step higher (0,1,1 beats 0,1,0). */
footer.site-footer {
	content-visibility: visible;
}

/* agentic-ai/css/styles.css retypes EVERY h2 and p at mobile with !important
   (`@media (max-width: 767.98px)`). The cutover renders footer-html.php's
   .site-footer inside that page, so those two rules were landing on the shared
   footer: its column headings came out at 28px instead of 14px and its address
   and copyright at 17px instead of 12px, stretching the footer from 951px to
   1008px at 375px wide. An !important declaration can only be beaten by another
   one, so unlike every guard above these have to carry it too -- and they are
   scoped to the page, because this is the only page whose sheet does it.
   (The usual fix, re-scoping the offending rule with :where(:not(...)), is not
   available: agentic-ai/ is owned by the web server and not writable over SFTP.)
   The values restate footer.css's own authored mobile type -- `.site-footer__
   col-heading` 600 14px/24px, `.site-footer__address` 400 12px/16px,
   `.site-footer__copyright` 500 12px/24px -- rather than inventing a size, and
   the breakpoint is footer.css's 768px so the two never disagree at the edge.
   .agentic-ai-page is set on that template's <body> for this purpose alone. */
@media (max-width: 768px) {
	.agentic-ai-page footer.site-footer .site-footer__col-heading {
		font-size: 14px !important;
		line-height: 24px !important;
	}

	.agentic-ai-page footer.site-footer .site-footer__address {
		font-size: 12px !important;
		line-height: 16px !important;
	}

	.agentic-ai-page footer.site-footer .site-footer__copyright {
		font-size: 12px !important;
		line-height: 24px !important;
	}
}

/*
 * ---------------------------------------------------------------------------
 * Get In Touch form vs Materialize — client QA 2026-10-22
 * ---------------------------------------------------------------------------
 * Migrated pages that link thinkpalm/css-new/main.css (Materialize) rendered
 * the common footer form broken ("The footer form UI is broken" on the quality
 * policy and wireless-software pages). Materialize styles every text input as
 * a bare underline — `input[type=text]:not(.browser-default)` (0,2,1) beats the
 * form's `.tp-mf__control` (0,1,0), and its `:focus:not([readonly])` variant is
 * (0,4,1) — and its materialize.js adds `.active` to every input label, which
 * this theme's style.css sizes `height: 100%`, so each floated label grew to
 * the full field height and its white notch background covered the
 * placeholder. Its custom checkbox also turns the span after any checkbox into
 * a 35px-padded box with a teal tick drawn in ::before/::after, and its bare
 * `h3`/`p` rules add 10px under the card title and -0.4px tracking.
 * Every value below restates section-get-in-touch.css (or the inherited value
 * the homepage computes), one step above the Materialize selector it undoes.
 */
section.tp-git .tp-mf input.tp-mf__control {
	box-sizing: border-box;
	height: 56px;
	margin: 0;
	padding: 0 16px;
	color: #1d1b20;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	box-shadow: none;
}

/* main.css and an inline <style> on these pages both set `letter-spacing:
   -0.4px !important` and `font-size: 12px !important` on every text input at
   max-width 480px; only another !important can undo them, so these two
   properties carry it. 16px also keeps iOS from zooming in on focus. */
section.tp-git .tp-mf input.tp-mf__control {
	font-size: 16px !important;
	letter-spacing: normal !important;
}

section.tp-git .tp-mf input.tp-mf__control:hover {
	border-color: #1d1b20;
}

section.tp-git .tp-mf input.tp-mf__control:focus,
section.tp-git .tp-mf input.tp-mf__control:focus-visible {
	border-color: #1977f3;
	box-shadow: inset 0 0 0 1px #1977f3;
}

section.tp-git .tp-mf .tp-mf__label {
	height: auto;
}

section.tp-git .tp-mf input.tp-mf__control ~ label.tp-mf__label {
	color: #49454f;
}

section.tp-git .tp-mf input.tp-mf__control:focus ~ label.tp-mf__label {
	color: #1977f3;
}

section.tp-git .tp-git__check .tp-git__check-input ~ .tp-git__check-box {
	display: flex;
	position: static;
	width: 16px;
	height: 16px;
	padding: 0;
	line-height: inherit;
}

section.tp-git .tp-git__check .tp-git__check-input ~ .tp-git__check-box::before,
section.tp-git .tp-git__check .tp-git__check-input ~ .tp-git__check-box::after {
	content: none;
}

section.tp-git h3.tp-git__card-title {
	position: static;
	padding: 0;
}

section.tp-git p {
	letter-spacing: normal;
}

/* --- Bare `p` / `footer li a` rules from the old theme — client QA 2026-10-22 ---
   The `letter-spacing: normal` reset above only fixes what the chrome INHERITS.
   thinkpalm/css-new/main.css also sets `p { letter-spacing: -0.4px }` directly
   on the element, which beats any inherited value, so every class-less-styled
   <p> in the chrome still came out tracked in on the legacy service pages
   (/services/communication/rdk-b-wifi-management-solution/,
   /services/wireless-software-development/): the footer address block, and the
   mega-menu preview title/description, whose copy then wrapped onto an extra
   line (preview box 104px on the homepage, 80px here). Scoped to those classes
   only, because footer.css deliberately authors -0.4px on the legal row and
   copyright, so a blanket `footer p` reset would undo the design. */
footer.site-footer p.site-footer__address,
header.site-header p.mega-menu__preview-title,
header.site-header p.mega-menu__preview-desc {
	letter-spacing: normal;
}

/* css/responsive.css: `@media (max-width: 1400px) { footer li a, footer p {
   font-size: 13px } }`. The social icon links carry no font-size of their own,
   so below 1400px they shrank from the inherited 16px to 13px. `inherit` gives
   back exactly what the homepage computes. */
footer.site-footer .site-footer__social-list a {
	font-size: inherit;
}

/* --- Get In Touch on the Agentic AI page — client QA 2026-10-22 ---
   That page's old CF7 form was swapped for the common section, which put
   .tp-git under the template's own css/styles.css for the first time. Below
   767.98px that sheet sets `h2` and `p` to 28px/1.3 and 17px/1.55, both
   !important, so the title, description, field help text and status line came
   out at 17px instead of the section's 12-14px. As with the footer block above,
   an !important rule can only be answered with another, so these restate
   section-get-in-touch.css's authored mobile values on .agentic-ai-page only. */
@media (max-width: 768px) {
	.agentic-ai-page section.tp-git h2.tp-git__title {
		font-size: 28px !important;
		line-height: 34px !important;
	}

	.agentic-ai-page section.tp-git p.tp-git__desc {
		font-size: 14px !important;
		line-height: 24px !important;
	}

	.agentic-ai-page section.tp-git p.tp-mf__help {
		font-size: 12px !important;
		line-height: 16px !important;
	}

	.agentic-ai-page section.tp-git p.tp-git__status {
		font-size: 14px !important;
		line-height: 22px !important;
	}
}

/* Every other page clips the Turnstile widget to 65px through popup-form.css
   (`.cf-turnstile { height: 65px; overflow: hidden }`), a sheet that arrives
   with wp_head(). The Agentic template never calls wp_head(), so its widget
   kept the iframe's 71px and the consent row grew 6px. Restated for the
   section only; the page's own demo popup keeps its own Turnstile styling. */
section.tp-git .tp-git__captcha .cf-turnstile {
	height: 65px;
	overflow: hidden;
}

/* --- Breadcrumb row on lifted-banner pages — client QA 2026-10-22 ---
   "Header and footer differ from the original" on Internet of Things: content
   after the breadcrumb sat 42px higher than on thinkpalm.com (24px on case
   studies and news). It is the last link of the legacy navbar chain. The old
   `top: -110px` banner lift moved the banner's paint but not its layout box, so
   on live everything after the banner starts 110px below its visible bottom,
   and the breadcrumb's `margin-top: -78px` cannot collapse (the wrapper is a
   flex item of `.row`), so the wrapper clamps at max(0, content - 110). The
   lift is gone on these pages and the breadcrumb is restated at 32px (inline
   rule in the legacy headers), which keeps the breadcrumb itself where live
   has it but drops that clamp: the row is its own height, not 110.
   A 110px zero-width float, cleared below, gives the row's content box
   exactly max(110px, content) - live's geometry, independent of the wrapper's
   own padding (`/resoures/case-studies/` pads 32px on top). Same :has() scope
   as the 32px rule, so pages without a lifted banner are untouched. */
body:has(.servicebnr, .blog_banner, .news_banner, #career-banner, .about_banner, #contact-banner) .inner_wrap:has(> .breadcrumb-inner)::before {
	content: "";
	float: left;
	width: 0;
	height: 110px;
}

body:has(.servicebnr, .blog_banner, .news_banner, #career-banner, .about_banner, #contact-banner) .inner_wrap:has(> .breadcrumb-inner)::after {
	content: "";
	display: block;
	clear: both;
}

/* The homepage antialiases all text from base.css (`body { -webkit-font-smoothing:
   antialiased }`), which migrated pages don't load. Without it, macOS renders
   the 2026 header, form and footer on legacy pages visibly heavier than the same
   chrome on the homepage. Scoped to the chrome regions so legacy page content
   keeps its own rendering. */
header.site-header,
div.site-mobile-nav,
section.tp-git,
footer.site-footer {
	-webkit-font-smoothing: antialiased;
}

/* css-new/main.css styles every scrollbar on the page (`::-webkit-scrollbar`
   with a yellow track and a blue gradient thumb), including the Message box in
   the Get In Touch form. Once any page-level ::-webkit-scrollbar rule exists the
   native bar can't be restored, so this restates a neutral one for the form. */
section.tp-git textarea::-webkit-scrollbar {
	width: 8px;
	background-color: transparent;
}

section.tp-git textarea::-webkit-scrollbar-button {
	display: none;
}

section.tp-git textarea::-webkit-scrollbar-track {
	background: transparent;
	border: 0;
	box-shadow: none;
}

section.tp-git textarea::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border: 0;
	border-radius: 4px;
}

section.tp-git textarea::-webkit-scrollbar-thumb:hover,
section.tp-git textarea::-webkit-scrollbar-thumb:active {
	background: #a8a8a8;
}