/**
 * Header redesign — desktop + shared rules.
 * Mobile-specific overrides are in the @media block at the bottom of this file (see Task 9).
 */

#masthead {
	/* Kadence's Customizer "Header Background" setting is set to
	 * --global-palette6 (#f0f3f5, the same light gray used for the search
	 * input) instead of white — confirmed live via computed style
	 * (rgb(240, 243, 245)). Per the design spec
	 * (docs/superpowers/specs/2026-08-13-header-redesign-design.md, "Single
	 * main row... white background"), overridden here rather than in the
	 * Customizer, consistent with the mobile bottom-row background override
	 * further down in this file. */
	background: var(--global-palette5, #ffffff) !important;
	border-bottom: 3px solid var(--global-palette9, #fdb92a);
}

.site-header-main-section-right {
	display: flex;
	align-items: center;
	gap: 20px;
}

/* Search bar (desktop)
 * The redundant "Search" label span was removed from
 * template-parts/header/ccgi-search.php (the input already carries its own
 * aria-label="Search"), leaving the shortcode-rendered widget as this
 * element's only child. Kadence's own base styles already set this element
 * to flex/center, but declaring it here too keeps the rule self-contained
 * and not dependent on that. */
.ccgi-header-search-item {
	display: flex;
	align-items: center;
}

.ccgi-header-search-item .kb-search-input-wrapper {
	/* A prior pass here concluded `display: flex` made no measurable
	 * difference and left this `display: block` (Kadence's own rule for this
	 * selector, `.kb-search .kb-search-input-wrapper{display:inline-block}`,
	 * doesn't produce visible block-vs-inline-block differences at this
	 * width). That was true for horizontal layout, but not vertical: with no
	 * flex centering, the input sits at the top of this 48px box via normal
	 * block flow (its own line-height/font metrics leave ~1px above it and
	 * ~12.5px below — confirmed live), which reads as the placeholder text
	 * sitting too high. `!important` needed for the same reason as `width`
	 * above: Kadence's own rule for this selector loads after this stylesheet
	 * at equal specificity and would otherwise win on source order. */
	display: flex !important;
	align-items: center !important;
	/* !important: Kadence Blocks' own `.kb-search .kb-search-input-wrapper`
	 * rule (style-blocks-search.css) sets `width: 100%` at equal selector
	 * specificity (0,0,2,0) and loads after this stylesheet, so it wins on
	 * source order alone and silently shrinks the wrapper to ~197px instead
	 * of the intended 465px — caught during Task 10 end-to-end verification
	 * (computed width didn't match this rule's own declared value). */
	width: 465px !important;
	height: 48px;
	background: var(--global-palette6, #f0f3f5);
	border: 1px solid #bcc4c2;
	/* Right corners square, not rounded: the submit button sits flush against
	 * this wrapper's right edge (siblings, not nested), and its own
	 * border-radius is already `0 !important` below. Matches the mobile
	 * squaring further down this file. */
	border-radius: 4px 0 0 4px;
	overflow: hidden;
}

.ccgi-header-search-item .kb-search-input {
	/* Kadence's own sizing (kb-search-input's `flex-grow: 1` plus this
	 * wrapper's `align-items: center`) left the input at 447x34.5px inside
	 * this 465x48px wrapper — a visible gray margin around the actual input
	 * box that only became obvious once the WCAG focus/hover fix in
	 * global.css started drawing an outline directly on the input: the ring
	 * sat inset within a box smaller than the visible field, off-center from
	 * the field's apparent edges. `align-self: stretch` overrides the
	 * wrapper's `align-items: center` for just this item so the input fills
	 * the wrapper's full height, matching its width (already effectively
	 * full-width now that the wrapper's own `padding-left` above is gone).
	 * The padding below replaces that removed wrapper padding so the
	 * placeholder text keeps its original 26px inset from the field's left
	 * edge (16px wrapper + 10px Kadence's own kb-search-input padding).
	 * `!important` needed: Kadence's actual rule here is
	 * `.kb-search .kb-search-input` (style-blocks-search.css), which ties
	 * this selector's specificity exactly (two classes each) and loads
	 * after this stylesheet, so it wins the tie on source order alone
	 * without it — confirmed live (computed padding-left stayed 10px with a
	 * plain, non-important declaration here). */
	align-self: stretch;
	padding: 0 10px 0 26px !important;
	border: none !important;
	background: transparent !important;
	font-size: 15px;
	/* This rule previously also set `color: #6b7280 !important`, which
	 * styled BOTH the placeholder AND whatever the user actually types —
	 * #6b7280 on this input's #f0f3f5 background is only 4.14:1 contrast,
	 * failing WCAG AA (4.5:1) for real typed text (the placeholder-only rule
	 * below has a more lenient bar). Simply deleting the declaration does
	 * NOT fall back to the theme's normal body text color, though: Kadence's
	 * own global form-field default (global.min.css:
	 * `input[type="text"], ... { color: var(--global-palette5); }`) still
	 * applies, and `--global-palette5` resolves to `#ffffff` on this
	 * rebranded site — confirmed live (computed color was white-on-white
	 * before this explicit override, effectively invisible, contrast
	 * ~1.03:1). Set explicitly to the same dark color already used for the
	 * adjacent "Search" label for visible, high-contrast typed text instead
	 * (this two-class selector already outranks Kadence's
	 * attribute/element selector on specificity, so no `!important` needed). */
	color: #1f2937;
}

.ccgi-header-search-item .kb-search-input::placeholder {
	color: #6b7280;
}

/* Kadence's Search Input block renders its own `.kb-search-icon` (absolutely
 * positioned inside `.kb-search-input-wrapper`) in addition to our custom
 * gold submit button's icon — without this, two magnifying glasses render
 * side by side on both breakpoints (confirmed live). !important needed:
 * Kadence's own `.kb-search .kb-search-icon` rule (style-blocks-search.css)
 * is the same specificity (two classes) and loads after this stylesheet, so
 * it wins on source order alone without it — confirmed live (icon still
 * computed `display: flex` with a plain, non-important declaration here). */
.ccgi-header-search-item .kb-search-icon {
	display: none !important;
}

.ccgi-header-search-item .wp-block-kadence-advancedbtn .kb-button {
	width: 44px;
	height: 48px;
	background: var(--global-palette9, #fdb92a) !important;
	border-radius: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccgi-header-search-item .wp-block-kadence-advancedbtn .kb-button svg,
.ccgi-header-search-item .wp-block-kadence-advancedbtn .kb-button img {
	width: 17px;
	height: 17px;
	color: var(--global-palette3, #041f3d);
	/* The Kadence icon block ships this SVG with fill="currentColor" and no
	 * stroke, but its path is drawn as a stroke-based line icon (magnifying
	 * glass outline). Without this, the icon renders as a solid filled blob
	 * instead of an outline. */
	fill: none;
	stroke: currentColor;
}

/* K-12 Partner List button
 * Kadence renders this item with two parallel markup trees, same as it does
 * for GTranslate's trigger (see the language-switcher comment further down
 * and Tasks 7-9's notes on `.gt_switcher-popup`): `.header-button` for the
 * desktop row and a separately-classed `.mobile-header-button` for the
 * mobile row, only one of which is ever visible per breakpoint. Task 8 only
 * ever targeted `.header-button`, so the mobile instance rendered with none
 * of this styling (no border/radius, no icon, uppercase Black text) — caught
 * during Task 10 end-to-end verification at the mobile breakpoint. Both
 * selectors are targeted together below so a single rule set covers whichever
 * instance is visible. */
.site-header-main-section-right .header-button,
.site-header-main-section-right .mobile-header-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 19px;
	border-radius: 6px;
	border: 1px solid var(--global-palette1, #2577bd) !important;
	color: var(--global-palette2, #1c5482) !important;
	font-family: 'Lato', sans-serif;
	/* Without this, the button is a shrinkable flex child (default
	 * `flex-shrink: 1`, `min-width: auto`) inside `.site-header-main-section-right`,
	 * so once the search bar moved into Kadence's own dedicated center grid
	 * column (mirroring the left/right column widths to keep it centered),
	 * the right column got squeezed to whatever's left over and the button's
	 * text wrapped to two lines instead of shrinking the switcher or
	 * overflowing — confirmed live at 1280px (button rendered 66.8px tall,
	 * "K-12 Partner" / "List" on two lines). Keeping it single-line and
	 * unshrinkable is the correct trade-off: Kadence's centered layout
	 * mirrors the side columns to whatever the center needs, not to what the
	 * sides naturally want, so the button must hold its own width instead. */
	white-space: nowrap;
	flex-shrink: 0;
	/* !important on both: Kadence's global button typography (Customizer
	 * defaults) applies via `#main-header .header-button` (ID selector,
	 * font-weight: 900) and the theme-wide `button, .button, ...` rule
	 * (text-transform: uppercase) — both beat this class-only selector on
	 * specificity/source order. Figma's K-12 button is mixed-case Bold
	 * ("K-12 Partner List"), not all-caps Black — caught during Task 10
	 * end-to-end verification. */
	font-weight: 700 !important;
	text-transform: none !important;
	font-size: 14px;
}

.site-header-main-section-right .header-button::before,
.site-header-main-section-right .mobile-header-button::before {
	content: '';
	display: inline-block;
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	background: url('assets/images/header/icon-k12.svg') no-repeat center / contain;
}

/* Language switcher (GTranslate) restyle */
.gt_switcher-popup {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #4c4e4f !important;
}

/* GTranslate renders the flag <img> with no class of its own (only an
 * `alt` attribute), so target the element type directly rather than the
 * `.flag` class the brief assumed — that class doesn't exist on this
 * site's markup and the selector below was silently matching nothing. */
.gt_switcher-popup img {
	display: none !important;
}

/* GTranslate also renders its own inline-styled "▼" indicator span
 * (the only child span carrying a `style` attribute); hide it since our
 * ::after below supplies the chevron icon instead, or it doubles up. */
.gt_switcher-popup span[style] {
	display: none !important;
}

.gt_switcher-popup::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url('assets/images/header/icon-globe.svg') no-repeat center / contain;
}

.gt_switcher-popup::after {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url('assets/images/header/icon-chevron.svg') no-repeat center / contain;
}

/* Mobile (matches Kadence's own mobile-header breakpoint, ~1024px and below) */
@media all and (max-width: 1024px) {
	/* The main row (logo/language-switcher/K-12 button) and the bottom row
	 * (search bar) are two separate Kadence Header Builder rows, each with
	 * its own `.site-container` and its own Customizer "Container Padding"
	 * setting. The main row's is left at Kadence's default 24px, while the
	 * bottom row relies on `.ccgi-header-search-item`'s own 16px padding
	 * below — confirmed live, this left the K-12 button 34px from the
	 * viewport edge vs. the search submit button's 16px. Scoped to
	 * `.site-main-header-wrap` (this row only) so the site's other uses of
	 * `.site-container` for general page content are untouched. */
	.site-main-header-wrap .site-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.ccgi-header-search-item .kb-search-input-wrapper {
		/* !important needed to beat the desktop rule above, which is now also
		 * !important (see that rule's comment) — without it, the desktop
		 * 465px width wins here too and the search box overflows off-screen
		 * on mobile. Caught during Task 10 end-to-end mobile verification. */
		width: 100% !important;
		height: 40px;
		/* Right corners square, not rounded: the submit button sits flush
		 * against this wrapper's right edge (siblings, not nested — the
		 * wrapper's `overflow: hidden` only masks its own box), so rounding
		 * the wrapper's right corners left a visible rounded notch in the
		 * gray input background before the button starts. Per the design,
		 * only the left corners (the field's outer edge) round. */
		border-radius: 6px 0 0 6px;
	}

	/* Same wrapper-padding-to-input-padding move as the desktop rule above,
	 * mobile's own numbers: this wrapper's own removed `padding-left: 12px`
	 * plus Kadence's 10px keeps the original 22px inset. `!important` for
	 * the same specificity tie as the desktop rule above. */
	.ccgi-header-search-item .kb-search-input {
		padding-left: 22px !important;
	}

	.ccgi-header-search-item .wp-block-kadence-advancedbtn .kb-button {
		width: 40px;
		height: 40px;
		/* Right corners square to match the input wrapper above — the search
		 * field's right edge (top-right/bottom-right of the whole assembly)
		 * is supposed to be straight per the design, not rounded. A prior
		 * pass here rounded these to 6px assuming the button's right corners
		 * should match the input's rounded left corners; corrected after
		 * visual comparison against the design showed the right edge should
		 * stay square. The desktop rule above already sets
		 * `border-radius: 0 !important` (a shorthand covering all four
		 * corners), so no override is needed here — removing the previous
		 * `!important` longhand overrides lets that square desktop radius
		 * carry through to mobile unchanged. */
	}

	.ccgi-header-search-item .wp-block-kadence-advancedbtn .kb-button svg,
	.ccgi-header-search-item .wp-block-kadence-advancedbtn .kb-button img {
		width: 14px;
		height: 14px;
	}

	.ccgi-header-search-item {
		width: 100%;
		padding: 0 16px 16px;
	}

	/* Kadence's generic `.site-header-row { display: grid; grid-template-columns:
	 * auto auto; }` (header.min.css) applies to every header row, including
	 * the mobile-only "Bottom Row" the search widget lives in. That row only
	 * ever has one non-empty side (`.site-header-bottom-section-left`, which
	 * contains the search widget) and one always-empty side
	 * (`.site-header-bottom-section-right`), but "auto auto" still splits the
	 * row's leftover width evenly across both tracks — confirmed live via
	 * computed styles at a 606px viewport: `grid-template-columns: 435.5px
	 * 170.5px`, leaving the search bar only ever able to use its left track's
	 * share instead of the row's full width. Scoped to the bottom row only
	 * (`.site-bottom-header-inner-wrap`) so the main header row's left/right
	 * split — which still needs two columns — is untouched. No `!important`
	 * needed: this two-class selector already outranks Kadence's single-class
	 * `.site-header-row` on specificity alone (confirmed live). */
	.site-bottom-header-inner-wrap.site-header-row {
		grid-template-columns: 1fr;
	}

	/* Fixing the outer grid above gets `.ccgi-header-search-item` to the
	 * row's full width, but the shortcode-rendered widget inside it still
	 * doesn't stretch to fill that space on its own — `.ccgi-header-search-widget`
	 * and `.kb-search` are both non-growing children in their respective flex
	 * containers, so they shrink to their content's width instead. Confirmed
	 * live: without this, the visible search control still only filled
	 * ~233px of the item's 606px. No `!important` needed: neither selector
	 * competes with any other width rule at this specificity. */
	.ccgi-header-search-item .ccgi-header-search-widget,
	.ccgi-header-search-item .kb-search {
		width: 100%;
	}

	/* Figma's mobile frame swaps row-1's right-hand item order versus
	 * desktop: language switcher first, then the K-12 button (desktop is the
	 * reverse — K-12 button, then language switcher — see
	 * docs/superpowers/specs/2026-08-13-header-redesign-design.md's "Mobile
	 * layout" section). `.gt_switcher-popup` is a direct flex child of
	 * `.site-header-main-section-right` alongside the K-12 button's wrapper,
	 * so a flex `order` swap here reorders them without touching the
	 * desktop-only rule or the button/switcher markup itself. */
	.site-header-main-section-right .gt_switcher-popup {
		order: -1;
	}

	/* Kadence's own header.min.css sets a universal `.site-header-item {
	 * margin-right: 10px }` for inter-item spacing on this row. That margin
	 * lives on the K-12 button's wrapper regardless of visual order, so once
	 * the `order: -1` rule above moves the language switcher in front of it,
	 * the margin no longer sits between two items — it becomes 10px of
	 * trailing whitespace after the K-12 button, on top of the 16px edge
	 * padding, making its right-edge whitespace (26px) not match the search
	 * button's (16px) — confirmed live via computed margin. Our own
	 * `gap: 20px` on this flex row already provides inter-item spacing, so
	 * this margin is redundant here and safe to zero out. */
	.site-header-main-section-right .site-header-item {
		margin-right: 0;
	}

	/* Kadence's Header Builder "Bottom Row" (the row the search widget lives in
	 * at mobile widths, per Task 7's row assignment) has its background color
	 * customizer setting left at --global-palette9 (gold/amber, #fdb92a) —
	 * this renders as a solid gold band behind the mobile search bar that
	 * doesn't exist in the Figma mobile frame (plain white/transparent
	 * there). This is a Kadence Customizer inline-CSS rule
	 * (`.site-bottom-header-wrap .site-header-row-container-inner{background:
	 * var(--global-palette9);}` in `kadence-global-inline-css`), not
	 * something set in this theme's own CSS, so it's overridden here rather
	 * than edited at the source (Customizer changes should be made in the
	 * Customizer, but this scoped override keeps the fix in version control
	 * without touching unrelated desktop-row Customizer settings that reuse
	 * the same underlying class).
	 */
	.site-bottom-header-wrap .site-header-row-container-inner {
		background: var(--global-palette5, #ffffff);
	}
}