/*
	Theme Name: Itchen Glass & Glazing
	Theme URI:
	Description: Child theme for the Itchen Glass & Glazing rebuild. Holds the project's design-system CSS custom properties and component styling.
	Author: Hospitality Innovations
	Template: hello-elementor
	Version: 0.1.0
	Requires at least: 6.0
	Requires PHP: 8.1
	Text Domain: itchenglass
*/

:root {
	/* Colour — anchored to the palette already live on the 4 SEO pages
	   (double-glazing-southampton etc.), not reinvented for the rebuild. */
	--color-navy: #1c3461;
	--color-navy-deep: #142645;
	--color-amber: #e8a020;
	--color-amber-deep: #c8881a;
	--color-light: #f5f7fa;
	--color-white: #ffffff;
	--color-ink: #2d2d2d;

	/* Type — Fraunces (display) + Public Sans (body/label/data), loaded
	   via functions.php. "Trustworthy & established" personality. */
	--font-display: 'Fraunces', Georgia, serif;
	--font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Spacing — spacious/premium rhythm (matches the 1140px content width
	   and 60-100px section padding already used on the SEO pages). */
	--content-width: 1140px;
	--section-padding-y: 6rem;
	--section-padding-y-mobile: 2.5rem;
}

body {
	font-family: var(--font-body);
	color: var(--color-ink);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--color-navy);
}

/* ---------- Header ---------- */

.itchen-site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--color-white) !important;
	border-bottom: 1px solid #e5e5e5;
}

/* Elementor sets flex via a CSS custom property on a two-class selector
   (.e-con.e-flex) that beats a single-class override regardless of load
   order — see wordpress-elementor-gotchas.md gotcha #2. Matching the
   compound here, plus !important, is the documented fix. */
.itchen-site-header .itchen-header-row.e-con.e-flex {
	align-items: center !important;
	justify-content: space-between !important;
}

.itchen-header-logo-col .itchen-logo,
.itchen-header-logo-col h4 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
	white-space: nowrap;
}

.itchen-header-nav-col {
	flex: 1 1 auto !important;
}

.itchen-header-cta-col {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex: 0 0 auto !important;
}

.itchen-header-phone a {
	color: var(--color-navy);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* ekit-nav-menu top-level links */
.elementskit-navbar-nav > li > a {
	color: var(--color-navy) !important;
	font-family: var(--font-body);
	font-weight: 500;
}

/* ---------- Buttons ---------- */

.itchen-btn-amber .elementor-button,
.itchen-btn-amber a.elementor-button {
	background: var(--color-amber) !important;
	color: var(--color-navy) !important;
	font-weight: 600;
	border-radius: 4px;
	white-space: nowrap;
}

.itchen-btn-amber .elementor-button:hover {
	background: var(--color-amber-deep) !important;
}

/* ---------- Footer ---------- */

.itchen-site-footer {
	background: var(--color-navy) !important;
	color: var(--color-white);
	padding-inline-start: 5vw !important;
	padding-inline-end: 5vw !important;
}

.itchen-site-footer h4 {
	color: var(--color-white);
	font-size: 1.1rem;
	margin-bottom: 1rem;
}

.itchen-site-footer p,
.itchen-site-footer a {
	color: #d7deea;
}

.itchen-site-footer a:hover {
	color: var(--color-amber);
}

.itchen-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.itchen-footer-links li {
	margin-bottom: 0.5rem;
}

.itchen-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: 2rem;
	padding-top: 1.5rem;
	text-align: center;
	font-size: 0.85rem;
}

.itchen-footer-bottom p {
	color: #a9b4c6;
}

/* ---------- Layout ---------- */

.e-con.itchen-site-header,
.e-con.itchen-site-footer {
	max-width: 100% !important;
}