/**
 * Single-bar header: logo + categories + search on the dark ribbon.
 */

/*
 * Sticky header. ColorMag's .cm-normal-container sets body overflow:hidden,
 * which clips position:sticky — keep the scroll chain visible.
 */
body.cm-normal-container {
	overflow: visible !important;
	overflow-x: clip;
}

#cm-masthead.cm-header-builder {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar #cm-masthead.cm-header-builder {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Collapse unused main/top rows so the categories ribbon is the header. */
.cm-header-builder .cm-desktop-row .cm-header-top-row,
.cm-header-builder .cm-desktop-row .cm-header-main-row {
	display: none;
}

.cm-header-builder .cm-header-bottom-row {
	padding: 0;
	border-top: none;
}

.cm-header-builder.cm-full-width .cm-header-bottom-row {
	box-shadow: none;
	background-color: var(--cm-color-5, #27272a);
	border-top: none;
}

.cm-header-builder .cm-bottom-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding: 0 8px;
}

.cm-header-builder .cm-bottom-row .cm-header-left-col,
.cm-header-builder .cm-bottom-row .cm-header-center-col,
.cm-header-builder .cm-bottom-row .cm-header-right-col {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.cm-header-builder .cm-bottom-row .cm-header-left-col {
	flex: 0 0 auto;
}

.cm-header-builder .cm-bottom-row .cm-header-center-col {
	flex: 1 1 auto;
	justify-content: flex-start;
	/* Must stay visible so Regions mega-menu can open below the ribbon. */
	overflow: visible;
}

.cm-header-builder .cm-bottom-row,
.cm-header-builder .cm-header-bottom-row,
.cm-header-builder .cm-bottom-row #cm-primary-nav {
	overflow: visible;
}

/* Anchor for full-width Regions mega-menu. */
.cm-header-builder .cm-header-bottom-row {
	position: relative;
	z-index: 30;
}

.cm-header-builder .cm-bottom-row .cm-header-right-col {
	flex: 0 0 auto;
	margin-left: auto;
}

/* Logo on the dark ribbon. */
.cm-header-builder .cm-site-branding .custom-logo-link {
	display: flex;
	align-items: center;
	line-height: 0;
}

.cm-header-builder .cm-site-branding .custom-logo {
	display: block;
	width: auto;
	height: 28px;
	max-height: 28px;
	max-width: min(200px, 42vw);
	object-fit: contain;
}

@media (min-width: 768px) {
	.cm-header-builder .cm-site-branding .custom-logo {
		height: 32px;
		max-height: 32px;
		max-width: 220px;
	}
}

/* Keep primary nav flush inside the ribbon. */
.cm-header-builder .cm-header-bottom-row #cm-primary-nav {
	box-shadow: none;
	background-color: transparent;
	border-top: none;
	width: 100%;
}

.cm-header-builder .cm-bottom-row .cm-primary-nav .cm-primary-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
}

/* When search expands, free the middle of the ribbon for the field. */
#cm-masthead.is-search-open .cm-bottom-row .cm-header-center-col {
	display: none;
}

#cm-masthead.is-search-open .cm-bottom-row .cm-header-right-col {
	flex: 1 1 auto;
	justify-content: flex-end;
	min-width: 0;
}

/* --- Search: collapsed icon / expanded inline field --- */
.gnn-site-search {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: auto;
	min-height: 40px;
}

.gnn-site-search__toggle {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	flex-shrink: 0;
}

.gnn-site-search__toggle:hover,
.gnn-site-search__toggle:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	outline: none;
}

.gnn-site-search__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.gnn-site-search__icon--close {
	display: none;
}

.gnn-site-search.is-open .gnn-site-search__icon--search {
	display: none;
}

.gnn-site-search.is-open .gnn-site-search__icon--close {
	display: flex;
}

.gnn-site-search__panel {
	display: none;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	margin-right: 4px;
}

.gnn-site-search.is-open {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

/* Match TechCrunch: input + Submit, then close (X) on the right. */
.gnn-site-search.is-open .gnn-site-search__panel {
	display: flex;
	order: 1;
}

.gnn-site-search.is-open .gnn-site-search__toggle {
	order: 2;
}

.gnn-site-search__form {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-width: 0;
	padding: 0 0 6px;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.85);
	background: transparent;
	box-shadow: none;
}

/* Borderless like TechCrunch — only the underline on the form. */
.gnn-site-search__input,
.gnn-site-search__input:hover,
.gnn-site-search__input:focus,
.gnn-site-search__input:focus-visible,
.gnn-site-search__input:active {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 4px 0;
	border: 0 !important;
	border-radius: 0 !important;
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	color: #fff;
	font-size: 1.6rem;
	line-height: 1.4;
	text-indent: 0;
}

.gnn-site-search__input::placeholder {
	color: rgba(255, 255, 255, 0.55);
	opacity: 1;
}

/* Kill WebKit search-field chrome. */
.gnn-site-search__input::-webkit-search-decoration,
.gnn-site-search__input::-webkit-search-cancel-button,
.gnn-site-search__input::-webkit-search-results-button,
.gnn-site-search__input::-webkit-search-results-decoration {
	display: none;
	-webkit-appearance: none;
}

.gnn-site-search__submit {
	flex-shrink: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	line-height: 1.4;
}

.gnn-site-search__submit:hover,
.gnn-site-search__submit:focus-visible {
	opacity: 0.7;
	outline: none;
}

/* Hide ColorMag's default always-open search box if it still renders. */
.cm-header-builder .cm-search-box {
	display: none;
}

/* Mobile: logo + search + menu toggle on one dark bar. */
.cm-header-builder .cm-mobile-row .cm-header-bottom-row {
	display: none;
}

.cm-header-builder .cm-mobile-row .cm-header-main-row {
	padding: 8px 12px;
	background-color: var(--cm-color-5, #27272a);
}

.cm-header-builder .cm-mobile-row .cm-main-row {
	min-height: 48px;
	align-items: center;
}

.cm-header-builder .cm-mobile-row .cm-site-branding .custom-logo {
	height: 28px;
	max-height: 28px;
	max-width: min(160px, 46vw);
}

.cm-header-builder .cm-mobile-row .cm-menu-toggle,
.cm-header-builder .cm-mobile-row .cm-menu-toggle svg {
	color: #fff;
	fill: #fff;
}

#cm-masthead.is-search-open .cm-mobile-row .cm-header-right-col .cm-menu-toggle {
	display: none;
}

#cm-masthead.is-search-open .cm-mobile-row .cm-header-right-col {
	flex: 1 1 auto;
	justify-content: flex-end;
	min-width: 0;
}