/* ==========================================================================
   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;
}


/* ==========================================================================
   Mega menu — colour only
   --------------------------------------------------------------------------
   An earlier version of this file also tried to restyle the mega panel layout
   (compact cards, panel width, thumbnail sizing). It made the menu WORSE:
   headlines wrapped one word per line and the post list collapsed. Twanna
   built these panels as Ruby/Elementor templates (NEWS = 4923, ZIZ TV = 4988)
   and the layout belongs in the template, not in CSS overrides fighting it.
   All layout rules were removed. Only colour is handled here.

   Measured greens/reds that Janelle asked to remove:
     #E23125  2px rule across the panel      -> #242424
     #188A1B  nested-tab label text          -> #111
     #0C8B3D  "View All" button text         -> #111
     green tab HOVER/ACTIVE background       -> light ZIZ yellow
   Yellow is used as a background only; #111 on it stays well past 4.5:1.
   ========================================================================== */

/* the red horizontal rule */
#site-header .mega-dropdown .elementor-element {
	border-top-color: #242424 !important;
}

/* tab labels — text AND the green hover/active background */
#site-header .mega-dropdown .e-n-tab-title,
#site-header .mega-dropdown .e-n-tab-title-text {
	color: #111 !important;
}

#site-header .mega-dropdown .e-n-tab-title:hover,
#site-header .mega-dropdown .e-n-tab-title:focus-visible {
	background: rgba(245, 197, 24, .25) !important;
	color: #111 !important;
}

#site-header .mega-dropdown .e-n-tab-title[aria-selected="true"],
#site-header .mega-dropdown .e-n-tab-title.e-active {
	background: #f5c518 !important;
	color: #111 !important;
}

#site-header .mega-dropdown .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text,
#site-header .mega-dropdown .e-n-tab-title:hover .e-n-tab-title-text {
	color: #111 !important;
}

/* "View All" buttons */
#site-header .mega-dropdown .elementor-button {
	color: #111 !important;
}

#site-header .mega-dropdown .elementor-button:hover {
	background: #f5c518 !important;
	color: #111 !important;
}

/* link hover across dropdowns */
#site-header .mega-dropdown a:hover,
#site-header .sub-menu > .menu-item a:hover {
	background: rgba(245, 197, 24, .25) !important;
	color: #111 !important;
}

/* --------------------------------------------------------------------------
   Mega panel width — stretch across the menu
   --------------------------------------------------------------------------
   Foxiz's "Section Width" field is blank, which its own help text says means
   full width. It does not behave that way: the panel is position:absolute and
   its containing block was the menu ITEM, so it inherited that item's width.
   Measured at 1382px viewport:

     NEWS      item  76px  ->  panel 289px
     ZIZ TV    item  76px  ->  panel 374px
     ZIZ RADIO item 101px  ->  panel 334px

   `.navbar-inner` is already position:relative and spans the header content
   area, so making the menu items static lets the panel anchor there instead.
   All three now span 1092px, aligned to the navbar.

   This is width ONLY. An earlier attempt also restyled the cards inside and
   wrecked Twanna's layout — headlines wrapped one word per line. The card
   design belongs to her Ruby templates (NEWS 4923, ZIZ TV 4988) and is left
   completely alone here. Verified after this rule: 18 post cards intact,
   thumbnails at their natural 260x156.

   Desktop only — below 1025px Foxiz swaps to the mobile drawer, which has its
   own markup and must not be touched by this.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {

	#site-header .main-menu > .menu-item {
		position: static !important;
	}

	#site-header .main-menu > .menu-item > .mega-dropdown.is-mega-template {
		left: 0 !important;
		right: auto !important;
		width: 100% !important;
	}
}

/* --------------------------------------------------------------------------
   No underlines in the menus
   --------------------------------------------------------------------------
   The bar under a hovered top-level item is `.menu-item > a > span::after` —
   a 3px block the width of the label. Measured, because the obvious guess was
   wrong: `a::after` is a separate 12.5x19.2px box holding the dropdown caret,
   and hiding that would strip every ▾ arrow from the menu.

   Only the HOVER state is suppressed. If the same bar marks the current page,
   that still shows.
   -------------------------------------------------------------------------- */

#site-header .main-menu > .menu-item > a:hover > span::after,
#site-header .main-menu > .menu-item:hover > a > span::after {
	background: transparent !important;
	background-image: none !important;
	opacity: 0 !important;
}

#site-header .mega-dropdown a,
#site-header .mega-dropdown a:hover,
#site-header .mega-dropdown .entry-title,
#site-header .mega-dropdown .entry-title:hover,
#site-header .sub-menu a,
#site-header .sub-menu a:hover {
	text-decoration: none !important;
	background-image: none !important;   /* Foxiz draws its underline as a gradient */
}