/**
 * Nucor Ticker Bar Styles
 *
 * Complete stylesheet for the ticker bar module including:
 * - Ticker bar, banner, and popup styles
 * - Animations and transitions
 * - Responsive design
 * - Accessibility features
 * - Print styles
 *
 * @package Nucor_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Variables (set dynamically via PHP)
   ========================================================================== */
:root {
	--nucor-ticker-bg-color: #333333;
	--nucor-ticker-text-color: #ffffff;
	--nucor-ticker-font-size: 16px;
	--nucor-ticker-height: 50px;
	--nucor-ticker-z-index: 1000;
	--nucor-ticker-speed: 20s;
}

/* ==========================================================================
   Base Ticker Bar Styles
   ========================================================================== */

.nucor-ticker-bar {
	position: relative;
	left: 0;
	right: 0;
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
	background-color: var(--nucor-ticker-bg-color);
	color: var(--nucor-ticker-text-color);
	font-size: var(--nucor-ticker-font-size);
	height: var(--nucor-ticker-height);
	z-index: var(--nucor-ticker-z-index);
}

.nucor-ticker-position-top {
	/* Positioned after header, before content via JS */
}

.nucor-ticker-position-bottom {
	/* Positioned before footer via JS */
}

.nucor-ticker-wrapper {
	flex: 1;
	overflow: hidden;
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
}

/* ==========================================================================
   Ticker Mode (Scrolling)
   ========================================================================== */

.nucor-ticker-mode-ticker .nucor-ticker-content {
	display: inline-block;
	white-space: nowrap;
	padding-left: 100%;
	animation: nucor-ticker-scroll var(--nucor-ticker-speed) linear infinite;
}

@keyframes nucor-ticker-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

.nucor-ticker-mode-ticker.paused .nucor-ticker-content,
.nucor-ticker-mode-ticker:hover .nucor-ticker-content[data-pause="true"] {
	animation-play-state: paused;
}

/* ==========================================================================
   Banner Mode (Static)
   ========================================================================== */

.nucor-ticker-mode-banner .nucor-ticker-content {
	text-align: center;
	width: 100%;
	padding: 0 60px;
}

/* ==========================================================================
   Control Buttons
   ========================================================================== */

.nucor-ticker-pause,
.nucor-ticker-close {
	background: transparent;
	border: none;
	color: inherit;
	font-size: 20px;
	padding: 10px 15px;
	cursor: pointer;
	transition: opacity 0.2s;
	margin-right: 10px;
	flex-shrink: 0;
}

.nucor-ticker-pause:hover,
.nucor-ticker-close:hover,
.nucor-ticker-pause:focus,
.nucor-ticker-close:focus {
	opacity: 0.7;
	outline: none !important;
	outline-offset: 2px;
}

/* ==========================================================================
   Popup Styles
   ========================================================================== */

.nucor-ticker-popup {
	position: fixed;
	z-index: calc(var(--nucor-ticker-z-index) + 1);
	padding: 20px 50px 20px 20px;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	max-width: 500px;
	min-width: 300px;
	background-color: var(--nucor-ticker-bg-color);
	color: var(--nucor-ticker-text-color);
	font-size: var(--nucor-ticker-font-size);
}

.nucor-ticker-popup-top-center {
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
}

.nucor-ticker-popup-bottom-center {
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}

.nucor-ticker-popup-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.nucor-ticker-popup-top-right {
	top: 20px;
	right: 20px;
}

.nucor-ticker-popup-bottom-right {
	bottom: 20px;
	right: 20px;
}

.nucor-popup-content {
	line-height: 1.6;
}

.nucor-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: transparent;
	border: none;
	color: inherit;
	font-size: 28px;
	cursor: pointer;
	line-height: 1;
	padding: 5px;
	transition: opacity 0.2s;
}

.nucor-popup-close:hover,
.nucor-popup-close:focus {
	opacity: 0.7;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.nucor-ticker-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99998;
}

/* ==========================================================================
   Popup Animations
   ========================================================================== */

.nucor-ticker-animation-fade {
	animation: nucor-fade-in 0.3s ease;
}

@keyframes nucor-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.nucor-ticker-animation-slide-down {
	animation: nucor-slide-down 0.4s ease;
}

@keyframes nucor-slide-down {
	from {
		transform: translateX(-50%) translateY(-100%);
	}
	to {
		transform: translateX(-50%) translateY(0);
	}
}

.nucor-ticker-animation-slide-up {
	animation: nucor-slide-up 0.4s ease;
}

@keyframes nucor-slide-up {
	from {
		transform: translateX(-50%) translateY(100%);
	}
	to {
		transform: translateX(-50%) translateY(0);
	}
}

.nucor-ticker-animation-bounce {
	animation: nucor-bounce 0.6s ease;
}

@keyframes nucor-bounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateX(-50%) translateY(0);
	}
	40% {
		transform: translateX(-50%) translateY(-30px);
	}
	60% {
		transform: translateX(-50%) translateY(-15px);
	}
}

/* ==========================================================================
   Help Button
   ========================================================================== */

.nucor-ticker-help-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #0073aa;
	color: #fff;
	border: none;
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	z-index: 99997;
	transition: all 0.3s;
}

.nucor-ticker-help-btn:hover,
.nucor-ticker-help-btn:focus {
	background: #005177;
	transform: scale(1.1);
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* ==========================================================================
   Help Modal
   ========================================================================== */

.nucor-ticker-help-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
	max-width: 600px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	z-index: 999999;
}

.nucor-help-modal-content h2 {
	margin-top: 0;
	color: #333;
}

.nucor-help-modal-content h3 {
	color: #0073aa;
	margin-top: 20px;
}

.nucor-help-modal-content p,
.nucor-help-modal-content li {
	color: #666;
	line-height: 1.6;
}

.nucor-help-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: transparent;
	border: none;
	font-size: 32px;
	cursor: pointer;
	color: #999;
	line-height: 1;
	padding: 5px;
}

.nucor-help-modal-close:hover,
.nucor-help-modal-close:focus {
	color: #333;
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

.nucor-ticker-help-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 999998;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
	.nucor-ticker-bar {
		font-size: 14px !important;
	}

	.nucor-ticker-mode-banner .nucor-ticker-content {
		padding: 0 40px;
	}

	.nucor-ticker-popup {
		max-width: 90%;
		min-width: auto;
		left: 5% !important;
		right: 5% !important;
		transform: none !important;
	}

	.nucor-ticker-popup-center {
		top: 50%;
		left: 5% !important;
		transform: translateY(-50%) !important;
	}

	.nucor-ticker-help-btn {
		width: 45px;
		height: 45px;
		font-size: 20px;
	}
}

/* ==========================================================================
   Accessibility - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.nucor-ticker-content {
		animation: none !important;
	}

	.nucor-ticker-popup {
		animation: none !important;
	}

	.nucor-ticker-bar,
	.nucor-ticker-help-btn {
		transition: none !important;
	}
}

/* ==========================================================================
   Print Styles - Hide ticker on print
   ========================================================================== */

@media print {
	.nucor-ticker-bar,
	.nucor-ticker-popup,
	.nucor-ticker-help-btn,
	.nucor-ticker-popup-overlay,
	.nucor-ticker-help-overlay,
	.nucor-ticker-help-modal {
		display: none !important;
	}
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
	.nucor-ticker-bar,
	.nucor-ticker-popup {
		border: 2px solid currentColor;
	}
}