/* ==========================================================================
   ZBC Header Enhancements
   --------------------------------------------------------------------------
   1. Top utility bar (date / clock / weather / socials / action buttons)
   2. Single-row header (logo aligned with the menu) - CSS ONLY, no DOM moves
   3. Trending ticker restyle

   Measured against the live site (2026-07):
     container      1280px
     logo             120px
     menu (10 items) 1041px
     gap               28px
     => 1189px used, ~39px spare. Menu does not wrap.

   Below 1200px the menu no longer fits, so we hand back to Foxiz's stock
   stacked/mobile header rather than letting it wrap mid-menu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOP UTILITY BAR
   -------------------------------------------------------------------------- */

.zbc-topbar {
	background: #fff;
	border-bottom: 1px solid #e9e9e9;
	font-size: 13px;
	line-height: 1.4;
	position: relative;
	z-index: 2;
}

/* Positioning context for the native header groups lifted into this bar
   (see the single-row section below). */
#site-header {
	position: relative;
}

.zbc-topbar__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.zbc-topbar__left {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #444;
	font-weight: 600;
	min-width: 0;
}

.zbc-topbar__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #f5c518;
	flex: 0 0 auto;
}

.zbc-topbar__sep {
	color: #ccc;
}

/* Reserve space so the clock doesn't cause a layout shift on first tick. */
.zbc-topbar__time {
	min-width: 7ch;
	display: inline-block;
	font-variant-numeric: tabular-nums;
}

.zbc-topbar__right {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* --- circular social icons --- */

.zbc-topbar__socials {
	display: flex;
	align-items: center;
	gap: 6px;
}

.zbc-soc {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #f2f2f2;
	color: #333;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	text-decoration: none;
	transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.zbc-soc:hover,
.zbc-soc:focus-visible {
	transform: translateY(-2px);
	background: #111;
	color: #fff;
}

/* Brand tints on hover */
.zbc-soc--facebook:hover  { background: #1877f2; color: #fff; }
.zbc-soc--youtube:hover   { background: #ff0000; color: #fff; }
.zbc-soc--instagram:hover { background: #e1306c; color: #fff; }
.zbc-soc--whatsapp:hover  { background: #25d366; color: #fff; }

/* --- Listen / Watch TV pills --- */

.zbc-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 14px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	background: #fff;
	border: 1px solid #ddd;
	color: #111;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.zbc-pill:hover,
.zbc-pill:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
}

.zbc-pill.is-primary {
	background: #f5c518;
	border-color: #f5c518;
	color: #111;
}

.zbc-pill.is-primary:hover {
	background: #e5b70f;
}

.zbc-pill__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e02b2b;
	flex: 0 0 auto;
}

/* Phase 2: when the YouTube channel is actually live, PHP adds .is-live and
   the dot pulses. Respects reduced-motion preferences. */
.zbc-pill.is-live .zbc-pill__dot {
	animation: zbc-pulse 1.2s ease-in-out infinite;
}

@keyframes zbc-pulse {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: .35; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
	.zbc-pill.is-live .zbc-pill__dot { animation: none; }
	.zbc-soc,
	.zbc-pill { transition: none; }
}

/* Accessible hiding for icon labels (matches WP core convention). */
.zbc-topbar .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* --------------------------------------------------------------------------
   2. SINGLE-ROW HEADER  (desktop >= 1200px only)
   --------------------------------------------------------------------------
   Foxiz renders `.logo-sec` and `#navbar-outer` as siblings inside
   `#site-header`. We turn that parent into a flex row. No DOM manipulation,
   so if the markup changes in a Foxiz update this simply stops applying and
   the stock stacked header returns.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {

	#site-header {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 28px;
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 20px;
	}

	/* Foxiz's privacy bar lives in here; keep it out of the flex flow. */
	#site-header > aside {
		position: fixed;
	}

	#site-header .logo-sec {
		flex: 0 0 auto;
		padding: 0;
		background: transparent;
	}

	#site-header .logo-sec-inner {
		max-width: none;
		width: auto;
		padding: 0;
	}

	/* --------------------------------------------------------------------
	   The native social list and dark-mode toggle are MOVED into the top bar
	   by zbc-header.js (see that file for why, and for the re-binding).

	   An earlier attempt positioned them absolutely instead of moving them.
	   That failed: the top bar is an earlier sibling that paints over the
	   area, so the controls occupied layout space but were invisible —
	   confirmed with elementFromPoint returning .zbc-topbar__right over them.
	   Moving them is the reliable fix.

	   Their now-empty original containers are hidden.
	   -------------------------------------------------------------------- */
	#site-header .logo-sec-left,
	#site-header .logo-sec-right {
		display: none;
	}

	/* The theme's own social list is used instead of the plugin's duplicate
	   set (the theme list also includes RSS). */
	#zbc-topbar .zbc-topbar__socials {
		display: none;
	}

	#site-header .logo-sec-center {
		width: auto;
		flex: 0 0 auto;
	}

	#site-header #navbar-outer {
		flex: 1 1 auto;
		min-width: 0;
	}

	#site-header .navbar-wrap {
		background: transparent;
	}

	#site-header .navbar-wrap .rb-container {
		max-width: none;
		padding: 0;
	}
}


/* --------------------------------------------------------------------------
   1b. TOP BAR ON PHONES
   --------------------------------------------------------------------------
   Without this the top bar caused HORIZONTAL PAGE SCROLL on phones:
   `.zbc-topbar__right` (socials + Listen/Watch TV + dark toggle) is a
   non-wrapping flex row ~434px wide, which overflowed a 384px viewport and
   pushed the whole document to 454px. Verified in a 390px harness.

   Fix: stack the bar into two centred rows and tighten the controls, which
   also brings the top bar down from 117px to 86px so it eats less of a
   phone screen.

   Tablet (762px) was already fine and needs no changes.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.zbc-topbar {
		font-size: 12px;
	}

	.zbc-topbar__inner {
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding: 6px 12px;
	}

	.zbc-topbar__left,
	.zbc-topbar__right {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
		gap: 8px;
		margin-right: 0;
		padding-right: 0;
	}

	/* Tighten the controls so they sit on one line rather than three. */
	.zbc-topbar .zbc-pill {
		height: 28px;
		padding: 0 11px;
		font-size: 11.5px;
	}

	.zbc-topbar .header-social-list {
		gap: 8px;
	}

	.zbc-topbar .header-social-list a {
		font-size: 14px;
	}

	.zbc-topbar .dark-mode-toggle-wrap {
		transform: scale(.9);
	}
}


/* --------------------------------------------------------------------------
   1c. MOBILE — remove the duplicate menu strip under the logo
   --------------------------------------------------------------------------
   Foxiz renders a horizontal "quick view" strip beneath the mobile logo. Once
   it was pointed at the primary menu it simply duplicated the hamburger, so
   the menu location is now unassigned in Settings → Menus.

   This rule is a safety net in case the theme still outputs an empty strip
   container, and it reclaims ~43px of vertical space on phones.
   -------------------------------------------------------------------------- */

.mobile-qview {
	display: none;
}


/* --------------------------------------------------------------------------
   2b. NATIVE CONTROLS RELOCATED INTO THE TOP BAR
   Applies at all widths, since the JS moves them regardless of breakpoint.
   -------------------------------------------------------------------------- */

#zbc-topbar .header-social-list {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

#zbc-topbar .header-social-list a {
	color: #111;
	font-size: 15px;
	line-height: 1;
	transition: opacity .18s ease, transform .18s ease;
}

#zbc-topbar .header-social-list a:hover {
	opacity: .65;
	transform: translateY(-1px);
}

#zbc-topbar .dark-mode-toggle-wrap {
	display: flex;
	align-items: center;
	cursor: pointer;
}

/* Search, relocated here because it does not fit the menu row (see JS note). */
#zbc-topbar .w-header-search {
	display: flex;
	align-items: center;
}

#zbc-topbar .w-header-search a,
#zbc-topbar .w-header-search .search-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #f2f2f2;
	color: #111;
	font-size: 14px;
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

#zbc-topbar .w-header-search a:hover,
#zbc-topbar .w-header-search .search-trigger:hover {
	background: #111;
	color: #fff;
	transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   3. BREAKING NEWS / TRENDING TICKER
   --------------------------------------------------------------------------
   Selectors verified against the live DOM (2026-07):
     .block-breaking-news      ticker wrapper (an Elementor widget on the page,
                               NOT part of #site-header)
     .breaking-news-heading    the label pill

   The label TEXT ("Breaking News" vs "TRENDING") is a Foxiz widget setting,
   not CSS — change it on the widget in Elementor.
   -------------------------------------------------------------------------- */

.block-breaking-news {
	background: #f7f7f7;
	border-radius: 6px;
}

/* Flatter, lighter label to match the mockup. Scoped to the ticker so it
   cannot leak into other headings. */
.block-breaking-news .breaking-news-heading {
	border-radius: 4px;
	font-weight: 800;
	letter-spacing: .04em;
}

/* Subtle lift on the headline links as they scroll past. */
.block-breaking-news a {
	transition: color .18s ease;
}