/* ============================================================
   Grans Cash Four Cars — MOBILE fixes (< 1024px)
   Loaded site-wide, LAST. Everything is inside media queries so
   desktop (>=1024/1280px) is untouched.
   ============================================================ */

/* Safety: never let a replaced element push the page wider.
   (Harmless on desktop — intrinsic sizes already fit.) */
img, svg, video, iframe, canvas, embed, object { max-width: 100%; }
.elementor-widget-google_maps iframe, .gc-map-round iframe { max-width: 100%; }

/* ===== Hamburger button: hidden on desktop, shown < 1024 ===== */
.gc-burger { display: none; }

/* =====================================================================
   TABLET + PHONE  (< 1024px)
   ===================================================================== */
@media (max-width: 1024px) {

	/* ROOT CAUSE FIX: hide the UAE desktop nav entirely on mobile.
	   Its horizontal <ul> was rendering at full desktop width
	   (~777/1214/1470px) and widening the whole page. */
	.gc-site-header .gc-hdr-nav,
	.gc-site-header .elementor-widget-navigation-menu { display: none !important; }

	/* Show the custom hamburger in the header actions */
	.gc-burger {
		display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
		width: 44px; height: 44px; padding: 0 10px; border: 0; background: transparent; cursor: pointer;
		margin-left: 2px;
	}
	.gc-burger span { display: block; height: 2px; width: 22px; background: var(--gc-navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
	.gc-burger:focus-visible { outline: 2px solid var(--gc-navy); outline-offset: 2px; border-radius: 6px; }

	/* Header height 64px, white, sticky, never wider than screen */
	header#masthead, .gc-site-header.e-con, .gc-site-header.e-con > .e-con-inner { min-height: 64px; }
	.gc-site-header.e-con > .e-con-inner { padding-left: 16px !important; padding-right: 16px !important; }
	.gc-site-header .gc-hdr-actions { gap: 8px; }
	.gc-site-header .gc-hdr-getoffer { display: none !important; }

	/* Site title: shrink so it fits one line at 360px */
	.gc-site-header .gc-hdr-title a,
	.gc-site-header .hfe-site-title a { font-size: 17px !important; white-space: nowrap; }
}

/* ===== Off-canvas mobile menu panel ===== */
#gc-mnav-overlay {
	position: fixed; inset: 0; background: rgba(7,21,51,0.5); z-index: 100000; opacity: 0; transition: opacity .25s ease;
}
body.gc-mnav-open #gc-mnav-overlay { opacity: 1; }

.gc-mnav {
	position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 360px);
	background: #fff; z-index: 100001; box-shadow: -8px 0 30px rgba(11,31,75,0.22);
	transform: translateX(100%); transition: transform .25s ease;
	display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
body.gc-mnav-open .gc-mnav { transform: translateX(0); }
body.gc-mnav-open { overflow: hidden; }                 /* lock background scroll */

.gc-mnav-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--gc-border); }
.gc-mnav-title { font-family: var(--gc-font-head); font-weight: 700; color: var(--gc-navy); font-size: 17px; }
.gc-mnav-close { width: 44px; height: 44px; border: 0; background: transparent; font-size: 30px; line-height: 1; color: var(--gc-navy); cursor: pointer; border-radius: 8px; }
.gc-mnav-close:focus-visible { outline: 2px solid var(--gc-navy); outline-offset: 2px; }

.gc-mnav-list, .gc-mnav-list .sub-menu { list-style: none; margin: 0; padding: 0; }
.gc-mnav-list .menu-item { border-bottom: 1px solid #eef1f6; position: relative; }
.gc-mnav-list .menu-item > a {
	display: flex; align-items: center; min-height: 48px; padding: 12px 16px;
	color: var(--gc-navy); font-weight: 600; font-size: 17px; text-decoration: none;
}
.gc-mnav-list .menu-item > a:hover,
.gc-mnav-list .menu-item > a:focus { color: var(--gc-red); background: var(--gc-bg-light, #F3F5F8); }

/* submenu expander (+ / −) */
.gc-mnav-expander {
	position: absolute; top: 2px; right: 4px; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
}
.gc-mnav-plus, .gc-mnav-plus::before { content: ""; position: absolute; background: var(--gc-navy); }
.gc-mnav-plus { top: 50%; left: 50%; width: 14px; height: 2px; transform: translate(-50%, -50%); }
.gc-mnav-plus::before { top: 0; left: 50%; width: 2px; height: 14px; transform: translate(-50%, -6px); transition: opacity .2s ease; }
.gc-sub-open > .gc-mnav-expander .gc-mnav-plus::before { opacity: 0; }        /* + becomes − */
.gc-mnav-expander:focus-visible { outline: 2px solid var(--gc-navy); outline-offset: -4px; }

.gc-mnav-list .sub-menu { display: none; background: #f7f9fc; }
.gc-mnav-list .gc-sub-open > .sub-menu { display: block; }
.gc-mnav-list .sub-menu .menu-item > a { padding-left: 32px; font-weight: 500; font-size: 16px; }

.gc-mnav-cta { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-top: 1px solid var(--gc-border); }
.gc-mnav-btn { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 10px; font-weight: 700; font-size: 16px; text-decoration: none; }
.gc-mnav-btn-navy { background: var(--gc-navy); color: #fff; }
.gc-mnav-btn-red  { background: var(--gc-red);  color: #fff; }

/* =====================================================================
   GLOBAL LAYOUT  (phones <= 767 and tablet 768-1023)
   ===================================================================== */
@media (max-width: 1024px) {
	/* Containers never exceed the screen; tablet side padding 24px */
	.gc-styled .e-con > .e-con-inner { max-width: 100% !important; }
	.gc-styled .e-con.e-parent > .e-con-inner { padding-left: 24px !important; padding-right: 24px !important; }

	/* Stack every 2-column row; text stays first (image drops below) */
	.gc-styled .gc-2col > .e-con-inner { flex-direction: column !important; }
	.gc-styled .gc-2col > .e-con-inner > .e-con { width: 100% !important; }

	/* Google Maps full width */
	.gc-styled .elementor-widget-google_maps iframe,
	.gc-styled .gc-map-round iframe { width: 100% !important; }

	/* Cards: 2 per row on tablet */
	.gc-styled .gc-why-grid > .e-con-inner > .e-con,
	.gc-styled .gc-vehicle-grid > .e-con-inner > .e-con,
	.gc-styled .gc-area-grid .gc-area-card,
	.gc-styled .gc-why-grid .gc-why-card { max-width: calc(50% - 10px) !important; flex: 1 1 calc(50% - 10px) !important; }

	/* Section padding 72px top/bottom on tablet */
	.gc-styled .gc-sec-white, .gc-styled .gc-sec-gray,
	.gc-styled .gc-page-hero, .gc-styled .gc-hiw-intro,
	.gc-styled .gc-midcta, .gc-styled .gc-finalcta,
	.gc-styled .gc-faq-cat, .gc-styled .gc-steps { padding-top: 72px !important; padding-bottom: 72px !important; }

	/* Pills / chips always wrap */
	.gc-city-grid, .gc-chips, .gc-trust-strip .elementor-icon-list-items { flex-wrap: wrap !important; }

	/* Footer safety (applies on ALL pages incl. non-gc-styled like
	   privacy-policy): flex columns + nav menus must shrink, never
	   force the page wider than the viewport. */
	.gc-site-footer .gc-footer-col,
	.gc-site-footer .gc-footer-cols,
	.gc-site-footer nav,
	.gc-site-footer .hfe-nav-menu,
	.gc-site-footer .elementor-widget { min-width: 0 !important; max-width: 100% !important; }
	.gc-site-footer .gc-footer-menu .menu-item > a { overflow-wrap: anywhere; }
}

/* =====================================================================
   PHONES  (<= 767px)
   ===================================================================== */
@media (max-width: 767px) {
	/* Side padding 16px */
	.gc-styled .e-con.e-parent > .e-con-inner { padding-left: 16px !important; padding-right: 16px !important; }

	/* Cards 1 per row */
	.gc-styled .gc-why-grid > .e-con-inner > .e-con,
	.gc-styled .gc-vehicle-grid > .e-con-inner > .e-con,
	.gc-styled .gc-area-grid .gc-area-card,
	.gc-styled .gc-why-grid .gc-why-card { max-width: 100% !important; flex: 1 1 100% !important; }

	/* Maps 300px tall */
	.gc-styled .elementor-widget-google_maps iframe,
	.gc-styled .gc-map-round iframe { height: 300px !important; }

	/* Section padding 56px */
	.gc-styled .gc-sec-white, .gc-styled .gc-sec-gray,
	.gc-styled .gc-page-hero, .gc-styled .gc-hiw-intro,
	.gc-styled .gc-midcta, .gc-styled .gc-finalcta,
	.gc-styled .gc-faq-cat, .gc-styled .gc-steps { padding-top: 56px !important; padding-bottom: 56px !important; }

	/* ---- Typography ---- */
	.gc-styled .elementor-widget-heading h1.elementor-heading-title { font-size: 32px !important; line-height: 1.2 !important; }
	.gc-styled .elementor-widget-heading h2.elementor-heading-title { font-size: 26px !important; line-height: 1.25 !important; }
	.gc-styled .elementor-widget-heading h3.elementor-heading-title { font-size: 20px !important; line-height: 1.3 !important; }
	.gc-styled .elementor-widget-text-editor,
	.gc-styled .elementor-widget-text-editor p { font-size: 17px !important; line-height: 1.6 !important; }
	.gc-styled .gc-eyebrow .elementor-heading-title { font-size: 13px !important; }
	.gc-styled .elementor-icon-list-text { font-size: 16px !important; }
	.gc-styled * { word-break: normal; overflow-wrap: anywhere; }     /* long words/phones/emails wrap */

	/* ---- Buttons & touch ---- */
	.gc-styled .elementor-button { min-height: 48px; }
	/* Hero buttons: full width, stacked (Call is first in the DOM) */
	.gc-styled .gc-page-hero .gc-btn-red,
	.gc-styled .gc-page-hero .gc-btn-navy,
	.gc-styled .gc-page-hero .gc-btn-white,
	.gc-styled .gc-page-hero .gc-btn-outline,
	.gc-styled .gc-finalcta [class*="gc-btn-"],
	.gc-styled .gc-midcta [class*="gc-btn-"] { width: 100%; }
	.gc-styled .gc-page-hero .e-con-inner [class*="flex_direction"],
	.gc-styled .gc-page-hero .e-con > .e-con-inner > .e-con[class*="btnrow"] { width: 100%; }
	/* button rows stack */
	.gc-styled .gc-page-hero .e-con-inner > .e-con,
	.gc-styled .gc-finalcta .e-con-inner > .e-con,
	.gc-styled .gc-midcta .e-con-inner > .e-con { flex-direction: column !important; width: 100%; }
	.gc-styled .gc-page-hero .elementor-button,
	.gc-styled .gc-finalcta .elementor-button,
	.gc-styled .gc-midcta .elementor-button { width: 100%; justify-content: center; }

	/* ---- Footer (phones) ---- */
	.gc-site-footer.e-con { padding: 48px 16px 86px !important; }     /* bottom clearance for sticky bar */
	.gc-footer-cols .gc-footer-col { width: 100% !important; }
	.gc-site-footer .gc-foot-areas-2col .hfe-nav-menu { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 14px; }
	.gc-site-footer .gc-footer-menu .menu-item > a { padding: 10px 0 !important; min-height: 44px; display: flex; align-items: center; }
	.gc-site-footer .gc-footer-bottom { text-align: left; }
	/* CTA strip stacked + centered + full-width buttons */
	.gc-cta-strip > .e-con-inner { flex-direction: column !important; text-align: center; gap: 16px; }
	.gc-cta-strip .gc-cta-text, .gc-cta-strip .gc-cta-actions { width: 100% !important; }
	.gc-cta-strip .gc-cta-actions { flex-direction: column; }
	.gc-cta-strip .gc-cta-actions .elementor-button { width: 100%; justify-content: center; }

	/* ---- Form (/get-offer): form first, side boxes below ---- */
	body.page-slug-get-offer .gc-2col > .e-con-inner { flex-direction: column !important; }
	body.page-slug-get-offer .fluentform input,
	body.page-slug-get-offer .fluentform select,
	body.page-slug-get-offer .fluentform textarea { font-size: 16px !important; width: 100% !important; }
	body.page-slug-get-offer .fluentform .ff-btn-submit { width: 100% !important; max-width: none !important; }
}

/* =====================================================================
   STICKY BOTTOM BAR  (phones only, <= 767px)
   ===================================================================== */
@media (max-width: 767px) {
	#gc-sticky-bar {
		position: fixed; left: 0; right: 0; bottom: 0; width: 100%;
		box-sizing: border-box; height: 56px; display: flex; z-index: 9998;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	#gc-sticky-bar a { flex: 1; min-height: 56px; box-sizing: border-box; }
	/* body clearance so the bar never covers content / footer copyright */
	body:not(.page-slug-get-offer):not(.page-slug-thank-you) { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

	/* Hide the bar on the form + thank-you pages, and while the menu is open */
	body.page-slug-get-offer #gc-sticky-bar,
	body.page-slug-thank-you #gc-sticky-bar,
	body.gc-mnav-open #gc-sticky-bar { display: none !important; }
	body.page-slug-thank-you { padding-bottom: 0 !important; }
}