/**
 * MERINEO site chrome: header, mobile menu, footer and template spacing.
 * Loaded on the front end and inside the editor canvas.
 */

/* Templates control their own spacing; no global gap between header, main and footer. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 60;
}

@media (max-width: 600px) {

	/* The admin bar scrolls away on small screens, so the header sticks to the very top. */
	header.wp-block-template-part {
		top: 0;
	}
}

.merineo-header {
	transition: padding var(--wp--custom--duration--slow) var(--wp--custom--easing--standard);
}

.merineo-scrolled .merineo-header {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

.merineo-header .merineo-header__logo {
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
}

.merineo-header .merineo-header__logo img {
	display: block;
	height: auto;
}

/* Desktop navigation pills; the 5px padding of the pill container sets the header height. */

.merineo-header .merineo-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	padding: 5px;
}

/* Darker than the prototype (blue, amber on hover) for WCAG AA contrast on white. */
.merineo-header .merineo-header__nav .wp-block-navigation-item__content {
	padding: 9px 15px;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--blue-deep);
	text-decoration: none;
	transition: color 200ms var(--wp--custom--easing--standard);
}

.merineo-header .merineo-header__nav .wp-block-navigation-item__content:hover,
.merineo-header .merineo-header__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--ink);
}

/* The page being viewed (e.g. the blog); anchor links to homepage sections are never current. */
.merineo-header .merineo-header__nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--ink);
}

/* Intro call button */

.merineo-header__cta .wp-block-button__link {
	min-height: 40px;
	padding: 10px 18px;
	font-size: 14px;
	background-color: var(--wp--preset--color--blue-deep);
	color: var(--wp--preset--color--white);
}

.merineo-header__cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--ink);
}

@media (max-width: 559px) {

	.merineo-header .merineo-header__cta {
		display: none;
	}
}

/* Menu toggle: round outline button with two lines */

.merineo-header__nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--custom--line--on-light);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--blue-deep);
}

/*
 * Core switches to the overlay below 600px; the prototype does it below 1040px.
 * Between those widths keep the toggle visible and the inline menu hidden.
 */
@media (min-width: 600px) and (max-width: 1039px) {

	.merineo-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.merineo-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Mobile overlay: large uppercase links with hairlines and an amber arrow */

.merineo-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 28px;
}

.merineo-header__nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 56px;
}

.merineo-header__nav .is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 4px;
	width: 100%;
}

.merineo-header__nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.merineo-header .merineo-header__nav .is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 64px;
	padding: 0;
	border-bottom: 1px solid var(--wp--custom--line--on-ink);
	border-radius: 0;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}

.merineo-header__nav .is-menu-open .wp-block-navigation-item__content::after {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--amber);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5 11.5 4.5M11.5 4.5H5.5M11.5 4.5v6'/%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 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5 11.5 4.5M11.5 4.5H5.5M11.5 4.5v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.merineo-header .merineo-header__nav .is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--amber);
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------ */

.merineo-footer .merineo-footer__logo {
	margin: 0;
	line-height: 0;
}

.merineo-footer .merineo-footer__tagline {
	max-width: 28ch;
	margin: 0;
	line-height: 1.6;
}

.merineo-footer p {
	margin: 0;
}

.merineo-footer p.merineo-footer__heading {
	color: rgba(191, 206, 255, 0.72);
}

.merineo-footer a,
.merineo-footer .merineo-footer__nav .wp-block-navigation-item__content {
	color: rgba(191, 206, 255, 0.82);
	text-decoration: none;
}

.merineo-footer a:hover,
.merineo-footer .merineo-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--blue);
}

.merineo-footer__nav .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small);
}

/* Copyright bar */

.merineo-footer__bar p {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(191, 206, 255, 0.72);
}

/* "Cookie settings" reopens the Complianz banner; styled like the bar links. */
.merineo-footer .merineo-footer__consent {
	padding: 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(191, 206, 255, 0.82);
	cursor: pointer;
	background: none;
	border: 0;
	transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

.merineo-footer .merineo-footer__consent:hover {
	color: var(--wp--preset--color--blue);
}

@media (max-width: 760px) {

	.merineo-footer a {
		display: inline-block;
		padding: 10px 0;
		margin: -10px 0;
	}
}