/*
Theme Name:   Milliox Holdings (Astra Child)
Theme URI:    http://millioxholdings.site
Description:  Corporate child theme for Milliox Holdings Limited, built on Astra and Elementor.
Author:       Milliox Holdings Limited
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	--mx-navy: #0b1d36;
	--mx-navy-2: #12294a;
	--mx-gold: #c9a13b;
	--mx-gold-dark: #a8831f;
	--mx-ink: #1d2433;
	--mx-text: #5a6475;
	--mx-light: #f5f7fa;
	--mx-line: #e4e8ef;
	--mx-white: #ffffff;
	--mx-radius: 10px;
	--mx-shadow: 0 10px 30px rgba(11, 29, 54, 0.08);
	--mx-shadow-lg: 0 20px 45px rgba(11, 29, 54, 0.14);
	--mx-font-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mx-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
	font-family: var(--mx-font-body);
	color: var(--mx-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mx-font-head);
	color: var(--mx-ink);
}

::selection {
	background: var(--mx-gold);
	color: var(--mx-white);
}

/* ==========================================================================
   Header (Astra header builder)
   ========================================================================== */
#masthead {
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 1px 0 var(--mx-line);
	transition: box-shadow .3s ease;
}

.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead { top: 0; } }

body.mx-scrolled #masthead { box-shadow: 0 6px 24px rgba(11, 29, 54, .10); }

.ast-primary-header-bar {
	background: var(--mx-white);
	border-bottom: 0;
}

.site-header .custom-logo-link img { transition: width .3s ease; }

.main-header-menu .menu-link {
	font-family: var(--mx-font-head);
	font-weight: 500;
	font-size: 15px;
	color: var(--mx-ink);
	position: relative;
}

.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 1em;
	right: 1em;
	bottom: 18px;
	height: 2px;
	background: var(--mx-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}

.ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link::after,
.ast-builder-menu-1 .main-header-menu > .current-menu-item > .menu-link::after {
	transform: scaleX(1);
}

.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link {
	color: var(--mx-navy);
}

.ast-header-button-1 .ast-custom-button {
	font-family: var(--mx-font-head);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .3px;
	background: var(--mx-gold);
	color: var(--mx-white);
	border: 2px solid var(--mx-gold);
	border-radius: 6px;
	padding: 12px 24px;
	transition: all .3s ease;
}

.ast-header-button-1 .ast-custom-button:hover {
	background: var(--mx-navy);
	border-color: var(--mx-navy);
	color: var(--mx-white);
}

/* Mobile menu */
.ast-mobile-header-wrap .menu-toggle .ast-mobile-svg { fill: var(--mx-navy); }
.ast-builder-menu-mobile .main-navigation .menu-item > .menu-link { color: var(--mx-ink); }
.ast-builder-menu-mobile .main-navigation .current-menu-item > .menu-link { color: var(--mx-gold-dark); }

/* ==========================================================================
   Elementor helpers (applied via "CSS Classes" in Elementor > Advanced)
   ========================================================================== */

/* Small uppercase label above headings */
.mx-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mx-font-head);
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 2.5px !important;
	text-transform: uppercase;
}

.mx-eyebrow .elementor-heading-title::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--mx-gold);
	display: inline-block;
}

.mx-eyebrow.mx-center .elementor-heading-title::after {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--mx-gold);
	display: inline-block;
}

/* Cards */
.mx-card {
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.mx-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--mx-shadow-lg) !important;
	border-color: transparent !important;
}

.mx-card .elementor-icon {
	transition: background-color .35s ease, color .35s ease, fill .35s ease;
}

.mx-card:hover .elementor-icon {
	background-color: var(--mx-gold) !important;
	color: var(--mx-white) !important;
	fill: var(--mx-white) !important;
}

.mx-card:hover .elementor-icon svg { fill: var(--mx-white) !important; }

/* Gold accent bar on the top of a card */
.mx-card-accent { position: relative; overflow: hidden; }
.mx-card-accent::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 4px;
	background: var(--mx-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s ease;
	z-index: 2;
}
.mx-card-accent:hover::before { transform: scaleX(1); }

/* Image with offset gold frame */
.mx-framed-image { position: relative; }
.mx-framed-image .elementor-widget-container { position: relative; z-index: 1; }
.mx-framed-image::after {
	content: "";
	position: absolute;
	top: 24px;
	left: 24px;
	right: -24px;
	bottom: -24px;
	border: 3px solid var(--mx-gold);
	border-radius: var(--mx-radius);
	z-index: 0;
}
@media (max-width: 767px) {
	.mx-framed-image::after { top: 14px; left: 14px; right: -14px; bottom: -14px; }
}

/* Large step / strategy number */
.mx-number .elementor-heading-title {
	font-family: var(--mx-font-head);
	line-height: 1 !important;
	-webkit-text-stroke: 1.5px var(--mx-gold);
	color: transparent !important;
}

/* Icon lists with gold check marks */
.mx-checklist .elementor-icon-list-item { align-items: flex-start !important; }
.mx-checklist .elementor-icon-list-icon { margin-top: 4px; }

/* Buttons */
.elementor-button {
	transition: all .3s ease !important;
}
.mx-btn-outline .elementor-button:hover {
	background: var(--mx-white) !important;
	color: var(--mx-navy) !important;
}

/* Hero animation for headings */
.mx-hero-title .elementor-heading-title span.mx-gold { color: var(--mx-gold); }

/* Rich text inside strategy blocks */
.mx-prose p:last-child { margin-bottom: 0; }

/* Privacy / regular pages */
.page .entry-content > h3 { margin-top: 1.8em; }

/* ==========================================================================
   Contact form (shortcode [milliox_contact_form])
   ========================================================================== */
.mx-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.mx-form .mx-field { display: flex; flex-direction: column; }
.mx-form .mx-field-full { grid-column: 1 / -1; }
.mx-form label {
	font-family: var(--mx-font-head);
	font-size: 14px;
	font-weight: 500;
	color: var(--mx-ink);
	margin-bottom: 8px;
}
.mx-form label .req { color: var(--mx-gold-dark); }
.mx-form input[type="text"],
.mx-form input[type="email"],
.mx-form input[type="tel"],
.mx-form select,
.mx-form textarea {
	width: 100%;
	border: 1px solid var(--mx-line);
	background: var(--mx-light);
	border-radius: 8px;
	padding: 13px 16px;
	font-family: var(--mx-font-body);
	font-size: 15px;
	color: var(--mx-ink);
	transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.mx-form select { height: auto; line-height: 1.4; }
.mx-form textarea { min-height: 150px; resize: vertical; }
.mx-form input:focus,
.mx-form select:focus,
.mx-form textarea:focus {
	outline: none;
	border-color: var(--mx-gold);
	background: var(--mx-white);
	box-shadow: 0 0 0 4px rgba(201, 161, 59, .15);
}
.mx-form .mx-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }
.mx-form button[type="submit"] {
	font-family: var(--mx-font-head);
	font-weight: 600;
	font-size: 15px;
	background: var(--mx-navy);
	color: var(--mx-white);
	border: 0;
	border-radius: 6px;
	padding: 16px 34px;
	cursor: pointer;
	transition: background-color .3s ease, transform .3s ease;
	justify-self: start;
}
.mx-form button[type="submit"]:hover { background: var(--mx-gold); transform: translateY(-2px); }
.mx-form .mx-note { font-size: 13px; color: var(--mx-text); margin: 0; }
.mx-alert {
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 22px;
	font-size: 15px;
}
.mx-alert-success { background: #e9f7ef; color: #1e6b3a; border: 1px solid #bfe5cc; }
.mx-alert-error { background: #fdeeee; color: #8a1f1f; border: 1px solid #f3c4c4; }

@media (max-width: 767px) {
	.mx-form { grid-template-columns: 1fr; }
	.mx-form button[type="submit"] { width: 100%; }
}

/* ==========================================================================
   Footer (Elementor template "Site Footer")
   ========================================================================== */
.mx-site-footer a { transition: color .25s ease; }
.mx-footer-logo img { filter: brightness(0) invert(1); }
.mx-footer-links .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--mx-gold) !important; }
.mx-footer-bottom a { color: rgba(255,255,255,.75); }
.mx-footer-bottom a:hover { color: var(--mx-gold); }

/* Back-to-top button */
.mx-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--mx-gold);
	color: var(--mx-white);
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--mx-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all .3s ease;
	z-index: 998;
}
.mx-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.mx-to-top:hover { background: var(--mx-navy); }
.mx-to-top svg { width: 18px; height: 18px; fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}