/* =====================================================================
   ARAZAS GLOBAL THEME OVERLAY
   Applies the mind.arazas.com / homepage design system across every page:
   deep dark background, amber accent, Plus Jakarta Sans, mono labels,
   gradient buttons, pill eyebrows, dark cards.
   Loaded LAST on each page so it wins the cascade.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
	--az-bg: #070A13;
	--az-bg-2: #0B1020;
	--az-panel: rgba(255, 255, 255, 0.035);
	--az-panel-2: rgba(255, 255, 255, 0.05);
	--az-panel-hover: rgba(255, 255, 255, 0.08);
	--az-border: rgba(255, 255, 255, 0.08);
	--az-border-strong: rgba(255, 255, 255, 0.16);
	--az-text: #F8FAFC;
	--az-text-soft: #CBD5E1;
	--az-muted: #94A3B8;
	--az-muted-2: #64748B;
	--az-amber: #FFB700;
	--az-amber-soft: #FFC83D;
	--az-amber-grad: linear-gradient(135deg, #FFC83D 0%, #E68A00 100%);
	--az-font: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--az-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Base ------------------------------------------------------------ */
body {
	background: var(--az-bg) !important;
	color: var(--az-text);
	font-family: var(--az-font) !important;
	-webkit-font-smoothing: antialiased;
}

/* Map the legacy dark-brand variables onto the new palette so any
   component still referencing them inherits the amber system. */
body.dark-brand {
	--db-bg: #070A13;
	--db-bg-soft: #0B1020;
	--db-bg-elev: #11162280;
	--db-bg-dark: #05070E;
	--db-bg-deep: #05070E;
	--db-text: #F8FAFC;
	--db-text-muted: #94A3B8;
	--db-text-dim: #64748B;
	--db-link: #FFB700;
	--db-link-hover: #FFC83D;
	--db-divider: rgba(255, 255, 255, 0.08);
	--db-border: rgba(255, 255, 255, 0.08);
	--db-border-strong: rgba(255, 255, 255, 0.16);
}

body,
main,
.products-shell,
.products-body,
[class$="-body"],
[class*="-shell"] {
	background-color: transparent;
}

.products-shell,
main {
	background: var(--az-bg);
}

/* ---- Typography ------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--az-font) !important;
	color: var(--az-text) !important;
	letter-spacing: -0.02em;
}

p, li, span, dd, dt, td, th, label, figcaption, blockquote {
	color: inherit;
}

a {
	color: var(--az-amber);
}
a:hover {
	color: var(--az-amber-soft);
}

/* Keep navbar / footer / button link colors managed by their own rules */
.ms-navbar a,
.footer-two a,
.btn,
[class*="-btn"],
[class*="__btn"],
[class*="-cta"] a {
	color: inherit;
}

/* ---- Hero (all variants: products-, about-, legal-, community-, etc) - */
[class$="-hero"],
[class*="-hero "],
.products-hero,
.legal-hero,
.community-hero {
	background:
		radial-gradient(120% 80% at 50% -10%, #141a2e 0%, #070A13 55%, #05070E 100%) !important;
	color: var(--az-text);
}

[class*="-hero"] h1,
[class*="-hero__title"] {
	color: var(--az-text) !important;
}

[class*="-hero__lead"],
[class*="-hero__sub"],
[class*="-hero"] p {
	color: var(--az-text-soft) !important;
}

/* Eyebrow ? amber mono pill */
[class*="-hero__eyebrow"],
[class*="__eyebrow"],
.products-hero__eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 7px 16px !important;
	border: 1px solid var(--az-border-strong) !important;
	border-radius: 999px !important;
	background: rgba(255, 183, 0, 0.07) !important;
	color: var(--az-amber) !important;
	font-family: var(--az-mono) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 1.6px !important;
	text-transform: uppercase !important;
}

/* ---- Section kickers / eyebrows -------------------------------------- */
[class*="__kicker"],
[class*="-kicker"],
[class*="__eyebrow"]:not([class*="-hero"]),
.divisions__eyebrow,
.category-title,
.products-section__kicker {
	color: var(--az-amber) !important;
	font-family: var(--az-mono) !important;
	text-transform: uppercase;
	letter-spacing: 1.2px;
}

.category-title,
[class*="-section"] h2,
.divisions__header h2 {
	color: var(--az-text) !important;
}

[class*="__sub"],
[class*="-section__sub"] {
	color: var(--az-muted) !important;
}

/* ---- Buttons --------------------------------------------------------- */
.products-hero__btn--primary,
.products-mid-cta__btn--accent,
.divisions__tab.is-active,
.btn-primary,
[class*="__btn--primary"],
[class*="-btn--accent"],
.ms-navbar .ms-signup-btn {
	background: var(--az-amber-grad) !important;
	color: #070A13 !important;
	border: 0 !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 28px -12px rgba(255, 183, 0, 0.6) !important;
	font-weight: 600 !important;
}
.products-hero__btn--primary:hover,
.products-mid-cta__btn--accent:hover,
.btn-primary:hover,
[class*="__btn--primary"]:hover,
[class*="-btn--accent"]:hover,
.ms-navbar .ms-signup-btn:hover {
	color: #070A13 !important;
	transform: translateY(-2px);
	box-shadow: 0 16px 38px -12px rgba(255, 183, 0, 0.75) !important;
}

.products-hero__btn--ghost,
.products-mid-cta__btn,
.divisions__panel-link,
[class*="__btn--ghost"],
[class*="__btn--secondary"] {
	background: rgba(255, 255, 255, 0.04) !important;
	color: var(--az-text) !important;
	border: 1px solid var(--az-border-strong) !important;
	border-radius: 12px !important;
}
.products-hero__btn--ghost:hover,
.products-mid-cta__btn:hover,
.divisions__panel-link:hover,
[class*="__btn--ghost"]:hover {
	border-color: var(--az-amber) !important;
	color: var(--az-amber) !important;
	background: rgba(255, 183, 0, 0.08) !important;
}

/* ---- Cards / tiles / panels ----------------------------------------- */
.product-tile,
.about-division-card,
.campus-tile,
.amenity,
.community-card,
.products-accordion,
.divisions__panel,
.divisions__controls,
[class$="-card"],
[class$="-tile"],
[class*="-card "],
[class*="-tile "] {
	background: var(--az-panel) !important;
	border: 1px solid var(--az-border) !important;
	border-radius: 16px !important;
	color: var(--az-text-soft) !important;
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.8) !important;
}
.product-tile:hover,
.about-division-card:hover,
.campus-tile:hover,
.amenity:hover,
.community-card:hover,
[class$="-card"]:hover,
[class$="-tile"]:hover {
	background: var(--az-panel-hover) !important;
	border-color: var(--az-border-strong) !important;
	transform: translateY(-4px);
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.85) !important;
}

.product-tile h3,
.about-division-card h3,
.campus-tile h3,
.community-card h3,
[class$="-card"] h3,
[class$="-tile"] h3 {
	color: var(--az-text) !important;
}
.product-tile p,
.about-division-card p,
.campus-tile p,
.community-card p,
[class$="-card"] p,
[class$="-tile"] p {
	color: var(--az-muted) !important;
}

/* Card icons ? amber */
[class*="-card-icon"],
[class*="-card__icon"],
[class*="__icon"] i,
.amenity__icon {
	color: var(--az-amber) !important;
}

.product-tile__cta,
.community-card-link,
[class*="__cta"] {
	color: var(--az-amber) !important;
}

/* ---- Legal pages ----------------------------------------------------- */
.legal-content,
.legal-sidebar,
.content-section {
	color: var(--az-text-soft) !important;
}
.legal-content h2,
.legal-content h3,
.content-section h2,
.content-section h3 {
	color: var(--az-text) !important;
}
.legal-sidebar a {
	color: var(--az-muted) !important;
}
.legal-sidebar a:hover {
	color: var(--az-amber) !important;
}

/* ---- Stats ----------------------------------------------------------- */
.products-stats__item,
[class*="-stats__item"] {
	background: var(--az-panel) !important;
	border-color: var(--az-border) !important;
}
.products-stats__value,
[class*="-stats__value"] {
	color: var(--az-amber) !important;
}
.products-stats__label,
[class*="-stats__label"] {
	color: var(--az-muted) !important;
}

/* ---- Mid CTA band ---------------------------------------------------- */
.products-mid-cta,
[class*="-mid-cta"] {
	background:
		radial-gradient(90% 120% at 50% 0%, rgba(255, 183, 0, 0.12) 0%, rgba(7, 10, 19, 0) 60%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)) !important;
	border: 1px solid var(--az-border-strong) !important;
}
.products-mid-cta h2 { color: var(--az-text) !important; }
.products-mid-cta p { color: var(--az-muted) !important; }

/* ---- Divisions tabs (products page) --------------------------------- */
.divisions__tab {
	background: var(--az-panel) !important;
	border: 1px solid var(--az-border) !important;
	color: var(--az-text-soft) !important;
	border-radius: 12px !important;
}
.divisions__tab:hover {
	border-color: var(--az-border-strong) !important;
	color: var(--az-text) !important;
}
.divisions__tab.is-active {
	color: #070A13 !important;
}
.divisions__tab.is-active .divisions__tab-meta {
	color: rgba(7, 10, 19, 0.75) !important;
}

/* ---- About prose ----------------------------------------------------- */
.about-prose p { color: var(--az-text-soft) !important; }
.about-prose strong { color: var(--az-text) !important; }
.about-prose a { color: var(--az-amber) !important; }
.about-visual__frame {
	border: 1px solid var(--az-border) !important;
	background: linear-gradient(145deg, #0B1020, #05070E) !important;
}
.about-visual__caption { color: var(--az-muted) !important; }

/* ---- Footer (ensure dark + amber hovers) ---------------------------- */
#footer.footer-two {
	background: #05070E !important;
	color: var(--az-muted) !important;
	border-top: 1px solid var(--az-border);
}
#footer .footer-links a,
#footer .site-info-menu a,
#footer .copyright a,
#footer .footer-social-link a,
#footer .footer-menu a {
	color: var(--az-text-soft) !important;
}
#footer .footer-links a:hover,
#footer .site-info-menu a:hover,
#footer .footer-social-link a:hover,
#footer .footer-menu a:hover {
	color: var(--az-amber) !important;
}

/* ---- Navbar (consistent dark glass + amber sign-up) ----------------- */
.ms-navbar {
	background: linear-gradient(180deg, rgba(7, 10, 19, 0.92), rgba(7, 10, 19, 0.6)) !important;
	border-bottom: 1px solid var(--az-border) !important;
	-webkit-backdrop-filter: saturate(160%) blur(18px);
	backdrop-filter: saturate(160%) blur(18px);
}
.ms-navbar .ms-navbar-menu a,
.ms-navbar .ms-login-btn { color: rgba(248, 250, 252, 0.9) !important; }
.ms-navbar .ms-navbar-menu a:hover { color: var(--az-amber) !important; }
.ms-navbar .ms-mobile-toggle span { background: #fff !important; }

/* ---- Stat bands (bespoke light bands across pages) ------------------ */
[class*="statband"],
[class*="stat-band"],
[class*="-stats"],
.stats,
.stat-grid {
	background: var(--az-panel) !important;
	border-color: var(--az-border) !important;
	color: var(--az-text) !important;
}
[class*="statband__value"],
[class*="stat__value"],
[class*="-stat__num"] {
	color: var(--az-text) !important;
}
[class*="statband__label"],
[class*="stat__label"] {
	color: var(--az-muted) !important;
}

/* ---- Accent words (gold/amber/highlight spans) ---------------------- */
.gold,
.accent,
.text-gold,
.text-amber,
.highlight,
[class*="--accent-text"],
[class*="__accent"] {
	color: var(--az-amber) !important;
	background: none !important;
	-webkit-text-fill-color: var(--az-amber) !important;
}

/* ---- Generic light surfaces ? dark panels --------------------------- */
.card,
.panel,
.box,
.tile,
.feature,
.feature-card,
section[style*="background: #fff"],
section[style*="background:#fff"],
[class*="-panel"],
[class*="-band"]:not([class*="navbar"]) {
	background-color: rgba(255, 255, 255, 0.035) !important;
	color: var(--az-text-soft);
}

/* ---- Forms / inputs (auth, contact) --------------------------------- */
input, textarea, select {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid var(--az-border-strong) !important;
	color: var(--az-text) !important;
}
input::placeholder, textarea::placeholder { color: var(--az-muted-2) !important; }
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--az-amber) !important;
	box-shadow: 0 0 0 3px rgba(255, 183, 0, 0.15) !important;
}

/* ---- Bespoke product microsites (DreamHub / DreamTech) -------------- */
body#page-dreamhub {
	--dh-bg: #070A13;
	--dh-bg-soft: #0B1020;
	--dh-bg-elev: #11162280;
	--dh-bg-dark: #05070E;
	--dh-bg-deep: #05070E;
	--dh-text: #F8FAFC;
	--dh-text-muted: #94A3B8;
	--dh-text-dim: #64748B;
	--dh-link: #FFB700;
	--dh-link-hover: #FFC83D;
	--dh-border: rgba(255, 255, 255, 0.08);
	--dh-divider: rgba(255, 255, 255, 0.08);
}
body#page-dreamtech {
	--dt-bg: #070A13;
	--dt-bg-soft: #0B1020;
	--dt-bg-elev: #11162280;
	--dt-bg-row: rgba(255, 255, 255, 0.025);
	--dt-bg-row-alt: rgba(255, 255, 255, 0.05);
	--dt-text: #F8FAFC;
	--dt-text-muted: #94A3B8;
	--dt-text-dim: #64748B;
	--dt-link: #FFB700;
	--dt-link-hover: #FFC83D;
}
/* Hardcoded blue gradients ? amber */
.dh-closer__btn--primary,
.dh-subnav__cta,
[class*="dh-"][class*="--primary"],
[class*="dt-"][class*="--primary"] {
	background: var(--az-amber-grad) !important;
	color: #070A13 !important;
}
.dh-hero__ctas a,
.dh-panel__ctas a,
.dh-closer__ctas a,
.dh-subnav__cta {
	color: var(--az-amber) !important;
}

/* ---- Neutralize light section backgrounds --------------------------- */
section,
[class$="-section"]:not([class*="-hero"]),
.support-section,
.section {
	background-color: transparent !important;
}

/* Accent gradient words in headings ? amber (support/help/landing) */
[class*="-hero"] h1 span,
[class*="hero"] h1 span,
.section-title span,
h1 span[style*="gradient"],
h2 span[style*="gradient"] {
	background: none !important;
	color: var(--az-amber) !important;
	-webkit-text-fill-color: var(--az-amber) !important;
}

/* Bespoke card text (support/help/landing card content) */
[class*="-card-subtitle"],
[class*="-card-content"] p,
[class*="-card-content"] span {
	color: var(--az-muted) !important;
}
[class*="-card-title"],
[class*="-card__title"],
[class*="-card-content"] [class*="-title"] {
	color: var(--az-text) !important;
}

/* Override common bespoke accent variables ? amber */
:root {
	--support-accent: #FFB700;
	--support-card-bg: rgba(255, 255, 255, 0.035);
	--support-text: #F8FAFC;
	--support-text-muted: #94A3B8;
	--primary-gradient: linear-gradient(135deg, #FFC83D 0%, #E68A00 100%);
	--help-primary: #FFB700;
	--help-primary-dark: #E68A00;
	--help-bg: #070A13;
	--help-sidebar-bg: #0B1020;
	--help-text: #F8FAFC;
	--help-text-muted: #94A3B8;
	--help-border: rgba(255, 255, 255, 0.08);
}

/* ---- Sitemap page ---------------------------------------------------- */
.sitemap-page,
.sitemap-container {
	background: transparent !important;
	color: var(--az-text-soft) !important;
}
.section-group {
	background: var(--az-panel) !important;
	border: 1px solid var(--az-border) !important;
	border-radius: 16px !important;
}
.sitemap-tab {
	background: var(--az-panel) !important;
	border: 1px solid var(--az-border) !important;
	color: var(--az-text-soft) !important;
}
.sitemap-tab:hover,
.sitemap-tab.active {
	background: rgba(255, 183, 0, 0.08) !important;
	border-color: var(--az-amber) !important;
	color: var(--az-amber) !important;
}
.section-links a {
	color: var(--az-text-soft) !important;
}
.section-links a:hover {
	color: var(--az-amber) !important;
}
.section-title {
	color: var(--az-text) !important;
}

/* ---- Page loader off (avoid stuck loaders on dark) ------------------ */
.page-loader { display: none !important; }
