/* Moments by Skyy
   Colors and fonts are set in theme.json (Appearance > Editor > Styles).
   This file handles the layout details of each home page section. */

:root {
	--mws-band: clamp(56px, 9.5vw, 132px);
	--mws-ink-soft: #3f3e3a;
	--mws-line: #d9d3c9;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
body { -webkit-font-smoothing: antialiased; }

/* Sections sit flush against each other */
.wp-site-blocks > * { margin-block-start: 0; }
body .mws-main { margin-block: 0; padding-block: 0; }
body .mws-home > * { margin-block: 0; }

/* ---------- Shared pieces ---------- */
.mws-section { position: relative; padding-block: clamp(64px, 8vw, 112px); }
.mws-section .wp-block-columns { margin-block: 0; }
.mws-cols { gap: clamp(32px, 6vw, 96px); }
.mws-form *,
.mws-form *::before,
.mws-form *::after { box-sizing: border-box; }

.mws-label {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--burgundy);
}
body .mws-label--spaced { margin-block-start: 2.4rem; }
body .mws-tight { margin-block-start: 0.45rem; }

.mws-heading {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: clamp(40px, 4.7vw, 64px);
	line-height: 1.04;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}
body .mws-label + .mws-heading { margin-block-start: 0.9rem; }
.mws-heading--big { font-size: clamp(40px, 4.2vw, 58px); }
.mws-heading--title { text-transform: none; font-size: clamp(44px, 4.6vw, 62px); }

body .wp-block-separator.mws-rule {
	width: 64px;
	max-width: 64px;
	height: 0;
	margin-block: 1.4rem 1.5rem;
	margin-inline: 0;
	border: 0;
	border-top: 1.5px solid var(--wp--preset--color--burgundy);
	background: none;
	opacity: 1;
}
body .mws-rule + * { margin-block-start: 0; }

.mws-caps {
	font-weight: 500;
	font-size: 15px;
	line-height: 1.55;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.mws-small { font-size: 14px; }
.mws-small a { color: var(--wp--preset--color--burgundy); }

.mws-photo img,
.mws-trio img,
.mws-collage img { width: 100%; height: 100%; display: block; }

.mws-btn .wp-block-button__link { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mws-btn--small .wp-block-button__link { padding: 11px 22px; font-size: 12px; text-decoration: none; }
body .mws-buttons { margin-block-start: 1.8rem; }

/* Teal band down the right edge (About, Let's create, Contact) */
.mws-has-band::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--mws-band);
	background: var(--wp--preset--color--teal);
	pointer-events: none;
}
body .mws-has-band {
	padding-left: clamp(24px, 5vw, 80px);
	padding-right: calc(var(--mws-band) + var(--wp--style--root--padding-right, 24px));
}
body .mws-band-name {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--mws-band);
	margin: 0;
	padding-top: 56px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--wp--preset--font-family--script);
	font-size: clamp(34px, 3.8vw, 56px);
	line-height: 1;
	white-space: nowrap;
	color: var(--wp--preset--color--white);
}

/* ---------- Top bar on the home page ---------- */
.mws-header-overlay {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 20;
	padding-block: 22px;
}
body .mws-header-overlay .mws-buttons { margin-block-start: 0; }

/* ---------- Hero ---------- */
body .wp-block-cover.mws-hero .wp-block-cover__inner-container { width: 100%; }
body .mws-hero-inner { width: 100%; max-width: 1200px; margin-inline: auto; padding-block: 120px 80px; }
.mws-logo { width: fit-content; max-width: 100%; text-align: center; color: var(--wp--preset--color--white); }
body .mws-logo > * { margin-block: 0; }
.mws-logo-moments {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: clamp(60px, 9.8vw, 136px);
	line-height: 0.9;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--aqua);
}
body .mws-logo-row { gap: 0.5rem; align-items: flex-start; justify-content: center; padding-right: 8%; }
body .mws-logo-row > * { margin: 0; }
.mws-logo-by {
	padding-top: 0.5em;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(20px, 2.3vw, 32px);
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--aqua);
}
.mws-logo-skyy {
	font-family: var(--wp--preset--font-family--script);
	font-size: clamp(100px, 14vw, 200px);
	line-height: 0.85;
	color: var(--wp--preset--color--aqua);
}
body .mws-logo .mws-hero-tag {
	margin-block-start: 0.3rem;
	font-weight: 700;
	font-size: clamp(14px, 1.65vw, 23px);
	line-height: 1.45;
	letter-spacing: 0.2em;
	margin-right: -0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}
body .mws-logo .mws-hero-sub {
	margin-block-start: 0.4rem;
	font-weight: 400;
	font-size: clamp(13px, 1.4vw, 19px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}

/* ---------- About ---------- */
.mws-about { background: var(--wp--preset--color--cream); }
.mws-about p:not([class]) { color: var(--mws-ink-soft); }
.mws-about .mws-photo { margin: 0; box-shadow: 0 10px 30px rgba(42, 41, 37, 0.12); }

/* ---------- Timeless ---------- */
.mws-timeless { background: var(--wp--preset--color--slate); }
body .mws-collage { position: relative; gap: 14px; }
body .mws-collage > .wp-block-image { margin: 0; }
.mws-collage > .wp-block-image img { opacity: 0.42; }
body .mws-collage > .mws-arch {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 52%;
	min-height: 0;
	aspect-ratio: 9 / 15;
	margin: 0;
	padding: 0;
	border-radius: 50% 50% 0 0 / 26% 26% 0 0;
	overflow: hidden;
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: -2px;
	box-shadow: 0 18px 40px rgba(20, 40, 40, 0.25);
}

/* ---------- Packages ---------- */
.mws-packages { background: var(--wp--preset--color--teal); color: var(--wp--preset--color--white); text-align: center; }
.mws-packages .mws-label { color: var(--wp--preset--color--aqua); }
body .mws-packages .mws-heading { color: var(--wp--preset--color--white); margin-block-start: 0.6rem; }
body .mws-packages .wp-block-separator.mws-rule { border-top-color: var(--wp--preset--color--aqua); margin-inline: auto; }
.mws-packages-intro { font-size: 15px; line-height: 1.5; }
body .mws-package-cols { margin-block-start: 3.5rem; gap: clamp(24px, 4vw, 56px); }
.mws-pkg-name {
	margin: 0 0 1.1rem;
	font-family: var(--wp--preset--font-family--script);
	font-weight: 400;
	font-size: clamp(42px, 4.4vw, 60px);
	line-height: 1.15;
	text-transform: none;
	color: var(--wp--preset--color--aqua);
}
.mws-pkg-name--white { color: var(--wp--preset--color--white); }
body .mws-pkg-list { margin: 0; padding: 0; list-style: none; }
.mws-pkg-list li {
	margin: 0 0 0.55rem;
	font-size: 14.5px;
	line-height: 1.6;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* ---------- Add ons ---------- */
.mws-addons { background: var(--wp--preset--color--cream); }
body .mws-trio { gap: 10px; }
body .mws-trio > .wp-block-image { margin: 0; box-shadow: 6px 8px 18px rgba(0, 0, 0, 0.18); }
body .mws-addons-list { margin: 0; padding-left: 1.1em; }
.mws-addons-list li { margin-bottom: 0.5rem; font-size: 15px; line-height: 1.55; color: var(--mws-ink-soft); }
.mws-addons-list strong { font-weight: 700; color: var(--wp--preset--color--ink); }

/* ---------- The experience ---------- */
.mws-experience { background: var(--wp--preset--color--cream); padding-bottom: clamp(56px, 6vw, 88px); }
body .mws-steps { gap: 14px; }
body .mws-step {
	margin: 0;
	padding: 26px 16px 30px;
	text-align: center;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
}
body .mws-step > * { margin-block: 0; }
.mws-step-num { font-family: var(--wp--preset--font-family--serif); font-size: 34px; line-height: 1; }
body .mws-step .mws-step-title {
	margin-block-start: 0.35rem;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-size: 20px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}
body .mws-step .mws-step-text { margin-block-start: 0.8rem; font-size: 12.5px; line-height: 1.6; }

/* ---------- Wide photo ---------- */
body .mws-banner { margin: 0; }
body .mws-banner img { width: 100%; height: clamp(220px, 26vw, 420px); object-fit: cover; display: block; }

/* ---------- Let's create ---------- */
.mws-create { background: var(--wp--preset--color--cream); }
.mws-create .mws-photo { margin: 0; box-shadow: 0 10px 30px rgba(42, 41, 37, 0.14); }

/* ---------- Contact form ---------- */
.mws-contact { background: var(--wp--preset--color--cream); padding-top: clamp(32px, 4vw, 56px); }
.mws-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.mws-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mws-field--full { grid-column: 1 / -1; }
.mws-field > label,
.mws-field > legend { padding: 0; font-weight: 600; font-size: 13.5px; color: var(--wp--preset--color--ink); }
.mws-req { color: #b3362c; }
.mws-form input[type="text"],
.mws-form input[type="email"],
.mws-form input[type="tel"],
.mws-form input[type="date"],
.mws-form select,
.mws-form textarea {
	width: 100%;
	padding: 12px 18px;
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	background: #fdfcfa;
	border: 1px solid var(--mws-line);
	border-radius: 999px;
	-webkit-appearance: none;
	appearance: none;
}
.mws-form textarea { min-height: 120px; border-radius: 18px; resize: vertical; }
.mws-form select {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232a2925' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
}
.mws-form input:focus,
.mws-form select:focus,
.mws-form textarea:focus { outline: none; border-color: var(--wp--preset--color--teal); box-shadow: 0 0 0 3px rgba(59, 103, 104, 0.22); }
.mws-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.mws-choice { position: relative; }
.mws-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mws-choice span {
	display: inline-block;
	padding: 9px 20px;
	font-size: 14px;
	background: #fdfcfa;
	border: 1px solid var(--mws-line);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.mws-choice input:checked + span { background: var(--wp--preset--color--teal); border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--white); }
.mws-choice input:focus-visible + span { outline: 2px solid var(--wp--preset--color--burgundy); outline-offset: 2px; }
.mws-form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.mws-form__submit { border: 0; cursor: pointer; }
.mws-form__submit[disabled] { opacity: 0.65; cursor: progress; }
.mws-form__status { margin: 0; font-size: 14px; }
.mws-form__status.is-error { color: var(--wp--preset--color--burgundy); font-weight: 600; }
.mws-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mws-form-sent { padding: 32px 0; text-align: center; }
.mws-form-sent__title { margin: 0; font-family: var(--wp--preset--font-family--script); font-size: 72px; line-height: 1.1; color: var(--wp--preset--color--teal); }
.mws-form-sent p:last-child { margin-top: 10px; }

/* ---------- Footer ---------- */
.mws-footer { background: var(--wp--preset--color--teal); color: var(--wp--preset--color--white); padding-block: 56px 48px; }
body .mws-footer-cols { margin: 0; gap: 32px; }
.mws-footer-label { margin: 0; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
body .mws-social { margin-block-start: 14px; gap: 14px; font-size: 28px; }
body .mws-social .wp-social-link { color: var(--wp--preset--color--white); background: none; }
.mws-footer-center { text-align: center; }
body .mws-footer-center > * { margin-block: 0; }
.mws-footer-name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(36px, 3.6vw, 52px);
	line-height: 1.1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
body .wp-block-separator.mws-footer-rule {
	width: min(100%, 300px);
	max-width: 300px;
	height: 0;
	margin: 14px auto;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.8);
	background: none;
	opacity: 1;
}
.mws-footer-role { font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; }
body .mws-footer-top { margin-block-start: 20px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.mws-footer-top a { text-decoration: none; }
.mws-footer-top a:hover,
.mws-footer-top a:focus-visible { text-decoration: underline; }
.mws-footer-right { text-align: right; }
.mws-footer-copy { margin: 0; font-size: 14px; line-height: 1.5; }

/* ---------- Other pages ---------- */
.mws-header { background: var(--wp--preset--color--teal); padding-block: 16px; }
.mws-site-title { margin: 0; font-family: var(--wp--preset--font-family--script); font-size: 40px; line-height: 1; }
.mws-site-title a { color: var(--wp--preset--color--aqua); text-decoration: none; }
body .mws-page { padding-block: 64px 96px; }

/* ---------- Tablet and phone ---------- */
@media (max-width: 781px) {
	:root { --mws-band: 0px; }
	.mws-has-band::after,
	body .mws-band-name { display: none; }
	body .mws-has-band { padding-right: var(--wp--style--root--padding-right, 24px); }
	body .mws-hero-inner { padding-block: 110px 64px; }
	.mws-heading--big { font-size: min(9.4vw, 44px); }
	body .mws-has-band { padding-left: var(--wp--style--root--padding-left, 24px); }
	.mws-logo { margin-inline: auto; }
	.mws-about .mws-photo,
	.mws-create .mws-photo { max-width: 460px; }
	body .mws-collage > .mws-arch { width: 56%; }
	body .mws-package-cols { margin-block-start: 2.5rem; }
	body .mws-package-cols > .wp-block-column + .wp-block-column { margin-top: 1.5rem; }
	.mws-footer-cols,
	.mws-footer-right { text-align: center; }
	body .mws-social { justify-content: center; }
}

@media (max-width: 600px) {
	body .mws-logo-row { padding-right: 4%; }
	body .mws-trio { gap: 6px; }
	body .mws-collage { gap: 8px; }
	.mws-form { grid-template-columns: 1fr; }
	.mws-form__submit { width: 100%; }
}