/*
Theme Name: Isatou Green Oil
Theme URI: https://isatougreenoil.com
Author: Gcubed International
Author URI: https://isatougreenoil.com
Description: A block theme for Isatou Green Oil Company Ltd — petroleum, marine and automotive services in The Gambia. Full Site Editing / Gutenberg compatible: every page is built from native, editable blocks, and the header is managed in Appearance → Customize → Header. Includes block patterns for the home, about, services, car dealership and contact pages.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: isatou-green-oil
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-logo, custom-menu, featured-images, block-styles, editor-style, business
*/

/* ==========================================================================
   Isatou Green Oil — component styles
   Design tokens live in theme.json. Components are core blocks carrying igo-*
   classes (Advanced → Additional CSS class(es)); icons come from the
   igo-ico / igo-ico-{name} classes in assets/css/icons.css.

   Specificity note: WordPress's layout rules are
   `:root :where(.is-layout-flow) > * { margin-block-start: 24px }` (0,1,0),
   so component rules use `.wp-block-group.igo-x` (0,2,0) to win reliably.
   ========================================================================== */

:root {
	--brand: #125F29;
	--brand-glow: #1b7a37;
	--brand-dark: #0d4a20;
	--color-accent: oklch(0.48 0.12 148);
	--color-accent-100: oklch(0.96 0.03 148);
	--color-accent-200: oklch(0.91 0.06 148);
	--color-accent-300: oklch(0.85 0.10 148);
	--color-accent-700: oklch(0.49 0.11 148);
	--color-accent-800: oklch(0.37 0.08 148);
	--color-surface: #f3f6f3;
	--color-text: #15201a;
	--color-neutral-300: #3f4843;
	--color-neutral-400: #56605a;
	--color-neutral-500: #6c7670;
	--color-divider: color-mix(in srgb, #15201a 12%, transparent);
	--radius-md: 8px;
	--radius-lg: 14px;
	--shadow-sm: 0 0 0 1px #e1e5e2;
	--shadow-md: 0 0 0 1px #d3d9d5, 0 8px 24px rgba(20, 40, 28, .10);
	--shadow-lg: 0 0 0 1px #c5ccc7, 0 16px 40px rgba(20, 40, 28, .14);
	--brand-radial: radial-gradient(120% 140% at 0% 0%, var(--brand-glow), var(--brand) 55%, var(--brand-dark));
	--brand-linear: linear-gradient(160deg, var(--brand-glow), var(--brand) 60%);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: clip; background: #ffffff; color: var(--color-text); }

/* The design has no underlined links (WordPress defaults to underlined). */
body a { text-decoration: none; }
/* Blog posts keep underlines in running prose for readability. */
body.single-post .wp-block-post-content :where(p, li) > a { text-decoration: underline; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px; word-wrap: normal !important;
}

/* Top-level template parts sit flush (sections set their own spacing). */
.wp-site-blocks > * { margin-block-start: 0; }

/* ==========================================================================
   Type helpers
   ========================================================================== */
.igo-eyebrow {
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--color-accent-700); font-weight: 500;
}
.igo-eyebrow--muted { color: var(--color-neutral-500); }
.igo-muted { color: var(--color-neutral-400); }
.igo-small { font-size: 13px; }
.igo-lead { font-size: 16px; line-height: 1.6; color: var(--color-neutral-400); }
.igo-measure { max-width: 640px; }
.igo-prose { font-size: 16px; line-height: 1.65; color: var(--color-neutral-300); }
.igo-plain-links a { color: var(--color-text); }
.igo-plain-links a:hover { color: var(--brand); }

.igo-arrow-link a,
a.igo-arrow-link { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 500; }

/* Eyebrow with a round icon badge (Services page groups). */
.igo-eyebrow--icon { display: flex; align-items: center; gap: 14px; }
.igo-eyebrow--icon::before {
	font-family: "Phosphor" !important; content: var(--igo-ico);
	width: 44px; height: 44px; border-radius: 50%; flex: none;
	display: grid; place-items: center; font-size: 22px; letter-spacing: 0; line-height: 1;
	background: var(--color-accent-100); color: var(--brand);
}

/* Vertical rhythm inside flow groups. */
.is-layout-flow > .igo-eyebrow + .wp-block-heading { margin-block-start: 8px; }
.is-layout-flow > .wp-block-heading + .igo-lead { margin-block-start: 12px; }
.is-layout-flow > .wp-block-heading + .igo-prose { margin-block-start: 18px; }
.is-layout-flow > .igo-prose + .igo-prose { margin-block-start: 14px; }
.is-layout-flow > .igo-lead + * { margin-block-start: 28px; }
.is-layout-flow > .igo-section-head + *,
.is-layout-flow > .igo-section-head__text + * { margin-block-start: 28px; }
.is-layout-flow > .igo-milestones + .igo-arrow-link { margin-block-start: 8px; }

/* ==========================================================================
   Layout utilities
   ========================================================================== */
.wp-block-group.igo-section { margin-block-start: 104px; }
.wp-block-group.igo-section--first { margin-block-start: 96px; }
.wp-block-group.igo-divisions { margin-block-start: -56px; position: relative; z-index: 1; }
@media (max-width: 781px) {
	.wp-block-group.igo-section,
	.wp-block-group.igo-section--first { margin-block-start: 64px; }
	.wp-block-group.igo-divisions { margin-block-start: -32px; }
}

.wp-block-group.igo-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--igo-min, 280px)), 1fr));
}
.wp-block-group.igo-grid > * { margin: 0; }
.igo-grid--200 { --igo-min: 200px; }
.igo-grid--240 { --igo-min: 240px; }
.igo-grid--260 { --igo-min: 260px; }
.igo-grid--300 { --igo-min: 300px; }
.igo-grid--320 { --igo-min: 320px; }
.igo-grid--360 { --igo-min: 360px; }

.wp-block-group.igo-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: 48px;
	align-items: center;
}
.wp-block-group.igo-split > * { margin: 0; }
.wp-block-group.igo-split--top { align-items: start; }

/* Section heading row: eyebrow + H2 on the left, arrow link on the right. */
.wp-block-group.igo-section-head { align-items: flex-end; gap: 16px; }
.wp-block-group.igo-section-head__text > * { margin: 0; }
.wp-block-group.igo-section-head__text > * + * { margin-block-start: 8px; }

/* ==========================================================================
   Header (rendered by inc/header.php from Customizer settings)
   ========================================================================== */
.igo-container { max-width: calc(1240px + 48px); margin-inline: auto; padding-inline: 24px; }

/* Sticky: the template-part wrapper sticks (a sticky child can't move inside
   a parent of its own height). */
.wp-site-blocks > header.wp-block-template-part:has(.igo-sticky) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 30;
}
@media (max-width: 600px) {
	/* The admin bar isn't fixed on small screens. */
	.wp-site-blocks > header.wp-block-template-part:has(.igo-sticky) { top: 0; }
}

.igo-topbar { background: var(--brand); color: #eafaef; font-size: 13px; }
.igo-topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 8px 20px; flex-wrap: wrap; padding-block: 8px; }
.igo-topbar-address { display: inline-flex; align-items: center; }
.igo-topbar-contact { display: flex; gap: 18px; flex-wrap: wrap; margin-inline-start: auto; }
.igo-topbar a { display: inline-flex; align-items: center; color: #eafaef; }
.igo-topbar a:hover { color: #fff; }

.igo-header { position: relative; isolation: isolate; border-bottom: 1px solid rgba(21, 32, 26, .12); }
/* Frosted background on a pseudo-element: a backdrop-filter on the header
   itself would trap the position:fixed mobile menu inside the header bar. */
.igo-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.igo-header-row { display: flex; align-items: center; gap: 24px; padding-block: 12px; }

.igo-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); flex: none; }
.igo-brand:hover { color: var(--color-text); }
.igo-brand__mark { height: 38px; width: auto; display: block; }
.igo-brand__logo { height: var(--igo-header-logo-h, 44px); width: auto; max-width: 260px; object-fit: contain; display: block; }
.igo-brand-name { font-weight: 600; letter-spacing: -0.01em; font-size: 16px; white-space: nowrap; }
.igo-brand-name .igo-accent { color: var(--brand); }

.igo-nav { flex: 1; display: flex; justify-content: center; }
.igo-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.igo-nav__list a {
	display: block; padding: 6px 12px; border-radius: 8px;
	font-size: 13px; letter-spacing: .05em; text-transform: uppercase; font-weight: 500;
	color: var(--color-neutral-300); transition: background .15s, color .15s;
}
.igo-nav__list a:hover { background: var(--color-surface); color: var(--color-text); }
.igo-nav__list :is(.current-menu-item, .current_page_item) > a { background: var(--color-accent-100); color: var(--color-accent-800); }

.igo-header-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.igo-call-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: var(--brand); font-size: 18px; }
.igo-call-btn:hover { background: var(--color-accent-100); color: var(--brand); }
.igo-wa-btn {
	display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px;
	background: var(--brand); color: #fff; font-size: 14px; font-weight: 500;
}
.igo-wa-btn:hover { background: var(--brand-glow); color: #fff; }
.igo-header-actions .igo-ico::before { margin: 0; }
.igo-nav-toggle {
	display: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px;
	background: none; color: var(--color-text); font-size: 24px; cursor: pointer;
}
.igo-nav-toggle:hover { background: var(--color-surface); }
.igo-nav-toggle__close,
.igo-nav-toggle[aria-expanded="true"] .igo-nav-toggle__open { display: none; }
.igo-nav-toggle[aria-expanded="true"] .igo-nav-toggle__close { display: inline-block; }

@media (max-width: 781px) {
	.igo-topbar { font-size: 12px; }
	.igo-topbar-address { display: none; }
	.igo-topbar__inner { justify-content: center; }
	.igo-topbar-contact { gap: 14px; margin-inline: 0; justify-content: center; }

	.igo-header-row { gap: 12px; }
	.igo-brand { flex: 1 1 auto; min-width: 0; }
	.igo-nav-toggle { display: inline-grid; place-items: center; }
	.igo-nav { display: none; }
	.igo-nav.is-open {
		display: block; position: fixed; left: 0; right: 0; bottom: 0;
		top: var(--igo-nav-top, 0px); z-index: 60; overflow-y: auto;
		padding: 16px 24px 32px; background: #fff; border-top: 1px solid var(--color-divider);
	}
	.igo-nav.is-open .igo-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
	.igo-nav.is-open .igo-nav__list a { padding: 12px 14px; font-size: 15px; }
}
@media (max-width: 480px) {
	.igo-brand__mark { height: 34px; }
	.igo-brand__logo { height: min(var(--igo-header-logo-h, 44px), 36px); max-width: 170px; }
	.igo-brand-name { font-size: 15px; }
	.igo-wa-btn { padding: 8px 10px; font-size: 18px; }
	.igo-wa-label { display: none; }
}
body.igo-nav-open { overflow: hidden; }
body.igo-nav-open .igo-float-wa { display: none; }

/* ==========================================================================
   Hero (Group with a background image; the scrim is the ::before overlay)
   ========================================================================== */
.igo-hero-bg {
	position: relative; min-height: max(560px, 82vh);
	display: flex; align-items: flex-end;
	background-color: #0a2e4a; background-size: cover; background-position: center; background-repeat: no-repeat;
	color: #fff;
}
.igo-hero-bg::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background: linear-gradient(90deg, #0a2e4a 0%, rgba(10, 46, 74, 0.8) 40%, rgba(10, 46, 74, 0.2) 100%);
}
.igo-hero-bg--sm { min-height: max(380px, 50vh); }
.igo-hero-bg :where(h1, h2, h3) { color: #fff; }
.igo-hero-bg--sm h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.04; }
.igo-hero-inner { position: relative; z-index: 1; width: 100%; padding-top: 72px; padding-bottom: 72px; }
.igo-hero-inner p { color: rgba(255, 255, 255, .88); }
.igo-hero-inner h1 { max-width: 760px; }
.igo-hero-inner .igo-hero-lead { font-size: 18px; line-height: 1.55; max-width: 560px; }
.igo-hero-inner > .igo-hero__pill + h1,
.igo-hero-inner > .igo-breadcrumb + h1 { margin-block-start: 16px; }
.igo-hero-inner > h1 + .igo-hero-lead { margin-block-start: 16px; }
.igo-hero-inner > .igo-hero-lead + .wp-block-buttons { margin-block-start: 28px; }
.igo-hero__pill {
	display: inline-flex; padding: 6px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
	color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.igo-hero-inner .igo-hero__pill { color: #fff; }
.igo-breadcrumb { font-size: 13px; }
.igo-hero-inner .igo-breadcrumb,
.igo-breadcrumb a { color: rgba(255, 255, 255, .75); }
.igo-breadcrumb a:hover { color: #fff; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.wp-block-buttons.is-layout-flex { gap: 10px; }
.wp-block-button__link { display: inline-flex; align-items: center; gap: 6px; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--brand); border: 1px solid var(--brand); padding: 11px 17px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.igo-btn-onlight > .wp-block-button__link { background: #fff; color: var(--brand); }
.igo-btn-onlight > .wp-block-button__link:hover { background: var(--color-accent-100); color: var(--brand); }
.igo-btn-ghost-light > .wp-block-button__link { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.igo-btn-ghost-light > .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Pills (About → operations, Services hero jump links). */
.igo-pill > .wp-block-button__link {
	gap: 10px; padding: 12px 18px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm);
	color: var(--color-text); font-size: 15px;
}
.igo-pill > .wp-block-button__link:hover { background: #fff; color: var(--color-text); box-shadow: var(--shadow-md); }
.igo-pill.igo-ico > .wp-block-button__link::before { color: var(--brand); font-size: 18px; }
.igo-pill--light > .wp-block-button__link {
	padding: 8px 14px; gap: 8px; font-size: 14px; font-weight: 400; color: #fff;
	background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.igo-pill--light > .wp-block-button__link:hover { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.igo-pill--light.igo-ico > .wp-block-button__link::before { color: #fff; font-size: 16px; }

/* ==========================================================================
   Cards (division cards, service cards, vehicle cards)
   Whole card is clickable on the front end via its title link (stretched);
   in the editor the stretch is off so every part can be selected.
   ========================================================================== */
.wp-block-group.igo-card {
	position: relative; display: flex; flex-direction: column; height: 100%;
	background: #fff; color: var(--color-text); border-radius: var(--radius-lg); overflow: hidden;
	box-shadow: var(--shadow-md); transition: box-shadow .2s, transform .2s;
}
.wp-block-group.igo-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.wp-block-group.igo-card > * { margin: 0; }
.wp-block-group.igo-card--flat { box-shadow: var(--shadow-sm); }
.wp-block-group.igo-card--flat:hover { box-shadow: var(--shadow-md); transform: none; }
.wp-block-group.igo-card--brand { background: var(--brand-linear); color: #eafaef; }
.igo-card--brand :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.igo-card__media { margin: 0; }
.igo-card__media img { width: 100%; display: block; }
.wp-block-group.igo-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 22px 22px; }
.wp-block-group.igo-card__body > * { margin: 0; }
.igo-card :is(h1, h2, h3, h4, h5, h6) a { color: inherit; }
.igo-card :is(h1, h2, h3, h4, h5, h6) a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.igo-card .igo-arrow-link { position: relative; z-index: 2; margin-top: 6px; }
.igo-card :is(h4, h5).igo-ico::before { color: var(--brand); font-size: 22px; margin-inline-end: 10px; }
.igo-card__label { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); }
.igo-card__label.igo-ico::before { font-size: 16px; margin: 0; }
.igo-card--brand .igo-card__label { color: var(--color-accent-300); }
.igo-card__text { font-size: 14px; line-height: 1.55; color: var(--color-neutral-400); flex: 1; }
.igo-card--brand .igo-card__text { color: #d2ecd9; }

.igo-rounded { margin: 0; }
.igo-rounded img { width: 100%; display: block; border-radius: var(--radius-lg); }

/* ==========================================================================
   Milestones (About timeline on the home page)
   ========================================================================== */
.wp-block-group.igo-milestones > * { margin: 0; }
.wp-block-group.igo-milestone { position: relative; min-height: 62px; padding: 8px 0 22px 56px; }
.wp-block-group.igo-milestone > * { margin: 0; }
.wp-block-group.igo-milestone > * + * { margin-block-start: 4px; }
.igo-milestone::before {
	font-family: "Phosphor" !important; content: var(--igo-ico); line-height: 1;
	position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center; font-size: 18px;
	background: var(--color-accent-100); color: var(--color-accent-800);
}
.igo-milestone::after { content: ""; position: absolute; left: 20px; top: 46px; bottom: 0; width: 1px; background: var(--color-divider); }
.igo-milestone:last-child::after { display: none; }
.igo-milestone h5 { font-size: 16px; }
.igo-milestone p { font-size: 14px; line-height: 1.55; color: var(--color-neutral-400); }

/* ==========================================================================
   Service tiles (hairline grid)
   ========================================================================== */
/* Hairlines are each tile's outline drawn into the 1px gap (outlines paint
   above neighbouring backgrounds, and overlapping opaque lines look single),
   so unused cells in a partial last row stay plain white at any column count.
   The container clips the outer edge; its ring shadow is the frame. */
.igo-tilegrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
	gap: 1px; background: #fff;
	border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.wp-block-group.igo-tilegrid > * { margin: 0; }
.igo-tilegrid > .igo-tile { outline: 1px solid #e1e5e2; }
.wp-block-group.igo-tile {
	position: relative; display: flex; flex-direction: column; gap: 8px;
	min-height: 170px; padding: 26px 24px; background: #fff; transition: background .2s;
}
.wp-block-group.igo-tile:hover { background: var(--color-surface); }
.wp-block-group.igo-tile > * { margin: 0; }
.wp-block-group.igo-tile::before {
	font-family: "Phosphor" !important; content: var(--igo-ico); line-height: 1;
	position: absolute; top: 26px; left: 24px; font-size: 28px; color: var(--brand);
}
.igo-tile__group { min-height: 28px; line-height: 28px; text-align: right; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); }
.wp-block-group.igo-tile h5 { margin-top: 6px; font-size: 17px; }
.igo-tile h5 a { color: inherit; }
.igo-tile h5 a::after { content: ""; position: absolute; inset: 0; }
.igo-tile h5 + p { font-size: 14px; line-height: 1.5; color: var(--color-neutral-400); }

/* ==========================================================================
   Journey steps and vision / mission features (About page)
   ========================================================================== */
.wp-block-group.igo-step {
	position: relative; display: flex; flex-direction: column; gap: 14px;
	padding: 26px 24px; border-radius: var(--radius-lg); background: var(--color-surface);
}
.wp-block-group.igo-step > * { margin: 0; }
.igo-step::before {
	font-family: "Phosphor" !important; content: var(--igo-ico); line-height: 1;
	position: absolute; top: 26px; left: 24px; width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center; font-size: 20px;
	background: #fff; color: var(--brand); box-shadow: var(--shadow-sm);
}
.igo-step__num { min-height: 44px; line-height: 44px; text-align: right; font-size: 13px; font-weight: 600; color: var(--color-accent-700); }
.igo-step h5 { font-size: 17px; margin-top: 4px !important; }
.igo-step h5 + p { font-size: 14px; line-height: 1.55; color: var(--color-neutral-400); }

.wp-block-group.igo-feature {
	display: flex; flex-direction: column; gap: 12px; height: 100%;
	padding: 40px; border-radius: var(--radius-lg); background: var(--color-surface);
}
.wp-block-group.igo-feature > * { margin: 0; }
.igo-feature::before { font-family: "Phosphor" !important; content: var(--igo-ico); line-height: 1; font-size: 30px; color: var(--brand); }
.wp-block-group.igo-feature--brand { background: var(--brand-radial); color: #fff; }
.igo-feature--brand::before,
.igo-feature--brand .igo-eyebrow { color: var(--color-accent-300); }
.igo-feature__text { font-size: 22px; line-height: 1.4; letter-spacing: -0.01em; }

/* ==========================================================================
   Vehicles
   ========================================================================== */
.wp-block-group.igo-vehicle-grid {
	display: grid; gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.wp-block-group.igo-vehicle-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.wp-block-group.igo-vehicle-grid > * { margin: 0; }
.igo-vehicle-card .wp-block-group.igo-card__body { gap: 12px; padding: 18px 20px 20px; }
.wp-block-group.igo-car-head { flex-wrap: nowrap; align-items: baseline; gap: 12px; }
.igo-car-title { font-size: 17px; }
.igo-car-year { font-size: 13px; color: var(--color-neutral-500); flex: none; }
.wp-block-group.igo-chips { gap: 6px; }
.igo-chip { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: var(--color-surface); font-size: 12px; color: var(--color-neutral-400); }
.wp-block-group.igo-car-foot { gap: 12px; margin-top: auto !important; padding-top: 12px; border-top: 1px solid var(--color-divider); }
.igo-price { font-weight: 600; color: var(--brand); }
.igo-car-link { font-size: 14px; font-weight: 500; color: var(--brand); }
.igo-car-link.igo-ico::before { margin-inline-end: 6px; }
.igo-car-status {
	position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0;
	padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92);
	font-size: 12px; font-weight: 500; color: var(--brand);
}

/* Dealership page: filter bar overlapping the hero, results meta, details view. */
.wp-block-group.igo-cars { margin-block-start: -32px; position: relative; z-index: 1; }
.wp-block-group.igo-cars > * { margin-block-start: 0; }
.igo-filterbar {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; align-items: end;
	padding: 18px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); position: relative; z-index: 1;
}
.igo-filterbar label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-500); }
.igo-filterbar select { width: 100%; }
.igo-filterbar__reset { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--brand); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.igo-filterbar__reset:hover { background: var(--color-accent-100); }
.igo-cars-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 32px 0 16px; font-size: 14px; color: var(--color-neutral-400); }
.igo-cars-meta__note { font-size: 13px; color: var(--color-neutral-500); }
.igo-cars-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px; text-align: center; border-radius: var(--radius-lg); background: var(--color-surface); }
.igo-cars-empty h4 { margin: 0; }
.igo-cars-empty button { border: 0; background: none; color: var(--brand); font: inherit; font-weight: 500; cursor: pointer; }
.igo-vehicle-card.is-hidden { display: none !important; }

.igo-car-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .55); }
.igo-car-modal[hidden] { display: none; }
.igo-car-modal__panel {
	width: min(880px, 100%); max-height: calc(100vh - 40px); overflow: auto;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	background: #fff; border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
}
.igo-car-modal__media { min-height: 300px; background: var(--color-surface); }
.igo-car-modal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.igo-car-modal__body { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.igo-car-modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.igo-car-modal__head h3 { margin: 4px 0 0; letter-spacing: -0.02em; }
.igo-car-modal__close { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; font-size: 20px; cursor: pointer; color: var(--color-text); }
.igo-car-modal__close:hover { background: var(--color-surface); }
.igo-car-modal__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: var(--color-divider); border-radius: var(--radius-md); overflow: hidden; }
.igo-car-modal__specs div { padding: 12px 14px; background: #fff; }
.igo-car-modal__specs dt { font-size: 12px; color: var(--color-neutral-500); }
.igo-car-modal__specs dd { margin: 0; font-weight: 500; }
.igo-car-modal__price { display: flex; justify-content: space-between; align-items: baseline; }
.igo-car-modal__price span:first-child { font-size: 13px; color: var(--color-neutral-500); }
.igo-car-modal__price .igo-price { font-size: 20px; }
.igo-car-modal__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.igo-car-modal__actions a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 18px; border-radius: 8px; font-weight: 500; }
.igo-car-modal__wa { flex: 1; background: var(--brand); color: #fff; }
.igo-car-modal__wa:hover { background: var(--brand-glow); color: #fff; }
.igo-car-modal__call { color: var(--brand); box-shadow: inset 0 0 0 1px var(--color-accent-200); }

/* ==========================================================================
   CTA banners
   ========================================================================== */
.wp-block-group.igo-cta { padding: 40px; border-radius: var(--radius-lg); background: var(--brand-radial); color: #fff; }
.wp-block-group.igo-cta--compact { padding: 36px 40px; }
.igo-cta :where(h1, h2, h3, h4) { color: #fff; margin: 0; }
.igo-cta .igo-cta__lead { color: #d2ecd9; }
.wp-block-group.igo-cta > h2 + .igo-cta__lead { margin-block-start: 6px; }
.wp-block-group.igo-cta > .igo-cta__lead + .igo-cta-links { margin-block-start: 28px; }
.wp-block-group:is(.igo-cta, .igo-banner) > .wp-block-group > * { margin: 0; }
.wp-block-group:is(.igo-cta, .igo-banner) > .wp-block-group > * + * { margin-block-start: 6px; }
.wp-block-group.igo-banner { padding: 36px 40px; border-radius: var(--radius-lg); background: var(--color-surface); }

.wp-block-buttons.igo-cta-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.igo-cta-links > .wp-block-button { width: 100%; margin: 0; }
.igo-cta-link > .wp-block-button__link {
	display: flex; width: 100%; justify-content: flex-start; gap: 14px; text-align: left;
	padding: 18px 20px; border-radius: var(--radius-md); font-size: 15px;
	background: color-mix(in srgb, #0a3b19 55%, transparent); color: #eafaef;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #a9dcb8 25%, transparent);
}
.igo-cta-link > .wp-block-button__link:hover { background: color-mix(in srgb, #0a3b19 80%, transparent); color: #fff; }
.igo-cta-link.igo-ico > .wp-block-button__link::before { font-size: 22px; color: #a9dcb8; }
.igo-cta-link > .wp-block-button__link::after { font-family: "Phosphor" !important; content: "\e092"; margin-inline-start: auto; font-weight: normal; }

/* ==========================================================================
   Contact
   ========================================================================== */
.wp-block-group.igo-contact-cards { margin-block-start: -48px; position: relative; z-index: 1; }
.igo-contact-card {
	display: flex; flex-direction: column; gap: 10px; height: 100%;
	padding: 24px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); color: var(--color-text);
}
.wp-block-group.igo-contact-card { position: relative; padding-top: 64px; }
.wp-block-group.igo-contact-card > * { margin: 0; }
.wp-block-group.igo-contact-card::before { font-family: "Phosphor" !important; content: var(--igo-ico); line-height: 1; position: absolute; top: 24px; left: 24px; font-size: 26px; color: var(--brand); }
.igo-contact-card p:not(.igo-eyebrow) { font-size: 15px; line-height: 1.6; }
.igo-contact-card a { color: inherit; }
.igo-contact-card .igo-arrow-link { margin-top: auto; }
.igo-contact-card--brand { background: var(--brand-linear); color: #fff; }
.wp-block-group.igo-contact-card--brand::before,
.igo-contact-card--brand .igo-eyebrow { color: var(--color-accent-300); }

.wp-block-group.igo-split:has(.igo-form) { gap: 40px; }
.wp-block-group.igo-contact__details { display: flex; flex-direction: column; gap: 24px; }
.wp-block-group.igo-contact__details > * { margin: 0; }
.wp-block-group.igo-contact__details > .igo-eyebrow + .wp-block-heading { margin-block-start: -16px; }
.wp-block-group.igo-info-grid { gap: 20px; }
.wp-block-group.igo-info { display: flex; flex-direction: column; gap: 6px; }
.wp-block-group.igo-info > * { margin: 0; }
.igo-info p:not(.igo-eyebrow) { font-size: 15px; line-height: 1.5; }
.igo-info p.igo-small { font-size: 13px; }

.igo-map { position: relative; flex: 1; min-height: 260px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.igo-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.igo-form { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: var(--radius-lg); background: var(--color-surface); }
.igo-form h4 { margin: 0 0 4px; }
.igo-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.igo-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--color-neutral-400); }
.igo-input {
	width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 14px;
	color: var(--color-text); background: #fff; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.igo-input:focus-visible { outline: none; border-color: var(--brand); }
textarea.igo-input { min-height: 120px; resize: vertical; }
.igo-form__submit {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px;
	border: 0; border-radius: 8px; background: var(--brand); color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.igo-form__submit:hover { background: var(--brand-glow); }

/* ==========================================================================
   Floating WhatsApp button (rendered with the header)
   ========================================================================== */
.igo-float-wa {
	position: fixed; right: 20px; bottom: 20px; z-index: 40;
	width: 56px; height: 56px; border-radius: 50%;
	display: grid; place-items: center; font-size: 30px;
	background: #25D366; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); transition: transform .15s;
}
.igo-float-wa:hover { color: #fff; transform: scale(1.05); }

/* ==========================================================================
   Footer
   ========================================================================== */
.wp-block-group.igo-footer {
	margin-block-start: 104px; padding-top: 48px; padding-bottom: 28px;
	background: var(--color-surface); border-top: 1px solid rgba(21, 32, 26, .12);
}
.wp-block-group.igo-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 32px; }
.wp-block-group.igo-footer__cols > * { margin: 0; }
.wp-block-group.igo-footer__cols > .wp-block-group { display: flex; flex-direction: column; gap: 12px; }
.wp-block-group.igo-footer__cols > .wp-block-group > * { margin: 0; }
.igo-footer__logo { margin: 0; }
.igo-footer__logo img { width: var(--igo-footer-logo-w, 180px); max-width: 100%; height: auto; display: block; }
.igo-footer p:not(.igo-eyebrow) { font-size: 14px; }
.igo-footer p.igo-small { font-size: 13px; max-width: 250px; }
.igo-footer a { color: var(--color-neutral-300); }
.igo-footer a:hover { color: var(--brand); }
ul.wp-block-list.igo-footer__links { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.wp-block-social-links.igo-social { gap: 12px; font-size: 20px; margin: 6px 0 0; }
.wp-block-social-links.igo-social.is-style-logos-only .wp-social-link { color: var(--color-neutral-400); }
.wp-block-social-links.igo-social.is-style-logos-only .wp-social-link:hover { color: var(--brand); }
.wp-block-group.igo-footer > .igo-footer__bottom { margin-block-start: 32px; }
.wp-block-group.igo-footer__bottom { gap: 16px; padding-top: 16px; border-top: 1px solid var(--color-divider); }
.igo-footer__bottom p { margin: 0; font-size: 12px; color: var(--color-neutral-500); }
.igo-footer__bottom a { color: var(--color-neutral-500); }

/* ==========================================================================
   Legacy — markup written by v1.0 (Custom HTML cards). Kept so pages that
   haven't been rebuilt yet (Appearance notice → "Update starter pages")
   still look right. Safe to delete once all starter pages are rebuilt.
   ========================================================================== */
.igo-hero-inner.is-layout-constrained > * { margin-left: 0 !important; margin-right: 0 !important; }
div.igo-breadcrumb { display: flex; gap: 8px; align-items: center; color: rgba(255, 255, 255, .75); }
div.igo-breadcrumb strong { color: #fff; font-weight: 400; }
.ph, .ph-fill { line-height: 1; }
.igo-icon-round { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 20px; background: var(--color-accent-100); color: var(--brand); flex: none; }
a.igo-card {
	display: flex; flex-direction: column; height: 100%; background: #fff; color: var(--color-text);
	border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: box-shadow .2s, transform .2s;
}
a.igo-card:hover { color: var(--color-text); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
a.igo-card--brand, a.igo-card--brand:hover { background: var(--brand-linear); color: #eafaef; }
div.igo-card:not(.wp-block-group) { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
div.igo-card--flat:not(.wp-block-group) { box-shadow: var(--shadow-sm); }
.igo-card__media--tint { height: 180px; display: grid; place-items: center; background: var(--color-surface); color: var(--brand); font-size: 46px; }
.igo-card--brand .igo-card__media--tint { background: rgba(255, 255, 255, .12); color: #fff; }
div.igo-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
div.igo-card__body :is(h4, h5) { margin: 0; }
.igo-timeline { display: flex; flex-direction: column; }
.igo-timeline__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.igo-timeline__rail { display: flex; flex-direction: column; align-items: center; }
.igo-timeline__dot { width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent-100); color: var(--color-accent-800); display: grid; place-items: center; font-size: 18px; flex: none; }
.igo-timeline__line { width: 1px; flex: 1; background: var(--color-divider); margin-top: 6px; }
a.igo-tile { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px; background: #fff; color: var(--color-text); min-height: 170px; }
a.igo-tile:hover { background: var(--color-surface); color: var(--color-text); }
.igo-tile__top { display: flex; justify-content: space-between; align-items: center; }
.igo-tile__top .ph { font-size: 28px; color: var(--brand); }
div.igo-vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
#cars div.igo-vehicle-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.igo-cta__link {
	display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--radius-md);
	background: color-mix(in srgb, #0a3b19 55%, transparent); color: #eafaef;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #a9dcb8 25%, transparent);
}
.igo-cta__link:hover { background: color-mix(in srgb, #0a3b19 80%, transparent); color: #fff; }
.igo-cta__link .ph:first-child { font-size: 22px; color: #a9dcb8; }
.igo-cta__link span { flex: 1; font-weight: 500; }
a.igo-contact-card:hover { box-shadow: var(--shadow-lg); color: var(--color-text); }
.igo-contact-card .ph { font-size: 26px; color: var(--brand); }
.igo-contact-card--brand .ph { color: #a9dcb8; }