/**
 * Date bar — date display + ad banner below the header.
 *
 * @package Hamechadesh
 */

/* ==========================================================================
   Date Bar Section
   ========================================================================== */

.hm-date-bar {
	padding-block-start: 15px;
}

.hm-date-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* === Divider Line === */

.hm-date-bar__divider {
	margin-block-start: 15px;
	height: 1.2px;
	background-color: var(--hm-color-primary);
	opacity: 0.15;
}

/* ==========================================================================
   Date (right side — always visible)
   ========================================================================== */

.hm-date-bar__date {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.hm-date-bar__dot {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background-color: var(--hm-color-accent);
	flex-shrink: 0;
}

.hm-date-bar__date-text {
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 16px;
	line-height: 22px;
	color: var(--hm-color-primary);
	white-space: nowrap;
}

.hm-date-bar__date-sep {
	padding-inline: 12px;
}

/* ==========================================================================
   Ad Banner (left side — desktop only)
   ========================================================================== */

.hm-date-bar__banner {
	display: none;
}

.hm-date-bar__banner-sep {
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 16px;
	line-height: 22px;
	color: var(--hm-color-primary);
	flex-shrink: 0;
}

/* === Skeleton loader — gray bar via pseudo-element === */

.hm-date-bar__banner--loading::after {
	content: '';
	width: 350px;
	max-width: 50vw;
	height: 14px;
	border-radius: 4px;
	background-color: rgba(33, 33, 33, 0.12);
}

/* While loading: hide ad content (everything except sep) */
.hm-date-bar__banner--loading > :not(.hm-date-bar__banner-sep) {
	display: none !important;
}

/* Force all ad content (injected by external JS) into design style */
.hm-date-bar__banner :where(div, a, span, p, ins) {
	display: inline !important;
	white-space: nowrap !important;
	font-family: var(--hm-font-primary) !important;
	font-weight: 300 !important;
	font-size: 16px !important;
	line-height: 22px !important;
	color: var(--hm-color-primary) !important;
	text-decoration: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	height: auto !important;
}

/* ==========================================================================
   Desktop — show banner
   ========================================================================== */

/* Mobile — match header/footer side padding */
@media (max-width: 767px) {
	.hm-date-bar__inner,
	.hm-date-bar__divider {
		margin-inline: 10px;
	}
}

@media (min-width: 1024px) {
	.hm-date-bar__banner {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 6px;
		opacity: 0.5;
		flex: 1;
		min-width: 0;
		overflow: hidden;
	}
}