/**
 * KrsKrt Header Bar block — frontend + editor layout.
 *
 * A standardized section heading row: left = heading prefix + title; middle =
 * label icon (inline) + balanced label text that fills the remaining width and
 * wraps from the baseline up; right = minutes value + a timer icon scaled to
 * the minutes text. A full-width bottom border closes the bar. The per-element
 * colours, font sizes/families, border and margins are set inline by the server
 * template (templates/fields/krskrt-header-bar.php) / the editor preview.
 *
 * This bar replaces the ad-hoc "heading row" inside each section. Because it
 * contains a real <h1>, the sticky-section / sticky-headrow engines and the
 * Marker part scan keep recognising it as the section heading automatically;
 * it also carries `data-krskrt-heading` as a forward marker (see the block JS).
 */

/* Outer row: the heading PREFIX sits on the left, OUTSIDE the border; the
   bordered `__bar` (title + label + minutes) is everything to its right. The
   prefix and the bar bottom-align so the prefix's baseline lands on the bar's
   bottom border. */
.krskrt-header-bar {
	display:     flex;
	align-items: flex-end;           /* prefix baseline ↔ bar bottom border */
	gap:         0 0.6em;
	flex-wrap:   nowrap;
	width:       100%;
	box-sizing:  border-box;

	/* Prefix size multiplier: the prefix font-size is (1 + overhang)× the heading,
	   so it reads as a larger drop-number to the left, baseline on the border. */
	--hb-prefix-overhang: 0.33;
}

/* The bordered part — title + label + minutes. */
.krskrt-header-bar__bar {
	flex:           1 1 auto;
	min-width:      0;
	display:        flex;
	align-items:    last baseline;   /* share the baseline of each zone's last line */
	gap:            0.5em 1.25em;
	box-sizing:     border-box;
	font-size:      var( --hb-heading-fs, var( --wp--preset--font-size--x-large ) );
	border-bottom:  var( --hb-border-height, 1px ) solid var( --hb-border-color, #00374a );
}

/* The prefix: its font family/weight come from the Prefix typography controls
   (defaulting to the heading's), set inline; its SIZE is derived here from the
   heading size × (1 + overhang). text-box-trim pins the box to cap→baseline so
   the baseline sits on the border (graceful line-box fallback without it). */
.krskrt-header-bar__prefix {
	flex:        0 0 auto;
	margin:      0;
	margin-left: -2px;               /* nudge the prefix flush to the left edge */
	line-height: 1;
	white-space: nowrap;
	font-size:   calc( var( --hb-heading-fs, var( --wp--preset--font-size--x-large ) ) * ( 1 + var( --hb-prefix-overhang ) ) );
	/* Modern: trim to cap-top / alphabetic-baseline for exact anchoring. */
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box:      trim-both cap alphabetic;
}

/* Left — title (inside the bordered bar). */
.krskrt-header-bar__heading {
	flex:        0 0 auto;
	margin:      0;
	padding:     0;
	line-height: 1.1;
	white-space: nowrap;
}
.krskrt-header-bar__title { font: inherit; }

/* Heading icon — an inline Phosphor glyph before or after the title (mirrors the
   label icon). It flows with the heading text as one run. */
.krskrt-header-bar__heading-icon {
	font-style:  normal;
	font-weight: normal;
}

/* Heading alignment. Default (left) keeps the heading content-sized on the left
   and lets the label fill the middle. Centre / right let the heading grow to take
   the row's free space and align within it; the label then hugs its content
   instead of growing, so the heading can actually move. */
.krskrt-hb-halign-center .krskrt-header-bar__heading,
.krskrt-hb-halign-right  .krskrt-header-bar__heading {
	flex: 1 1 auto;
}
.krskrt-hb-halign-center .krskrt-header-bar__heading { text-align: center; }
.krskrt-hb-halign-right  .krskrt-header-bar__heading { text-align: right; }
.krskrt-hb-halign-center .krskrt-header-bar__label,
.krskrt-hb-halign-right  .krskrt-header-bar__label {
	flex: 0 1 auto;
}

/* Middle — label icon (inline with the text) + balanced wrapping label text.
   Grows to fill the available width; when it wraps, `last baseline` keeps the
   bottom line on the shared baseline. */
.krskrt-header-bar__label {
	flex:        1 1 auto;
	min-width:   0;                  /* allow the flex item to shrink + wrap */
	align-self:  last baseline;
	text-align:  center;
	text-wrap:   balance;
	line-height: 1.2;
}
.krskrt-header-bar__label-icon {
	font-style:     normal;
	font-weight:    normal;
	/* inline, so it flows with the text and wraps as one run */
	margin-right:   0.3em;
}

/* Right — minutes value + timer icon, both on the shared baseline. The timer
   is scaled to the cap height of the minutes text (1cap), so it is exactly as
   tall as the digits; `em` is the fallback for engines without the cap unit. */
.krskrt-header-bar__minutes {
	flex:        0 0 auto;
	display:     inline-flex;
	align-items: baseline;
	gap:         3px;
	line-height: 1.1;
	white-space: nowrap;
}
.krskrt-header-bar__timer {
	flex:       0 0 auto;
	width:      auto;
	height:     0.8em;               /* fallback (≈ 1cap + 3px at the XL size) */
	height:     calc( 1cap + 3px );  /* digits cap-height + a touch */
	align-self: baseline;
}

/* Optional: hide the middle label on narrow screens (WP "mobile" breakpoint,
   < 782px). Toggled per block via the `krskrt-hb-hide-label-narrow` class. */
@media ( max-width: 781px ) {
	.krskrt-header-bar.krskrt-hb-hide-label-narrow .krskrt-header-bar__label { display: none; }
}

/* When the bar is pinned as the sticky head row the JS gives it the section's
   solid background; nothing extra needed here, but keep the border crisp. */
.mm-sticky-headrow.krskrt-header-bar { background-clip: padding-box; }