/**
 * Zadwa Content Engine — BuddyBoss Theme Compatibility
 *
 * Applied automatically when the BuddyBoss theme (or child theme) is active.
 * Scoped entirely to .zce-app and the BuddyBoss selectors that affect it.
 * Does NOT modify BuddyBoss global styles.
 *
 * Strategy:
 *  1. Hide the plugin's own header bar (BuddyBoss provides the site chrome)
 *  2. Promote the nav controls into a sticky sub-toolbar below the day banner
 *  3. Fix sticky top offsets to clear the BB fixed header
 *  4. Suppress the WP page entry-title on ZCE pages
 *  5. Remove BB's content-area padding that wastes space above the app
 *  6. Strip BB's .container max-width constraint inside the app
 *  7. Remove .zce-app's own min-height: 100vh (BB handles page height)
 */

/* ══════════════════════════════════════════════════════════════════
   1. BB HEADER HEIGHT TOKEN
   BB stores its own height in --bb-header-height (set inline by JS).
   We derive our offsets from it with a safe fallback.
   ══════════════════════════════════════════════════════════════════ */
.zce-app {
	--zce-bb-header-offset: var(--bb-header-height, 60px);
}

/* Admin bar adds 32px (desktop) / 46px (mobile) on top */
.admin-bar .zce-app {
	--zce-bb-header-offset: calc(var(--bb-header-height, 60px) + 32px);
}
@media screen and (max-width: 782px) {
	.admin-bar .zce-app {
		--zce-bb-header-offset: calc(var(--bb-header-height, 60px) + 46px);
	}
}

/* ══════════════════════════════════════════════════════════════════
   2. HIDE THE PLUGIN'S ORIGINAL HEADER BAR
   The <header class="zce-header"> duplicates BuddyBoss's site header.
   We hide it completely and re-expose its controls in the sub-toolbar.
   ══════════════════════════════════════════════════════════════════ */
.bb-active .zce-header {
	display: none !important;
}

/* Reset the header height variable to 0 so sticky top calculations
   in the original CSS don't leave a gap */
.bb-active .zce-app {
	--zce-header-h: 0px;
	min-height: unset; /* let BB handle page height */
}

/* ══════════════════════════════════════════════════════════════════
   3. SUB-TOOLBAR — the nav controls re-mounted below day banner
   Acts as a sticky secondary nav that clears the BB header.
   ══════════════════════════════════════════════════════════════════ */
.bb-active .zce-sub-toolbar {
	display: flex !important;
	align-items: center;
	gap: 2px;
	background: var(--zce-surface);
	border-bottom: 1px solid var(--zce-border);
	padding: 4px 12px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	flex-wrap: nowrap;
	position: sticky;
	top: var(--zce-bb-header-offset);
	z-index: 200;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.bb-active .zce-sub-toolbar::-webkit-scrollbar {
	display: none;
}

/* Hide it when BB is not active — original header serves */
.zce-sub-toolbar {
	display: none;
}

/* Sub-toolbar buttons reuse .zce-btn-icon but adapt colours */
.bb-active .zce-sub-toolbar .zce-btn-icon {
	color: var(--zce-text-2, #374151);
	flex-direction: column;
	gap: 3px;
	padding: 6px 8px 4px;
	min-height: 52px;
	min-width: 52px;
	font-size: 13px;
	border-radius: 8px;
	border: 1px solid transparent;
}

.bb-active .zce-sub-toolbar .zce-btn-icon:hover,
.bb-active .zce-sub-toolbar .zce-btn-icon.active,
.bb-active .zce-sub-toolbar .zce-btn-icon[aria-pressed="true"] {
	background: rgba(37,99,235,0.08);
	border-color: rgba(37,99,235,0.2);
	color: var(--zce-brand, #2563eb);
}

.bb-active .zce-sub-toolbar .zce-btn-icon__icon  { font-size: 20px; }
.bb-active .zce-sub-toolbar .zce-btn-icon__label {
	font-size: 10px;
	font-weight: 600;
	display: block !important;
}

/* Library badge inside sub-toolbar */
.bb-active .zce-sub-toolbar .zce-lib-badge {
	background: var(--zce-brand);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	border-radius: 10px;
	padding: 1px 5px;
	margin-left: 2px;
	line-height: 1.4;
}

/* Separator between toolbar groups */
.bb-active .zce-sub-toolbar .zce-toolbar-sep {
	width: 1px;
	height: 20px;
	background: var(--zce-border);
	margin: 0 4px;
	flex-shrink: 0;
}

/* Dark mode sub-toolbar */
.bb-active .zce-app.dark .zce-sub-toolbar {
	background: var(--zce-surface);
	border-bottom-color: var(--zce-border);
}

/* ══════════════════════════════════════════════════════════════════
   4. STICKY OFFSET FIXES for elements that referenced --zce-header-h
   Now they must clear the BB header instead.
   ══════════════════════════════════════════════════════════════════ */

/* Bridge column (desktop) */
.bb-active .zce-bridge {
	top: calc(var(--zce-bb-header-offset) + 60px); /* +60 for sub-toolbar + day banner */
	max-height: calc(100vh - var(--zce-bb-header-offset) - 80px);
}

/* Onboarding progress bar */
.bb-active #zce-onboarding-bar {
	top: calc(var(--zce-bb-header-offset) + 48px);
}

/* Day banner — not sticky in BB mode (sub-toolbar provides the sticky layer) */
.bb-active .zce-day-banner {
	position: relative;
	top: unset;
}

/* ══════════════════════════════════════════════════════════════════
   5. SUPPRESS THE WP PAGE TITLE ON ZCE PAGES
   BuddyBoss renders <h1 class="entry-title"> before the shortcode.
   We hide it when #zce-app is on the page via sibling combinator
   (can't use parent selector — use a body class instead).
   ══════════════════════════════════════════════════════════════════ */
.zce-page .entry-header,
.zce-page .entry-title,
.zce-page .page-header {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   6. STRIP BB CONTAINER CONSTRAINTS INSIDE THE APP
   BuddyBoss's .container and .bb-grid add padding/max-width that
   compress the app. We reset them at the zce-app boundary.
   ══════════════════════════════════════════════════════════════════ */
.zce-page .entry-content,
.zce-page .site-main,
.zce-page #primary,
.zce-page .content-area {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.zce-page .site-content > .container {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

.zce-page .bb-grid.site-content-grid {
	display: block !important;
}

.zce-page .content-area.bb-grid-cell {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Remove WP page article padding */
.zce-page article.page {
	padding: 0 !important;
	margin: 0 !important;
}

.zce-page .entry-content > *:first-child {
	margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   7. ZCE-APP EDGE-TO-EDGE IN BB
   Expand the app to full viewport width, remove BB border-radius
   and box interference.
   ══════════════════════════════════════════════════════════════════ */
.bb-active .zce-app {
	border-radius: 0;
	margin-left: -10px;  /* compensate BB's .site-header/site-content padding: 0 10px */
	margin-right: -10px;
	width: calc(100% + 20px);
}

/* On very small screens BB uses 0 padding */
@media screen and (max-width: 480px) {
	.bb-active .zce-app {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}

/* ══════════════════════════════════════════════════════════════════
   8. MODAL Z-INDEX & POSITIONING — respect BB header and mobile nav
   BB sticky header: z-index 612. Our modals must be above that.
   On mobile: ALL modals are bottom-sheet drawers that sit between
   the BB header and the BB bottom nav bar.
   ══════════════════════════════════════════════════════════════════ */

/* All modals: above BB sticky header (612) and sidebar (510) */
.bb-active .zce-modal {
	z-index: 1200;
}

/* On mobile: constrain all drawers to the usable area between BB chrome.
   The .zce-modal wrapper stays inset:0 but the drawer box is height-limited.
   The drawer already animates from the bottom because of align-items:flex-end. */
@media (max-width: 639px) {
	/* Shift backdrop so it only visually covers the area below BB header */
	.bb-active .zce-modal__backdrop {
		top: var(--bb-header-height, 60px);
	}

	/* ALL modal boxes: respect BB top + bottom chrome */
	.bb-active .zce-modal__box,
	.bb-active .zce-modal__box--wide,
	.bb-active .zce-modal__box--sm,
	.bb-active .zce-modal--fullscreen .zce-modal__box--fullscreen {
		max-height: calc(100dvh - var(--bb-header-height, 60px) - 70px);
	}

	/* Prevent any drawer from visually overlapping BB bottom nav.
	   Bottom nav is ~70px. We push the drawer up by that amount. */
	.bb-active .zce-modal {
		padding-bottom: 70px;
		align-items: flex-end;
	}
}

/* On desktop: the library is a centred dialog, no BB nav interference */
@media (min-width: 640px) {
	.bb-active .zce-modal--fullscreen {
		top: var(--bb-header-height, 60px);  /* start below BB header */
		padding: 20px;
		align-items: center;
	}
}

/* ══════════════════════════════════════════════════════════════════
   9. FAB BUTTON — account for BB bottom nav on mobile if present
   BuddyBoss mobile nav sits at bottom (~60px tall)
   ══════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 600px) {
	.bb-active .zce-fab {
		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
	}

	.bb-active .bb-mobile-panel-wrapper ~ .zce-app .zce-fab,
	.bb-active .zce-fab {
		bottom: 76px; /* clear BB bottom nav */
	}
}

/* ══════════════════════════════════════════════════════════════════
   10. DARK MODE HARMONY
   BuddyBoss has its own dark mode body classes; sync them.
   ══════════════════════════════════════════════════════════════════ */
body.bb-dark-mode .zce-app:not(.dark) {
	--zce-bg:         #0f172a;
	--zce-surface:    #1e293b;
	--zce-surface-2:  #263344;
	--zce-border:     #334155;
	--zce-border-light:#2d3f52;
	--zce-text:       #f1f5f9;
	--zce-text-2:     #cbd5e1;
	--zce-muted:      #94a3b8;
	--zce-muted-light:#64748b;
}