/* Header – Figma navMenu (1280×56 white pill, 24px from the top, floating over the first section). */

.rs-header {
	position: relative;
	z-index: 100;
}

/* Front end only (not in the editor canvas): float over the page. */
body:not(.editor-styles-wrapper):not(.rs-preview--part) .rs-header {
	position: fixed;
	top: calc(24px + var(--wp-admin--admin-bar--height, 0px));
	left: 0;
	right: 0;
	pointer-events: none;
}

body:not(.editor-styles-wrapper):not(.rs-preview--part) .rs-header > * {
	pointer-events: auto;
}

/*
 * Hide on scroll down, show on scroll up (header.js toggles .is-hidden). Only the hidden state carries a
 * transform: a transform on the visible header would trap the fixed mobile-menu overlay inside it.
 */
body:not(.editor-styles-wrapper):not(.rs-preview--part) .rs-header {
	transition: transform 0.3s ease;
}

body:not(.editor-styles-wrapper):not(.rs-preview--part) .rs-header.is-hidden {
	transform: translateY(calc(-100% - 24px - var(--wp-admin--admin-bar--height, 0px)));
}

@media (prefers-reduced-motion: reduce) {
	body:not(.editor-styles-wrapper):not(.rs-preview--part) .rs-header {
		transition: none;
	}
}

/* Space sticky elements leave above themselves: below the pill when it shows, near the top when hidden. */
:root {
	--rs-header-clearance: calc(96px + var(--wp-admin--admin-bar--height, 0px));
}

:root.rs-header-hidden {
	--rs-header-clearance: calc(16px + var(--wp-admin--admin-bar--height, 0px));
}

/* Figma's 0.5px #ccc stroke sits inside the pill and takes no space; a CSS border would add 1px per side. */
.rs-header__bar {
	min-height: 56px;
	box-sizing: border-box;
	box-shadow: inset 0 0 0 0.5px var(--wp--preset--color--gray-20);
}

.rs-header__logo {
	flex: none;
	margin: 0;
}

/* Block link: as an inline-block it sat on a 24px text line, which made the figure 34.5px tall and lifted
   the 28px logo ~3px above the bar's centre (Figma: 14px above and below). */
.rs-header__logo a,
.rs-header__logo img {
	display: block;
}

/* Logo … [Home … Analytics] … [Price, Resources] Login — Figma's justify-between spacing. */
.rs-header__nav {
	flex: 1 1 auto;
}

.rs-header__nav .wp-block-navigation__container {
	flex: 1 1 auto;
	gap: 24px;
}

.rs-header__nav .rs-nav-first,
.rs-header__nav .rs-nav-right {
	margin-left: auto;
}

.rs-header__nav .wp-block-navigation-item__content {
	padding-block: 4px;
	letter-spacing: -0.005em;
}

.rs-header__nav .wp-block-navigation-item__content:hover,
.rs-header__nav .wp-block-navigation-item__content:focus-visible,
.rs-header__nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--black);
}

/* Resources caret: Figma CaretDown 16px, 4px gap. */
.rs-header__nav .wp-block-navigation-submenu {
	gap: 4px;
}

.rs-header__nav .wp-block-navigation__submenu-icon {
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	background-color: currentColor;
	-webkit-mask: url("../../images/icons/caret-down.svg") center / 16px no-repeat;
	mask: url("../../images/icons/caret-down.svg") center / 16px no-repeat;
}

.rs-header__nav .wp-block-navigation__submenu-icon svg {
	display: none;
}

.rs-header__nav .wp-block-navigation__submenu-container {
	padding: 8px;
	border: 0.5px solid var(--wp--preset--color--gray-20) !important;
	border-radius: 12px;
	background: var(--wp--preset--color--white) !important;
	box-shadow: var(--wp--preset--shadow--card);
	min-width: 200px !important;
}

.rs-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 12px;
	border-radius: 8px;
}

.rs-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface);
}

.rs-header__actions {
	flex: none;
}

/*
 * My account header (parts/header-account, Figma dashboard navMenu 636:3723): the same contents in a
 * full-width 48px bar, 24px from the top like the pill, square, 56px side padding at 1600. The 32px gap
 * between Resources and the account menu is the bar's 24px plus 8px.
 */
.rs-header--account > .rs-header__bar {
	min-height: 48px;
	padding-inline: clamp(16px, 3.5vw, 56px);
}

.rs-header--account > .rs-header__bar > .rs-account-menu {
	margin-left: 8px;
}

/* Figma's account item is the 32px photo row (the pill's 40px Login button sets its 56px height). */
.rs-header--account .rs-account-menu__toggle {
	padding-block: 0;
}

/* Below 1100px the links no longer fit in the pill: use the hamburger overlay. */
@media (max-width: 1099px) {
	.rs-header__nav {
		flex: 0 0 auto;
		margin-left: auto;
	}

	.rs-header__nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.rs-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.rs-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 16px;
	}

	.rs-header__nav .rs-nav-first,
	.rs-header__nav .rs-nav-right {
		margin-left: 0;
	}

	.rs-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 24px;
		color: var(--wp--preset--color--black);
	}

	/* Hamburger beside the Login button / account photo instead of mid-bar (two classes beat WordPress's
	   flex-child margin reset). */
	.rs-header__bar > .rs-header__nav {
		margin-left: auto;
	}
}

@media (max-width: 480px) {
	.rs-header__logo img {
		width: 150px !important;
		height: auto !important;
	}

	.rs-header__bar {
		gap: 12px;
	}
}