/* Local Anchor — the market's physical presence (Figma 1692:910).
   Two-column section: physical info (address/tel/mailto/hours/CTA) beside a map.
   Token-driven; zero hardcoded design values.
   Wrapper: .wp-block-neilkelly-location-anchor.nk-location-anchor */
.nk-location-anchor {
	padding: var(--wp--preset--spacing--section) 0;
	background: var(--wp--preset--color--surface-section);
}

/* --------------------------------------------------------------------------
   Modifier: is-hub-gutters — the Event Location Hub (/{city}/events/)

   ALIGNMENT ONLY, NO TREATMENT. Shawn asked on 2026-08-11 for the hub to wear the
   event-details treatment (page surface, stepped-down heading, one column) and on
   2026-08-12 for the Location page's treatment back: the grey band, the --content
   landmark heading and the two-column info-beside-map grid above. All three are this
   block's defaults, so nothing here re-states them and inc/location-events.php holds
   no anchor styling filters — see the note there.

   What is left is the one thing the default gets wrong on that page: the responsive
   gutters. This block steps its container to 24px at tablet and 16px at mobile, while
   every other section on the hub (events-featured, events-upcoming, event-presenters)
   holds the full gutter to 767px and then goes to 24px. Unmatched, the hub's shared
   left edge would break at tablet and again at mobile. The two overrides live with
   the breakpoints at the bottom of this file.

   THE WIDTH NEEDS NOTHING. The container is already the same content box as the
   sections either side — see the note below — so this modifier deliberately does not
   touch max-width.
   -------------------------------------------------------------------------- */

/* NO max-width override for the hub, deliberately. This container is content-box —
   this file sets box-sizing nowhere and the theme has no universal reset — so its
   `max-width: global content-size` (1296) already caps the CONTENT at 1296 inside a
   1440 total, which is pixel-for-pixel what nk-events-featured__inner produces from
   the other direction (1440 cap, border-box, gutter inside). Raising this cap to
   1440 makes the content 1440 and the section 1584 — 144 wider than every neighbour,
   overhanging them by 72 a side. Only the gutters below need matching. */

/* NOTE — on the single-event template this section renders INSIDE
   neilkelly/event-body's left column, which owns the band, the gutter and the
   850px measure for everything in it (see that block's "Children handed their
   layout back" rules, which name this block explicitly). So there are no
   background or width overrides here: only the two layout rules below, which
   event-body has no opinion about. */

/* One-column layout, with the map sitting inside the info column directly above the
   Get Directions button (render.php places it there — see the map_inline filter).
   The two-column grid is a market-page arrangement; here the map is part of the
   reading order, not a panel beside it.
   EVENT SINGLE ONLY. The Event Location Hub shared these two rules until 2026-08-12,
   when Shawn asked for the Location page's two-column arrangement there instead. */
.single-event .nk-location-anchor__grid {
	display: block;
}

.single-event .nk-location-anchor__map {
	/* Not a flex column of its own here — full width inside the info stack. */
	flex: 0 0 auto;
	width: 100%;
}
.nk-location-anchor__container {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

/* Header */
.nk-location-anchor__header {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	max-width: var(--wp--custom--components--location-anchor--header-max-width);
}
.nk-location-anchor__heading {
	/* Headline measure — three quarters of the content column, theme-wide (Shawn, 2026-08-18). */
	max-width: var(--wp--custom--layout--headline-measure);
	/* Size + case from the shared .nk-headline--content class (mapped in render.php). */
	margin: 0;
	/* Extrabold, matching every other .nk-headline--content section heading in the
	   theme; this one was the odd bold out. */
	font-weight: var(--wp--custom--font-weight--extrabold);
	/* 1.222 (not none) matches Figma's ~1.22 leading — the 2-line heading renders
	   ~122px tall at 50px, per node 1533:3. */
	line-height: var(--wp--custom--line-height--xl);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--preset--color--ink-primary);
}
.nk-location-anchor__subhead {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--ink-secondary);
}

/* Two-column grid */
.nk-location-anchor__grid {
	display: flex;
	gap: var(--wp--preset--spacing--12);
	align-items: flex-start;
}
.nk-location-anchor__info {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
}

/* Place name */
.nk-location-anchor__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--md-base);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--ink-primary);
}

/* Address block */
.nk-location-anchor__address {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
}
.nk-location-anchor__address-line {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--ink-secondary);
}
.nk-location-anchor__phone {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--ink-primary);
	text-decoration: none;
	width: fit-content;
}
.nk-location-anchor__email {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--ink-secondary);
	text-decoration: underline;
	width: fit-content;
}
.nk-location-anchor__phone:hover,
.nk-location-anchor__phone:focus-visible,
.nk-location-anchor__email:hover,
.nk-location-anchor__email:focus-visible {
	color: var(--wp--preset--color--brand-red);
}

/* Business hours — single supporting line inside the address block. */
.nk-location-anchor__hours {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--ink-secondary);
}

/* Get Directions CTA */
.nk-location-anchor__cta {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	/* Black on this light-grey (surface-section) background — off the red CTA. */
	background: var(--wp--preset--color--brand-black);
	color: var(--wp--preset--color--brand-white);
	border-radius: var(--wp--custom--radius--lg);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	/* 1.2 (not none) → 16px text renders a ~19px line box, giving the 43px
	   button height from Figma (12px + 19px + 12px). */
	line-height: var(--wp--custom--line-height--lg-tight);
	text-decoration: none;
	transition: background-color 200ms ease;
}
.nk-location-anchor__cta::after {
	content: "\2192";
	margin-left: var(--wp--preset--spacing--2);
}
.nk-location-anchor__cta:hover,
.nk-location-anchor__cta:focus-visible {
	background: var(--wp--preset--color--neutral-800);
}
.nk-location-anchor__cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink-primary);
	outline-offset: 2px;
}

/* Divider between contact info and the service-area module. */
.nk-location-anchor__divider {
	margin: 0;
	border: 0;
	width: 100%;
	height: 1px;
	background: var(--wp--preset--color--border-subtle);
}

/* Areas We Serve */
.nk-location-anchor__areas-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-secondary);
}
.nk-location-anchor__areas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}
.nk-location-anchor__county {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--surface-subtle);
	border: 1px solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--full);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--ink-primary);
}
.nk-location-anchor__neighborhoods {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--base);
	color: var(--wp--preset--color--ink-secondary);
}

/* Map panel */
.nk-location-anchor__map {
	flex: 1 1 0;
	min-width: 0;
	min-height: var(--wp--custom--components--location-anchor--map-min-height);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--wp--preset--color--surface-section);
}
.nk-location-anchor__map :where(iframe, img),
.nk-location-anchor__map-image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: var(--wp--custom--components--location-anchor--map-min-height);
	border: 0;
	object-fit: cover;
}

/* Tablet */
@media (max-width: 1023px) {
	.nk-location-anchor__container { padding-inline: var(--wp--preset--spacing--6); }

	/* The hub's other sections hold the full gutter until 768px, so this one does
	   too — otherwise their shared left edge breaks at tablet only. */
	.wp-block-neilkelly-location-anchor.is-hub-gutters .nk-location-anchor__container {
		padding-inline: var(--wp--preset--spacing--gutter);
	}
}

/* Mobile */
@media (max-width: 767px) {
	.nk-location-anchor { padding: var(--wp--preset--spacing--12) 0; }
	.nk-location-anchor__container { padding-inline: var(--wp--preset--spacing--4); }
	/* Mobile gutter matched to the sibling sections (24px, not this block's 16px). */
	.wp-block-neilkelly-location-anchor.is-hub-gutters .nk-location-anchor__container {
		padding-inline: var(--wp--preset--spacing--6);
	}
	.nk-location-anchor__heading { font-size: var(--wp--preset--font-size--xl); }
	.nk-location-anchor__grid { flex-direction: column; gap: var(--wp--preset--spacing--8); }
	.nk-location-anchor__map { flex-basis: auto; width: 100%; min-height: var(--wp--custom--components--location-anchor--map-min-height-mobile); }
	.nk-location-anchor__map :where(iframe, img),
	.nk-location-anchor__map-image { min-height: var(--wp--custom--components--location-anchor--map-min-height-mobile); }
}

/* No block-gap seam between full-bleed sections. */
.wp-block-neilkelly-location-anchor { margin-block: 0; }