/**
 * Contractors4Christ — Mobile PWA Native Header
 *
 * Only ever loaded on the 3 PWA app screens (Dashboard/Log In/Register —
 * see Frontend\PwaHeaderRenderer / Frontend\TemplateShell). Never touches
 * the regular themed site pages. Visible only at mobile widths (<= 900px);
 * on wider viewports the existing in-app topbar (.c4c-topbar, with search/
 * notification/avatar icons) is used instead — see the toggle rules at the
 * bottom of this file.
 *
 * Apple HIG-inspired: minimal, centered, generous whitespace, no shadows,
 * no gradients, no clutter.
 */

.c4c-native-header {
	display: none; /* shown only at mobile widths, see media query below */
	position: relative;
	z-index: 40;
	width: 100%;
	background: var(--c4c-header-bg, #ffffff);
	color: var(--c4c-header-text, #111827);
	padding-top: env(safe-area-inset-top, 0);
	transition: height 0.2s ease, box-shadow 0.2s ease;
}

.c4c-native-header--border {
	border-bottom: 1px solid var(--c4c-border, #ececec);
}

/*
 * FIXED (v1.8.1): was `position: sticky`, which only pins correctly when
 * the element is in-flow near the top of its scroll container on first
 * paint. That's true on the 3 canvas pages (rendered right after
 * wp_body_open()), but JourneyNavController now also calls
 * PwaHeaderRenderer::render() from a wp_footer hook — i.e. at the very end
 * of <body> — where `sticky` would just sit wherever the footer prints
 * (usually scrolled off-screen), not pin to the top. `position: fixed` pins
 * to the viewport regardless of DOM position, so the header now works
 * identically whether it's injected near the top (canvas pages) or the
 * bottom of the DOM (themed pages via JourneyNavController).
 */
.c4c-native-header--sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

/*
 * Since a fixed header no longer occupies space in normal flow, push page
 * content down by its height so nothing renders underneath it.
 *
 * FIX (v2.10.7) — "header spacing showing on desktop web" report. The
 * comment here always SAID this was "scoped to the mobile media query
 * below", but the rule itself was a bare top-level selector with no such
 * scoping — :has() matches on the header ELEMENT'S EXISTENCE in the DOM,
 * not its computed display state, and the header always renders in the
 * DOM (just display:none above 900px, see the media query below) rather
 * than being removed. So body reserved space for it everywhere,
 * including desktop, where the header itself was correctly invisible —
 * a phantom gap with nothing generating it. Moved inside the same
 * @media (max-width: 900px) block that's what actually makes the header
 * visible in the first place, so the reserved space only exists exactly
 * when there's something occupying it.
 */
@media (max-width: 900px) {
	body:has(> .c4c-native-header--sticky) {
		padding-top: calc(var(--c4c-header-height, 76px) + env(safe-area-inset-top, 0)) !important;
	}
}

.c4c-native-header__inner {
	height: var(--c4c-header-height, 76px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 16px;
	transition: height 0.2s ease, gap 0.2s ease;
	position: relative; /* anchors .c4c-native-header__menu-btn below, independent of the minimal/centered/compact flex layout */
}

.c4c-native-header--minimal .c4c-native-header__inner {
	flex-direction: row;
}

.c4c-native-header--centered .c4c-native-header__inner {
	flex-direction: column;
	justify-content: center;
	gap: 2px;
}

.c4c-native-header--compact .c4c-native-header__inner {
	flex-direction: row;
	gap: 10px;
}

.c4c-native-header__logo {
	display: block;
	width: var(--c4c-header-logo-size, 44px);
	height: var(--c4c-header-logo-size, 44px);
	object-fit: contain;
	border-radius: 10px;
	transition: width 0.2s ease, height 0.2s ease;
}

.c4c-native-header__logo--dark {
	display: none;
}

/* v2.4.6: the dark-logo swap used to live in a
   @media (prefers-color-scheme: dark) block, i.e. it followed each
   visitor's own phone/OS theme rather than the app's. That's the exact
   behavior v2.3.6 deliberately removed everywhere else (see the notes in
   assets/js/pwa.js and assets/js/pwa/app-mode.js), and it meant a phone
   with system dark mode on would show the dark logo on an otherwise
   bright app. The swap now keys off .c4c-dark, at the bottom of this
   file, alongside the rest of the dark-mode header rules. */

.c4c-native-header__title {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	transition: font-size 0.2s ease;
}

/* ---- Hamburger button (only rendered when Frontend\PwaHeaderRenderer's
   $page_hint is '' — themed/static-shell pages that have a sidebar to
   open; never on Login/Register). Positioned absolutely so it sits at the
   right edge regardless of which header style (minimal/centered/compact)
   is centering the logo+title in the middle. ---- */
.c4c-native-header__menu-btn {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--c4c-header-text, #111827);
}

/* ---- Shrink-on-scroll state (toggled by assets/js/pwa-header.js) ---- */
.c4c-native-header--shrink-enabled.is-shrunk .c4c-native-header__inner {
	height: 52px;
	gap: 6px;
}

.c4c-native-header--shrink-enabled.is-shrunk .c4c-native-header__logo {
	width: 28px;
	height: 28px;
}

.c4c-native-header--shrink-enabled.is-shrunk .c4c-native-header__title {
	font-size: 16px;
}

.c4c-native-header--shrink-enabled.is-shrunk.c4c-native-header--border {
	box-shadow: 0 1px 0 var(--c4c-border, #ececec);
}

/* ---- Visibility: mobile PWA app screens only ---- */
@media (max-width: 900px) {
	.c4c-native-header {
		display: block;
	}
	/* Hide the wider in-app topbar's icon row (search/bell/avatar) in favor
	   of this clean native header — the greeting/title text underneath it
	   is still reachable via the dashboard's own content, so nothing is lost,
	   only the redundant top-of-screen chrome is removed on phones. */
	.c4c-app .c4c-topbar {
		display: none;
	}
}

/* =========================================================================
   v2.3.3 FIXES
   ========================================================================= */

/*
 * FIX 1 — DESKTOP PWA (standalone > 900px)
 * The media query at max-width:900px correctly hides the mobile native header
 * on desktop. But when the PWA desktop app window is narrower than 900px,
 * the native header (logo only, no search) was showing AND the topbar
 * (with search) was being hidden — leaving the desktop app with no search bar
 * or page title in the topbar.
 *
 * Fix: On desktop standalone (display-mode: standalone AND any width), always
 * show the topbar. The native header handles mobile; the topbar handles desktop.
 * We detect standalone via a body class set by app-mode.js.
 */
@media (display-mode: standalone) and (min-width: 901px) {
	/* Keep the topbar visible on desktop standalone — it has the search bar */
	.c4c-app .c4c-topbar {
		display: flex !important;
	}
	/* Hide the native mobile header on desktop standalone */
	.c4c-native-header {
		display: none !important;
	}
}

/*
 * FIX 2 — MOBILE PWA: hide the topbar in favor of the native header
 * On mobile (<= 900px), the topbar (with its own search bar) is hidden and
 * replaced by the simple logo/title native header. This now applies to
 * every page that uses it — Dashboard, Login, Register (the 3 canvas app
 * pages), and the themed pages via JourneyNavController — see Frontend\
 * PwaHeaderRenderer's class docblock ("CONSOLIDATED v2.10.4") for why the
 * Dashboard-specific opt-out mentioned in older versions of this comment
 * no longer exists; the dashboard's own search bar
 * (".c4c-mobile-home-search" in dashboard.css) still renders separately
 * below this header, since the native header itself has no search field.
 */
@media (max-width: 900px) {
	.c4c-app .c4c-topbar {
		display: none !important;
	}
}

/* (body padding-top for the sticky native header is handled by the
   body:has(> .c4c-native-header--sticky) rule near the top of this file,
   scoped to this same @media (max-width: 900px) block since v2.10.7 — see
   that rule's comment for why it wasn't actually scoped before then.) */

/*
 * v2.3.6: the background-color fix now lives in c4c-base.css (covers both
 * body.c4c-canvas and body.c4c-static-shell, with hardcoded colors so it
 * can't be silently overridden by dark-mode variable redefinition — see
 * that file for the full explanation) — and the actual root cause (two
 * separate scripts mirroring each device's own system dark-mode
 * preference) is fixed at the source in assets/js/pwa.js and
 * assets/js/pwa/app-mode.js. Nothing further needed here.
 */


/* =========================================================================
   DARK MODE (v2.4.6)
   =========================================================================
   --c4c-header-bg / --c4c-header-text are branding values printed inline
   on the <header> element by Frontend\PwaHeaderRenderer, so they're
   whatever light color the admin picked in PWA Settings -> Branding and
   they don't flip on their own. In dark mode that left a bright white bar
   pinned to the top of an otherwise dark app. These rules override the
   painted background rather than the custom property, so the admin's
   light-mode branding is left exactly as configured.
   ========================================================================= */
.c4c-dark .c4c-native-header {
	background: var(--c4c-surface, #151B26);
	color: var(--c4c-text, #F3F4F6);
}

/* The dark-variant logo (PWA Settings -> Branding -> "Logo (dark)") was
   previously swapped in only by prefers-color-scheme — i.e. by the
   device's own system setting, which no longer drives the app's theme.
   Tie it to the app's actual dark mode instead. */
.c4c-dark .c4c-native-header__logo--light {
	display: none;
}

.c4c-dark .c4c-native-header__logo--dark {
	display: block;
}