/* ==========================================================================
   TeamCNF site frame
   CNF Group bar, the floating glass header and the mobile menu. The header
   and menu are built from core blocks (template parts "Header" and "Mobile
   Menu"); these rules give them the TeamCNF look. Every value comes from the
   theme tokens in theme.json.
   ========================================================================== */

/* ---- Sticky header ------------------------------------------------------- */
/* The whole header part sticks, pulled up by the group bar's height, so the
   group bar scrolls away and the glass bar stays at the top. */
.wp-site-blocks > header.wp-block-template-part:has(> .tcnf-header) {
	position: sticky;
	top: calc(var(--wp--custom--size--groupbar) * -1);
	z-index: var(--wp--custom--z--header);
}

@media (min-width: 601px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .tcnf-header) {
		top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--wp--custom--size--groupbar));
	}
}

/* ---- CNF Group bar ------------------------------------------------------- */
.tcnf-groupbar {
	height: var(--wp--custom--size--groupbar);
	background: var(--wp--custom--scrim--base);
	border-bottom: 1px solid var(--wp--custom--glass--border-subtle);
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
}

.tcnf-groupbar p {
	margin: 0;
	font-size: inherit;
	white-space: nowrap;
}

/* Items keep their width; nothing in the bar wraps onto a second line */
.tcnf-groupbar .tcnf-groupbar__inner > *,
.tcnf-groupbar .tcnf-groupbar__group > *,
.tcnf-groupbar .tcnf-groupbar__links > * {
	flex: none;
}

.tcnf-groupbar .tcnf-groupbar__inner {
	height: 100%;
	gap: var(--wp--preset--spacing--40);
}

.tcnf-groupbar .tcnf-groupbar__group {
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

.tcnf-groupbar .tcnf-groupbar__group p.tcnf-groupbar__label {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--custom--text--meta);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	--tcnf-icon-size: var(--wp--custom--size--icon--xs);
}

.tcnf-groupbar .tcnf-groupbar__label::before {
	opacity: var(--wp--custom--opacity--soft);
}

.tcnf-groupbar .tcnf-groupbar__links {
	gap: var(--wp--preset--spacing--10);
}

.tcnf-groupbar .tcnf-groupbar__link > a,
.tcnf-groupbar .tcnf-groupbar__links .tcnf-groupbar__link--soon {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--custom--text--tertiary);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition:
		color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.tcnf-groupbar .tcnf-groupbar__link > a:hover {
	color: var(--wp--custom--text--primary);
}

/* The sister site that hasn't launched yet: muted, not a link */
.tcnf-groupbar .tcnf-groupbar__links .tcnf-groupbar__link--soon {
	color: var(--wp--custom--text--meta);
	cursor: default;
}

/* The "Soon" pill only fits beside the other links from tablet width up */
.tcnf-groupbar .tcnf-groupbar__link--soon .tcnf-groupbar__soon {
	display: none;
	padding: 0 var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: var(--wp--custom--tracking--wide);
	line-height: var(--wp--custom--leading--base);
	text-transform: uppercase;
}

/* This site (#TeamCNF): glass pill with a red dot */
.tcnf-groupbar .tcnf-groupbar__link.is-current > a {
	background: var(--wp--custom--glass--fill);
	color: var(--wp--custom--text--primary);
}

.tcnf-groupbar .tcnf-groupbar__link.is-current > a::before {
	content: "";
	flex: none;
	width: var(--wp--preset--spacing--20);
	height: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--glow);
}

.tcnf-groupbar .tcnf-groupbar__inner p.tcnf-groupbar__contact {
	display: none;
	--tcnf-icon-size: var(--wp--custom--size--icon--xs);
}

.tcnf-groupbar .tcnf-groupbar__contact > a {
	color: var(--wp--custom--text--tertiary);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.tcnf-groupbar .tcnf-groupbar__contact > a:hover {
	color: var(--wp--custom--text--primary);
}

@media (min-width: 640px) {
	.tcnf-groupbar .tcnf-groupbar__group p.tcnf-groupbar__label {
		display: inline-flex;
	}

	.tcnf-groupbar .tcnf-groupbar__link--soon .tcnf-groupbar__soon {
		display: block;
	}
}

/* The phone number needs the extra room: below this it would push the bar wider than the screen */
@media (min-width: 768px) {
	.tcnf-groupbar .tcnf-groupbar__inner p.tcnf-groupbar__contact {
		display: inline-flex;
	}
}

/* ---- Header bar ---------------------------------------------------------- */
.tcnf-header {
	padding-block: var(--wp--preset--spacing--30);
}

.tcnf-header .tcnf-header__bar {
	position: relative;
	isolation: isolate;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	min-height: var(--wp--custom--size--header);
	padding-inline: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--lg);
}

/* The glass sits on a layer behind the bar, never on the bar itself: a blur on
   an ancestor of the menu would trap the full-screen menu inside the bar. */
.tcnf-header .tcnf-header__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 1px solid var(--wp--custom--glass--border-subtle);
	border-radius: inherit;
	background: var(--wp--preset--gradient--sheen), var(--wp--custom--glass--fill-header);
	box-shadow: var(--wp--preset--shadow--float), var(--wp--custom--inset-sheen);
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur-strong)) saturate(var(--wp--custom--glass--saturate));
	backdrop-filter: blur(var(--wp--custom--glass--blur-strong)) saturate(var(--wp--custom--glass--saturate));
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-header.is-scrolled .tcnf-header__bar::before {
	opacity: 1;
}

/* ---- Logo ---------------------------------------------------------------- */
/* White mark on the dark theme, red mark on the light theme */
.tcnf-header .tcnf-header__bar > .tcnf-brand {
	margin-right: auto;
}

.tcnf-brand {
	flex: none;
	gap: 0;
}

.tcnf-brand .wp-block-image {
	margin: 0;
}

.tcnf-brand .wp-block-image a {
	display: block;
	border-radius: var(--wp--custom--radius--xs);
}

.tcnf-brand .wp-block-image img {
	display: block;
	width: auto;
	height: var(--wp--custom--size--logo-height);
	max-width: var(--wp--custom--size--logo-width);
}

.tcnf-brand .tcnf-brand__mark--on-light,
:root[data-theme="light"] .tcnf-brand .tcnf-brand__mark--on-dark {
	display: none;
}

:root[data-theme="light"] .tcnf-brand .tcnf-brand__mark--on-light {
	display: block;
}

/* ---- Desktop navigation -------------------------------------------------- */
.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--10);
}

.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--size--control-sm);
	padding: 0 var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition:
		color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	background: var(--wp--custom--glass--fill-subtle);
	color: var(--wp--custom--text--primary);
}

/* Current page: brighter text and a small red dot underneath */
.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"],
.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--custom--text--primary);
}

.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]::after,
.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: var(--wp--preset--spacing--10);
	width: var(--wp--preset--spacing--10);
	height: var(--wp--preset--spacing--10);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	transform: translateX(-50%);
}

/* ---- Header buttons ------------------------------------------------------ */
/* Menu button: the same glass circle as the theme toggle */
.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-open,
.tcnf-menu .tcnf-menu__top .wp-block-navigation-overlay-close {
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--wp--custom--size--control);
	height: var(--wp--custom--size--control);
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--gradient--sheen), var(--wp--custom--glass--fill);
	color: var(--wp--custom--text--primary);
	box-shadow: var(--wp--preset--shadow--soft), var(--wp--custom--inset-sheen);
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate));
	backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate));
	cursor: pointer;
	transition:
		transform var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		background-color var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		border-color var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-open:hover,
.tcnf-menu .tcnf-menu__top .wp-block-navigation-overlay-close:hover {
	transform: translateY(calc(var(--wp--custom--nudge) * -1));
	background: var(--wp--preset--gradient--sheen), var(--wp--custom--glass--fill-strong);
	border-color: var(--wp--custom--glass--border-strong);
}

.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-open:focus-visible,
.tcnf-menu .tcnf-menu__top .wp-block-navigation-overlay-close:focus-visible {
	border-radius: 50%;
	box-shadow: var(--wp--custom--focus-ring);
}

/* Line icons drawn in the text colour, matching the original design */
.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-open svg,
.tcnf-menu .tcnf-menu__top .wp-block-navigation-overlay-close svg {
	display: none;
}

.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-open::before,
.tcnf-menu .tcnf-menu__top .wp-block-navigation-overlay-close::before {
	content: "";
	width: var(--wp--custom--size--icon--md);
	height: var(--wp--custom--size--icon--md);
	background-color: currentColor;
	-webkit-mask: var(--tcnf-icon) center / contain no-repeat;
	mask: var(--tcnf-icon) center / contain no-repeat;
}

.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-open {
	--tcnf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7h17M3.5 12h17M3.5 17h11'/%3E%3C/svg%3E");
}

.tcnf-menu .tcnf-menu__top .wp-block-navigation-overlay-close {
	display: inline-flex;
	--tcnf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.tcnf-header .tcnf-header__bar > .tcnf-header__cta {
	display: none;
	flex: none;
}

@media (min-width: 640px) {
	.tcnf-header .tcnf-header__bar > .tcnf-header__cta {
		display: flex;
	}
}

/* Below desktop width the links move into the mobile menu and the menu
   button sits last in the bar, after the theme toggle and the CTA */
@media (max-width: 1239.98px) {
	.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}

	.tcnf-header .tcnf-header__bar > .tcnf-nav {
		order: 3;
	}
}

/* ---- Mobile menu --------------------------------------------------------- */
/* The open menu layer: dark frosted glass over the whole page */
.tcnf-header .tcnf-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--custom--scrim--strong);
	color: var(--wp--custom--text--primary);
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur-strong));
	backdrop-filter: blur(var(--wp--custom--glass--blur-strong));
	animation: tcnf-menu-in var(--wp--custom--duration--base) var(--wp--custom--ease--out) both;
}

.admin-bar .tcnf-header .tcnf-nav .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@keyframes tcnf-menu-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Contents of the "Mobile Menu" template part */
.tcnf-menu {
	width: 100%;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter) var(--wp--preset--spacing--70);
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	text-align: left;
}

.tcnf-menu .tcnf-menu__top {
	align-items: center;
}

.tcnf-menu .tcnf-menu__nav {
	width: 100%;
}

.tcnf-menu .tcnf-menu__nav .wp-block-navigation__container {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	width: 100%;
}

.tcnf-menu .tcnf-menu__nav .wp-block-navigation__container .wp-block-navigation-item {
	display: block;
	width: 100%;
}

.tcnf-menu .tcnf-menu__nav .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: 1px solid var(--wp--custom--glass--border-subtle);
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--snug);
	line-height: var(--wp--custom--leading--snug);
	text-decoration: none;
	animation: tcnf-menu-link-in var(--wp--custom--duration--slow) var(--wp--custom--ease--out) both;
}

.tcnf-menu .tcnf-menu__nav .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content::after {
	content: "";
	flex: none;
	width: var(--wp--custom--size--icon--md);
	height: var(--wp--custom--size--icon--md);
	background-color: currentColor;
	opacity: var(--wp--custom--opacity--muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-menu .tcnf-menu__nav .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content:hover::after {
	transform: translateX(var(--wp--preset--spacing--10));
}

.tcnf-menu .tcnf-menu__nav .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content[aria-current="page"],
.tcnf-menu .tcnf-menu__nav .wp-block-navigation__container .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--highlight);
}

@keyframes tcnf-menu-link-in {
	from {
		opacity: 0;
		transform: translateY(var(--wp--preset--spacing--40));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Bottom of the menu: CTA, WhatsApp and social links */
.tcnf-menu .tcnf-menu__foot {
	margin-top: auto;
}

.tcnf-menu .tcnf-menu__foot .wp-block-buttons {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
}

.tcnf-menu .tcnf-menu__foot .wp-block-buttons .wp-block-button {
	width: 100%;
	margin: 0;
}

.tcnf-menu .tcnf-menu__foot .wp-block-buttons .wp-block-button__link {
	width: 100%;
	padding-inline: var(--wp--preset--spacing--50);
	text-align: center;
	white-space: normal;
}

/* ---- Social links -------------------------------------------------------- */
/* Social Icons block with the class tcnf-social: glass circles, red on hover */
.tcnf-social.wp-block-social-links {
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
}

.tcnf-social.wp-block-social-links .wp-social-link.wp-block-social-link {
	padding: 0;
	background: none;
	color: var(--wp--custom--text--primary);
	transform: none;
}

.tcnf-social.wp-block-social-links .wp-social-link .wp-block-social-link-anchor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--size--control-sm);
	height: var(--wp--custom--size--control-sm);
	padding: 0;
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--glass--fill-subtle);
	color: inherit;
	transition:
		transform var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		background-color var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		border-color var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		color var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-social.wp-block-social-links .wp-social-link .wp-block-social-link-anchor:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--custom--text--on-accent);
	transform: translateY(calc(var(--wp--custom--nudge) * -1));
}

.tcnf-social.wp-block-social-links .wp-social-link .wp-block-social-link-anchor:focus-visible {
	border-radius: 50%;
	box-shadow: var(--wp--custom--focus-ring);
}

.tcnf-social.wp-block-social-links .wp-social-link .wp-block-social-link-anchor svg {
	width: var(--wp--custom--size--icon--sm);
	height: var(--wp--custom--size--icon--sm);
	fill: currentColor;
}