/*
 * Global rules that have no block to hang off.
 *
 * Everything that belongs to a block style lives in assets/css/blocks/<block>.css
 * and is attached with wp_enqueue_block_style(); this file covers the document
 * chrome — the fixed header and its scrolled / over-hero states, the
 * navigation breakpoint, the paper-grain overlay, scroll reveal and the shared
 * keyframes.
 */

html {
	scroll-behavior: smooth;
}

body {
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

/* The demo's paper grain: a fixed, 4% multiply noise over the whole page. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.04;
	mix-blend-mode: multiply;
	background-image: url(../img/noise.svg);
}

::selection {
	background: var(--wp--preset--color--navy);
	color: #fff;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* Headings and the hero italic: `.ital` in the demo is italic 500. */
.wp-block-heading em,
.wp-block-post-title em,
.is-style-stat-number em {
	font-style: italic;
	font-weight: 500;
}

/*
 * Fixed header.
 *
 * The template-part wrapper is display: contents so the group inside is what
 * gets fixed. Non-hero pages start opaque; the front page (`has-hero-header`)
 * starts transparent with the white logo and white links, and `is-scrolled`
 * (toggled by assets/js/header.js) flips it to the opaque state.
 */
header.wp-block-template-part {
	display: contents;
}

.ckk-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
	padding-top: 20px;
	padding-bottom: 20px;
	background: rgba(244, 246, 249, 0.92);
	box-shadow: 0 1px 0 var(--wp--preset--color--line-soft);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	transition:
		background 0.5s var(--wp--custom--ease),
		box-shadow 0.5s var(--wp--custom--ease),
		padding 0.4s var(--wp--custom--ease);
}

.ckk-header.is-scrolled {
	padding-top: 13px;
	padding-bottom: 13px;
}

.has-hero-header .ckk-header:not(.is-scrolled) {
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Brand: coloured logo from the Site Logo block, white PNG stacked on top. */
.ckk-brand {
	position: relative;
	line-height: 0;
	flex: 0 0 auto;
}

.ckk-brand .custom-logo,
.ckk-brand .ckk-brand__white img {
	display: block;
	width: auto;
	height: var(--wp--custom--header--logo);
	transition:
		height 0.4s var(--wp--custom--ease),
		opacity 0.4s var(--wp--custom--ease);
}

.ckk-header.is-scrolled .ckk-brand .custom-logo,
.ckk-header.is-scrolled .ckk-brand .ckk-brand__white img {
	height: var(--wp--custom--header--logo-scrolled);
}

.ckk-brand .ckk-brand__white {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.has-hero-header .ckk-header:not(.is-scrolled) .ckk-brand .wp-block-site-logo {
	opacity: 0;
}

.has-hero-header .ckk-header:not(.is-scrolled) .ckk-brand .ckk-brand__white {
	opacity: 1;
	pointer-events: auto;
}

.ckk-brand .wp-block-site-logo {
	transition: opacity 0.4s var(--wp--custom--ease);
}

/* Over the hero the links, chevrons and burger go white; the CTA turns to glass. */
.has-hero-header .ckk-header:not(.is-scrolled) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.has-hero-header .ckk-header:not(.is-scrolled) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon,
.has-hero-header .ckk-header:not(.is-scrolled) .wp-block-navigation__responsive-container-open {
	color: #fff;
}

.has-hero-header .ckk-header:not(.is-scrolled) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	background: currentcolor;
}

.has-hero-header .ckk-header:not(.is-scrolled) .wp-block-navigation__container > .is-style-cta > .wp-block-navigation-item__content {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.32);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.has-hero-header .ckk-header:not(.is-scrolled) .wp-block-navigation__container > .is-style-cta > .wp-block-navigation-item__content:hover {
	background: rgba(255, 255, 255, 0.28);
}

/*
 * Navigation breakpoint.
 *
 * Core collapses to the burger below 600px; the menu is seven items plus a
 * button and needs the room, so it collapses at the demo's 1025px instead.
 */
@media (max-width: 1024.98px) {

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

	.ckk-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	/*
	 * A backdrop-filter on the header would trap the overlay's position: fixed
	 * inside the header box, so it goes solid instead while the menu can open.
	 */
	.ckk-header,
	.ckk-header.is-scrolled {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(244, 246, 249, 0.98);
	}

	.has-hero-header .ckk-header:not(.is-scrolled) {
		background: transparent;
	}
}

@media (min-width: 1025px) {

	.ckk-header .wp-block-navigation__responsive-container-open {
		display: none !important;
	}
}

/* Pages with no hero start below the fixed header. */
.page-template-page-plain .wp-site-blocks > main,
.error404 .wp-site-blocks > main,
.search .wp-site-blocks > main {
	padding-top: var(--wp--preset--spacing--header-offset);
}

/*
 * Scroll reveal (assets/js/reveal.js adds `is-in`).
 *
 * Scoped to `.ckk-js`, a class an inline snippet in the head puts on the root
 * element. Only a document that ran that snippet hides anything, so a client
 * with no JavaScript — a text browser, a crawler that does not execute scripts,
 * a page where the module failed to load — gets the content rather than twenty
 * elements at zero opacity that nothing will ever bring back.
 */
.ckk-js .ckk-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 0.85s var(--wp--custom--ease),
		transform 0.85s var(--wp--custom--ease);
}

.ckk-js .ckk-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Bound blocks that resolved to nothing leave no gap behind. */
p:empty {
	display: none;
}

@keyframes ckk-rise {

	from {
		opacity: 0;
		transform: translateY(22px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes ckk-slide-up {

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ckk-marquee {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.ckk-js .ckk-reveal {
		opacity: 1;
		transform: none;
	}
}