/* ==========================================================================
   Blood Bank > Header Manager — independent App Header styling layer.
   ==========================================================================
   Loaded AFTER assets/css/app.css (see functions.php enqueue order), and
   every rule here is scoped behind an `html.bbb-hm-*` flag class that
   assets/js/header-manager.js only adds when the admin has actually set
   that field in Blood Bank > Header Manager. Nothing in this file fires
   by default, so the header's existing look (including anything set in
   Blood Bank > Dashboard Manager > Header) is completely unaffected
   until this new screen is used.

   This file never selects .bg-*, .db-*, .hero-*, or any other module's
   elements — only the App Header (.app-header), the App Brand block
   (.app-brand / .app-logo), and the two header action buttons
   (#bbb-theme-toggle / #bbb-notif-btn).
   ========================================================================== */

html.bbb-hm-bg-custom .app-header {
	background: var( --bbb-hm-bg );
}

html.bbb-hm-blur-custom .app-header {
	backdrop-filter: var( --bbb-hm-blur, none );
	-webkit-backdrop-filter: var( --bbb-hm-blur, none );
}

html.bbb-hm-height-custom .app-header {
	min-height: var( --bbb-hm-height );
}

html.bbb-hm-padding-custom .app-header {
	padding: var( --bbb-hm-padding );
}

html.bbb-hm-radius-custom .app-header {
	border-radius: var( --bbb-hm-radius );
}

html.bbb-hm-shadow-custom .app-header {
	box-shadow: var( --bbb-hm-shadow );
}

html.bbb-hm-logo-size-custom .app-header .app-logo,
html.bbb-hm-logo-size-custom .app-header .app-brand > .drop,
html.bbb-hm-logo-size-custom .app-header .app-brand > svg.drop {
	width: var( --bbb-hm-logo-size );
	height: var( --bbb-hm-logo-size );
}

html.bbb-hm-logo-pos-right .app-header .app-brand {
	flex-direction: row-reverse;
}

html.bbb-hm-logo-pos-top .app-header .app-brand {
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

html.bbb-hm-title-font-custom .app-header .app-brand > span {
	font-family: var( --bbb-hm-title-font );
}

html.bbb-hm-title-size-custom .app-header .app-brand > span {
	font-size: var( --bbb-hm-title-size );
}

html.bbb-hm-title-weight-custom .app-header .app-brand > span {
	font-weight: var( --bbb-hm-title-weight );
}

html.bbb-hm-title-color-custom .app-header .app-brand > span {
	color: var( --bbb-hm-title-color );
}

html.bbb-hm-hide-theme-toggle .app-header #bbb-theme-toggle {
	display: none;
}

html.bbb-hm-hide-notif .app-header #bbb-notif-btn {
	display: none;
}

/* Top Background Height — extra background-only space added to the TOP
   of .app-header ITSELF, not a separate element.
   ------------------------------------------------------------------------
   PREVIOUS (WRONG) ARCHITECTURE: this used to be a decorative sibling
   `.bbb-hm-top-bg-wrap` inserted immediately BEFORE `.app-header`. That
   produced a visually separate strip above the header instead of extra
   background space belonging to the header itself (wrong per the
   reference design), and required DOM insertion via
   assets/js/header-manager.js's ensureTopBgStrips(). Both the wrapper
   element and that JS function have been removed — there is no longer
   any extra DOM node for this feature.

   CURRENT (CORRECT) ARCHITECTURE: Top Background Height is implemented
   purely as additional `padding-top` on `.app-header`. Because
   `.app-header` paints its own background across its full padding box
   (including any `::before`/`::after` decoration from
   header-premium-bg.css, which use `inset: 0` — i.e. the padding box),
   simply growing padding-top reveals that same background as empty
   space above the logo/title/buttons row, with zero new elements. This
   also makes header-premium-bg.css's `.app-header { overflow: hidden }`
   and `.app-header > * { position: relative; z-index: 1 }` irrelevant
   to this feature — there is no child element for those rules to affect
   or clip.

   `--bbb-hm-padding-top-base` is written by header-manager.js on every
   run to whatever the header's top padding already resolves to: the
   custom "Header Padding — Vertical" value if the admin set one,
   otherwise the theme's own default (16px, matching .app-header in
   app.css). This rule only ADDS `--bbb-hm-top-bg-height` on top of that
   existing value — it never replaces it and never touches
   padding-bottom or the horizontal padding, so the header's bottom
   spacing and content-row width are completely unaffected. Because this
   selector (`html.bbb-hm-top-bg-custom .app-header`) has the same
   specificity as `html.bbb-hm-padding-custom .app-header` above and is
   declared after it, its `padding-top` longhand correctly wins over
   that rule's `padding` shorthand when both classes are present, while
   still allowing that rule's padding-bottom/left/right to apply
   untouched.

   `.app-header` is `display:flex; align-items:center` with no explicit
   height, so its box height is simply padding-top + content height +
   padding-bottom — extra padding-top pushes the content down rather
   than being distributed/centered by align-items, exactly matching the
   reference (space appears above the logo/title/buttons row, which
   otherwise stays pixel-identical). */
html.bbb-hm-top-bg-custom .app-header {
	padding-top: calc( var( --bbb-hm-padding-top-base, 16px ) + var( --bbb-hm-top-bg-height ) );
}