/* ==========================================================================
   MBH Portfolio 2.4: dark mode, light/dark switch and premium polish.
   Light mode keeps the original look; everything dark lives under
   html[data-theme="dark"], set before first paint by inc/color-mode.php.
   ========================================================================== */

/* 1. Dark tokens -------------------------------------------------------- */
html[data-theme="dark"] {
	--surface: #17181d;
	--white: #0f1013;
	--soft: #121317;
	--tint: #141418;
	--text: #e6eaf3;
	--muted: #a29e96;
	--line: #2a2b31;
	--line-2: #1d1e24;
	--line-3: #34353c;
	--text-2: #cfcdc8;
	--text-3: #b5b1a9;
	--hero-ink: #eef1f8;
	--ph: #2e3036;
	--ph-warm: #2a2c38;
	--navy: #0a0b0d;
	--navy-2: #17181e;
	--accent: #ff8a4c;
	--accent-2: #ffa45c;
	--accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
	--accent-soft-2: color-mix(in srgb, var(--accent) 26%, var(--surface));
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
	--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -16px rgba(0, 0, 0, .6);
	--shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 34px 70px -30px rgba(0, 0, 0, .75);
	color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--white); color: var(--text); }

/* Elementor global colours (kits synced from the theme) follow the mode too. */
html[data-theme="dark"] [class*="elementor-kit-"] {
	--e-global-color-text: #cfcdc8;
	--e-global-color-secondary: #e6eaf3;
	--e-global-color-primary: #e6eaf3;
}
html[data-theme="dark"] .elementor-widget-text-editor,
html[data-theme="dark"] .elementor-widget-heading .elementor-heading-title { color: inherit; }

/* 2. Component patches for colours that are fixed in light mode ---------- */
html[data-theme="dark"] .site-header.is-scrolled { background: rgba(15,16,19, .78); box-shadow: 0 1px 0 var(--line); }
html[data-theme="dark"] .mobile-menu { background: rgba(15,16,19, .98); }
html[data-theme="dark"] .mbar { background: rgba(15,16,19, .92); border-color: var(--line); }
html[data-theme="dark"] .form__status.is-ok { background: rgba(34, 197, 94, .12); color: #86efac; border-color: rgba(34, 197, 94, .3); }
html[data-theme="dark"] .form__status.is-error { background: rgba(239, 68, 68, .12); color: #fca5a5; border-color: rgba(239, 68, 68, .3); }
html[data-theme="dark"] .field.is-invalid input, html[data-theme="dark"] .field.is-invalid textarea { background: rgba(239, 68, 68, .08); }
html[data-theme="dark"] .channel--whatsapp .channel__icon { background: rgba(37, 211, 102, .14); }
html[data-theme="dark"] .greview__text p, html[data-theme="dark"] .t-card blockquote p, html[data-theme="dark"] .prose.entry-content { color: var(--text-2); }
html[data-theme="dark"] .field input::placeholder, html[data-theme="dark"] .field textarea::placeholder { color: #7d7f86; }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { color: var(--text); }
html[data-theme="dark"] .grid-lines { background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); }
html[data-theme="dark"] .codecard { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -30px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .scroll-cue { border-color: #3c3d44; }
html[data-theme="dark"] .wa-link, html[data-theme="dark"] .btn--wa-soft { background: rgba(37, 211, 102, .1); border-color: rgba(37, 211, 102, .28); color: #86efac; }
html[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(.94); }
html[data-theme="dark"] .logo img, html[data-theme="dark"] .custom-logo { filter: none; }
html[data-theme="dark"] ::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); color: #fff; }
html[data-theme="dark"] .sec--dark { --bg: #060a16; }
/* Hero stats, illustrations, primary buttons. */
html[data-theme="dark"] .stats li { background: rgba(23,24,29, .78); }
html[data-theme="dark"] .illus .i-bg { fill: color-mix(in srgb, var(--accent) 10%, #121318); }
html[data-theme="dark"] .illus .i-stroke { stroke: #34353c; }
html[data-theme="dark"] .illus .i-dot { fill: #3c3d44; }
html[data-theme="dark"] .illus .i-ink { fill: #0a0b0d; }
html[data-theme="dark"] .illus .i-mute { fill: #3c3d44; }
html[data-theme="dark"] .illus .i-mute-l { fill: #2c2d33; }
html[data-theme="dark"] .illus .i-line-stroke { stroke: #2c2d33; }
/* Buttons keep the deeper brand blue so white text stays readable (contrast above 4.5:1). */
html[data-theme="dark"] .btn--gold { --btn-bg: linear-gradient(135deg, #e8501c 0%, #ff6a2b 100%); }
html[data-theme="dark"] .mbh-premium .site-header .btn--gold { box-shadow: 0 10px 24px -12px rgba(232,80,28, .8); }
/* White illustration panels drawn in SVG markup. */
html[data-theme="dark"] .illus [fill="#fff"], html[data-theme="dark"] .illus [fill="#ffffff"] { fill: var(--surface); }

/* Smooth switch (only while switching, never on page load). */
html.mode-switching, html.mode-switching *, html.mode-switching *::before, html.mode-switching *::after {
	transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important;
}

/* Print always light. */
@media print {
	html[data-theme="dark"] { --surface: #fff; --white: #fff; --text: #000; --muted: #333; --line: #ddd; --text-2: #222; --hero-ink: #111; }
}

/* 3. The switch --------------------------------------------------------- */
.mode-toggle {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: border-color .2s, color .2s, transform .2s var(--ease);
	flex: none;
}
.mode-toggle:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.mode-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mode-toggle svg { grid-area: 1 / 1; transition: transform .45s var(--ease), opacity .3s; }
.mode-toggle__moon { opacity: 0; transform: rotate(-60deg) scale(.6); }
html[data-theme="dark"] .mode-toggle__sun { opacity: 0; transform: rotate(60deg) scale(.6); }
html[data-theme="dark"] .mode-toggle__moon { opacity: 1; transform: none; }
.mode-toggle--inline { vertical-align: middle; }
@media (max-width: 782px) { .mode-toggle { width: 42px; height: 42px; } }

/* 4. Premium polish (both modes) ---------------------------------------- */
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 1001; pointer-events: none; }
.admin-bar .read-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .read-progress { top: 46px; } }
.read-progress span { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

.mbh-premium .sec-title, .mbh-premium .display, .mbh-premium h1, .mbh-premium h2 { text-wrap: balance; }
.mbh-premium .sec-text, .mbh-premium .lead, .mbh-premium .card p { text-wrap: pretty; }

/* Glass header that sharpens on scroll. */
.mbh-premium .site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(13, 14, 18, .35); }

/* Cards: soft gradient ring on hover. */
.mbh-premium .card { isolation: isolate; }
.mbh-premium .card::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent-2) 55%, transparent) 45%, transparent 75%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .4s var(--ease);
	pointer-events: none;
	z-index: 1;
}
.mbh-premium .card:hover::after, .mbh-premium .card:focus-within::after { opacity: 1; }

/* Buttons: crisper press feedback. */
.mbh-premium .btn:active { transform: translateY(1px) scale(.99); }

/* Free tools grid: centre a lonely last card. */
@media (min-width: 981px) {
	.tools-grid.grid--3 > :last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* Hero: a quiet accent glow under the code card. */
.mbh-premium .codecard { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .45), 0 18px 40px -20px rgba(0, 0, 0, .35), 0 60px 140px -50px color-mix(in srgb, var(--accent) 70%, transparent); }
html[data-theme="dark"] .mbh-premium .codecard { box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 80px -30px rgba(0, 0, 0, .8), 0 60px 150px -50px color-mix(in srgb, var(--accent) 60%, transparent); }

@media (prefers-reduced-motion: reduce) {
	.mode-toggle, .mode-toggle svg, .mbh-premium .card::after { transition: none; }
	.read-progress { display: none; }
}