/* Éclore Academy: brand layer for the classic web pages (login, /bantuan, /contact,
   the home page). Values come from DESIGN.md in the project root. Text stays in the
   site's Inter, the same as the LMS app and the navbar; Playfair is for page and
   section titles only. */

@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');
}
/* Colour roles. Light values are DESIGN.md's palette; dark values are its dark
   palette. The mode comes from data-theme on <html>, set before first paint by
   lms/lms/web_theme.py from the same choice the LMS app stores. */
:root,
[data-theme="light"] {
	--ea-page: #ffffff;
	--ea-band: #f7f3ee;
	--ea-surface: #fff8ef;
	--ea-ink: #2a2a2a;
	--ea-muted: #5b6470;
	--ea-line: #e8e1d6;
	--ea-control-line: #8a93a0;
	--ea-link: #3e6080;
	--ea-accent-text: #7a5c34;
	--ea-accent-line: #a88860;
	--ea-btn-bg: #3e6080;
	--ea-btn-bg-hover: #355571;
	--ea-btn-fg: #ffffff;
	--ea-focus: #3e6080;
	--ea-band-shape: rgba(136, 167, 195, 0.16);
}
[data-theme="dark"] {
	--ea-page: #1f2a36;
	--ea-band: #1f2a36;
	--ea-surface: #263443;
	--ea-ink: #f7f3ee;
	--ea-muted: #b9c3cd;
	--ea-line: #3a4a5a;
	--ea-control-line: #8a9bab;
	--ea-link: #a9c5dd;
	--ea-accent-text: #c9ab7f;
	--ea-accent-line: #c9ab7f;
	--ea-btn-bg: #a9c5dd;
	--ea-btn-bg-hover: #c3d7e8;
	--ea-btn-fg: #1f2a36;
	--ea-focus: #a9c5dd;
	--ea-band-shape: rgba(169, 197, 221, 0.10);
	color-scheme: dark;
}

/* Page frame in both modes: body, navbar, footer, breadcrumbs, dialogs, inputs. */
html body {
	background-color: var(--ea-page);
	color: var(--ea-ink);
}
[data-theme="dark"] .navbar,
[data-theme="dark"] .web-footer,
[data-theme="dark"] .navbar .dropdown-menu {
	background-color: var(--ea-page);
	border-color: var(--ea-line);
}
[data-theme="dark"] .navbar .nav-link,
[data-theme="dark"] .navbar .nav-link.active,
[data-theme="dark"] .navbar .nav-item.active .nav-link,
[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .web-footer,
[data-theme="dark"] .web-footer a,
[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a,
[data-theme="dark"] .page-breadcrumbs a,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .web-page-content,
[data-theme="dark"] .from-markdown {
	color: var(--ea-ink);
}
[data-theme="dark"] .page-content-wrapper a:not(.btn):not(.ea-btn):not(.ea-card),
[data-theme="dark"] .web-page-content a:not(.btn):not(.ea-btn):not(.ea-card) {
	color: var(--ea-link);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] select.form-control {
	background-color: var(--ea-surface);
	color: var(--ea-ink);
	border: 1px solid var(--ea-control-line);
}
[data-theme="dark"] .form-control::placeholder {
	color: var(--ea-muted);
}
[data-theme="dark"] .modal-content {
	background-color: var(--ea-surface);
	color: var(--ea-ink);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
	border-color: var(--ea-line);
}

/* 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-line);
	border-radius: 8px;
	color: var(--ea-ink);
	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: Biru Dalam with white (6.58:1) in light, pale blue with ink
   (8.12:1) in dark. */
html[data-theme] .btn-primary,
html[data-theme] .btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--ea-btn-bg);
	border-color: var(--ea-btn-bg);
	color: var(--ea-btn-fg);
}
html[data-theme] .btn-primary:hover,
html[data-theme] .btn-primary:focus {
	background-color: var(--ea-btn-bg-hover);
	border-color: var(--ea-btn-bg-hover);
	color: var(--ea-btn-fg);
}

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-focus);
	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-ink);
}
.ea-contact .form-control {
	min-height: 44px;
}
.ea-contact .btn-send {
	min-height: 44px;
	padding: 0 24px;
}
.ea-contact .ea-hint {
	color: var(--ea-muted);
	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-btn-bg);
	color: var(--ea-btn-fg);
}
.es-button[data-variant="solid"]:hover {
	background-color: var(--ea-btn-bg-hover);
}

/* The current page in the navbar: same ink as the other links, marked by an underline. */
.navbar .nav-link.active,
.navbar .nav-item.active .nav-link {
	color: var(--ea-ink);
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Page titles from Frappe templates (/contact) use the same serif as the custom pages. */
.page-header h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: clamp(2rem, 4.2vw, 2.75rem);
	letter-spacing: 0;
}