/* Atulya Bhartiya Sanskritk Sansthan: theme for the LMS app.
   Palette comes from the ABSS stage photography: deep maroon, warm gold, cream.
   Only light mode is restyled; the LMS dark theme is left as shipped. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

html:not([data-theme='dark']) {
	--abss-maroon: #7a1f2e;
	--abss-maroon-deep: #5c1521;
	--abss-gold: #c9962f;
	--abss-gold-soft: #f6e7c3;
	--abss-cream: #fbf7ef;

	/* canvas and surfaces */
	--surface-base: #fffdf9;
	--surface-white: #fffdf9;
	--surface-sidebar: var(--abss-cream);
	--surface-gray-1: var(--abss-cream);
	--surface-gray-2: #f4ecdd;
	--surface-gray-3: #eadfca;
	--surface-gray-4: #dfd0b4;

	/* solid buttons, toggles, progress fills */
	--surface-gray-5: #c9a3a8;
	--surface-gray-6: #b98a8f;
	--surface-gray-7: #a5535f;
	--surface-gray-8: #8c2a3b;
	--surface-gray-9: var(--abss-maroon);
	--surface-gray-10: var(--abss-maroon-deep);

	/* text */
	--ink-gray-9: #2b1418;
	--ink-gray-8: #3d2429;
	--ink-gray-7: #57393e;
	--ink-gray-6: #6f5a56;
	--ink-gray-5: #8a766d;
	--ink-gray-4: #a8978a;
	--ink-gray-3: #c4b6a4;

	/* borders */
	--outline-gray-1: #eee4d3;
	--outline-gray-2: #e4d6bf;
	--outline-gray-3: #d6c5a8;
	--outline-gray-4: #c3ad88;
	--outline-gray-5: var(--abss-gold);

	/* links and accents that ship as blue read as maroon here */
	--ink-blue-1: #5c1521;
	--ink-blue-2: #6b1a28;
	--ink-blue-3: var(--abss-maroon);
	--ink-blue-4: #8c2a3b;
	--surface-blue-1: #fbeef0;
	--surface-blue-2: #f6dde1;
	--surface-blue-3: var(--abss-maroon);
	--outline-blue-1: var(--abss-maroon);
}

html:not([data-theme='dark']) body {
	background: var(--surface-base);
}

/* Serif headings carry the brand, as on atulyabhartiya.in */
html:not([data-theme='dark']) h1,
html:not([data-theme='dark']) h2,
html:not([data-theme='dark']) h3 {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	letter-spacing: -0.005em;
}

/* The solid call-to-action: maroon with a gold hairline */
html:not([data-theme='dark']) button.bg-surface-gray-10,
html:not([data-theme='dark']) a.bg-surface-gray-10 {
	background-image: linear-gradient(180deg, #7a1f2e, var(--abss-maroon-deep));
	box-shadow: inset 0 0 0 1px rgb(201 150 47 / 0.55), 0 1px 2px rgb(92 21 33 / 0.25);
	color: #fff8e7;
}
html:not([data-theme='dark']) button.bg-surface-gray-10:hover:not(:disabled),
html:not([data-theme='dark']) a.bg-surface-gray-10:hover {
	background-image: linear-gradient(180deg, #8c2a3b, var(--abss-maroon));
}

/* Course cards: soft warm shadow, lift on hover */
html:not([data-theme='dark']) a[href*='/lms/courses/'] > div,
html:not([data-theme='dark']) .course-card {
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
html:not([data-theme='dark']) a[href*='/lms/courses/']:hover > div {
	box-shadow: 0 10px 28px rgb(92 21 33 / 0.14);
	transform: translateY(-2px);
}

/* Gold selection and focus */
::selection {
	background: var(--abss-gold-soft);
	color: #2b1418;
}
html:not([data-theme='dark']) :focus-visible {
	outline-color: var(--abss-gold);
}

@media (prefers-reduced-motion: reduce) {
	html:not([data-theme='dark']) a[href*='/lms/courses/'] > div {
		transition: none;
	}
	html:not([data-theme='dark']) a[href*='/lms/courses/']:hover > div {
		transform: none;
	}
}

/* No "Powered by Frappe Learning" badge in the sidebar footer */
a[href*='frappe.io/learning'] {
	display: none !important;
}

/* The sidebar's profile header shows nothing until the ABSS logo and name have loaded,
   so the stock Frappe logo and "Learning" never flash on page load */
div.py-2 > div.h-12 > button:not(:has(img[src^='/files/'])) {
	visibility: hidden;
}

/* Statistics are for teachers and admins (role is set by theme.js) */
html[data-abss-role='learner'] a[href='/lms/statistics'],
html[data-abss-role='learner'] a[href^='/lms/statistics/'] {
	display: none !important;
}

/* ---- Login screen: photo and tagline on the left, form on the right ---- */
body.abss-login { background: #fffdf9; }
body.abss-login .abss-hero {
	position: fixed; inset: 0 auto 0 0; width: 56%; display: flex; align-items: flex-end;
	padding: 64px; color: #fff8e7; overflow: hidden; background: #1a0a0d;
}
body.abss-login .abss-hero::before {
	content: ''; position: absolute; inset: 0; background: url('/assets/abss_lms/images/hero.jpg') center 30% / cover;
	filter: brightness(.7) saturate(1.1);
}
body.abss-login .abss-hero::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgb(26 8 12 / .25), rgb(26 8 12 / .88) 85%), linear-gradient(90deg, rgb(92 21 33 / .55), transparent 70%);
}
body.abss-login .abss-hero-inner { position: relative; z-index: 1; max-width: 520px; }
body.abss-login .abss-eyebrow { font: 700 12.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #f3cf7a; }
body.abss-login .abss-hero h2 { font: 600 clamp(34px, 4vw, 54px)/1.1 'Playfair Display', Georgia, serif; margin: 18px 0 18px; color: #fff8e7; }
body.abss-login .abss-hero p { font-size: 17px; line-height: 1.6; color: rgb(255 248 231 / .82); margin: 0 0 28px; }
body.abss-login .abss-hindi { font-family: 'Noto Serif Devanagari', serif; color: #f3cf7a; font-size: 16px; letter-spacing: .02em; }

body.abss-login #page-login { margin-left: 56%; min-height: 100vh; }
body.abss-login .page-content-wrapper, body.abss-login main.container, body.abss-login .page_content { min-height: 100vh; }
body.abss-login main.container { display: flex; align-items: center; justify-content: center; max-width: none; padding: 40px 24px; }
body.abss-login .page_content { width: 100%; display: flex; align-items: center; justify-content: center; }
body.abss-login .page-header-wrapper, body.abss-login .page-breadcrumbs { display: none; }
body.abss-login .login-content { width: min(420px, 100%); }
body.abss-login .app-logo { width: 56px !important; height: 56px !important; max-height: none !important; object-fit: contain; border-radius: 14px; box-shadow: 0 8px 22px rgb(92 21 33 / .3); }
body.abss-login .login-content h4 { font-family: 'Playfair Display', Georgia, serif; font-size: 36px; line-height: 1.15; }

body.abss-login .form-control {
	height: 46px; border-radius: 10px; border: 1px solid #e4d6bf; background: #fffdf9; box-shadow: none; padding: 0 14px;
}
body.abss-login .form-control:focus { border-color: #7a1f2e; box-shadow: 0 0 0 3px rgb(201 150 47 / .28); outline: none; }
body.abss-login .es-button[data-variant='solid'] {
	height: 46px; border-radius: 10px; font-weight: 600; color: #fff8e7;
	background-image: linear-gradient(180deg, #7a1f2e, #5c1521); box-shadow: inset 0 0 0 1px rgb(201 150 47 / .55), 0 2px 6px rgb(92 21 33 / .25);
}
body.abss-login .btn-login-option { height: 46px; border-radius: 10px; }


@media (max-width: 900px) {
	body.abss-login .abss-hero { position: relative; width: 100%; height: 250px; padding: 28px 24px; }
	body.abss-login .abss-hero p, body.abss-login .abss-hindi { display: none; }
	body.abss-login .abss-hero h2 { font-size: 30px; margin: 12px 0 0; }
	body.abss-login #page-login { margin-left: 0; min-height: 0; }
	body.abss-login .page-content-wrapper, body.abss-login main.container, body.abss-login .page_content { min-height: 0; }
}

/* ---- Dark mode: the same palette, lit from behind ---- */
html[data-theme='dark'] {
	--surface-base: #170b0e;
	--surface-white: #170b0e;
	--surface-sidebar: #1d1013;
	--surface-gray-1: #1d1013;
	--surface-gray-2: #271519;
	--surface-gray-3: #331f24;
	--surface-gray-4: #422a31;
	--surface-gray-5: #5a3a43;
	--surface-gray-6: #7a4c57;
	--surface-gray-7: #a5535f;
	--surface-gray-8: #c9962f;
	--surface-gray-9: #d9a441;
	--surface-gray-10: #e6b556;

	--ink-gray-9: #fff8e7;
	--ink-gray-8: #f3e8d2;
	--ink-gray-7: #dccdb2;
	--ink-gray-6: #bda98c;
	--ink-gray-5: #9a8670;
	--ink-gray-4: #7a6a5c;
	--ink-gray-3: #5c4d47;

	--outline-gray-1: #2f1d21;
	--outline-gray-2: #3d272d;
	--outline-gray-3: #52353c;
	--outline-gray-4: #6a454e;

	--ink-blue-3: #f3cf7a;
	--surface-blue-3: #c9962f;
	--outline-blue-1: #d9a441;
}
html[data-theme='dark'] button.bg-surface-gray-10,
html[data-theme='dark'] a.bg-surface-gray-10 {
	background-image: linear-gradient(180deg, #f3cf7a, #d9a441);
	color: #2b1418;
	box-shadow: 0 2px 10px rgb(217 164 65 / .25);
}
html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3 {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}