/* Atlas Sun Systems — HTML sitemap.
   The rows are printed by atlas-sitemap.php (see that file for why the page is
   generated, and why it is neither the static build's five card panels nor the
   bare column list that replaced them), so all of this component's styling
   lives here rather than in Elementor. Values read the design tokens Elementor
   publishes on :root.

   Anchor and element rules are prefixed `body .elementor`. Elementor's kit
   styles links and headings as `.elementor-kit-405 a` / `h2` — specificity
   (0,2,0) — and load after this file, so a bare `.atlas-sitemap-link` loses
   the tie silently: the rule is in the stylesheet, and none of it applies. */

.atlas-sitemap {
	display: flex;
	flex-direction: column;
	gap: 3.5rem;
}

@media (max-width: 767px) {
	.atlas-sitemap {
		gap: 2.75rem;
	}
}

/* --- Group ---------------------------------------------------------------- */

/* Each group opens like a chapter: a hairline across the full measure with a
   Sun tick at its start. The tick is the primary nav's current-page indicator
   at the same 2px — this is the one place on the page where the brand accent
   appears, and it is what stops 42 links on white from reading as a spreadsheet. */
.atlas-sitemap-group {
	position: relative;
	border-block-start: 1px solid var(--BorderLine);
	padding-block-start: 1.375rem;
}

.atlas-sitemap-group::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 0;
	width: 3rem;
	height: 2px;
	border-radius: var(--RadiusPill);
	background: var(--Sun);
}

/* --- Group header --------------------------------------------------------- */

.atlas-sitemap-head {
	display: flex;
	align-items: baseline;
	gap: 0.875rem;
	margin-block-end: 1.125rem;
}

.atlas-sitemap-index {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--TextXs);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--TrackLabel);
	color: var(--MutedForeground);
}

body .elementor .atlas-sitemap-head h2 {
	margin: 0;
	font-family: var(--DisplayFont), sans-serif;
	font-size: var(--DisplayH4);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: var(--Ink);
}

/* Out at the right margin, so the header line spans the group it introduces
   instead of clustering in the left corner. */
.atlas-sitemap-count {
	margin-inline-start: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--TextXs);
	/* The counts line up down the page; proportional digits wobble. */
	font-variant-numeric: tabular-nums;
	color: var(--MutedForeground);
}

/* --- Rows ----------------------------------------------------------------- */

/* A real grid, not `column-count`. Newspaper columns flow top-to-bottom and
   leave a half-empty column wherever a group's count does not divide evenly;
   a grid keeps every row level across the page, which is what makes the rules
   below read as one ruled index rather than three loose lists. */
body .elementor .atlas-sitemap-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 2.5rem;
}

@media (max-width: 1279px) {
	body .elementor .atlas-sitemap-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	body .elementor .atlas-sitemap-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The rule belongs to the row, not the link, so it runs the column's full width
   and lands at the same height in every column — the grid stretches each item
   to its row's height. */
.atlas-sitemap-item {
	display: flex;
	border-block-end: 1px solid var(--BorderSoft);
}

body .elementor .atlas-sitemap-link {
	flex: 1;
	position: relative;
	padding: 0.875rem 2.25rem 0.9375rem 0.75rem;
	/* The hover tint wants room around the text, but the text itself must stay
	   on the column's own edge — otherwise the first column no longer lines up
	   with the group's index number and Sun tick. So the box is widened by its
	   padding on both sides and pulled back by the same amount: text and arrow
	   land exactly on the row rule's two ends, and the tint bleeds evenly. */
	margin-inline: -0.75rem;
	border-radius: var(--RadiusMd);
	text-decoration: none;
	color: var(--Ink);
	transition: background-color 0.18s ease;
}

.atlas-sitemap-title {
	display: block;
	font-weight: 600;
	line-height: 1.4;
	color: var(--Ink);
	transition: color 0.18s ease;
}

.atlas-sitemap-blurb {
	display: block;
	margin-block-start: 0.25rem;
	font-size: var(--TextSm);
	font-weight: 400;
	line-height: 1.5;
	color: var(--MutedForeground);
	text-wrap: pretty;
}

/* The same gesture as the areas mega menu and the footer's link rows: the arrow
   rests invisible and nudged left, then fades and slides in on hover. Painted
   through `mask` so it takes currentColor and follows the link's own hover
   colour. It is out in the right padding, which is reserved for it, so nothing
   reflows. The mask lives on :root in the child theme, which is also where that
   arrow was first defined. */
body .elementor .atlas-sitemap-link::after {
	content: "";
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-end: 0.75rem;
	width: 14px;
	height: 14px;
	background-color: var(--NavyDeep);
	-webkit-mask: var(--atlas-arrow-mask) center / 14px 14px no-repeat;
	        mask: var(--atlas-arrow-mask) center / 14px 14px no-repeat;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

body .elementor .atlas-sitemap-link:hover,
body .elementor .atlas-sitemap-link:focus-visible {
	background-color: var(--Muted);
}

body .elementor .atlas-sitemap-link:hover .atlas-sitemap-title,
body .elementor .atlas-sitemap-link:focus-visible .atlas-sitemap-title {
	color: var(--NavyDeep);
}

body .elementor .atlas-sitemap-link:hover::after,
body .elementor .atlas-sitemap-link:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	body .elementor .atlas-sitemap-link::after {
		transition: none;
		transform: none;
	}
}

/* --- Dense group ---------------------------------------------------------- */

/* Areas We Serve is thirteen place names, and a place name describes itself —
   see atlas-sitemap.php. With no second line the rows are half the height, so
   the group runs four-up to keep its block roughly as wide as it is tall. */
body .elementor .atlas-sitemap-group--dense .atlas-sitemap-list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 2rem;
}

@media (max-width: 1279px) {
	body .elementor .atlas-sitemap-group--dense .atlas-sitemap-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	body .elementor .atlas-sitemap-group--dense .atlas-sitemap-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.atlas-sitemap-group--dense .atlas-sitemap-link {
	padding-block: 0.75rem;
}

/* One line instead of two, so the arrow rides up with the row. */
body .elementor .atlas-sitemap-group--dense .atlas-sitemap-link::after {
	inset-block-start: 0.875rem;
}

/* --- Intro ---------------------------------------------------------------- */

/* The source breaks this sentence by hand, but only where the column is wide
   enough for the break to land well. No style control expresses a <br> that
   only exists above a breakpoint. */
.atlas-sitemap-break {
	display: none;
}

@media (min-width: 1280px) {
	.atlas-sitemap-break {
		display: block;
	}
}

/* text-wrap has no atomic style control. */
.atlas-sitemap-balance {
	text-wrap: balance;
}