/**
 * PunjabiTime News — Breaking ticker (moved below the category menu) styling.
 *
 * Additive & safe, loaded via the Novamira sandbox loader AFTER all other CSS.
 * Pairs with punjabitime-breaking-move.js, which moves the existing
 * .pt-breaking element to directly below .pt-primary-nav and injects the
 * red/green blinking dot indicator inside the BREAKING label.
 *
 * Provides:
 *   - clean modern look in light + dark mode,
 *   - subtle (non-annoying) red + green blinking dots near "BREAKING",
 *   - readable ticker, lightweight CSS-only animation,
 *   - mobile-friendly height, does not cover content,
 *   - no conflict with the WP admin bar (ticker is in normal flow, not fixed).
 *
 * Changes NO ticker content, posts, settings, or AdSense. Reversible: disable
 * the loader (pt-phase1-final.php) / delete this file.
 */

/* The ticker now lives below the menu; give it a subtle top/bottom hairline so
 * it reads as its own band, in normal document flow (admin-bar safe). */
.pt-breaking.pt-breaking--belowmenu {
	position: relative;
	z-index: 5;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Keep it readable + compact. */
.pt-breaking--belowmenu .pt-breaking__inner {
	min-height: 36px;
	gap: 12px;
}

.pt-breaking--belowmenu .pt-breaking__label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* ---- Blinking red/green dot indicator ---- */
.pt-breaking__dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.pt-breaking__dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	line-height: 0;
}

.pt-breaking__dot--red {
	background: #e0322f;
	box-shadow: 0 0 0 0 rgba(224, 50, 47, 0.55);
	animation: pt-breaking-blink 1.8s ease-in-out infinite;
}

.pt-breaking__dot--green {
	background: #21b34a;
	box-shadow: 0 0 0 0 rgba(33, 179, 74, 0.55);
	/* Offset so the two dots alternate gently rather than pulse in unison. */
	animation: pt-breaking-blink 1.8s ease-in-out infinite;
	animation-delay: 0.9s;
}

@keyframes pt-breaking-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

/* Respect reduced-motion: no blinking, just steady dots. */
@media (prefers-reduced-motion: reduce) {
	.pt-breaking__dot--red,
	.pt-breaking__dot--green {
		animation: none;
		opacity: 1;
	}
}

/* ---- Dark mode: keep the band crisp and legible ---- */
html.pt-dark-mode .pt-breaking.pt-breaking--belowmenu {
	background: #14181e;
	border-top-color: rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html.pt-dark-mode .pt-breaking--belowmenu .pt-breaking__track a {
	color: #e8eaed;
}

html.pt-dark-mode .pt-breaking--belowmenu .pt-breaking__track a:hover {
	color: var(--pt-gold, #d4af37);
}

/* ---- Mobile: readable, not too tall ---- */
@media (max-width: 820px) {
	.pt-breaking--belowmenu .pt-breaking__inner {
		min-height: 32px;
	}
	.pt-breaking--belowmenu .pt-breaking__label {
		font-size: 10px;
		padding: 3px 6px;
	}
	.pt-breaking--belowmenu .pt-breaking__track {
		font-size: 11px;
	}
	.pt-breaking__dot {
		width: 6px;
		height: 6px;
	}
}