/**
 * mhm-* block style variations — the selector layer.
 *
 * theme.json carries the VALUES for these variations (colour, typography,
 * spacing, border) under styles.blocks.<block>.variations.<name>. It does not
 * carry their SELECTORS.
 *
 * Why the split: `styles.blocks.*.variations.*.css` in this WordPress version
 * mangles anything past a flat declaration list. Measured in the served
 * global-styles CSS:
 *
 *   `&:hover, &:focus-visible { … }`  ->  `…is-style-mhm-ghost--7 …){:hover,}`
 *   `@media (min-width: 1367px) { … }` -> the rail's whole declaration list is
 *                                        swallowed into the selector
 *   `& > a, & > span { … }`           ->  `…){> a,}` plus a second broken rule
 *
 * A single nested selector beginning with `&` survives; a comma-separated
 * selector list or an at-rule does not. So every hover state, every
 * prefers-reduced-motion branch and every breakpoint in the mhm-* set was
 * silently absent from the page. They live here instead.
 *
 * Specificity: `.wp-block-x.is-style-y` is (0,2,0), above the (0,1,0) that
 * `:root :where(…)` gives theme.json's own output, so these rules win
 * regardless of load order. Every value is still a token — nothing here is a
 * literal that belongs in theme.json.
 *
 * @package Plinthworks
 * @license GPL-2.0-or-later
 */

/* ==========================================================================
   Hero — frame, band, rail, panel
   ========================================================================== */

.wp-block-group.is-style-mhm-hero-frame {
	position:  relative;
	isolation: isolate;
	overflow:  clip;
}

/* The header sits over the hero and the band sits across its foot; the slide's
   content needs to clear both. Slide padding stays available in the editor and
   applies outside this box.

   Both are ADDITIVE to the slider's intrinsic height — the band is absolutely
   positioned and reserves nothing of its own — so between them they put 250px
   under every hero. That is fine while the band is there and wrong when it is
   not. */
.wp-block-group.is-style-mhm-hero-frame .pw-slide-content {
	padding-block-start: var(--wp--custom--hero--headroom);
	padding-block-end:   var(--wp--custom--hero--band--height);
}

/* The band carries plinthworks' "Hide on mobile" control on this page, which is
   `.pw-hide-mobile{display:none!important}` below PLINTHWORKS_VIS_BREAKPOINT
   (781px, inc/block-extras.php:26). The reservation above did not follow it, so
   a hero whose band was hidden still carried 130px of dead photograph at its
   foot at every mobile width — measured at 390: band rect 0x0, slide padding
   still 130px. The reservation now tracks the band.

   The breakpoint is the plugin's, restated rather than shared: a media query
   cannot read a PHP constant and `:has()` cannot ask whether a hidden sibling
   is hidden. Recorded as an open item rather than left silent. */
@media (max-width: 781px) {

	.wp-block-group.is-style-mhm-hero-frame:has( > .is-style-mhm-hero-band.pw-hide-mobile ) .pw-slide-content {
		padding-block-end: 0;
	}
}

/* Heading margins inside a slide belong to the blocks, not to the browser.

   Measured on the front end before this rule: the display line is an h2 and took
   the UA's `margin-block: .83em` = 74.7px above it at 1440; the script line is
   an h3 and took `margin-block: 1em` = 130px below it. 204.7px that no rule in
   theme.json, this theme or the plugin ever asked for, added to a box whose
   height is content-driven — and the reference wants 10px between the script
   line and the promo paragraph (SECTION-SPEC §5, reference CSS L5421), not 130.

   This is a RESET, not a design value: it sets the unowned UA numbers to zero so
   that whatever the pattern or an editor puts on the block's own margin control
   is the only number in play. Block spacing emits an inline style, which beats
   this selector, so every heading in a slide stays fully adjustable. */
.wp-block-group.is-style-mhm-hero-frame .pw-slide-content > :is(h1, h2, h3, h4, h5, h6) {
	margin-block: 0;
}

/* The slider's own height is NOT set here. It used to be — a min-block-size
   pinned to --wp--custom--hero--height at >=1025px — and because that is
   (0,2,0) on the same element the block writes --pw-slider-height to, it beat
   the block's own rule and the editor's Height control did nothing above
   1024px. The block owns its height: plinthworks/slider writes
   --pw-slider-height (and --pw-slider-height-sm below 1025px) from its own
   attributes, over min-height plus the grid stacking that stops a tall slide
   clipping. The hero's 900 / 800 step is set on the block in the pattern. */

.wp-block-group.is-style-mhm-hero-band {
	position:        absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	z-index:         var(--wp--custom--z--header);
	block-size:      var(--wp--custom--hero--band--height);
	display:         flex;
	flex-direction:  row;
	flex-wrap:       nowrap;
	align-items:     stretch;
	gap:             0;
	padding:         0;
	margin:          0;
}

.wp-block-group.is-style-mhm-hero-band > * { margin-block: 0; }

/* The rail shows at every width.

   It used to be display:none with a `@media (min-width: 1367px)` gate turning
   it on, which is the reference's own behaviour — and it meant four social
   links were simply absent from the page on every laptop, tablet and phone.
   They are navigation, not decoration, so the gate is gone and the rail is
   `display: block` from the base rule down.

   What changes across the breakpoints is only WHERE it sits, and each placement
   was picked by measuring what the hero actually leaves free, at three slider
   heights, rather than by scaling one position down:

   >= 1367px  vertical column, bottom-left, 200px up. The reference's placement,
              unchanged — at this width the copy is centred well inside the
              frame and the left gutter is empty.

   601-1366   horizontal row, bottom-left, above the band. The copy runs the
              full width here (measured at 1024: the promo paragraph spans
              x 30-994), so a column tall enough for four icons cannot avoid it.
              The band's top edge and the copy's last line leave a shallow
              strip, and a 36px row is what fits in it.

   <= 600     the same row, moved to the TOP, into the strip the headroom
              reserves under the header. The hero's foot is full at this width:
              the band takes the bottom 130px, the controls sit at bottom:160px
              and the copy runs down to the button, leaving a 25px gap above the
              band that a 36px row cannot use.

              The bottom-right corner is not an alternative. The site's
              dark-mode toggle is position:fixed there — 44px at bottom:28px
              right:28px, z-index 9999, on every page — so anything the hero
              puts in its own bottom-right corner meets it as soon as the two
              corners coincide. Measured at 390x667 with the hero at its saved
              height: the toggle lands at y 595-639 and a rail in that corner
              sat underneath it. The headroom strip has the opposite property —
              scrolling only ever moves the hero UP, so the hero's head can
              never arrive at the viewport's foot.

   Every offset is anchored to an edge of the hero that does not move with the
   copy — its foot above 600px, its head below — so each placement holds when
   the Height control changes. Verified clear of the header, the copy, the
   band, the controls and the dark-mode toggle at 1440 / 1024 / 390 x four
   heights. */
.wp-block-group.is-style-mhm-hero-rail {
	position:           absolute;
	inset-block-end:    var(--wp--custom--hero--rail--bottom);
	inset-inline-start: var(--wp--custom--hero--rail--inset);
	z-index:            var(--wp--custom--z--header);
	margin:             0;
	display:            block;
}

/* 601-1366 — a horizontal row in the strip above the band. */
@media (max-width: 1366px) {

	.wp-block-group.is-style-mhm-hero-rail {
		inset-block-end:  var(--wp--custom--hero--rail--bottom-md);
		inset-inline-end: auto;
	}

	/* The block is saved `is-vertical`; the orientation belongs to the
	   placement, not to the block, so it is turned here and stays turned for
	   every width below this one. The gap is left alone — it remains whatever
	   the social-links block's own spacing control says. */
	.wp-block-group.is-style-mhm-hero-rail .wp-block-social-links.is-vertical {
		flex-direction: row;
	}
}

/* <= 600 — the same row, re-anchored to the hero's head. --hero--rail--top-sm
   clears the header's own foot (measured 73px at 390) and still sits above the
   headroom's 120px edge, which is the highest the copy can ever start. It is
   the one strip in the hero whose size does not move with the Height control:
   the copy centres inside the padding, so it can only ever start lower. */
@media (max-width: 600px) {

	.wp-block-group.is-style-mhm-hero-rail {
		inset-block-start: var(--wp--custom--hero--rail--top-sm);
		inset-block-end:   auto;
	}
}

.wp-block-group.is-style-mhm-hero-panel,
.wp-block-cover.is-style-mhm-hero-panel {
	inline-size:    var(--wp--custom--hero--band--panel-width);
	block-size:     100%;
	min-block-size: 100%;
	flex:           0 0 auto;
	overflow:       clip;
	padding:        0;
}

@media (min-width: 576px) {
	.wp-block-group.is-style-mhm-hero-panel,
	.wp-block-cover.is-style-mhm-hero-panel {
		inline-size: var(--wp--custom--hero--band--panel-width-sm);
	}
}

/* The panel holds one control and the reference centres it with margin:auto.
   The block itself is layout-agnostic, so the placement belongs here. */
.wp-block-cover.is-style-mhm-hero-panel .wp-block-cover__inner-container {
	text-align: center;
}

.wp-block-cover.is-style-mhm-hero-panel .wp-block-cover__image-background {
	transition: transform var(--wp--custom--motion--duration--zoom) var(--wp--custom--motion--easing--default);
}

.wp-block-cover.is-style-mhm-hero-panel:hover .wp-block-cover__image-background,
.wp-block-cover.is-style-mhm-hero-panel:focus-within .wp-block-cover__image-background {
	transform: scale(var(--wp--custom--motion--image-zoom));
}

/* ==========================================================================
   Vertical label — the rotated "Scroll Down"
   ========================================================================== */

.is-style-mhm-vertical-label {
	display:         none;
	align-items:     center;
	justify-content: center;
	margin:          0;
	inline-size:     var(--wp--custom--hero--rail--label-width);
	block-size:      100%;
	flex:            0 0 auto;
}

.is-style-mhm-vertical-label > a,
.is-style-mhm-vertical-label > span {
	rotate:          -90deg;
	white-space:     nowrap;
	color:           inherit;
	text-decoration: none;
}

.is-style-mhm-vertical-label > a:hover,
.is-style-mhm-vertical-label > a:focus-visible {
	opacity: var(--wp--custom--motion--hover-opacity);
}

@media (min-width: 992px) {
	.is-style-mhm-vertical-label { display: flex; }
}

/* ==========================================================================
   Media zoom — group, image, cover and the news mosaic share the behaviour

   .pw-mosaic-media is plinthworks/news-mosaic's image frame. It is named here
   rather than given its own rule in the block so the zoom stays ONE
   declaration set: distance, duration and easing are the same tokens for
   every consumer, and changing them changes them everywhere.
   ========================================================================== */

:is(.wp-block-group, .wp-block-image, .pw-mosaic-media).is-style-mhm-media-zoom { overflow: hidden; }

:is(.wp-block-group, .wp-block-image, .pw-mosaic-media).is-style-mhm-media-zoom img {
	transition: transform var(--wp--custom--motion--duration--zoom) var(--wp--custom--motion--easing--default);
}

.wp-block-image.is-style-mhm-media-zoom img { display: block; width: 100%; }

:is(.wp-block-group, .wp-block-image, .pw-mosaic-media).is-style-mhm-media-zoom:hover img,
:is(.wp-block-group, .wp-block-image, .pw-mosaic-media).is-style-mhm-media-zoom:focus-within img {
	transform: scale(var(--wp--custom--motion--image-zoom));
}

.wp-block-cover.is-style-mhm-media-zoom .wp-block-cover__image-background {
	transition: transform var(--wp--custom--motion--duration--zoom) var(--wp--custom--motion--easing--default);
}

.wp-block-cover.is-style-mhm-media-zoom:hover .wp-block-cover__image-background,
.wp-block-cover.is-style-mhm-media-zoom:focus-within .wp-block-cover__image-background {
	transform: scale(var(--wp--custom--motion--image-zoom));
}

/* ==========================================================================
   Icon frame and the bloom behind it
   ========================================================================== */

.wp-block-group.is-style-mhm-icon-frame {
	position:        relative;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.wp-block-group.is-style-mhm-icon-frame > *:not(.is-style-mhm-bloom) {
	position: relative;
	z-index:  5;
}

.wp-block-image.is-style-mhm-bloom {
	position:           absolute;
	inset-block-start:  50%;
	inset-inline-start: 50%;
	translate:          -50% -50%;
	z-index:            1;
	margin:             0;
	pointer-events:     none;
}

.wp-block-image.is-style-mhm-bloom img { width: auto; max-width: none; }

/* ==========================================================================
   Buttons — ghost
   ========================================================================== */

.wp-block-button.is-style-mhm-ghost .wp-block-button__link {
	min-width:      var(--wp--custom--button--min-width);
	letter-spacing: 0.05em;
	transition:
		transform        var(--wp--custom--motion--duration--hover) var(--wp--custom--motion--easing--default),
		box-shadow       var(--wp--custom--motion--duration--hover) var(--wp--custom--motion--easing--default),
		background-color var(--wp--custom--motion--duration--hover) var(--wp--custom--motion--easing--default),
		color            var(--wp--custom--motion--duration--hover) var(--wp--custom--motion--easing--default);
}

.wp-block-button.is-style-mhm-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-mhm-ghost .wp-block-button__link:focus-visible {
	transform:        translateY(var(--wp--custom--motion--lift--ghost));
	box-shadow:       var(--wp--preset--shadow--deep);
	background-color: var(--wp--preset--color--accent);
	color:            var(--wp--preset--color--contrast);
}


/* ==========================================================================
   Cause card, and the photo frame whose pill straddles its top edge
   ========================================================================== */

/* The card fills the height of the carousel cell it sits in, so a short
   excerpt does not leave the donate button floating halfway up a taller
   neighbour. The white ground and the panel shadow are theme.json's. */
.wp-block-group.is-style-mhm-cause-card {
	display:        flex;
	flex-direction: column;
	height:         100%;
}

/* The donate button is pushed to the foot for the same reason. `auto` on the
   last child rather than a fixed gap, so it tracks whatever the card holds.

   The gap above it belongs to the block ABOVE, not to the button - a
   margin-top set on the button from the editor is an inline style, and an
   inline margin-top beats this one outright, which silently un-bottom-aligns
   every card whose content is short. The pattern therefore carries the
   spacing as the progress bar's margin-bottom, which is a floor this auto
   margin then grows past. */
.wp-block-group.is-style-mhm-cause-card > :last-child { margin-top: auto; }

/* The frame the photo and the category pill share. Both are ordinary core
   blocks - core/post-featured-image and core/post-terms - and this is the
   positioning context that lets the second sit on the first's top edge. */
.wp-block-group.is-style-mhm-media-pill {
	position: relative;
}

.wp-block-group.is-style-mhm-media-pill > .wp-block-post-featured-image {
	margin: 0;
}

.wp-block-group.is-style-mhm-media-pill > .wp-block-post-featured-image img {
	display: block;
	width:   100%;
}

/* Half above the edge, half below it - the reference's translateY(-50%) on a
   pill anchored to the image's top. 15px in from the left, matching the card's
   own inset so the pill lines up with the copy beneath it. */
.wp-block-group.is-style-mhm-media-pill > .wp-block-post-terms {
	position:  absolute;
	top:       0;
	left:      var(--wp--preset--spacing--30);
	transform: translateY(-50%);
	z-index:   2;
	margin:    0;
	/* A cause with two categories shows two pills side by side. Core would
	   otherwise put its separator between them and break the pill in two. */
	display:   flex;
	gap:       var(--wp--preset--spacing--10);

	/* The pill's ink lives HERE, on the container, not on the anchor.

	   Inside a carousel the section-wide prose-link reset in ngo-brand.css
	   sets `color: inherit` on every card anchor at (0,6,1), which beats any
	   colour this file could reasonably put on the anchor itself - measured:
	   the pill came out #727272 on #F36F8F, a contrast ratio of 1.73:1.
	   Setting it on the parent works WITH that reset instead of against it,
	   and gives the same result outside a carousel, where the anchor has no
	   colour rule and inherits from here anyway.

	   Ink, not white. The reference sets white on this pink, which measures
	   2.81:1 - below AA for 14px bold, which is not large text. #333333 on
	   the same pink is 4.50:1 and passes. The pill still reads as the
	   reference's pink badge; only its ink differs. */
	color:     var(--wp--preset--color--on-action);
}

.wp-block-group.is-style-mhm-media-pill > .wp-block-post-terms a {
	display:         inline-block;
	padding:         2px var(--wp--preset--spacing--30) 3px;
	border-radius:   var(--wp--custom--radius--chip);
	background:      var(--wp--preset--color--accent-3);
	font-size:       var(--wp--preset--font-size--small);
	line-height:     27px;
	font-weight:     700;
	text-align:      center;
	text-decoration: none;
}


.wp-block-group.is-style-mhm-media-pill > .wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

/* ==========================================================================
   Headings, pill, social rail icons
   ========================================================================== */

.wp-block-heading.is-style-mhm-heading-mixed strong,
.wp-block-heading.is-style-mhm-heading-mixed b { font-weight: 700; }

.is-style-mhm-pill { display: inline-block; width: auto; text-align: center; }

/* The rail sits on the hero photograph, so the icons need a light ink and no
   per-network chip. Core paints .wp-social-link per service (white on the brand
   chip, #444 on anything without a rule); with the chip gone that default is a
   coin toss against a dark photo, so the variation states one.

   This is a DEFAULT, not a decision baked in ink: core's Icon color control
   emits an inline `style="color:…"` on the same <li> (wp-includes/blocks/
   social-link.php:376), and an inline style beats this selector, so the block's
   own control still owns the colour. The anchor and its svg take it by
   inheritance through core's `color:currentcolor` — which is why ngo-brand.css
   must not intercept .wp-block-social-link-anchor. */
.wp-block-social-links.is-style-mhm-hero-icons .wp-social-link {
	background: none;
	color:      var(--wp--preset--color--base);
}

.wp-block-social-links.is-style-mhm-hero-icons .wp-social-link a {
	opacity:    1;
	transition: opacity var(--wp--custom--motion--duration--hover) var(--wp--custom--motion--easing--default);
}

.wp-block-social-links.is-style-mhm-hero-icons .wp-social-link a:hover,
.wp-block-social-links.is-style-mhm-hero-icons .wp-social-link a:focus-visible {
	opacity: var(--wp--custom--motion--hover-opacity);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	:is(.wp-block-group, .wp-block-image, .pw-mosaic-media).is-style-mhm-media-zoom img,
	.wp-block-cover.is-style-mhm-media-zoom .wp-block-cover__image-background,
	.wp-block-cover.is-style-mhm-hero-panel .wp-block-cover__image-background {
		transition-duration: 1ms;
	}

	:is(.wp-block-group, .wp-block-image, .pw-mosaic-media).is-style-mhm-media-zoom:hover img,
	:is(.wp-block-group, .wp-block-image, .pw-mosaic-media).is-style-mhm-media-zoom:focus-within img,
	.wp-block-cover.is-style-mhm-media-zoom:hover .wp-block-cover__image-background,
	.wp-block-cover.is-style-mhm-media-zoom:focus-within .wp-block-cover__image-background,
	.wp-block-cover.is-style-mhm-hero-panel:hover .wp-block-cover__image-background,
	.wp-block-cover.is-style-mhm-hero-panel:focus-within .wp-block-cover__image-background {
		transform: none;
	}

	.wp-block-button.is-style-mhm-ghost .wp-block-button__link { transition-duration: 1ms; }

	.wp-block-button.is-style-mhm-ghost .wp-block-button__link:hover,
	.wp-block-button.is-style-mhm-ghost .wp-block-button__link:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
   Hero — ink inheritance
   ========================================================================== */

/* The slider's counter and arrows sit over the slide photograph, so they take
   the hero's ink. Set on the slider element itself, not on the controls, so
   the block's own Text colour control (an inline style on this element) still
   wins when an editor sets one. */
.wp-block-group.is-style-mhm-hero-frame .wp-block-plinthworks-slider {
	color: var(--wp--preset--color--base);
}

/* theme.json gives every heading an explicit colour, which beats inheriting
   the slide's Text colour. Headings inside the hero inherit unless the editor
   has picked a colour for that heading, in which case has-text-color is
   present and this rule stands aside. */
.wp-block-group.is-style-mhm-hero-frame .pw-slide-content :is(h1, h2, h3, h4, h5, h6):not(.has-text-color):not(.is-style-mhm-script) {
	color: inherit;
}

/* The category pill's hover, kept apart from the rest of the pill rules above.

   Ordering, not taste. This selector is (0,4,1); the resting pill rule is
   (0,3,1) and has to stay ABOVE the social rail's own `a` rule, which is also
   (0,3,1). If the hover sat with it, a (0,4,1) rule would precede a (0,3,1)
   one for the same element and stylelint's no-descending-specificity would be
   right to object. Split, every `a` rule in this file runs least-specific
   first. */
.wp-block-group.is-style-mhm-media-pill > .wp-block-post-terms a:hover,
.wp-block-group.is-style-mhm-media-pill > .wp-block-post-terms a:focus-visible {
	/* Background only - the ink is the container's, for the reason above. */
	background: var(--wp--preset--color--accent-2);
}

/* ==========================================================================
   Volunteer band — the giant script word and the block pulled up over it
   ========================================================================== */

/* The word never causes a horizontal scrollbar.

   It is live text in a script face at up to 400px, and how wide "Volunteer"
   renders depends on the font, the word and the language — none of which this
   rule can know. `clip` rather than `hidden` so the band never becomes a
   scroll container of its own. */
.wp-block-group.mhm-band {
	position: relative;
	overflow: clip;
}

/* Tracking and wrapping for a word set at Display 3.

   Attached to the SIZE, not to the script style: is-style-mhm-script is shared
   with the hero.s script line, which is one rung of a heading and wants its
   own tracking. At 400px the variation.s 0.05em would add 20px to every gap;
   the reference sets none.

   The LEADING is not here. The reference tightens it as the word grows - a
   400px word in a 250px box - which wants a viewport-relative value, and this
   repo.s stylelint config allows line-height to be unitless only. That is the
   right rule, so the leading is a plain number on the block instead, where it
   is also a control the author can drag. */
.wp-block-heading.is-style-mhm-script.has-display-3-font-size {
	letter-spacing: 0;
	white-space:    nowrap;
}

/* The block sits over the word's lower half.

   The overlap itself is NOT here - it is the block's own top margin, set in
   the pattern, so it shows up in the Dimensions panel and an author can
   change it. It has to be: a margin-top written here would be an ordinary
   stylesheet rule, and the block's spacing control emits an inline style that
   beats it outright, so the CSS value would apply only until somebody touched
   the panel and then never again. (That is not hypothetical - the same trap
   ate the donate button's bottom alignment on the cause card one section
   over.) All that is left here is the stacking. */
.wp-block-columns.mhm-band__over {
	position: relative;
	z-index:  1;
}

/* The reference holds the copy off the column's right edge at full width and
   lets it run to the edge once the columns stack. */
@media (min-width: 782px) {

	.mhm-band__copy { padding-right: var(--wp--preset--spacing--80); }
}

/* Stacked, the 33% spacer column is an empty box that would still take the
   grid's row. */
@media (max-width: 781px) {

	.wp-block-columns.mhm-band__over > .wp-block-column:empty { display: none; }
}