/* wp-koumbit-noticebar — frontend notice bar styles */

/* -------------------------------------------------------------------------
   Type colour tokens — all meet 4.5:1 contrast with white text (WCAG AA)
   ------------------------------------------------------------------------- */
:root {
	--wpk-nb-info-bg:    #0a6ebd;   /* blue  — 4.6:1 with #fff */
	--wpk-nb-success-bg: #1a7a1a;   /* green — 5.3:1 with #fff */
	--wpk-nb-warning-bg: #8a5700;   /* amber — 4.6:1 with #fff */
	--wpk-nb-error-bg:   #b91c1c;   /* red   — 4.8:1 with #fff */
	--wpk-nb-info-color:    #fff;
	--wpk-nb-success-color: #fff;
	--wpk-nb-warning-color: #fff;
	--wpk-nb-error-color:   #fff;
}

/* -------------------------------------------------------------------------
   Bar base
   ------------------------------------------------------------------------- */
.wpk-noticebar {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	background-color: var( --wpk-noticebar-bg, #333 );
	color: var( --wpk-noticebar-color, #fff );
	z-index: 9999;
	position: relative;
}

/* Type overrides — CSS custom properties on the element are ignored for
   named types; the class values take precedence via specificity. */
.wpk-noticebar--info {
	background-color: var( --wpk-nb-info-bg );
	color: var( --wpk-nb-info-color );
}

.wpk-noticebar--success {
	background-color: var( --wpk-nb-success-bg );
	color: var( --wpk-nb-success-color );
}

.wpk-noticebar--warning {
	background-color: var( --wpk-nb-warning-bg );
	color: var( --wpk-nb-warning-color );
}

.wpk-noticebar--error {
	background-color: var( --wpk-nb-error-bg );
	color: var( --wpk-nb-error-color );
}

/* Custom type — reads CSS custom properties set inline by the renderer */
.wpk-noticebar--custom {
	background-color: var( --wpk-noticebar-bg );
	color: var( --wpk-noticebar-color );
}

/* -------------------------------------------------------------------------
   Sticky positioning
   ------------------------------------------------------------------------- */
.wpk-noticebar--sticky.wpk-noticebar--top {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.wpk-noticebar--sticky.wpk-noticebar--bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

/* -------------------------------------------------------------------------
   Inner layout
   ------------------------------------------------------------------------- */
.wpk-noticebar-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.625rem 1rem;
	position: relative;
}

.wpk-noticebar-message {
	flex: 1 1 auto;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   CTA link — pill button that contrasts with the bar background
   ------------------------------------------------------------------------- */
.wpk-noticebar-cta {
	display: inline-block;
	flex-shrink: 0;
	padding: 0.3em 0.9em;
	border: 2px solid currentColor;
	border-radius: 20px;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	color: inherit;
	background: rgba( 255, 255, 255, 0.15 );
	white-space: nowrap;
}

.wpk-noticebar-cta:hover,
.wpk-noticebar-cta:focus-visible {
	background: rgba( 255, 255, 255, 0.3 );
}

.wpk-noticebar-cta:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Close button
   ------------------------------------------------------------------------- */
.wpk-noticebar-close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: auto;
	padding: 0;
	background: rgba( 255, 255, 255, 0.15 );
	border: none;
	border-radius: 50%;
	color: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.wpk-noticebar-close:hover {
	background: rgba( 255, 255, 255, 0.3 );
}

.wpk-noticebar-close:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Slide-in animations (guarded by prefers-reduced-motion)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.wpk-noticebar--top.wpk-noticebar--injected {
		animation: wpk-slidein-top 0.3s ease forwards;
	}

	.wpk-noticebar--bottom.wpk-noticebar--injected {
		animation: wpk-slidein-bottom 0.3s ease forwards;
	}

	@keyframes wpk-slidein-top {
		from { transform: translateY( -100% ); }
		to   { transform: translateY( 0 ); }
	}

	@keyframes wpk-slidein-bottom {
		from { transform: translateY( 100% ); }
		to   { transform: translateY( 0 ); }
	}

	/* Slide-out on dismiss */
	.wpk-noticebar--hiding.wpk-noticebar--top {
		animation: wpk-slideout-top 0.25s ease forwards;
	}

	.wpk-noticebar--hiding.wpk-noticebar--bottom {
		animation: wpk-slideout-bottom 0.25s ease forwards;
	}

	@keyframes wpk-slideout-top {
		from { transform: translateY( 0 ); }
		to   { transform: translateY( -100% ); }
	}

	@keyframes wpk-slideout-bottom {
		from { transform: translateY( 0 ); }
		to   { transform: translateY( 100% ); }
	}
}

/* -------------------------------------------------------------------------
   Hidden state (set by JS after dismissal)
   ------------------------------------------------------------------------- */
.wpk-noticebar[hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Block editor placeholder preview
   ------------------------------------------------------------------------- */
.wpk-block-preview {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 24px;
	background: #f6f7f7;
	border: 2px dashed #c3c4c7;
	border-radius: 4px;
	font-weight: 500;
	color: #1d2327;
}

/* -------------------------------------------------------------------------
   Responsive — tighten padding on small screens
   ------------------------------------------------------------------------- */
@media ( max-width: 480px ) {
	.wpk-noticebar-inner {
		padding: 0.5rem 0.75rem;
		gap: 0.4rem 0.75rem;
	}

	.wpk-noticebar-message {
		font-size: 0.875rem;
	}
}