/**
 * TripN Brand Child — custom block styles
 *
 * Custom CSS justification:
 *
 * .is-style-section-label  —  The "background shrinks to text width" treatment
 *   requires `display: table` (or `display: inline-block` on an inline-level
 *   element). This structural trick cannot be expressed in theme.json settings
 *   or via block editor controls, making custom CSS the only viable option.
 *
 * .is-style-tag-button  —  The thin-border pill chip is achievable in theme.json
 *   but only as a global button style. Per-instance color variation via CSS
 *   custom properties (--tripn-tag-*) keeps each use independently themeable
 *   without requiring theme.json changes per instance.
 */

/* ── Section Label Heading ───────────────────────────────────────────────── */
.wp-block-heading.is-style-section-label {
	/* Body font (Albert Sans), not the heading default (Fraunces) — per spec  */
	font-family: var(--wp--preset--font-family--albert-sans, 'Albert Sans', sans-serif);
	font-size:   0.8125rem;   /* 13 px — label scale, intentionally smaller    */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 2;

	/* display:table shrinks the block to the text's natural width so the
	   colored background spans only the text, not the full container.     */
	display: table;

	/* Color props are set via CSS custom properties so individual instances
	   can override with block-level inline styles or color utilities.      */
	background-color: var(--tripn-section-label-bg,     var(--wp--preset--color--primary));
	color:            var(--tripn-section-label-color,  var(--wp--preset--color--text-on-primary));
	padding: 0.2em 0.75em 0;

	/* Thick bottom border in a contrasting accent — must differ from bg     */
	border-bottom: 4px solid var(--tripn-section-label-border, var(--wp--preset--color--accent-highlight));
}

/* ── Tag Button ──────────────────────────────────────────────────────────── */
.wp-block-button.is-style-tag-button .wp-block-button__link {
	font-family: var(--wp--preset--font-family--albert-sans, 'Albert Sans', sans-serif);
	font-size:   0.75rem;     /* 12 px — chip/tag scale                       */
	font-weight: 400;
	padding: 0.2em 0.9em;
	border-radius: 25px;      /* pill — matches --wp--custom--border--radius-small */
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	/* Decorative by default. Remove pointer-events:none if the tag is
	   interactive in a specific context.                                   */
	pointer-events: none;
	cursor: default;
}