/* ==========================================================================
   Top banner — appears above the main nav, sticky together with .site-header
   ========================================================================== */

.top-banner {
	background: linear-gradient(90deg, #fda22f 0%, #f53838 100%);
	width: 100%;
}

.top-banner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.top-banner__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	animation: top-banner-shake 5s ease-in-out infinite;
}

@keyframes top-banner-shake {
	0%,  12%, 100% { transform: rotate(0deg); }
	2%             { transform: rotate(-16deg); }
	4%             { transform: rotate(16deg); }
	6%             { transform: rotate(-12deg); }
	8%             { transform: rotate(12deg); }
	10%            { transform: rotate(-6deg); }
}

.top-banner__text {
	margin: 0;
	color: #fff;
	font-family: var(--font-heading);
	font-size: var(--nav-fsize);
	font-weight: var(--nav-fw-medium);
	line-height: var(--nav-lh);
	text-align: center;
}

.top-banner__btn {
	display: inline-flex;
	align-items: center;
	padding: 5px 16px;
	border: 1.5px solid #fff;
	border-radius: var(--btn-radius);
	color: #fff;
	font-family: var(--font-heading);
	font-size: var(--nav-fsize-sm);
	font-weight: var(--nav-fw-medium);
	line-height: var(--nav-lh);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}

.top-banner__btn:hover {
	background: #fff;
	color: #f53838;
}

.top-banner__content {
	display: flex;
	align-items: center;
	gap: 8px;
}

@media (max-width: 768px) {
	.top-banner__inner {
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.top-banner__icon {
		display: none;
	}

	.top-banner__text {
		font-size: var(--nav-fsize-sm);
	}

	.top-banner__btn {
		font-size: var(--nav-fsize-xs);
		padding: 4px 12px;
	}
}