/* Landmark site-level overrides. */

/* Every Landmark section paints its own dark background, but make.css paints <body> with
   --main-bg (white in this palette). Where sections meet on a fractional pixel, that white
   shows through as a hairline seam. Paint the page itself the site's dark background so
   any seam is invisible. */
body {
	background-color: var(--dk-bg);
}

/* -- Gutter (visible past the 1920px page cap) -------------------------------------------
   Castle Windows pattern: past 1920px the page sits centered and the html element shows
   through on both sides. Those gutters get a dark field with the LD mark tiled over it,
   replacing make.css's Splash Squad treatment (#999 field, white tile layer, gray glow).

   watermark-light-15.webp is a single 800x800 tile: the light LD circle at ~15% opacity,
   centered with padding, so the repeat leaves space between marks without a gap setting.
   Drawn at 160px: the gutter is (100vw - 1920px) / 2, i.e. 320px on a 2560px screen, so two
   columns fit exactly. Centering the pattern keeps the left and right gutters symmetric. */

html {
	/* Deliberately between the two palette darks (--dk-bg #000, --dk-alt-bg #212121) so a
	   section of either color still reads as the page edge against the gutter. */
	--gtr-bg: #121212; /* { friendly: 'Gutter Background', group: 'Colors' } */
	--gtr-mrk-o: 0.2; /* { type: 'range', min: 0, max: 1, step: .05, friendly: 'Gutter Watermark Opacity', group: 'Other' } */
	background-color: var(--gtr-bg);
}

@media (min-width: 1920px) {
	html::before {
		background-color: transparent;
		background-image: url(/media/brand/watermark-light-15.webp);
		background-size: 160px 160px;
		background-position: center top;
		background-repeat: repeat;
		filter: none;
		opacity: var(--gtr-mrk-o);
	}

	/* Soft black vignette on the page edge (Castle), instead of make.css's gray glow */
	html body {
		box-shadow: 0 0 40px 8px hsl(from var(--black, #000) h s l / 0.55);
	}
}

/* MainstageV9 title measure (desktop): keep the H1 over the dark sky so it wraps to ~3 lines
   ("Luxury Landscape / Lighting Specialists / in Dallas, TX") instead of running onto the lit house.
   Lives here because the staging server stopped refreshing mainstage-v9.css (2026-10-19). */
@media screen and (width >= 1280px) {
	.mstg.v9 .txt-bx > .fnt_t-big {
		/* em, not %: the font is fluid, so a % cap wrapped to 5 lines at 1366. 9.75em sits between
		   "Lighting Specialists" (9.2em) and "Lighting Specialists in" (10.35em). */
		max-width: min(9.75em, 100%);
	}
}

/* TEMPORARY - /dallas/service-area-map-test/ only (the page-level stylesheet is not linked on
   staging). Remove with that test page. */
.sam {
	.sam-img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 640 / 340;
		object-fit: cover;
	}

	&.sam-dbg {
		font-size: 0.875rem;

		table {
			width: 100%;
			border-collapse: collapse;
		}

		th,
		td {
			padding: 0.25rem 0.5rem;
			border-bottom: 1px solid hsl(from currentColor h s l / 0.2);
			text-align: start;
		}
	}
}