/* Portal live top unit — behaviour-only CSS; the look lives in Elementor. See portal-live.php. */

/* The portal header location (it carries .kbpl-live) is the sticky unit. */
.elementor-location-header:has(.kbpl-live),
.elementor-location-header.kbpl-sticky {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
/* Below 600px WordPress's toolbar scrolls away (position:absolute), so pin to the very top. */
@media (max-width: 600px) {
	.elementor-location-header:has(.kbpl-live),
	.elementor-location-header.kbpl-sticky { top: 0; }
}
.elementor-location-header:has(.kbpl-live) .kb-weather-chip { display: none; }

/* Fixed-width digits so the ticking clock never reflows the bar. */
.kbpl-clock, .kbpl-wx { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kbpl-date, .kbpl-hdate { white-space: nowrap; }

/* The ticker is members' news: visitors who are not signed in never see its row. */
body:not(.logged-in) .kbpl-ticker-row,
body:not(.logged-in) .kbpl-member-only { display: none !important; }

/* Bell badge: hidden until there is something new. */
.kbpl-bell-count:empty { display: none; }

/* The settings icon lands on the members-area notification rules, below the sticky header. */
#kibbutz-notification-settings { scroll-margin-top: 140px; }

/* News ticker: one line, clipped, the track loops right-ward (RTL reading order). */
.kbpl-ticker {
	display: block;
	overflow: hidden; /* never scrollable: no scrollbar, ever (Kelly) */
	scrollbar-width: none;
	white-space: nowrap;
	min-height: 1.5em;
	-webkit-mask-image: linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	mask-image: linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.kbpl-ticker::-webkit-scrollbar { display: none; }
.kbpl-track { display: inline-flex; width: max-content; }
.kbpl-set { display: inline-flex; }
.kbpl-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-inline: 14px;
	color: inherit;
	text-decoration: none;
}
.kbpl-item + .kbpl-item { border-inline-start: 1px solid rgba(46, 125, 50, .25); }
a.kbpl-item:hover, a.kbpl-item:focus-visible { text-decoration: underline; }
.kbpl-board {
	font-size: .8em;
	font-weight: 600;
	color: #2e7d32;
	background: rgba(46, 125, 50, .1);
	border-radius: 99px;
	padding: 1px 8px;
}
.kbpl-ticker--moving .kbpl-track { animation: kbpl-marquee 40s linear infinite; }
.kbpl-ticker--moving:hover .kbpl-track,
.kbpl-ticker--moving:focus-within .kbpl-track { animation-play-state: paused; }
@keyframes kbpl-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
	.kbpl-ticker { -webkit-mask-image: none; mask-image: none; }
	.kbpl-ticker--moving .kbpl-track { animation: none; }
	.portal-tile-live, .portal-tile-live:hover, .portal-tile-live:active { transition: none !important; transform: none !important; }
}

/* Under ~400px the tile grid drops to one column of icon-beside-text rows
   (Elementor's smallest breakpoint is 767px, so this can't live in the kit). */
@media (max-width: 399px) {
	.portal-grid:has(.portal-tile-live) { grid-template-columns: 1fr !important; }
	.portal-grid .portal-tile-live {
		flex-direction: row !important;
		align-items: center !important;
		text-align: start !important;
		gap: 14px !important;
		padding: 12px 14px !important;
	}
}