/* Place this file at:
   uhasibu/uhasibu/public/css/kdcu_login.css

   Register in hooks.py with:
     web_include_css = "/assets/uhasibu/css/kdcu_login.css"

   NOTE: this is a DIFFERENT hook from app_include_css (which only
   affects pages inside /app - the Desk). web_include_css affects
   website-context pages like /login, which is what we need here.

   Brand colors taken directly from KDCU's own App.css:
     --primary: #FEA116
     --light:   #F1F8FF
     --dark:    #0F172B
*/

:root {
	--kdcu-primary: #FEA116;
	--kdcu-dark: #0F172B;
	--kdcu-light: #F1F8FF;
}

/* Login button and any other primary-colored buttons on website pages */
.btn-primary {
	background-color: var(--kdcu-primary) !important;
	border-color: var(--kdcu-primary) !important;
	color: #0F172B !important; /* dark text reads better on amber than white */
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: #e0910f !important; /* slightly darker amber on hover */
	border-color: #e0910f !important;
}

/* Links (e.g. "Forgot Password?") in the KDCU dark navy instead of default blue */
.page-card a,
.for-login a {
	color: var(--kdcu-dark);
}

.page-card a:hover,
.for-login a:hover {
	color: var(--kdcu-primary);
}

/* Login card container */
.page-card,
.for-login .page-card {
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(15, 23, 43, 0.12);
}

/* Login card heading */
.page-card-head,
.for-login h2,
.for-login h4 {
	color: var(--kdcu-dark);
}

/* The app logo shown above the login form */
.app-logo,
.for-login .brand-logo,
.for-login img.app-logo {
	max-height: 72px;
	width: auto;
}

/* Background of the whole login page, subtle brand tint */
body.for-login,
.page-container.for-login {
	background-color: var(--kdcu-light);
}