/*!
Theme Name: Mattel Wonder Press Room
Theme URI: https://mattelwonderindoorwaterpark.com/
Author: The Atkins Group
Author URI: https://theatkinsgroup.com/
Description: Media-kit / press room theme for Mattel Wonder Indoor Waterpark. A blocks canvas: the header (logo + wave) and footer (legal line, links, waves) come from the theme; every page is built with Gutenberg blocks and the block styles registered here. Registration gate and tracked downloads are provided by the "MWIW Media Gate" plugin.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mattel-wonder
Tags: one-column, accessibility-ready, custom-logo, block-styles, wide-blocks
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS
----------------------------------------------------------------
# Design tokens
# Base / reset
# Accessibility helpers
# Page chrome: background, header, footer
# Content canvas + block defaults
# Block styles (Group, Paragraph, Buttons, Details, Lists, Media)
# Hero / pill nav / contact card
# Media cards + tracked downloads
# Login (registration) form
# Stackable compatibility
# Utilities, print, forced colors
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
	/* Brand — pulled from the Mattel Wonder logo + approved layout.
	   Every text/background pair used below meets WCAG 2.1 AA. */
	--mw-font: "Matty Mattel Sans", Roboto, Arial, Helvetica, sans-serif;

	--mw-bg: #B3D8F2;          /* page */
	--mw-bg-edge: #9FCFF0;     /* page gradient, outer edges */
	--mw-bg-center: #BDDFF5;   /* page gradient, center */
	--mw-card: #CBEBF8;        /* section card (light blue) */
	--mw-card-line: #DDF1FB;   /* subtle divider on blue */
	--mw-white: #FFFFFF;
	--mw-line: #E3EDF5;        /* divider on white */

	--mw-navy: #103E6F;        /* headings + primary text (10.8:1 on white, 7.2:1 on page) */
	--mw-navy-deep: #0B2E55;
	--mw-ink: #22405E;         /* body copy (9.4:1 on white) */
	--mw-muted: #4F6478;       /* captions / meta (6.2:1 on white, 4.8:1 on card) */
	--mw-blue: #277FC2;        /* logo mid-blue — accents only */

	--mw-red: #E4002B;         /* Mattel red — buttons, chips (4.85:1 with white text) */
	--mw-red-hover: #C4001F;
	--mw-red-text: #B8001F;    /* small red text on the light-blue card (5.5:1) */

	--mw-radius-xl: 28px;
	--mw-radius-lg: 20px;
	--mw-radius-md: 14px;
	--mw-radius-pill: 999px;

	--mw-shadow-section: 0 18px 40px rgba(16, 62, 111, 0.10);
	--mw-shadow-card: 0 8px 22px rgba(16, 62, 111, 0.07);
	--mw-shadow-button: 0 8px 18px rgba(228, 0, 43, 0.22);

	--mw-content: 1072px;
	--mw-gutter: clamp(16px, 4vw, 40px);
	--mw-section-pad: clamp(24px, 3.5vw, 44px);
	--mw-focus: #0B2E55;
	--mw-focus-ring: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 0 7px var(--mw-focus);
}

/*--------------------------------------------------------------
# Base / reset
--------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 24px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--mw-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--mw-ink);
	background-color: var(--mw-bg);
	background-image: linear-gradient(90deg, var(--mw-bg-edge) 0%, var(--mw-bg-center) 50%, var(--mw-bg-edge) 100%);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--mw-navy);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--mw-navy-deep);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--mw-navy);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.4em;
	overflow-wrap: anywhere;
}

p {
	margin: 0 0 1em;
}

/* Visible, high-contrast focus everywhere (2.4.7 / 2.4.11). */
:focus-visible {
	outline: 3px solid var(--mw-focus);
	outline-offset: 3px;
	box-shadow: var(--mw-focus-ring);
	border-radius: 6px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/*--------------------------------------------------------------
# Accessibility helpers
--------------------------------------------------------------*/
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--mw-white);
	border-radius: 6px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: var(--mw-navy);
	display: block;
	font-size: 1rem;
	font-weight: 700;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 16px 24px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
}

/*--------------------------------------------------------------
# Page chrome: background, header, footer
--------------------------------------------------------------*/
.site {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: clip;
}

/* Header: white band with a wave edge; the logo overhangs into the blue. */
.mw-header {
	position: relative;
	z-index: 2;
	background: var(--mw-white);
	padding-top: 26px;
	height: 92px;
}

.mw-header__wave {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	top: 100%;
	height: 78px;
	margin-top: -1px;
	pointer-events: none;
	background: url("assets/images/wave-top.svg") center top / 100% 100% no-repeat;
}

/* White apron above the wave: travels with it during the landing bob so no
   hairline of page background opens between the header band and the wave. */
.mw-header__wave::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 10px;
	background: var(--mw-white);
}

.mw-header__brand {
	position: absolute;
	z-index: 2;
	top: 26px;
	left: 50%;
	transform: translateX(-50%);
	width: clamp(220px, 28vw, 330px);
	text-align: center;
}

.mw-header__brand a {
	display: inline-block;
	border-radius: 12px;
}

.mw-header__brand img,
.mw-header__brand .custom-logo {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 6px 14px rgba(16, 62, 111, 0.16));
}

/* Layered logo (mark over splash) — composites to the Primary logo at rest. */
.mw-logo {
	display: block;
	width: 100%;
	border-radius: 12px;
}

.mw-logo__stage {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1200 / 707;
}

.mw-logo__splash,
.mw-logo__mark {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.mw-logo__splash img,
.mw-logo__mark img {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 6px 14px rgba(16, 62, 111, 0.16));
}

.mw-logo__mark {
	z-index: 2;
}

.mw-logo__splash {
	z-index: 1;
	transform-origin: 50% 62%;
}

.mw-logo__drops {
	display: none;
}

@media (max-width: 600px) {
	.mw-header {
		height: 72px;
		padding-top: 18px;
	}

	.mw-header__wave {
		height: 54px;
	}

	.mw-header__brand {
		top: 18px;
	}
}

/* Main canvas leaves room for the logo overhang. */
.site-main {
	flex: 1 0 auto;
	position: relative;
	z-index: 1;
	padding: clamp(150px, 20vw, 210px) 0 clamp(48px, 6vw, 80px);
}

@media (max-width: 600px) {
	.site-main {
		padding-top: 150px;
	}
}

/* Footer */
.mw-footer {
	position: relative;
	z-index: 1;
	margin-top: auto;
	background: transparent; /* the page gradient + bubbles show through */
}

.mw-footer__inner {
	max-width: var(--mw-content);
	margin: 0 auto;
	padding: 0 var(--mw-gutter) 40px;
	position: relative;
	z-index: 1;
}

.mw-footer__legal {
	font-size: 13px;
	line-height: 1.6;
	font-weight: 700;
	color: var(--mw-navy);
	max-width: 62rem;
	margin: 0 0 18px;
}

.mw-footer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.mw-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 36px;
}

.mw-footer__nav a {
	display: inline-block;
	min-height: 24px;
	font-size: 13px;
	font-weight: 700;
	color: var(--mw-navy);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mw-footer__nav a:hover,
.mw-footer__nav a:focus-visible {
	color: var(--mw-red-text);
}

.mw-footer__waves {
	display: block;
	width: 100%;
	height: clamp(70px, 11vw, 160px);
	/* three layered waves ending in white; the blue page shows through the top */
	background: url("assets/images/wave-bottom.svg") center bottom / 100% 100% no-repeat;
}

.mw-footer__bottom {
	height: 34px;
	background: var(--mw-white);
}

/*--------------------------------------------------------------
# Content canvas + block defaults
--------------------------------------------------------------*/
.mw-canvas {
	max-width: var(--mw-content);
	margin: 0 auto;
	padding: 0 var(--mw-gutter);
}

.mw-canvas > * + * {
	margin-top: clamp(24px, 3vw, 32px);
}

/* A hero that opens with its headline (the login page: no eyebrow pill above
   the H1) sits closer to the logo and gets more air before the card below it,
   so the headline reads as the title of that card rather than floating
   between the two. Falls back to the standard spacing where :has() is not
   supported. */
.mw-canvas > .mk-hero:has(> h1:first-child) {
	margin-top: clamp(-28px, -1.6vw, -12px); /* pulls up ~27px on desktop, 12px on phones */
}

.mw-canvas > .mk-hero:has(> h1:first-child) + * {
	margin-top: clamp(36px, 4vw, 48px);
}

/* Full-width blocks may still be used on the canvas. */
.mw-canvas .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

.mw-canvas .alignwide {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

body h1 {
	font-size: clamp(36px, 5vw, 58px);
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1.05;
}

body h2 {
	font-size: clamp(26px, 3.2vw, 34px);
	letter-spacing: -0.01em;
}

body h3 {
	font-size: 18px;
	line-height: 1.3;
}

body h4 {
	font-size: 16px;
}

body p {
	color: var(--mw-ink);
}

body p.has-large-font-size,
body p.is-style-mk-lead {
	font-size: 18px;
	line-height: 1.55;
}

body .has-text-align-center {
	text-align: center;
}

body .wp-block-columns {
	gap: clamp(16px, 2.2vw, 24px);
	margin-bottom: 0;
}

body .wp-block-column {
	min-width: 0;
}

body .wp-block-image {
	margin: 0;
}

body .wp-block-image img {
	display: block;
	border-radius: var(--mw-radius-lg);
}

body .wp-block-image figcaption {
	font-size: 13px;
	color: var(--mw-muted);
	margin: 8px 0 0;
	text-align: left;
}

body .wp-block-video,
body .wp-block-embed {
	margin: 0;
}

body .wp-block-video video,
body .wp-block-embed .wp-block-embed__wrapper {
	display: block;
	width: 100%;
	border-radius: var(--mw-radius-lg);
	overflow: hidden;
	background: var(--mw-navy-deep);
	box-shadow: var(--mw-shadow-card);
}

body .wp-block-video video {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

body .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--mw-line);
	margin: 8px 0;
}

/* Lists inside the canvas: soft blue bullets like the layout. */
body ul.wp-block-list {
	list-style: none;
	padding-left: 0;
	margin: 0 0 1em;
}

body ul.wp-block-list > li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 6px;
}

body ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.55em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mw-white);
	border: 2px solid #8CC5E9;
	box-sizing: border-box;
}

body ol.wp-block-list {
	padding-left: 1.3em;
}

/*--------------------------------------------------------------
# Block styles — Group
--------------------------------------------------------------*/
/* "Section card": the big light-blue rounded panel. */
body .is-style-mk-section {
	background: var(--mw-card);
	border-radius: var(--mw-radius-xl);
	padding: var(--mw-section-pad);
	box-shadow: var(--mw-shadow-section);
	scroll-margin-top: 24px;
}

body .is-style-mk-section > * + * {
	margin-top: 22px;
}

body .is-style-mk-section h2 {
	margin-bottom: 4px;
}

/* "White card": inner white panel. */
body .is-style-mk-card {
	background: var(--mw-white);
	border-radius: var(--mw-radius-lg);
	padding: clamp(20px, 2.6vw, 28px);
	box-shadow: var(--mw-shadow-card);
}

body .is-style-mk-card > * + * {
	margin-top: 12px;
}

body .is-style-mk-card h3 {
	margin-bottom: 6px;
}

body .is-style-mk-card p:last-child {
	margin-bottom: 0;
}

body .is-style-mk-card a:not(.wp-block-button__link) {
	font-weight: 700;
}

/* Section head: title block on the left, action button on the right. */
body .mk-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin-top: 0;
}

body .mk-section-head > * {
	margin: 0;
	min-width: 0;
}

body .mk-section-head .wp-block-buttons {
	margin: 0;
	flex: 0 0 auto;
}

body .mk-section-title > * {
	margin: 0;
}

body .mk-section-title > .is-style-mk-eyebrow {
	margin-bottom: 4px;
}

body .mk-section-title > p:not(.is-style-mk-eyebrow) {
	margin-top: 6px;
	color: var(--mw-muted);
	font-size: 15px;
}

/*--------------------------------------------------------------
# Block styles — Paragraph
--------------------------------------------------------------*/
/* "Eyebrow": small red caps label above a heading. */
body .is-style-mk-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mw-red-text);
	margin: 0 0 6px;
}

/* "Red pill": PRESS ROOM tag. */
body .is-style-mk-pill {
	display: inline-block;
	background: var(--mw-red);
	color: var(--mw-white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	padding: 10px 16px;
	border-radius: var(--mw-radius-pill);
	margin: 0 0 18px;
}

body .has-text-align-center > .is-style-mk-pill,
body .is-style-mk-pill.has-text-align-center {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

/* "White chip": Rendering / Photo / date tag. */
body .is-style-mk-chip {
	display: inline-block;
	background: var(--mw-white);
	color: var(--mw-navy);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 8px 12px;
	border-radius: var(--mw-radius-pill);
	box-shadow: 0 4px 12px rgba(16, 62, 111, 0.12);
	margin: 0 0 12px;
}

body .is-style-mk-chip.mk-chip--red,
body .is-style-mk-chip strong {
	color: var(--mw-red);
}

/* "Fine print" */
body .is-style-mk-fineprint {
	font-size: 13px;
	line-height: 1.55;
	color: var(--mw-muted);
}

/* "Dateline" */
body .is-style-mk-dateline {
	font-size: 13px;
	font-weight: 700;
	color: var(--mw-muted);
	margin: 0 0 4px;
}

/* "Note" (info line with an icon) */
body .is-style-mk-note {
	position: relative;
	padding-left: 30px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--mw-ink);
}

body .is-style-mk-note::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--mw-navy) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='6' r='1.4' fill='%23fff'/%3E%3Crect x='8.8' y='8.6' width='2.4' height='6.4' rx='1.2' fill='%23fff'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/*--------------------------------------------------------------
# Block styles — Buttons
--------------------------------------------------------------*/
body .wp-block-buttons {
	gap: 12px 14px;
}

body .wp-block-button {
	margin: 0;
}

body .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 26px;
	border-radius: var(--mw-radius-pill);
	border: 2px solid var(--mw-red);
	background-color: var(--mw-red);
	/* shine sweep on hover (see Motion section) */
	background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 62%);
	background-size: 260% 100%;
	background-position: 115% 0;
	background-repeat: no-repeat;
	color: var(--mw-white);
	font-family: var(--mw-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: var(--mw-shadow-button);
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, background-position 0.6s ease;
}

body .wp-block-button__link:hover,
body .wp-block-button__link:focus-visible {
	background-color: var(--mw-red-hover);
	background-position: -15% 0;
	border-color: var(--mw-red-hover);
	color: var(--mw-white);
	transform: translateY(-1px);
}

body .wp-block-button__link:active {
	transform: translateY(0);
}

/* Download icon on any button whose link is a file (added by the gate
   plugin) or that carries the "mk-download" class. */
body .wp-block-button__link[download]::before,
body .mk-download .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a1 1 0 0 1 1 1v6.09l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4A1 1 0 1 1 4.7 6.3L7 8.59V2.5a1 1 0 0 1 1-1zM2.5 12.5a1 1 0 0 1 1 1v.5h9v-.5a1 1 0 1 1 2 0v1.5a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1V13.5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a1 1 0 0 1 1 1v6.09l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4A1 1 0 1 1 4.7 6.3L7 8.59V2.5a1 1 0 0 1 1-1zM2.5 12.5a1 1 0 0 1 1 1v.5h9v-.5a1 1 0 1 1 2 0v1.5a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1V13.5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "Outline" */
body .is-style-mk-outline .wp-block-button__link {
	background-color: var(--mw-white);
	border-color: var(--mw-navy);
	color: var(--mw-navy);
	box-shadow: none;
}

body .is-style-mk-outline .wp-block-button__link:hover,
body .is-style-mk-outline .wp-block-button__link:focus-visible {
	background-color: var(--mw-navy);
	border-color: var(--mw-navy);
	color: var(--mw-white);
}

/* "White" */
body .is-style-mk-white .wp-block-button__link {
	background-color: var(--mw-white);
	border-color: var(--mw-white);
	color: var(--mw-navy);
	box-shadow: 0 8px 18px rgba(16, 62, 111, 0.10);
}

body .is-style-mk-white .wp-block-button__link:hover,
body .is-style-mk-white .wp-block-button__link:focus-visible {
	background-color: var(--mw-navy);
	border-color: var(--mw-navy);
	color: var(--mw-white);
}

/* "Text link" (Download hi-res ↓) */
body .is-style-mk-link .wp-block-button__link {
	background: transparent;
	background-image: none;
	border-color: transparent;
	color: var(--mw-red);
	padding: 4px 0;
	min-height: 32px;
	box-shadow: none;
	border-radius: 6px;
	font-size: 15px;
	text-decoration: none;
}

body .is-style-mk-link .wp-block-button__link:hover,
body .is-style-mk-link .wp-block-button__link:focus-visible {
	background: transparent;
	background-image: none;
	color: var(--mw-red-hover);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transform: none;
}

/* "Read more" text link with a plus (used for anchor jumps) */
body .is-style-mk-more .wp-block-button__link {
	background: transparent;
	background-image: none;
	border-color: transparent;
	color: var(--mw-red);
	padding: 4px 0;
	min-height: 32px;
	box-shadow: none;
	font-size: 15px;
}

/* Stacked buttons (vertical) */
body .mk-stack .wp-block-buttons,
body .wp-block-buttons.mk-stack {
	flex-direction: column;
	align-items: stretch;
}

body .mk-stack .wp-block-button__link {
	width: 100%;
}

/* Placeholder links ("#") until the client uploads the file:
   the plugin/theme script adds aria-disabled; render them muted. */
body .wp-block-button__link[aria-disabled="true"],
body .wp-block-button__link.mk-pending {
	opacity: 0.55;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
	background-image: none;
}

/*--------------------------------------------------------------
# Block styles — Details ("Read full release +")
--------------------------------------------------------------*/
body .wp-block-details {
	margin: 0;
}

body .wp-block-details > summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
	color: var(--mw-red);
	min-height: 32px;
	border-radius: 6px;
}

body .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

body .wp-block-details > summary::after {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M6 0h2v6h6v2H8v6H6V8H0V6h6z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M6 0h2v6h6v2H8v6H6V8H0V6h6z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease;
}

body .wp-block-details[open] > summary::after {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M0 6h14v2H0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M0 6h14v2H0z'/%3E%3C/svg%3E");
}

body .wp-block-details > summary:hover {
	color: var(--mw-red-hover);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body .wp-block-details > :not(summary) {
	margin-top: 14px;
}

/*--------------------------------------------------------------
# Hero / pill nav / contact card
--------------------------------------------------------------*/
body .mk-hero {
	text-align: center;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

body .mk-hero > * + * {
	margin-top: 14px;
}

body .mk-hero h1 {
	margin-bottom: 0;
	text-wrap: balance; /* if a headline must wrap, wrap it evenly — no orphan word */
}

body .mk-hero p:not([class*="is-style-"]) {
	color: var(--mw-navy);
	font-size: 18px;
	line-height: 1.55;
}

body .mk-hero .wp-block-buttons {
	justify-content: center;
	margin-top: 26px;
}

/* In-page pill navigation (a Buttons block with the "Pill nav" style). */
body .wp-block-buttons.is-style-mk-pillnav {
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	background: var(--mw-white);
	border-radius: 28px;
	padding: 6px 10px;
	gap: 2px;
	justify-content: center;
	box-shadow: var(--mw-shadow-card);
}

body .is-style-mk-pillnav .wp-block-button__link {
	background: transparent;
	background-image: none;
	border-color: transparent;
	color: var(--mw-navy);
	min-height: 40px;
	padding: 8px 14px;
	font-size: 14px;
	box-shadow: none;
	border-radius: var(--mw-radius-pill);
}

body .is-style-mk-pillnav .wp-block-button__link:hover,
body .is-style-mk-pillnav .wp-block-button__link:focus-visible,
body .is-style-mk-pillnav .wp-block-button__link[aria-current="true"] {
	background: var(--mw-card);
	background-image: none;
	border-color: var(--mw-card);
	color: var(--mw-navy-deep);
	transform: none;
}

/* Media contact card: label on the left, details on the right. */
body .mk-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 26px;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	background: var(--mw-card);
	border-radius: var(--mw-radius-xl);
	padding: 24px 32px;
	box-shadow: var(--mw-shadow-section);
	text-align: left;
}

body .mk-contact > * {
	margin: 0;
}

body .mk-contact .is-style-mk-eyebrow {
	margin: 0;
	flex: 0 0 auto;
}

body .mk-contact .mk-contact__details {
	flex: 1 1 300px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--mw-ink);
}

body .mk-contact .mk-contact__details strong {
	color: var(--mw-navy);
	font-size: 16px;
}

body .mk-contact a {
	font-weight: 700;
	color: var(--mw-navy);
}

body .mk-contact a {
	white-space: nowrap;
}

/* Phones: tighter section + card padding so text columns stay readable and
   long links (americanresortmanagement.com) don't have to break mid-word. */
@media (max-width: 480px) {
	:root {
		--mw-section-pad: 18px;
	}

	body .is-style-mk-card {
		padding: 16px;
	}
}

@media (max-width: 600px) {
	body .mk-contact {
		flex-direction: column;
		align-items: flex-start;
		padding: 22px 24px;
	}

	body .mk-contact .mk-contact__details {
		flex-basis: auto;
	}

	body .mk-contact a {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* Press release block: text left, buttons right. */
body .mk-release-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

body .mk-release-actions .wp-block-buttons {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

body .mk-release-actions .wp-block-button__link {
	width: 100%;
	min-width: 240px;
}

body .mk-release-actions .is-style-mk-fineprint {
	text-align: center;
	margin: 0;
}

@media (max-width: 781px) {
	body .mk-release-actions .wp-block-button__link {
		min-width: 0;
	}
}

/*--------------------------------------------------------------
# Media cards + tracked downloads
--------------------------------------------------------------*/
/* "Media card": image, chip, title, caption, download link. */
body .is-style-mk-media-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--mw-white);
	border-radius: var(--mw-radius-lg);
	overflow: hidden;
	box-shadow: var(--mw-shadow-card);
	padding: 0;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body .is-style-mk-media-card > * {
	margin: 0 20px;
}

body .is-style-mk-media-card > .wp-block-image,
body .is-style-mk-media-card > .wp-block-video,
body .is-style-mk-media-card > .wp-block-embed {
	margin: 0;
}

body .is-style-mk-media-card > .wp-block-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body .is-style-mk-media-card > .is-style-mk-chip {
	position: absolute;
	top: 14px;
	left: 14px;
	margin: 0;
	z-index: 1;
}

body .is-style-mk-media-card > h3,
body .is-style-mk-media-card > h4 {
	margin-top: 18px;
	margin-bottom: 2px;
	font-size: 17px;
}

body .is-style-mk-media-card > p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--mw-muted);
	margin-bottom: 0;
}

body .is-style-mk-media-card > .wp-block-buttons {
	margin: auto 20px 0;
	padding: 14px 0 16px;
	border-top: 1px solid var(--mw-line);
	gap: 8px;
}

body .is-style-mk-media-card > .wp-block-buttons:not(:has(+ *)) {
	margin-top: auto;
}

body .is-style-mk-media-card > h3 + .wp-block-buttons,
body .is-style-mk-media-card > p + .wp-block-buttons {
	margin-top: 14px;
}

body .is-style-mk-media-card .wp-block-button {
	width: 100%;
}

body .is-style-mk-media-card .is-style-mk-link .wp-block-button__link {
	width: 100%;
	justify-content: flex-start;
}

/* File type + size, filled in by the gate plugin from the media library. */
body .wp-block-button__link[data-mwiw-meta]::after {
	content: attr(data-mwiw-meta);
	margin-left: auto;
	padding-left: 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--mw-muted);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Only text links show the meta; filled buttons keep their label clean. */
body .wp-block-button:not(.is-style-mk-link) .wp-block-button__link[data-mwiw-meta]::after {
	content: none;
}

/* Video feature (b-roll) */
body .mk-video-feature .wp-block-column:first-child > * {
	margin: 0;
}

body .mk-video-feature .wp-block-column:last-child > * + * {
	margin-top: 12px;
}

body .mk-video-feature .wp-block-column:last-child h2 {
	margin-bottom: 8px;
}

body .mk-video-feature .wp-block-column:last-child .wp-block-buttons {
	margin-top: 22px;
}

/* Two-up download cards (press release + fact sheet) */
body .mk-download-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

body .mk-download-card > .wp-block-buttons {
	margin-top: auto;
	padding-top: 16px;
}

/*--------------------------------------------------------------
# Login (registration) form — markup from the MWIW Media Gate plugin
--------------------------------------------------------------*/
body .mk-login-card {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

body .mk-login-card > h2 {
	font-size: clamp(22px, 2.6vw, 26px);
	margin-bottom: 6px;
}

body .mk-login-card > p:not([class*="is-style-"]) {
	color: var(--mw-ink);
	margin-bottom: 0;
}

body .mk-login-card > .is-style-mk-lead {
	margin-bottom: 4px;
}

.mwiw-form {
	text-align: left;
	margin: 20px 0 0;
}

.mwiw-form__alert {
	background: #FFF1F3;
	border-left: 4px solid var(--mw-red);
	border-radius: 8px;
	color: #8A0018;
	font-size: 15px;
	padding: 12px 16px;
	margin: 0 0 18px;
}

.mwiw-form__alert ul {
	margin: 6px 0 0;
	padding-left: 1.2em;
}

.mwiw-field {
	margin: 0 0 16px;
}

.mwiw-field label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--mw-navy);
	margin: 0 0 8px 18px;
}

.mwiw-field .mwiw-req {
	font-size: 12px;
	font-weight: 700;
	color: var(--mw-red-text);
	margin-left: 6px;
}

.mwiw-field input {
	width: 100%;
	min-height: 60px;
	padding: 14px 24px;
	border: 2px solid var(--mw-white);
	border-radius: 30px;
	background: var(--mw-white);
	font-family: var(--mw-font);
	font-size: 17px;
	color: var(--mw-ink);
	box-shadow: 0 6px 16px rgba(16, 62, 111, 0.06) inset;
}

.mwiw-field input::placeholder {
	color: #7A8A9A;
}

.mwiw-field input[aria-invalid="true"] {
	border-color: var(--mw-red);
}

.mwiw-field__error {
	display: block;
	color: var(--mw-red-text);
	font-size: 14px;
	font-weight: 700;
	margin: 6px 0 0 18px;
}

.mwiw-field__help {
	display: block;
	font-size: 13px;
	color: var(--mw-muted);
	margin: 6px 0 0 18px;
}

.mwiw-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mwiw-consent {
	font-size: 13px;
	line-height: 1.55;
	color: var(--mw-muted);
	margin: 4px 0 18px 18px;
}

.mwiw-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 60px;
	padding: 14px 28px;
	border: 2px solid var(--mw-red);
	border-radius: var(--mw-radius-pill);
	background-color: var(--mw-red);
	background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 62%);
	background-size: 260% 100%;
	background-position: 115% 0;
	background-repeat: no-repeat;
	color: var(--mw-white);
	font-family: var(--mw-font);
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--mw-shadow-button);
	transition: background-color 0.15s ease, transform 0.15s ease, background-position 0.6s ease;
}

.mwiw-submit:hover,
.mwiw-submit:focus-visible {
	background-color: var(--mw-red-hover);
	background-position: -15% 0;
	border-color: var(--mw-red-hover);
	transform: translateY(-1px);
}

.mwiw-submit.is-busy {
	background-color: var(--mw-navy);
	border-color: var(--mw-navy);
	cursor: progress;
}

.mwiw-form__success {
	background: var(--mw-white);
	border-radius: var(--mw-radius-md);
	padding: 16px 20px;
	color: var(--mw-navy);
	font-weight: 700;
}

/*--------------------------------------------------------------
# Stackable compatibility (optional — blocks inherit the design tokens)
--------------------------------------------------------------*/
body .stk-block-heading__text {
	font-family: var(--mw-font);
	color: var(--mw-navy);
}

body .stk-block-text__text {
	font-family: var(--mw-font);
	color: var(--mw-ink);
}

body .stk-button {
	border-radius: var(--mw-radius-pill) !important;
	min-height: 52px;
}

body .stk-block-card > .stk-container {
	border-radius: var(--mw-radius-lg);
	box-shadow: var(--mw-shadow-card);
	background: var(--mw-white);
}

/*--------------------------------------------------------------
# Utilities, print, forced colors
--------------------------------------------------------------*/
body .mk-center {
	text-align: center;
}

body .mk-narrow {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

body .mk-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	font-size: 14px;
	font-weight: 700;
}

body .mk-links a {
	color: var(--mw-navy);
}

/* Windows High Contrast / forced colors */
@media (forced-colors: active) {
	body .wp-block-button__link,
	.mwiw-submit {
		border: 2px solid ButtonText;
	}

	body .wp-block-button__link[download]::before,
	body .wp-block-details > summary::after {
		background-color: CanvasText;
	}

	body .is-style-mk-section,
	body .is-style-mk-card,
	body .is-style-mk-media-card,
	body .mk-contact {
		border: 1px solid CanvasText;
	}
}

@media print {
	.site {
		background: none;
	}

	body {
		background: #fff;
		color: #000;
	}

	.mw-header__wave,
	.mw-footer__waves,
	.mw-footer__bottom,
	.is-style-mk-pillnav,
	.mwiw-form {
		display: none !important;
	}

	body .is-style-mk-section,
	body .is-style-mk-card,
	body .is-style-mk-media-card {
		box-shadow: none;
		border: 1px solid #999;
		break-inside: avoid;
	}

	body .wp-block-button__link {
		box-shadow: none;
		background: none;
		color: #000;
		border-color: #000;
	}

	body a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 12px;
		font-weight: 400;
	}
}

/*--------------------------------------------------------------
# Motion & delight
   Everything here is progressive enhancement:
   - gated on html.mw-js (JavaScript running) so nothing is ever hidden
     for a visitor without JS;
   - switched off by prefers-reduced-motion and by the footer
     "Pause background motion" control (html.mw-motion-paused);
   - transform/opacity only, so it stays on the compositor.
--------------------------------------------------------------*/

/* ---- 2. Living water: bubbles + sparkles behind the page ---- */
.mw-water {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.mw-water__layer {
	position: absolute;
	inset: 0;
	height: 140vh;
	will-change: transform;
}

.mw-bubble {
	position: absolute;
	width: var(--s, 40px);
	height: calc(var(--s, 40px) * 0.92);
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.42) 52%, rgba(255, 255, 255, 0.2) 100%);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.35),
		inset -6px -8px 14px rgba(255, 255, 255, 0.28),
		0 6px 14px rgba(16, 62, 111, 0.06);
	transform: translate3d(0, 0, 0);
}

.mw-bubble::after {
	content: "";
	position: absolute;
	left: 22%;
	top: 16%;
	width: 26%;
	height: 18%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	filter: blur(1px);
	transform: rotate(-30deg);
}

.mw-spark {
	position: absolute;
	width: var(--s, 12px);
	height: var(--s, 12px);
	background: #fff;
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
	opacity: 0.9;
	filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

@media (max-width: 600px) {
	.mw-bubble {
		width: calc(var(--s, 40px) * 0.7);
		height: calc(var(--s, 40px) * 0.64);
	}

	.mw-water__layer--1 .mw-bubble:nth-child(2n) {
		display: none;
	}
}

@keyframes mw-float {
	0% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(5px, -12px, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes mw-twinkle {
	0%,
	100% {
		opacity: 0.15;
		transform: scale(0.55) rotate(0deg);
	}

	50% {
		opacity: 1;
		transform: scale(1) rotate(20deg);
	}
}

@media (prefers-reduced-motion: no-preference) {
	html.mw-js:not(.mw-motion-paused) .mw-bubble {
		animation: mw-float var(--d, 12s) ease-in-out var(--delay, 0s) infinite;
	}

	html.mw-js:not(.mw-motion-paused) .mw-spark {
		animation: mw-twinkle var(--d, 4s) ease-in-out var(--delay, 0s) infinite;
	}
}

/* Footer control (only shown when motion is actually possible) */
.mw-motion-toggle {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 4px 0;
	min-height: 24px;
	font-family: var(--mw-font);
	font-size: 13px;
	font-weight: 700;
	color: var(--mw-navy);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.mw-motion-toggle:hover {
	color: var(--mw-red-text);
}

@media (prefers-reduced-motion: reduce) {
	.mw-motion-toggle {
		display: none !important;
	}
}

/* ---- 1. Arrival: logo splashes in, hero rises, first cards follow ---- */
@keyframes mw-splash-in {
	0% {
		opacity: 0;
		transform: translate(-50%, -18px) scale(0.9);
	}

	55% {
		opacity: 1;
		transform: translate(-50%, 6px) scale(1.03);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, 0) scale(1);
	}
}

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

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

@media (prefers-reduced-motion: no-preference) {
	html.mw-js:not(.mw-motion-paused) .mw-header__brand--custom {
		animation: mw-splash-in 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
	}

	html.mw-js:not(.mw-motion-paused) .mk-hero > * {
		animation: mw-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	html.mw-js:not(.mw-motion-paused) .mk-hero > :nth-child(1) { animation-delay: 0.7s; }
	html.mw-js:not(.mw-motion-paused) .mk-hero > :nth-child(2) { animation-delay: 0.8s; }
	html.mw-js:not(.mw-motion-paused) .mk-hero > :nth-child(3) { animation-delay: 0.9s; }
	html.mw-js:not(.mw-motion-paused) .mk-hero > :nth-child(4) { animation-delay: 1s; }
	html.mw-js:not(.mw-motion-paused) .mk-hero > :nth-child(5) { animation-delay: 1.07s; }

	html.mw-js:not(.mw-motion-paused) .mw-canvas > :nth-child(2) {
		animation: mw-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.05s both;
	}

	html.mw-js:not(.mw-motion-paused) .mw-canvas > :nth-child(3) {
		animation: mw-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.17s both;
	}
}

/* ---- 1b. The logo: the mark dives into the water, the splash bursts out behind it ---- */
@keyframes mw-logo-dive {
	0% {
		opacity: 0;
		transform: translateY(-46%) scale(1.1);
	}

	62% {
		opacity: 1;
		transform: translateY(3.5%) scale(0.985);
	}

	82% {
		transform: translateY(-1%) scale(1.005);
	}

	100% {
		transform: translateY(0) scale(1);
	}
}

@keyframes mw-logo-burst {
	0% {
		opacity: 0;
		transform: scale(0.1);
	}

	18% {
		opacity: 1;
	}

	58% {
		transform: scale(1.13);
	}

	80% {
		transform: scale(0.975);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes mw-logo-drop {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(0.3);
	}

	18% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate(calc(var(--dx) * var(--k, 1)), calc(var(--dy) * var(--k, 1))) scale(1);
	}
}

@keyframes mw-wave-bob {
	0%,
	100% {
		transform: translateY(0);
	}

	38% {
		transform: translateY(5px);
	}

	70% {
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* Layers stay hidden until both images are decoded (theme.js adds
	   .is-ready, within 300ms at most), so the dive and the burst always
	   start together. */
	html.mw-js:not(.mw-motion-paused) .mw-logo:not(.is-ready) .mw-logo__mark,
	html.mw-js:not(.mw-motion-paused) .mw-logo:not(.is-ready) .mw-logo__splash {
		opacity: 0;
	}

	html.mw-js:not(.mw-motion-paused) .mw-logo.is-ready .mw-logo__mark {
		animation: mw-logo-dive 0.75s cubic-bezier(0.3, 0, 0.2, 1) both;
	}

	html.mw-js:not(.mw-motion-paused) .mw-logo.is-ready .mw-logo__splash {
		animation: mw-logo-burst 0.7s cubic-bezier(0.2, 0.8, 0.3, 1.15) 0.46s both;
	}

	html.mw-js:not(.mw-motion-paused) .mw-header.is-ready .mw-header__wave {
		animation: mw-wave-bob 0.7s ease-in-out 0.42s;
	}

	html.mw-js:not(.mw-motion-paused) .mw-logo.is-ready .mw-logo__drops {
		display: block;
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 3;
	}

	html.mw-js:not(.mw-motion-paused) .mw-logo.is-ready .mw-logo__drops i {
		position: absolute;
		left: 50%;
		top: 60%;
		width: var(--s, 10px);
		height: var(--s, 10px);
		margin: calc(var(--s, 10px) / -2) 0 0 calc(var(--s, 10px) / -2);
		border-radius: 50%;
		background: radial-gradient(circle at 35% 30%, #ffffff 0%, #C6EAFB 40%, #5FBCEB 100%);
		box-shadow: 0 2px 6px rgba(16, 62, 111, 0.15);
		opacity: 0;
		animation: mw-logo-drop 0.75s cubic-bezier(0.15, 0.6, 0.3, 1) both;
		animation-delay: var(--dd, 0.5s);
	}

	/* flight vectors are sized for the ~330px desktop logo; --k scales them on phones */
	.mw-logo__drops i:nth-child(1) { --dx: -150px; --dy: -95px; --s: 9px; --dd: 0.5s; }
	.mw-logo__drops i:nth-child(2) { --dx: -95px; --dy: -140px; --s: 12px; --dd: 0.52s; }
	.mw-logo__drops i:nth-child(3) { --dx: 20px; --dy: -150px; --s: 8px; --dd: 0.5s; }
	.mw-logo__drops i:nth-child(4) { --dx: 110px; --dy: -125px; --s: 13px; --dd: 0.54s; }
	.mw-logo__drops i:nth-child(5) { --dx: 175px; --dy: -70px; --s: 9px; --dd: 0.51s; }
	.mw-logo__drops i:nth-child(6) { --dx: -195px; --dy: -40px; --s: 7px; --dd: 0.56s; }
	.mw-logo__drops i:nth-child(7) { --dx: 205px; --dy: -25px; --s: 7px; --dd: 0.55s; }

	@media (max-width: 600px) {
		.mw-logo__drops i { --k: 0.66; }
	}
}

/* ---- 3. Scroll-reveal: sections and cards surface as they come into view ----
   Hidden from first paint only when html.mw-io is set (JS + IO + motion OK).
   The 2.5s "safety" animation guarantees content appears even if the script
   never runs. */
@keyframes mw-safety {
	to {
		opacity: 1;
		transform: none;
	}
}

html.mw-io:not(.mw-motion-paused) .mw-canvas > .is-style-mk-section:not(.is-visible),
html.mw-io:not(.mw-motion-paused) .is-style-mk-media-card:not(.is-visible),
html.mw-io:not(.mw-motion-paused) .is-style-mk-section .is-style-mk-card:not(.is-visible) {
	opacity: 0;
	transform: translateY(26px);
}

/* Safety net: only while the theme script has not taken over (html.mw-ready). */
html.mw-io:not(.mw-ready) .mw-canvas > .is-style-mk-section:not(.is-visible),
html.mw-io:not(.mw-ready) .is-style-mk-media-card:not(.is-visible),
html.mw-io:not(.mw-ready) .is-style-mk-section .is-style-mk-card:not(.is-visible) {
	animation: mw-safety 0.01s 2.5s forwards;
}

html.mw-io .is-revealing {
	transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media print {
	html.mw-io .is-style-mk-section,
	html.mw-io .is-style-mk-media-card,
	html.mw-io .is-style-mk-card {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---- 4. Micro-interactions ---- */
@media (prefers-reduced-motion: no-preference) {
	html:not(.mw-motion-paused) body .is-style-mk-media-card:hover,
	html:not(.mw-motion-paused) body .is-style-mk-media-card:focus-within {
		transform: translateY(-4px);
		box-shadow: 0 20px 40px rgba(16, 62, 111, 0.16);
	}

	html:not(.mw-motion-paused) body .is-style-mk-media-card:hover > .wp-block-image img,
	html:not(.mw-motion-paused) body .is-style-mk-media-card:focus-within > .wp-block-image img {
		transform: scale(1.045);
	}

	@keyframes mw-drop {
		0%,
		100% {
			transform: translateY(0);
		}

		45% {
			transform: translateY(3px);
		}
	}

	html:not(.mw-motion-paused) body .wp-block-button__link[download]:hover::before,
	html:not(.mw-motion-paused) body .wp-block-button__link[download]:focus-visible::before {
		animation: mw-drop 0.5s ease;
	}
}

/* "Saved ✓" confirmation after a download click */
body .wp-block-button__link.is-saved {
	color: var(--mw-navy);
}

body .is-style-mk-link .wp-block-button__link.is-saved {
	color: #0F7B4D;
}

body .wp-block-button__link.is-saved::before {
	-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.4 2.3 8.5l1.4-1.4 2.5 2.5 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.4 2.3 8.5l1.4-1.4 2.5 2.5 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E");
	animation: none;
}

/* ---- 5. Sticky frosted jump-nav (desktop) ---- */
@media (min-width: 782px) {
	html.mw-js body .wp-block-buttons.is-style-mk-pillnav {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px);
		z-index: 30;
		background: rgba(255, 255, 255, 0.86);
		-webkit-backdrop-filter: blur(14px) saturate(1.2);
		backdrop-filter: blur(14px) saturate(1.2);
		transition: box-shadow 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
	}

	html.mw-js body .is-style-mk-pillnav.is-stuck {
		padding: 4px 8px;
		box-shadow: 0 12px 32px rgba(16, 62, 111, 0.2);
	}

	html.mw-js body .is-style-mk-pillnav.is-stuck .wp-block-button__link {
		min-height: 36px;
	}

	html.mw-js {
		scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 84px);
	}
}

/* ---- 6. Lightbox previews ---- */
.mw-zoom {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--mw-navy);
	box-shadow: 0 4px 12px rgba(16, 62, 111, 0.16);
	cursor: zoom-in;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.mw-zoom svg {
	width: 18px;
	height: 18px;
}

body .is-style-mk-media-card:hover .mw-zoom,
body .is-style-mk-media-card:focus-within .mw-zoom,
.mw-zoom:focus-visible {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.mw-zoom {
		opacity: 1;
		transform: none;
	}
}

.mw-zoom:hover {
	background: var(--mw-white);
}

body .is-style-mk-media-card > .wp-block-image img.mw-zoomable {
	cursor: zoom-in;
}

.mw-lightbox {
	border: 0;
	padding: 0;
	margin: auto;
	max-width: min(1100px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	background: transparent;
	color: var(--mw-ink);
	overflow: visible;
}

.mw-lightbox::backdrop {
	background: rgba(11, 46, 85, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.mw-lightbox__frame {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mw-white);
	border-radius: var(--mw-radius-lg);
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(6, 24, 46, 0.45);
}

.mw-lightbox__img {
	display: block;
	width: 100%;
	max-height: calc(100vh - 200px);
	object-fit: contain;
	background: var(--mw-card);
}

.mw-lightbox__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding: 16px 20px;
}

.mw-lightbox__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 280px;
}

.mw-lightbox__text strong {
	color: var(--mw-navy);
	font-size: 17px;
}

.mw-lightbox__caption {
	font-size: 14px;
	color: var(--mw-muted);
}

.mw-lightbox__download {
	flex: 0 0 auto;
}

.mw-lightbox__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--mw-navy);
	box-shadow: 0 4px 12px rgba(16, 62, 111, 0.2);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mw-lightbox__close svg {
	width: 18px;
	height: 18px;
}

.mw-lightbox__close:hover {
	background: var(--mw-white);
	color: var(--mw-red);
}

@media (prefers-reduced-motion: no-preference) {
	.mw-lightbox[open] .mw-lightbox__frame {
		animation: mw-pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	@keyframes mw-pop {
		from {
			opacity: 0;
			transform: translateY(16px) scale(0.97);
		}

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

body.mw-lightbox-open {
	overflow: hidden;
}

/* ---- 7. The dive-in: wave sweeps up while the Media Kit loads ---- */
.mw-dive {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	transform: translateY(102%);
	transition: transform 0.85s cubic-bezier(0.7, 0, 0.25, 1);
	background: linear-gradient(180deg, #A9D5F2 0%, #7DBFE8 100%);
	will-change: transform;
}

.mw-dive::before {
	content: "";
	position: absolute;
	left: -2%;
	right: -2%;
	top: -78px;
	height: 80px;
	background: #A9D5F2;
	-webkit-mask: url("assets/images/wave-top.svg") center bottom / 100% 100% no-repeat;
	mask: url("assets/images/wave-top.svg") center bottom / 100% 100% no-repeat;
	transform: scaleY(-1);
}

.mw-dive__text {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: var(--mw-white);
	font-weight: 900;
	font-size: clamp(22px, 3vw, 34px);
	letter-spacing: -0.01em;
	text-shadow: 0 6px 24px rgba(16, 62, 111, 0.35);
	opacity: 0;
	transition: opacity 0.4s ease 0.55s;
	white-space: nowrap;
}

.mw-dive.is-on {
	transform: translateY(0);
}

.mw-dive.is-on .mw-dive__text {
	opacity: 1;
}

/* ---- 8. "Updated …" line under the hero ---- */
body .mk-hero .mk-updated {
	margin-top: 8px;
	font-size: 13px;
	color: var(--mw-navy);
}

.mw-updated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.mw-updated__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #0F7B4D;
	box-shadow: 0 0 0 3px rgba(15, 123, 77, 0.18);
}