/*
Theme Name: Get Gaari
Theme URI: https://getgaari.com
Description: Child theme of Twenty Twenty-Five for Get Gaari, Pakistan's rental car sharing platform.
Author: Get Gaari Technologies (Private) Limited
Template: twentytwentyfive
Version: 1.4.0
Text Domain: getgaari
*/

/* Card hover state used by the Services grid. */
.gg-service-card {
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.gg-service-card:hover {
	background-color: var(--wp--preset--color--surface-hover);
	border-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.gg-service-card {
		transition: none;
	}
}

/* Download App button at the end of the primary nav. */
.gg-nav-cta a {
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base) !important;
	border-radius: 10px;
	padding: 8px 20px !important;
	/* A button, not a text link: no underline in any state (theme.json
	   underlines links on hover). */
	text-decoration: none !important;
}

.gg-nav-cta a:hover,
.gg-nav-cta a:focus-visible {
	background-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--base) !important;
	text-decoration: none !important;
}

/* Current page in the primary nav (Home / Services / Fleet / About).
   Colour only — theme.json underlines links on hover, so that is cleared
   here too, otherwise the current tab picks up an underline on hover. */
.is-active-nav,
.is-active-nav:hover,
.is-active-nav:focus {
	color: var(--wp--preset--color--brand) !important;
	font-weight: 600;
	text-decoration: none !important;
}

/* Focus outlines, site-wide. Browsers (Safari especially) draw a focus box
   round links, buttons and FAQ questions after a mouse click or tap, which
   reads as a stray outline. Dropped for pointer focus; keyboard users (Tab)
   get one consistent red outline instead. Form fields are left alone: they
   show focus with a red border of their own. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
	outline: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Header tabs (desktop): a red bar under the tab on hover instead of the
   underline theme.json gives links. The bar is drawn on the tab's link but
   keyed to the list item's hover, so on Services and Cities it stays lit while
   the pointer is inside the dropdown. The Contact button is excluded. */
.site-header-fixed .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:not(.gg-nav-cta) > .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none !important;
}

.site-header-fixed .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:not(.gg-nav-cta) > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 3px;
	border-radius: 3px;
	background-color: var(--wp--preset--color--brand);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

.site-header-fixed .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:not(.gg-nav-cta):hover > .wp-block-navigation-item__content::after,
.site-header-fixed .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:not(.gg-nav-cta):focus-within > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.site-header-fixed .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:not(.gg-nav-cta) > .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* Primary nav dropdowns (desktop). Core's default is a 200px-wide box at the
   21px body size, so most labels wrapped onto two lines and the 11 Services
   links ran ~1400px tall — well past the bottom of the screen. Instead: a
   compact card with smaller type, no wrapping, and two columns once a menu
   has more than six links. Scoped to the non-overlay container so the mobile
   menu keeps its plain stacked list. */
.site-header-fixed .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px 6px;
	/* Centred under its menu item rather than hanging off the item's right
	   edge, which is where core's right-justified nav puts it. */
	left: 50%;
	right: auto;
	top: calc(100% + 14px);
	transform: translateX(-50%);
	padding: 8px;
	background-color: var(--wp--preset--color--base);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(16, 16, 16, 0.12), 0 2px 6px rgba(16, 16, 16, 0.06);
}

.site-header-fixed .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container:has(> li:nth-child(7)) {
	grid-template-columns: repeat(2, 1fr);
}

/* Core sizes the open menu with width:auto, which shrink-wraps to the narrow
   parent <li> and forces wrapping; max-content sizes it to its longest link. */
.site-header-fixed .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:hover > .wp-block-navigation__submenu-container,
.site-header-fixed .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:focus-within > .wp-block-navigation__submenu-container,
.site-header-fixed .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
	width: max-content;
	min-width: 220px;
}

/* Invisible bridge across the gap above the card, so the pointer can travel
   from the menu item down into the card without the hover dropping. */
.site-header-fixed .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 16px;
}

.site-header-fixed .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--wp--preset--color--heading);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.site-header-fixed .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header-fixed .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--surface-hover);
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

/* Current page inside a dropdown: grey row under .is-active-nav's red. Not
   hero-tint — that pink is reserved for the home hero. */
.site-header-fixed .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container .is-active-nav {
	background-color: var(--wp--preset--color--surface);
}

@media (prefers-reduced-motion: reduce) {
	.site-header-fixed .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		transition: none;
	}
}

/*
 * Fixed site header. `position: sticky` measured as correctly applied
 * (computed style, no ancestor overflow/transform issues, no JS touching
 * it) but did not actually stick in testing — an unexplained anomaly in
 * this environment. `position: fixed` sidesteps it entirely and is what
 * was actually asked for. The matching top padding on <body> keeps page
 * content from starting underneath the fixed header.
 */
.site-header-fixed {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 999 !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

body {
	padding-top: 79px;
}

/*
 * Every page ends with the dark footer. Without this, scrolling past the
 * bottom edge (elastic/rubber-band overscroll) reveals the browser's
 * default white background instead of matching the footer.
 */
html {
	background-color: var(--wp--preset--color--panel-dark);
}

/*
 * The footer inherits the global blockGap (40px) as a top margin, which shows
 * as a white band between the last section and the footer — most obvious when
 * that section has a background, e.g. the grey FAQ. Sections should run
 * straight into the footer.
 */
.wp-site-blocks > footer {
	margin-top: 0 !important;
}

.admin-bar .site-header-fixed {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header-fixed {
		top: 46px !important;
	}
}

/* At 600px and below WordPress lets the admin bar scroll away with the page,
   but the header above stays 46px down to clear it — so a strip of page
   content showed above the header when a logged-in user scrolled. Keep the
   admin bar pinned there too, as it already is on wider screens. */
@media screen and (max-width: 600px) {
	.admin-bar #wpadminbar {
		position: fixed;
	}
}

/* "Get a Quote" enquiry form (Contact Form 7), styled as the floating card
   grid shown in the hero design reference. */
.gg-quote-card .wpcf7-form {
	margin: 0;
}

.gg-quote-card .gg-form-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px 16px;
}

.gg-quote-card .gg-form-grid p {
	margin: 0;
	/* Bottom-align every cell's contents so the inputs and the submit button
	   share one baseline. Without this the label+input stack sits at the top
	   of its grid cell while the button (no label) aligns to the cell bottom,
	   leaving the button a few px lower than the phone field beside it. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.gg-quote-card .gg-form-grid label {
	display: block;
}

/* CF7 wraps every field in an inline <span class="wpcf7-form-control-wrap">,
   which sits on a text baseline and leaves ~6px of descender space beneath
   the input — the last thing knocking the submit button out of line. */
.gg-quote-card .wpcf7-form-control-wrap {
	display: block;
}

/* The CF7 spinner is a flex sibling of the button. Left in the flow it eats
   31px of the grid column, so the submit button stops short of the column's
   right edge and no longer lines up with the field above it or the app
   button below. Taking it out of the flow lets the button fill the column;
   it still appears (overlaid at the button's right) while submitting. */
.gg-quote-card .gg-form-submit {
	position: relative;
}

.gg-quote-card .wpcf7-spinner {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

.gg-quote-card .gg-form-grid label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
	/* No bottom margin: CF7's <label> wraps the input as well as the field
	   name, so a margin here lands *below the input* and pushes the submit
	   button out of line with the field row. */
	margin-bottom: 0;
}

.gg-quote-card select,
.gg-quote-card input[type="text"],
.gg-quote-card input[type="date"],
.gg-quote-card input[type="tel"],
.gg-quote-card input[type="email"] {
	width: 100%;
	/* Inputs are inline-block by default, which leaves ~6px of line-box
	   descender space beneath them inside the label — enough to push the
	   submit button out of line with the field row. */
	display: block;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	color: var(--wp--preset--color--heading);
	background-color: var(--wp--preset--color--base);
}

/* One height for every single-line field. Left to their natural heights, the
   dropdowns and date fields came out a few pixels taller than the text
   fields beside them, which put their labels and boxes out of line. */
.gg-quote-card select,
.gg-quote-card input[type="text"],
.gg-quote-card input[type="date"],
.gg-quote-card input[type="tel"],
.gg-quote-card input[type="email"] {
	height: 48px;
	padding-top: 0;
	padding-bottom: 0;
}

.gg-quote-card select:focus,
.gg-quote-card input:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
}

/* Multi-line field (the business form's Requirements), styled like the
   inputs and given the full width of the grid. */
.gg-quote-card textarea {
	display: block;
	width: 100%;
	min-height: 96px;
	box-sizing: border-box;
	resize: vertical;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--heading);
	background-color: var(--wp--preset--color--base);
}

.gg-quote-card textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
}

.gg-quote-card .gg-form-grid .gg-form-wide {
	grid-column: 1 / -1;
}

/* A field two columns wide (the standard form's Pick-up), so the four-column
   home form and the two-column pop-up both fill every row. Back to a single
   cell once the grid is one column, where a span would add a phantom track. */
.gg-quote-card .gg-form-grid .gg-form-span2 {
	grid-column: span 2;
}

@media screen and (max-width: 480px) {
	.gg-quote-card .gg-form-grid .gg-form-span2 {
		grid-column: auto;
	}
}

/* Standard quote form: the submit button and "Or book in the app" share one
   cell, stacked. On the four-column home form the last row is Email,
   Additional Instructions (two columns) and the two buttons. */
.gg-quote-card .gg-form-grid p.gg-form-submit:has(.gg-app-btn) {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	gap: 10px;
}

/* CF7's spinner is centred on the cell; keep it on the submit button. */
.gg-quote-card .gg-form-submit:has(.gg-app-btn) .wpcf7-spinner {
	top: 24px;
}

/* Each of the two buttons is as tall as a field (48px), and the text box
   beside them is exactly as tall as the pair plus the gap (106px, below), so
   Get Instant Quote lines up with the Email field and the bottom of "Or book
   in the app" with the bottom of the text box. */
.gg-quote-card .gg-form-submit:has(.gg-app-btn) input[type="submit"],
.gg-quote-card .gg-form-submit:has(.gg-app-btn) .gg-app-btn {
	height: 48px;
	padding-top: 0;
	padding-bottom: 0;
}

.gg-quote-card .gg-form-submit:has(.gg-app-btn) .gg-app-btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gg-quote-card:not(.gg-quote-modal__card) .gg-form-grid .gg-form-wide:has(textarea[name="instructions"]) {
	grid-column: span 2;
}

.gg-quote-card:not(.gg-quote-modal__card) .gg-form-grid .gg-form-wide:has(textarea[name="instructions"]) textarea {
	min-height: 106px;
}

/* Dense packing: a later field may fill an earlier gap. In the two-column
   layouts this puts Type of Car beside City when the double-width Pick-up
   drops to its own row, and in the pop-up lets the note sit to the left of
   the buttons. The four-column home form has no gaps, so it is unaffected. */
.gg-quote-card .gg-form-grid {
	grid-auto-flow: dense;
}

/* In the two-column pop-up the text box stays full width and the buttons sit
   in the right column with the note beside them. */

.gg-quote-modal .gg-form-grid p.gg-form-submit {
	grid-column: 2;
}

/* The standard form has an odd number of fields, so in two-column layouts
   Email takes a full row and the pairs above it stay lined up. */
.gg-quote-modal .gg-form-grid .gg-form-email {
	grid-column: 1 / -1;
}

@media screen and (max-width: 782px) {
	.gg-quote-card:not(.gg-quote-modal__card) .gg-form-grid .gg-form-wide:has(textarea[name="instructions"]),
	.gg-quote-card:not(.gg-quote-modal__card) .gg-form-grid p.gg-form-submit:has(.gg-app-btn),
	.gg-quote-card:not(.gg-quote-modal__card) .gg-form-grid .gg-form-note,
	.gg-quote-card:not(.gg-quote-modal__card) .gg-form-grid .gg-form-email {
		grid-column: 1 / -1;
	}
}

/* Four-column home form, last row: Email at the top of the first column and
   the privacy note at its foot, so that column lines up top and bottom with
   Additional Instructions and the two buttons, with no gap above Email and
   no extra row for the note. Both are placed in row 3, column 1 explicitly;
   the other fields fill the grid around them as before. */
@media screen and (min-width: 783px) {
	.gg-quote-card:not(.gg-quote-modal__card) .gg-form-grid .gg-form-email,
	.gg-quote-card:not(.gg-quote-modal__card) .gg-form-grid:has(.gg-form-email) .gg-form-note {
		grid-row: 3;
		grid-column: 1;
	}

	.gg-quote-card:not(.gg-quote-modal__card) .gg-form-grid .gg-form-email {
		align-self: start;
	}

	.gg-quote-card:not(.gg-quote-modal__card) .gg-form-grid:has(.gg-form-email) .gg-form-note {
		align-self: end;
	}
}

@media screen and (max-width: 480px) {
	.gg-quote-modal .gg-form-grid p.gg-form-submit {
		grid-column: auto;
	}
}

/* Time field (the airport form's Start Time, switched to type=time by the
   pop-up script), styled like the other inputs. */
.gg-quote-card input[type="time"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	color: var(--wp--preset--color--heading);
	background-color: var(--wp--preset--color--base);
}

.gg-quote-card input[type="time"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand);
}

/* Label for a field whose control is a group rather than one input (the
   airport form's Trip Type), matching the other field labels. */
.gg-quote-card .gg-field-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
}

/* One-way / Return as a pair of toggle buttons. The native radio stays in
   place, invisible, over each button so it is still keyboard-operable. The
   selected button is dark, not a red tint (no pinkish backgrounds); in the
   app-style forms (.gg-app-form) it is solid red, as in the app. */
.gg-quote-card .wpcf7-radio {
	display: flex;
	gap: 8px;
}

.gg-quote-card .wpcf7-radio .wpcf7-list-item {
	flex: 1 1 0;
	margin: 0;
}

.gg-quote-card .gg-form-grid .wpcf7-radio label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background-color: var(--wp--preset--color--base);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--heading);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gg-quote-card .wpcf7-radio input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.gg-quote-card .gg-form-grid .wpcf7-radio label:has(input:checked) {
	border-color: var(--wp--preset--color--heading);
	background-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--base);
}

.gg-quote-card .gg-form-grid.gg-app-form .wpcf7-radio label:has(input:checked) {
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--brand);
}

.gg-quote-card .wpcf7-radio label:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* Airport and intercity forms (.gg-app-form), laid out like the app's
   booking form: field names in sentence case above taller, rounder fields,
   Trip Type as two large toggles, the cars as a sideways-scrolling row of
   photo tiles, and a centred submit button. */
.gg-quote-card .gg-form-grid.gg-app-form {
	gap: 20px 14px;
}

/* minmax(0, 1fr): the car row is far wider than the form and must scroll
   inside it rather than widen the columns. */
.gg-quote-modal .gg-form-grid.gg-app-form {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gg-quote-card .gg-form-grid.gg-app-form > p {
	min-width: 0;
}

.gg-quote-card .gg-app-form label,
.gg-quote-card .gg-app-form .gg-field-label {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--heading);
}

.gg-quote-card .gg-app-form .gg-field-label {
	margin-bottom: 8px;
}

.gg-quote-card .gg-app-form label > .wpcf7-form-control-wrap {
	margin-top: 8px;
}

.gg-quote-card .gg-app-form :is(input[type="text"], input[type="date"], input[type="time"], input[type="tel"], input[type="email"]) {
	min-height: 52px;
	padding: 13px 16px;
	border-radius: 12px;
}

.gg-quote-card .gg-app-form textarea {
	min-height: 112px;
	padding: 13px 16px;
	border-radius: 12px;
}

.gg-quote-card .gg-form-grid.gg-app-form .wpcf7-radio label {
	min-height: 52px;
	border-radius: 12px;
	font-size: 16px;
}

.gg-quote-card .gg-car-field .wpcf7-radio {
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	padding-bottom: 10px;
}

.gg-quote-card .gg-car-field .wpcf7-radio .wpcf7-list-item {
	flex: 0 0 150px;
	scroll-snap-align: start;
}

/* One-Way Drop hides the cars not offered one-way (see functions.php). */
.gg-quote-card .gg-car-field .wpcf7-radio .wpcf7-list-item.is-hidden {
	display: none;
}

.gg-quote-card .gg-form-grid.gg-app-form .gg-car-field .wpcf7-radio label {
	flex-direction: column;
	justify-content: flex-start;
	gap: 10px;
	box-sizing: border-box;
	height: 100%;
	min-height: 136px;
	padding: 18px 10px 14px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.3;
	text-align: center;
}

.gg-quote-card .gg-car-field .wpcf7-radio label:hover {
	border-color: #b9bec7;
}

.gg-quote-card .gg-car-field .wpcf7-radio img {
	display: block;
	width: 100%;
	height: 58px;
	object-fit: contain;
}

.gg-quote-card .gg-car-field .wpcf7-list-item-label {
	display: flex;
	flex: 1;
	align-items: center;
}

/* The selected car: a red ring, the tile stays white. The ring is drawn
   inside the tile, where the scrolling row cannot clip it. */
.gg-quote-card .gg-form-grid.gg-app-form .gg-car-field .wpcf7-radio label:has(input:checked) {
	border-color: var(--wp--preset--color--brand);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--heading);
}

/* Inside the scrolling row an outside focus ring would be clipped. */
.gg-quote-card .gg-car-field .wpcf7-radio label:has(input:focus-visible) {
	outline-offset: -4px;
}

.gg-quote-card .gg-form-grid.gg-app-form p.gg-form-submit {
	grid-column: 1 / -1;
	justify-self: center;
	width: min(100%, 320px);
	margin-top: 4px;
}

.gg-quote-card .gg-app-form input[type="submit"] {
	padding: 16px 24px;
	border-radius: 12px;
	font-size: 17px;
}

.gg-quote-card .gg-form-grid.gg-app-form .gg-form-note {
	grid-column: 1 / -1;
	margin: -8px 0 0;
	text-align: center;
}

@media screen and (max-width: 480px) {
	/* Two columns even on a phone, so Start Date and Start Time stay side by
	   side as in the app; Phone and Email take a row each. */
	.gg-quote-modal .gg-form-grid.gg-app-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gg-quote-card .gg-form-grid.gg-app-form p:has(input[type="tel"], input[type="email"]) {
		grid-column: 1 / -1;
	}

	.gg-quote-card .gg-car-field .wpcf7-radio .wpcf7-list-item {
		flex-basis: 136px;
	}
}

.gg-quote-card .gg-form-grid p.gg-form-submit {
	/* Row, not column — the generic grid-cell rule above sets column, which
	   would stack CF7's spinner beneath the button and lift it out of line.
	   Selector deliberately includes the element to outrank that rule. */
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-start;
}

.gg-quote-card input[type="submit"] {
	width: 100%;
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 10px;
	padding: 13px 20px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.gg-quote-card input[type="submit"]:hover {
	background-color: var(--wp--preset--color--heading);
}

.gg-quote-card .gg-form-note {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--wp--preset--color--body);
}

/* With the Email field added, the 8 fields fill two rows exactly and the
   submit button drops to a third. The privacy note shares that row, spanning
   the first three columns, so the button is not left beside an empty band. */
.gg-quote-card .gg-form-grid .gg-form-note {
	grid-column: 1 / -2;
	align-self: end;
}

/* Footer row under the quote form. It mirrors the form's own 4-column grid
   so the app button lands exactly in the last column, directly beneath the
   submit button — as a flex row it sized to its text and sat 11px wide of
   the column on both sides, which read as misalignment. */
.gg-form-foot {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px 16px;
	align-items: center;
	margin-top: 16px;
}

/* wpautop wraps the bare <a> in a <p>, so the paragraph — not the link — is
   the grid item. Placing the column on the link alone left it in column 1. */
.gg-form-foot > p,
.gg-form-foot > .gg-app-btn {
	grid-column: -2 / -1;
	margin: 0;
}

/* Secondary to the red "Get My Quote" submit — outlined, and a step down in
   size, so it reads as an alternative rather than competing with it. Fills
   its column so its edges match the button above. */
.gg-app-btn {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--wp--preset--color--heading);
	border-radius: 10px;
	color: var(--wp--preset--color--heading);
	background-color: transparent;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.gg-app-btn:hover,
.gg-app-btn:focus-visible {
	background-color: var(--wp--preset--color--heading);
	border-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--base);
}

.gg-quote-card .wpcf7-not-valid-tip {
	font-size: 12px;
	margin-top: 4px;
}

.gg-quote-card .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
}

@media screen and (max-width: 782px) {
	.gg-quote-card .gg-form-grid,
	.gg-form-foot {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 480px) {
	.gg-quote-card .gg-form-grid,
	.gg-form-foot {
		grid-template-columns: 1fr;
	}

	/* Single column: the note would otherwise span a zero-width track. */
	.gg-quote-card .gg-form-foot .gg-form-note,
	.gg-app-btn {
		grid-column: 1 / -1;
	}
}

/* "Get a Quote" pop-up (see functions.php). The card carries .gg-quote-card,
   so every form rule above applies; this block only sizes the dialog and
   narrows the form from four columns to two. */
.gg-quote-modal {
	width: min(640px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100dvh - 32px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body);
	box-shadow: 0 30px 80px rgba(16, 16, 16, 0.25);
	overflow: auto;
	overscroll-behavior: contain;
}

.gg-quote-modal::backdrop {
	background-color: rgba(16, 16, 16, 0.55);
}

.gg-quote-modal[open] {
	animation: gg-quote-in 0.18s ease-out;
}

@keyframes gg-quote-in {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gg-quote-modal[open] {
		animation: none;
	}
}

/* No page scrolling behind the open pop-up. */
html:has(.gg-quote-modal[open]) {
	overflow: hidden;
}

.gg-quote-modal__card {
	position: relative;
	padding: 32px;
}

.gg-quote-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface-hover);
	color: var(--wp--preset--color--heading);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.gg-quote-modal__close:hover,
.gg-quote-modal__close:focus-visible {
	background-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--base);
}

/* Which service or vehicle the quote is for; hidden on the home page. */
.gg-quote-modal__eyebrow {
	margin: 0 0 6px;
	padding-right: 48px;
	color: var(--wp--preset--color--brand);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gg-quote-modal__eyebrow:empty {
	display: none;
}

.gg-quote-modal__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding-right: 48px;
	font-size: var(--wp--preset--font-size--large);
}

/* A page's own icon before the heading (Airport Drop's plane). */
.gg-quote-modal__icon {
	display: inline-flex;
	flex: none;
	color: var(--wp--preset--color--heading);
}

.gg-quote-modal__sub {
	margin: 6px 0 24px;
	font-size: 15px;
}

.gg-quote-modal .gg-form-grid,
.gg-quote-modal .gg-form-foot {
	grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 480px) {
	.gg-quote-modal .gg-form-grid,
	.gg-quote-modal .gg-form-foot {
		grid-template-columns: 1fr;
	}

	/* Phones: at desktop spacing the pop-up ran to ~930px — a screen and a
	   half of scrolling for six fields. Tighter card, header, gaps and fields
	   bring it down by about a fifth without shrinking the 16px input text
	   (anything smaller makes iOS zoom in on focus). */
	.gg-quote-modal {
		width: calc(100% - 24px);
		max-height: calc(100dvh - 24px);
	}

	.gg-quote-modal__card {
		padding: 18px 16px;
	}

	.gg-quote-modal__close {
		top: 10px;
		right: 10px;
		width: 34px;
		height: 34px;
	}

	.gg-quote-modal__eyebrow {
		margin-bottom: 2px;
		padding-right: 40px;
		font-size: 11px;
	}

	.gg-quote-modal__title {
		padding-right: 40px;
		font-size: 18px;
	}

	.gg-quote-modal__sub {
		margin: 4px 0 14px;
		font-size: 13px;
		line-height: 1.45;
	}

	.gg-quote-modal .gg-quote-modal__card .gg-form-grid {
		row-gap: 12px;
	}

	/* Short fields two to a row, so six fields take three rows and the whole
	   form fits on screen instead of scrolling. Long fields, the note and the
	   button keep a full row. The app-style forms already have two columns. */
	.gg-quote-modal .gg-form-grid:not(.gg-app-form) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 10px;
	}

	.gg-quote-modal .gg-form-grid:not(.gg-app-form) > .gg-form-span2,
	.gg-quote-modal .gg-form-grid:not(.gg-app-form) > .gg-form-wide,
	.gg-quote-modal .gg-form-grid:not(.gg-app-form) > .gg-form-email,
	.gg-quote-modal .gg-form-grid:not(.gg-app-form) > .gg-form-note,
	.gg-quote-modal .gg-form-grid:not(.gg-app-form) > p.gg-form-submit {
		grid-column: 1 / -1;
	}

	.gg-quote-modal .gg-quote-card .gg-form-grid:not(.gg-app-form) label {
		font-size: 11px;
		line-height: 1.5;
	}

	.gg-quote-modal .gg-quote-card .gg-form-grid:not(.gg-app-form) select,
	.gg-quote-modal .gg-quote-card .gg-form-grid:not(.gg-app-form) input[type="text"],
	.gg-quote-modal .gg-quote-card .gg-form-grid:not(.gg-app-form) input[type="date"],
	.gg-quote-modal .gg-quote-card .gg-form-grid:not(.gg-app-form) input[type="tel"],
	.gg-quote-modal .gg-quote-card .gg-form-grid:not(.gg-app-form) input[type="email"] {
		height: 42px;
	}

	/* Starts at three lines; it can still be dragged taller. */
	.gg-quote-modal .gg-quote-card textarea {
		height: 76px;
		min-height: 0;
	}
}

/* Home hero: gradient background with a separate PNG car cutout layered
   on top, instead of one flattened photo — keeps the car crisp and avoids
   any seam between the car and the background gradient. */
.gg-hero {
	position: relative;
	overflow: hidden;
	/* Right edge of the 1200px content column, measured from the hero's right
	   edge — shared by the phone and the car so their right edges stay locked
	   together. Uses the hero's own width rather than 100vw, which would
	   include the scrollbar. */
	--gg-hero-edge: max(24px, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2));
}

/* Breathing room down the left edge of the hero copy, so the tagline
   isn't flush against the viewport edge on wide screens. */
.gg-hero .wp-block-cover__inner-container {
	/* Align the hero copy with the site's content column, so it lines up with
	   the header logo and the quote card below instead of hugging the
	   viewport edge on wide screens. Deliberately NOT position:relative —
	   content column. WordPress's cover block sets position:relative here by
	   default, which would make the absolutely-positioned car resolve against
	   this narrow box; position:static pushes it back out to .gg-hero so the
	   car can run full-bleed to the right. */
	position: static;
	width: min(var(--wp--style--global--content-size, 1200px), 100% - 48px);
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

/* Car and phone are positioned independently but must move as one group —
   their overlap is the composition. Nudging the pair is done with a single
   shared translate rather than by editing both offsets, so the alignment
   between them can never drift. More negative = further left. */
.gg-hero-car,
.gg-hero-phone {
	transform: translateX(0);
}

.gg-hero-car {
	--gg-car-h: clamp(360px, 41vw, 600px);
	position: absolute;
	/* The car's visible right edge sits exactly on the phone's right edge, so
	   the phone (painted on top) hides the car's rear. The PNG has transparent
	   padding on its right — 276px of its 1600px width — so the box is pushed
	   past the phone's edge by that much: 276/1600 of the rendered width,
	   which is height × 1600/1067, i.e. 0.2587 × height. */
	right: calc(var(--gg-hero-edge) - var(--gg-car-h) * 0.2587);
	/* The source image is a full uncropped frame — the car fills only 56% of
	   its height, with ~24% empty space below it. The larger height and the
	   deeper negative offset compensate so the car itself renders at a
	   similar size and sits at the same height as a tightly-cropped cutout. */
	bottom: -40px;
	height: var(--gg-car-h);
	width: auto;
	max-width: 72%;
	object-fit: contain;
	pointer-events: none;
	/* Fully opaque. At reduced opacity the hero's red chevron pattern shows
	   straight through the bodywork, which reads as a line drawn across the
	   car. Depth comes from the phone overlapping it instead. */
	opacity: 1;
}

/* App phone in the hero. It is placed AFTER the car in the markup, so with
   every layer at z-index:auto the paint order alone puts it in front of the
   vehicle — no z-index juggling against the cover block's background span. */
.gg-hero-phone {
	position: absolute;
	/* Covers the car's rear so the two read as one group rather than two
	   separate objects. Height is capped so the whole phone fits inside the
	   hero without the top being clipped by the cover block's overflow. */
	/* Right edge lines up with the quote card below it (see --gg-hero-edge). */
	right: var(--gg-hero-edge);
	bottom: 90px;
	height: clamp(320px, 36vw, 540px);
	width: auto;
	object-fit: contain;
	pointer-events: none;
	/* Front layer, at full strength. Its source image had the on-screen rates
	   and the customer name removed, so it is safe to read clearly. */
	opacity: 1;
	filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.20));
}

@media screen and (max-width: 1200px) {
	/* Below this the car scales down and the pair drifts into the headline's
	   column. The car is the hero's subject, so the phone is what goes. */
	.gg-hero-phone {
		display: none;
	}
}

@media screen and (max-width: 782px) {
	.gg-hero-car {
		position: static;
		display: block;
		max-width: 100%;
		width: 100%;
		height: auto;
		margin: var(--wp--preset--spacing--30) auto 0;
		filter: drop-shadow(0 20px 20px rgba(40, 5, 5, 0.3));
	}

	/* On a phone the pair comes back as it is on desktop: the app phone sits
	   over the car's rear on the right. Both stay in the flow, so nothing can
	   land on the copy above. Percentage margins resolve against the column
	   width, which is also the car's width — so the car is 0.667 × width tall
	   (1600 × 1067 source) with its wheels at ≈0.53 × width. The phone is
	   28% wide (≈0.60 × width tall); pulling it up by 73.9% puts its bottom
	   on that wheel line and its left edge across the car's rear. */
	.gg-hero-phone {
		display: block;
		position: relative;
		/* Lifted so its bottom edge isn't tucked under the quote card that
		   overlaps the hero; relative offset, so nothing else moves. */
		top: -18px;
		right: auto;
		bottom: auto;
		width: 28%;
		height: auto;
		max-width: none;
		margin: -73.9% 0 24px auto;
		filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.22));
	}

	/* The hero copy is pulled up 70px (inline, from the pattern) to suit the
	   tall desktop hero. On a phone that ate the 40px top padding and left
	   "Car rental in Pakistan" 1–5px under the header, or tucked beneath it
	   on wider phones. The cover centres its content, so only about half of
	   any change here shows as extra space — hence dropping the pull-up
	   entirely rather than just easing it. */
	.gg-hero .wp-block-cover__inner-container > .wp-block-group {
		margin-top: 0 !important;
	}
}

/* Home "Why Choose Get Gaari": the four cards on the left, the Fortuner on
   the right. The columns stretch, so the car's column is exactly as tall as
   the card grid and the car sits centred against it, running slightly past
   the column's sides. */
.gg-why .gg-why-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--20);
	overflow: visible;
}

.gg-why .gg-why-car {
	flex: 0 0 auto;
	width: 112%;
	max-width: none;
	margin: 0;
}

.gg-why .gg-why-car img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 781px) {
	.gg-why .gg-why-car {
		width: 100%;
	}
}

/* Home "Services We Offer": eight tiles, each a link to its service page,
   in the same language as the vehicle cards — large radius, hairline border,
   a small monospace number, and a lift on hover. The whole tile is the
   link. */
.gg-offer-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.gg-offer-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 230px;
	padding: 26px;
	border: 1px solid rgba(16, 16, 16, 0.08);
	border-radius: 22px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--heading) !important;
	text-decoration: none !important;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.gg-offer-card:hover,
.gg-offer-card:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(16, 16, 16, 0.18);
	box-shadow: 0 18px 40px -18px rgba(16, 16, 16, 0.18);
}

/* Same monospace label as the vehicle cards' type label. */
.gg-offer-num,
.gg-offer-link {
	font-family: var(--gg-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.gg-offer-num {
	color: rgba(16, 16, 16, 0.45);
}

/* Title and text use the same presets as the site's other cards (Why Choose
   Get Gaari, the service-page feature cards): body size for the title, the
   small size for the description. */
.gg-offer-title {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.65;
	letter-spacing: inherit;
	transition: color 0.2s ease;
}

.gg-offer-text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	color: var(--wp--preset--color--body);
}

.gg-offer-link {
	margin-top: auto;
	padding-top: 8px;
	color: var(--wp--preset--color--brand);
}

.gg-offer-link span {
	display: inline-block;
	transition: transform 0.2s ease;
}

.gg-offer-card:hover .gg-offer-title {
	color: var(--wp--preset--color--brand);
}

.gg-offer-card:hover .gg-offer-link span {
	transform: translateX(4px);
}

@media screen and (max-width: 1024px) {
	.gg-offer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 600px) {
	.gg-offer-grid {
		grid-template-columns: 1fr;
	}

	.gg-offer-card {
		min-height: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gg-offer-card,
	.gg-offer-link span {
		transition: none;
	}

	.gg-offer-card:hover,
	.gg-offer-card:hover .gg-offer-link span {
		transform: none;
	}
}

/* Checkmark benefit list in the hero. */
.gg-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 10px 32px;
}

.gg-check-list li {
	position: relative;
	padding-left: 26px;
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

.gg-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

@media screen and (max-width: 600px) {
	.gg-check-list {
		grid-template-columns: 1fr;
	}
}

/* Floating WhatsApp click-to-chat button, present on every page. */
/* Floating contact buttons, stacked bottom-right: call above, WhatsApp below.
   WhatsApp sits lowest because it is the channel most enquiries arrive on and
   the closest to the thumb on a phone. */
.gg-float-stack {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.gg-whatsapp-float,
.gg-call-float {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
	text-decoration: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gg-call-float {
	/* Icon plus a "Call" label, so the button reads as a phone call and not
	   just a dark circle. Sized by padding, like the WhatsApp pill. */
	padding: 0 22px 0 18px;
	gap: 8px;
	background-color: var(--wp--preset--color--heading);
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

.gg-whatsapp-float {
	/* Padding rather than a fixed width, so the pill sizes to its label. */
	padding: 0 22px 0 16px;
	gap: 10px;
	background-color: #25d366;
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

.gg-whatsapp-float:hover,
.gg-call-float:hover,
.gg-whatsapp-float:focus-visible,
.gg-call-float:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
	color: #ffffff !important;
}

/* Phone-only WhatsApp label; the full "How can I help?" is too wide there. */
.gg-float-label-mobile {
	display: none;
}

@media screen and (max-width: 600px) {
	.gg-float-stack {
		right: 16px;
		bottom: 16px;
		gap: 10px;
	}

	/* Phone: icons only, as round buttons. Two labels ("I need help", "Need
	   help?") said nearly the same thing and covered the hero's phone
	   picture. The links keep their aria-labels for screen readers. */
	.gg-whatsapp-float,
	.gg-call-float {
		width: 56px;
		height: 56px;
		padding: 0;
		gap: 0;
	}

	.gg-call-label,
	.gg-float-label,
	.gg-float-label-mobile {
		display: none;
	}

	/* The two buttons are pinned over the bottom-right corner, which is exactly
	   where the footer's Refund Policy and Terms of Service links end up —
	   even fully scrolled down they stayed hidden. Room below the footer lets
	   the last links scroll clear of them (2 × 56px + 10px gap + 16px). */
	.wp-site-blocks > footer > .has-background {
		padding-bottom: 150px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gg-whatsapp-float,
	.gg-call-float {
		transition: none;
	}

	.gg-whatsapp-float:hover,
	.gg-call-float:hover {
		transform: none;
	}
}

/* Icon badge used in the "Why Choose Us" trust cards. */
.gg-icon-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background-color: var(--wp--preset--color--surface);
	font-size: 22px;
	line-height: 1;
}

/* FAQ accordion: replace the bare browser <details> marker with a custom
   plus/minus indicator, add dividers and hover/open states so it reads as
   a designed component rather than default browser chrome. */
.gg-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 22px 0;
	/* Each row otherwise inherits the global 40px blockGap as a top margin,
	   pushing question-to-question spacing to 121px and leaving a gap between
	   one row's hairline and the next. Zeroed so the borders meet and the
	   rows read as one continuous list; the padding alone sets the rhythm. */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.gg-faq .wp-block-details:first-child {
	border-top: 1px solid var(--wp--preset--color--line);
}

.gg-faq .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	list-style: none;
	cursor: pointer;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--heading);
	transition: color 0.15s ease;
}

.gg-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* A bare hairline "+" rather than a filled chip. The chip competed with the
   question for attention on every row; at this size the marker only needs to
   signal that the row opens. Drawn from two rules so it can rotate into a
   "−" instead of swapping glyphs, which would jump on toggle. */
.gg-faq .wp-block-details summary::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-image:
		linear-gradient(var(--wp--preset--color--body), var(--wp--preset--color--body)),
		linear-gradient(var(--wp--preset--color--body), var(--wp--preset--color--body));
	background-size: 100% 1.5px, 1.5px 100%;
	background-position: center, center;
	background-repeat: no-repeat;
	transition: transform 0.25s ease, background-image 0.15s ease;
}

/* Rotating 90° turns the vertical stroke horizontal, leaving a "−". */
.gg-faq .wp-block-details[open] summary::after {
	transform: rotate(90deg);
	background-size: 100% 1.5px, 0 100%;
}

.gg-faq .wp-block-details summary:hover {
	color: var(--wp--preset--color--brand);
}

/* FAQ questions: the browser draws a focus box round a <summary> after a
   mouse click, which read as a stray outline. Dropped for mouse and touch;
   keyboard users (Tab) still get a clear red outline via :focus-visible. */
.wp-block-details summary:focus {
	outline: none;
}

.wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 4px;
	border-radius: 6px;
}

.gg-faq .wp-block-details p {
	margin-top: 16px;
	margin-bottom: 0;
	max-width: 88%;
	color: var(--wp--preset--color--body);
}

@media (prefers-reduced-motion: reduce) {
	.gg-faq .wp-block-details summary,
	.gg-faq .wp-block-details summary::after {
		transition: none;
	}
}

/* Footer nav links: give them a hover state so they read as interactive,
   not just static text on the dark panel. */
/* The doubled class outranks core navigation's
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   { color: inherit }`, which otherwise hands the links the panel's pure white. */
footer .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.15s ease;
}

footer .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
footer .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus {
	color: #ffffff;
	text-decoration: none;
}

/* Numbered step badge used by the "How it works" sections on service pages. */
.gg-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

/* Price block on the vehicle/pricing cards. */
.gg-price {
	margin: 0;
	color: var(--wp--preset--color--brand);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.gg-price small {
	color: var(--wp--preset--color--body);
	font-size: 13px;
	font-weight: 400;
}

.gg-price-sub {
	margin: 4px 0 0;
	color: var(--wp--preset--color--body);
	font-size: 13px;
}

/* Pill label used to tag a vehicle class on pricing cards. */
.gg-tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Short red rule under the hero tagline, matching the brand creative. */
.gg-hero-rule {
	width: 64px;
	height: 3px;
	border: 0;
	margin-left: 0;
	opacity: 1;
}

/* App illustration used as a service badge above a page heading. */
.gg-service-badge {
	margin: 0 0 14px;
}

.gg-service-badge img {
	display: block;
	border-radius: 12px;
}

/* Every button turns black on hover, so it is always clear which one the
   pointer is on. theme.json sets this for WordPress buttons, but the outline
   buttons carry preset colour classes (!important) for their text and
   border, which would leave dark text on the black fill. */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--heading) !important;
	border-color: var(--wp--preset--color--heading) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Home "Why Choose Us": the closing About panel. Paragraph margins plus the
   flow gap left ~50px between the two paragraphs and extra space inside the
   panel's bottom padding; one 14px gap instead. */
.gg-about-strip .wp-block-column > p {
	margin-top: 0;
	margin-bottom: 0;
}

.gg-about-strip .wp-block-column > p + p {
	margin-top: 14px !important;
}

/* Phones: the desktop padding left the text a narrow strip down the middle. */
@media (max-width: 781px) {
	.gg-about-strip {
		padding: 24px 20px !important;
	}
}

/* "Continue on WhatsApp" button shown after the quote form is submitted. */
.gg-wa-continue {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 18px;
	background-color: #25d366;
	color: #ffffff !important;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
}

.gg-wa-continue:hover {
	background-color: var(--wp--preset--color--heading);
	color: #ffffff !important;
}

/* Filterable fleet listing. A real CSS grid rather than wp:columns rows —
   hiding a card inside a columns row would leave a hole where it sat, and
   the remaining cards could not reflow to close the gap. */
.gg-fleet-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: 16px;
}

.gg-fleet-filter {
	padding: 11px 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--heading);
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gg-fleet-filter:hover {
	background-color: var(--wp--preset--color--heading);
	border-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--base);
}

.gg-fleet-filter.is-active {
	background-color: var(--wp--preset--color--heading);
	border-color: var(--wp--preset--color--heading);
	color: var(--wp--preset--color--base);
}

.gg-fleet-count {
	margin: 0 0 24px;
	text-align: center;
	font-size: 15px;
	color: var(--wp--preset--color--body);
}

/* Monospace for small labels (Services We Offer tiles, footer headings).
   Loaded in functions.php. */
:root {
	--gg-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.gg-fleet-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	/* Room for the card shadows and the hover lift, which would otherwise be
	   clipped at the section edge. */
	padding: 4px 4px 14px;
	margin: -4px -4px -14px;
}

/* Vehicle card in the layout of the app's "Popular Cars" cards: white, a
   large radius and a soft shadow instead of a border, a red type badge, the
   car on white, then the name and a price row with a round arrow button. */
.gg-fleet-card {
	display: flex;
	flex-direction: column;
	padding: 18px 18px 20px;
	border: 0;
	border-radius: 26px;
	background-color: var(--wp--preset--color--base);
	box-shadow:
		0 10px 30px rgba(16, 16, 16, 0.07),
		0 1px 3px rgba(16, 16, 16, 0.04);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* The filter hides cards with the `hidden` attribute, which works through the
   browser's `[hidden] { display: none }` rule — but the `display: flex` above
   is a class-level declaration and outranks it, so filtered cards stayed on
   screen while the count said otherwise. */
.gg-fleet-card[hidden] {
	display: none;
}

.gg-fleet-card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 18px 40px rgba(16, 16, 16, 0.12),
		0 2px 6px rgba(16, 16, 16, 0.05);
}

/* Photo straight on the white card. Overflow is clipped so the hover zoom
   stays inside the photo area. */
.gg-fleet-media {
	position: relative;
	padding: 46px 0 4px;
	background-color: transparent;
	overflow: hidden;
}

.gg-fleet-card img {
	display: block;
	position: relative;
	width: 100%;
	height: 150px;
	object-fit: contain;
	transition: transform 0.5s cubic-bezier(0.22, 0.68, 0.35, 1);
}

.gg-fleet-card:hover img {
	transform: scale(1.07);
}

/* Red type badge, top left, as in the app. */
.gg-fleet-media .gg-tag {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 6px 14px;
	border-radius: 10px;
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: none;
	box-shadow: none;
}

.gg-fleet-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 2px 0;
}

.gg-fleet-name {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--heading);
	transition: color 0.2s ease;
}

.gg-fleet-card:hover .gg-fleet-name {
	color: var(--wp--preset--color--brand);
}

/* Price and buttons pushed to the bottom so they line up across a grid row
   even when a name wraps onto two lines. */
.gg-fleet-foot {
	margin-top: auto;
	padding-top: 10px;
}

.gg-fleet-body .gg-fleet-actions {
	padding-top: 16px;
}

.gg-fleet-body .gg-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin: 0;
	line-height: 1.2;
}

/* "Starting from" above the rate: the rates are the lowest daily price. */
.gg-fleet-body .gg-price-from {
	margin: 0 0 2px;
	font-size: 13px;
	line-height: 1.3;
	color: rgba(16, 16, 16, 0.55);
}

.gg-fleet-body .gg-price-amount {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--brand);
}

.gg-fleet-body .gg-price-unit {
	font-size: 16px;
	font-weight: 400;
	color: rgba(16, 16, 16, 0.55);
}

.gg-fleet-body .gg-price-sub {
	margin: 0;
	font-size: 15px;
	color: var(--wp--preset--color--body);
}

@media (prefers-reduced-motion: reduce) {
	.gg-fleet-card,
	.gg-fleet-card img {
		transition: none;
	}

	.gg-fleet-card:hover {
		transform: none;
	}

	.gg-fleet-card:hover img {
		transform: none;
	}
}


/* Per-vehicle booking row: the quote form first, the app beside it. */
.gg-fleet-actions {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

/* Phones: the card is one wide column, so "Get Quote" taking all the spare
   width made it 154px beside a 110px "Book in App". Two equal halves. */
@media screen and (max-width: 600px) {
	.gg-fleet-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

/* The floating buttons are flex rows too, and their icons would otherwise
   shrink along with the label. */
.gg-whatsapp-float svg,
.gg-call-float svg {
	flex: 0 0 auto;
}

/* Buttons with softly rounded corners. "Get Quote" takes the spare width;
   "Book in App" sizes to its label. */
.gg-fleet-quote,
.gg-fleet-app {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Primary: the quote form, in the brand red. */
.gg-fleet-quote {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--brand);
	color: #ffffff !important;
}

.gg-fleet-quote:hover,
.gg-fleet-quote:focus-visible {
	border-color: var(--wp--preset--color--heading);
	background-color: var(--wp--preset--color--heading);
}

/* Secondary: book in the app. Black outline and text, so the red quote
   button stays the obvious first choice; fills black on hover. */
.gg-fleet-app {
	flex: 0 0 auto;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--heading);
	background-color: transparent;
	color: var(--wp--preset--color--heading) !important;
}

.gg-fleet-app:hover,
.gg-fleet-app:focus-visible {
	border-color: var(--wp--preset--color--heading);
	background-color: var(--wp--preset--color--heading);
	color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
	.gg-fleet-quote,
	.gg-fleet-app {
		transition: none;
	}
}

.gg-fleet-empty {
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--body);
}

@media screen and (max-width: 1024px) {
	.gg-fleet-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 782px) {
	.gg-fleet-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 480px) {
	.gg-fleet-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gg-fleet-filter,
	.gg-fleet-card {
		transition: none;
	}
}

/* Tick list used on the contact page. */
.gg-tick-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gg-tick-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
}

.gg-tick-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}

/* Industry chips on the About page. Deliberately not .gg-tag — that one is a
   solid brand-red badge at 12px, sized to sit on a vehicle card. A row of five
   of those reads as five alerts, so these are quiet outlined pills instead. */
.gg-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.gg-industry-tag {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body);
	font-size: 16px;
	font-weight: 600;
}

/* Full-bleed photographs used beside page copy (the Trips & Tours hero).
   Unlike the cut-out car shots, these are rectangular scenes, so they need a
   radius to sit with the rounded cards used everywhere else on the page. */
.gg-photo img {
	border-radius: 14px;
	display: block;
	width: 100%;
	height: auto;
}

/* App screenshots shown as a phone screen (the Airport Drop booking form).
   The screenshot is mostly white, so on a light section it needs a shadow to
   read as a device rather than as a floating fragment. Its corners are already
   rounded in the file itself, so no radius or overflow clipping is needed here
   — drop-shadow follows the alpha edge, box-shadow would not. */
.gg-app-screen img {
	filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.14));
}

/* Footer column headings ("Company", "Services", "Cities", "Contact").
   They use the `small` preset, which after the type-scale increase became
   18px — smaller than the 21px links beneath them, so they stopped reading
   as headings. Uppercase + letter-spacing + weight makes them read as
   section labels regardless of size, and the bottom margin groups each
   heading with its own list. */
/* App QR in the footer. The code is black-on-transparent, so it sits on its
   own white tile — on the dark footer the modules would otherwise have no
   contrast and the code would not scan at all. */
.gg-footer-qr {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
	text-decoration: none !important;
	color: inherit !important;
}

.gg-footer-qr img {
	display: block;
	width: 88px;
	height: 88px;
	padding: 6px;
	border-radius: 14px;
	background-color: #ffffff;
}

.gg-footer-qr span {
	font-family: var(--gg-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	transition: color 0.15s ease;
}

.gg-footer-qr:hover span {
	color: #ffffff;
}

/* Social links in the footer brand column: round, outlined buttons. */
.gg-social {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}

.gg-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.8) !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gg-social a:hover,
.gg-social a:focus-visible {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--panel-dark) !important;
}

/* Footer link lists. The vertical navigation blocks inherit the global
   blockGap (40px), which between single-line links reads as unrelated items
   scattered down the column rather than one list — and stretched the
   8-item Services column to nearly twice the height of its neighbours.
   Scoped to the columns so the horizontal legal nav in the bottom bar keeps
   its wider spacing. */
footer .wp-block-columns .wp-block-navigation {
	gap: 12px;
}

footer h3.wp-block-heading {
	font-family: var(--gg-mono);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: 400;
	/* Beats the .has-small-font-size class WordPress puts on the heading. */
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 18px;
}


/* Footer text: brand description, address, copyright. */
footer p {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}

footer a[href^="tel:"],
footer a[href^="mailto:"] {
	color: rgba(255, 255, 255, 0.85) !important;
	text-decoration: none;
	transition: color 0.15s ease;
}

footer a[href^="tel:"]:hover,
footer a[href^="mailto:"]:hover {
	color: #ffffff !important;
}

footer .wp-block-navigation {
	margin-top: 0;
}

/* Footer balance. Services has 16 links, so it runs as two columns of eight
   rather than one tall list that dwarfed the others. minmax(0, 1fr) lets the
   links wrap instead of overflowing when the column narrows. */
footer .gg-footer-services .wp-block-navigation__container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
}

/* Phones: the columns stack full-width and two link columns no longer fit,
   so Services goes back to a single list. */
@media screen and (max-width: 599px) {
	footer .gg-footer-services .wp-block-navigation__container {
		grid-template-columns: 1fr;
	}
}

/* Cities and Company share one column; space the second heading off the
   list above it. */
footer .gg-footer-stack > .wp-block-navigation + h3.wp-block-heading {
	margin-top: 32px;
}

/* First line under every column heading starts at the same height — the
   Contact column's paragraph otherwise picked up the flow layout's top
   margin and sat below the first link in the other columns. */
footer .wp-block-column > h3.wp-block-heading + * {
	margin-top: 0;
}

/* Bottom bar: small monospace copyright and legal links. */
footer .gg-footer-bottom p,
footer .gg-footer-bottom .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-family: var(--gg-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.45);
}

footer .gg-footer-bottom .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: #ffffff;
}

/* Phones: the legal links wrapped into a ragged right-aligned pair plus a
   stray third line. Stack them in one left-aligned column under the
   copyright instead, where they also stay clear of the floating buttons. */
@media (max-width: 781px) {
	footer .gg-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	footer .gg-footer-bottom .wp-block-navigation,
	footer .gg-footer-bottom .wp-block-navigation__container {
		--navigation-layout-justification-setting: flex-start;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 14px;
	}
}


/* Geometric brand pattern behind the hero. The source art has solid red
   triangles across its lower third; the file is cropped above them so only
   the thin outlines show, and white is knocked out to transparent so the
   hero-tint colour still reads underneath. */
.gg-hero .wp-block-cover__background {
	background-image: url("/wp-content/uploads/2026/09/hero-pattern.png");
	/* Fit to the hero's height rather than cover — the hero is far wider than
	   the artwork, so cover zooms in until the lines are thick enough to cut
	   through the headline.
	   The artwork has ~45px of empty space above where the diagonal enters its
	   left edge. At the old -40px offset that entry point landed just inside
	   the hero, so the line appeared to begin in mid-air. Pulling the image up
	   past it puts the entry above the hero, so the line now crosses the top
	   edge — same position and angle, just no longer clipped short. */
	background-size: auto 118%;
	background-position: right -60px top -104px;
	background-repeat: no-repeat;
}

/* The global type-scale increase pushed the hero H1 to 60px, which was too
   large for the three-line brand lockup. Scale the hero copy back to where
   it read best, without shrinking headings elsewhere on the site. */
.gg-hero h1 {
	font-size: clamp(34px, 4vw, 46px);
	line-height: 1.05;
}

.gg-hero .has-large-font-size {
	font-size: clamp(20px, 2vw, 24px);
}

.gg-hero p.has-heading-color,
.gg-hero p.has-body-color {
	font-size: clamp(16px, 1.4vw, 18px);
}

/* ---------- Phone layout fixes ---------- */

/* The parent theme pads the page with spacing preset 50, which this theme
   fixes at 80px. On a phone that left anything not full-width (the home app
   features, the home quote card, the policy pages) only 230px of a 390px
   screen — "Transparent" was breaking mid-word. */
@media (max-width: 781px) {
	html body {
		--wp--style--root--padding-left: 24px;
		--wp--style--root--padding-right: 24px;
	}

	/* Stat columns (home, About) kept their left divider once stacked. */
	.wp-block-columns > .wp-block-column[style*="border-left"] {
		border-left-width: 0 !important;
	}
}

/* Header row lines up with the page text. It used the 1400px "wide" width
   while every section's text sits in the 1200px content column, so the logo
   started 40px left of the text on a laptop and 100px on a wide screen.
   Sections are full width, so their text starts at the centred 1200px column
   or at the section's own side padding (spacing 30), whichever is further in;
   the root page padding never applies to them. The header does the same:
   no root padding on its container, and a row of content width plus that
   side padding on each side. */
.site-header-fixed > .wp-block-group {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.site-header-fixed > .wp-block-group > .alignwide {
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--content-size) + 2 * var(--wp--preset--spacing--30)) !important;
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}

/* The logo file has 2px of transparent edge before the red; start the red,
   not the file, on the text line. */
.gg-header-logo img {
	margin-left: -2px;
}

/* Phone menu: the header navigation is right-aligned, and the open overlay
   inherited it — one-line items were pushed right while wrapped ones started
   on the left. */
.site-header-fixed .wp-block-navigation__responsive-container.is-menu-open,
.site-header-fixed .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.site-header-fixed .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.site-header-fixed .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}

/* Phone menu: Services and Cities collapse behind an arrow (button added by
   the script in functions.php). The arrow sits beside the label and the
   list drops onto its own row below when opened. Only parents that have
   the arrow are collapsed, so without the script the lists stay visible. */
.gg-sub-toggle {
	display: none;
}

.site-header-fixed .wp-block-navigation__responsive-container.is-menu-open .has-child {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.site-header-fixed .wp-block-navigation__responsive-container.is-menu-open .gg-sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -8px 0 -8px 6px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.gg-sub-toggle svg {
	transition: transform 0.2s ease;
}

.gg-sub-open > .gg-sub-toggle svg {
	transform: rotate(180deg);
}

/* Core puts the full block gap (40px) above an open submenu; with the links'
   own padding that left the first sub-item 48px below its heading. */
.site-header-fixed .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
	flex-basis: 100%;
	padding-top: 8px;
}

.site-header-fixed .wp-block-navigation__responsive-container.is-menu-open .has-child:has(> .gg-sub-toggle):not(.gg-sub-open) > .wp-block-navigation__submenu-container {
	display: none;
}

/* The floating Call / WhatsApp buttons sat on top of the open menu: the menu
   lives inside the sticky header (stacked at 999), the buttons at 1000. */
html.has-modal-open .gg-float-stack {
	display: none;
}