/*
 * Compatibility layer for the 2026 header/footer when they are rendered on a
 * page served by the OLD `thinkpalm` theme (currently: the Matter CSA
 * landing page — see tp2026-chrome.php).
 *
 * header.css and footer.css are written on top of base.css, but base.css
 * cannot be loaded there: its resets are unscoped (`a`, `ul`, `p`, `img`,
 * `h1`-`h6`, `body`) and would repaint the whole Matter CSA page, which was
 * built against the old theme's Bootstrap baseline. So the handful of base.css
 * rules the chrome actually depends on are repeated here, scoped to the
 * chrome's own roots.
 *
 * The scope is written as `:where(.site-header, …) el`, NOT `.site-header el`.
 * `:where()` contributes zero specificity, so each rule below weighs exactly
 * as much as the bare element selector it mirrors in base.css. With a class
 * scope these resets would out-specify header.css/footer.css themselves and
 * silently flatten their type scale, colours and link underlines.
 *
 * Load order matters as much as specificity: tp2026_chrome_enqueue() puts this
 * file in base.css's own slot — after every old-theme stylesheet, but BEFORE
 * header.css and footer.css — so the chrome always wins its ties against the
 * rules repeated here.
 *
 * Keep in sync with assets/css/base.css — that file stays the source of truth.
 * This stylesheet is NOT loaded on pages already served by thinkpalm2026.
 */

:where(.site-header, .site-mobile-nav, .site-mobile-nav-backdrop, .site-footer),
:where(.site-header, .site-mobile-nav, .site-mobile-nav-backdrop, .site-footer) *,
:where(.site-header, .site-mobile-nav, .site-mobile-nav-backdrop, .site-footer) *::before,
:where(.site-header, .site-mobile-nav, .site-mobile-nav-backdrop, .site-footer) *::after {
	box-sizing: border-box;
}

:where(.site-header, .site-mobile-nav, .site-footer) img {
	max-width: 100%;
	display: block;
}

:where(.site-header, .site-mobile-nav, .site-footer) a {
	color: inherit;
	text-decoration: none;
}

:where(.site-header, .site-mobile-nav, .site-footer) button {
	font-family: var(--tp-font-body);
	cursor: pointer;
	border: none;
	background: none;
	/* The UA gives buttons `padding: 1px 6px`; with border-box and a fixed
	   width that silently eats 12px of content box. Buttons that want padding
	   set it themselves. */
	padding: 0;
}

:where(.site-header, .site-mobile-nav, .site-footer) :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-family: var(--tp-font-heading);
	font-weight: 600;
}

:where(.site-header, .site-mobile-nav, .site-footer) p {
	margin: 0;
}

:where(.site-header, .site-mobile-nav, .site-footer) ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.site-header, .site-mobile-nav, .site-footer) li {
	/* thinkpalm/css/main.css and style.css decorate list items site-wide with a
	   bullet background and left padding; the chrome draws neither and sizes
	   every row from its link's own font shorthand. */
	background: none;
	padding: 0;
	margin: 0;
}

:where(.site-header, .site-mobile-nav, .site-footer) svg {
	/* Bootstrap's `img { vertical-align: middle }` does not cover SVG, and the
	   UA baseline alignment adds a few px under every inline icon. */
	display: block;
}

:where(.site-header, .site-mobile-nav) :is(input, label) {
	font-family: var(--tp-font-body);
	font-weight: inherit;
	margin-bottom: 0;
}

/* base.css utility used by the chrome's icon-only buttons and skip link. */
:where(.site-header, .site-mobile-nav, .site-footer) .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * base.css button pills — the header CTA and the mobile drawer CTA are
 * both `.tp-btn .tp-btn--primary`. Class-level here on purpose: these
 * mirror base.css's own class selectors, not element resets.
 * ------------------------------------------------------------------ */

:where(.site-header, .site-mobile-nav) .tp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 35px;
	border-radius: var(--tp-radius-pill);
	font: var(--tp-btn);
	white-space: nowrap;
	transition: transform var(--tp-speed-fast) var(--tp-ease),
		box-shadow var(--tp-speed-fast) var(--tp-ease),
		background var(--tp-speed-fast) var(--tp-ease),
		color var(--tp-speed-fast) var(--tp-ease),
		border-color var(--tp-speed-fast) var(--tp-ease);
}

:where(.site-header, .site-mobile-nav) .tp-btn--primary {
	background: var(--tp-blue);
	color: var(--tp-white);
}

:where(.site-header, .site-mobile-nav) .tp-btn--primary:hover {
	background: var(--tp-blue-dark);
	color: var(--tp-white);
	transform: translateY(-2px);
}

/* ------------------------------------------------------------------ *
 * Specificity escalations.
 *
 * The `:where()` resets above deliberately weigh the same as a bare element
 * selector, which is not enough against the old-theme rules below. Each
 * escalation was checked against header.css/footer.css first: none of them
 * declares the property being reset here, so raising the weight cannot flatten
 * the chrome's own styling even though those files load later.
 * ------------------------------------------------------------------ */

/* thinkpalm/css/main.css:327 `footer li { margin: 15px 0 }` (0,0,2) — footer.css
   sizes every link row from its own `font` shorthand and sets no li margins, so
   this added 30px to each of the ~11 rows and made the footer 168px too tall. */
.site-footer li {
	margin: 0;
}

/* thinkpalm/style.css (Twenty Twenty) paints every bare button crimson via
   `button:not(.toggle)` — 0,1,1, so it out-specifies a single class and turned
   the mega-menu triggers and the hamburger into #cd2653 blocks. header.css
   gives none of the chrome's buttons a background of their own. */
.site-header button,
.site-mobile-nav button {
	background-color: transparent;
}

/* main.css:646 carries an unrelated `.site-header` block (a 100vh Unsplash
   hero left over from the theme's starter markup). header.css re-declares most
   of it, but not these three — `flex-direction: column` in particular stacks
   the logo, nav and CTA vertically.

   The font-family/color pair is not a collision: base.css sets them on `body`,
   which the chrome inherits on the homepage. Restated on the roots here so the
   two pages compute identically instead of inheriting the old theme's Roboto
   (header) and `footer { color: #fff }` (footer). */
.site-header {
	flex-direction: row;
	margin-bottom: 0;
	background-image: none;
}

.site-header,
.site-mobile-nav,
.site-footer {
	font-family: var(--tp-font-body);
	color: var(--tp-black);
}