/*
Theme Name: Money Transfer Compare — Hello Child
Theme URI: https://wordpresslift.com/
Description: A lightweight Hello Elementor child theme for money-transfer comparison websites. Adds brand styling, custom page templates, and one-click starter pages that pair with the Money Transfer Compare plugin. Fully compatible with Elementor and the latest WordPress.
Author: WordPressLift
Author URI: https://wordpresslift.com/
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: mtc-hello-child
Tags: custom-colors, custom-menu, custom-logo, featured-images, translation-ready
*/

/* =====================================================================
   Design tokens — kept in sync with the Money Transfer Compare plugin
   ===================================================================== */
:root {
	--mtc-ink: #0f1b2d;
	--mtc-ink-soft: #51607a;
	--mtc-accent: #0ea371;
	--mtc-accent-dark: #0b7d57;
	--mtc-line: #e3e8ef;
	--mtc-bg-soft: #f5f7fa;
	--mtc-bg: #ffffff;
	--mtc-radius: 14px;
	--mtc-shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 10px 30px rgba(15, 27, 45, 0.06);
	--mtc-maxw: 1140px;
}

/* =====================================================================
   Base — only light touches; Elementor controls most layout
   ===================================================================== */
body {
	color: var(--mtc-ink);
	background: var(--mtc-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--mtc-accent-dark);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--mtc-ink);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Native + block buttons (so non-Elementor pages still look intentional) */
.button,
button.button,
input[type="submit"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mtc-accent);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 12px 22px;
	font-weight: 700;
	line-height: 1;
	transition: background 0.18s ease;
}
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background: var(--mtc-accent-dark);
	color: #fff;
	text-decoration: none;
}

/* =====================================================================
   Layout helpers used by the bundled page templates
   ===================================================================== */
.mtc-theme-wrap {
	max-width: var(--mtc-maxw);
	margin: 0 auto;
	padding: 0 20px;
}
.mtc-theme-section {
	padding: 56px 0;
}
.mtc-theme-narrow {
	max-width: 760px;
	margin: 0 auto;
}

/* Hero */
.mtc-theme-hero {
	background:
		radial-gradient(1200px 500px at 80% -10%, rgba(14, 163, 113, 0.14), transparent 60%),
		linear-gradient(180deg, #0f1b2d 0%, #15243b 100%);
	color: #fff;
	padding: 72px 0 64px;
	text-align: center;
}
.mtc-theme-hero h1 {
	color: #fff;
	font-size: clamp(30px, 5vw, 46px);
	margin: 0 0 14px;
}
.mtc-theme-hero p {
	color: #c7d2e2;
	font-size: clamp(16px, 2.2vw, 20px);
	max-width: 640px;
	margin: 0 auto 28px;
}
.mtc-theme-hero .mtc {
	text-align: left;
}

/* Eyebrow / pill */
.mtc-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mtc-accent);
	background: rgba(14, 163, 113, 0.12);
	padding: 6px 12px;
	border-radius: 30px;
	margin-bottom: 16px;
}
.mtc-theme-hero .mtc-eyebrow {
	color: #6ee7b7;
	background: rgba(14, 163, 113, 0.2);
}

/* Feature grid */
.mtc-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 22px;
	margin-top: 32px;
}
.mtc-feature {
	background: var(--mtc-bg);
	border: 1px solid var(--mtc-line);
	border-radius: var(--mtc-radius);
	padding: 26px;
	box-shadow: var(--mtc-shadow);
}
.mtc-feature h3 {
	margin: 6px 0 8px;
	font-size: 18px;
}
.mtc-feature p {
	margin: 0;
	color: var(--mtc-ink-soft);
	font-size: 15px;
}
.mtc-feature-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--mtc-ink);
	color: #fff;
	font-weight: 800;
}

/* Steps */
.mtc-steps {
	counter-reset: step;
	display: grid;
	gap: 18px;
	margin-top: 28px;
}
.mtc-step {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.mtc-step::before {
	counter-increment: step;
	content: counter(step);
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mtc-accent);
	color: #fff;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Section heading */
.mtc-section-head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 8px;
}
.mtc-section-head h2 {
	font-size: clamp(24px, 3.4vw, 34px);
	margin: 0 0 10px;
}
.mtc-section-head p {
	color: var(--mtc-ink-soft);
	margin: 0;
}
.mtc-alt {
	background: var(--mtc-bg-soft);
}

/* Trust badges */
.mtc-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	justify-content: center;
	align-items: center;
	margin-top: 18px;
	color: var(--mtc-ink-soft);
	font-size: 14px;
	font-weight: 600;
}
.mtc-trust span::before {
	content: "✓";
	color: var(--mtc-accent);
	font-weight: 800;
	margin-right: 6px;
}

/* Content readability for native pages */
.mtc-theme-content {
	font-size: 17px;
}
.mtc-theme-content h2 {
	margin-top: 1.6em;
}

/* =====================================================================
   Small refinements for the default (non-Elementor) header & footer
   ===================================================================== */
.site-header {
	border-bottom: 1px solid var(--mtc-line);
}
.site-footer {
	background: var(--mtc-ink);
	color: #c7d2e2;
}
.site-footer a {
	color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
	.mtc-theme-section {
		padding: 40px 0;
	}
	.mtc-theme-hero {
		padding: 52px 0 44px;
	}
}