/*
 * wakefly/alert-band — the one scoped stylesheet this block needs.
 *
 * Loaded through block.json's `style`/`editorStyle`, so it is enqueued only on a page that
 * renders the block and it is unaffected by the SCRIPT_DEBUG style.css/style.min.css split
 * in functions.php.
 *
 * EVERY NUMBER BELOW IS A MEASUREMENT OR ARITHMETIC OVER TWO OF THEM, and where a value is
 * neither it says so in its own comment — those are the lines a verdict should look at
 * first. Colour and type values are theme.json presets rather than declarations, per
 * CLAUDE.md's build preference order: a token before a declaration even inside a custom
 * block.
 *
 * THE UNIT'S WHOLE RESPONSIVE STORY IS ITS HEIGHT, and there is no media query below
 * because of it. Nothing about this band changes categorically between 1440, 1024, 768 and
 * 390 — no descendant appears, and no display, flex-direction, position or alignment
 * differs. What changes is that the one line of copy wraps, taking the source's band from
 * 106 / 106 / 130 / 154 tall. Every rule here is written so that height is an OUTCOME of
 * the text rather than a number: there is no height, no min-height and no line count
 * anywhere in this file.
 */

/*
 * BORDER-BOX, SCOPED TO THIS BLOCK. Neither WordPress core nor this theme sets a global
 * box-sizing reset, and core's own `* { box-sizing: border-box }` ships inside the block
 * library stylesheet, which is only enqueued for blocks core knows are on the page — this
 * block's markup is written by hand, so none of it applies. Measured on the hero before
 * this rule was added there: a container came out 1432 wide at x=4 instead of 1320 at
 * x=60. Every width below is a border-box width.
 */
.wp-block-wakefly-alert-band,
.wp-block-wakefly-alert-band *,
.wp-block-wakefly-alert-band *::before,
.wp-block-wakefly-alert-band *::after {
	box-sizing: border-box;
}

/*
 * THE SPACER, AND THE PINNING IT PAYS FOR.
 *
 * MEASURED ON THE SOURCE, 2026-09-07, by a pass that drove both origins: its band's
 * positioning wrapper computes `position: fixed`, `bottom: 0px`, `z-index: 1000`, and it holds
 * the same viewportY at scrollTop 0 and at the page bottom. This build had `position: static`,
 * `bottom: auto`, `z-index: auto`, and the band entered the viewport only once a visitor had
 * scrolled to the end of the document — so the cookie notice was never seen on arrival. The
 * unit's own contract does not carry `position` for this element and still does not; the value
 * comes from that measurement, and the gap is reported rather than assumed away.
 *
 * WHY THERE IS A SPACER AT ALL. A fixed band is out of normal flow, so it covers whatever
 * sits under it — here, the footer's copyright bar, permanently. `behaviour` names the spacer
 * as one of the three parts a WordPress rebuild needs, and the source's own alert.ts maintains
 * one whose height tracks the band's offsetHeight. This is that element.
 *
 * ITS HEIGHT IS NOT SET HERE, and deliberately: the source's band is 106 / 106 / 130 / 154
 * tall at the four measured viewports because its one line of copy wraps, so any number written
 * here would be wrong at three of them. view.js measures the real box and writes it into the context; this
 * rule only makes the element exist with no contribution of its own until it does.
 */
.wp-block-wakefly-alert-band__spacer {
	height: 0;
}

.wp-block-wakefly-alert-band {
	/*
	 * POSITION: RELATIVE, MEASURED ON THE SOURCE'S OWN `.alert` DIRECTLY — not `static`
	 * (the initial value) and not `fixed` (that belongs to the wrapper one level up; see
	 * `__pin` below). ai/units.yml's alert-band row, cause 1, names this exact split:
	 * `.alert-items` (fixed) contains `.alert` (relative). Declared unconditionally, in
	 * preview too, since it changes no rendering there — `relative` with no offsets paints
	 * identically to `static`.
	 *
	 * THE BAND'S OWN PADDING AND BORDER, BOTH READ OFF THE SOURCE'S .alert DIRECTLY rather
	 * than derived from the difference between its outer box and its inner one. Measured on
	 * the source: padding 16px on all four sides, `border: 1px solid transparent`,
	 * border-radius 6px. The border is invisible and still 2px of box, which is why it is
	 * reproduced rather than folded into the padding.
	 *
	 * THE HEIGHT LADDER IS AN OUTCOME OF THESE, NOT A NUMBER. 1 + 16 + inner + 16 + 1, where
	 * `inner` is the copy column plus its own 16px block margins (below): 106 at one line of
	 * copy, +24 per further line. That is the measured ladder, and nothing here states a
	 * height, a min-height or a line count.
	 *
	 * INLINE: 1 + 16 = 17 to the container's edge, and the container's own 12px gutter takes
	 * it to 29 — which is the measured inner offset at 390, where the band is the full
	 * viewport and .alert-inner measures 332 of it.
	 *
	 * display/align-items: measured on the source's .alert, which is a flex container
	 * centring its one child.
	 *
	 * text-align IS NOT DECLARED HERE. The source's .alert computes `start` and it is
	 * .alert-inner one level down that computes `center`, so the declaration sits on __row
	 * below, on the element it was measured on.
	 */
	position: relative;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid transparent;
	border-radius: 6px;
	display: flex;
	align-items: center;

	/*
	 * THE BAND'S OWN INSET, NAMED ONCE so `__container` below can subtract it rather than
	 * carrying a 17 nobody could trace. It is this rule's own border plus its own padding,
	 * the 1px and the 16px measured on the source's .alert directly — not a third number.
	 */
	--wf-alert-band-inset: calc(1px + var(--wp--preset--spacing--40));
}

/*
 * THE PIN WRAPPER. This element, `.wp-block-wakefly-alert-band__pin`, reproduces the source's
 * `.alert-items` — a positioning wrapper around the painted band and nothing else, carrying no
 * padding, no background, no border. `is-pinned` is written by render.php on every
 * front-of-site render and NEVER in the editor's preview — a wrapper fixed to the editor
 * canvas floats over the editing surface and cannot be scrolled away from, and the flag ACF
 * already hands the template is a truer test than any guess about what the iframed editor's
 * root element looks like.
 *
 * `inset-inline: 0` rather than a width: the source's band measures the full viewport at every
 * captured viewport (1440, 1024, 768, 390) and a fixed box pinned to both edges is that,
 * without restating a number that is really "the viewport". The band inside it (`position:
 * relative`, above) needs no width of its own: it is a block-level div and fills this
 * wrapper's 100%, which is why moving the fixed positioning here changes no box on either
 * element — only what `.wp-block-wakefly-alert-band` itself computes for `position`.
 */
.wp-block-wakefly-alert-band__pin.is-pinned {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 1000;
}

/*
 * THE DISMISSAL'S DISPLAY COUNTERPART, and it exists because the `display: flex` directly
 * above silently unmade the behaviour once already.
 *
 * render.php binds `data-wp-bind--hidden="context.isDismissed"`, so a dismissal sets the
 * `hidden` content attribute and nothing else. `hidden` has no strength of its own: it is
 * expressed only through the user-agent stylesheet's `[hidden] { display: none }`, which
 * every author rule outranks. The flex rule above therefore left the band hidden from
 * assistive technology and fully painted for everyone else — measured after a dismissal as
 * `hidden=true, display=flex, checkVisibility()=true, height=106`.
 *
 * The attribute selector is on the element the display was set on, at the same specificity
 * plus one, so it wins by order and needs no `!important`. Any future `display` added to
 * this block's root has to be paired with a rule like this one or the dismissal dies again.
 */
.wp-block-wakefly-alert-band[hidden] {
	display: none;
}

/*
 * THE CONTAINER, REWRITTEN 2026-09-09 SO THE THEME'S OWN LADDER REACHES IT. It said
 * `max-width: 1320px` — one fixed width — and the comment that stood here recorded the
 * resulting 1024/768 gap as a knowing site-wide deviation. THAT IS NO LONGER TRUE: the
 * theme's root padding is now stepped 44 / 44 / 36 / 12 (theme.json styles.css), and its
 * constrained containers measure 1296@72 / 936@44 / 696@36 / 366@12 — the source's own
 * figures. Re-measured on the source 2026-09-09 at the four captured viewports
 * (tooling/extract/probe.js against https://xperience-starter.wfdev.net/): .alert-inner is
 * 1296x72@72 / 936x72@44 / 696x96@36 / 332x120@29. This build was exact at 1440 and 390 and
 * 30px and 14px wide at 1024 and 768, which also held the band 24px short at 768 because a
 * 647px copy column does not wrap where a 633px one does.
 *
 * WHY THE ELEMENT IS NOT SIMPLY DELETED, which was the cheaper hypothesis and is wrong.
 * `__pin` is `position: fixed`, so nothing an ancestor does to layout reaches inside it: no
 * theme container applies here at all, and a band with no container of its own measures its
 * row at the full viewport less this band's inset (1406 at 1440, measured). The source also
 * really has this element — div.container between .alert and .alert-inner — so removing it
 * would trade a measured width difference for a structural one.
 *
 * WHAT IT COMPUTES, and every term is a token or a measurement:
 *
 *   row width = min( contentSize , viewport − rootPaddingLeft − rootPaddingRight )
 *
 * which is exactly what the theme's own constrained containers compute, and the container's
 * border box is that plus the source's 12px gutter each side. `viewport` is written as
 * `100% + 2 × this band's own inset` because `__pin` spans the viewport and this element's
 * containing block is the band's content box, which is the viewport less that inset — so
 * the two are the same number and this one needs no 100vw and no scrollbar caveat.
 *
 * THE 390 CASE IS WHY THE `width: 100%` CAP STILL MATTERS. There the theme's own container
 * is 366@12 but the source's alert row is 332@29: the band's 17px inset is inside the 12px
 * root padding, so the container runs out of parent before it runs out of allowance, and
 * `width: 100%` is what stops it. Measured 332@29 on both origins after this change.
 */
.wp-block-wakefly-alert-band__container {
	/* The source's Bootstrap gutter, measured: (1320 − 1296) ÷ 2 at 1440, and 12px at all four. */
	--wf-alert-band-gutter: 12px;

	width: 100%;
	max-width: calc(
		min(
			var(--wp--style--global--content-size),
			100% + 2 * var(--wf-alert-band-inset)
				- var(--wp--style--root--padding-left)
				- var(--wp--style--root--padding-right)
		) + 2 * var(--wf-alert-band-gutter)
	);
	margin-inline: auto;
	padding-inline: var(--wf-alert-band-gutter);
}

/*
 * The structure's inner core/group: a horizontal flex, vertically centred.
 *
 * `justify-content` IS DELIBERATELY ABSENT, AND ITS ABSENCE IS THE FIX. This rule said
 * `space-between` and the copy column was therefore shrink-to-fit: measured 654px inside a
 * 1296px row at 1440, against the source's 1231px. The source's row computes
 * `justify-content: normal` — the initial value — with the copy column FILLING the space
 * the dismiss control leaves. So the difference was never an alignment: a previous package
 * set `text-align: center` on the band and the copy stayed left of centre, because centring
 * text inside a 654px box that starts at the row's left edge centres it in the wrong box.
 * `flex: 1` on the copy column below is the other half; with the column filling, whatever
 * `justify-content` would have done there is no free space left to do it with.
 *
 * `flex-wrap` is left at its default `nowrap` on purpose: the projection diffed all four
 * viewports and found no wrap, so the copy column narrows and the text wraps inside it,
 * which is the behaviour the height ladder records.
 *
 * NO `gap` IS SET, and none is needed. The separation between the copy and the dismiss
 * control is a margin on the control itself in the source — measured 16px on the button —
 * and it is reproduced there rather than as a gap here.
 *
 * `align-items` IS DELIBERATELY ABSENT TOO. The source's .alert-inner computes the initial
 * `normal`, so its children stretch: .alert-action measures the row's full 72px at 1440 with
 * the button centred inside it, and .alert-content measures 40 because its own 16px block
 * margins (below) take it off the 72. Setting `center` here made the action column 38 tall
 * — the button's own height — which lands the button in the same place and reports a
 * different box for its parent.
 *
 * text-align: centre. Measured on this element: the source's .alert computes `start` and
 * .alert-inner computes `center`, so the declaration belongs here and is inherited by the
 * copy rather than restated on it.
 */
.wp-block-wakefly-alert-band__row {
	display: flex;
	flex-direction: row;
	text-align: center;
}

/* -------------------------------------------------------------------------- the copy */

/*
 * THE COPY COLUMN FILLS. `flex: 1` is `1 1 0%`, so the column's size comes from the space
 * left over rather than from the length of the sentence in it — which is what makes the box
 * stable when an editor changes the copy, and what the row's own measurement above requires.
 * At 390 nothing moves: the column and the 47px control already added up to the full 332px
 * row, so this changes the desktop reading only.
 */
.wp-block-wakefly-alert-band__content {
	flex: 1;

	/*
	 * 16px ABOVE AND BELOW THE COPY COLUMN, measured on the source's own .alert-content
	 * (margin-top 16px, margin-bottom 16px, box 1233x40 inside a 72-tall .alert-inner at
	 * 1440). It is the source's second layer of vertical spacing and it is what makes the
	 * band's 16px padding above correct rather than needing a padding of 33px to stand in
	 * for both.
	 */
	margin-block: var(--wp--preset--spacing--40);
}

.wp-block-wakefly-alert-band__content > :first-child {
	margin-block-start: 0;
}

/*
 * 16px BELOW THE PARAGRAPH, and it is load-bearing rather than decorative: it is the source
 * paragraph's own measured bottom margin (p: margin-top 0, margin-bottom 16px inside a 40-tall
 * .alert-content), and it is the innermost of the three 16px layers the band's height is made
 * of — root padding, __content's block margins, and this. Removing it makes the band 16px
 * short at every viewport.
 */
.wp-block-wakefly-alert-band__content > * {
	margin-block-end: var(--wp--preset--spacing--40);
}

/*
 * The copy's own type is the root's: 1rem at line-height 1.5, which is the measured 16px
 * over a 24px line box. Nothing is restated here.
 */

.wp-block-wakefly-alert-band__content a {
	/* Measured: 'Learn More' is an anchor inside the band and takes the band's own text
	   colour. theme.json's elements.link is already `currentColor`; only the underline,
	   which global styles do not set, is stated. */
	text-decoration: underline;
}

/* ------------------------------------------------------------------- the dismiss control */

/*
 * `justify-content` IS ABSENT AND ITS ABSENCE IS MEASURED: the source's .alert-action
 * computes the initial `normal`. It is also inert either way — this column is a flex item
 * with the default `0 1 auto` beside a copy column that fills, so it is shrink-to-fit and
 * has no free space to distribute.
 */
.wp-block-wakefly-alert-band__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	/* NOT MEASURED — no instance in scope renders two controls (`both`). One spacing step. */
	gap: var(--wp--preset--spacing--30);
}

/*
 * THE DISMISS BUTTON IS NOT THIS SITE'S STANDARD BUTTON, and that is measured rather than
 * assumed. theme.json's elements.button is 700 weight on 10px/20px padding with 1.5px
 * letter-spacing; this control measures 16px/400 in a box 49 wide, which is 12px of inline
 * padding around 'OK' and no letter-spacing. So it does not take `wp-element-button`, and
 * the four properties that would have had to be overridden are simply not inherited.
 *
 * padding-block 6px: the 36px this makes the control is what leaves the copy column
 * governing the band's height at every measured viewport, which is what the height ladder
 * requires.
 */
.wp-block-wakefly-alert-band__dismiss,
.wp-block-wakefly-alert-band__close {
	border: 0;
	border-radius: 0;
	padding-block: 6px;
	padding-inline: 12px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.5;
	white-space: nowrap;
	cursor: pointer;
}

/*
 * THE 1px BLACK BORDER IS MEASURED, and it also closes an arithmetic gap this file wrote
 * down and could not explain: the comment above derives 12px of inline padding from a 49px
 * box, and 12 + 'OK' + 12 came out 45. Two border pixels are 2 of the 4 that were missing.
 *
 * It is `black` rather than `currentColor` because the button's measured text colour and
 * its measured border colour are both rgb(0,0,0) on the one instance in scope, and reading
 * one as derived from the other would be a guess where a measurement exists.
 *
 * ON __dismiss ONLY. Nothing in scope renders the `close` or `both` variants, so the ×
 * control's border is as unmeasured as the rest of it and stays at the 0 above rather than
 * inheriting a number measured somewhere else.
 */
.wp-block-wakefly-alert-band__dismiss {
	border: 1px solid var(--wp--preset--color--black);

	/*
	 * 16px OF SEPARATION FROM THE COPY, AND IT IS MEASURED ON THE SOURCE'S OWN BUTTON —
	 * margin-left 16px on button.btn inside .alert-buttons, which is why that wrapper
	 * measures 63 wide around a 47-wide control and the copy column measures 1233 rather
	 * than 1249 inside a 1296 row at 1440.
	 *
	 * ON THE BUTTON RATHER THAN ON __actions, because that is the element the source carries
	 * it on and because it is what makes the action column report the source's width instead
	 * of the button's. It is inline-start only: the source has no margin on the other three
	 * sides.
	 *
	 * ON __dismiss ONLY. Nothing in scope renders `close` or `both`, so the × control's
	 * spacing is as unmeasured as the rest of it; the `gap` on __actions is what separates
	 * two controls if an instance ever renders them.
	 */
	margin-inline-start: var(--wp--preset--spacing--40);

	/*
	 * Measured on the source's button: display flex, align-items center, justify-content the
	 * initial `normal`. Ours reaches the same 47x38 box either way — the control is
	 * shrink-to-fit, so there is no free space for a justification to act on — so this
	 * states the source's mechanism rather than changing the rendering.
	 */
	display: flex;
	align-items: center;
}

/*
 * DISMISS BUTTON COLOURS. `secondary` is the measured one: rgb(240,100,0) behind
 * rgb(0,0,0) text. THE BLACK TEXT IS REAL AND MEASURED — every other .btn-secondary on
 * this site paints white text, and this one does not, because the source reaches it
 * through Bootstrap's .text-bg-secondary utility, which computes its own contrast colour
 * per background. It is not a slip and must not be "corrected" to white.
 */
.wp-block-wakefly-alert-band__dismiss.is-dismiss-secondary {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--black);
}

/*
 * The other five choices in the field's option list are NOT styled here, and that is a
 * recorded gap rather than an omission: `primary` and `warning` have palette entries but
 * no measured contrast colour on a control, and `success`, `danger` and `info` have no
 * palette entry at all — they are Bootstrap semantic tokens the source's own drop-down
 * offers and this theme has never been given. render.php still emits their modifier class,
 * so the day one is measured the rule has a selector waiting. See the hand-back.
 */

.wp-block-wakefly-alert-band__close {
	/* NOT MEASURED — nothing in scope selects `close` or `both`. Transparent on the band's
	   own text colour is the reading that invents the least. */
	background-color: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
}

/* ------------------------------------------------------------------- band backgrounds */

/*
 * `warning` is the measured background: rgb(255,193,7) behind rgb(0,0,0) text, which is
 * theme.json's own `warning` and `black` presets exactly. The text colour is paired with
 * the background rather than set on the block, because that is what the source's
 * .text-bg-* utility does — it computes the contrast colour from the background it is
 * given, so the two cannot be chosen independently.
 */
.wp-block-wakefly-alert-band.is-background-warning {
	background-color: var(--wp--preset--color--warning);
	color: var(--wp--preset--color--black);
}

/*
 * `primary` and `secondary` have palette entries and their contrast colour is NOT
 * measured on the band, so only the background is stated and the text falls back to the
 * document's own. `success`, `danger` and `info` have no palette entry on this theme at
 * all: an instance storing one of them renders an uncoloured band. Both gaps are reported
 * in the hand-back rather than closed by inventing three colours; widening or narrowing
 * this option list is a build decision the content model already flags for an operator.
 */
.wp-block-wakefly-alert-band.is-background-primary {
	background-color: var(--wp--preset--color--primary);
}

.wp-block-wakefly-alert-band.is-background-secondary {
	background-color: var(--wp--preset--color--secondary);
}