/*
Theme Name: Meganet
Theme URI: https://meganet.one
Author: Meganet
Author URI: https://meganet.one
Description: A custom, single-page full-site-editing block theme for Meganet, a performance marketing company focused on customer acquisition at scale.
Version: 0.3.25
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meganet
Tags: full-site-editing, one-page, business, custom-colors, custom-logo, editor-style, wide-blocks
*/

/* Most styling lives in theme.json. This file covers what theme.json can't express. */

html {
	scroll-behavior: smooth;
}

/* Keep anchored sections clear of the sticky header. */
:where(section[id]) {
	scroll-margin-top: 96px;
}

/* Smooth interactive transitions. */
a,
.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-1px);
}

/* Eyebrow label utility (applied via the "is-style-eyebrow" hint in the editor or inline styles). */
.mn-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

/* Subtle card lift on the services / value blocks. */
.mn-card {
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mn-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px rgba(11, 23, 51, 0.45);
}

/* --- Service-card Lottie animations --- */

/* Neutral, restrained container holding each small Lottie icon. */
.mn-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin: 0 0 0.4rem;
	border-radius: 15px;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
}
.mn-ico lottie-player {
	width: 40px;
	height: 40px;
}

/* --- Subtle decorative hero animation (left side) --- */
.mn-hero {
	position: relative;
	overflow: hidden;
}
/* Keep the hero text above the decorative animation. */
.mn-hero > .wp-block-group {
	position: relative;
	z-index: 1;
}
.mn-hero-anim {
	position: absolute;
	top: 50%;
	/* Sit just to the left of the 900px centered text column (its half-width is
	   450px) so the animation never falls behind the headline; it slides into the
	   left gutter and clips at the viewport edge (hero has overflow:hidden). */
	right: calc(50% + 470px);
	transform: translateY(-50%);
	width: 480px;
	max-width: 42vw;
	opacity: 0.4;
	z-index: 0;
	pointer-events: none;
}
.mn-hero-anim lottie-player {
	width: 100%;
	height: auto;
}
/* Nudge the animation inward as the viewport narrows so it stays clear of the text. */
@media (max-width: 1600px) {
	.mn-hero-anim {
		right: calc(50% + 445px);
	}
}
@media (max-width: 1400px) {
	.mn-hero-anim {
		right: calc(50% + 386px);
	}
}
/* Hide on narrower screens so the centered hero stays clean. */
@media (max-width: 992px) {
	.mn-hero-anim {
		display: none;
	}
}

/* --- Hero formula tagline --- */
.mn-formula {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.01em;
	margin-top: 1.75rem;
}
.mn-formula span {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	margin: 0 0.45rem;
}

/* --- Channel logos row --- */
.mn-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2rem 2.75rem;
	margin-top: 1.5rem;
}
.mn-logos img {
	height: 26px;
	width: auto;
	opacity: 0.6;
	transition: opacity 0.18s ease;
}
.mn-logos img:hover {
	opacity: 1;
}
@media (max-width: 600px) {
	.mn-logos {
		gap: 1.5rem 2rem;
	}
	.mn-logos img {
		height: 22px;
	}
}

/* Strategic-partner logos: real color logos shown muted/grayscale, full color on hover. */
.mn-partners img {
	height: 52px;
	opacity: 1;
	transition: transform 0.2s ease;
}
.mn-partners img:hover {
	transform: scale(1.09);
}
@media (max-width: 600px) {
	.mn-partners img {
		height: 40px;
	}
}

/* Header logo lockup */
.mn-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.mn-logo-svg,
.mn-logo-img {
	height: 30px;
	width: auto;
	display: block;
}

/* --- Mobile navigation overlay --- */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
	background-color: #ffffff;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center !important;
	width: 100%;
	margin-top: 3rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	justify-content: center !important;
	align-items: center !important;
	gap: 1.75rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: auto;
	align-items: center !important;
	text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}

/* Collapse the header nav into the hamburger across the whole mobile/tablet
   range. WordPress only collapses the block navigation below 600px, which left
   the full menu (wrapping onto two lines) showing on tablets and large phones.
   These rules push the collapse breakpoint up to 900px. */
@media (max-width: 900px) {
	/* Show the hamburger toggle (core hides it at >= 600px). */
	.mn-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	/* Keep the inline menu hidden until the overlay is opened. */
	.mn-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
}

/* --- About / office image grid (placeholders) --- */
.mn-office-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 2.5rem;
}
/* Frame clips the image so it can zoom on hover without spilling out. */
.mn-office-frame {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 14px 30px -12px rgba(10, 28, 69, 0.45);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mn-office-frame:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 46px -14px rgba(10, 28, 69, 0.58);
}
.mn-office-img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	cursor: zoom-in;
	transition: transform 0.6s ease;
}
.mn-office-frame:hover .mn-office-img {
	transform: scale(1.06);
}

/* Image lightbox (office photos open large on click). */
.mn-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(6, 12, 28, 0.88);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	cursor: zoom-out;
}
.mn-lightbox.is-open {
	display: flex;
	animation: mn-lb-fade 0.28s ease both;
}
/* Image pops in with a subtle overshoot. */
.mn-lightbox.is-open .mn-lightbox__img {
	animation: mn-lb-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes mn-lb-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes mn-lb-pop {
	0% {
		opacity: 0;
		transform: scale(0.8) translateY(12px);
	}
	55% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}
/* Reverse-ish close animation. */
.mn-lightbox.is-closing {
	animation: mn-lb-fade 0.2s ease reverse both;
}
.mn-lightbox.is-closing .mn-lightbox__img {
	animation: mn-lb-out 0.2s ease both;
}
@keyframes mn-lb-out {
	to {
		opacity: 0;
		transform: scale(0.9);
	}
}
@media (prefers-reduced-motion: reduce) {
	.mn-lightbox.is-open,
	.mn-lightbox.is-open .mn-lightbox__img,
	.mn-lightbox.is-closing,
	.mn-lightbox.is-closing .mn-lightbox__img {
		animation: none;
	}
}
.mn-lightbox__img {
	max-width: 92vw;
	max-height: 88vh;
	border-radius: 10px;
	box-shadow: 0 24px 70px -12px rgba(0, 0, 0, 0.6);
	cursor: default;
}
.mn-lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 2rem;
	line-height: 1;
	color: #ffffff;
	background: transparent;
	border: 0;
	cursor: pointer;
	opacity: 0.85;
}
.mn-lightbox__close:hover {
	opacity: 1;
}

/* Keep "Performance. Delivered." on ONE line across phones: the tagline width
   is ~14.1x the font size, so size it fluidly to the viewport (fits ~320px up). */
@media (max-width: 600px) {
	.mn-hero h1 {
		font-size: calc(6vw - 1px);
		line-height: 1.15 !important;
		white-space: nowrap;
	}
}
@media (max-width: 700px) {
	.mn-office-grid {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}
}

/* --- Services grid (4 cards) --- */
.mn-services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}
.mn-service-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 2rem 1.6rem;
}
.mn-service-card h3 {
	font-size: var(--wp--preset--font-size--large);
	margin: 0.4rem 0 0;
}
.mn-service-card p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	margin: 0.6rem 0 0;
}
@media (max-width: 1000px) {
	.mn-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.mn-services-grid { grid-template-columns: 1fr; }
}

/* --- High-value verticals: icon + label product tiles --- */
.mn-vert-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 2.5rem;
}
.mn-vert-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 1.25rem 1.4rem;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.mn-vert-card .mn-ico {
	margin: 0;
	flex-shrink: 0;
	transition: background 0.28s ease, border-color 0.28s ease;
}
.mn-vert-card .mn-ico svg {
	transition: color 0.28s ease;
}
.mn-vert-card h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
	transition: color 0.22s ease;
}
/* On hover: lift, blue border, and the icon chip fills with the brand
   blue -> teal gradient (matching the logo mark). */
.mn-vert-card:hover {
	/* No translate here: lifting the card shrinks its hitbox and makes the
	   hover flicker on the bottom edge. Use a shadow instead (static hitbox). */
	transform: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 12px 30px -16px rgba(11, 23, 51, 0.32);
}
.mn-vert-card:hover .mn-ico {
	background: linear-gradient(135deg, #1668e0 0%, #0d9488 100%);
	border-color: transparent;
}
.mn-vert-card:hover .mn-ico svg {
	color: #ffffff;
}
.mn-vert-card:hover h3 {
	color: var(--wp--preset--color--primary);
}
.mn-ico svg {
	width: 26px;
	height: 26px;
	color: var(--wp--preset--color--primary);
}
@media (max-width: 900px) {
	.mn-vert-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.mn-vert-grid { grid-template-columns: 1fr; }
}

/* --- Why grid (5 cards) --- */
.mn-why-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem 2rem;
	margin-top: 2.5rem;
}
.mn-why-card {
	flex: 0 1 calc(50% - 1.05rem);
}
.mn-why-card h3 {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}
.mn-why-card p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	margin: 0.5rem 0 0;
}
@media (max-width: 900px) {
	.mn-why-card { flex-basis: calc(50% - 1rem); }
}
@media (max-width: 560px) {
	.mn-why-card { flex-basis: 100%; }
}

/* Constrained intro paragraph */
.mn-narrow {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* Contact detail cards (email + office) */
.mn-contact-cards {
	display: grid;
	gap: 0.85rem;
	margin-top: 1.5rem;
}
.mn-contact-cube {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 1.1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
a.mn-contact-cube:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 12px 30px -16px rgba(11, 23, 51, 0.32);
}
.mn-cube-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 12px;
	background: linear-gradient(135deg, #1668e0 0%, #0d9488 100%);
	color: #ffffff;
}
.mn-cube-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	line-height: 1.3;
	min-width: 0;
}
.mn-cube-label {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}
.mn-cube-value {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
}

/* Contact Form 7 layout. */
.wpcf7 .mn-form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem 1.25rem;
}
@media (max-width: 600px) {
	.wpcf7 .mn-form-grid {
		grid-template-columns: 1fr;
	}
}
.wpcf7 .mn-field {
	margin: 0 0 1rem;
}
.wpcf7 label {
	display: block;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}
.wpcf7 .mn-req {
	color: var(--wp--preset--color--primary);
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.7rem 0.85rem;
	font: inherit;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	box-sizing: border-box;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(27, 77, 209, 0.15);
}
.wpcf7 .wpcf7-submit {
	margin-top: 0.5rem;
	padding: 0.85rem 1.6rem;
	font: inherit;
	font-weight: 600;
	color: #ffffff;
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}
.wpcf7 .wpcf7-submit:hover {
	background: var(--wp--preset--color--primary-dark);
}
.wpcf7-response-output {
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

/* --- Responsive header --- */
.mn-header .wp-block-button__link {
	white-space: nowrap;
}

/* Header CTA as a blue outline (inset shadow keeps the size identical) so it
   doesn't compete with the hero's solid blue button; fills on hover. */
.mn-header-cta .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary);
}
.mn-header-cta .wp-block-button__link:hover,
.mn-header-cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
}

/* Within the hamburger range the standalone header CTA doesn't fit next to the
   logo + toggle, so hide it; the CTA is shown inside the overlay menu instead
   (see .mn-menu-cta below). */
@media (max-width: 900px) {
	.mn-header .wp-block-buttons {
		display: none;
	}
}
@media (max-width: 600px) {
	.mn-header {
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
	}
}

/* "Become a partner" CTA: hidden in the desktop inline nav (the standalone
   button covers it there); shown as a prominent button inside the mobile
   overlay menu. */
.mn-menu-cta {
	display: none !important;
}
@media (max-width: 900px) {
	.mn-header .mn-menu-cta {
		display: block !important;
		margin-top: 0.75rem;
	}
	.mn-menu-cta a {
		display: inline-block;
		background: var(--wp--preset--color--primary);
		color: #ffffff !important;
		padding: 0.75rem 1.8rem !important;
		border-radius: 10px;
		font-weight: 600;
	}
}

/* Slightly tighter hero rhythm on small screens. */
@media (max-width: 781px) {
	#top {
		padding-top: var(--wp--preset--spacing--60) !important;
	}
}