/*
Theme Name: Hello Elementor Child - Grans Cash Four Cars
Theme URI: https://granscashfourcarstx.local
Description: Child theme of Hello Elementor for the Grans Cash Four Cars website. Holds all custom styling and functions so the parent theme can be updated safely.
Author: Grans Cash Four Cars
Author URI: https://granscashfourcarstx.local
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hello-elementor-child
*/

/* =====================================================
   BRAND TOKENS  (ported from the Astra child)
   ===================================================== */
:root {
	--gc-navy:      #0B1F4B;
	--gc-navy-dark: #071533;
	--gc-red:       #D62828;
	--gc-red-hover: #B71F1F;
	--gc-white:     #ffffff;
	--gc-gray-bg:   #F4F6F9;
	--gc-text:      #1F2937;
	--gc-muted:     #5B6475;
	--gc-border:    #E3E7EE;
	--gc-yellow:    #FFC93C;
	--gc-font:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--gc-font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =====================================================
   BASE OVERRIDES
   (Hello Elementor ships almost no typography, so set it here
    to match the old Astra global fonts: Poppins headings / Inter body.)
   ===================================================== */
body {
	font-family: var(--gc-font);
	color: var(--gc-text);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--gc-font-head);
}

/* =====================================================
   HEADER  (rewritten off Astra's .ast-*/.site-header classes.
    These target the classes the rebuilt UAE/HFE header will use;
    harmless until that header exists.)
   ===================================================== */

/* Call link styled as a red button (works in header or anywhere) */
.gc-hdr-call-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--gc-red);
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	padding: 12px 20px;
	border-radius: 10px;
	text-decoration: none !important;
	white-space: nowrap;
	min-height: 48px;
	transition: background 0.2s;
}
.gc-hdr-call-btn:hover {
	background: var(--gc-red-hover);
	color: #fff !important;
}

/* White, sticky header wrapper for the rebuilt header */
.gc-site-header {
	background-color: var(--gc-white) !important;
	position: sticky;
	top: 0;
	z-index: 999;
	transition: box-shadow .2s ease;
}
.gc-site-header.gc-is-stuck,
.gc-site-header:hover { box-shadow: 0 2px 10px rgba(11,31,75,.10); }

/* Primary menu hover: red underline (HFE Navigation Menu widget markup) */
.gc-site-header .hfe-nav-menu .menu-item > a,
.gc-site-header .elementor-nav-menu .menu-item > a { position: relative; }
.gc-site-header .hfe-nav-menu .menu-item > a::after,
.gc-site-header .elementor-nav-menu .menu-item > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 2px;
	height: 2px;
	background: var(--gc-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}
.gc-site-header .hfe-nav-menu .menu-item > a:hover::after,
.gc-site-header .elementor-nav-menu .menu-item > a:hover::after,
.gc-site-header .menu-item.current-menu-item > a::after { transform: scaleX(1); }

/* Site title (rendered as a div so it adds no heading) */
.gc-site-header .gc-hdr-title a,
.gc-site-header .hfe-site-title a {
	color: var(--gc-navy) !important;
	font-family: var(--gc-font-head);
	font-weight: 700;
	font-size: 22px;
	text-decoration: none;
}
/* Primary nav base colour (brand navy) + weight — override HFE's per-widget colour */
.gc-site-header .hfe-nav-menu .menu-item > a,
.gc-site-header .hfe-nav-menu a.hfe-menu-item,
.gc-site-header .hfe-nav-menu .sub-menu a {
	color: var(--gc-navy) !important;
	font-weight: 600;
}
.gc-site-header .hfe-nav-menu .menu-item > a:hover,
.gc-site-header .hfe-nav-menu a.hfe-menu-item:hover { color: var(--gc-red) !important; }
/* Dropdown submenu panel */
.gc-site-header .hfe-nav-menu .sub-menu,
.gc-site-header .hfe-nav-menu ul.sub-menu {
	background: var(--gc-white);
	box-shadow: 0 10px 30px rgba(11,31,75,.12);
	border-radius: 10px;
}
/* Header hamburger toggle colour on mobile */
.gc-site-header .hfe-nav-menu__toggle,
.gc-site-header .hfe-menu-toggle { color: var(--gc-navy); }

/* Header action buttons (navy "Get Cash Offer" / red "Call") */
.gc-site-header .elementor-button {
	min-height: 48px;
	border-radius: 10px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.gc-site-header .gc-btn-navy .elementor-button { background: var(--gc-navy); color: #fff; }
.gc-site-header .gc-btn-navy .elementor-button:hover { background: var(--gc-navy-dark); color: #fff; }
.gc-site-header .gc-btn-red .elementor-button { background: var(--gc-red); color: #fff; }
.gc-site-header .gc-btn-red .elementor-button:hover { background: var(--gc-red-hover); color: #fff; }
.gc-hdr-actions { align-items: center; }

/* Tablet + mobile (the menu is a hamburger below 1025px): drop the navy
   button and show the red "call" CTA as a small round phone icon, so the
   header stays on one tidy row (title + hamburger + phone icon). */
@media (max-width: 1024px) {
	.gc-site-header .gc-hdr-getoffer { display: none; }
	.gc-site-header .gc-hdr-title a { font-size: 18px; }
	.gc-site-header .gc-hdr-callbtn .elementor-button-text { display: none; }
	.gc-site-header .gc-hdr-callbtn .elementor-button {
		padding: 0;
		width: 44px;
		height: 44px;
		min-height: 44px;
		border-radius: 50%;
		justify-content: center;
	}
	.gc-site-header .gc-hdr-callbtn .elementor-button-icon { margin: 0; }

	/* Keep the tablet/mobile header on ONE row: title grows, nav + phone
	   sit at the right. High specificity to beat Elementor's responsive
	   width:100% on container children. */
	.gc-site-header.e-con > .e-con-inner {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 12px !important;
	}
	.gc-site-header.e-con > .e-con-inner > .elementor-element {
		width: auto !important;
		max-width: none !important;
		flex: 0 0 auto !important;
	}
	.gc-site-header.e-con > .e-con-inner > .gc-hdr-title {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}
	.gc-site-header .gc-hdr-title { overflow: hidden; }
	.gc-site-header .gc-hdr-title a {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
		max-width: 100%;
	}
	/* Nav collapses to just the hamburger toggle (the expanded off-canvas
	   menu is position:fixed, so capping the widget width won't clip it). */
	.gc-site-header.e-con > .e-con-inner > .gc-hdr-nav {
		width: 48px !important;
		max-width: 48px !important;
	}
	.gc-site-header .gc-hdr-nav .hfe-nav-menu__toggle { margin-left: auto; }
}

/* =====================================================
   MOBILE STICKY BOTTOM BAR  (theme-agnostic; ported as-is)
   ===================================================== */
@media (max-width: 767px) {
	/* Push body content up so the bar doesn't cover it */
	body:not(.elementor-template-full-width):not(.hide-gc-sticky-bar) {
		padding-bottom: 66px;
	}

	#gc-sticky-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		z-index: 9999;
		height: 66px;
		border-top: 1px solid rgba(255,255,255,.2);
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		overflow: hidden;
		box-shadow: 0 -6px 20px rgba(11,31,75,.22);
	}

	#gc-sticky-bar a {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		font-size: 15px;
		font-weight: 700;
		text-decoration: none;
		color: #fff;
	}
	#gc-sticky-bar a svg { flex: 0 0 auto; }

	#gc-sticky-bar .gc-bar-call  { background: var(--gc-red); }
	#gc-sticky-bar .gc-bar-offer { background: var(--gc-navy); }

	/* Hide the bar (and its spacer) on the get-offer page */
	body.page-slug-get-offer #gc-sticky-bar { display: none; }
	body.page-slug-get-offer { padding-bottom: 0; }
}

/* Desktop: the sticky bar is mobile-only */
@media (min-width: 768px) {
	#gc-sticky-bar { display: none; }
}

/* =====================================================
   FOOTER  (rewritten off Astra's .ast-* footer classes onto
    gc-* classes the rebuilt UAE/HFE footer will use.)
   ===================================================== */
.gc-site-footer {
	background-color: var(--gc-navy) !important;
	color: #fff;
}
.gc-site-footer a { color: #c8d0e7; text-decoration: none; }
.gc-site-footer a:hover { color: #fff; }

/* Footer column headings */
.gc-footer-col h3,
.gc-site-footer h3 {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 14px;
}

/* Footer nav lists + menu widgets */
.gc-footer-nav ul,
.gc-site-footer .elementor-nav-menu,
.gc-site-footer .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.gc-footer-nav li,
.gc-site-footer .menu-item { margin: 0 0 6px; }
.gc-footer-nav a,
.gc-site-footer .menu-item a {
	color: #c8d0e7;
	font-size: 14px;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.gc-footer-nav a:hover,
.gc-site-footer .menu-item a:hover {
	color: #fff;
	border-bottom-color: var(--gc-red);
}

/* 4-column row: keep columns side by side, wrap on small screens */
.gc-footer-cols > .e-con-inner,
.gc-footer-cols.e-con > .e-con-inner { align-items: flex-start; }
.gc-site-footer .gc-footer-col { min-width: 0; }
/* Footer menu widgets render as vertical lists */
.gc-site-footer .hfe-nav-menu__layout-vertical .hfe-nav-menu,
.gc-site-footer .hfe-nav-menu li { display: block; }
.gc-site-footer .hfe-nav-menu .menu-item > a { padding: 3px 0; display: inline-block; }

/* Divider above the copyright bar + copyright styling */
.gc-footer-bottom {
	border-top: 1px solid rgba(255,255,255,.10);
	color: #9aa8c9;
	font-size: 13px;
	text-align: center;
	margin-top: 32px;
	padding-top: 18px !important;
}
.gc-footer-bottom,
.gc-footer-bottom .elementor-widget-container,
.gc-footer-bottom .hfe-copyright-wrapper { color: #9aa8c9; }
.gc-footer-bottom a { color: #9aa8c9; }

/* Footer responsive: stack columns on phones */
@media (max-width: 767px) {
	.gc-footer-cols > .e-con-inner { flex-direction: column !important; }
	.gc-site-footer .gc-footer-col { width: 100% !important; }
}

/* =====================================================
   HEADER / FOOTER LAYOUT ENFORCEMENT
   (guarantees the flex layout regardless of how Elementor
    emits the container flex vars for these HFE templates)
   ===================================================== */
/* Header: full-width white bar, content capped at 1200 and centred */
.gc-site-header.e-con,
.gc-site-header > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 20px;
}
/* Full-width white bar; the inner flex row is capped at 1200 and centred */
.gc-site-header.e-con { padding-inline: 0 !important; }
.gc-site-header > .e-con-inner {
	max-width: 1200px !important;
	width: 100% !important;
	margin-inline: auto !important;
	padding-inline: 24px !important;
}
/* width:auto stops Elementor's responsive "width:100%" on the children from
   forcing each onto its own row (which stacked the header at <=1024px). */
.gc-site-header .gc-hdr-title   { flex: 0 0 auto; width: auto !important; }
.gc-site-header .gc-hdr-nav     { flex: 0 0 auto; width: auto !important; }
.gc-site-header .gc-hdr-actions { flex: 0 0 auto; width: auto !important; }

/* Desktop nav: compact, sized to content so the whole row fits in 1200 */
@media (min-width: 1025px) {
	.gc-site-header .gc-hdr-title a,
	.gc-site-header .hfe-site-title a { font-size: 17px !important; }
	.gc-site-header .hfe-nav-menu {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
	}
	.gc-site-header .hfe-nav-menu .menu-item > a {
		padding: 5px 8px !important;
		font-size: 13px !important;
		white-space: nowrap;
	}
	.gc-site-header .elementor-button {
		font-size: 13px !important;
		padding: 9px 13px !important;
	}
	.gc-site-header .gc-hdr-actions { gap: 8px; }
}

/* Footer: 4 columns across on tablet/desktop */
@media (min-width: 768px) {
	.gc-footer-cols > .e-con-inner,
	.gc-footer-cols.e-con {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		gap: 32px;
		align-items: flex-start;
	}
	.gc-site-footer .gc-footer-col {
		flex: 1 1 180px;
		min-width: 0;
		max-width: 25%;
	}
}

/* =====================================================
   ELEMENTOR SECTION HELPERS  (theme-agnostic; ported)
   ===================================================== */

/* Red CTA banner sections */
.e-con.gc-section-red,
.elementor-section.gc-section-red {
	background-color: var(--gc-red) !important;
}

/* City grid links (also styled richer on the home page in home.css) */
.gc-city-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0;
}
.gc-city-grid a {
	display: inline-block;
	background: var(--gc-gray-bg);
	color: var(--gc-navy);
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid #d1d9e6;
	transition: background 0.15s, color 0.15s;
}
.gc-city-grid a:hover {
	background: var(--gc-navy);
	color: #fff;
}

/* =====================================================
   GLOBAL BUTTON STYLES (Elementor)
   ===================================================== */
.elementor-button.gc-btn-red,
.elementor-button.elementor-size-lg {
	min-height: 48px;
	border-radius: 8px !important;
}