/* =====================================================================
   EOCMS Frontend Stylesheet — implements docs/02-design-system.md
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500;700&family=Inter:wght@400;500;600&family=Montserrat:wght@600;700&display=swap');

:root {
	/* Primary */
	--eocms-red: #C1121F;
	--eocms-black: #111111;
	--eocms-white: #FFFFFF;

	/* Secondary */
	--eocms-gold: #D4AF37;
	--eocms-grey: #5F6368;
	--eocms-light-grey: #F5F5F5;

	/* Accent */
	--eocms-blue: #00B8FF;
	--eocms-success: #00A651;
	--eocms-warning: #FF9800;
	--eocms-error: #D32F2F;

	/* Type */
	--eocms-font-heading: 'Bebas Neue', 'Oswald', sans-serif;
	--eocms-font-body: 'Inter', system-ui, sans-serif;
	--eocms-font-numbers: 'Montserrat', monospace;

	/* Structure */
	--eocms-radius-card: 14px;
	--eocms-radius-btn: 8px;
	--eocms-shadow-soft: 0 4px 20px rgba(17, 17, 17, 0.08);
	--eocms-shadow-elevated: 0 12px 32px rgba(17, 17, 17, 0.16);
	--eocms-space-unit: 8px;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
body.eocms-body {
	font-family: var(--eocms-font-body);
	color: var(--eocms-black);
	background: var(--eocms-white);
	line-height: 1.6;
}

.eocms-body h1, .eocms-body h2, .eocms-body h3, .eocms-body h4 {
	font-family: var(--eocms-font-heading);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	line-height: 1.1;
}

.eocms-numbers, .eocms-timer, .eocms-stat-number {
	font-family: var(--eocms-font-numbers);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.eocms-btn-primary,
.eocms-btn-secondary,
.eocms-btn-gold {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	border-radius: var(--eocms-radius-btn);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	border: none;
	transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
	position: relative;
	overflow: hidden;
}

.eocms-btn-primary {
	background: var(--eocms-red);
	color: var(--eocms-white);
}
.eocms-btn-primary:hover { background: #a30f1a; transform: translateY(-2px); box-shadow: var(--eocms-shadow-soft); }

.eocms-btn-secondary {
	background: var(--eocms-white);
	color: var(--eocms-black);
	border: 1.5px solid var(--eocms-black);
}
.eocms-btn-secondary:hover { background: var(--eocms-light-grey); }

.eocms-btn-gold {
	background: var(--eocms-gold);
	color: var(--eocms-black);
}
.eocms-btn-gold:hover { filter: brightness(0.95); transform: translateY(-2px); }

/* Ripple */
.eocms-btn-primary::after, .eocms-btn-secondary::after, .eocms-btn-gold::after {
	content: '';
	position: absolute;
	width: 0; height: 0;
	border-radius: 50%;
	background: rgba(255,255,255,0.4);
	transform: translate(-50%, -50%);
	top: 50%; left: 50%;
	transition: width 400ms ease, height 400ms ease;
}
.eocms-btn-primary:active::after, .eocms-btn-secondary:active::after, .eocms-btn-gold:active::after {
	width: 300px; height: 300px;
}

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.eocms-card {
	background: var(--eocms-white);
	border-radius: var(--eocms-radius-card);
	box-shadow: var(--eocms-shadow-soft);
	padding: 24px;
	transition: transform 200ms ease, box-shadow 200ms ease;
}
.eocms-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--eocms-shadow-elevated);
}

/* Glassmorphism — used sparingly, hero overlays / stat chips only */
.eocms-glass {
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--eocms-radius-card);
}

/* ---------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------- */
.eocms-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--eocms-white);
	box-shadow: var(--eocms-shadow-soft);
}
.eocms-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; }
.eocms-nav a { color: var(--eocms-black); text-decoration: none; font-weight: 500; margin-left: 24px; }
.eocms-nav a:hover { color: var(--eocms-red); }
.eocms-nav .eocms-btn-primary { margin-left: 24px; }

.eocms-breadcrumbs { font-size: 13px; color: var(--eocms-grey); padding: 12px 32px; }
.eocms-breadcrumbs a { color: var(--eocms-grey); }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.eocms-hero {
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: center;
	background: linear-gradient(180deg, rgba(17,17,17,0.55), rgba(17,17,17,0.75)), var(--eocms-black);
	background-size: cover;
	background-position: center;
	color: var(--eocms-white);
	padding: 64px 32px;
}
.eocms-hero h1 { font-size: clamp(40px, 6vw, 88px); margin: 0 0 16px; }
.eocms-hero-stats { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.eocms-hero-stat-chip { padding: 16px 24px; text-align: center; }
.eocms-hero-stat-chip .eocms-numbers { font-size: 28px; display: block; color: var(--eocms-gold); }

/* ---------------------------------------------------------------------
   Stat grid (used in admin dashboard + public "at a glance")
   --------------------------------------------------------------------- */
.eocms-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0; }
.eocms-stat-card { background: var(--eocms-white); border-radius: var(--eocms-radius-card); box-shadow: var(--eocms-shadow-soft); padding: 20px; text-align: center; }
.eocms-stat-card .eocms-stat-number { font-size: 32px; font-weight: 700; color: var(--eocms-red); display: block; }
.eocms-stat-card .eocms-stat-label { font-size: 13px; color: var(--eocms-grey); text-transform: uppercase; letter-spacing: 0.5px; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.eocms-form { max-width: 640px; margin: 0 auto; }
.eocms-form-row { margin-bottom: 20px; }
.eocms-form-row label { display: block; font-weight: 500; margin-bottom: 6px; }
.eocms-form-row input, .eocms-form-row select, .eocms-form-row textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid var(--eocms-light-grey);
	border-radius: var(--eocms-radius-btn);
	font-family: var(--eocms-font-body);
	font-size: 15px;
	transition: border-color 150ms ease;
}
.eocms-form-row input:focus, .eocms-form-row select:focus { border-color: var(--eocms-blue); outline: none; }
.eocms-form-row input.eocms-error { border-color: var(--eocms-error); }
.eocms-form-progress { display: flex; justify-content: space-between; margin-bottom: 32px; }
.eocms-form-progress .step { flex: 1; text-align: center; font-size: 12px; color: var(--eocms-grey); position: relative; }
.eocms-form-progress .step.active { color: var(--eocms-red); font-weight: 600; }

/* ---------------------------------------------------------------------
   Badges
   --------------------------------------------------------------------- */
.eocms-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.eocms-badge-gold { background: var(--eocms-gold); color: var(--eocms-black); }
.eocms-badge-success { background: var(--eocms-success); color: var(--eocms-white); }
.eocms-badge-warning { background: var(--eocms-warning); color: var(--eocms-white); }
.eocms-badge-error { background: var(--eocms-error); color: var(--eocms-white); }

/* ---------------------------------------------------------------------
   Skeleton loaders
   --------------------------------------------------------------------- */
.eocms-skeleton {
	background: linear-gradient(90deg, var(--eocms-light-grey) 25%, #ececec 37%, var(--eocms-light-grey) 63%);
	background-size: 400% 100%;
	animation: eocms-shimmer 1.4s ease infinite;
	border-radius: var(--eocms-radius-card);
}
@keyframes eocms-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

/* ---------------------------------------------------------------------
   Motion — subtle, respects reduced motion
   --------------------------------------------------------------------- */
.eocms-fade-in { animation: eocmsFadeIn 400ms ease both; }
.eocms-slide-up { animation: eocmsSlideUp 400ms ease both; }
@keyframes eocmsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes eocmsSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
	.eocms-fade-in, .eocms-slide-up, .eocms-card, .eocms-btn-primary, .eocms-btn-secondary, .eocms-btn-gold {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------
   Mobile / PWA bottom nav
   --------------------------------------------------------------------- */
.eocms-bottom-nav {
	display: none;
	position: fixed;
	bottom: 0; left: 0; right: 0;
	background: var(--eocms-white);
	box-shadow: 0 -4px 16px rgba(17,17,17,0.08);
	justify-content: space-around;
	padding: 10px 0;
	z-index: 100;
}
@media (max-width: 768px) {
	.eocms-bottom-nav { display: flex; }
	.eocms-hero { min-height: 480px; padding: 40px 20px; }
	.eocms-nav { padding: 12px 16px; }
}
.eocms-bottom-nav a { text-align: center; font-size: 11px; color: var(--eocms-grey); text-decoration: none; }
.eocms-bottom-nav a.active { color: var(--eocms-red); }