/*
 * CrownXpress dark mode.
 * Active when <html data-theme="dark"> (set by the toggle in the header).
 * The pages are built on colour variables, so switching those values switches every page.
 * The values are the 16 dark tokens from the CrownXpress design.
 */
html[data-theme="dark"] {
	--c-bg: #070f1f;
	--c-surface: #0d1a31;
	--c-surface-2: #10203c;
	--c-ink: #eef0f5;
	--c-muted: #a6b0c3;
	--c-line: #1f3050;
	--c-accent-text: #e8bc45;
	--c-link: #e8bc45;
	--c-band: #050c1a;
	--c-band-2: #0a1628;
	--c-band-line: #1a2a47;
	--c-header: rgba(7, 15, 31, 0.95);
	--c-field: #0a1629;
	--c-field-line: #2c3e60;
	--c-flag-bg: #2a2208;
	--c-flag-ink: #f0d68a;
	color-scheme: dark;
}

html[data-theme="dark"] body {
	background-color: var(--c-bg);
}

/* Plain links inside page text (e.g. "Call +27 ..." under the quote form). */
html[data-theme="dark"] .elementor a:not([class]) {
	color: var(--c-link);
}

/* Quote form (WPForms): fields, labels and hints. */
html[data-theme="dark"] .elementor-widget-wpforms {
	--wpforms-field-background-color: var(--c-field);
	--wpforms-field-menu-color: var(--c-field); /* open list of the searchable dropdowns */
	--wpforms-field-border-color: var(--c-field-line);
	--wpforms-field-border-color-spare: var(--c-field-line);
	--wpforms-field-text-color: var(--c-ink);
	--wpforms-label-color: var(--c-ink);
	--wpforms-label-sublabel-color: var(--c-muted);
}

/* Home uses the solid header (the other pages have the see-through header over their photos). */
html[data-theme="dark"] body:not(.ast-theme-transparent-header) .ast-primary-header-bar,
html[data-theme="dark"] body:not(.ast-theme-transparent-header) .main-header-bar {
	background-color: var(--c-header);
	border-bottom-color: var(--c-line);
}
html[data-theme="dark"] body:not(.ast-theme-transparent-header) .main-header-menu .menu-link,
html[data-theme="dark"] body:not(.ast-theme-transparent-header) .ast-header-break-point .menu-toggle,
html[data-theme="dark"] body:not(.ast-theme-transparent-header) .menu-toggle {
	color: var(--c-ink);
}
html[data-theme="dark"] body:not(.ast-theme-transparent-header) .menu-toggle {
	border-color: var(--c-line);
}
html[data-theme="dark"] body:not(.ast-theme-transparent-header) .menu-toggle .ast-mobile-svg,
html[data-theme="dark"] body:not(.ast-theme-transparent-header) .menu-toggle svg {
	fill: var(--c-ink);
}
html[data-theme="dark"] body:not(.ast-theme-transparent-header) .main-header-menu .menu-link:hover,
html[data-theme="dark"] body:not(.ast-theme-transparent-header) .main-header-menu .current-menu-item > .menu-link {
	color: var(--c-accent-text);
}

/* Footer: the design's deepest navy in dark mode. */
html[data-theme="dark"] .site-primary-footer-wrap,
html[data-theme="dark"] .site-below-footer-wrap {
	background-color: var(--c-band);
}
html[data-theme="dark"] .site-below-footer-wrap {
	border-top-color: var(--c-band-line);
}

/* Smooth colour change when the toggle is used. */
html.cx-theme-switching,
html.cx-theme-switching * {
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease !important;
}

/*
 * Contact page cards (light AND dark mode).
 * The gold hover itself is set in Elementor on the "card-contact" class.
 * Elementor free can't recolour the text inside a hovered card, so this rule turns the
 * label (PHONE, WHATSAPP...) and the small note dark while the card is gold.
 * Keep the class names card-contact, eyebrow-text and small, or this stops working.
 */
.card-contact .eyebrow-text,
.card-contact .small {
	transition: color 180ms;
}
.card-contact:is(:hover, :focus, :active) :is(.eyebrow-text, .small) {
	color: var(--c-accent-ink);
}