/* Aberdeen Taxi Knowledge theme overrides */

body {
	min-height: 100vh;
}

/* Standard (.btn-primary) button hover/focus/active: charcoal background,
   orange text — an inverted look, distinct from Metronic8's own auto-shaded
   hover state. Matches Metronic8's real hover/active selector list (see
   .btn.btn-primary:hover etc. in style.bundle.css) plus !important on
   background so it wins over Metronic's own !important there. */
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn-check:active + .btn.btn-primary,
.btn-check:checked + .btn.btn-primary,
.show > .btn.btn-primary {
	background-color: #263238 !important;
	border-color: #263238 !important;
	color: #F69216 !important;
}

.landing-header {
	background-color: #ffffff;
	border-bottom: 1px solid #eff2f5;
}

/* Course hub test tiles: Metronic8's own .symbol-badge floating-corner-badge
   rule is scoped to ".symbol .symbol-badge" (its avatar component), so it
   never applies here. This re-declares the same real values Metronic8 uses,
   just scoped to our own tile class instead of .symbol — reusing .symbol
   itself would also drag in avatar-stack styling (negative margin, forced
   white border) that doesn't belong on a grid tile. */
.atk-test-tile .symbol-badge {
	position: absolute;
	border: 2px solid #fff;
	border-radius: 100%;
	top: 0;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

article h2[id],
section[id] {
	scroll-margin-top: 100px;
}

/* Like .badge, but wraps normally instead of forcing a single nowrap line
   (used for the "Correct answer" pill, which can be a long route). */
.atk-answer-pill {
	display: inline-block;
	max-width: 100%;
	padding: 0.5em 0.85em;
	border-radius: 0.475rem;
	font-weight: 600;
	color: #fff;
	white-space: normal;
}

/* Study Tool + Knowledge Test cards: standard Metronic light card with a
   subtle hover lift; status (Live/Coming Soon) is signalled by the badge
   and symbol colour, not by dimming the whole card. */
.atk-study-card {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.atk-study-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

/* Course catalog track cards: same hover lift as .atk-study-card. */
.atk-course-card {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.atk-course-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

/* Main Arteries: full-screen map study tool. The map itself fills the
   viewport; everything floating on top of it is plain Metronic/Bootstrap
   (buttons, badges, cards, modals) rather than a custom theme. */
.atk-map-body {
	margin: 0;
	overflow: hidden;
}

#atk-arteries-app {
	position: fixed;
	inset: 0;
}

#atk-arteries-map-el {
	position: absolute;
	inset: 0;
	background: #0b0b0d;
}

/* Neighbourhoods: same full-screen map pattern as Main Arteries. */
#atk-neigh-app {
	position: fixed;
	inset: 0;
}

#atk-neigh-map-el {
	position: absolute;
	inset: 0;
	background: #0b0b0d;
}

/* Places of Interest: same full-screen map pattern as Main Arteries. */
#atk-poi-app {
	position: fixed;
	inset: 0;
}

#atk-poi-map-el {
	position: absolute;
	inset: 0;
	background: #0b0b0d;
}

.atk-poi-pin {
	background: transparent;
	border: 0;
}

/* Take Test results: every pin not part of the just-finished session fades
   to gray, so the highlighted correct/wrong answers stand out. */
.atk-poi-pin-muted {
	opacity: 0.35;
	filter: grayscale(1);
}

.atk-neigh-area-label {
	background: transparent;
	border: 0;
	box-shadow: none;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
	white-space: nowrap;
	pointer-events: none;
}

.atk-map-review-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #eff2f5;
	gap: 12px;
}

.atk-map-review-row:last-child {
	border-bottom: 0;
}

.atk-map-review-guesses {
	font-size: 0.85rem;
	color: #7e8299;
}