/* ==========================================================================
   Location Brand Statement (neilkelly/location-brand)
   Figma: Brand / Market Establishment (1692:513)
   Token-driven. Wrapper: .wp-block-neilkelly-location-brand.nk-location-brand
   Left-aligned editorial statement: red eyebrow heading + large lead paragraph.
   ========================================================================== */
.wp-block-neilkelly-location-brand.nk-location-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Gap between statement groups; the eyebrow→copy gap within a group is on __group. */
	gap: var(--wp--preset--spacing--16);
	padding-block: var(--wp--preset--spacing--7) var(--wp--preset--spacing--section);
	/* Full-bleed band; content column centers at content-width on wide viewports
	   (gutter fallback below ~content-width) — matches location-featured-projects. */
	padding-inline: max(var(--wp--preset--spacing--gutter), calc((100% - var(--wp--custom--layout--content-width)) / 2));
	background: var(--wp--preset--color--surface-page);
	font-family: var(--wp--preset--font-family--inter);
	text-align: left;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Modifier: is-surface-subtle
   Fills the band with the grey the Service Process section on the same page uses
   (surface-subtle #f5f5f5) instead of the default white, so the Intro reads as its
   own band rather than running into the sections around it. Opt-in via className —
   today only single-service-handyman-services.html asks for it; the four
   location-side templates and the Solar, Custom Homes and ADUs service pages keep
   surface-page.

   Safe to sit next to: Service Categories above and Cost Drivers below are both
   white, so there is no two-near-identical-greys seam of the kind noted on
   .nk-service-process.is-surface-plain.

   Not a BEM "--" modifier on purpose: WordPress escapes "--" inside block-comment
   attributes, so it would arrive as "u002du002d" and never match. Same naming
   reason as the is-surface-* modifiers on nk-service-process.
   -------------------------------------------------------------------------- */
.wp-block-neilkelly-location-brand.nk-location-brand.is-surface-subtle {
	background: var(--wp--preset--color--surface-subtle);
}

/* One heading + copy pair. Column-stacked, left-aligned, with a tight gap between
   the eyebrow heading and its copy; groups are separated by the wrapper's gap. */
.wp-block-neilkelly-location-brand .nk-location-brand__group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--6);
}

/* Section headings wrap at the theme-wide headline measure — 972px, three quarters of the
   1296px content column. Set here on each heading style, and identically in the other 35
   single-column blocks that carry a --content or --structural headline, so the whole set wraps
   on one measure instead of 14 bespoke ones. Approved by Shawn 2026-08-18.

   The block reached this in two steps the same day: it first LOST its old 720px cap (which sat
   below the 1000px body copy, so the headline wrapped sooner than the paragraph under it), then
   gained the shared measure. The intermediate full-width state is not what shipped.

   The SUBHEADING is deliberately NOT in this set — it keeps the copy measure below, since it
   reads as part of the prose rather than as the section's headline. */
.wp-block-neilkelly-location-brand .nk-location-brand__heading {
	/* Headline measure — three quarters of the content column, theme-wide (Shawn, 2026-08-18). */
	max-width: var(--wp--custom--layout--headline-measure);
	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--mid);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-red);
	margin: 0;
}

/* Black eyebrow option (ACF heading_type = "eyebrow_black"), added 2026-08-15. Rides the
   eyebrow base class above and overrides ONLY the colour, so the two share one set of label
   geometry — change the size, weight, tracking or case once and both follow.

   Offered only by group_nk_service, so the four location-side templates cannot reach it and
   their red eyebrows are untouched. Worth noting for anywhere it does get used: brand-red on
   white measures 4.92:1, a marginal WCAG AA pass at this 14px semibold size, where
   ink-primary is 18.88:1. */
.wp-block-neilkelly-location-brand .nk-location-brand__heading--black {
	color: var(--wp--preset--color--ink-primary);
}

/* Standard heading option (ACF heading_type = "standard"): a structural headline.
   render.php drops the eyebrow base class for this variant, so size + case come
   from the shared .nk-headline--structural class; the block owns the rest. */
.wp-block-neilkelly-location-brand .nk-location-brand__heading--standard {
	/* Headline measure — three quarters of the content column, theme-wide (Shawn, 2026-08-18). */
	max-width: var(--wp--custom--layout--headline-measure);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--xl);
	letter-spacing: normal;
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

/* Content-headline option (ACF heading_type = "content"): the large uppercase section
   headline, for a row that opens the section the way Process or Problems opens theirs.

   Size + case come from the shared .nk-headline--content class (xxl, uppercase), which is
   theme-global in theme.json rather than any block's stylesheet. The three declarations below
   are the ones .nk-service-process__heading pairs with it, so a row set to this style matches
   that section exactly. THEY ARE A COPY, NOT A REFERENCE: block stylesheets are enqueued per
   block, so pointing at .nk-service-process__heading would leave this heading unstyled on any
   page without a Process section. If that treatment changes, change it here too.

   The measure is NOT copied from that block either — both now take the theme-wide headline
   measure set above, which is the same 972px the --service modifier used to apply here alone. */
.wp-block-neilkelly-location-brand .nk-location-brand__heading--content {
	/* Headline measure — three quarters of the content column, theme-wide (Shawn, 2026-08-18). */
	max-width: var(--wp--custom--layout--headline-measure);
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

/* Subheading option (ACF heading_type = "subheading"): the standard heading one size
   down, for a row that sits under an earlier standard row rather than opening the
   section. Offered only by group_nk_service, so this is unreachable from the four
   location-side groups — see the render.php docblock.

   Overrides the xl (36px) that .nk-headline--structural carries: lg (25px) sits between
   that heading and the 25px body, which is the whole point of the variant. Two classes
   beat that utility's single class, so no !important is needed. */
.wp-block-neilkelly-location-brand .nk-location-brand__heading--subheading {
	max-width: var(--wp--custom--components--people--cta-body-max-width);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--lg-tight);
	letter-spacing: normal;
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

/* Font style (size / weight / line-height) is kept in sync with
   .nk-person-philosophy__body, .nk-about-founded__copy, .nk-about-one-team__copy and
   .nk-why-intro__body — all five are the same large-prose treatment and share one set of
   tokens. CHANGE ALL FIVE TOGETHER (each of those carries the same note; the two About
   sections joined on 2026-08-12, the Why intro on 2026-08-13).
   Intro copy sized down from lg-xl (30px) at the client's request 2026-08-04: it read as
   too large, and the ask was to land between the original and standard body copy (base,
   16px). The midpoint is 23px, which is not on the scale — it steps md 20px → lg 25px —
   so lg is the nearest rung, 2px above. Adding a 23px token was the alternative and was
   NOT taken: typography is a foundations concern owned by the designer in Figma, not
   something to invent for one section.

   One size at every width now. The two overrides below were 28px at ≤1023 and 25px at
   ≤767; with the base at 25px both were redundant, and keeping a 28px tablet step would
   have made tablet LARGER than desktop. Nothing renders bigger than it did before. */
.wp-block-neilkelly-location-brand .nk-location-brand__body {
	max-width: var(--wp--custom--components--people--cta-heading-max-width);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--md-tight);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

/* Medium body option (ACF brand_body_size = "md"), added 2026-08-15 for the Handyman Intro
   band. Set once for the section, so it lands on every row's paragraph.

   NOT PART OF THE SYNC GROUP ABOVE. This is an opt-in step down from it, not a change to it:
   the base rule keeps lg, render.php emits this class only when a row explicitly asks for md,
   and the field offering the choice exists only in group_nk_service. So the other four members
   of that group, and the four location-side templates using this block, are all unaffected.

   md (20px) with the md line-height (1.45) rather than the base's md-tight (1.4) — the same
   pairing .nk-service-categories__intro uses directly above this section on the Handyman page,
   so the two read as one voice. A tighter line-height suits 25px, a looser one suits 20px. */
.wp-block-neilkelly-location-brand .nk-location-brand__body--md {
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--line-height--md);
}

/* ==========================================================================
   Service variant (.nk-location-brand--service)
   Added 2026-08-15 for the Handyman service page, which composes this block as its
   Intro band. Everything below is scoped to the modifier class render.php only adds
   on a service post, so the four location-side templates are untouched.

   Two differences from the location pages:
     measure  every row wraps at three quarters of the content column (972px) instead
              of the two per-element widths above, so the ragged right edge lines up
              down the section
     padding  72px top and bottom, matching the Service Categories grid above it and
              the Knowledge cards below, rather than the 28px/80px the location pages
              use to sit under their hero
   ========================================================================== */

.wp-block-neilkelly-location-brand.nk-location-brand--service {
	padding-block: var(--wp--preset--spacing--gutter);
	/* Tighter than the 64px the location pages put between statement groups: this
	   variant's rows are a heading group and a subheading group reading as one
	   argument, not separate market statements. Also sets the offset above the CTA
	   pair, which is a flex child of the same column. */
	gap: var(--wp--preset--spacing--12);
}

/* Headings are absent here on purpose: the base rules above already give them the theme-wide
   headline measure, which is the same 972px this rule applies, so repeating them would only
   duplicate it. What this rule still does is put the COPY — and the subheading, which reads as
   copy — on that measure on service pages, where it would otherwise take the 1000px location
   measure. */
.wp-block-neilkelly-location-brand.nk-location-brand--service .nk-location-brand__heading--subheading,
.wp-block-neilkelly-location-brand.nk-location-brand--service .nk-location-brand__body {
	max-width: var(--wp--custom--components--location-brand--service-measure);
}

/* ── CTA pair ────────────────────────────────────────────────────────────
   Only rendered when the CTA fields are filled, which today means only on a service
   post. Treatment is duplicated from .nk-service-categories__btn — filled black
   primary, outlined secondary, radius lg, base semibold — the same per-block
   convention .nk-drivers__btn and .nk-service-process__btn follow. If these ever move
   to one shared place, they all move together. ------------------------------------- */

.wp-block-neilkelly-location-brand .nk-location-brand__ctas {
	display: flex;
	/* Wraps rather than shrinking the buttons: two long labels at a narrow desktop
	   width would otherwise squeeze both. */
	flex-wrap: wrap;
	/* Left, with the copy. */
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--4);
}

.wp-block-neilkelly-location-brand .nk-location-brand__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6-5);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	border-radius: var(--wp--custom--radius--lg);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.wp-block-neilkelly-location-brand .nk-location-brand__btn--primary {
	background: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--brand-white);
	border: 1.5px solid var(--wp--preset--color--surface-dark);
}

.wp-block-neilkelly-location-brand .nk-location-brand__btn--primary:hover,
.wp-block-neilkelly-location-brand .nk-location-brand__btn--primary:focus-visible {
	background: var(--wp--preset--color--ink-primary);
	border-color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-location-brand .nk-location-brand__btn--secondary {
	background: transparent;
	color: var(--wp--preset--color--ink-primary);
	border: 1.5px solid var(--wp--preset--color--surface-dark);
}

.wp-block-neilkelly-location-brand .nk-location-brand__btn--secondary:hover,
.wp-block-neilkelly-location-brand .nk-location-brand__btn--secondary:focus-visible {
	background: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--brand-white);
}

.wp-block-neilkelly-location-brand .nk-location-brand__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-black);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-neilkelly-location-brand .nk-location-brand__btn {
		transition: none;
	}
}

/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
	.wp-block-neilkelly-location-brand.nk-location-brand--service {
		padding-block: var(--wp--preset--spacing--12);
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.wp-block-neilkelly-location-brand.nk-location-brand {
		padding-inline: var(--wp--preset--spacing--6);
	}

	/* The measure is narrower than the viewport here, so capping would only add a
	   second constraint on top of the padding. */
	.wp-block-neilkelly-location-brand.nk-location-brand--service .nk-location-brand__heading--subheading,
	.wp-block-neilkelly-location-brand.nk-location-brand--service .nk-location-brand__body {
		max-width: none;
	}

	/* Stacked and full width, as the other sections on the service page do at this
	   width — side by side, two labels leave each button too narrow to read as a
	   target. */
	.wp-block-neilkelly-location-brand .nk-location-brand__ctas {
		flex-direction: column;
		align-items: stretch;
		align-self: stretch;
	}

	.wp-block-neilkelly-location-brand .nk-location-brand__btn {
		width: 100%;
	}
}

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

/* ── Seam: directly above a header-less Scope Tiers grid ──────────────────
   When the tier grid below has no heading and no body, its first row of cards is the
   next thing the eye meets, and this band's bottom padding stacks on top of that
   section's own 48px top padding — 120px of dead space in the --service case, where the
   band pads 72px. Dropping this side to zero leaves the tier section's own padding to set
   the gap, which is what the pair reads like when the grid does have a header.

   CROSS-BLOCK, in both directions: the class comes from neilkelly/service-scope-tiers
   (see the note above its wrapper in render.php) because a section cannot see inside its
   neighbour, and :has() cannot be nested inside :has(), so the emptiness has to be
   published as a class rather than tested from here.

   Specificity is 0,3,0 — the subject's class plus the two in the :has() argument — so it
   beats the 0,2,0 --service rules at every breakpoint without needing source order.

   single-service-adu.html is the only template composing this pair today; the rule is
   written to the adjacency rather than to that template, so a second one behaves the same. */
.wp-block-neilkelly-location-brand:has(+ .wp-block-neilkelly-service-scope-tiers.nk-scope--no-header) {
	padding-bottom: 0;
}

/* ── Seam: directly below a Scope Tiers grid ──────────────────────────────
   The other half of the pair above, for a band that follows the tier grid rather than
   leading it. The grid takes its own bottom padding to zero (see the matching note at the
   end of blocks/service-scope-tiers/style.css) and this side steps 72px down to 48px, so
   the two sections meet on one 48px gap instead of stacking 96 + 72.

   48px is what --service already uses below 1024px, so this only changes the desktop step;
   at tablet and mobile the declaration matches what the band would have set anyway.

   Adjacency, not template: single-service-adu.html is the only file composing this pair
   today. Plain sibling combinator rather than :has() — the subject is this band, and it
   can see the section before it.

   Specificity is 0,3,0 — the neighbour's class plus this element's two — so it beats the
   0,2,0 --service padding-block at every breakpoint. padding-top rather than padding-block
   so only the side that meets the grid moves. */
.wp-block-neilkelly-service-scope-tiers + .wp-block-neilkelly-location-brand.nk-location-brand {
	padding-top: var(--wp--preset--spacing--12);
}