/*
 * Course exit buttons — see includes/core/exit-buttons.php
 *
 * Two big, obviously-tappable coloured boxes shown at the end of a course so a
 * non-technical learner always has a clear way out:
 *   - RETURN TO HOME PAGE  (brand navy)   → their dashboard / profile
 *   - LEAVE EMLEARN        (warm amber)   → full logout
 * Each carries a 👆 pointing-hand so it reads unmistakably as "press me".
 */

#emlearn-exit-buttons {
	max-width: 680px;
	margin: 44px auto;
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

#emlearn-exit-buttons[hidden] {
	display: none;
}

.emlearn-exit-heading {
	margin: 0 0 4px;
	text-align: center;
	font-size: 1.15rem;
	font-weight: 600;
	color: #0a1e3d;
}

.emlearn-exit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 64px;
	padding: 22px 26px;
	border-radius: 16px;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.emlearn-exit-btn:hover,
.emlearn-exit-btn:focus {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
	outline: none;
}

/* Visible keyboard focus ring (accessibility). */
.emlearn-exit-btn:focus-visible {
	outline: 3px solid #ffd54a;
	outline-offset: 3px;
}

.emlearn-exit-btn:active {
	transform: translateY(0);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.emlearn-exit-hand {
	flex: 0 0 auto;
	font-size: 1.8rem;
	line-height: 1;
}

/* Brand navy — "Return to home page". */
.emlearn-exit-btn--home,
.emlearn-exit-btn--home:hover,
.emlearn-exit-btn--home:focus {
	background: linear-gradient(135deg, #0a1e3d, #030684);
	color: #ffffff !important;   /* beat Divi's default link colour */
}

/* Warm amber — "Leave EMLEARN" (clearly different from the navy box). */
.emlearn-exit-btn--leave,
.emlearn-exit-btn--leave:hover,
.emlearn-exit-btn--leave:focus {
	background: linear-gradient(135deg, #b9551e, #d97a2b);
	color: #ffffff !important;
}

@media (max-width: 600px) {
	#emlearn-exit-buttons {
		margin: 32px auto;
	}
	.emlearn-exit-btn {
		font-size: 1.2rem;
		padding: 20px;
	}
	.emlearn-exit-hand {
		font-size: 1.55rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.emlearn-exit-btn {
		transition: none;
	}
	.emlearn-exit-btn:hover,
	.emlearn-exit-btn:focus,
	.emlearn-exit-btn:active {
		transform: none;
	}
}