/* Footer V6 — Multi-location footer: action band, office directory, 3-column link list, legal bar */

.ftr.v6 {
	--ftr-v6-hair: hsl(from var(--text-color) h s l / 0.14);
	--ftr-v6-rule: hsl(from var(--text-color) h s l / 0.72);

	/* ── Band 1: identity + appointment + phone ──────────────── */

	.ftr-v6-act {
		background-color: hsl(from var(--background) h s calc(l + 4));
		border-bottom: 1px solid var(--ftr-v6-hair);
	}

	.ftr-v6-claim {
		color: var(--ftr-v6-rule);
		max-width: 34ch;
	}

	.ftr-v6-call-lbl {
		display: block;
		color: var(--ftr-v6-rule);
		font-size: 0.806rem;
	}

	/* ── Band 2: the office directory ────────────────────────── */

	.ftr-v6-sub {
		color: var(--ftr-v6-rule);
	}

	/* Four across on desktop. mx-4 only reaches 25% at a >=78rem container and
	   mn_tn is narrower than that, so the step is set here — same idiom as
	   footer-v4's .ftr-v4-quick-grid. */
	.ftr-v6-locs {
		@media screen and (min-width: 1280px) {
			& {
				--itm-val: 25;
			}
		}
	}

	.ftr-v6-loc {
		border-left: 2px solid hsl(from var(--accent) h s l / 0.45);
		padding-left: 0.889rem;
	}

	.ftr-v6-loc-sum {
		cursor: default;
		list-style: none;

		&::-webkit-details-marker {
			display: none;
		}

		svg {
			display: none;
			width: 1.111rem;
			flex: none;
			fill: var(--accent);
		}
	}

	.ftr-v6-loc-name {
		font-size: 0.944rem;
	}

	.ftr-v6-loc-addr {
		color: var(--ftr-v6-rule);
		font-style: normal;
		margin-top: 0.278rem;
	}

	.ftr-v6-dir {
		width: fit-content;
		color: var(--accent);
		border-bottom: 1px solid transparent;

		svg {
			width: 0.944rem;
			flex: none;
			fill: currentColor;
		}

		&:where(:hover, :focus-visible) {
			border-bottom-color: currentColor;
		}
	}

	.ftr-v6-locs-all {
		width: fit-content;
		color: var(--accent);
	}

	/* ── Band 3: one 3-column link list that wraps + social ──── */

	.ftr-v6-nav {
		border-top: 1px solid var(--ftr-v6-hair);
	}

	.ftr-v6-h {
		color: var(--accent);
	}

	.ftr-v6-lnks {
		@media screen and (min-width: 1280px) {
			& {
				--itm-val: 33.333;
			}
		}

		/* Keeps each link a 44px-plus tap target */
		a {
			display: block;
		}
	}

	.ftr-v6-social-btn {
		width: 2.556rem;
		height: 2.556rem;
		border: 1px solid var(--ftr-v6-hair);
		border-radius: 50%;
		transition: background-color var(--g-trn-sp) var(--g-trn-tf), color var(--g-trn-sp) var(--g-trn-tf);

		svg {
			font-size: 1.056rem;
		}

		&:where(:hover, :focus-visible) {
			background-color: var(--accent);
			border-color: var(--accent);
			color: var(--background);
		}
	}

	/* ── Band 4: legal ───────────────────────────────────────── */

	.ftr-v6-legal {
		background-color: hsl(from var(--background) h s calc(l - 4));
		border-top: 1px solid var(--ftr-v6-hair);

		:is(p, a) {
			color: var(--ftr-v6-rule);
			font-size: 0.806rem;
		}

		a:where(:hover, :focus-visible) {
			color: var(--text-color);
		}
	}

	/* ── Responsive ──────────────────────────────────────────── */

	@media screen and (max-width: 1279px) {

		.ftr-v6-claim {
			max-width: none;
		}
	}

	/* Directory mode — half-width items or narrower. init.js holds every office
	   open here, so the summary is a heading rather than a control and must not
	   swallow clicks or offer a toggle affordance. */
	@container (width >= 50rem) {

		.ftr-v6-loc-sum {
			pointer-events: none;
		}
	}

	/* Accordion mode, keyed to the grid rather than the viewport: it engages only
	   once mx-4 drops to one office per row (--itm-val: 100, i.e. a container
	   under 50rem). At half width or narrower the offices stay open as a
	   directory. init.js reads --itm-val so the `open` attribute tracks the same
	   threshold; with JS off every office stays expanded either way. */
	@container (width < 50rem) {

		/* The rows carry their own hairlines, so the row gap goes to zero. */
		.ftr-v6-locs {
			row-gap: 0rem;
		}

		.ftr-v6-loc {
			border-left: 0;
			border-top: 1px solid var(--ftr-v6-hair);
			padding-left: 0;

			&:last-child {
				border-bottom: 1px solid var(--ftr-v6-hair);
			}
		}

		.ftr-v6-loc-sum {
			cursor: pointer;
			min-height: 3.111rem;

			svg {
				display: block;
				transition: transform var(--g-trn-sp) var(--g-trn-tf);
			}
		}

		.ftr-v6-loc-dtl[open] .ftr-v6-loc-sum svg {
			transform: rotate(180deg);
		}

		/* Slide open/close. Mirrors the faq-tools.css pattern rather than loading
		   it, since that file is scoped to .faq — same approach services-v6 and
		   side-nav-grand take. Reduced motion is already handled globally by the
		   blanket transition:none in global.css. */
		.ftr-v6-loc-dtl {
			interpolate-size: allow-keywords;

			&::details-content {
				height: 0;
				overflow: clip;
				transition: height var(--g-trn-sp) var(--g-trn-tf),
				            content-visibility var(--g-trn-sp) var(--g-trn-tf) allow-discrete;
			}

			&[open]::details-content {
				height: auto;
			}
		}

		.ftr-v6-loc-body {
			padding-bottom: 0.889rem;
		}

		/* 44px is the absolute tap-target minimum, not a design-scale value,
		   so it stays in px rather than tracking the fluid root. */
		.ftr-v6-dir {
			min-height: 44px;
		}
	}
}