/* ========================================
   Impellik IQ Theme
   Brand: impellik. IQ (lowercase + period + uppercase)
   ======================================== */

:root {
	/* Brand Colors */
	--primary-dark: #1D2632;      /* "impellik." text */
	--primary: #336699;
	--primary-light: #5B8FD8;     /* Header/Navigation */
	--secondary-dark: #272A2E;
	--secondary: #4A4948;
	--secondary-light: #A7967F;
	--accent: #E67E22;
	--accent-dark: #CC6C1D;       /* "IQ" text */
	--background: #F4F6F7;
	--text: #2C3E50;
	--muted: #BDC3C7;

	/* Test UI Colors */
	--test-bg: #FFFFFF;
	--test-border: #E1E8ED;
	--question-focus: #5B8FD8;
	--correct: #27AE60;
	--incorrect: #E74C3C;
	--warning: #F39C12;
}

/* ========================================
   Global Layout
   ======================================== */

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--background);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

main {
	flex: 1;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/* ========================================
   Typography
   ======================================== */

.brand-text {
	color: var(--primary-dark);
	font-weight: 500;
}

.brand-accent {
	color: var(--accent-dark);
	font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text);
	font-weight: 600;
}

.text-muted {
	color: var(--muted) !important;
}

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

.btn-primary {
	background-color: var(--primary-light);
	border-color: var(--primary-light);
	color: white;
}

.btn-primary:hover {
	background-color: var(--primary);
	border-color: var(--primary);
}

.btn-google {
	background-color: #4285f4;
	color: white;
	border: none;
}

.btn-google:hover {
	background-color: #357ae8;
	color: white;
}

/* ========================================
   Navigation
   ======================================== */

.navbar-brand {
	font-size: 1.5rem;
	font-weight: 600;
}

.navbar-dark {
	background-color: var(--primary-light) !important;
}

/* Brand colors in navbar */
.navbar-dark .brand-text {
	color: white;
}

.navbar-dark .brand-accent {
	color: var(--accent-dark);
}

/* ========================================
   Cards & Containers
   ======================================== */

.card {
	border: 1px solid var(--test-border);
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-header {
	background-color: var(--background);
	border-bottom: 1px solid var(--test-border);
	font-weight: 600;
}

/* ========================================
   Test Interface (Minimal/Clean)
   ======================================== */

.test-container {
	max-width: 900px;
	margin: 0 auto;
	background: var(--test-bg);
	border-radius: 0.5rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.test-header {
	padding: 1.5rem;
	border-bottom: 2px solid var(--test-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.test-progress {
	font-size: 0.9rem;
	color: var(--muted);
}

.test-timer {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--primary-dark);
}

.test-timer.warning {
	color: var(--warning);
}

.test-timer.danger {
	color: var(--incorrect);
}

.test-question {
	padding: 3rem 2rem;
	min-height: 400px;
}

.question-text {
	font-size: 1.25rem;
	line-height: 1.6;
	margin-bottom: 2rem;
	color: var(--text);
}

.question-options {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.option-button {
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 0;
	border: 2px solid var(--test-border);
	background: white;
	border-radius: 0.5rem;
	text-align: left;
	cursor: pointer;
	transition: all 0.2s;
	font-size: 1rem;
	overflow: hidden;
	min-height: 3.5rem;
}

.option-button:hover {
	border-color: var(--question-focus);
	background-color: rgba(91, 143, 216, 0.05);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.option-button.selected {
	border-color: var(--question-focus);
	background-color: rgba(91, 143, 216, 0.1);
	border-width: 3px;
}

.option-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 4rem;
	padding: 1rem;
	background: linear-gradient(135deg, #5b8fd8 0%, #4a7bc0 100%);
	color: white;
	font-weight: 700;
	font-size: 1.5rem;
	flex-shrink: 0;
	border-right: 2px solid rgba(0, 0, 0, 0.1);
}

.option-button.selected .option-letter {
	background: linear-gradient(135deg, #4a7bc0 0%, #3d69a8 100%);
}

.option-text {
	flex: 1;
	padding: 1rem 1.5rem;
	line-height: 1.5;
	display: flex;
	align-items: center;
}

.test-navigation {
	padding: 1.5rem;
	border-top: 2px solid var(--test-border);
	display: flex;
	justify-content: flex-end;
}

/* ========================================
   Progress Bar
   ======================================== */

.progress {
	height: 0.5rem;
	background-color: var(--background);
}

.progress-bar {
	background-color: var(--primary-light);
}

/* ========================================
   Alerts
   ======================================== */

.alert-info {
	background-color: rgba(91, 143, 216, 0.1);
	border-color: var(--primary-light);
	color: var(--primary-dark);
}

.alert-warning {
	background-color: rgba(243, 156, 18, 0.1);
	border-color: var(--warning);
	color: #7D6608;
}

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

/* Tablet */
@media (max-width: 992px) {
	.test-question {
		padding: 2rem 1.5rem;
	}

	.question-text {
		font-size: 1.1rem;
	}
}

/* Mobile */
@media (max-width: 576px) {
	.test-header {
		flex-direction: column;
		gap: 1rem;
		text-align: center;
	}

	.test-question {
		padding: 1.5rem 1rem;
		min-height: 300px;
	}

	.question-text {
		font-size: 1rem;
	}

	.option-button {
		font-size: 0.9rem;
		min-height: 3rem;
	}

	.option-letter {
		min-width: 3.5rem;
		font-size: 1.3rem;
		padding: 0.75rem;
	}

	.option-text {
		padding: 0.75rem 1rem;
	}
}

/* ========================================
   Utilities
   ======================================== */

.text-primary-dark {
	color: var(--primary-dark) !important;
}

.text-accent {
	color: var(--accent-dark) !important;
}

.bg-primary-light {
	background-color: var(--primary-light) !important;
}

.border-primary {
	border-color: var(--primary-light) !important;
}