/*
Theme Name:   Cool & Heat (Hello Elementor Child)
Theme URI:    https://canadacoolandheat.com/
Description:  Child theme for canadacoolandheat.com. Holds the dynamic colour palette, performance tweaks and site-level structured data, so none of it is lost when Hello Elementor updates. Layout stays in Elementor — no Pro licence required.
Author:       Ben
Template:     hello-elementor
Version:      1.0.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  coolheat
*/

/*
 * No colours are hard-coded here.
 *
 * inc/palette.php resolves the palette — Customizer override, then Elementor's
 * Global Colors, then a default — and prints it as custom properties in the
 * head. The values below are only last-resort fallbacks for the moment before
 * that runs, so nothing renders unstyled.
 */

:root {
	--ch-brand: #0b5ea8;
	--ch-brand-dark: #084a85;
	--ch-brand-ink: #ffffff;
	--ch-heat: #d94f04;
	--ch-heat-dark: #b24003;
	--ch-heat-ink: #ffffff;
	--ch-ink: #0f172a;
	--ch-muted: #64748b;
	--ch-line: #e2e8f0;
	--ch-ground: #f8fafc;
}

/* --- Accessibility ------------------------------------------------------ */

.ch-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
}

/* A skip link that never becomes visible is not a skip link. */
.ch-skip-link:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	padding: 12px 20px;
	background: var(--ch-brand);
	color: var(--ch-brand-ink);
	font-weight: 600;
	text-decoration: none;
}

/* --- Directory ---------------------------------------------------------- */

/*
 * A fixed header would sit on top of the directory's sticky map rail.
 * Adjust this one value if your header height changes.
 */
.chd { --chd-sticky-top: 96px; }

/* Elementor already pads its own sections; avoid doubling up. */
body.elementor-page .chd { padding-top: 0; }

/* Inherit whatever font Elementor's Global Fonts set, rather than fighting it. */
.chd :where(h1, h2, h3) { font-family: inherit; }

/* --- Fallback header and footer ----------------------------------------- */

/*
 * Only used when Header Footer Elementor is not installed. Deliberately plain:
 * if you want a designed header, install that free plugin and build one.
 */

.ch-fallback-header {
	border-bottom: 1px solid var(--ch-line);
	background: #fff;
}

.ch-fallback-header .ch-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1200px;
	margin-inline: auto;
	padding: 14px 16px;
}

.ch-fallback-header .ch-site-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ch-ink);
	text-decoration: none;
}

.ch-fallback-header nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ch-fallback-header nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 14px;
	color: var(--ch-ink);
	text-decoration: none;
	border-radius: 6px;
}

.ch-fallback-header nav a:hover,
.ch-fallback-header nav a:focus-visible {
	background: var(--ch-ground);
	color: var(--ch-brand);
}

.ch-fallback-footer {
	margin-top: 48px;
	padding: 32px 16px;
	border-top: 1px solid var(--ch-line);
	background: var(--ch-ground);
	color: var(--ch-muted);
	font-size: .88rem;
}

.ch-fallback-footer .ch-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1200px;
	margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
	.ch-fallback-header nav a { transition: none; }
}