/**
 * A published alert.
 *
 * Loaded only for `is_singular( LC_Post_Types::CASE )` — the arrangement every
 * designed page here has, gated on the post type rather than on a template name
 * because this is `single.php` and there is no `_wp_page_template` to read.
 *
 * **Its dependency on the component sheet is load-bearing, and more so than on
 * any other page.** Most of an alert is rendered by the *plugin*:
 * `LC_Templates::append_evidence()` returns the banner, the record cards, the
 * part links, the assessment, the checklist and the correction notice, and
 * `lc-components.css` is what styles all of them. Every rule below that re-lays
 * one of those blocks ties with that sheet on specificity — `.lc-facts__list` is
 * (0,1,0) either way — so source order is the whole margin. Declared against
 * `lieferantencheck-theme` this sheet would load *before* the component sheet
 * and the entire evidence half of the page would keep its old layout with
 * nothing saying so.
 *
 * **This sheet changes how the evidence looks and never what it says.** Not one
 * rule here hides a plugin element, reorders one, or replaces its wording with
 * generated content. That is the line `style.css` opens with — "Nothing in this
 * theme may affect what an alert says" — and on this page it is not a
 * principle, it is the reason the theme is allowed near a legally reviewed
 * document at all.
 *
 * **Everything below the hero is paper in both colour schemes**, from
 * `.lc-onpaper` on the root and `.lc-onimage` on the header inside it. Not one
 * declaration here knows about a scheme.
 *
 * @package LieferantenCheck
 */

/* ==========================================================================
   1. The hero
   ========================================================================== */

/*
 * The alert's header, which is `.lc-pagehead` with three classes added — the
 * element and its children are the ones `single.php` has always rendered, so an
 * ordinary single post is untouched by everything in this file.
 *
 * `--lc-alert-gap` and `--lc-alert-split` are declared on `.lc-alerthero` rather
 * than on the `--image` modifier, so the grid rule below can never resolve them
 * to nothing: an unresolved `var()` is invalid at computed-value time and would
 * drop a whole declaration rather than fall back.
 */
.lc-alerthero {
	--lc-alert-gap: 2.5rem;
	--lc-alert-split: calc(4 / 7);

	position: relative;
	padding-block: clamp(2.25rem, 5vw, 3.5rem);
	border-bottom: 0;
	margin-bottom: 0;
	background: var(--lc-ink);
}

/*
 * **Nothing is ever read on top of the photograph**, at any width. Below 62rem
 * the plate is not rendered at all, so the domain, the badge and the copy
 * buttons sit on flat `--lc-ink` and the contrast argument is arithmetic that no
 * photograph can move: white 17.0:1, the soft token 12.8:1, the gold eyebrow
 * 6.6:1.
 */
.lc-alerthero__bg {
	position: absolute;
	inset: 0;
	display: none;
	overflow: hidden;
}

/*
 * `brightness(0.72)`, the same as the register's, because it is the same
 * photograph: `Containerhafen` heads both, an alert and the register it belongs
 * to being the same subject. Two settings for one picture on one site would be
 * two values that have to be kept in step by somebody noticing.
 */
.lc-alerthero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 48%;
	filter: grayscale(1) brightness(0.72) contrast(1.05);
}

.lc-alerthero > .lc-shell {
	position: relative;
}

/*
 * The headline and its badge on one row.
 *
 * `align-items: baseline` and not `center`: the badge is 24px of uppercase
 * beside a 42px monospace domain, and centring hangs it in the middle of the
 * cap height where it reads as floating. The baseline is what puts it on the
 * line the domain sits on.
 *
 * `flex-wrap` because the two together are wider than the column at 320px, and
 * a badge that pushes the domain into a second line is the one thing on this
 * page that must not happen — the domain is why the reader is here.
 */
.lc-alert__headline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.9rem;
}

/*
 * The domain keeps `--lc-t-2xl` from `style.css`. What changes here is only that
 * it now sits on navy, which `.lc-onimage` has already arranged — there is no
 * colour declared in this block at all.
 */
.lc-alerthero .lc-alert__subtitle {
	max-width: 56ch;
}

/*
 * The copy buttons and the registry check on one row, the check at the far end.
 *
 * `margin-left: auto` on the action and **not** `justify-content: space-between`:
 * the copy list ships `hidden` and is revealed by `theme.js` only where
 * `navigator.clipboard` exists, so on an insecure origin or with no script the
 * action is a lone child — and `space-between` puts a lone child at the *start*,
 * which would move the one control in the hero to the left on exactly the
 * browsers that have the fewest.
 */
.lc-alert__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-top: 1.1rem;
}

.lc-alerthero__action {
	margin: 0 0 0 auto;
}

/*
 * The status row loses the rule above it that `.lc-alert__status` carries on a
 * light page: on navy a 1px hairline between the subtitle and the badge is a
 * line drawn across a surface that already changed, and the reference has none.
 */
.lc-alerthero .lc-alert__status {
	border-top: 0;
	padding-top: 0;
}


/*
 * The split, at the same 62rem every other hero on this site uses.
 *
 * The plate's left edge is **derived from the grid rather than checked against
 * it**. As a percentage of the viewport it would be a different distance from
 * the text at every window width — 46px of flat ink at 992 and 843px at 3440 —
 * because the text's right edge is a fraction of a shell that is capped and
 * centred and the viewport is not.
 *
 * The terms are the shell's left rail, its gutter, column one and the join:
 *
 *   (100% - shell) / 2  +  gutter  +  col1  +  gap
 *
 * `100%` is this element's padding box — `.lc-alerthero` sets no inline padding,
 * so that is the viewport. `--lc-alert-split` is the one number the edge and the
 * cap below both read.
 *
 * **This hero has no grid of its own**, which is the one way it differs from the
 * other three: `.lc-pagehead`'s children are a flat stack and rearranging them
 * would mean touching markup that an ordinary post shares. The text is bounded
 * by a `max-width` on the shell's contents instead, computed from the same
 * split — so the reservation and the plate still cannot fall out of step.
 */
@media (min-width: 62rem) {
	.lc-alerthero__bg {
		display: block;
		inset: 0 0 0 calc(
			(100% - min(100%, var(--lc-shell))) / 2
			+ var(--lc-gutter)
			+ (min(100%, var(--lc-shell)) - var(--lc-gutter) * 2 - var(--lc-alert-gap))
				* var(--lc-alert-split)
			+ var(--lc-alert-gap)
		);
	}

	/*
	 * The left edge, dissolved into the ink the text sits on. The stops are
	 * **lengths and not percentages**: a fade sized at a share of the plate grows
	 * with the monitor, so the photograph would start further from the text the
	 * more room there was for it. The job is an edge, and an edge is a fixed
	 * distance.
	 */
	.lc-alerthero__bg::after {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			90deg,
			var(--lc-ink) 0%,
			rgba(17, 29, 42, 0.62) 3rem,
			rgba(17, 29, 42, 0.34) 18rem
		);
		content: "";
	}

	/*
	 * Column one's width, applied as a cap on the header's contents rather than
	 * as a grid track — and read from the same `--lc-alert-split` the plate
	 * places itself from, so the two are one number. `100%` here is the shell's
	 * content box, which is why the gutters are not subtracted a second time.
	 */
	.lc-alerthero > .lc-shell > * {
		max-width: calc((100% - var(--lc-alert-gap)) * var(--lc-alert-split));
	}
}

/* ==========================================================================
   1b. The severity banner, full-bleed
   ========================================================================== */

/*
 * The band the lifted banner sits in.
 *
 * **The `<aside>` inside it is the plugin's, moved and not rewritten** — see
 * `lc_theme_extract_banner()`. What this does is give it a full-width strip to
 * sit in and take away the card treatment `lc-components.css` gives it in the
 * article column, where it was one block among several rather than the first
 * thing about the page.
 *
 * The fill and the ink are the banner's own, still: the component sheet paints
 * `.lc-banner--unverified`, `--caution` and `--strong-evidence` differently and
 * all three are inherited unchanged, so the strip is gold for a report and red
 * for documented fraud without this file naming a colour. That is why there is
 * no `background` here — the band is transparent and the aside inside it paints.
 */
.lc-alertbanner {
	border-bottom: 1px solid var(--lc-rule);
}

/*
 * Inside the band the banner is a strip rather than a card: no radius, no outer
 * border, and **its own fill reaches both page edges**.
 *
 * The tint has to be on the `<aside>` and not on the band around it, because the
 * band cannot know which of the three severities this is —
 * `lc-components.css` paints `--unverified`, `--caution` and `--strong-evidence`
 * differently and the theme is not going to restate that mapping. So the aside
 * is what spans, and the *contents* are held to the shell by padding computed
 * the way `.lc-shell` computes its own margins:
 *
 *   max( gutter, (100% - shell) / 2 + gutter )
 *
 * `100%` is the band's content box, which is the viewport — every child of the
 * template root is full width by construction, which is the whole reason
 * `style.css` keeps horizontal space in `.lc-shell` and never on the root.
 *
 * That also means the inner `.lc-shell` this block first had is *gone*: a shell
 * inside a full-bleed strip caps the text but leaves the fill stopping at the
 * gutter, which is what shipped and is visible as a white margin either side of
 * a strip that is supposed to be edge to edge.
 *
 * The severity's own left rule stays. At the page edge it reads as a full-height
 * accent stripe, which is the one thing on the strip that says which of the
 * three this is without reading a word.
 */
.lc-alertbanner .lc-banner {
	max-width: none;
	margin: 0;
	border-radius: 0;
	padding-block: 0.9rem;
	padding-inline: max(
		var(--lc-gutter),
		calc((100% - min(100%, var(--lc-shell))) / 2 + var(--lc-gutter))
	);
}

/*
 * The label and the blurb on one line where there is room, which is what the
 * reference draws and what keeps a full-width strip from being two lines of
 * short text across 1400px. Both are the plugin's `<p>`s; this only stops them
 * stacking.
 */
@media (min-width: 52rem) {
	.lc-alertbanner .lc-banner {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.35rem 0.85rem;
	}

	.lc-alertbanner .lc-banner__label,
	.lc-alertbanner .lc-banner__blurb {
		margin: 0;
	}
}

/* ==========================================================================
   2. The rail
   ========================================================================== */

/*
 * The rail's grid placement and its stickiness are in `style.css` beside
 * `.lc-alert__layout`, because they are the alert *layout* and that is where the
 * layout lives. What is here is the one thing that is not: the gap between the
 * three cards it holds.
 */
/*
 * The space the header used to provide.
 *
 * `.lc-pagehead` carries `margin-bottom: clamp(2rem, 4vw, 3rem)` and a bottom
 * hairline, and the hero drops both — the rule because navy meeting paper is
 * 17:1 and a line across that step only reads as a mistake, the margin because
 * a margin *below* a full-bleed band is a strip of page colour under it. Put
 * back as padding on the layout, where it is inside the paper rather than
 * between the two surfaces. Without it the banner butts straight onto the navy.
 */
.lc-alert-page .lc-alert__layout {
	padding-top: clamp(2rem, 4vw, 3rem);
}

.lc-alert__rail {
	display: grid;
	gap: 1rem;
	min-width: 0;
}

/*
 * The status card's rows, as a two-column definition list.
 *
 * `dt` and `dd` and not a table: these are five name/value pairs about one
 * record, which is the definition list's whole job, and a table would promise
 * rows and columns a screen reader then has to navigate.
 */
.lc-casestatus {
	display: grid;
	gap: 0.55rem 1rem;
	margin: 0;
	grid-template-columns: minmax(0, 1fr) auto;
	font-size: var(--lc-t-ui);
}

.lc-casestatus dt {
	color: var(--lc-fg-soft);
	grid-column: 1;
}

/*
 * `text-align: end` and not `float`, and the value keeps the register's own ink
 * so a status reads as a fact rather than as a second badge. The badge is in the
 * hero and says the same thing once.
 */
.lc-casestatus dd {
	margin: 0;
	color: var(--lc-fg);
	font-weight: 600;
	grid-column: 2;
	text-align: end;
}

/*
 * The contents list inside the rail loses the box `style.css` gives it when it
 * stands alone: three bordered cards in a column, one of them a bare list, reads
 * as two cards and a mistake. It keeps its own border on an ordinary post, where
 * it is the only thing in that column.
 */
.lc-alert__rail .lc-toc {
	padding: 0;
	border: 0;
	background: none;
}

/* ==========================================================================
   3. The evidence, which is the plugin's
   ========================================================================== */

/*
 * Everything in this section re-lays a block `LC_Templates::append_evidence()`
 * printed. **No rule here hides one, reorders one, or replaces its wording.**
 *
 * Each ties on specificity with `lc-components.css` and wins on source order
 * alone, which is why this sheet's enqueue names that one as its dependency.
 */

/*
 * The record cards go three across, which is what the design reference draws and
 * what the content supports: a card is a label, a subject, a value and a source
 * line, none of them a sentence.
 *
 * `auto-fit` rather than a fixed count — an alert may hold one record or twelve,
 * and `repeat(3, …)` leaves a single record stranded at a third of the column.
 *
 * **Two across at the measure, and the design reference's three is a measured
 * refusal rather than an oversight.** `auto-fit` fits
 * `floor((W + gap) / (min + gap))` tracks; a 12rem floor gives
 * `floor(716 / 204) = 3` at the 704px measure, which was tried and reverted.
 * Three cards leave 156px of content after the card's own 1.1rem padding either
 * side, and the longest value the register actually holds —
 * `ns1.inmotionhosting.com,` — is 204px at `.lc-fact__value`'s inherited 17px.
 * It does not fit at 15px either (182px), nor at 13px (158px), so the choice is
 * three columns with a hostname broken after "…hosting.c" or two columns that
 * hold it whole. The reference gets three from a wider column and smaller type;
 * this page's column is `--lc-measure` because the prose in it is prose.
 *
 * 15rem gives `floor(716 / 252) = 2` at the measure, three if that column ever
 * grows, and one below about 400px.
 */
.lc-facts__list {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/*
 * A record card, on paper. `--lc-bg` with a `--lc-rule` edge is the pairing
 * every card on this site uses; the left rule the component sheet gives it by
 * severity (`--high`, `--medium`, `--context`) is untouched and still carries
 * the one thing colour says here.
 */
.lc-fact {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1rem 1.1rem;
	border-radius: var(--lc-radius);
	background: var(--lc-bg);
}

/*
 * A registrar name or a name server is one unbroken token, and at a third of the
 * column there is not room for it. `anywhere` rather than `break-word` so it
 * breaks *and* is allowed to shrink the track's intrinsic minimum — without the
 * second half the longest hostname sets the width of the whole grid and the
 * three columns become two.
 */
.lc-fact__value,
.lc-fact__subject {
	overflow-wrap: anywhere;
}

/* The source line sits at the foot of the card whatever the value above it does,
   so a column of cards has its sources on one line. */
.lc-fact__source {
	margin-top: auto;
	padding-top: 0.7rem;
}

/*
 * The part numbers, as a row of codes rather than a stacked list.
 *
 * The plugin renders `.lc-parts__item` as a list item holding a link; this only
 * changes how the list flows.
 */
.lc-parts__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/*
 * The checklist, two across on a wide column.
 *
 * `LC_Render::red_flags()` prints six titles with a paragraph each and this does
 * not shorten them — the wording is the plugin's and stays whole. Two columns is
 * what stops six full paragraphs being the tallest thing on the page.
 */
@media (min-width: 46rem) {
	.lc-flags__list {
		display: grid;
		gap: 0.75rem 1.25rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * The correction invitation, as the band the reference draws.
 *
 * It is the plugin's `.lc-correction` section — a heading, a paragraph and a
 * link — and this only puts a box round it and makes the link look like the
 * control it is. The wording is `LC_Render::correction_notice()`'s and untouched;
 * so is the `mailto:` it builds, which is the whole point of the block.
 *
 * `--lc-band` rather than paper, so the last thing on the page reads as an
 * invitation rather than as one more evidence section.
 */
.lc-correction {
	display: grid;
	gap: 0.6rem 1.5rem;
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--lc-rule-firm);
	border-radius: var(--lc-radius);
	background: var(--lc-band);
}

.lc-correction__heading {
	margin: 0;
}

.lc-correction p {
	margin: 0;
}

/*
 * The link is the page's second control and it is styled as one, at the 44px
 * minimum target its padding gives it. `--lc-accent-text` for the edge and the
 * ink: 5.72:1 on the band as a word, and over the 3:1 WCAG 1.4.11 asks of the
 * boundary that identifies a control.
 */
.lc-correction__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.7rem 1.25rem;
	border: 1px solid var(--lc-accent-text);
	border-radius: var(--lc-radius);
	color: var(--lc-fg);
	font-size: var(--lc-t-ui);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.lc-correction__link:hover,
.lc-correction__link:focus-visible {
	background: var(--lc-accent-solid);
	color: var(--lc-ink);
}

/*
 * Text left, control right, once there is room for both.
 *
 * `:has()` and not `p:last-of-type`, because which paragraph holds the link is
 * the plugin's decision and `correction_notice()` is free to add a second
 * sentence. Where `:has()` is unsupported the whole rule drops and the band
 * stacks — narrow, correct, and the same graceful fallback section 11b of
 * `lc-components.css` documents for the reading grid.
 */
@media (min-width: 46rem) {
	/*
	 * **The track declaration carries `:has()` too**, and that is the whole
	 * fallback rather than a flourish.
	 *
	 * Written as a bare `.lc-correction { grid-template-columns: … }` it applies
	 * in every browser, including the ones where the two placement rules below
	 * are invalid and dropped — and the three children then auto-place into that
	 * grid: heading top-left, sentence top-right, button bottom-left. A layout
	 * nobody designed, in exactly the browsers that cannot be told otherwise.
	 * With the test on the container as well, all three rules stand or fall
	 * together and the band stacks. That is the same construction
	 * `.lc-single:has(.lc-results) .lc-shell` uses and the same reason.
	 */
	.lc-correction:has(.lc-correction__link) {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
	}

	.lc-correction > :not(:has(.lc-correction__link)) {
		grid-column: 1;
	}

	/*
	 * `grid-row: 1` and **not** `1 / -1`, which is what this said first and what
	 * worked by accident.
	 *
	 * `-1` names the last line of the *explicit* grid, and this grid declares
	 * columns only — its rows are implicit, so `1 / -1` resolved to `1 / 1` and
	 * pinned the control to the first row. That is where it belongs and where
	 * the reference draws it, level with the heading; it just was not what the
	 * declaration said. Written out, it also survives the plugin adding a second
	 * sentence, which `1 / -1` would have appeared to handle and would not.
	 *
	 * `align-items: start` with it, so the button sits on the heading's line
	 * rather than being centred in a row its own height defines.
	 */
	.lc-correction > :has(.lc-correction__link) {
		grid-column: 2;
		grid-row: 1;
	}
}

/* ==========================================================================
   4. Print
   ========================================================================== */

/*
 * Here rather than in `style.css` section 18, and that is specificity: this
 * sheet loads afterwards, so a `background` declared here ties with the print
 * reset there on one class and wins on source order.
 *
 * An alert is the one page on this site people genuinely print — it is a
 * document somebody takes to their finance department — so the rules are about
 * what a printed copy has to carry rather than about tidying.
 */
@media print {
	.lc-alerthero {
		padding-block: 0.5rem;
		background: none !important;
	}

	.lc-alerthero__bg {
		display: none;
	}

	/* The cap is a screen arrangement; on paper the column is the paper. */
	.lc-alerthero > .lc-shell > * {
		max-width: none;
	}

	/*
	 * The rail's two cards go and the contents list goes with them: a status
	 * summary and a submission button are for somebody who can click, and the
	 * evidence they summarise is on the sheet already. The layout collapses to
	 * one column.
	 */
	.lc-alert__rail,
	.lc-alerthero__action {
		display: none;
	}

	.lc-alert__layout {
		display: block;
	}

	/* One record per row on paper, and never split across a page break. */
	.lc-facts__list,
	.lc-flags__list {
		display: block;
	}

	.lc-fact,
	.lc-flag {
		border: 1px solid rgba(0, 0, 0, 0.3);
		margin-bottom: 0.4rem;
		break-inside: avoid;
	}
}