/* ============================================================================
 * mgw-site.css — Phase 2 custom front-end renderer
 * Token-driven: every colour/radius/font comes from the :root vars that
 * DooThemeEngine::cssVariables() injects. Body classes (.mgw-layout-*,
 * .mgw-menu-*, .mgw-hero-*, .mgw-sec-*, .mgw-surface-*) switch structure.
 * Place at: global/css/mgw-site.css
 * ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}
body.mgw-site {
	margin: 0;
	font-family: var(--mgw-font);
	background: var(--site-bg);
	color: var(--text-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
.mgw-site h1,
.mgw-site h2,
.mgw-site h3,
.mgw-site h4 {
	font-family: var(--mgw-font-head);
	color: var(--text-h);
	line-height: 1.18;
	margin: 0 0 0.5em;
}
.mgw-site p {
	margin: 0 0 1em;
}
.mgw-site img {
	max-width: 100%;
	height: auto;
}
.mgw-site a {
	color: var(--accent);
	text-decoration: none;
}
.mgw-site a:hover {
	color: var(--accent-dark);
}
.mgw-wrap {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 22px;
}

/* buttons */
.mgw-btn {
	display: inline-block;
	background: var(--accent);
	color: var(--on-primary);
	padding: 13px 26px;
	border-radius: var(--r-md);
	font-weight: 600;
	border: 0;
	cursor: pointer;
	transition: all 0.2s;
	font-family: inherit;
	font-size: 15px;
}
.mgw-btn:hover {
	background: var(--accent-dark);
	color: var(--on-primary);
	transform: translateY(-1px);
}
.mgw-btn-ghost {
	background: transparent;
	color: var(--accent);
	border: 1.5px solid var(--accent);
}
.mgw-btn-ghost:hover {
	background: var(--accent);
	color: var(--on-primary);
}

/* ---------- card surface (glass vs flat handled by vars) ---------- */
.mgw-card {
	background: var(--bg-card);
	border: 1px solid var(--border-card);
	border-radius: var(--r-lg);
	padding: 24px;
}
.mgw-surface-aqua .mgw-card {
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}

/* ============================ NAV ============================ */
.mgw-nav {
	position: relative;
	z-index: 30;
}
.mgw-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 16px 0;
}
.mgw-logo img {
	max-height: 46px;
	display: block;
}
.mgw-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mgw-menu a {
	display: block;
	padding: 9px 16px;
	border-radius: var(--r-pill);
	color: var(--text-body);
	font-weight: 500;
	font-size: 15px;
	transition: all 0.18s;
}
.mgw-menu a:hover,
.mgw-menu li.current a {
	color: var(--accent);
	background: var(--accent-light);
}
.mgw-menu li.mgw-cta a {
	background: var(--accent);
	color: var(--on-primary);
}
.mgw-menu li.mgw-cta a:hover {
	background: var(--accent-dark);
	color: var(--on-primary);
}
.mgw-burger {
	display: none;
	background: none;
	border: 0;
	font-size: 24px;
	color: var(--text-h);
	cursor: pointer;
	line-height: 1;
}

/* menu: solid bar */
.mgw-menu-solid .mgw-nav {
	background: var(--bg-header);
	border-bottom: 1px solid var(--border-card);
}
.mgw-surface-aqua.mgw-menu-solid .mgw-nav {
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}
/* menu: transparent overlay over hero */
.mgw-menu-overlay .mgw-nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	border: 0;
}
.mgw-menu-overlay .mgw-menu a {
	color: var(--on-primary);
}
.mgw-menu-overlay .mgw-menu a:hover,
.mgw-menu-overlay .mgw-menu li.current a {
	background: rgba(255, 255, 255, 0.18);
	color: var(--on-primary);
}
.mgw-menu-overlay .mgw-burger {
	color: var(--on-primary);
}
/* menu: floating pill */
.mgw-menu-floating_pill .mgw-nav-inner {
	margin: 16px 0 0;
	padding: 10px 20px;
	background: var(--bg-header);
	border: 1px solid var(--border-card);
	border-radius: var(--r-pill);
}
.mgw-surface-aqua.mgw-menu-floating_pill .mgw-nav-inner {
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}
/* menu: centered logo */
.mgw-menu-centered_logo .mgw-nav-inner {
	flex-direction: column;
	gap: 8px;
	text-align: center;
}
.mgw-menu-centered_logo .mgw-menu {
	justify-content: center;
	flex-wrap: wrap;
}
/* menu: minimal */
.mgw-menu-minimal .mgw-nav {
	border-bottom: 1px solid var(--border-card);
}
.mgw-menu-minimal .mgw-menu a {
	font-size: 14px;
	padding: 8px 12px;
}

/* ============================ HERO ============================ */
/* hero gradients use the PRIMARY (--accent) -> SECONDARY (--accent-2) stops.
   --accent-2 is the chosen secondary brand colour (harmonised by the scheme); when
   no secondary is set the engine emits --accent-2 == --accent-dark, so these gradients
   render exactly as the previous single-colour version. */
.mgw-hero {
	position: relative;
	color: var(--on-primary);
	overflow: hidden;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.mgw-hero-inner {
	padding: 104px 0;
	max-width: 640px;
}
.mgw-hero h1 {
	font-size: clamp(30px, 5vw, 50px);
	margin: 0 0 16px;
	color: var(--on-primary);
}
.mgw-hero p {
	font-size: 19px;
	opacity: 0.93;
	margin: 0 0 28px;
}
.mgw-menu-overlay .mgw-hero-inner {
	padding-top: 150px;
}
/* hero treatments */
.mgw-hero-gradient_mesh .mgw-hero {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.mgw-hero-full_image .mgw-hero {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	background-size: cover;
	background-position: center;
}
.mgw-hero-centered_cta .mgw-hero {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.mgw-hero-centered_cta .mgw-hero-inner {
	margin: 0 auto;
	text-align: center;
	max-width: 720px;
}
.mgw-hero-aurora .mgw-hero {
	background: linear-gradient(120deg, var(--accent), var(--accent-2), var(--accent));
	background-size: 220% 220%;
	animation: mgwAurora 14s ease infinite;
}
@keyframes mgwAurora {
	0% {
		background-position: 0 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0 50%;
	}
}
.mgw-hero-split_media .mgw-hero {
	background: var(--bg-header);
}
.mgw-hero-split_media .mgw-hero-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 36px;
	align-items: center;
	max-width: 1160px;
}
.mgw-hero-split_media .mgw-hero,
.mgw-hero-split_media .mgw-hero h1 {
	color: var(--text-h);
}
.mgw-hero-split_media .mgw-hero p {
	color: var(--text-soft);
	opacity: 1;
}
.mgw-hero-split_media .mgw-hero-figure {
	height: 300px;
	border-radius: var(--r-lg);
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: var(--shadow-card);
}
@media (max-width: 760px) {
	.mgw-hero-split_media .mgw-hero-inner {
		grid-template-columns: 1fr;
	}
	.mgw-hero-split_media .mgw-hero-figure {
		display: none;
	}
}

/* ---------- slider hero (replaces revolution slider) ---------- */
.mgw-slider {
	position: relative;
	overflow: hidden;
	background: var(--accent);
}
.mgw-slide {
	display: none;
	position: relative;
}
.mgw-slide.on {
	display: block;
}
.mgw-slide img {
	width: 100%;
	display: block;
	max-height: 560px;
	object-fit: cover;
}
.mgw-slide-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 8%;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.05));
	color: #fff;
}
.mgw-slide-cap h2 {
	color: #fff;
	font-size: clamp(24px, 4vw, 42px);
	max-width: 620px;
}
.mgw-slide-cap p {
	max-width: 560px;
	font-size: 18px;
}
.mgw-slider-dots {
	position: absolute;
	bottom: 18px;
	left: 0;
	right: 0;
	display: flex;
	gap: 8px;
	justify-content: center;
}
.mgw-slider-dots b {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}
.mgw-slider-dots b.on {
	background: #fff;
}

/* ============================ SECTIONS ============================ */
.mgw-section {
	padding: 64px 0;
}
.mgw-content :is(h2, h3) {
	margin-top: 1.2em;
}
/* section style hooks (affect feature blocks / pricing density) */
.mgw-sec-bento .mgw-plans {
	grid-auto-rows: minmax(120px, auto);
}
.mgw-sec-list .mgw-plans {
	grid-template-columns: 1fr;
	gap: 14px;
}
.mgw-sec-columns .mgw-plans {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.mgw-sec-cards .mgw-plan {
	box-shadow: var(--shadow-card, 0 2px 14px rgba(18, 50, 110, 0.1));
}

/* ============================ INNER PAGE HEAD ============================ */
.mgw-pagehead {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: var(--on-primary);
	padding: 72px 0 60px;
	text-align: center;
}
.mgw-pagehead h1 {
	color: var(--on-primary);
	font-size: clamp(28px, 4vw, 42px);
	margin: 0 0 8px;
}
.mgw-pagehead p {
	opacity: 0.9;
	margin: 0;
	font-size: 18px;
}
.mgw-crumb {
	padding: 14px 0;
	font-size: 14px;
	color: var(--text-soft);
	border-bottom: 1px solid var(--border-card);
}
.mgw-crumb a {
	color: var(--text-soft);
}
.mgw-crumb a:hover {
	color: var(--accent);
}

/* ============================ TGW (test gateway widget) ============================ */
.mgw-tgw {
	padding: 52px 0;
}
.mgw-tgw-box {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	background: var(--bg-card);
	border: 1px solid var(--border-card);
	border-radius: var(--r-lg);
	padding: 34px 28px;
}
.mgw-surface-aqua .mgw-tgw-box {
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}
.mgw-tgw-row {
	display: flex;
	gap: 10px;
	max-width: 460px;
	margin: 18px auto 0;
}
.mgw-tgw-row input {
	flex: 1;
	padding: 12px 14px;
	border: 1px solid var(--border-card);
	border-radius: var(--r-md);
	background: var(--site-surface);
	color: var(--text-body);
	font-family: inherit;
	font-size: 15px;
}
.mgw-tgw-msg {
	margin-top: 14px;
	font-size: 14px;
}
.mgw-alert {
	padding: 10px 14px;
	border-radius: var(--r-md);
	font-size: 14px;
	margin: 0;
}
.mgw-alert-ok {
	background: rgba(16, 196, 105, 0.12);
	color: #0a8c52;
}
.mgw-alert-err {
	background: rgba(255, 91, 91, 0.12);
	color: #c62a2a;
}

/* ============================ CONTACT ============================ */
.mgw-contact {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 34px;
	padding: 56px 0;
}
.mgw-contact-info li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 16px;
	list-style: none;
}
.mgw-contact-info ul {
	padding: 0;
	margin: 0;
}
.mgw-field {
	margin-bottom: 14px;
}
.mgw-field label {
	display: block;
	font-size: 14px;
	color: var(--text-soft);
	margin-bottom: 6px;
}
.mgw-field input,
.mgw-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--border-card);
	border-radius: var(--r-md);
	background: var(--site-surface);
	color: var(--text-body);
	font-family: inherit;
	font-size: 15px;
}
.mgw-field input:focus,
.mgw-field textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-light);
}
@media (max-width: 760px) {
	.mgw-contact {
		grid-template-columns: 1fr;
	}
}

/* ============================ PRICING ============================ */
.mgw-plans {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin: 24px 0;
}
.mgw-plan {
	background: var(--bg-card);
	border: 1px solid var(--border-card);
	border-radius: var(--r-lg);
	padding: 26px;
	display: flex;
	flex-direction: column;
}
.mgw-surface-aqua .mgw-plan {
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}
.mgw-plan.featured {
	border: 2px solid var(--accent);
}
.mgw-plan-title {
	font-family: var(--mgw-font-head);
	font-size: 20px;
	color: var(--text-h);
	margin-bottom: 6px;
}
.mgw-plan-price {
	font-size: 34px;
	font-weight: 700;
	color: var(--accent);
	margin: 6px 0 14px;
}
.mgw-plan-price sup {
	font-size: 16px;
}
.mgw-plan-price small {
	font-size: 13px;
	color: var(--text-soft);
	font-weight: 400;
}
.mgw-plan ul.feat {
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
	flex: 1;
}
.mgw-plan ul.feat li {
	padding: 7px 0;
	border-bottom: 1px dashed var(--border-card);
	font-size: 14px;
	color: var(--text-body);
}
.mgw-rtblock {
	background: var(--accent-light);
	border-radius: var(--r-sm);
	padding: 10px 12px;
	margin-bottom: 10px;
	font-size: 13px;
}
.mgw-rtblock .rt-label {
	font-weight: 600;
	color: var(--accent-dark);
	margin-bottom: 4px;
}
.mgw-table {
	width: 100%;
	border-collapse: collapse;
	margin: 14px 0;
	font-size: 14px;
}
.mgw-table th,
.mgw-table td {
	padding: 11px 12px;
	border-bottom: 1px solid var(--border-card);
	text-align: left;
}
.mgw-table th {
	background: var(--accent-light);
	color: var(--accent-dark);
	font-family: var(--mgw-font-head);
}

/* ============================ FOOTER ============================ */
.mgw-footer {
	background: var(--bg-footer);
	border-top: 1px solid var(--border-card);
	padding: 34px 0;
	margin-top: 64px;
	color: var(--text-soft);
	font-size: 14px;
}
.mgw-surface-aqua .mgw-footer {
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}
.mgw-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.mgw-footer a {
	color: var(--text-soft);
}
.mgw-footer a:hover {
	color: var(--accent);
}

/* ============================ RESPONSIVE NAV ============================ */
@media (max-width: 820px) {
	.mgw-burger {
		display: block;
	}
	.mgw-menu {
		position: absolute;
		top: 100%;
		right: 22px;
		left: 22px;
		flex-direction: column;
		align-items: stretch;
		background: var(--bg-card);
		border: 1px solid var(--border-card);
		border-radius: var(--r-md);
		padding: 8px;
		display: none;
		box-shadow: var(--shadow-lg, 0 10px 40px rgba(18, 50, 110, 0.16));
	}
	.mgw-menu.open {
		display: flex;
	}
	.mgw-menu-overlay .mgw-menu a {
		color: var(--text-body);
	}
}

/* ============================================================================
 * PHASE 2 ADDITIONS — hero/menu contrast fixes, dark toggle, feature highlights
 * ========================================================================== */

/* --- hero CTA buttons: on the dark gradient heroes an accent-coloured button
   blends into the accent background. Invert to a light button there. The
   split_media hero is LIGHT, so it keeps the standard accent buttons. --- */
/* buttons must beat the generic `.mgw-site a` colour (0,1,1) — use a.mgw-btn (0,2,1).
   order: base -> hero -> split_media, so later rules win for matching elements. */
.mgw-site a.mgw-btn {
	background: var(--accent);
	color: var(--on-primary);
	border: 0;
}
.mgw-site a.mgw-btn:hover {
	background: var(--accent-dark);
	color: var(--on-primary);
}
.mgw-site a.mgw-btn-ghost {
	background: transparent;
	color: var(--accent);
	border: 1.5px solid var(--accent);
}
.mgw-site a.mgw-btn-ghost:hover {
	background: var(--accent);
	color: var(--on-primary);
}
/* dark gradient heroes: invert to a light button so it never vanishes into the accent bg */
.mgw-hero a.mgw-btn {
	background: var(--on-primary);
	color: var(--accent);
	border: 0;
}
.mgw-hero a.mgw-btn:hover {
	background: var(--on-primary);
	color: var(--accent);
	filter: brightness(0.92);
	transform: translateY(-1px);
}
.mgw-hero a.mgw-btn-ghost {
	background: transparent;
	color: var(--on-primary);
	border: 1.5px solid var(--on-primary);
}
.mgw-hero a.mgw-btn-ghost:hover {
	background: var(--on-primary);
	color: var(--accent);
}
/* split_media hero is a light surface: standard accent buttons */
.mgw-hero-split_media a.mgw-btn {
	background: var(--accent);
	color: var(--on-primary);
}
.mgw-hero-split_media a.mgw-btn:hover {
	background: var(--accent-dark);
	color: var(--on-primary);
}
.mgw-hero-split_media a.mgw-btn-ghost {
	background: transparent;
	color: var(--accent);
	border-color: var(--accent);
}
.mgw-hero-split_media a.mgw-btn-ghost:hover {
	background: var(--accent);
	color: var(--on-primary);
}

/* --- transparent overlay menu sits over the hero. Over the LIGHT split_media
   hero, white menu text is invisible — use dark menu text there. --- */
.mgw-hero-split_media.mgw-menu-overlay .mgw-menu a {
	color: var(--text-body);
}
.mgw-hero-split_media.mgw-menu-overlay .mgw-menu a:hover,
.mgw-hero-split_media.mgw-menu-overlay .mgw-menu li.current a {
	background: var(--accent-light);
	color: var(--accent);
}
.mgw-hero-split_media.mgw-menu-overlay .mgw-menu li.mgw-cta a {
	background: var(--accent);
	color: var(--on-primary);
}
.mgw-hero-split_media.mgw-menu-overlay .mgw-burger {
	color: var(--text-h);
}

/* --- dark / light toggle (footer) --- */
.mgw-footer-inner .mgw-foot-right {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.mgw-theme-toggle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--border-card);
	background: var(--bg-card);
	color: var(--text-body);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	padding: 0;
}
.mgw-theme-toggle:hover {
	color: var(--accent);
	border-color: var(--accent);
}
/* colour-mode lock: hide the light/dark switch when the builder forced one mode */
.mgw-appear-light .mgw-theme-toggle,
.mgw-appear-dark .mgw-theme-toggle {
	display: none;
}

/* --- feature highlights (home) — layout follows the active section style --- */
.mgw-features {
	padding: 56px 0;
}
.mgw-features-head {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 34px;
}
.mgw-features-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.mgw-feature {
	background: var(--bg-card);
	border: 1px solid var(--border-card);
	border-radius: var(--r-lg);
	padding: 24px;
}
.mgw-surface-aqua .mgw-feature {
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}
.mgw-feature__icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	background: var(--accent-light);
	margin-bottom: 14px;
}
.mgw-feature__title {
	font-family: var(--mgw-font-head);
	font-size: 17px;
	color: var(--text-h);
	margin: 0 0 6px;
}
.mgw-feature__text {
	font-size: 14px;
	color: var(--text-soft);
	margin: 0;
	line-height: 1.6;
}
.mgw-sec-list .mgw-features-grid {
	grid-template-columns: 1fr;
	gap: 12px;
}
.mgw-sec-list .mgw-feature {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 22px;
}
.mgw-sec-list .mgw-feature__icon {
	margin-bottom: 0;
	flex: 0 0 auto;
}
.mgw-sec-columns .mgw-features-grid {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.mgw-sec-bento .mgw-features-grid {
	grid-auto-rows: 1fr;
}
.mgw-sec-bento .mgw-feature:first-child {
	grid-column: span 2;
}
@media (max-width: 760px) {
	.mgw-sec-bento .mgw-feature:first-child {
		grid-column: auto;
	}
}

/* --- pricing: operator-rate browser + plan sections --- */
.mgw-plan-section-title {
	margin: 0 0 6px;
}
.mgw-rates-controls {
	margin: 16px 0 18px;
}
.mgw-rates-controls select {
	appearance: none;
	-webkit-appearance: none;
	padding: 11px 40px 11px 14px;
	border: 1px solid var(--border-card);
	border-radius: var(--r-md);
	background: var(--site-surface);
	color: var(--text-body);
	font-family: inherit;
	font-size: 15px;
	min-width: 280px;
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%), linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
	background-position:
		calc(100% - 20px) center,
		calc(100% - 15px) center;
	background-size:
		5px 5px,
		5px 5px;
	background-repeat: no-repeat;
}
.mgw-rates-controls select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-light);
}
.mgw-rate {
	font-weight: 700;
	color: var(--accent);
}
.mgw-rate-empty {
	padding: 34px;
	text-align: center;
	color: var(--text-soft);
	border: 1px dashed var(--border-card);
	border-radius: var(--r-md);
}
.mgw-plan ul.feat li strong {
	color: var(--text-h);
}