/**
 * Jogemoa Base Stylesheet & Modern CSS Reset
 * Target: Modern Browsers, Responsive 320px to 1920px
 */

:root {
	--jm-primary: #2563EB;
	--jm-primary-hover: #1D4ED8;
	--jm-primary-light: #EFF6FF;
	--jm-bg: #F8FAFC;
	--jm-surface: #FFFFFF;
	--jm-surface-raised: #F1F5F9;
	--jm-border: #E2E8F0;
	--jm-border-hover: #CBD5E1;
	--jm-text: #0F172A;
	--jm-text-muted: #475569;
	--jm-text-light: #94A3B8;
	--jm-success: #16A34A;
	--jm-success-bg: #DCFCE7;
	--jm-warning: #D97706;
	--jm-warning-bg: #FEF3C7;
	--jm-danger: #DC2626;
	--jm-danger-bg: #FEE2E2;

	--jm-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--jm-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	--jm-radius-sm: 6px;
	--jm-radius-md: 10px;
	--jm-radius-lg: 16px;
	--jm-radius-full: 9999px;

	--jm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--jm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
	--jm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
	--jm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);

	--jm-container-content: 840px;
	--jm-container-wide: 1200px;
	--jm-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-family: var(--jm-font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--jm-text);
	background-color: var(--jm-bg);
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--jm-bg);
	color: var(--jm-text);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

main {
	flex: 1 0 auto;
}

img, svg, video, canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--jm-primary);
	text-decoration: none;
	transition: var(--jm-transition);
}

a:hover {
	color: var(--jm-primary-hover);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--jm-text);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p, ul, ol {
	margin-bottom: 1.25rem;
}

p:last-child {
	margin-bottom: 0;
}

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	border: none;
	background: none;
}

/* Accessibility Skip Link */
.screen-reader-text,
.skip-link {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.skip-link:focus {
	position: fixed !important;
	top: 1rem !important;
	left: 1rem !important;
	z-index: 999999 !important;
	width: auto !important;
	height: auto !important;
	padding: 0.75rem 1.5rem !important;
	clip: auto !important;
	white-space: normal !important;
	background: var(--jm-primary) !important;
	color: #FFFFFF !important;
	font-weight: 600 !important;
	border-radius: var(--jm-radius-md) !important;
	box-shadow: var(--jm-shadow-lg) !important;
	text-decoration: none !important;
}

/* Container Layout Classes */
.jm-container {
	width: 100%;
	max-width: var(--jm-container-wide);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.jm-container-content {
	width: 100%;
	max-width: var(--jm-container-content);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

@media (min-width: 640px) {
	.jm-container,
	.jm-container-content {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.jm-container,
	.jm-container-content {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}