/**
 * Theme Name:   Hello Elementor Child
 * Theme URI:    https://bradgandel.com/
 * Description:  Child theme of Hello Elementor for the Brad Gandel site. Holds MLS/IDX presentation overrides so plugin and parent-theme updates never overwrite site-specific design.
 * Author:       DEVMA Agency
 * Author URI:   https://devmaagency.com/
 * Template:     hello-elementor
 * Version:      1.0.0
 * Text Domain:  hello-elementor-child
 * License:      GPL-2.0-or-later
 */

/*
 * Brand tokens.
 *
 * The IDX plugin reads these custom properties, so restyling every listing
 * card, search form and compliance block is a matter of changing the values
 * here rather than editing plugin templates.
 */
:root {
	--bg-teal: #0f4d4a;
	--bg-teal-dark: #0b3a38;
	--bg-green: #17a67f;
	/* Same green, darkened to reach WCAG AA as small text on white. */
	--bg-green-text: #0e7a5c;
	--bg-green-dark: #128a68;
	--bg-ink: #12232e;
	--bg-muted: #5b6472;
	--bg-line: #e4e7ec;
	--bg-surface: #ffffff;
	--bg-surface-alt: #f7f9fa;
}

/*
 * Map the brand tokens onto the plugin's own variables. Set on :root as well,
 * because some IDX widgets render outside a .flexmls-spark wrapper and would
 * otherwise fall back to the plugin's built-in colours.
 */
:root,
.flexmls-spark,
.bg-idx {
	/* The AA shade: the plugin fills buttons with it under white text. */
	--spark-accent: var(--bg-green-text);
	--spark-accent-text: var(--bg-green-text);
	/* Same hover the rest of the site uses, so IDX links do not feel foreign. */
	--spark-accent-hover: var(--bg-teal);
	--spark-text: var(--bg-ink);
	--spark-muted: var(--bg-muted);
	--spark-border: var(--bg-line);
	--spark-surface: var(--bg-surface);
	--spark-surface-alt: var(--bg-surface-alt);
	--spark-radius: 8px;
}

/*
 * Site-wide link colour.
 *
 * Hello Elementor leaves the base `a` colour at WordPress's default #cc3366,
 * a magenta that belongs to no part of this brand. Most links never show it
 * because Elementor styles them individually, but anything not styled by hand
 * inherits it — the keyboard skip link does, and so will any link in content
 * added later.
 *
 * Elementor's own colours are more specific and are left untouched; this only
 * replaces the fallback.
 */
a {
	color: var(--bg-green-text);
}

a:hover,
a:focus,
a:active {
	color: var(--bg-teal);
}

/*
 * Site-wide button fallback.
 *
 * Hello Elementor's reset also gives every bare <button>, [type=button] and
 * [type=submit] a magenta border and text, and a solid magenta fill on hover
 * and focus. Anything that does not restyle all three states itself (a plugin
 * form, a widget that styles only the resting state) flashes pink. These rules
 * use the reset's own selectors, so they replace only its fallback colours and
 * every component that styles its buttons still wins.
 */
[type="button"],
[type="submit"],
button {
	border-color: var(--bg-green);
	color: var(--bg-green-text);
}

[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button:focus,
button:hover {
	background-color: var(--bg-teal);
	border-color: var(--bg-teal);
	color: #fff;
}

/*
 * Brand green at WCAG AA contrast.
 *
 * Elementor's global "Secondary" green (#16a487) reads at only 3.1:1 as small
 * text on white, and white button labels on it are 3.1:1 too; AA needs 4.5:1.
 * On dark sections it is 6:1, which is why the global itself is left alone.
 *
 * Instead the variable is redefined where it is used: light sections and every
 * button fill get the deeper shade (5.3:1), and anything inside a container
 * marked `bg-dark` (Advanced > CSS Classes in Elementor: dark colours and
 * photo backgrounds) or inside the footer keeps the bright one. A section
 * given a dark background later needs that class too.
 */
.elementor-widget {
	--e-global-color-secondary: var(--bg-green-text);
}

.bg-dark .elementor-widget,
[data-elementor-type="footer"] .elementor-widget {
	--e-global-color-secondary: #16a487;
}

.elementor-widget .elementor-button,
.elementor-widget .e-n-tab-title {
	--e-global-color-secondary: var(--bg-green-text);
}

/*
 * Links in running text (Elementor's Text Editor widget) are underlined, as
 * the brand green alone barely stands out from the words around them.
 */
.elementor-widget-text-editor a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* The skip link is the one place the default was actually visible. */
.skip-link,
.skip-link:focus {
	background: var(--bg-surface);
	color: var(--bg-green-text);
}

/* A visible focus ring everywhere, not just inside the IDX components. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--bg-green);
	outline-offset: 2px;
}

/*
 * Header menu on laptop screens.
 *
 * The Mega Menu sits in a column that narrows with the window, and its eight
 * top-level items stop fitting on one line below about 1400px, so "Contact"
 * wraps under the rest. Tightening the space around each item keeps them on
 * one line down to the tablet breakpoint, where the mobile menu takes over.
 */
@media (min-width: 1025px) and (max-width: 1399px) {
	body .elementor-widget-n-menu {
		--n-menu-title-padding: 0.5rem 0.55rem;
	}
}

@media (min-width: 1025px) and (max-width: 1179px) {
	body .elementor-widget-n-menu {
		--n-menu-title-padding: 0.5rem 0.3rem;
	}
}

/*
 * Icon-box titles used as labels ("phone", "250+", the mega-menu cards) are
 * divs rather than h3s, so the outline holds only real headings. Hello
 * Elementor's reset gave the h3 its top margin and line height; the div
 * keeps both.
 */
div.elementor-icon-box-title,
div.elementor-image-box-title {
	margin-block-start: 0.5rem;
	line-height: 1.2;
}

/*
 * Form placeholders.
 *
 * Elementor draws placeholders in the field's text colour at 60% opacity,
 * which lands just under AA contrast and reads almost like a typed value.
 * A fixed mid-grey (4.8:1 on white) keeps the hint readable and clearly
 * lighter than what the visitor enters.
 */
.elementor-form .elementor-field-group .elementor-field-textual::placeholder {
	color: #6b7280;
	opacity: 1;
}

/*
 * Required fields are marked by Elementor (Form Fields → Required Mark)
 * rather than typed into each label, so the lead emails read "Full Name:"
 * instead of "Full Name *:". The mark keeps the label's colour.
 */
.elementor-form .elementor-mark-required .elementor-field-label::after {
	color: inherit;
}

/*
 * Page-to-page fade.
 *
 * Moving between pages cross-fades instead of flashing white, in browsers
 * with cross-document view transitions (Chrome, Edge, Safari 18.2+); others
 * navigate as before. Off for visitors who ask for less motion. The IDX
 * results reuse the same fade when they page.
 */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.2s;
}