/*
 * Dougherty HD-172 — client overrides.
 *
 * Before adding a rule here, check three things in order:
 *
 *   1. Can a theme.json token express it? Change the token instead.
 *   2. Would the next campaign want it too? Then it belongs in the parent
 *      design system, not here.
 *   3. Only if it is genuinely one-off for this race does it go here.
 *
 * This file is longer than pete-gonzales' because an opposition microsite
 * is a shape the parent has never had to draw: a numbered, cited fact list
 * and a sources apparatus. Both are written against parent tokens only —
 * no literal colors — so if a SECOND oppo site ever needs them, `.dgh-facts`
 * and `.dgh-sources` should graduate to the parent design system as
 * `.dsg-facts--numbered` and `.dsg-sources` rather than being copied.
 *
 * Everything below is prefixed `dgh-`.
 */

/* ----------------------------------------------------------------- shell */

/* This microsite overrides templates/page-campaign.html to drop the parent's
   header and footer parts — see README. The parent sizes .dsg-hero as
   `calc(100svh - var(--dsg-header-h))` on the assumption a header is eating
   that space. With no header, leaving 68px subtracted would stop the hero
   short of the full viewport the design asks for. */
:root { --dsg-header-h: 0px; }

/* ------------------------------------------------------------------ hero */

/* The parent's .dsg-hero paints a flat ground; this design wants a vertical
   gradient with a dot screen over it, so both are restated here. The dots
   are decorative and aria-hidden by construction (a background-image on a
   pseudo-element), so they are exempt from the 3:1 non-text rule.

   Only the background is overridden. The parent's height is
   `calc(100svh - var(--dsg-header-h))`, which accounts for the header this
   theme inherits from dover/parts/header.html — restating a flat 100vh here
   would push the hero taller than the viewport by exactly the header. */
.dgh-hero.dsg-hero {
	position: relative;
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--ink) 0%,
		var(--wp--preset--color--surface) 100%
	);
}

.dgh-hero.dsg-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		color-mix(in srgb, var(--wp--preset--color--pale) 45%, transparent) 1px,
		transparent 1px
	);
	background-size: 3px 3px;
	opacity: 0.15;
	pointer-events: none;
	z-index: 0;
}

/* Keep real content above the dot screen. */
.dgh-hero.dsg-hero > * { position: relative; z-index: 1; }

/* The kicker above the headline is a solid block, not the parent's
   rule-and-caps eyebrow — it reads as a stamp, which is the point. */
.dgh-badge {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 16px;
	margin: 0 0 28px;
}

.dgh-hero__lede {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--wp--preset--color--card-text);
	max-width: 520px;
	margin: 0 0 40px;
}

/* The hero's left column holds a single block, so the parent's
   `justify-content: space-between` (right for its three-child hero) pins
   everything to the top and leaves a void underneath. */
.dgh-hero .dsg-hero__content { justify-content: center; }

/* The parent's media column is built to be filled edge-to-edge by a photo.
   This design instead centres a bordered, fixed-ratio photo on the hero
   gradient, so the column becomes a centring context: its ink ground and
   its 6px accent seam are both suppressed, because here the accent lives
   on the photo's own border instead of the column edge. */
.dgh-hero .dsg-hero__media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	padding: clamp(1.5rem, 4vw, 4rem);
}

.dgh-hero .dsg-hero__media::before { content: none; }

/* Photo frame + the offset district label that overlaps its bottom-left.
   The label is a CHILD of the frame, not a sibling — anchored to the media
   column it would sit at the bottom of the column rather than on the photo. */
.dgh-hero__frame {
	position: relative;
	width: 100%;
	border: 3px solid color-mix(in srgb, var(--wp--preset--color--pale) 40%, transparent);
}

.dgh-hero__frame figure { margin: 0; }

.dgh-hero__frame img {
	display: block;
	width: 100%;
	aspect-ratio: 448 / 393;
	object-fit: cover;
}

.dgh-hero__tag {
	position: absolute;
	bottom: -14px;
	left: -14px;
	background: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--secondary-light);
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 10px 18px;
	margin: 0;
}

/* ----------------------------------------------------------- fact lists */

/* Numbered, cited claims. The parent's .dsg-facts is heading+paragraph
   rows; this variant adds the ordinal gutter and the citation marker that
   opposition research needs. Top border on each row, not bottom, so the
   list opens with a rule and doesn't close with a dangling one — same
   reasoning as the parent's. */
.dgh-facts { display: flex; flex-direction: column; }

.dgh-facts__item {
	display: flex;
	gap: 18px;
	padding: clamp(1.1rem, 2.2vw, 1.4rem) 0;
	border-top: 1px solid var(--dsg-rule);
}

.dgh-facts__num {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--wp--preset--color--secondary);
	margin: 0;
}

.dgh-facts__text {
	margin: 0;
	line-height: 1.6;
	color: var(--wp--preset--color--sky);
}

/* The citation marker carries meaning, so it clears 4.5:1 rather than the
   3:1 a decorative mark would need. */
.dgh-facts__text sup {
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
	white-space: nowrap;
}

/* --------------------------------------------------------------- sources */

.dgh-sources {
	margin: 0 0 48px;
	padding-left: 20px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 2;
}

.dgh-colophon {
	border-top: 1px solid var(--dsg-rule);
	padding-top: 28px;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
}

/* -------------------------------------------------------------- mobile */

/* 900px because that is where the parent stacks .dsg-hero. Picking a
   different number here would leave a band where the hero has stacked but
   the district tag is still positioned as an overlap — the same class of
   bug as the header's 600px note in the parent README. */
@media (max-width: 900px) {
	.dgh-hero__tag { position: static; display: inline-block; margin-top: 14px; }
	.dgh-facts__item { gap: 12px; }
}