/*
Theme Name: My Version of Events
Theme URI: https://spashmedia.com
Author: SPASH Media
Description: Launch site for My Version of Events by Ntebaleng Matshabaphala. A lightweight block theme: every section is built from standard WordPress blocks, so text, images, links and buttons can be edited in the normal page editor. No page builder required.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-version-of-events
*/

:root {
	--mvoe-ink: var(--wp--preset--color--ink, #11100f);
	--mvoe-paper: var(--wp--preset--color--paper, #f7f4ef);
	--mvoe-pink: var(--wp--preset--color--pink, #ff1687);
	--mvoe-muted: var(--wp--preset--color--muted, #bdb5ac);
	--mvoe-serif: var(--wp--preset--font-family--serif, Georgia, serif);
	--mvoe-sans: var(--wp--preset--font-family--sans, Arial, sans-serif);
	--mvoe-gutter: 7%;
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }

/* Remove default stacking gaps between the page's big blocks. */
.wp-site-blocks > *,
.mvoe-main > *,
.mvoe-main .wp-block-post-content > .mvoe-section { margin-block: 0; }

/* ---------- Type ---------- */
h1, h2 {
	font: 400 clamp(44px, 5.5vw, 78px)/1.03 var(--mvoe-serif);
	letter-spacing: -.035em;
	margin: 0 0 24px;
}
h2 { font-size: clamp(38px, 4.8vw, 66px); }
h1 em, h2 em { color: var(--mvoe-pink); }
h3 { font: 400 24px/1.2 var(--mvoe-serif); margin: 0; }

.mvoe-label {
	color: var(--mvoe-pink);
	text-transform: uppercase;
	letter-spacing: .2em;
	font-size: 10px;
	font-weight: 700;
	margin: 0 0 25px !important;
}
.mvoe-soft { color: #6d645c; }
.mvoe-dark .mvoe-soft, .mvoe-trailer .mvoe-soft, .mvoe-order .mvoe-soft { color: #d2c8bf; }
.mvoe-big { font: 26px/1.4 var(--mvoe-serif); margin-top: 0; }
.mvoe-note { max-width: 260px; color: var(--mvoe-muted); font-size: 13px; margin: 0; }
.mvoe-light .mvoe-note { color: #6e655d; }
.mvoe-fineprint { font-size: 11px; color: #8b8178; margin-top: 18px; }

/* ---------- Buttons ---------- */
.wp-block-button .wp-block-button__link { transition: filter .2s, transform .2s; }
.wp-block-button .wp-block-button__link:hover { filter: brightness(1.12); }
.wp-block-button.is-style-teal .wp-block-button__link { background: var(--wp--preset--color--teal, #17677b); }
.wp-block-button.is-style-green .wp-block-button__link { background: var(--wp--preset--color--green, #247c50); }
.wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; border: 1px solid currentColor; }
.mvoe-underlink { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; margin-top: 22px; }
.mvoe-underlink a { color: #ccc3ba; }
.mvoe-underlink a:hover { color: var(--mvoe-pink); }

/* ---------- Header ---------- */
.mvoe-site-header {
	position: sticky; top: 0; z-index: 50;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* Blur sits on a pseudo-element so the mobile menu overlay can still cover the full screen. */
.mvoe-site-header::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: rgba(17, 16, 15, .95);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.admin-bar .mvoe-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.mvoe-header { min-height: 82px; padding: 0 6%; }
.mvoe-logo img { width: 105px; max-height: 60px; object-fit: contain; }
.mvoe-nav { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; gap: 28px; }
.mvoe-nav .wp-block-navigation-item__content:hover { color: var(--mvoe-pink); }
.mvoe-nav .nav-cta > .wp-block-navigation-item__content { background: var(--mvoe-pink); padding: 12px 15px; color: #fff; }
.mvoe-nav .nav-cta > .wp-block-navigation-item__content:hover { color: #fff; filter: brightness(1.1); }
.mvoe-nav .wp-block-navigation__responsive-container-open { color: var(--mvoe-paper); }
.mvoe-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 28px 24px; }
.mvoe-nav .is-menu-open .wp-block-navigation__container { gap: 22px; font-size: 13px; }
.mvoe-nav .is-menu-open .nav-cta > .wp-block-navigation-item__content { padding: 12px 15px !important; margin-top: 8px; }

/* ---------- Sections ---------- */
.mvoe-section { padding: 100px var(--mvoe-gutter); }
.mvoe-light { background: var(--mvoe-paper); color: #171412; }
.mvoe-dark { background: #191615; }
.mvoe-section-head { margin-bottom: 40px; gap: 30px; }
.mvoe-section-head h2 { margin-bottom: 0; }

/* Hero */
.wp-block-columns.mvoe-hero {
	padding: 0; gap: 0; min-height: 660px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mvoe-hero-copy { padding: 8vw 7vw; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.mvoe-hero-copy > * { margin-block: 0; }
.mvoe-hero-copy > h1 { margin-bottom: 24px; }
.mvoe-hero-copy > .mvoe-underlink { margin-top: 22px; }
.mvoe-subtitle { font-size: 19px; color: #d6d0c8; margin-bottom: 0 !important; }
.wp-block-quote.mvoe-quote {
	font: 18px/1.55 var(--mvoe-serif);
	border-left: 2px solid var(--mvoe-pink);
	padding-left: 18px; margin: 18px 0 28px !important;
}
.wp-block-quote.mvoe-quote p { margin: 0; }
.mvoe-hero-media { position: relative; min-height: 520px; overflow: hidden; background: #30251e; }
.mvoe-hero-art { position: absolute; inset: 0; margin: 0; }
.mvoe-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mvoe-hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.53), transparent 35%); pointer-events: none; }
.mvoe-hero-art figcaption {
	position: absolute; bottom: 24px; left: 25px; z-index: 1; margin: 0;
	font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: #fff;
}

/* Two-column layouts */
.wp-block-columns.mvoe-two-col,
.wp-block-columns.mvoe-trailer,
.wp-block-columns.mvoe-order,
.wp-block-columns.mvoe-contact { gap: 8vw; align-items: center; margin-bottom: 0; }
.mvoe-two-col { align-items: flex-start !important; }
.mvoe-trailer > .mvoe-narrow { flex: 0 0 38% !important; }

/* Movement flip cards */
.wp-block-columns.mvoe-cards { gap: 18px; margin: 0; }
.mvoe-cards > .wp-block-column { display: flex; }
.mvoe-flip { flex: 1; perspective: 1200px; cursor: pointer; min-height: 380px; margin: 0; outline-offset: 4px; }
.mvoe-flip:focus-visible { outline: 2px solid var(--mvoe-pink); }
.mvoe-flip-inner {
	display: grid; height: 100%; min-height: 380px; margin: 0;
	transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.mvoe-flip.is-flipped .mvoe-flip-inner { transform: rotateY(180deg); }
.mvoe-face {
	grid-area: 1 / 1; margin: 0 !important;
	display: flex; flex-direction: column; align-items: flex-start;
	padding: 27px; border: 1px solid #54453e;
	background: linear-gradient(145deg, #30251f, #11100f);
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.mvoe-face > * { margin: 0; }
.mvoe-kicker { font-size: 9px; letter-spacing: .17em; text-transform: uppercase; color: var(--mvoe-pink); font-weight: 600; }
.mvoe-face .mvoe-kicker::after { content: ''; display: block; height: 1px; width: 42px; background: var(--mvoe-pink); margin: 24px 0; }
.mvoe-face h3 { font-size: 38px; line-height: 1.1; }
.mvoe-question { font: 20px/1.4 var(--mvoe-serif); margin-top: 22px !important; }
.mvoe-hint { margin-top: auto !important; padding-top: 20px; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; color: var(--mvoe-pink); }
.mvoe-back { transform: rotateY(180deg); background: var(--mvoe-paper); color: #171412; border-color: var(--mvoe-pink); }
.mvoe-back h3 { font-size: 30px; }
.mvoe-back .mvoe-kicker::after { margin: 20px 0; }
.mvoe-essaylist { font: 15px/1.7 var(--mvoe-serif); margin-top: 16px !important; }

/* Trailer */
.mvoe-trailer { background: var(--mvoe-ink); }
.mvoe-video { padding: 10px; border: 1px solid #51423a; }
.mvoe-video > * { margin: 0; }
.mvoe-video .wp-block-embed, .mvoe-video .wp-block-video { margin: 0; }
.mvoe-video-art {
	min-height: 300px; display: grid; place-items: center; position: relative; margin: 0;
	background: radial-gradient(ellipse, #5b4334, #17100e 65%, #090909);
}
.mvoe-video-art::before {
	content: ''; position: absolute; width: 190px; height: 190px;
	border: 2px solid rgba(255, 22, 135, .47); border-radius: 50% 40% 55% 45%; transform: rotate(-24deg);
}
.mvoe-play {
	border: 1px solid #fff; border-radius: 50%; width: 58px; height: 58px;
	display: grid; place-items: center; padding-left: 3px; margin: 0 !important; font-size: 16px;
}
.mvoe-video-label { position: absolute; bottom: 15px; left: 15px; margin: 0 !important; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.mvoe-video-caption { margin: 12px 8px !important; color: var(--mvoe-muted); font-size: 13px; }

/* Essay releases */
.wp-block-columns.mvoe-essay-cards { gap: 18px; margin: 0; }
.mvoe-essay-card { background: #fffdfa; border: 1px solid #ded6ce; }
.mvoe-essay-card > * { margin: 0; }
.mvoe-essay-img {
	height: 180px; display: flex; align-items: flex-end; padding: 17px; position: relative;
	background: radial-gradient(circle at 60% 20%, rgba(255,22,135,.4), transparent 45%), linear-gradient(145deg, #443027, #111);
}
.mvoe-essay-img-2 { background: radial-gradient(circle at 30% 30%, rgba(255,22,135,.35), transparent 45%), linear-gradient(145deg, #5b594e, #121110); }
.mvoe-essay-img-3 { background: radial-gradient(circle at 75% 70%, rgba(255,22,135,.35), transparent 45%), linear-gradient(145deg, #332c27, #0d0c0b); }
.mvoe-essay-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.56), transparent); }
.mvoe-essay-img .mvoe-kicker { position: relative; z-index: 1; color: #fff; margin: 0; }
.mvoe-essay-copy { padding: 22px; }
.mvoe-essay-copy > * { margin: 0 0 12px; }
.mvoe-essay-copy p { font-size: 13px; color: #6d645c; }
.mvoe-essay-copy p:not(.mvoe-essay-link) { min-height: 58px; }
.mvoe-essay-link { font-size: 9px !important; letter-spacing: .1em; text-transform: uppercase; color: #171412 !important; display: inline-block; border-bottom: 1px solid var(--mvoe-pink); padding-bottom: 6px; margin-bottom: 0 !important; }
.mvoe-essay-link a:hover { color: var(--mvoe-pink); }

/* Order */
.wp-block-columns.mvoe-order { background: var(--wp--preset--color--umber, #211915); }
.mvoe-order-options { gap: 12px; margin-top: 25px; }
.mvoe-order-option > * { margin: 0; }
.mvoe-subtext { font-size: 10px; color: #c3b7ad; margin-top: 10px !important; max-width: 200px; }
.mvoe-thankyou { font: 17px/1.5 var(--mvoe-serif); margin-top: 28px; }
.mvoe-order-img { margin: 0; }
.mvoe-order-img img { width: 100%; height: 440px; object-fit: cover; border: 1px solid #554137; display: block; }

/* Contact */
.mvoe-contact-list > * { margin: 0; }
.mvoe-contact-link { border-bottom: 1px solid #d6cec5; }
.mvoe-contact-link a { display: block; padding: 17px 0; }
.mvoe-contact-link a:hover { color: var(--mvoe-pink); }

/* ---------- Footer ---------- */
.mvoe-site-footer { border-top: 1px solid rgba(255, 255, 255, .15); }
.mvoe-footer { padding: 25px var(--mvoe-gutter); gap: 28px; }
.mvoe-footer .mvoe-logo img { width: 90px; max-height: 55px; }
.mvoe-footer-title > * { margin: 0; }
.mvoe-footer-title p { font: 15px/1.4 var(--mvoe-serif); }
.mvoe-footer-title .mvoe-tagline { font-size: 12px; color: #aaa198; }
.mvoe-footer-link { margin: 0 0 0 auto !important; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.mvoe-footer-link a:hover { color: var(--mvoe-pink); }
.mvoe-copyright { margin: 0 !important; font-size: 10px; color: #aaa198; }

/* ---------- Plain pages (privacy policy etc.) ---------- */
.mvoe-page { padding: 80px 24px 100px; }
.mvoe-page h1 { font-size: clamp(38px, 5vw, 60px); }
.mvoe-page a { color: var(--mvoe-pink); }

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	html { scroll-padding-top: 80px; }
	.mvoe-header { min-height: 72px; padding: 0 20px; }
	.mvoe-logo img { width: 90px; }
	.mvoe-section { padding: 70px 24px; }
	.mvoe-hero-copy { padding: 55px 24px; }
	.mvoe-hero-media { min-height: 420px; }
	.mvoe-trailer > .mvoe-narrow { flex-basis: 100% !important; }
	.mvoe-cards > .wp-block-column, .mvoe-flip, .mvoe-flip-inner { min-height: 300px; }
	.mvoe-section-head { flex-direction: column; align-items: flex-start !important; }
	.wp-block-columns.mvoe-order > .wp-block-column:last-child { order: -1; }
	.mvoe-order-img img { height: 360px; }
	.mvoe-footer-link { margin-left: 0 !important; }
	.mvoe-copyright { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}