/* ═══════════════════════════════════════════════════════════
   FoHi Steelers Custom Styles
   Fontana Steelers Football Program
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ─────────────────────────────── */
:root {
	--fohi-maroon: #800000;
	--fohi-dark-maroon: #5C0000;
	--fohi-white: #FFFFFF;
	--fohi-steel: #C0C0C0;
	--fohi-light-silver: #E8E8E8;
	--fohi-black: #1A1A1A;
	--fohi-dark-gray: #333333;
	--fohi-gold: #C5A55A;
	--fohi-success: #2D8A4E;
	--fohi-danger: #C0392B;
	--fohi-radius: 8px;
	--fohi-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	--fohi-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
	--fohi-transition: all 0.3s ease;
}

/* ── Global ────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

/* ── Header ────────────────────────────────────────────── */
.fohi-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: var(--fohi-transition);
}

.fohi-site-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.fohi-brand a { text-decoration: none !important; }

.fohi-header-actions .wp-block-button__link {
	transition: var(--fohi-transition);
}

.fohi-header-actions .wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* ── Hero Banner ───────────────────────────────────────── */
.fohi-hero-banner {
	position: relative;
	overflow: hidden;
}

.fohi-hero-banner .wp-block-cover__inner-container {
	max-width: 900px;
	margin: 0 auto;
}

.fohi-hero-banner h1 {
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* ── Quick Action Cards ────────────────────────────────── */
.fohi-action-card {
	transition: var(--fohi-transition);
	cursor: pointer;
}

.fohi-action-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--fohi-shadow-hover);
}

.fohi-action-card a {
	text-decoration: none;
}

.fohi-action-card-outline {
	transition: var(--fohi-transition);
	cursor: pointer;
}

.fohi-action-card-outline:hover {
	background-color: var(--fohi-maroon) !important;
	transform: translateY(-4px);
	box-shadow: var(--fohi-shadow-hover);
}

.fohi-action-card-outline:hover p,
.fohi-action-card-outline:hover a {
	color: var(--fohi-white) !important;
}

/* ── Announcement Cards ────────────────────────────────── */
.fohi-announcement-card {
	transition: var(--fohi-transition);
}

.fohi-announcement-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--fohi-shadow-hover);
}

.fohi-announcement-card h3 a {
	text-decoration: none;
	color: var(--fohi-black);
}

.fohi-announcement-card h3 a:hover {
	color: var(--fohi-maroon);
}

/* ── Score Cards ───────────────────────────────────────── */
.fohi-score-card {
	transition: var(--fohi-transition);
}

.fohi-score-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--fohi-shadow-hover);
}

.fohi-game-card {
	transition: var(--fohi-transition);
}

.fohi-game-card:hover {
	box-shadow: var(--fohi-shadow-hover);
}

/* ── Event Rows ────────────────────────────────────────── */
.fohi-event-row {
	transition: var(--fohi-transition);
}

.fohi-event-row:hover {
	background-color: var(--fohi-light-silver);
	border-radius: var(--fohi-radius);
}

/* ── Coach Cards ───────────────────────────────────────── */
.fohi-coach-card {
	transition: var(--fohi-transition);
	overflow: hidden;
}

.fohi-coach-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--fohi-shadow-hover);
}

.fohi-coach-card img {
	transition: transform 0.4s ease;
}

.fohi-coach-card:hover img {
	transform: scale(1.05);
}

/* ── Sponsor Section ───────────────────────────────────── */
.fohi-sponsor-logos img {
	filter: grayscale(100%);
	opacity: 0.7;
	transition: var(--fohi-transition);
}

.fohi-sponsor-logos img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

/* ── Gallery ───────────────────────────────────────────── */
.fohi-gallery-grid .wp-block-image {
	overflow: hidden;
	border-radius: var(--fohi-radius);
}

.fohi-gallery-grid .wp-block-image img {
	transition: transform 0.4s ease;
}

.fohi-gallery-grid .wp-block-image:hover img {
	transform: scale(1.08);
}

/* ── Player Portal ─────────────────────────────────────── */
.fohi-player-portal .fohi-portal-sections h3 {
	margin-bottom: 0.25rem;
}

.fohi-player-portal .fohi-portal-sections .wp-block-column {
	transition: var(--fohi-transition);
	padding: 1rem;
	border-radius: var(--fohi-radius);
}

.fohi-player-portal .fohi-portal-sections .wp-block-column:hover {
	background-color: var(--fohi-white);
	box-shadow: var(--fohi-shadow);
}

/* ── Emergency Banner ──────────────────────────────────── */
.fohi-emergency-banner {
	position: relative;
	z-index: 999;
}

.fohi-emergency-banner[data-dismissed="true"] {
	display: none;
}

.fohi-banner-dismiss {
	transition: var(--fohi-transition);
}

.fohi-banner-dismiss:hover {
	opacity: 0.7;
}

/* ── CTA Sections ──────────────────────────────────────── */
.fohi-cta-registration .wp-block-button__link {
	transition: var(--fohi-transition);
}

.fohi-cta-registration .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── Resource Links ────────────────────────────────────── */
.fohi-resource-list {
	list-style: none;
}

.fohi-resource-list li {
	position: relative;
	padding-left: 1rem;
}

.fohi-resource-list li::before {
	content: '›';
	position: absolute;
	left: 0;
	color: var(--fohi-maroon);
	font-weight: 700;
}

.fohi-resource-list a {
	text-decoration: none;
	transition: var(--fohi-transition);
}

.fohi-resource-list a:hover {
	color: var(--fohi-maroon);
	padding-left: 4px;
}

/* ── Footer ────────────────────────────────────────────── */
.fohi-site-footer a {
	color: var(--fohi-steel) !important;
	text-decoration: none;
	transition: var(--fohi-transition);
}

.fohi-site-footer a:hover {
	color: var(--fohi-gold) !important;
}

.fohi-footer-links {
	list-style: none;
}

/* ── 404 Page ──────────────────────────────────────────── */
.fohi-404 h1 {
	text-shadow: 2px 2px 0 var(--fohi-light-silver);
}

/* ── Sidebar Widgets ───────────────────────────────────── */
.fohi-sidebar-widget {
	transition: var(--fohi-transition);
}

.fohi-sidebar-widget:hover {
	box-shadow: var(--fohi-shadow);
}

/* ── Filter Buttons ────────────────────────────────────── */
.fohi-filter-btn {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	text-decoration: none;
	font-weight: 600;
	border-radius: 4px;
	transition: var(--fohi-transition);
}

.fohi-filter-btn.active,
.fohi-filter-btn:hover {
	background-color: var(--fohi-maroon);
	color: var(--fohi-white) !important;
}

/* ── Scroll Reveal Animation ───────────────────────────── */
.fohi-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.fohi-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ── Countdown Timer ───────────────────────────────────── */
.fohi-countdown-display {
	display: flex;
	justify-content: center;
	gap: 1rem;
}

.fohi-countdown-unit {
	text-align: center;
}

.fohi-countdown-unit .fohi-digit {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 2rem;
	font-weight: 800;
	color: var(--fohi-maroon);
	line-height: 1;
}

.fohi-countdown-unit .fohi-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	color: var(--fohi-dark-gray);
	letter-spacing: 1px;
}

/* ── Back to Top ───────────────────────────────────────── */
.fohi-back-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 44px;
	height: 44px;
	background: var(--fohi-maroon);
	color: var(--fohi-white);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: var(--fohi-transition);
	z-index: 900;
	box-shadow: var(--fohi-shadow);
}

.fohi-back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.fohi-back-to-top:hover {
	background: var(--fohi-dark-maroon);
	transform: translateY(-2px);
}

/* ── Utility Classes ───────────────────────────────────── */
.text-maroon { color: var(--fohi-maroon) !important; }
.bg-maroon { background-color: var(--fohi-maroon) !important; }
.text-gold { color: var(--fohi-gold) !important; }
.bg-gold { background-color: var(--fohi-gold) !important; }
.text-steel { color: var(--fohi-steel) !important; }
.bg-steel { background-color: var(--fohi-steel) !important; }
.text-white { color: var(--fohi-white) !important; }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ── Animations ────────────────────────────────────────── */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

.fohi-urgent { animation: pulse 2s ease-in-out infinite; }

/* ── Responsive: Tablet (768px) ────────────────────────── */
@media (max-width: 768px) {
	.fohi-header-inner {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.fohi-header-actions {
		display: none;
	}

	.fohi-hero-banner h1 {
		font-size: 2.5rem !important;
	}

	.fohi-hero-banner h2 {
		font-size: 1.25rem !important;
	}

	.fohi-quick-actions .wp-block-columns {
		flex-wrap: wrap;
	}

	.fohi-quick-actions .wp-block-column {
		flex-basis: 48% !important;
	}

	.fohi-site-footer .wp-block-columns {
		flex-wrap: wrap;
	}

	.fohi-site-footer .wp-block-column {
		flex-basis: 48% !important;
		margin-bottom: 1.5rem;
	}

	.fohi-countdown-unit .fohi-digit {
		font-size: 1.5rem;
	}
}

/* ── Responsive: Mobile (480px) ────────────────────────── */
@media (max-width: 480px) {
	.fohi-hero-banner {
		min-height: 50vh !important;
	}

	.fohi-hero-banner h1 {
		font-size: 2rem !important;
	}

	.fohi-quick-actions .wp-block-column {
		flex-basis: 100% !important;
	}

	.fohi-site-footer .wp-block-column {
		flex-basis: 100% !important;
	}

	.fohi-score-card h3 {
		font-size: 2rem !important;
	}
}

/* ── Print Styles ──────────────────────────────────────── */
@media print {
	.fohi-site-header,
	.fohi-site-footer,
	.fohi-emergency-banner,
	.fohi-back-to-top,
	.wp-block-button {
		display: none !important;
	}

	body {
		color: #000 !important;
		background: #fff !important;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #666;
	}
}