/*
 * Site header: the bar, the Lightroom presets and LUTs panels (menu parts) and
 * the navigation overlay (navigation-overlay part), plus the block styles they
 * use: Pill links (core/navigation) and Arrow link (core/navigation-link).
 * Layout, colors, borders and type come from block settings; this file covers
 * what blocks have no setting for.
 */

/* The panel spans the header, so the header is its positioned ancestor. */
.fp-site-header {
	position: relative;
	z-index: 40;
}

.fp-site-header__start,
.fp-site-header__account {
	flex-shrink: 0;
}

/*
 * The search group fills the bar's free space (Fill) and centres the field
 * at clamp(420px, 37.5vw, 720px) (Constrained layout), both block settings. Blocks have no
 * setting for a flex item's minimum size: without this the field could not
 * shrink below its intrinsic width on narrow desktops.
 */
.fp-site-header__search {
	min-inline-size: 0;
}

.fp-site-header__account .wp-block-freepresets-account-condition {
	display: flex;
	align-items: center;
	gap: inherit;
}

/* Site search on the dark header and overlay: the shared field, re-toned. */
:is(.fp-site-header, .fp-nav-overlay) .wp-block-search.is-style-site-search {
	--fp-search-surface: rgb(255 255 255 / 0.08);
	--fp-search-border: rgb(255 255 255 / 0.12);
	--fp-search-ink: #fff;
	--fp-search-muted: #a1a1aa;
	--fp-search-focus: rgb(255 255 255 / 0.5);
	--fp-search-radius: 10px;
}

/* The header field puts its icon first. */
.fp-header-search.wp-block-search__icon-button .wp-block-search__inside-wrapper {
	flex-direction: row-reverse;
	padding-inline: 8px 12px;
}

.fp-header-search.wp-block-search__icon-button .wp-block-search__button svg {
	inline-size: 18px;
	block-size: 18px;
}

/* 16px text in the overlay keeps phones from zooming into the field. */
.fp-nav-overlay .wp-block-search.is-style-site-search {
	--fp-search-height: 48px;
	inline-size: 100%;
	font-size: 16px;
}

/*
 * Pill links (core/navigation): roomy targets with a soft highlight. Scoped to
 * the style's own links: a plain Navigation nested inside keeps its own look.
 */
@scope (.wp-block-navigation.is-style-pill-links) to (.wp-block-navigation:not(.is-style-pill-links)) {

	:scope .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-block-size: var(--fp-pill-size, 44px);
		padding-block: 0;
		padding-inline: var(--fp-pill-inset, 12px);
		border-radius: 8px;
		color: inherit;
		text-decoration: none;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	:scope .wp-block-navigation-item__content:is(:hover, :focus-visible),
	:scope .is-open > .wp-block-navigation-item__content {
		background-color: color-mix(in srgb, currentcolor 9%, transparent);
		text-decoration: none;
	}

	/* A Navigation Panel in hover mode: its link and chevron form one pill. */
	:scope .fp-nav-panel__link {
		padding-inline-end: 2px;
		border-start-end-radius: 0;
		border-end-end-radius: 0;
	}

	:scope .fp-nav-panel__toggle--icon {
		padding-inline: 2px var(--fp-pill-inset, 12px);
		border-radius: 0 8px 8px 0;
		transition: background-color 0.15s ease;
	}

	:scope .fp-nav-panel:is(:hover, .is-open) > :is(.fp-nav-panel__link, .fp-nav-panel__toggle--icon),
	:scope .fp-nav-panel__toggle--icon:focus-visible {
		background-color: color-mix(in srgb, currentcolor 9%, transparent);
	}

	:scope.is-vertical {
		--fp-pill-size: 40px;
		--fp-pill-inset: 10px;
	}

	:scope.is-vertical :is(.wp-block-navigation__container, .wp-block-navigation-item) {
		align-self: stretch;
		align-items: stretch;
	}

	:scope.is-vertical .wp-block-navigation-item__content {
		display: flex;
		margin-inline: calc(var(--fp-pill-inset) * -1);
	}
}

/* The bar's links brighten on hover. */
.fp-site-nav .wp-block-navigation-item__content:is(:hover, :focus-visible):not(.fp-nav-panel__panel *, .fp-nav-overlay *),
.fp-site-nav .is-open > .wp-block-navigation-item__content:not(.fp-nav-overlay *) {
	color: #fff;
}

/* Account side. */
.fp-header-join .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-block-size: 40px;
	padding-block: 0;
	padding-inline: 16px;
	white-space: nowrap;
}

.fp-site-header .fp-header-signin .wp-block-button__link {
	padding-inline: 12px;
	border-radius: 8px;
	color: #e4e4e7;
	font-size: 15px;
	font-weight: 500;
}

.fp-site-header .fp-header-signin .wp-block-button__link::before {
	display: none;
}

.fp-site-header .fp-header-signin .wp-block-button__link:is(:hover, :focus-visible) {
	background: rgb(255 255 255 / 0.09);
	color: #fff;
	text-decoration: none;
}

.fp-header-me .is-style-header-account .wp-block-button__link {
	min-block-size: 42px;
	font-size: 14px;
}

/* The Free plan chip: "Free", or "3 downloads left" when few are left. */
.fp-header-plan {
	display: inline-flex;
	align-items: center;
	block-size: 26px;
	margin: 0;
	padding-inline: 10px;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.08);
	color: #d4d4d8;
	font-size: 12px;
	white-space: nowrap;
}

/*
 * Inside the "me" pill the chip is concentric with the pill: the same inset
 * on every side, so chip height = pill height - 2 x border - 2 x inset, and
 * the inset is the pill's left padding (6px, set on the Group block).
 */
.fp-header-me {
	--fp-me-height: 44px;
	--fp-me-border: 1px;
	--fp-me-inset: 6px;
}

.fp-header-me .fp-header-plan,
.fp-header-me .fp-header-gopro .wp-block-button__link {
	block-size: calc(var(--fp-me-height) - 2 * var(--fp-me-border) - 2 * var(--fp-me-inset));
	padding-inline: 12px;
}

/* A few downloads left: the chip turns amber, Pro's colour. */
.fp-header-plan--low {
	background: rgb(252 185 0 / 0.14);
	color: #fcb900;
}

.fp-header-gopro .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	padding-block: 0;
	white-space: nowrap;
}

.fp-header-plan:empty {
	display: none;
}

.fp-header-me .wp-block-outermost-icon-block {
	display: flex;
	align-items: center;
	padding-inline-start: 6px;
}

/*
 * A panel takes its Navigation's submenu colors, as core Submenu does: a white
 * sheet under the bar, which lifts off the page, and the dark list in the phone
 * menu.
 */
.fp-site-header .fp-nav-panel__panel:not(.fp-nav-overlay *) {
	box-shadow: 0 24px 48px rgb(0 0 0 / 0.18);
}

.fp-site-header .fp-menu-panel a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* Menu list (core/terms-query): rows read as a pill-link list, the count beside the name. */
.wp-block-terms-query.is-style-menu-list .wp-block-term > .wp-block-group {
	align-items: center;
	min-block-size: 40px;
	margin-inline: -10px;
	padding-inline: 10px;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}

.wp-block-terms-query.is-style-menu-list .wp-block-term > .wp-block-group:has(a:is(:hover, :focus-visible)) {
	background-color: color-mix(in srgb, currentcolor 9%, transparent);
}

.wp-block-terms-query.is-style-menu-list .wp-block-term-count {
	color: color-mix(in srgb, currentcolor 62%, transparent);
}

.wp-block-terms-query.is-style-menu-list .wp-block-term a {
	color: inherit;
	text-decoration: none;
}

/* The row is one target: the name's link covers it. */
.wp-block-terms-query.is-style-menu-list .wp-block-term > .wp-block-group {
	position: relative;
}

.wp-block-terms-query.is-style-menu-list .wp-block-term p {
	margin: 0;
}

.wp-block-terms-query.is-style-menu-list .wp-block-term a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Arrow link (core/navigation-link): an accent "All …" link with an arrow. */
.wp-block-navigation-item.is-style-arrow-link > .wp-block-navigation-item__content {
	color: var(--fp-arrow-link, var(--wp--preset--color--custom-accent, #2563eb));
	font-weight: 600;
}

.wp-block-navigation-item.is-style-arrow-link > .wp-block-navigation-item__content::after {
	content: "\2192";
}

.fp-nav-overlay {
	--fp-arrow-link: #93c5fd;
}

/* Popular downloads: the picture lifts a little on hover. */
.fp-menu-popular .wp-block-post-featured-image {
	overflow: hidden;
}

.fp-menu-popular .wp-block-post-featured-image img {
	transition: transform 0.25s ease;
}

.fp-menu-popular .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.fp-menu-popular .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.fp-menu-popular .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* Navigation overlay: large rows with hairlines, actions at the bottom. */
.fp-overlay-list,
.fp-overlay-list > .wp-block-navigation__container {
	inline-size: 100%;
	align-items: stretch;
}

.fp-overlay-list > .wp-block-navigation__container > .wp-block-navigation-item {
	inline-size: 100%;
	border-block-end: 1px solid rgb(255 255 255 / 0.08);
}

.fp-overlay-list > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	inline-size: 100%;
	min-block-size: 52px;
	padding-inline: 4px;
}

.fp-overlay-list .fp-nav-panel__icon svg {
	inline-size: 18px;
	block-size: 18px;
}

.fp-nav-overlay .fp-overlay-plan {
	display: flex;
}

.fp-nav-overlay .fp-overlay-actions,
.fp-nav-overlay .fp-overlay-actions .wp-block-buttons {
	align-self: stretch;
	inline-size: 100%;
}

.fp-overlay-button .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 52px;
	font-size: 16px;
}

.fp-overlay-button.is-style-outline .wp-block-button__link {
	border: 1px solid rgb(255 255 255 / 0.25);
	background: transparent;
	color: #fff;
}

/*
 * Core positions a closed custom-overlay container and its dialog; on desktop
 * that would make them, not the header, the panel's reference box.
 */
.fp-site-header .wp-block-navigation__responsive-container:not(.is-menu-open),
.fp-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog {
	position: static;
}

/* The overlay part fills the open overlay. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content:has(.fp-nav-overlay) {
	align-items: stretch;
	inline-size: 100%;
	padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .fp-nav-overlay {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 100dvh;
}

/* The phone bar's search icon (core button-only Search) opens over the bar. */
.fp-header-search--icon {
	display: none;
}

/* Below the desktop breakpoint (see site-search.css): logo, search, Join, menu. */
@media (width <= 1023px) {
	.fp-site-header .wp-block-group.fp-site-header__start {
		display: contents;
	}

	.fp-site-header .fp-site-header__start .wp-block-site-logo {
		margin-inline-end: auto;
	}

	.fp-site-header .fp-site-nav {
		order: 3;
	}

	.fp-site-header .wp-block-group.fp-site-header__account {
		order: 2;
		gap: 4px;
		margin-inline-start: auto;
	}

	.fp-site-header .wp-block-group.fp-site-header__search,
	.fp-site-header .wp-block-button.fp-header-signin,
	.fp-site-header .wp-block-group.fp-header-me {
		display: none;
	}

	.fp-site-header .wp-block-search.fp-header-search--icon {
		display: block;
		inline-size: auto;
		flex: none;
	}

	.fp-header-search--icon.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
		min-block-size: 44px;
		padding: 0;
		border: 0;
		background: transparent;
	}

	.fp-site-header .wp-block-search.fp-header-search--icon .wp-block-search__button {
		inline-size: 44px;
		min-inline-size: 44px;
		block-size: 44px;
		color: #fff;
	}

	.fp-header-search--icon .wp-block-search__button svg {
		inline-size: 22px;
		block-size: 22px;
	}

	/* Open: the field covers the bar, the icon submits. */
	.fp-header-search--icon:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		position: absolute;
		inset-inline: 12px;
		inline-size: auto;
		inset-block-start: 50%;
		z-index: 2;
		translate: 0 -50%;
		background: var(--wp--preset--color--custom-base-inverted, #171717);
		background-image: linear-gradient(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.08));
	}

	.fp-header-join .wp-block-button__link {
		min-block-size: 36px;
		padding-inline: 14px;
	}

	.fp-site-header .wp-block-navigation__responsive-container-open {
		inline-size: 44px;
		block-size: 44px;
		align-items: center;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fp-menu-popular .wp-block-post-featured-image img,
	.wp-block-navigation.is-style-pill-links .wp-block-navigation-item__content {
		transition: none;
	}
}