@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Bebas+Neue&display=swap');

/* =============================================================
   IE Boats — boats.css
   Design system: FBMR brand (yellow/blue) + BoatTrader listing conventions.
   Fonts: Bebas Neue (display) + Barlow (body) via Google Fonts.
   ============================================================= */

:root {
	/* Brand colors */
	--ie-yellow:      #F1D312;
	--ie-blue:        #398BC7;
	--ie-blue-dark:   #1B4985;

	/* Text + surfaces */
	--ie-text:        #0b0b0b;
	--ie-text-muted:  #5d6670;
	--ie-border:      #e5e7eb;
	--ie-bg:          #ffffff;
	--ie-bg-muted:    #f6f7f9;

	/* Semantic */
	--ie-sold:        #c83b2a;
	--ie-success:     #2e7d4f;

	/* Type */
	--ie-font-display: "Bebas Neue", "Oswald", sans-serif;
	--ie-font-body:    "Barlow", "Inter", system-ui, -apple-system, sans-serif;

	/* Radius + shadow */
	--ie-radius-pill: 999px;
	--ie-radius-card: 6px;
	--ie-shadow-card:        0 1px 3px rgba(0,0,0,0.08);
	--ie-shadow-card-hover:  0 4px 16px rgba(0,0,0,0.12);
	--ie-shadow-sticky:      0 2px 8px rgba(0,0,0,0.08);

	/* Layout */
	--ie-container: 1280px;
	--ie-header-h-desktop: 96px;
	--ie-header-h-mobile:  72px;
}

/* GeneratePress applies display: flex to <main> even when no-sidebar is set.
   Make our archive/single content fill the flex parent instead of sizing to
   GP's default ~960px content width. */
.boat-archive,
.boat-single,
.site-content > .boat-archive,
.site-content > .boat-single {
	flex: 1 1 100%;
	width: 100%;
	max-width: none;
}

/* Optional wave-pattern hero fallback (uncomment if hero.jpg is removed):
.boat-archive__hero--wave {
	background:
		linear-gradient(to bottom, rgba(27,73,133,0.78), rgba(27,73,133,0.48)),
		var(--ie-blue-dark) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'><path fill='%231B4985' d='M0 40 Q 300 80 600 40 T 1200 40 V120 H0 Z'/></svg>") center bottom / 100% 120px no-repeat;
}
*/

/* -------------------------------------------------------------
   Base
   ------------------------------------------------------------- */

body.ieb-themed {
	font-family: var(--ie-font-body);
	color: var(--ie-text);
	background: var(--ie-bg);
}

/* Accessibility: visible focus ring on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--ie-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

/* -------------------------------------------------------------
   Site header
   ------------------------------------------------------------- */

.ie-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ie-bg);
	border-bottom: 1px solid var(--ie-border);
	transition: box-shadow 150ms ease;
}
.ie-header.is-stuck {
	box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.ie-header__inner {
	max-width: var(--ie-container);
	margin: 0 auto;
	padding: 0 1.25rem;
	height: var(--ie-header-h-mobile);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
@media (min-width: 769px) {
	.ie-header__inner { height: var(--ie-header-h-desktop); }
}

.ie-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.ie-logo img {
	display: block;
	height: 52px;
	width: auto;
}
@media (min-width: 769px) {
	.ie-logo img { height: 72px; }
}

.ie-nav {
	display: none;
}
@media (min-width: 769px) {
	.ie-nav {
		display: flex;
		align-items: center;
		gap: 1.75rem;
	}
}
.ie-nav__list {
	list-style: none;
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}
.ie-nav__link,
.ie-nav a {
	font-family: var(--ie-font-body);
	font-size: 16px;
	font-weight: 400;
	color: var(--ie-text);
	text-decoration: none;
	transition: color 150ms ease;
}
.ie-nav a:hover,
.ie-nav .current-menu-item > a {
	color: var(--ie-blue);
}
.ie-header__phone {
	font-family: var(--ie-font-body);
	font-size: 14px;
	color: var(--ie-text-muted);
	text-decoration: none;
	font-weight: 500;
	letter-spacing: 0.01em;
}
.ie-header__phone:hover { color: var(--ie-blue); }

/* Hamburger (mobile only) */
.ie-hamburger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: 1px solid var(--ie-border);
	border-radius: 4px;
	cursor: pointer;
	padding: 0;
}
@media (min-width: 769px) {
	.ie-hamburger { display: none; }
}
.ie-hamburger span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--ie-text);
	position: relative;
}
.ie-hamburger span::before,
.ie-hamburger span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: var(--ie-text);
}
.ie-hamburger span::before { top: -6px; }
.ie-hamburger span::after  { top:  6px; }

/* Mobile slide-down menu */
.ie-mobile-menu {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--ie-bg);
	border-bottom: 1px solid var(--ie-border);
	padding: 1rem 1.25rem 1.5rem;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.ie-mobile-menu.is-open { display: block; }
.ie-mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ie-mobile-menu li + li {
	border-top: 1px solid var(--ie-border);
}
.ie-mobile-menu a {
	display: block;
	padding: 0.9rem 0.25rem;
	font-family: var(--ie-font-body);
	font-size: 18px;
	color: var(--ie-text);
	text-decoration: none;
}
.ie-mobile-menu a:hover { color: var(--ie-blue); }
.ie-mobile-menu__phone {
	display: block;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ie-border);
	font-size: 14px;
	color: var(--ie-text-muted);
	text-decoration: none;
}

/* -------------------------------------------------------------
   Buttons
   ------------------------------------------------------------- */

.ie-btn-primary,
.ie-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ie-font-body);
	font-weight: 500;
	font-size: 15px;
	text-transform: capitalize;
	letter-spacing: 0.01em;
	border-radius: var(--ie-radius-pill);
	padding: 14px 28px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	line-height: 1;
	transition: filter 150ms ease, transform 80ms ease;
}
.ie-btn-primary {
	background: var(--ie-yellow);
	color: #000;
}
.ie-btn-secondary {
	background: var(--ie-blue);
	color: #fff;
}
.ie-btn-primary:hover,
.ie-btn-secondary:hover { filter: brightness(0.92); }
.ie-btn-primary:active,
.ie-btn-secondary:active { transform: translateY(1px); }

/* Split pill — yellow primary on the left, blue secondary on the right.
   Two pills butted edge-to-edge with no seam between them. */
.ie-btn-split {
	display: flex;
	gap: 0;
	height: 48px;
	width: 100%;
}
.ie-btn-split__primary,
.ie-btn-split__secondary {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ie-font-body);
	font-weight: 500;
	font-size: 14px;
	text-transform: capitalize;
	letter-spacing: 0.01em;
	margin: 0;
	border: none;
	cursor: pointer;
	text-decoration: none;
	line-height: 1;
	transition: filter 150ms ease, transform 80ms ease;
}
.ie-btn-split__primary {
	background: var(--ie-yellow);
	color: #000;
	border-radius: 30px 0 0 30px;
}
.ie-btn-split__secondary {
	background: var(--ie-blue);
	color: #fff;
	border-radius: 0 30px 30px 0;
}
.ie-btn-split__primary:hover,
.ie-btn-split__secondary:hover { filter: brightness(0.92); }

/* -------------------------------------------------------------
   Archive / front-page layout
   ------------------------------------------------------------- */

.boat-archive {
	font-family: var(--ie-font-body);
	color: var(--ie-text);
}

/* Hero — photo background with navy overlay, text centered horizontally */
.boat-archive__hero {
	position: relative;
	min-height: 320px;
	background: var(--ie-blue-dark) url("../hero.jpg") no-repeat center/cover;
	color: #fff;
	display: flex;
	align-items: center;
	margin-bottom: 2rem;
	overflow: hidden;
}
.boat-archive__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(27, 73, 133, 0.78), rgba(27, 73, 133, 0.48));
	z-index: 1;
	pointer-events: none;
}
.boat-archive__hero-inner {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin: 0 auto;
	padding: 3.5rem 1.5rem;
	width: 100%;
	text-align: center;
}
@media (min-width: 769px) {
	.boat-archive__hero { min-height: 440px; }
	/* Wider measure for the hero only — gives the H1 enough room to balance
	   onto two lines at its 5.5rem cap. The subtitle is unaffected: it caps
	   itself at 540px below. */
	.boat-archive__hero-inner { max-width: 980px; padding: 4rem 1.5rem; }
}

.boat-archive__title {
	font-family: var(--ie-font-display);
	font-weight: 400;
	font-size: clamp(2.4rem, 7vw, 5.5rem);
	line-height: 0.95;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	/* The copy is Customizer-editable (any length), so the wrap must be
	   self-balancing: text-wrap: balance evens the lines out automatically.
	   The max-width is only a FALLBACK for engines without balance support —
	   generous, not string-measured; with the default headline it yields
	   "FLORA-BAMA MOTORSPORTS AND" / "EQUIPMENT SALES". Do not reintroduce a
	   per-string measured cap here; it goes stale the moment the copy changes. */
	max-width: 12em;
	margin: 0 auto 0.75rem;
	text-wrap: balance;
}
.boat-archive__subtitle {
	font-family: var(--ie-font-body);
	font-size: 18px;
	font-weight: 400;
	color: rgba(255,255,255,0.9);
	max-width: 540px;
	margin: 0 auto;
	line-height: 1.5;
}

/* Content container below hero */
.boat-archive__main {
	max-width: var(--ie-container);
	margin: 0 auto;
	padding: 0 1.25rem 4rem;
}

/* Filters */
.boat-filters {
	background: var(--ie-bg);
	border: 1px solid var(--ie-border);
	border-radius: var(--ie-radius-card);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--ie-shadow-card);
}
.boat-filters__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75rem 1rem;
	align-items: end;
}
.boat-filters__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 14px;
}
.boat-filters__field > span {
	font-weight: 500;
	color: var(--ie-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 11px;
}
/* Unified filter control — inputs + selects share one visual spec.
   Strips the native select caret so we can paint our own SVG chevron,
   otherwise Chrome/Safari/Firefox each render the trigger differently. */
.boat-filters__field select,
.boat-filters__field input {
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--ie-border);
	border-radius: 6px;
	font-size: 16px;
	font-weight: 400;
	font-family: var(--ie-font-body);
	background: #fff;
	color: var(--ie-text);
	line-height: 1.2;
	box-sizing: border-box;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.boat-filters__field select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235d6670' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px 14px;
}
.boat-filters__field select::-ms-expand { display: none; }
.boat-filters__field select:focus,
.boat-filters__field input:focus {
	outline: none;
	border-color: var(--ie-blue);
	box-shadow: 0 0 0 3px rgba(57,139,199,0.18);
}
.boat-filters__actions {
	display: flex;
	gap: 0.5rem;
	align-items: end;
}
.boat-filters__submit {
	/* Matches .ie-btn-primary exactly */
	background: var(--ie-yellow);
	color: #000;
	border: none;
	padding: 12px 26px;
	border-radius: var(--ie-radius-pill);
	font-family: var(--ie-font-body);
	font-weight: 500;
	font-size: 15px;
	text-transform: capitalize;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: filter 150ms ease;
}
.boat-filters__submit:hover { filter: brightness(0.92); }

.boat-filters__reset {
	color: var(--ie-text-muted);
	font-size: 14px;
	padding: 0.65rem 0.5rem;
	text-decoration: none;
	font-weight: 500;
}
.boat-filters__reset:hover { color: var(--ie-text); }

/* Section heading above the results grid. Mirrors `.boat-similar h2` — the
   theme's existing "heading above a boat grid" treatment — so the archive and
   the similar-boats block read the same. */
.boat-archive__section-title {
	font-family: var(--ie-font-body);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ie-text);
	margin: 0 0 0.5rem;
}

.boat-archive__count {
	font-size: 14px;
	color: var(--ie-text-muted);
	margin-bottom: 1rem;
}
.boat-archive__count strong { color: var(--ie-text); font-size: 15px; }

/* -------------------------------------------------------------
   Grid + card
   ------------------------------------------------------------- */

.boat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

.boat-card {
	background: var(--ie-bg);
	border: 1px solid var(--ie-border);
	border-radius: var(--ie-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 250ms ease, box-shadow 250ms ease;
	box-shadow: var(--ie-shadow-card);
}
.boat-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ie-shadow-card-hover);
}
.boat-card:hover .boat-card__media img {
	transform: scale(1.02);
}

.boat-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
	flex: 1;
}

.boat-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #eaeaea;
	overflow: hidden;
}
.boat-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 250ms ease;
}
.boat-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--ie-text-muted);
	font-size: 14px;
	background: #f0f0f0;
}

/* Photo count badge — top-right */
.boat-card__photo-count {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(255,255,255,0.92);
	color: #000;
	font-family: var(--ie-font-body);
	font-size: 11px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: var(--ie-radius-pill);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	line-height: 1;
}
.boat-card__photo-count svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

/* SOLD pill — top-left */
.boat-card__sold-pill {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #fff;
	color: var(--ie-sold);
	font-family: var(--ie-font-body);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 4px 10px;
	border-radius: var(--ie-radius-pill);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	line-height: 1;
}
.boat-card__sold-pill::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ie-sold);
}

.boat-card.is-sold .boat-card__media img {
	filter: grayscale(0.4) brightness(0.92);
}

.boat-card__body {
	padding: 1rem 1rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.boat-card__title {
	font-family: var(--ie-font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	margin: 0;
	color: var(--ie-text);
	letter-spacing: 0;
	text-transform: none;
}

/* Plain price with yellow left-border accent — understated, not a loud pill. */
.boat-card__price {
	font-family: var(--ie-font-body);
	font-weight: 500;
	font-size: 16px;
	color: var(--ie-text);
	border-left: 3px solid var(--ie-yellow);
	padding-left: 8px;
	line-height: 1.3;
}

.boat-card__meta {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.6rem;
	font-size: 13px;
	color: var(--ie-text-muted);
}
.boat-card__meta li {
	display: inline-flex;
	align-items: center;
}
.boat-card__meta li + li::before {
	content: "·";
	margin-right: 0.6rem;
	color: var(--ie-border);
}
.boat-card__loc {
	flex-basis: 100%;
	margin-top: 0.25rem;
}
.boat-card__loc::before { display: none !important; }

/* Card CTA row */
.boat-card__cta {
	margin-top: auto;
	padding: 0.75rem 1rem 1rem;
}

/* Pagination */
.boat-pagination {
	margin-top: 2.5rem;
	text-align: center;
}
.boat-pagination .nav-links {
	display: inline-flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	justify-content: center;
}
.boat-pagination a,
.boat-pagination .current {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--ie-border);
	border-radius: 4px;
	color: var(--ie-text);
	text-decoration: none;
	font-size: 15px;
	background: #fff;
}
.boat-pagination .current {
	background: var(--ie-blue);
	color: #fff;
	border-color: var(--ie-blue);
}
.boat-pagination a:hover { background: var(--ie-bg-muted); }

.boat-empty {
	text-align: center;
	padding: 3rem 1rem;
}
.boat-empty h2 {
	font-family: var(--ie-font-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: 2rem;
	letter-spacing: 0.02em;
}

/* -------------------------------------------------------------
   Single boat page
   ------------------------------------------------------------- */

.boat-single {
	max-width: var(--ie-container);
	margin: 0 auto;
	padding: 1.25rem 1.25rem 4rem;
	font-family: var(--ie-font-body);
	color: var(--ie-text);
}

.boat-breadcrumbs {
	font-size: 12px;
	color: var(--ie-text-muted);
	margin-bottom: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}
.boat-breadcrumbs a {
	color: var(--ie-text-muted);
	text-decoration: none;
}
.boat-breadcrumbs a:hover { color: var(--ie-blue); }
.boat-breadcrumbs .current { color: var(--ie-text); }

/* 2-column layout on ≥1024px: gallery left (~68%), sticky sidebar right (~32%) */
.boat-single__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 2.5rem;
}
@media (min-width: 1024px) {
	.boat-single__layout {
		grid-template-columns: minmax(0, 68%) minmax(0, 32%);
	}
}

/* Gallery */
.boat-gallery__hero {
	aspect-ratio: 16 / 9;
	background: #eaeaea;
	border-radius: var(--ie-radius-card);
	overflow: hidden;
	margin-bottom: 0.75rem;
}
.boat-gallery__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: zoom-in;
}
.boat-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
}
.boat-gallery__thumb {
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	background: none;
	transition: border-color 150ms ease, transform 150ms ease;
}
.boat-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.boat-gallery__thumb:hover { transform: translateY(-1px); }
.boat-gallery__thumb.is-active { border-color: var(--ie-blue); }

.boat-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(6,18,30,0.94);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	touch-action: pan-y;
}
.boat-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 8px 40px rgba(0,0,0,0.5);
	user-select: none;
	-webkit-user-drag: none;
}
.boat-lightbox__close,
.boat-lightbox__prev,
.boat-lightbox__next {
	position: absolute;
	background: rgba(0,0,0,0.45);
	color: #fff;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ie-font-body);
	line-height: 1;
	transition: background 150ms ease, transform 80ms ease;
}
.boat-lightbox__close:hover,
.boat-lightbox__prev:hover,
.boat-lightbox__next:hover { background: rgba(255,255,255,0.18); }
.boat-lightbox__close:active,
.boat-lightbox__prev:active,
.boat-lightbox__next:active { transform: scale(0.94); }
.boat-lightbox__close {
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	font-size: 28px;
}
.boat-lightbox__prev,
.boat-lightbox__next {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	font-size: 34px;
}
.boat-lightbox__prev { left: 20px; }
.boat-lightbox__next { right: 20px; }
.boat-lightbox__prev:active,
.boat-lightbox__next:active { transform: translateY(-50%) scale(0.94); }
.boat-lightbox__counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-family: var(--ie-font-body);
	font-size: 14px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: var(--ie-radius-pill);
}
@media (max-width: 640px) {
	.boat-lightbox { padding: 1rem; }
	.boat-lightbox__prev,
	.boat-lightbox__next { width: 44px; height: 44px; font-size: 28px; }
	.boat-lightbox__prev { left: 10px; }
	.boat-lightbox__next { right: 10px; }
	.boat-lightbox__close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 24px; }
}
/* Lock body scroll while lightbox is open (set by gallery.js) */
body.ie-lightbox-open { overflow: hidden; }

/* Sticky sidebar — holds title + price + inline inquiry form.
   On mobile this loses its stickiness and stacks below the gallery. */
.boat-single__sticky {
	background: var(--ie-bg);
	border: 1px solid var(--ie-border);
	border-radius: var(--ie-radius-card);
	padding: 1.5rem;
	box-shadow: var(--ie-shadow-card);
	align-self: start;
}
@media (min-width: 1024px) {
	.boat-single__sticky {
		position: sticky;
		top: 104px;
	}
}
.boat-single__sticky-labels {
	font-family: var(--ie-font-body);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ie-text-muted);
	margin: 0 0 0.35rem;
}
.boat-single__sticky-title {
	font-family: var(--ie-font-body);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	margin: 0 0 0.75rem;
	color: var(--ie-text);
	text-transform: none;
	letter-spacing: 0;
}
.boat-single__price-label {
	font-family: var(--ie-font-body);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ie-text-muted);
	margin-bottom: 0.25rem;
}
.boat-single__price {
	font-family: var(--ie-font-body);
	font-size: 28px;
	font-weight: 700;
	color: var(--ie-text);
	line-height: 1.1;
	margin: 0 0 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--ie-border);
}
.boat-single__sold-badge {
	display: inline-block;
	background: var(--ie-sold);
	color: #fff;
	font-family: var(--ie-font-body);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	margin-bottom: 1rem;
}
.boat-single__sticky-meta {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ie-border);
	font-size: 13px;
	color: var(--ie-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.6rem;
}
.boat-single__sticky-meta span + span::before {
	content: "·";
	margin-right: 0.6rem;
	color: var(--ie-border);
}
/* Inline inquiry block inside the sidebar */
.boat-single__sticky .boat-inquiry {
	background: transparent;
	padding: 0;
	border: none;
	max-width: none;
}
.boat-single__sticky .boat-inquiry h3 {
	font-size: 16px;
	margin: 0 0 0.75rem;
}

/* Below-gallery content sections */
.boat-single__content {
	max-width: 100%;
}
.boat-single__content > section {
	margin-bottom: 2.5rem;
}
.boat-single__content h2 {
	font-family: var(--ie-font-body);
	font-weight: 700;
	font-size: 24px;
	margin: 0 0 1rem;
	color: var(--ie-text);
	letter-spacing: 0;
	text-transform: none;
}

.boat-description__body {
	font-size: 16px;
	line-height: 1.65;
	color: var(--ie-text);
	max-width: 720px;
}
.boat-description__body p { margin: 0 0 1rem; }

/* Spec table — 2-col dl on desktop, stacked on mobile */
.boat-specs__list {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
}
@media (min-width: 640px) {
	.boat-specs__list {
		grid-template-columns: 1fr 1fr;
		column-gap: 2.5rem;
	}
}
.boat-specs__list > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--ie-border);
}
.boat-specs__list dt {
	font-family: var(--ie-font-body);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ie-text-muted);
	margin: 0;
}
.boat-specs__list dd {
	margin: 0;
	font-family: var(--ie-font-body);
	font-size: 16px;
	font-weight: 500;
	color: var(--ie-text);
	text-align: right;
}

/* Features with yellow checkmark */
.boat-features__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px 32px;
	max-width: 680px;
}
@media (min-width: 640px) {
	.boat-features__list { grid-template-columns: 1fr 1fr; }
}
.boat-features__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ie-text);
}
.boat-features__list li::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	background: var(--ie-yellow);
	border-radius: 50%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

/* Inquiry form */
.boat-inquiry {
	background: var(--ie-bg-muted);
	padding: 1.75rem;
	border-radius: var(--ie-radius-card);
	border: 1px solid var(--ie-border);
	max-width: 720px;
}
.boat-inquiry h3 {
	font-family: var(--ie-font-body);
	font-weight: 700;
	font-size: 20px;
	margin: 0 0 1rem;
	color: var(--ie-text);
	letter-spacing: 0;
	text-transform: none;
}
.boat-inquiry--sold { text-align: center; background: #f4f4f4; }
.boat-inquiry__browse {
	display: inline-block;
	margin-top: 1rem;
	color: var(--ie-blue);
	text-decoration: none;
	font-weight: 500;
}
.boat-inquiry__browse:hover { text-decoration: underline; }

.boat-inquiry .wpcf7-form p { margin: 0 0 0.85rem; }
.boat-inquiry .wpcf7-form label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ie-text-muted);
	margin-bottom: 0.3rem;
}
.boat-inquiry .wpcf7-form input[type="text"],
.boat-inquiry .wpcf7-form input[type="email"],
.boat-inquiry .wpcf7-form input[type="tel"],
.boat-inquiry .wpcf7-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--ie-border);
	border-radius: 4px;
	font-size: 15px;
	font-family: var(--ie-font-body);
	background: #fff;
	box-sizing: border-box;
	color: var(--ie-text);
}
.boat-inquiry .wpcf7-form input:focus,
.boat-inquiry .wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--ie-blue);
	box-shadow: 0 0 0 3px rgba(57,139,199,0.15);
}
.boat-inquiry .wpcf7-form .wpcf7-submit,
.boat-inquiry .wpcf7-form input[type="submit"] {
	width: 100%;
	background: var(--ie-yellow);
	color: #000;
	border: none;
	padding: 14px 1rem;
	border-radius: var(--ie-radius-pill);
	font-family: var(--ie-font-body);
	font-weight: 500;
	font-size: 16px;
	text-transform: capitalize;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: filter 150ms ease;
	margin-top: 0.25rem;
}
.boat-inquiry .wpcf7-form .wpcf7-submit:hover,
.boat-inquiry .wpcf7-form input[type="submit"]:hover {
	filter: brightness(0.92);
}
.boat-inquiry .wpcf7-response-output {
	margin: 0.75rem 0 0;
	padding: 0.75rem;
	border-radius: 4px;
	font-size: 14px;
}
.boat-inquiry .wpcf7 form.sent .wpcf7-response-output {
	background: #e8f3ec;
	border: 1px solid var(--ie-success);
	color: var(--ie-success);
}

/* Similar boats */
.boat-similar {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--ie-border);
}
.boat-similar h2 {
	font-family: var(--ie-font-body);
	font-weight: 700;
	font-size: 24px;
	margin: 0 0 1.25rem;
	letter-spacing: 0;
	text-transform: none;
}
.boat-grid--similar {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Sold state */
.boat-single.is-sold .boat-gallery__hero img {
	filter: grayscale(0.3) brightness(0.95);
}

/* -------------------------------------------------------------
   Site footer
   ------------------------------------------------------------- */

.ie-footer {
	background: var(--ie-blue-dark);
	color: #fff;
	padding: 48px 1.25rem 32px;
	margin-top: 4rem;
	font-family: var(--ie-font-body);
}
@media (min-width: 769px) {
	.ie-footer { padding: 80px 1.25rem 40px; }
}
.ie-footer__inner {
	max-width: var(--ie-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 640px) {
	.ie-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
	.ie-footer__inner { grid-template-columns: 2fr 1fr 1.2fr 1fr; }
}
.ie-footer__col h3 {
	font-family: var(--ie-font-body);
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ie-yellow);
	margin: 0 0 1rem;
	line-height: 1.3;
}
.ie-footer__logo img {
	display: block;
	width: 180px;
	max-width: 100%;
	height: auto;
	margin-bottom: 1.25rem;
}
.ie-footer__blurb {
	font-family: var(--ie-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #fff;
	margin: 0 0 1rem;
	max-width: 360px;
}
.ie-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ie-footer__links li { margin-bottom: 0.6rem; }
.ie-footer__links a {
	color: #fff;
	text-decoration: none;
	font-family: var(--ie-font-body);
	font-size: 16px;
	font-weight: 400;
	transition: color 150ms ease;
}
.ie-footer__links a:hover { color: var(--ie-blue); }
.ie-footer__contact {
	font-family: var(--ie-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #fff;
}
.ie-footer__contact p { margin: 0 0 0.4rem; }
.ie-footer__contact a {
	color: #fff;
	text-decoration: none;
	transition: color 150ms ease;
}
.ie-footer__contact a:hover { color: var(--ie-blue); }

/* Follow Us — vertical icon-label list (matches FBMR's Elementor icon-list pattern) */
.ie-footer__follow {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ie-footer__follow li { margin-bottom: 0.6rem; }
.ie-footer__follow a {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: #fff;
	text-decoration: none;
	font-family: var(--ie-font-body);
	font-size: 16px;
	font-weight: 400;
	transition: color 150ms ease;
}
.ie-footer__follow a:hover { color: var(--ie-blue); }
.ie-footer__follow svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.ie-footer__bottom {
	max-width: var(--ie-container);
	margin: 2.5rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.18);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	font-family: var(--ie-font-body);
	font-size: 14px;
	color: rgba(255,255,255,0.75);
}
.ie-footer__bottom a {
	color: rgba(255,255,255,0.9);
	text-decoration: none;
}
.ie-footer__bottom a:hover { color: var(--ie-blue); }

/* =============================================================
   Contact page (page-contact.php)
   Layout only — colors, fonts, radii, shadows and the submit
   button all come from the tokens and .boat-inquiry rules above.
   ============================================================= */

/* Same GP flex fix the archive/single need (see top of this file). */
.ie-contact,
.site-content > .ie-contact {
	flex: 1 1 100%;
	width: 100%;
	max-width: none;
}

.ie-contact__inner {
	max-width: var(--ie-container);
	margin: 0 auto;
	padding: 0 1.5rem 3.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.ie-contact__inner {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: 3rem;
	}
}

/* .boat-inquiry caps at 720px for the narrow sidebar on boat pages;
   here it owns a full grid column. */
.ie-contact__form {
	max-width: none;
}

.ie-contact__card {
	background: var(--ie-bg-muted);
	border: 1px solid var(--ie-border);
	border-radius: var(--ie-radius-card);
	padding: 1.75rem;
}
.ie-contact__card h3 {
	font-family: var(--ie-font-body);
	font-weight: 700;
	font-size: 20px;
	margin: 0 0 1.25rem;
	color: var(--ie-text);
}

.ie-contact__detail {
	padding: 0 0 1.1rem;
	margin: 0 0 1.1rem;
	border-bottom: 1px solid var(--ie-border);
}
.ie-contact__detail:last-of-type {
	border-bottom: none;
	margin-bottom: 1.25rem;
}
.ie-contact__detail p {
	margin: 0;
	font-family: var(--ie-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ie-text);
}
.ie-contact__detail a {
	color: var(--ie-text);
	text-decoration: none;
}
.ie-contact__detail a:hover {
	color: var(--ie-blue);
}

.ie-contact__label {
	display: block;
	font-family: var(--ie-font-body);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ie-text-muted);
	margin-bottom: 0.3rem;
}

.ie-contact__cta {
	display: block;
	text-align: center;
}

/* ============================================================
   Motor Vehicles (TC2, 2026-08-13)
   The vehicle photo set mixes portrait and landscape shots at small native
   sizes (640x480 exteriors, ~1600px interiors). Cards need nothing: the
   exteriors are exactly the card's 4:3 ratio. The single-page gallery hero
   swaps the boats' 16:9 cover for a 4:3 contain frame so portrait shots
   pillarbox instead of cropping, and nothing renders past its native size
   (width/height auto + max constraints = native-or-smaller, never upscaled).
   ============================================================ */

.boat-gallery--vehicle .boat-gallery__hero {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.boat-gallery--vehicle .boat-gallery__hero img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.vehicle-condition-badge {
	display: inline-block;
	padding: 0.2rem 0.7rem;
	margin-bottom: 0.75rem;
	border: 1px solid var(--ie-border);
	border-radius: 999px;
	background: var(--ie-bg-muted);
	color: var(--ie-text-muted);
	font-family: var(--ie-font-body);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* /auto/ hero: the Polaris side-profile exterior (640x480 native) replaces the
   marina photo via an inline background-image on the modifier below. A full-
   bleed hero necessarily upscales it, so the overlay is heavier than the
   default (0.78/0.48) — the image reads as a dimmed backdrop and the H1 stays
   the focal point instead of the upscale softness. */
.boat-archive__hero--vehicle::before {
	background: linear-gradient(to bottom, rgba(27, 73, 133, 0.88), rgba(27, 73, 133, 0.64));
}