/* Éclore Academy: brand layer for the classic web pages (login, /bantuan, /contact,
   the home page). Values come from DESIGN.md in the project root. */

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/assets/lms/fonts/eclore/playfair-display-latin-600-normal.woff2') format('woff2'),
		url('/assets/lms/fonts/eclore/playfair-display-latin-600-normal.woff') format('woff');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('/assets/lms/fonts/eclore/playfair-display-latin-600-italic.woff2') format('woff2'),
		url('/assets/lms/fonts/eclore/playfair-display-latin-600-italic.woff') format('woff');
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/lms/fonts/eclore/jost-latin-400-normal.woff2') format('woff2'),
		url('/assets/lms/fonts/eclore/jost-latin-400-normal.woff') format('woff');
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/assets/lms/fonts/eclore/jost-latin-500-normal.woff2') format('woff2'),
		url('/assets/lms/fonts/eclore/jost-latin-500-normal.woff') format('woff');
}

:root {
	--ea-biru: #88a7c3;
	--ea-biru-dalam: #3e6080;
	--ea-biru-dalam-hover: #355571;
	--ea-gading: #f7f3ee;
	--ea-krem: #fff8ef;
	--ea-emas: #a88860;
	--ea-emas-tua: #7a5c34;
	--ea-tinta: #2a2a2a;
	--ea-batu: #5b6470;
	--ea-garis: #e8e1d6;
}

/* The navbar toggler points at #icon-menu, but the icon sprite is not loaded on web
   pages, so the button rendered as an empty box. Draw the three lines in CSS and say
   "Menu" next to them so the button explains itself. */
@media (max-width: 991.98px) {
	.navbar .navbar-toggler {
		display: inline-flex;
	}
}
.navbar .navbar-toggler {
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--ea-garis);
	border-radius: 8px;
	color: var(--ea-tinta);
	font-size: 15px;
}
.navbar .navbar-toggler > span {
	display: none;
}
.navbar .navbar-toggler::before {
	content: '';
	width: 18px;
	height: 12px;
	background:
		linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
}
.navbar .navbar-toggler::after {
	content: 'Menu';
}
.navbar .navbar-nav .nav-link {
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* Primary buttons on web pages use Biru Dalam (white text 6.58:1). */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--ea-biru-dalam);
	border-color: var(--ea-biru-dalam);
	color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--ea-biru-dalam-hover);
	border-color: var(--ea-biru-dalam-hover);
	color: #fff;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--ea-biru-dalam);
	outline-offset: 2px;
}

/* /contact: visible labels and a send button big enough for a thumb. */
.ea-contact label {
	display: block;
	font-weight: 500;
	margin-bottom: 6px;
	color: var(--ea-tinta);
}
.ea-contact .form-control {
	min-height: 44px;
}
.ea-contact .btn-send {
	min-height: 44px;
	padding: 0 24px;
}
.ea-contact .ea-hint {
	color: var(--ea-batu);
	font-size: 14px;
	margin-top: 6px;
}

/* Login and signup: the core buttons are 28px tall; give them a thumb-sized target
   and the primary one the brand blue. */
.es-button {
	min-height: 44px;
}
.es-button[data-variant="solid"] {
	background-color: var(--ea-biru-dalam);
	color: #fff;
}
.es-button[data-variant="solid"]:hover {
	background-color: var(--ea-biru-dalam-hover);
}