/* ============================================================
   Grans Cash Four Cars — HEADER & FOOTER fixes
   Loaded site-wide, AFTER style.css, so it wins the cascade.
   Uses Global Colors from style.css (:root --gc-*).
   ============================================================ */

:root { --gc-white: #ffffff; }


/* ========================= HEADER ========================= */

/* FIX 1 — kill the empty space above the header.
   The Hello theme wrapper (#masthead / #page) adds the gap;
   the Elementor header container itself only has 12px padding. */
#page.site { margin: 0; }
header#masthead {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	min-height: 0 !important;
	background: var(--gc-white);
}
header#masthead > .main-title { display: none !important; }

/* Fixed, predictable header height, content vertically centred */
.gc-site-header.e-con {
	min-height: 84px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.gc-site-header.e-con > .e-con-inner {
	min-height: 84px;
	align-items: center !important;
}

/* FIX 2+3 — all top-level items on ONE baseline, same font/size/weight.
   Force a uniform font-size + line-height + flex alignment that the
   per-widget UAE inline CSS does not set. */
.gc-site-header .hfe-nav-menu,
.gc-site-header .hfe-nav-menu__layout-horizontal,
.gc-site-header ul.hfe-nav-menu__layout-horizontal {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 4px;
}
.gc-site-header .hfe-nav-menu > li.menu-item {
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
}
.gc-site-header .hfe-nav-menu > li.menu-item > a,
.gc-site-header .hfe-nav-menu a.hfe-menu-item {
	display: inline-flex !important;
	align-items: center !important;
	font-family: var(--gc-font-body, inherit) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	font-weight: 600 !important;
	color: var(--gc-navy) !important;
	padding: 10px 14px !important;
}
/* Dropdown arrow: small + aligned with the text */
.gc-site-header .hfe-nav-menu .hfe-menu-item-arrow,
.gc-site-header .hfe-nav-menu .fa,
.gc-site-header .hfe-nav-menu .sub-arrow {
	font-size: 11px !important;
	margin-left: 6px !important;
	line-height: 1 !important;
	position: static !important;
	align-self: center !important;
}
/* Hover + current page = red, with the 2px red underline (style.css ::after) */
.gc-site-header .hfe-nav-menu > li.menu-item > a:hover,
.gc-site-header .hfe-nav-menu > li.current-menu-item > a,
.gc-site-header .hfe-nav-menu > li.current-menu-ancestor > a { color: var(--gc-red) !important; }

/* FIX 4 — dropdown as a clean card */
.gc-site-header .hfe-nav-menu .sub-menu,
.gc-site-header .hfe-nav-menu ul.sub-menu {
	background: var(--gc-white) !important;
	border: 0 !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 30px rgba(11,31,75,0.12) !important;
	padding: 8px !important;
	min-width: 240px !important;
	margin-top: 10px !important;      /* small gap under the parent */
}
/* Hover bridge: keep dropdown reachable while moving the mouse into it */
.gc-site-header .hfe-nav-menu .menu-item-has-children { position: relative; }
.gc-site-header .hfe-nav-menu .menu-item-has-children > .sub-menu::before {
	content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 14px; background: transparent;
}
.gc-site-header .hfe-nav-menu .sub-menu .menu-item { margin: 0 !important; }
.gc-site-header .hfe-nav-menu .sub-menu a {
	display: block !important;
	padding: 10px 16px !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	color: var(--gc-navy) !important;
	white-space: nowrap;
}
.gc-site-header .hfe-nav-menu .sub-menu a:hover,
.gc-site-header .hfe-nav-menu .sub-menu a:focus {
	background: var(--gc-bg-light, #F3F5F8) !important;
	color: var(--gc-red) !important;
}
/* Open dropdown on keyboard focus too (not only hover) */
.gc-site-header .hfe-nav-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1 !important; visibility: visible !important; display: block !important; pointer-events: auto !important;
}

/* FIX 5 — buttons same height (48px), vertically centred */
.gc-site-header .gc-hdr-actions { display: flex; align-items: center; gap: 12px; }
.gc-site-header .gc-hdr-actions .elementor-button {
	min-height: 48px; height: 48px; border-radius: 10px; font-weight: 700;
	display: inline-flex; align-items: center; gap: 8px;
}

/* FIX 6 — sticky header: stay at top, light shadow, no height jump */
.gc-site-header.e-con { position: sticky; top: 0; z-index: 999; background: var(--gc-white) !important; }
.gc-site-header.gc-is-stuck { box-shadow: 0 4px 14px rgba(11,31,75,0.10); }

/* FIX 7 — 1024–1280: tighten the gap first before going mobile */
@media (min-width: 1025px) and (max-width: 1280px) {
	.gc-site-header .hfe-nav-menu { gap: 0 !important; }
	.gc-site-header .hfe-nav-menu > li.menu-item > a { padding: 10px 9px !important; font-size: 15px !important; }
	.gc-site-header .gc-hdr-actions { gap: 8px; }
}

/* ---- Mobile header (< 1024px) ---- */
@media (max-width: 1024px) {
	.gc-site-header.e-con,
	.gc-site-header.e-con > .e-con-inner { min-height: 64px; }

	/* Title left; phone-icon + hamburger right */
	.gc-site-header .gc-hdr-getoffer { display: none !important; }
	.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;
	}

	/* Off-canvas mobile panel (UAE renders the toggle + panel; we style it) */
	.gc-site-header .hfe-nav-menu__submenu,
	.gc-site-header .hfe-nav-menu.hfe-nav-menu-layout-expanddropdown .hfe-nav-menu,
	.gc-site-header ul.hfe-nav-menu { background: var(--gc-white); }
	.gc-site-header .hfe-nav-menu li.menu-item > a { min-height: 48px; }

	/* Put the two action buttons full-width at the bottom of the open panel */
	.gc-mobile-panel-cta { display: none; }
	body.gc-mobile-nav-open .gc-mobile-panel-cta {
		display: flex; flex-direction: column; gap: 10px; padding: 16px;
	}
}

/* ========================= FOOTER ========================= */

.gc-site-footer.e-con { padding: 64px 0 24px !important; }

/* Column widths 30 / 22 / 28 / 20 (desktop) */
.gc-footer-cols .gc-footer-col:nth-child(1) { width: 30% !important; }
.gc-footer-cols .gc-footer-col:nth-child(2) { width: 22% !important; }
.gc-footer-cols .gc-footer-col:nth-child(3) { width: 28% !important; }
.gc-footer-cols .gc-footer-col:nth-child(4) { width: 20% !important; }

/* FIX 1 — column headings (now <p>, class gc-foot-head): small uppercase,
   white, 700, letter-spacing, short red underline. */
.gc-site-footer .gc-foot-head .elementor-heading-title,
.gc-site-footer p.gc-foot-head {
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0 0 14px !important;
	padding-bottom: 8px;
	position: relative;
}
.gc-site-footer .gc-foot-head .elementor-heading-title::after,
.gc-site-footer p.gc-foot-head::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--gc-red);
}

/* FIX 4 — column 1 brand + text + icon lines */
.gc-site-footer .gc-foot-brand .elementor-heading-title {
	color: #fff !important; font-family: var(--gc-font-head); font-size: 22px !important; font-weight: 700 !important; margin-bottom: 14px !important;
}
.gc-site-footer .gc-foot-col1 .gc-foot-desc { color: #C9D2E3; font-size: 15px; line-height: 1.6; margin-bottom: 14px; }
.gc-site-footer .gc-foot-contact .elementor-icon-list-item { margin-bottom: 10px; align-items: flex-start; }
.gc-site-footer .gc-foot-contact .elementor-icon-list-icon i,
.gc-site-footer .gc-foot-contact .elementor-icon-list-icon svg { color: var(--gc-red); }
.gc-site-footer .gc-foot-contact .elementor-icon-list-text { color: #C9D2E3; font-size: 15px; }
.gc-site-footer .gc-foot-contact a { color: #fff !important; font-weight: 700; font-size: 18px; text-decoration: none; }

/* FIX 2 — footer links spacing + colour */
.gc-site-footer .gc-footer-menu .menu-item { margin: 0 0 8px !important; }
.gc-site-footer .gc-footer-menu .menu-item > a {
	color: #C9D2E3 !important; font-size: 15px !important; line-height: 1.6 !important; text-decoration: none; display: inline-block; padding: 0 !important;
}
.gc-site-footer .gc-footer-menu .menu-item > a:hover { color: #fff !important; text-decoration: underline; text-decoration-color: var(--gc-red); }

/* FIX 3 — Service Areas column links in 2 small columns */
.gc-site-footer .gc-foot-areas-2col .hfe-nav-menu,
.gc-site-footer .gc-foot-areas-2col ul.menu {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	column-gap: 18px;
}

/* FIX 6 — bottom bar: divider + alignment */
.gc-site-footer .gc-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.14);
	margin-top: 36px; padding-top: 18px;
	justify-content: flex-start !important;
}
.gc-site-footer .gc-footer-copy,
.gc-site-footer .gc-footer-bottom .elementor-widget-container { color: #9AA8C9; font-size: 13px; text-align: left; }

/* ========================= CTA STRIP ========================= */
.gc-cta-strip.e-con {
	background: var(--gc-red) !important;
	padding: 32px !important;
}
.gc-cta-strip .gc-cta-text .elementor-heading-title { color: #fff !important; font-size: 24px !important; font-weight: 700 !important; margin: 0; }
.gc-cta-strip .gc-cta-sub { color: #ffe3e3; font-size: 15px; margin-top: 4px; }
.gc-cta-strip .gc-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.gc-cta-strip .gc-cta-actions .elementor-button { min-height: 48px; height: 48px; border-radius: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.gc-cta-strip .gc-btn-white .elementor-button { background: #fff !important; color: var(--gc-red) !important; }
.gc-cta-strip .gc-btn-white .elementor-button:hover { background: #f3f3f3 !important; color: var(--gc-red) !important; }
.gc-cta-strip .gc-btn-navy .elementor-button { background: var(--gc-navy) !important; color: #fff !important; }
.gc-cta-strip .gc-btn-navy .elementor-button:hover { background: var(--gc-navy-dark) !important; color: #fff !important; }

/* Hide CTA strip on /get-offer and /thank-you (free plugin can't page-target;
   done via the page-slug body class added by functions.php). */
body.page-slug-get-offer .gc-cta-strip,
body.page-slug-thank-you .gc-cta-strip { display: none !important; }

/* ---- Mobile footer (< 768px) ---- */
@media (max-width: 767px) {
	.gc-site-footer.e-con { padding: 48px 16px 96px !important; }  /* extra bottom so sticky Call bar never covers the copyright */
	.gc-footer-cols .gc-footer-col { width: 100% !important; }
	.gc-site-footer .gc-foot-areas-2col .hfe-nav-menu { grid-template-columns: 1fr 1fr; } /* keep areas 2-col on mobile too */
	.gc-cta-strip.e-con { padding: 28px 16px !important; }
	.gc-cta-strip > .e-con-inner { flex-direction: column !important; text-align: center; gap: 16px; }
	.gc-cta-strip .gc-cta-actions { width: 100%; flex-direction: column; }
	.gc-cta-strip .gc-cta-actions .elementor-button { width: 100%; justify-content: center; }
}