/*
Theme Name: Moon Impact
Theme URI: https://moonimpact.co
Author: Moon Impact
Author URI: https://moonimpact.co
Description: Full website theme — duplicate of moonimpact.co (cinema homepage, services, portfolio, about, contact, legal). Use as a staging/migration copy without changing the live static site.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.8
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: moonimpact
Tags: custom-menu, one-column, dark, full-width-template
*/

/* Keep the cinema homepage edge-to-edge, including on hosts that inject a
   content width or body spacing. */
html,
body.home {
	width: 100%;
	max-width: none;
}

body.home {
	margin: 0;
	padding: 0 !important;
}

body.home > .space-scroll-wrapper,
body.home > .home-apps-page,
body.home > .home-contact-page {
	width: 100%;
	max-width: none;
}

/* Normalise popular form-plugin output inside the existing contact card. */
.mi-plugin-contact-form,
.mi-plugin-contact-form form,
.mi-plugin-contact-form .wpcf7,
.mi-plugin-contact-form .wpforms-container,
.mi-plugin-contact-form .gform_wrapper {
	width: 100%;
	max-width: none;
}

.mi-plugin-contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.mi-plugin-contact-form select,
.mi-plugin-contact-form textarea {
	width: 100%;
}

/* Contact Form 7 and other form plugins share the designed contact-card grid
   on both the homepage and standalone Contact page. */
.mi-contact-card__form .mi-plugin-contact-form form,
.home-contact-page .mi-plugin-contact-form form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-items: start;
	margin: 0;
}

.mi-plugin-contact-form p,
.mi-plugin-contact-form label,
.mi-plugin-contact-form .wpcf7-form-control-wrap,
.mi-plugin-contact-form .wpforms-field,
.mi-plugin-contact-form .gfield {
	display: block;
	width: 100%;
	margin: 0;
}

.mi-plugin-contact-form form > p:nth-of-type(n + 3),
.mi-plugin-contact-form .wpforms-field-container,
.mi-plugin-contact-form .wpforms-submit-container,
.mi-plugin-contact-form .gform-body,
.mi-plugin-contact-form .gform_footer,
.mi-plugin-contact-form .wpcf7-response-output {
	grid-column: 1 / -1;
}

.mi-plugin-contact-form label,
.mi-plugin-contact-form .wpforms-field-label,
.mi-plugin-contact-form .gfield_label {
	color: rgba(255, 255, 255, 0.82);
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-transform: none;
}

.mi-plugin-contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.mi-plugin-contact-form select,
.mi-plugin-contact-form textarea {
	display: block;
	min-height: 50px;
	margin-top: 8px;
	padding: 11px 14px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(8, 8, 12, 0.72);
	color: #fff;
	font: inherit;
}

.mi-plugin-contact-form textarea {
	min-height: 130px;
	resize: vertical;
}

.mi-plugin-contact-form input[type="submit"],
.mi-plugin-contact-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50px;
	padding: 0 28px;
	border: 2px solid #fff;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.contact-section .mi-contact-card__form .mi-plugin-contact-form,
.contact-section .mi-contact-card__form .wpcf7 {
	width: 100%;
	margin: 0;
}

.mi-plugin-contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #ffc9a8;
	font-size: 12px;
	line-height: 1.4;
}

.mi-plugin-contact-form input[type="submit"]:hover,
.mi-plugin-contact-form button[type="submit"]:hover {
	border-color: #ff6a00;
	color: #ff6a00;
	box-shadow: 0 16px 48px rgba(255, 106, 0, 0.32);
}

.mi-plugin-contact-form .wpcf7-spinner {
	margin: 10px 0 0 12px;
	vertical-align: middle;
}

.mi-plugin-contact-form .wpcf7-response-output,
.mi-plugin-contact-form .wpforms-confirmation-container,
.mi-plugin-contact-form .validation_error,
.mi-plugin-contact-form .gform_validation_errors {
	margin: 12px 0 0;
	color: #fff;
}

@media (max-width: 680px) {
	.mi-contact-card__form .mi-plugin-contact-form form,
	.home-contact-page .mi-plugin-contact-form form {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.mi-plugin-contact-form form > p {
		grid-column: 1 / -1;
	}
}

/* Standalone Contact page: keep the animated background and grid bounded to
   the same centered box as the contact card. The homepage remains full width. */
.inner-page-shell .contact-section.contact-section--inner-page {
	position: relative;
	width: min(1100px, 100%);
	max-width: 1100px;
	margin-right: auto;
	margin-left: auto;
	height: auto;
	min-height: 0;
	overflow: visible;
	isolation: isolate;
}

.inner-page-shell .contact-section.contact-section--inner-page .contact-section-inner {
	width: 100%;
	max-width: 1100px;
	min-height: 0;
	margin: 0 auto;
	padding: 0;
}

.inner-page-shell .contact-section.contact-section--inner-page .mi-contact-card {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.inner-page-shell .contact-section.contact-section--inner-page .contact-section-shader,
.inner-page-shell .contact-section.contact-section--inner-page .contact-section-grid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Customizer-controlled header logo sizing. The inner-page stylesheet used
   width:100%, which let the SVG's intrinsic width dominate on mobile. */
.site-header .brand {
	min-width: 0;
	max-width: min(var(--mi-logo-desktop-width, 170px), calc(100vw - 170px));
}

.site-header .brand img {
	display: block;
	width: var(--mi-logo-desktop-width, 170px) !important;
	max-width: 100%;
	height: auto !important;
}

.site-header .brand__picture {
	display: block;
	width: 100%;
}

/* Keep the desktop navigation and its Services panel within the viewport on
   every inner page, regardless of body/page padding. */
@media (min-width: 1061px) {
	.inner-page-body .site-header {
		left: max(14px, env(safe-area-inset-left, 0px));
		right: max(14px, env(safe-area-inset-right, 0px));
		width: auto;
		max-width: calc(100vw - 28px);
		margin: 0;
		grid-template-columns: minmax(140px, 1fr) minmax(0, max-content) minmax(100px, 1fr);
	}

	.inner-page-body .site-header .main-nav {
		min-width: 0;
		max-width: 100%;
		justify-self: center;
	}

	.inner-page-body .site-header .main-nav__list {
		flex-wrap: nowrap;
		gap: clamp(12px, 1.8vw, 30px);
	}

	.inner-page-body .site-header .main-nav__list > li > a {
		white-space: nowrap;
	}

	.inner-page-body .site-header .main-nav__list > li.menu-item-has-children > .sub-menu {
		left: 50%;
		right: auto;
		width: min(920px, calc(100vw - 56px));
		max-width: calc(100vw - 56px);
		transform: translateX(-50%);
		grid-template-columns: minmax(210px, 250px) repeat(2, minmax(0, 1fr));
		grid-auto-flow: row;
		justify-content: stretch;
		justify-items: stretch;
		gap: 10px;
		padding: 22px;
		white-space: normal;
	}

	.inner-page-body .site-header .mega-menu__intro {
		grid-column: auto;
		grid-row: span 3;
		display: flex;
		flex-direction: column;
		gap: 14px;
		min-width: 0;
		padding: 18px 18px 16px;
		border-right: 1px solid rgba(255, 255, 255, 0.08);
		border-bottom: 0;
		white-space: normal;
	}

	.inner-page-body .site-header .mega-menu__lead {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.inner-page-body .site-header .mega-menu__item {
		min-width: 0;
	}

	.inner-page-body .site-header .mega-menu__link {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		gap: 6px 12px;
		align-items: start;
		width: 100%;
		min-width: 0;
		min-height: 100%;
		padding: 16px 16px 14px;
		text-align: left;
		white-space: normal;
	}

	.inner-page-body .site-header .mega-menu__link-title {
		grid-column: 1;
		grid-row: 1;
		display: block;
		min-width: 0;
		color: #fff;
		font-size: 0.76rem;
		font-weight: 700;
		line-height: 1.3;
		white-space: normal;
	}

	.inner-page-body .site-header .mega-menu__link-desc {
		grid-column: 1;
		grid-row: 2;
		display: block;
		min-width: 0;
		color: rgba(255, 255, 255, 0.62);
		font-size: 0.74rem;
		font-weight: 400;
		letter-spacing: 0.01em;
		line-height: 1.45;
		text-transform: none;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.inner-page-body .site-header .mega-menu__link-arrow {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
	}
}

@media (max-width: 1060px) {
	.site-header .brand {
		max-width: min(var(--mi-logo-mobile-width, 120px), calc(100vw - 150px));
	}

	.site-header .brand img {
		width: var(--mi-logo-mobile-width, 120px) !important;
	}
}

/* Full-width, borderless inner pages. These rules are deliberately scoped to
   inner-page-body so the homepage presentation is not changed. */
.inner-page-body {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 !important;
	overflow-x: hidden;
}

.inner-page-body .inner-page-shell {
	width: 100%;
	max-width: none;
	margin: 0;
	padding-right: 0;
	padding-left: 0;
}

.inner-page-body .inner-page-shell:not(:has(.page-shell--motion)) {
	padding-top: 110px;
}

.inner-page-body .inner-page-shell:has(.page-shell--motion) {
	padding: 0;
}

.inner-page-body .page-shell,
.inner-page-body .legal-page,
.inner-page-body .legal-page-hero,
.inner-page-body .app-story,
.inner-page-body .app-story-intro,
.inner-page-body .app-flow,
.inner-page-body .app-flow-inner,
.inner-page-body .site-footer,
.inner-page-body .site-footer__inner,
.inner-page-body .home-chrome-footer {
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
	box-sizing: border-box;
}

.inner-page-body .page-shell {
	padding: 0;
	overflow-x: hidden;
}

.inner-page-body .page-hero,
.inner-page-body .page-section,
.inner-page-body .page-band,
.inner-page-body .page-cta,
.inner-page-body .app-story,
.inner-page-body .mi-circular-gallery-section,
.inner-page-body .legal-page,
.inner-page-body .legal-page-hero {
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
	padding-right: clamp(20px, 5vw, 80px);
	padding-left: clamp(20px, 5vw, 80px);
	box-sizing: border-box;
}

.inner-page-body .page-hero,
.inner-page-body .page-section,
.inner-page-body .page-band,
.inner-page-body .page-cta,
.inner-page-body .service-grid,
.inner-page-body .service-card,
.inner-page-body .page-directory,
.inner-page-body .page-directory a,
.inner-page-body .faq-accordion,
.inner-page-body .faq-accordion__item,
.inner-page-body .faq-accordion__panel,
.inner-page-body .app-flow-inner,
.inner-page-body .legal-page,
.inner-page-body .legal-page-hero,
.inner-page-body .legal-panel,
.inner-page-body .page-visual {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.inner-page-body .page-band,
.inner-page-body .page-cta,
.inner-page-body .service-grid,
.inner-page-body .service-card,
.inner-page-body .page-directory,
.inner-page-body .faq-accordion,
.inner-page-body .faq-accordion__item,
.inner-page-body .faq-accordion__panel,
.inner-page-body .app-flow-inner,
.inner-page-body .legal-panel {
	background: transparent !important;
	backdrop-filter: none !important;
}

.inner-page-body .page-band,
.inner-page-body .page-cta,
.inner-page-body .page-visual {
	clip-path: none !important;
}

.inner-page-body .service-grid,
.inner-page-body .page-directory {
	display: grid;
	width: 100%;
	max-width: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
}

.inner-page-body .service-card,
.inner-page-body .page-directory > * {
	min-width: 0;
}

.inner-page-body img,
.inner-page-body video,
.inner-page-body iframe,
.inner-page-body svg {
	max-width: 100%;
}

.inner-page-body iframe,
.inner-page-body video {
	height: auto;
}

/* The Contact page keeps one intentional card, sized to the form, while the
   page and footer themselves remain fluid. */
.inner-page-body .contact-section.contact-section--inner-page {
	padding-right: clamp(16px, 4vw, 48px);
	padding-left: clamp(16px, 4vw, 48px);
	box-sizing: border-box;
}

.inner-page-body .contact-section.contact-section--inner-page .mi-contact-card,
.inner-page-body .contact-section.contact-section--inner-page .mi-contact-card__form,
.inner-page-body .contact-section.contact-section--inner-page .mi-plugin-contact-form,
.inner-page-body .contact-section.contact-section--inner-page .wpcf7,
.inner-page-body .contact-section.contact-section--inner-page form {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 1060px) {
	.inner-page-body .page-hero,
	.inner-page-body .page-band--split,
	.inner-page-body .page-cta,
	.inner-page-body .app-flow-layout {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.inner-page-body .page-hero {
		min-height: auto;
		padding-top: clamp(40px, 8vw, 72px);
		align-items: start;
	}

	.inner-page-body .page-visual {
		width: 100%;
		min-height: clamp(300px, 60vw, 520px);
	}

	.inner-page-body .service-grid,
	.inner-page-body .page-directory {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.inner-page-body .inner-page-shell:not(:has(.page-shell--motion)) {
		padding-top: 92px;
	}

	.inner-page-body .page-hero,
	.inner-page-body .page-section,
	.inner-page-body .page-band,
	.inner-page-body .page-cta,
	.inner-page-body .app-story,
	.inner-page-body .mi-circular-gallery-section,
	.inner-page-body .legal-page,
	.inner-page-body .legal-page-hero {
		padding-right: 18px;
		padding-left: 18px;
	}

	.inner-page-body .service-grid,
	.inner-page-body .page-directory {
		grid-template-columns: minmax(0, 1fr);
	}

	.inner-page-body .page-hero h1,
	.inner-page-body .page-section h2,
	.inner-page-body .page-cta h2,
	.inner-page-body .service-card,
	.inner-page-body .faq-accordion {
		overflow-wrap: anywhere;
	}

	.inner-page-body .page-visual {
		min-height: 280px;
	}

	.inner-page-body .app-flow-inner {
		padding-right: 0;
		padding-left: 0;
	}

	.inner-page-body .contact-section.contact-section--inner-page {
		padding-right: 12px;
		padding-left: 12px;
	}
}