/**
 * Florida One — Locations section
 *
 * Styles for florida-one/locations-map and florida-one/locations-grid: the
 * static SVG map, the grouped location index, and the location card.
 *
 * The map is static and stays static. The interactive Leaflet upgrade that this
 * file once styled was removed — see blocks/locations-map.php for the why.
 *
 * NOTE FOR THE THEME.CSS OWNER: the location-card rules below (.fo-loc-card*)
 * live here only because assets/css/theme.css is owned by another agent. If the
 * card graduates into the shared component layer, lift .fo-loc-card* out of this
 * file wholesale — the map rules above it have no dependency on them.
 *
 * Style law: no box-shadow, no border-radius above 2px, no gradients.
 * Transitions are colour-only, 150ms ease.
 */

/* -------------------------------------------------------------------------
 * Tokens (theme.json presets with literal fallbacks)
 * ---------------------------------------------------------------------- */

.fo-map,
.fo-loc-grid-block {
	--fo-ink: var(--wp--preset--color--ink, #12202d);
	--fo-navy: var(--wp--preset--color--navy, #1c3350);
	--fo-brass: var(--wp--preset--color--brass, #a6853f);
	--fo-brass-light: var(--wp--preset--color--brass-light, #c6a96b);
	--fo-ivory: var(--wp--preset--color--ivory, #f8f5ef);
	--fo-parchment: var(--wp--preset--color--parchment, #efeae0);
	--fo-line: var(--wp--preset--color--line, #ddd5c7);
	--fo-stone: var(--wp--preset--color--stone, #6b6760);
	--fo-body: var(--wp--preset--color--body, #2a2e33);

	--fo-display: var(--wp--preset--font-family--display, "EB Garamond", Georgia, "Times New Roman", serif);
	--fo-serif: var(--wp--preset--font-family--body, "Source Serif 4", Georgia, serif);
	--fo-ui: var(--wp--preset--font-family--ui, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.fo-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Section layout — asymmetric 7/5 split
 * ---------------------------------------------------------------------- */

.fo-map__layout {
	display: grid;
	grid-template-columns: 7fr 5fr;
	/* Was 88px with stepped overrides at 1200 and 992. One fluid value covers
	   the same 40 to 88 range continuously, so the column gap no longer jumps
	   at a breakpoint. Matches the theme's clamp convention in theme.json. */
	gap: clamp(40px, 5.5vw, 88px);
	align-items: start;
}

.fo-map--bare .fo-map__layout {
	grid-template-columns: 1fr;
	gap: 0;
}

.fo-map__lede {
	padding-top: 64px;
}

@media (max-width: 992px) {
	.fo-map__layout {
		/* Single column below 992: the gap becomes vertical, so it is pinned
		   rather than fluid. */
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.fo-map__lede {
		padding-top: 0;
	}
}

/* -------------------------------------------------------------------------
 * Section head
 * ---------------------------------------------------------------------- */

.fo-map__numeral {
	display: block;
	margin: 0 0 26px;
	font-family: var(--fo-display);
	font-size: var(--wp--preset--font-size--numeral, 13px);
	letter-spacing: 0.18em;
	color: var(--fo-brass);
}

.fo-map__heading {
	margin: 0 0 44px;
	font-family: var(--fo-display);
	font-size: var(--wp--preset--font-size--h-2, clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem));
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--fo-ink);
}

@media (max-width: 768px) {
	.fo-map__numeral {
		margin-bottom: 18px;
	}

	.fo-map__heading {
		margin-bottom: 20px;
	}
}

/* -------------------------------------------------------------------------
 * Map frame — static SVG, upgraded in place
 * ---------------------------------------------------------------------- */

.fo-map__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 720 / 452;
	background: var(--fo-parchment);
	border: 1px solid var(--fo-line);
	border-radius: 0;
	box-shadow: none;
}

@media (max-width: 768px) {
	.fo-map__frame {
		aspect-ratio: 1.12;
	}
}

.fo-map__static {
	position: absolute;
	inset: 0;
}

.fo-map__svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fo-map__ground {
	/* The land. Green since 2026-08-04; parchment before that, which made the
	   Gulf and the counties the same non-colour and the map read as a diagram
	   of nothing. Tokens live in theme.css :root. */
	fill: var(--fo-map-land, var(--fo-parchment));
}

.fo-map__grid line {
	stroke: var(--fo-line);
	stroke-width: 1;
	opacity: 0.55;
}

.fo-map__water {
	fill: var(--fo-map-water, var(--fo-ivory));
}

.fo-map__coast {
	fill: none;
	stroke: var(--fo-map-coast, var(--fo-line));
	stroke-width: 1.25;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* The Caloosahatchee: a coast-coloured bank with the water colour over it,
   so the river reads as banked water rather than a line. Widths are SVG user
   units and scale with the frame. */
.fo-map__river-bank {
	fill: none;
	stroke: var(--fo-map-coast, var(--fo-line));
	stroke-width: 4.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fo-map__river {
	fill: none;
	stroke: var(--fo-map-water, var(--fo-ivory));
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The two named roads. Quieter than the coast, stronger than the grid. */
.fo-map__road {
	fill: none;
	stroke: var(--fo-stone);
	stroke-width: 1.25;
	stroke-linejoin: round;
	opacity: 0.55;
}

.fo-map__roadlabel {
	font-family: var(--fo-ui);
	font-size: 8px;
	letter-spacing: 0.12em;
	fill: var(--fo-stone);
}

.fo-map__county {
	fill: none;
	stroke: var(--fo-line);
	stroke-width: 1;
	stroke-dasharray: 4 5;
}

.fo-map__radius {
	fill: var(--fo-navy);
	fill-opacity: 0.06;
	stroke: var(--fo-brass);
	stroke-width: 1;
	stroke-dasharray: 4 5;
}

/*
 * The three font sizes below are SVG USER UNITS, not CSS pixels.
 *
 * The map is <svg viewBox="0 0 720 452"> at width:100%, so everything inside it
 * already scales proportionally with the frame. clamp() here would resolve
 * against the viewport instead of the viewBox and break that relationship,
 * making the labels the wrong size relative to the map at every width. They are
 * deliberately left as fixed user units.
 */
.fo-map__geolabel {
	font-family: var(--fo-ui);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-anchor: middle;
	fill: var(--fo-stone);
}

/* The pin layer. The tooltip plates inside it are decorative and aria-hidden,
   so they must not swallow a click aimed at the pin underneath — only the pin
   links take pointer events back. */
.fo-map__pin {
	pointer-events: none;
}

.fo-map__pin .fo-map__pin-link {
	pointer-events: auto;
}

/* Pins — ivory disc, brass hairline ring, brass numeral (design reference). */
.fo-map__pin-disc {
	fill: var(--fo-ivory);
	stroke: var(--fo-brass);
	stroke-width: 1;
}

.fo-map__pin-num {
	font-family: var(--fo-display);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-anchor: middle;
	fill: var(--fo-brass);
}

.fo-map__pin-link {
	cursor: pointer;
}

.fo-map__pin-link .fo-map__pin-disc {
	transition: fill 150ms ease, stroke 150ms ease;
}

.fo-map__pin-link:hover .fo-map__pin-disc {
	fill: var(--fo-brass);
}

.fo-map__pin-link:hover .fo-map__pin-num {
	fill: var(--fo-ink);
}

.fo-map__tip-plate {
	fill: var(--fo-ivory);
	stroke: var(--fo-line);
	stroke-width: 1;
}

/* Keep in sync with fo_locations_block_text_width() in blocks/locations-map.php. */
.fo-map__tip-text {
	font-family: var(--fo-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1.4px;
	fill: var(--fo-ink);
}

/* Below the tablet breakpoint the frame crops horizontally and the label plates
   no longer fit. The grouped index list directly below carries the same
   information, so the plates are simply withheld rather than clipped. */
@media (max-width: 768px) {
	.fo-map__tip {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Grouped index list beside the map
 * ---------------------------------------------------------------------- */

.fo-map__intro {
	max-width: 54ch;
	margin: 0 0 48px;
	font-family: var(--fo-serif);
	font-size: var(--wp--preset--font-size--body-lg, 19px);
	line-height: 1.65;
	color: var(--fo-body);
}

.fo-map__group {
	margin: 40px 0 0;
	padding-bottom: 14px;
	font-family: var(--fo-ui);
	font-size: var(--wp--preset--font-size--label, 11px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	border-bottom: 1px solid var(--fo-brass);
}

.fo-map__index > .fo-map__group:first-child {
	margin-top: 0;
}

.fo-map__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fo-map__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: clamp(12px, 1.4vw, 16px);
	padding: clamp(14px, 1.6vw, 18px) 0;
	border-bottom: 1px solid var(--fo-line);
}

.fo-map__row-main {
	display: flex;
	align-items: baseline;
	gap: 16px;
	min-width: 0;
}

.fo-map__row-num {
	flex: 0 0 auto;
	font-family: var(--fo-display);
	font-size: var(--wp--preset--font-size--numeral, 13px);
	letter-spacing: 0.18em;
	color: var(--fo-brass);
}

.fo-map__row-name {
	font-family: var(--fo-serif);
	font-size: var(--wp--preset--font-size--body, 17px);
	color: var(--fo-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 150ms ease, border-color 150ms ease;
}

.fo-map__row-name:hover,
.fo-map__row-name:focus-visible {
	color: var(--fo-navy);
	border-bottom-color: var(--fo-brass);
}

.fo-map__row-name:focus-visible {
	outline: 2px solid var(--fo-brass);
	outline-offset: 3px;
}

.fo-map__row-note {
	flex: 0 0 auto;
	font-family: var(--fo-ui);
	font-size: var(--wp--preset--font-size--label, 11px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

/* -------------------------------------------------------------------------
 * Location card grid
 * ---------------------------------------------------------------------- */

.fo-map + .fo-loc-grid-block {
	margin-top: 72px;
}

/* Grouped by county: each group carries its own brass-ruled label, so the
   groups need more air between them than cards inside a group. Ungrouped, the
   block is a single flat grid and needs none of that. */
.fo-loc-grid-block--grouped {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.fo-loc-group + .fo-loc-group {
	margin-top: 0;
}

.fo-loc-group__label {
	margin: 0 0 24px;
	padding-bottom: 14px;
	font-family: var(--fo-ui);
	font-size: var(--wp--preset--font-size--label, 11px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
	border-bottom: 1px solid var(--fo-brass);
}

/* Above 1200px an authored column count wins, so the homepage's 5-up strip and
   the archive's 4-up row are guaranteed rather than an accident of container
   width. The block sets --fo-loc-cols only when `columns` is authored; without
   it, and at every width below 1200px, the auto-fill rule takes over so a
   fixed count can never crush the cards. */
.fo-loc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--fo-loc-min, 220px), 100%), 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1201px) {
	.fo-loc-grid-block--fixed .fo-loc-grid {
		grid-template-columns: repeat(var(--fo-loc-cols, 5), minmax(0, 1fr));
	}

	/* A GROUPED GRID IS SEVERAL SHORT ROWS, NOT ONE LONG ONE, and it needs a
	   ceiling that a flat row does not.

	   The block now clamps the authored column count to the number of cards, so
	   four desks in a row asked for five tracks and get four — which is exactly
	   right for the flat strips on the home page and the quote page, where
	   filling the width is the point. Applied to the archive it produced two
	   groups of two, each track 637px wide, each card 828px tall with a 475px
	   photograph: a page of billboards.

	   So a grouped row keeps the same card size as every other row on the site
	   and simply ends where its cards end. `justify-content: start` is what stops
	   the two cards stretching to fill tracks nobody asked them to fill. */
	.fo-loc-grid-block--grouped.fo-loc-grid-block--fixed .fo-loc-grid {
		grid-template-columns: repeat(var(--fo-loc-cols, 5), minmax(0, 340px));
		justify-content: start;
	}
}

.fo-loc-card {
	display: flex;
}

.fo-loc-card__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: transparent;
	border: 1px solid var(--fo-line);
	border-radius: 0;
	box-shadow: none;
	transition: border-color 150ms ease;
}

.fo-loc-card__inner:hover,
.fo-loc-card__inner:focus-within {
	border-color: var(--fo-brass);
}

.fo-loc-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--fo-parchment);
	border-bottom: 1px solid var(--fo-line);
}

.fo-loc-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.82) contrast(1.02);
	transition: filter 150ms ease;
}

.fo-loc-card__inner:hover .fo-loc-card__photo {
	filter: saturate(0.86) contrast(1.02) brightness(1.02);
}

.fo-loc-card__photo-fallback {
	font-family: var(--fo-display);
	font-size: 34px;
	letter-spacing: 0.18em;
	color: var(--fo-line);
}

.fo-loc-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 24px;
}

.fo-loc-card__num {
	display: block;
	margin-bottom: 14px;
	font-family: var(--fo-display);
	font-size: var(--wp--preset--font-size--numeral, 13px);
	letter-spacing: 0.18em;
	color: var(--fo-brass);
}

.fo-loc-card__name {
	margin: 0 0 8px;
	font-family: var(--fo-display);
	/*
	 * ONE LINE, always — Osi, 2026-08-05. "Homeowners Department" and
	 * "Naples Chrysler Dodge Jeep Ram" wrapped at the h-3 size and threw
	 * every card's rows out of register with its neighbours'. A fixed
	 * 19px clears the longest name at the four-up card width with room
	 * to spare; nowrap holds the line and the ellipsis is the honest
	 * fallback if a longer name ever arrives.
	 */
	font-size: 19px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--fo-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fo-loc-card__name a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 150ms ease, border-color 150ms ease;
}

.fo-loc-card__name a:hover,
.fo-loc-card__name a:focus-visible {
	color: var(--fo-navy);
	border-bottom-color: var(--fo-brass);
}

.fo-loc-card__name a:focus-visible {
	outline: 2px solid var(--fo-brass);
	outline-offset: 3px;
}

.fo-loc-card__city {
	margin: 0 0 20px;
	font-family: var(--fo-ui);
	font-size: var(--wp--preset--font-size--label, 11px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

.fo-loc-card__address {
	margin: 0;
	font-family: var(--fo-serif);
	font-size: var(--wp--preset--font-size--small, 15px);
	line-height: 1.6;
	color: var(--fo-body);
}

.fo-loc-card__rule {
	width: 60%;
	height: 1px;
	margin: 22px 0;
	background: var(--fo-line);
}

.fo-loc-card__manager {
	margin: 0;
	font-family: var(--fo-serif);
	font-size: 16px;
	color: var(--fo-ink);
}

.fo-loc-card__role {
	margin: 5px 0 0;
	font-family: var(--fo-ui);
	font-size: var(--wp--preset--font-size--label, 11px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fo-stone);
}

.fo-loc-card__meta {
	display: flex;
	/*
	 * flex-end, not baseline: the left side is now a two-row phone stack,
	 * and Osi wants the hub link at the BOTTOM right (2026-08-05) — level
	 * with the manager's number, not floating beside customer service.
	 */
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 24px;
	font-family: var(--fo-ui);
	font-size: var(--wp--preset--font-size--label, 11px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Stone rather than the mockup's #8C8578 — that value is 3.4:1 on ivory and
   fails WCAG AA for small text. Stone is 5.2:1. */
.fo-loc-card__phone {
	color: var(--fo-stone);
	text-decoration: none;
	/*
	 * inline-block, and no reveal-on-hover border. The two-row structure put
	 * a BLOCK label inside this inline anchor, which fragments an inline box
	 * into two line boxes — and a border-bottom on an inline element paints
	 * under EVERY fragment, so the hover underline doubled. One box, and the
	 * hover speaks through colour alone, like the ledger rows on the hub.
	 */
	display: inline-block;
	transition: color 150ms ease;
}

a.fo-loc-card__phone:hover,
a.fo-loc-card__phone:focus-visible {
	color: var(--fo-ink);
}

.fo-loc-card__phone--placeholder {
	cursor: default;
}

.fo-loc-card__hub {
	padding-bottom: 3px;
	color: var(--fo-navy);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid var(--fo-brass);
	transition: color 150ms ease, border-color 150ms ease;
}

.fo-loc-card__hub:hover,
.fo-loc-card__hub:focus-visible {
	color: var(--fo-ink);
	border-bottom-color: var(--fo-ink);
}

.fo-loc-card__phone:focus-visible,
.fo-loc-card__hub:focus-visible,
.fo-loc-card__btn:focus-visible {
	outline: 2px solid var(--fo-brass);
	outline-offset: 3px;
}

/* Mobile action pair — the approved mobile card swaps the meta row for two
   44px touch targets. */
.fo-loc-card__actions {
	display: none;
	gap: 10px;
	margin-top: auto;
	padding-top: 20px;
}

.fo-loc-card__btn {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-family: var(--fo-ui);
	font-size: var(--wp--preset--font-size--label, 11px);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
	transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.fo-loc-card__btn--solid {
	color: var(--fo-ink);
	border: 1px solid var(--fo-ink);
}

.fo-loc-card__btn--solid:hover,
.fo-loc-card__btn--solid:focus-visible {
	color: var(--fo-ivory);
	background: var(--fo-navy);
	border-color: var(--fo-navy);
}

.fo-loc-card__btn--ghost {
	color: var(--fo-navy);
	border: 1px solid var(--fo-line);
}

.fo-loc-card__btn--ghost:hover,
.fo-loc-card__btn--ghost:focus-visible {
	color: var(--fo-ink);
	border-color: var(--fo-brass);
}

@media (max-width: 560px) {
	.fo-loc-card__media {
		aspect-ratio: 16 / 10;
	}

	.fo-loc-card__body {
		padding: 22px;
	}

	.fo-loc-card__name {
		font-size: 22px;
	}

	.fo-loc-card__address {
		font-size: 16px;
	}

	.fo-loc-card__rule {
		margin: 18px 0;
	}

	.fo-loc-card__meta {
		display: none;
	}

	.fo-loc-card__actions {
		display: flex;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion — nothing here animates position, but be explicit.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fo-map *,
	.fo-loc-grid-block * {
		transition-duration: 0.01ms !important;
	}
}