/*
Theme Name: EISEN OCR Championship
Theme URI: https://ocr.eisensports.in
Author: Eisen Sports Private Limited
Description: Custom lightweight theme for the EISEN OCR Championship — no page builder, built to pair with the EOCMS plugin. Implements the EISEN Sports Design System (see plugin docs/02-design-system.md).
Version: 1.0.0
Requires PHP: 8.0
Text Domain: eisen-theme
*/

/* Design tokens are defined in the EOCMS plugin's eocms-frontend.css, which this
   theme enqueues (see functions.php). This file only adds page-level layout that
   isn't part of the plugin's reusable component library. */

.eocms-site-content { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.eocms-section { padding: 72px 0; }
.eocms-section-alt { background: var(--eocms-light-grey); }
.eocms-section-dark { background: var(--eocms-black); color: var(--eocms-white); }
.eocms-section-label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--eocms-grey); margin-bottom: 8px; }
.eocms-section-title { font-size: clamp(28px, 4vw, 44px); margin: 0 0 32px; }

.eocms-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.eocms-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.eocms-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }

@media (max-width: 768px) {
	.eocms-site-content { padding: 0 16px; }
	.eocms-section { padding: 48px 0; }
}

/* Mobile bottom nav clearance so content isn't hidden behind it */
@media (max-width: 768px) {
	body.eocms-body { padding-bottom: 64px; }
}

/* Skip link for accessibility */
.eocms-skip-link { position: absolute; left: -9999px; top: 0; background: var(--eocms-red); color: #fff; padding: 12px 20px; z-index: 999; }
.eocms-skip-link:focus { left: 0; }

/* Primary nav layout + mobile dropdown */
.eocms-primary-nav { display: flex; align-items: center; }
.eocms-primary-nav.eocms-nav-mobile {
	position: absolute;
	top: 100%; left: 0; right: 0;
	background: var(--eocms-white);
	flex-direction: column;
	align-items: flex-start;
	padding: 16px 32px;
	box-shadow: var(--eocms-shadow-soft);
}
.eocms-primary-nav.eocms-nav-mobile a { margin: 8px 0; }
.eocms-nav { position: relative; }
#eocms-hamburger { color: var(--eocms-black); }