/*
 * CP header 2026.
 * Layout/typography: design/header/SPEC.md (Figma H7pMpwSkyMbj0QZDYXsdjZ).
 * Interactions & animation: the Figma Sites demo (SPEC.md → Interactions & animation).
 * Desktop ≥ 1280px, tablet 1024–1279px, mobile < 1024px. R2 (2026-10-23, Figma 23:4253/4254/4255): 64px bar,
 * tighter desktop panel with a fixed per-menu height (header.js fixMenuHeight) and a viewport cap — SPEC.md → R2.
 * Fonts: AttenNew* @font-face come from the child theme style.css; mencken-std from the Typekit kit.
 * Loaded by inc/header-2026.php after GP + child styles.
 */

:root {
	--cp-ivory: #F8F1E6;      /* heritage-ivory  → --color-heritage-ivory */
	--cp-charcoal: #333433;   /* charcoal-ledger → --color-charcol */
	--cp-blue: #165D7D;       /* brand-blue      → --color-brand-blue */
	--cp-sandstone: #D4C8B8;  /* sandstone       → --color-sandstone */

	--cp-font-regular: 'AttenNewRegular', sans-serif;
	--cp-font-medium: 'AttenNewMedium', sans-serif;
	--cp-font-bold: 'AttenNewBold', sans-serif;
	--cp-font-serif: 'mencken-std', Georgia, serif;

	--cp-ease: cubic-bezier(0.4, 0, 0.2, 1);          /* panels, overlay, drawer, content */
	--cp-ease-nudge: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* arrow/chevron nudge */
}

/* Scroll lock while a panel, search or the drawer is open. On desktop the scrollbar gutter is kept so the
 * page behind the panel doesn't shift; below 1024px the drawer/search cover the whole window, and a reserved
 * gutter would show as an uncoverable strip on their right edge. */
html.cp-scroll-lock { overflow: hidden; }
@media (min-width: 1024px) {
	html.cp-scroll-lock { scrollbar-gutter: stable; }
}

/* ---------- Reset scoped to the header ----------
 * Everything is scoped under .cp-header: GP's inline CSS uses selectors like button:not(.menu-toggle)
 * (specificity 0,1,1), so base resets are .cp-header <el> (0,1,1, wins by load order) and component
 * rules are .cp-header .cp-x (0,2,0). */
.cp-header,
.cp-header *,
.cp-header *::before,
.cp-header *::after { box-sizing: border-box; }
.cp-header [hidden] { display: none !important; }
.cp-header ul { list-style: none; margin: 0; padding: 0; }
.cp-header p { margin: 0; }
.cp-header a { color: inherit; text-decoration: none; }
.cp-header button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
.cp-header img { display: block; max-width: none; }
/* GP main.css styles every button/link on hover/focus (background, colour) — neutralise inside the header. */
.cp-header button:hover,
.cp-header button:focus,
.cp-header button:active { background: none; color: inherit; }
.cp-header a:hover,
.cp-header a:focus { color: inherit; }
.cp-header :focus-visible { outline: 2px solid var(--cp-blue); outline-offset: 2px; }

.cp-header {
	position: relative;
	z-index: 1000;
	background: var(--cp-ivory);
	color: var(--cp-charcoal);
	font-family: var(--cp-font-regular);
	-webkit-font-smoothing: antialiased;
}

/* ---------- Shared pieces ---------- */
.cp-header .cp-eyebrow,
.cp-header .cp-eyebrow-link {
	font-family: var(--cp-font-bold);
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}
.cp-header .cp-eyebrow-link { display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s ease; }

/* Mask icons: the SVG files' shapes, painted with currentColor so hover colours can transition. */
.cp-header .cp-i {
	display: block;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--cp-i) center / contain no-repeat;
	mask: var(--cp-i) center / contain no-repeat;
	transition: color 0.15s ease, transform 0.4s var(--cp-ease-nudge);
}
.cp-header .cp-i--chevron   { width: 22px; height: 22px; --cp-i: url('icon-chevron-right.svg'); }
.cp-header .cp-i--arrow     { width: 18px; height: 18px; --cp-i: url('icon-arrow-right-18.svg'); }
.cp-header .cp-i--arrow-16  { width: 16px; height: 16px; --cp-i: url('icon-arrow-right-18.svg'); }
.cp-header .cp-i--external  { width: 12px; height: 12px; --cp-i: url('icon-external-12.svg'); }
.cp-header .cp-i--search-24 { width: 24px; height: 24px; --cp-i: url('icon-search-24.svg'); }

/* Eyebrow link hover (demo): text → blue 0.2s, arrow → blue + 5px nudge 0.4s. */
.cp-header .cp-eyebrow-link:hover { color: var(--cp-blue); }
.cp-header .cp-eyebrow-link:hover .cp-i { transform: translateX(5px); }

.cp-header .cp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--cp-charcoal);
	font-family: var(--cp-font-medium);
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Client feedback: Contact Us hover/press = brand blue with ivory text (as on creativeplanning.com). */
.cp-header .cp-btn--outline:hover,
.cp-header .cp-btn--outline:focus-visible,
.cp-header .cp-btn--outline:active {
	background-color: var(--cp-blue);
	border-color: var(--cp-blue);
	color: var(--cp-ivory);
}
.cp-header .cp-btn--outline {          /* Figma 1:11476 */
	width: 96px;
	height: 38px;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 16px;
	line-height: 1.38;
}
.cp-header .cp-btn--sm {               /* Figma 1:13612 */
	width: auto;
	height: auto;
	padding: 6px 8px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.2;
}

.cp-header .cp-icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.cp-header .cp-icon-btn--28 { height: 28px; }

/* ---------- Page overlay (desktop panels) ---------- */
.cp-header .cp-overlay {
	position: fixed;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.85);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s var(--cp-ease), visibility 0s linear 0.35s;
}
.cp-header.is-panel-open .cp-overlay {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s var(--cp-ease), visibility 0s;
}

/* ---------- Desktop bar (R2: Figma 23:4253 / 23:4254 — 64px, all items centred) ---------- */
.cp-header .cp-bar--desktop {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	height: 64px;
	padding: 0 24px;
	background: var(--cp-ivory);
	/* Client: 0.25px sandstone rule, kept while a panel is open. Browsers draw a sub-pixel border as at least one
	 * device pixel, so it never disappears: 1px on standard screens, 0.5px on 2x, ~0.33px on 3x. */
	border-bottom: 0.25px solid var(--cp-sandstone);
}

/* Logo → first label 48 (40 gap + 8 item padding); labels 48 apart (32 gap + 2×8 padding). */
.cp-header .cp-bar--desktop .cp-logo { flex: none; }
.cp-header .cp-nav { margin-left: 40px; }
.cp-header .cp-nav__list { display: flex; align-items: center; gap: 32px; }
.cp-header .cp-nav__link {
	display: block;
	padding: 8px;
	font-family: var(--cp-font-medium);
	font-size: 16px;
	line-height: 1.38;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.cp-header .cp-nav__link:hover,
.cp-header .cp-nav__link[aria-expanded="true"] { color: var(--cp-blue); }
.cp-header .cp-nav__link[aria-expanded="true"] { font-family: var(--cp-font-bold); } /* Figma 1:10211 */
/* Bold is ~1.25px wider than Medium: an invisible Bold copy of the label (data-label) sets the item's width, so
 * switching weight on hover/open never moves the items to its right. Text centred in that box (Figma: centred). */
.cp-header .cp-nav__link[data-label] { text-align: center; }
.cp-header .cp-nav__link[data-label]::after {
	content: attr(data-label);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-family: var(--cp-font-bold);
	pointer-events: none;
	speak: never;
}

.cp-header .cp-utility { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.cp-header .cp-utility__login { padding: 8px; font-family: var(--cp-font-medium); font-size: 16px; line-height: 1.38; transition: color 0.15s ease; }
.cp-header .cp-utility__login:hover { color: var(--cp-blue); }
/* R2 "Search icon states" (25:4258): Default 2px stroke, Hover 2.6px stroke, same colour. The icon stays a
 * magnifier while search is open (overrides the figma.site X); clicking it still closes search. */
.cp-header .cp-search-toggle { width: 24px; height: 24px; color: var(--cp-charcoal); }
.cp-header .cp-search-toggle:hover .cp-i--search-24,
.cp-header .cp-search-toggle:focus-visible .cp-i--search-24 { --cp-i: url('icon-search-24-hover.svg'); }

/* ---------- Desktop drop-down panels: mega-menu + search ----------
 * Demo: clip-path reveal 380ms, opacity 250ms, shadow 300ms. Panels stay rendered so they can animate out. */
.cp-header .cp-mega,
.cp-header .cp-search {
	position: absolute;
	top: 64px;
	left: 0;
	right: 0;
	z-index: 2;
	background: var(--cp-ivory);
	clip-path: inset(0 0 100% 0);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	border-bottom: 0.25px solid var(--cp-sandstone);   /* same rule as under the bar (client feedback) */
	transition:
		clip-path 0.38s var(--cp-ease),
		opacity 0.25s var(--cp-ease),
		box-shadow 0.3s ease,
		visibility 0s linear 0.38s;
}
.cp-header .cp-mega.is-open,
.cp-header .cp-search.is-open {
	clip-path: inset(0 0 -40px 0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	transition:
		clip-path 0.38s var(--cp-ease),
		opacity 0.25s var(--cp-ease),
		box-shadow 0.3s ease,
		visibility 0s;
}

/* Closed search/drawer are not rendered at all: parked off-screen (translateX(100%)) they let mobile browsers
 * pan sideways into them. header.js adds .is-rendered before opening and removes it after closing. */
.cp-header .cp-search:not(.is-rendered),
.cp-header .cp-drawer:not(.is-rendered) { display: none !important; }

@keyframes cpMegaContentIn   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cpMegaSubContentIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes cpSearchResultsIn  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Desktop mega-menu (R2: Figma 23:4253; tablet keeps R1 values, see Breakpoints) ----------
 * R2 dev note: the panel height is fixed per menu (its tallest category — header.js sets .cp-mega__content
 * min-height), and the open panel is capped so some page always shows below it. */
.cp-header .cp-mega {
	max-height: calc(100vh - 64px - 100px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 40px 80px 64px;
}
.cp-header .cp-mega__content {
	display: flex;
	align-items: flex-start;
	gap: 80px;
	max-width: 1280px;
	margin: 0 auto;
	animation: cpMegaContentIn 0.28s var(--cp-ease) both;   /* re-runs on menu switch */
}
.cp-header .cp-mega__col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.cp-header .cp-mega__col--cats,
.cp-header .cp-mega__col--links { flex: 0 1 409px; }
.cp-header .cp-mega__col--links { animation: cpMegaSubContentIn 0.18s var(--cp-ease) both; } /* re-runs on category switch */
.cp-header .cp-mega__col--featured { flex: 0 0 302px; gap: 8px; }

/* Column 1: categories (hover selects — demo) */
.cp-header .cp-mega__cats { display: flex; flex-direction: column; gap: 8px; }
.cp-header .cp-mega__cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 4px 0;
	border-bottom: 1px solid var(--cp-sandstone);
	font-family: var(--cp-font-regular);
	font-size: 22px;
	line-height: 32px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.cp-header .cp-mega__cat[aria-selected="true"] {           /* Figma I1:10244;…;11070:11980 */
	border-bottom: 2px solid var(--cp-blue);
	font-family: var(--cp-font-medium);
	color: var(--cp-blue);
}
.cp-header .cp-mega__cat .cp-i { color: var(--cp-charcoal); }
/* Category that is a plain link (About, 11/30): hover = Medium + blue, like a hovered/selected Services or
 * Insights category (client). The row stays full width, so the wider Medium glyphs don't move anything. */
.cp-header .cp-mega__cat--link:hover,
.cp-header .cp-mega__cat--link:focus-visible { font-family: var(--cp-font-medium); color: var(--cp-blue); }
.cp-header .cp-mega__cat:hover .cp-i,
.cp-header .cp-mega__cat[aria-selected="true"] .cp-i { color: var(--cp-blue); transform: translateX(5px); }
.cp-header .cp-mega__all { padding: 4px 0; }

/* Column 2: links */
.cp-header .cp-mega__links { display: flex; flex-direction: column; gap: 4px; }
.cp-header .cp-mega__links > li { display: flex; }   /* no inline line box around the inline-flex link (+2px per row) */
.cp-header .cp-mega__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-size: 16px;
	line-height: 22px;
	transition: color 0.15s ease;
}
.cp-header .cp-mega__link:hover,
.cp-header .cp-mega__link:active { font-family: var(--cp-font-medium); color: var(--cp-blue); }
.cp-header .cp-mega__overview { padding: 4px 0; }

/* Column 3: featured card (R2 23:1100) */
.cp-header .cp-featured__label { padding: 4px 0; font-size: 13px; line-height: 17px; }   /* Eyebrow S */
.cp-header .cp-featured { display: flex; flex-direction: column; gap: 16px; }
.cp-header .cp-featured__media {
	position: relative;
	display: block;
	height: 168px;
	overflow: hidden;
	background: var(--cp-blue);
}
.cp-header .cp-featured__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease;    /* fades in once loaded (demo) */
}
.cp-header .cp-featured__media img.is-loaded { opacity: 1; }
.cp-header .cp-featured__text { display: flex; flex-direction: column; gap: 16px; }
.cp-header .cp-featured__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cp-header .cp-featured__title {
	font-family: var(--cp-font-serif);
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
	letter-spacing: -0.48px;
	white-space: pre-line;
	transition: color 0.2s ease;
}
.cp-header .cp-featured__arrow { display: flex; align-items: flex-end; height: 24px; flex: none; }
.cp-header .cp-featured__title-row:hover .cp-featured__title { color: var(--cp-blue); }
.cp-header .cp-featured__title-row:hover .cp-i { color: var(--cp-blue); transform: translateX(5px); }
.cp-header .cp-featured__desc { font-size: 16px; line-height: 22px; white-space: pre-line; }

/* ---------- Search (demo) — desktop drop-down; mobile overrides below ---------- */
.cp-header .cp-search__mbar { display: none; }
.cp-header .cp-search__inner {
	display: flex;
	flex-direction: column;
	max-width: 1440px;
	margin: 0 auto;
	padding: 64px 80px;
}
.cp-header .cp-search__field {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 24px;
	border: 1px solid var(--cp-sandstone);
	border-radius: 16px;
	cursor: text;
	transition: border-color 0.2s ease;
}
/* Charcoal as soon as the field is focused (client), and while it holds text. */
.cp-header .cp-search__field:focus-within,
.cp-header .cp-search__field.has-text { border-color: var(--cp-charcoal); }
.cp-header .cp-search__icon { width: 32px; height: 32px; flex: none; }
.cp-header .cp-search__input {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: none;
	background: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--cp-font-regular);
	font-size: 32px;
	line-height: 40px;
	color: var(--cp-charcoal);
}
.cp-header .cp-search__input:focus { background: none; color: var(--cp-charcoal); outline: none; }
.cp-header .cp-search__input::placeholder { color: var(--cp-charcoal); opacity: 0.8; }
.cp-header .cp-search__input::-webkit-search-cancel-button { display: none; }
.cp-header .cp-search__field.has-text .cp-search__input { font-family: var(--cp-font-medium); }
.cp-header .cp-search__clear { flex: none; }

.cp-header .cp-search__suggested { margin-top: 48px; animation: cpSearchResultsIn 0.28s var(--cp-ease) both; }
/* Hidden for now (stakeholder, 2026-10-16). Markup/JS kept; delete this rule to bring the chips back. */
.cp-header .cp-search__suggested { display: none !important; }
.cp-header .cp-search__suggested-label { margin-bottom: 20px; opacity: 0.6; }
.cp-header .cp-search__chips { display: flex; flex-wrap: wrap; gap: 12px; }
.cp-header .cp-search__chip {
	padding: 12px 20px;
	border: 1px solid var(--cp-sandstone);
	border-radius: 999px;
	font-family: var(--cp-font-medium);
	font-size: 18px;
	line-height: 1.2;
	white-space: nowrap;
	transition: border-color 0.2s ease;
}
.cp-header .cp-search__chip:hover { border-color: var(--cp-charcoal); }

.cp-header .cp-search__results {
	margin-top: 16px;
	max-height: 300px;   /* ≈ 3.4 single-line rows until header.js capResults() measures the real rows */
	padding: 0 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--cp-sandstone) transparent;
	animation: cpSearchResultsIn 0.28s var(--cp-ease) both;
}
.cp-header .cp-search__results::-webkit-scrollbar { width: 6px; }
.cp-header .cp-search__results::-webkit-scrollbar-thumb { background: var(--cp-sandstone); border-radius: 8px; }
.cp-header .cp-search__result {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	padding: 16px 0;
	border-bottom: 1px solid var(--cp-sandstone);
	transition: color 0.15s ease;
}
.cp-header .cp-search__result:hover,
.cp-header .cp-search__result.is-active { color: var(--cp-blue); }
.cp-header .cp-search__result-title { font-size: 24px; line-height: 1.4; }
.cp-header .cp-search__result-title mark { background: none; color: inherit; font-family: var(--cp-font-medium); }
.cp-header .cp-search__result-type { font-size: 13px; line-height: 17px; letter-spacing: 1px; text-transform: uppercase; }
.cp-header .cp-search__status { padding: 16px 0; font-size: 18px; opacity: 0.7; }

/* ---------- Mobile bar (Figma 1:13604) ---------- */
.cp-header .cp-bar--mobile {
	position: relative;
	z-index: 3;
	display: none;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 16px;
	background: var(--cp-ivory);
}
.cp-header .cp-mobile-actions { display: flex; align-items: center; gap: 16px; }

/* ---------- Mobile drawer (Figma 1:14140 / 1:14172; level 3 from the demo) ----------
 * Demo: drawer slides in from the right 350ms; levels sit side by side in a track that slides 350ms. */
.cp-header .cp-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 4;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.cp-header.is-drawer-open .cp-drawer-backdrop { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; }
.cp-header .cp-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	width: 100%;   /* full window width (the demo caps it at 393px; not wanted) */
	overflow: hidden;
	background: var(--cp-ivory);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.35s var(--cp-ease), visibility 0s linear 0.35s;
}
.cp-header .cp-drawer.is-open { transform: none; visibility: visible; transition: transform 0.35s var(--cp-ease), visibility 0s; }
.cp-header .cp-drawer__track {
	display: flex;
	width: 300%;
	height: 100%;
	transform: translateX(calc(var(--cp-level, 0) * -33.3333%));
	transition: transform 0.35s var(--cp-ease);
}

.cp-header .cp-level { display: flex; flex-direction: column; flex: 0 0 33.3333%; min-width: 0; height: 100%; }
.cp-header .cp-level__bar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 16px;
	border-bottom: 1px solid var(--cp-sandstone);
}
.cp-header .cp-level__bar .cp-icon-btn { height: 28px; }
.cp-header .cp-level__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 48px; }
.cp-header .cp-level--root .cp-level__body { padding-top: 48px; }
.cp-header .cp-level--sub .cp-level__body { display: flex; flex-direction: column; gap: 40px; padding-top: 40px; }
.cp-header .cp-level--sub .cp-eyebrow-link { align-self: flex-start; padding: 8px 0; }

.cp-header .cp-level__list { display: flex; flex-direction: column; gap: 24px; }
.cp-header .cp-level__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 16px 0;
	border-bottom: 1px solid var(--cp-sandstone);
}
.cp-header .cp-level--root .cp-level__row { font-size: 32px; line-height: 40px; }   /* Subhead L */
.cp-header .cp-level--sub .cp-level__row-label {                                      /* Subhead S */
	display: flex;
	align-items: center;
	min-height: 32px;   /* single-line rows are 32px tall in Figma; wrapped ones use 1.1 */
	font-size: 24px;
	line-height: 1.1;
}

/* Level 3 (R2 "Mobile Nav" 23:4255): title link, 40 gap, plain Body M rows (18/24, py 8, 16 apart), no dividers. */
.cp-header .cp-level--leaf .cp-level__body { padding: 40px 24px 48px; }
.cp-header .cp-level--leaf .cp-eyebrow-link { padding: 8px 0; white-space: normal; }
.cp-header .cp-level__leaf-list { display: flex; flex-direction: column; gap: 16px; padding-top: 40px; }
.cp-header .cp-level__leaf {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	font-size: 18px;
	line-height: 24px;
}

/* ---------- Breakpoints ---------- */
@media (max-width: 1023px) {
	.cp-header .cp-bar--desktop,
	.cp-header .cp-mega,
	.cp-header .cp-overlay { display: none !important; }
	.cp-header .cp-bar--mobile { display: flex; }

	/* Search becomes a full-screen panel sliding in from the right (demo, 350ms). */
	.cp-header .cp-search,
	.cp-header .cp-search.is-open {
		position: fixed;
		inset: 0;
		z-index: 6;
		display: flex;
		flex-direction: column;
		clip-path: none;
		opacity: 1;
		box-shadow: none;
		border-bottom: 0;   /* full-screen here: no bottom rule */
	}
	.cp-header .cp-search { transform: translateX(100%); transition: transform 0.35s var(--cp-ease), visibility 0s linear 0.35s; }
	.cp-header .cp-search.is-open { transform: none; transition: transform 0.35s var(--cp-ease), visibility 0s; }
	.cp-header .cp-search__mbar {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: space-between;
		height: 56px;
		padding: 0 16px;
		border-bottom: 1px solid var(--cp-sandstone);
	}
	.cp-header .cp-search__inner { flex: 1; min-height: 0; width: 100%; padding: 24px 24px 0; }
	.cp-header .cp-search__field { height: 64px; padding: 24px 16px; }
	.cp-header .cp-search__icon { width: 24px; height: 24px; }
	.cp-header .cp-search__input { font-size: 20px; line-height: 1.2; }
	.cp-header .cp-search__clear img { width: 20px; height: 20px; }
	.cp-header .cp-search__suggested { display: none; }   /* not in the demo's mobile search */
	.cp-header .cp-search__results { flex: 1; max-height: none; margin-top: 24px; padding: 0 0 64px; }
	.cp-header .cp-search__result-title { font-size: 20px; }
	.cp-header .cp-search__status { font-size: 16px; }
}
@media (min-width: 1024px) {
	.cp-header .cp-drawer,
	.cp-header .cp-drawer-backdrop { display: none !important; }
	/* Same viewport cap as the mega panel (R2 note): some page always shows below the open search. */
	.cp-header .cp-search { max-height: calc(100vh - 64px - 100px); overflow-y: auto; overscroll-behavior: contain; }
}
/* Tablet (R2 "Tablet Nav" 23:4254, 1024 wide): unchanged R1 panel spacing (only the bar went to 64px) and no
 * featured card on any menu; side padding 40px, categories + links columns 432px each with the same 80px gap
 * (40+432+80+432+40 = 1024). */
@media (min-width: 1024px) and (max-width: 1279px) {
	.cp-header .cp-mega { padding: 64px 40px; }
	.cp-header .cp-mega__content { max-width: 944px; }
	.cp-header .cp-mega__col { gap: 40px; }
	.cp-header .cp-mega__col--cats,
	.cp-header .cp-mega__col--links { flex: 0 1 432px; }
	.cp-header .cp-mega__col--featured { display: none; }
	.cp-header .cp-mega__cats { gap: 16px; }
	.cp-header .cp-mega__cat { padding: 8px 0; font-size: 24px; }
	.cp-header .cp-mega__all { padding: 16px 0; }
	.cp-header .cp-mega__links { gap: 0; }
	.cp-header .cp-mega__link { padding: 8px; font-size: 18px; line-height: 24px; }
	.cp-header .cp-mega__overview { padding: 16px 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.cp-header *,
	.cp-header *::before,
	.cp-header *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}