/**
 * Mavereon UI layer: navigation, bilingual typography, motion, finish.
 *
 * Loads after theme.css. Split out because theme.css covers the page
 * components and this covers the chrome and the polish, which change at
 * different times and for different reasons.
 *
 * Contents
 *   1. Bilingual typography
 *   2. Header navigation and language switcher
 *   3. Kiosk language chips
 *   4. Footer layout
 *   5. Reveal on scroll
 *   6. Depth and finish
 */

/* -------------------------------------------------------------------------
 * 1. Bilingual typography
 * ---------------------------------------------------------------------- */

/*
 * Arabic sets differently from Latin. There are no capitals to create texture,
 * the letterforms are connected, and negative tracking damages the joins. So:
 * no letter-spacing, looser leading, slightly larger text.
 */
.mvr-lang-ar {
	font-family: "Cairo", "Public Sans", "Segoe UI", Tahoma, sans-serif;
	letter-spacing: 0;
	line-height: 1.85;
	font-size: 1.08rem;
}

.mvr-lang-ar :where(h1, h2, h3, h4, h5, h6) {
	letter-spacing: 0;
	line-height: 1.45;
	font-weight: 700;
}

.mvr-lang-ar .mvr-eyebrow,
.mvr-lang-ar .mvr-trust__label,
.mvr-lang-ar .mvr-contact__label,
.mvr-lang-ar .mvr-productmark__tag {
	letter-spacing: 0;
	text-transform: none;
	font-size: var(--wp--preset--font-size--small);
}

.mvr-lang-ar .mvr-hero h1 {
	max-width: 22ch;
}

/* Digits read better in the Latin face than in a connected Arabic text face. */
.mvr-lang-ar .mvr-step::before {
	font-family: "Public Sans", sans-serif;
}

/* -------------------------------------------------------------------------
 * 2. Header navigation and language switcher
 * ---------------------------------------------------------------------- */

.mvr-nav__list {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mvr-nav__item {
	position: relative;
}

.mvr-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	/* Wider than it looks it needs: the hover chip should read as a considered
	   target rather than a rectangle drawn tight around the words. */
	padding: 0.55rem 0.9rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 550;
	color: inherit;
	background: none;
	border: 0;
	border-radius: var(--mvr-radius-sm);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--mvr-t-fast), background-color var(--mvr-t-fast);
}

.mvr-nav__link:hover,
.mvr-nav__link.is-current {
	color: var(--mvr-primary);
	background-color: var(--mvr-primary-soft);
}

.mvr-has-transparent-header .mvr-header:not(.is-scrolled) .mvr-nav__link:hover,
.mvr-has-transparent-header .mvr-header:not(.is-scrolled) .mvr-nav__link.is-current {
	color: #fff;
	background-color: rgba(231, 237, 246, 0.12);
}

.mvr-nav__chev {
	display: inline-flex;
	transition: transform var(--mvr-t-fast);
}

.mvr-nav__toggle[aria-expanded="true"] .mvr-nav__chev {
	transform: rotate(180deg);
}

.mvr-nav__panel {
	position: absolute;
	inset-block-start: calc(100% + 0.5rem);
	inset-inline-start: 0;
	min-width: 17rem;
	padding: 0.5rem;
	/*
	 * A navy surface rather than a white card. The header sits transparent over
	 * a dark hero, and a white panel punched a hole in it; worse, it forced the
	 * wordmark to switch colourway halfway down the header. On this ground the
	 * one light-on-navy wordmark is correct everywhere in the header.
	 *
	 * Every colour below is measured against #0B203B: the links reach 8.11:1,
	 * the lead 13.90:1, and the wordmark's blue 5.94:1 — all past the 4.5:1
	 * that text needs.
	 */
	background-color: var(--mvr-navy);
	color: var(--mvr-on-navy);
	border: 1px solid rgba(231, 237, 246, 0.14);
	border-radius: var(--mvr-radius-lg);
	box-shadow: var(--mvr-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--mvr-t-fast), transform var(--mvr-t-fast), visibility var(--mvr-t-fast);
	z-index: 20;
}

.mvr-nav__item--has-children:hover .mvr-nav__panel,
.mvr-nav__toggle[aria-expanded="true"] + .mvr-nav__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mvr-nav__panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mvr-nav__panel a {
	display: block;
	padding: 0.5rem 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--mvr-on-navy-muted);
	text-decoration: none;
	border-radius: var(--mvr-radius-sm);
}

.mvr-nav__panel a:hover {
	background-color: rgba(231, 237, 246, 0.1);
	color: #fff;
}

.mvr-nav__panel-lead {
	font-weight: 650;
	color: var(--mvr-on-navy) !important;
	border-block-end: 1px solid rgba(231, 237, 246, 0.15);
	border-radius: 0 !important;
	margin-block-end: 0.35rem;
	padding-block-end: 0.6rem !important;
}

.mvr-langswitch {
	/* Same reason as .mvr-btn: it is an anchor, so it needs the box stated
	   before a min-height means what it says. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	border: 1px solid var(--mvr-line);
	border-radius: var(--mvr-radius-pill);
	white-space: nowrap;
	transition: border-color var(--mvr-t-fast), background-color var(--mvr-t-fast), color var(--mvr-t-fast);
}

.mvr-langswitch:hover {
	border-color: var(--mvr-primary);
	background-color: var(--mvr-primary-soft);
	color: var(--mvr-primary-strong);
}

.mvr-has-transparent-header .mvr-header:not(.is-scrolled) .mvr-langswitch {
	border-color: rgba(231, 237, 246, 0.3);
	color: var(--mvr-on-navy);
}

.mvr-has-transparent-header .mvr-header:not(.is-scrolled) .mvr-langswitch:hover {
	background-color: rgba(231, 237, 246, 0.12);
	border-color: var(--mvr-on-navy);
	color: #fff;
}

/* Hamburger, only below the desktop breakpoint. */
.mvr-navtoggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	color: inherit;
	background: none;
	border: 1px solid var(--mvr-line);
	border-radius: var(--mvr-radius-sm);
	cursor: pointer;
}

.mvr-has-transparent-header .mvr-header:not(.is-scrolled) .mvr-navtoggle {
	border-color: rgba(231, 237, 246, 0.3);
}

@media (max-width: 1023px) {
	.mvr-js .mvr-navtoggle {
		display: inline-flex;
	}

	/*
	 * Scoped to .mvr-js on purpose. With scripting off there is no button to
	 * open this panel, so it stays in normal flow and remains usable.
	 */
	.mvr-js .mvr-nav {
		position: fixed;
		inset-block-start: var(--mvr-header-h);
		inset-inline: 0;
		max-height: calc(100vh - var(--mvr-header-h));
		overflow-y: auto;
		padding: 1rem 1.25rem 2.5rem;
		background-color: var(--mvr-navy);
		color: var(--mvr-on-navy);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--mvr-t-base), transform var(--mvr-t-base), visibility var(--mvr-t-base);
	}

	.mvr-js .mvr-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.mvr-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0.15rem;
	}

	.mvr-nav__link {
		width: 100%;
		justify-content: space-between;
		padding: 0.85rem 0.5rem;
		font-size: var(--wp--preset--font-size--large);
		color: var(--mvr-on-navy);
	}

	.mvr-nav__link:hover,
	.mvr-nav__link.is-current {
		color: #fff;
		background-color: rgba(231, 237, 246, 0.1);
	}

	.mvr-nav__panel {
		position: static;
		display: none;
		min-width: 0;
		padding: 0 0 0.5rem 0.5rem;
		background: none;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.mvr-nav__item--has-children:hover .mvr-nav__panel {
		display: none;
	}

	.mvr-nav__toggle[aria-expanded="true"] + .mvr-nav__panel {
		display: block;
	}

	.mvr-nav__panel a,
	.mvr-nav__panel-lead {
		color: var(--mvr-on-navy-muted) !important;
		border-color: rgba(231, 237, 246, 0.15) !important;
	}

	.mvr-nav__panel a:hover {
		background-color: rgba(231, 237, 246, 0.1);
		color: #fff !important;
	}
}

/* -------------------------------------------------------------------------
 * 3. Kiosk language chips
 * ---------------------------------------------------------------------- */

.mvr-section--languages {
	background:
		radial-gradient(50rem 26rem at 15% 0%, rgba(4, 91, 196, 0.3), transparent 62%),
		var(--mvr-navy);
}

.mvr-lang-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Stretch is the flex default; stated so the bottom-aligned badges are not
	   silently broken by someone changing alignment later. */
	align-items: stretch;
	gap: 0.75rem;
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 62rem;
}

.mvr-lang-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	min-width: 8.5rem;
	padding: 1rem 1.25rem;
	background-color: rgba(231, 237, 246, 0.06);
	border: 1px solid rgba(231, 237, 246, 0.15);
	border-radius: var(--mvr-radius-lg);
	transition: transform var(--mvr-t-base), border-color var(--mvr-t-base), background-color var(--mvr-t-base);
}

/*
 * Hover is deliberately colourless. It used to borrow the same teal as
 * .is-curated, which meant that pointing at any language made it look like one
 * of the two human-translated ones. Hover now only lifts and brightens the
 * neutral edge, so the teal never means anything but "curated".
 */
.mvr-lang-chip:hover {
	transform: translateY(-3px);
	border-color: rgba(231, 237, 246, 0.4);
	background-color: rgba(231, 237, 246, 0.1);
}

/* The two curated languages carry the accent, and say so in words as well. */
.mvr-lang-chip.is-curated {
	background-color: rgba(56, 217, 198, 0.12);
	border-color: rgba(56, 217, 198, 0.55);
}

.mvr-lang-chip.is-curated:hover {
	border-color: rgba(56, 217, 198, 0.8);
	background-color: rgba(56, 217, 198, 0.18);
}

.mvr-lang-chip__native {
	font-size: 1.3rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.35;
}

.mvr-lang-chip__name {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--mvr-on-navy-muted);
}

.mvr-lang-note {
	max-width: 54rem;
	margin: 2.25rem auto 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--mvr-on-navy-muted);
}

/* -------------------------------------------------------------------------
 * 4. Footer layout
 * ---------------------------------------------------------------------- */

.mvr-footer__top {
	display: grid;
	gap: 3rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	/*
	 * The brand column carried a description, contact details and social links
	 * when it was 1.1fr. It holds only the wordmark now, so it is sized to the
	 * mark itself rather than leaving a wide empty gap before the links.
	 */
	.mvr-footer__top {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 3.5rem;
	}
}

.mvr-footer__cols {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

/*
 * On a wide screen the columns take the width their own words need and the
 * space left over is put between them.
 *
 * Equal 1fr tracks share the row evenly, which is right until the columns hold
 * unequal amounts of text. "Government & Private enterprises" is twice the
 * width of "About Mavereon", so an even split left the last column's links
 * stranded in the middle of their track with a gap to the right of them -- and
 * because the rule above the copyright and the legal links below both run to
 * the container edge, that gap read as a hole in the footer rather than as
 * spacing.
 *
 * Sizing each track to its content and spreading the remainder puts the last
 * column's text where those two already end. minmax(0, max-content) rather than
 * max-content so the tracks can still shrink instead of overflowing if a column
 * is ever added or its labels grow; the natural width is 776px against the
 * 943px available here, and this only applies where that has room to spare.
 * Below it the even split stands, and below 900px the columns stack.
 */
@media (min-width: 1200px) {
	.mvr-footer__cols {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, max-content);
		justify-content: space-between;
	}
}

.mvr-footer__col h2 {
	margin-block: 0 1rem;
}

.mvr-footer__col h2 a {
	color: #fff;
	text-decoration: none;
}

.mvr-footer__col h2 a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 5. Reveal on scroll
 * ---------------------------------------------------------------------- */

/*
 * Applied only once JavaScript confirms it can drive the reveal. Without it
 * every section is simply visible, which is the correct fallback.
 */
.mvr-js .mvr-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms cubic-bezier(0.2, 0.6, 0.3, 1), transform 620ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

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

/* Children stagger using the --mvr-i index printed on each card. */
.mvr-js .mvr-reveal.is-in > * {
	animation: mvr-rise 560ms cubic-bezier(0.2, 0.6, 0.3, 1) both;
	animation-delay: calc(var(--mvr-i, 0) * 55ms);
}

@keyframes mvr-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

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

@media (prefers-reduced-motion: reduce) {
	.mvr-js .mvr-reveal,
	.mvr-js .mvr-reveal.is-in > * {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
 * 6. Depth and finish
 * ---------------------------------------------------------------------- */

/* Cards lift with a coloured edge rather than only a shadow. */
.mvr-card {
	position: relative;
	overflow: hidden;
}

.mvr-card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--mvr-primary), var(--mvr-accent));
	opacity: 0;
	transition: opacity var(--mvr-t-base);
}

.mvr-card:hover::before {
	opacity: 1;
}

.mvr-card--dark::before {
	background: linear-gradient(90deg, var(--mvr-accent), var(--mvr-primary));
}

/* A hairline flourish under each section eyebrow. */
.mvr-section-head .mvr-eyebrow::after {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2px;
	margin: 0.6rem auto 0;
	background: linear-gradient(90deg, var(--mvr-primary), transparent);
	border-radius: 2px;
}

.mvr-section--dark .mvr-section-head .mvr-eyebrow::after {
	background: linear-gradient(90deg, var(--mvr-accent), transparent);
}

.mvr-center-buttons {
	justify-content: center;
	margin-block-start: 2.5rem;
}

/* Button lift lives with the base button rule in theme.css, not here. */

/* Hero visual: caption sits on the image instead of pushing it up. */
.mvr-hero__visual .mvr-placeholder {
	position: relative;
	margin: 0;
}

.mvr-hero__visual .mvr-placeholder img {
	border-radius: 0;
	box-shadow: none;
}

.mvr-hero__visual figcaption {
	position: absolute;
	inset-block-end: 0.75rem;
	inset-inline-start: 0.75rem;
	margin: 0;
}

/* Strip media keeps a consistent frame with the hero. */
.mvr-strip__media {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * 7. Odds and ends
 * ---------------------------------------------------------------------- */

/* Inline icons: stop them sitting on the text baseline. */
.mvr-icon {
	display: inline-block;
	vertical-align: middle;
	flex: 0 0 auto;
}

/* 404 and search actions were shipping without a rule of their own. */
.mvr-404-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: 2rem;
}

/* Footer social row. */
.mvr-footer__social {
	display: flex;
	gap: 0.5rem;
	margin-block-start: 1.5rem;
}

.mvr-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--mvr-radius-md);
	border: 1px solid rgba(231, 237, 246, 0.16);
	color: var(--mvr-on-navy-muted);
	transition: color var(--mvr-t-fast), border-color var(--mvr-t-fast), background-color var(--mvr-t-fast);
}

.mvr-footer__social a:hover {
	color: #fff;
	border-color: var(--mvr-accent);
	background-color: rgba(56, 217, 198, 0.12);
}

/* Blog cards inherit the card treatment; the featured image needs framing. */
.mvr-post-card .wp-block-post-featured-image img {
	border-radius: var(--mvr-radius-md);
}

/* -------------------------------------------------------------------------
 * 8. Full-bleed section flow
 * ---------------------------------------------------------------------- */

/*
 * main and .entry-content are flow containers so that full-width sections can
 * actually reach the viewport edge. WordPress's flow layout inserts a 1.5rem
 * block gap between every child, which would leave a white stripe between each
 * pair of coloured bands. Sections own their own vertical rhythm through
 * .mvr-section padding, so the gap between them is removed here.
 */
.wp-site-blocks main > *,
.wp-site-blocks main > .entry-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* The header is fixed only over a dark hero; otherwise it sits in flow. */
.wp-site-blocks > header,
.wp-site-blocks > footer {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
 * 9. Alignment discipline
 * ---------------------------------------------------------------------- */

/*
 * One left edge per block.
 *
 * WordPress's constrained layout sets "margin-left/right: auto !important" on
 * every child. Any element that also carries its own max-width therefore gets
 * centred, and a narrower element indents further than a wider one. The result
 * is a hero whose breadcrumb, eyebrow, heading, lead and buttons each start at a
 * different x position.
 *
 * These columns are flow containers now, so the auto margins are already gone.
 * This rule is the guard: if anyone re-adds a constrained layout in the editor,
 * the left edge still holds.
 */
.mvr-hero__body > *,
.mvr-prose > *,
.mvr-strip__body > * {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* The measure lives here rather than on a block attribute, so one value
   governs every start-aligned column on the site. */
.mvr-hero__body,
.mvr-prose {
	max-width: 46rem;
	margin-inline: 0 auto;
}

/*
 * Heading and lead measures are set in characters for readability. With the
 * auto margins gone they now shorten the line rather than shift it.
 */
.mvr-hero__body h1 {
	max-width: 20ch;
}

.mvr-hero__body .mvr-hero__sub {
	max-width: 52ch;
}

/* Breadcrumb sits tight above the eyebrow instead of floating in the flow gap. */
.mvr-hero__body .mvr-breadcrumbs {
	margin-block-end: 1.5rem;
}

.mvr-hero__body .mvr-eyebrow {
	margin-block-start: 0;
}

/*
 * Centred blocks stay centred, explicitly. Stating both cases means the
 * alignment of any section is readable from the CSS rather than inherited by
 * accident from whichever layout its parent happens to use.
 */
.mvr-section-head,
.mvr-cta-band {
	text-align: center;
}

.mvr-section-head > *,
.mvr-cta-band > * {
	margin-inline: auto !important;
}

/* -------------------------------------------------------------------------
 * 10. Home hero headline
 * ---------------------------------------------------------------------- */

/*
 * The home headline is set in Inter, which is tighter and more geometric than
 * Public Sans at display size. Scoped to this one heading on purpose: the rest
 * of the site stays on Public Sans, so this is a deliberate accent rather than
 * a second body face competing with the first.
 */
.mvr-hero__body h1 {
	font-family: "Inter", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 700;
	letter-spacing: -0.035em;
}

/* Arabic has no Inter equivalent here, so it keeps Cairo and its own tracking. */
.mvr-lang-ar .mvr-hero__body h1 {
	font-family: "Cairo", "Public Sans", "Segoe UI", Tahoma, sans-serif;
	letter-spacing: 0;
}

/*
 * The lead line above the kiosk-language footnote.
 *
 * One short sentence, so it is centred and left unjustified: justification
 * never stretches a last line, and a single line is nothing but a last line.
 * The explanation beneath it is a real paragraph and is justified with the
 * rest of the site's prose.
 */
.mvr-section--languages .mvr-lang-note__lead {
	max-width: 40rem;
	margin: 2.25rem auto 0.5rem;
	text-align: center;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: #fff;
	text-wrap: balance;
}

/*
 * The footnote is centred under centred chips, so it is one of the places the
 * sitewide justification is deliberately not applied. Two class selectors are
 * needed to outrank `.mvr-section--dark p`, which sets the justification.
 */
.mvr-section--languages .mvr-lang-note {
	margin-block-start: 0;
	max-width: 44rem;
	text-align: center;
	hyphens: manual;
}

/* -------------------------------------------------------------------------
 * 7. Touch targets
 *
 * Sized by how the page is being pointed at rather than by viewport width, so
 * a tablet gets the same treatment as a phone and a small desktop window does
 * not get finger-sized chrome it has no use for.
 *
 * The measured problem: on a phone the header wordmark was a 117x16 link, the
 * language switch 43x33, and the footer links 17px tall. WCAG 2.5.8 asks for
 * 24x24 as a minimum and every practical guideline puts a comfortable target
 * nearer 44. None of the rules below change what is drawn -- the wordmark, the
 * pill and the links look exactly as they did -- they only grow the area that
 * answers to a thumb.
 * ---------------------------------------------------------------------- */

@media (pointer: coarse) {
	/* The mark keeps its size; the link around it gets the height. */
	.mvr-brand {
		min-height: 44px;
	}

	/*
	 * The globe and the menu button sit side by side, so they are matched as
	 * well as enlarged: at 33px against 42px they were never the same height.
	 */
	.mvr-langswitch {
		min-height: 44px;
	}

	.mvr-navtoggle {
		width: 44px;
		height: 44px;
	}

	/*
	 * Footer links take their height from padding, and the list gives up its
	 * gap to pay for it, so the column keeps very nearly the rhythm it had
	 * while each link roughly doubles the area it offers.
	 */
	.mvr-footer ul {
		gap: 0;
	}

	.mvr-footer ul a,
	.mvr-footer__legal a {
		display: inline-block;
		padding-block: 0.5rem;
	}

	.mvr-footer__legal {
		gap: 0 1.25rem;
	}
}