/*
 * Site header layout at every width (design audit Phase 4, PR 4B). Markup: template-parts/site/
 * header.php, drawer.php and footer.php, inc/site-chrome/template-tags.php (the Popular column),
 * search.php and account.php. Served whole after css/site-chrome.css and every stored used-CSS blob
 * (inc/wp-rocket-exclusions.php), so these rules win over the blobs' older copy of the chrome. The
 * layout never depends on the search kill switch: without the Search button a row only gets shorter.
 * Selectors carry an extra class against the base layer's `.roc-kit a` and `.roc-kit button` rules.
 * Blue, black and white only.
 *
 *   Width            Logo        Navigation                    Header actions
 *   1200 px and up   full        full                          Search, Log in, Cart, Contact (text)
 *   992-1199.98 px   mark only   compact (padding 8, gap 12)   Search, Log in, Cart, Contact (44 px icons)
 *   576-991.98 px    full        menu button and drawer        Search, Cart, Contact (icon), Menu
 *   below 576 px     mark only   menu button and drawer        Search, Cart, Contact (icon), Menu
 *
 * Log in is in the drawer and the footer at every width. tests/build/test-site-chrome-header-geometry.mjs
 * measures each width: every header element inside the content column, 44 px targets, no sideways scroll.
 */

/* ---------- Targets ---------- */
/* The logo link is a 44 px target although the image is 26 or 34 px tall. */
.roc-site-header .roc-site-header__logo {
	min-width: 44px;
	min-height: 44px;
}

/* Search and Log in: 44 px icon buttons. Search is a link to the search page until js/site-search.js
   turns it into a button, so both element types are reset. */
.roc-site-header .roc-search-btn.roc-search-btn,
.roc-site-header .roc-account-btn.roc-account-btn {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--roc-slate-800, #1e293b);
	font: inherit;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

/* The base layer's `.roc-kit button:focus` (0,2,1) paints focused buttons black; keep these colours. */
.roc-site-header .roc-search-btn.roc-search-btn:focus,
.roc-site-header .roc-account-btn.roc-account-btn:focus {
	background: transparent;
	color: var(--roc-slate-800, #1e293b);
}

.roc-site-header .roc-search-btn.roc-search-btn:hover,
.roc-site-header .roc-account-btn.roc-account-btn:hover {
	background: var(--roc-blue-50, #eff6ff);
	color: var(--roc-blue-700, #1d4ed8);
}

.roc-site-header .roc-account-btn.roc-account-btn[aria-current="page"] {
	color: var(--roc-blue-700, #1d4ed8);
}

.roc-site-header .roc-search-btn .roc-icon,
.roc-site-header .roc-account-btn .roc-icon {
	width: 22px;
	height: 22px;
}

/* ---------- Log in: in the header from 992 px; below that, in the drawer and footer ---------- */
@media (max-width: 991.98px) {
	.roc-site-header .roc-account-btn.roc-account-btn {
		display: none;
	}
}

/* ---------- The desktop menu from 992 px ---------- */
/* site-chrome.css, and every stored blob, hide the menu and show the menu button below 1200 px.
   These rules beat that from 992 px; js/site-chrome.js switches at the same width. */
@media (min-width: 992px) {
	.roc-site-header .roc-nav.roc-nav {
		display: block;
	}

	.roc-site-header .roc-menu-btn.roc-menu-btn {
		display: none;
	}
}

/* ---------- Compact header, 992-1199.98 px ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.roc-site-header .roc-site-header__inner {
		gap: 12px;
	}

	.roc-site-header .roc-nav__link.roc-nav__link,
	.roc-site-header .roc-nav__toggle.roc-nav__toggle {
		padding-inline: 8px;
	}
}

/* ---------- Contact as a 44 px icon button below 1200 px ---------- */
@media (max-width: 1199.98px) {
	.roc-site-header .roc-contact-btn.roc-btn {
		box-sizing: border-box;
		width: 44px;
		padding: 0;
	}

	.roc-site-header .roc-contact-btn__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* ---------- Mark-only logo: 992-1199.98 px and below 576 px ---------- */
/* The name is cropped away and the image keeps its alt text. The "RO" mark is the first 25.7% of the
   2560 x 461 image; 27% of the drawn width keeps it whole and stops before the name. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.roc-site-header .roc-site-header__logo img {
		width: 51px;
		object-fit: cover;
		object-position: 0 50%;
	}
}

@media (max-width: 575.98px) {
	.roc-site-header .roc-site-header__logo img {
		width: 39px;
		object-fit: cover;
		object-position: 0 50%;
	}
}

/* ---------- Popular column (a primary group with the roc-menu-popular class) ---------- */
.roc-nav__panel.roc-nav__panel--popular {
	width: 640px;
}

.roc-nav__panel-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
	gap: 8px;
}

/* Each column keeps its own height; the menu links never spread out to match the Popular list. */
.roc-nav__panel-grid > * {
	align-self: start;
}

.roc-nav__popular {
	padding: 6px 0 4px 12px;
	border-left: 1px solid var(--roc-border, #e2e8f0);
}

.roc-nav__popular .roc-nav__popular-title {
	margin: 6px 0 4px 10px;
	color: var(--roc-slate-500, #64748b);
	font: 700 0.75rem / 1.2 var(--roc-font-body, Roboto, system-ui, sans-serif);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.roc-nav__popular-list,
.roc-drawer__popular-list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.roc-nav__popular-link.roc-nav__popular-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 10px;
	border-radius: var(--roc-radius-md, 12px);
	color: var(--roc-slate-900, #0f172a);
	font: 500 0.9375rem / 1.3 var(--roc-font-body, Roboto, system-ui, sans-serif);
	text-decoration: none;
}

.roc-nav__popular-link.roc-nav__popular-link:hover {
	background: var(--roc-blue-50, #eff6ff);
	color: var(--roc-blue-700, #1d4ed8);
}

/* ---------- Drawer ---------- */
/* Search, first: a link to the search page until js/site-search.js turns it into a button that hands
   the modal over to the search panel. */
.roc-drawer .roc-drawer__search.roc-drawer__search {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	box-sizing: border-box;
	min-height: 48px;
	margin: 12px 12px 0;
	padding: 0 14px;
	border: 1px solid var(--roc-border-strong, #cbd5e1);
	border-radius: 12px;
	background: var(--roc-white, #fff);
	color: var(--roc-slate-600, #475569);
	font: 500 1rem / 1.2 var(--roc-font-body, Roboto, system-ui, sans-serif);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.roc-drawer .roc-drawer__search.roc-drawer__search:focus {
	background: var(--roc-white, #fff);
	color: var(--roc-slate-600, #475569);
}

.roc-drawer .roc-drawer__search.roc-drawer__search:hover {
	border-color: var(--roc-blue-600, #2563eb);
	background: var(--roc-blue-50, #eff6ff);
	color: var(--roc-blue-700, #1d4ed8);
}

.roc-drawer__search .roc-icon,
.roc-drawer__account .roc-icon {
	width: 20px;
	height: 20px;
}

/* Log in, in the drawer foot above Contact */
.roc-drawer .roc-drawer__account.roc-drawer__account {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--roc-border-strong, #cbd5e1);
	border-radius: 10px;
	background: var(--roc-white, #fff);
	color: var(--roc-slate-900, #0f172a);
	font: 600 0.9375rem / 1.2 var(--roc-font-body, Roboto, system-ui, sans-serif);
	text-decoration: none;
}

.roc-drawer .roc-drawer__account.roc-drawer__account:hover {
	border-color: var(--roc-blue-600, #2563eb);
	background: var(--roc-blue-50, #eff6ff);
	color: var(--roc-blue-700, #1d4ed8);
}

/* The Popular list inside its drawer group */
.roc-drawer__popular {
	margin: 0 0 8px;
	padding: 0 0 4px 12px;
}

.roc-drawer__popular .roc-drawer__popular-title {
	margin: 4px 0 4px 14px;
	color: var(--roc-slate-500, #64748b);
	font: 700 0.75rem / 1.2 var(--roc-font-body, Roboto, system-ui, sans-serif);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.roc-drawer__popular-link.roc-drawer__popular-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-left: 2px solid var(--roc-border, #e2e8f0);
	color: var(--roc-slate-800, #1e293b);
	font: 500 1rem / 1.3 var(--roc-font-body, Roboto, system-ui, sans-serif);
	text-decoration: none;
}

.roc-drawer__popular-link.roc-drawer__popular-link:hover {
	border-left-color: var(--roc-blue-600, #2563eb);
	background: var(--roc-blue-50, #eff6ff);
	color: var(--roc-blue-700, #1d4ed8);
}

/* ---------- Footer ---------- */
/* The legal row gains Log in; it wraps on the narrowest phones instead of scrolling sideways. */
.roc-site-footer .roc-site-footer__legal {
	flex-wrap: wrap;
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion: no-preference) {
	.roc-site-header .roc-search-btn,
	.roc-site-header .roc-account-btn,
	.roc-nav__popular-link,
	.roc-drawer__search,
	.roc-drawer__account,
	.roc-drawer__popular-link {
		transition: background-color var(--roc-fast, 150ms) var(--roc-ease, ease), color var(--roc-fast, 150ms) var(--roc-ease, ease),
			border-color var(--roc-fast, 150ms) var(--roc-ease, ease);
	}
}

@media (forced-colors: active) {
	.roc-site-header .roc-search-btn.roc-search-btn,
	.roc-site-header .roc-account-btn.roc-account-btn,
	.roc-drawer .roc-drawer__search.roc-drawer__search,
	.roc-drawer .roc-drawer__account.roc-drawer__account {
		border: 1px solid CanvasText;
	}
}