/*
 * Alumniyat — Custom Login Page Styles
 *
 * Loaded via login_enqueue_scripts hook in inc/login.php.
 * Targets wp-login.php markup only. Designed to feel like
 * a literary magazine / Arabic poetry journal entrance.
 *
 * Palette:
 *   Brown        #8B5E3C
 *   Deep brown   #5C3A21
 *   Gold accent  #C9A227
 *   Beige bg     #F5E6D3
 *
 * Typography:
 *   Amiri (headings) · Noto Naskh Arabic (body) — loaded via Google Fonts
 *
 * RTL: all directional properties use CSS logical equivalents.
 */


/* ══════════════════════════════════════════════════════
   PAGE BACKGROUND — subtle texture via layered gradients
   ══════════════════════════════════════════════════════ */

body.login {
	background:
		/* Faint diagonal linen-like grain */
		repeating-linear-gradient(
			135deg,
			transparent,
			transparent 2px,
			rgba(92, 58, 33, 0.012) 2px,
			rgba(92, 58, 33, 0.012) 4px
		),
		/* Warm radial glow behind the form */
		radial-gradient(
			ellipse at 50% 30%,
			rgba(201, 162, 39, 0.06) 0%,
			transparent 70%
		),
		#f5e6d3;
	font-family: 'Noto Naskh Arabic', 'Amiri', serif;
	min-height: 100vh;
}


/* ══════════════════════════════════════════════════════
   LOGIN WRAPPER — center and constrain
   ══════════════════════════════════════════════════════ */

#login {
	width: 380px;
	max-width: 92vw;
	padding-block-start: 4vh;
	padding-block-end: 2rem;
}


/* ══════════════════════════════════════════════════════
   BRAND BLOCK — logo + tagline
   ══════════════════════════════════════════════════════ */

#login h1 {
	margin-block-end: 0.25rem;
}

#login h1 a {
	width: 180px;
	height: 90px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 auto 0.5rem;
	display: block;
}

/*
 * Tagline — injected as .alumniyat-login-tagline via login_message hook.
 * Sits between the logo and the form card.
 */
.alumniyat-login-tagline {
	text-align: center;
	font-family: 'Amiri', 'Noto Naskh Arabic', serif;
	font-size: 1rem;
	font-style: italic;
	color: #8b5e3c;
	margin-block-end: 1.75rem;
	letter-spacing: 0.01em;
	line-height: 1.8;
}

/*
 * Decorative separator after the tagline — a short gold rule.
 * Pure CSS via ::after, no extra markup needed.
 */
.alumniyat-login-tagline::after {
	content: '';
	display: block;
	width: 60px;
	height: 1px;
	background: linear-gradient(
		to inline-end,
		transparent,
		#c9a227,
		transparent
	);
	margin: 0.75rem auto 0;
}


/* ══════════════════════════════════════════════════════
   FORM CARD
   ══════════════════════════════════════════════════════ */

.login form {
	background: #fff;
	border: 1px solid #e0d5c8;
	border-radius: 10px;
	box-shadow:
		0 1px 3px rgba(92, 58, 33, 0.06),
		0 8px 24px rgba(92, 58, 33, 0.08);
	padding: 2rem 1.75rem 1.5rem;
	margin-block-start: 0;
}


/* ══════════════════════════════════════════════════════
   LABELS
   ══════════════════════════════════════════════════════ */

.login label {
	font-family: 'Noto Naskh Arabic', 'Amiri', serif;
	color: #5c3a21;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.8;
}


/* ══════════════════════════════════════════════════════
   INPUTS
   ══════════════════════════════════════════════════════ */

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	font-family: 'Noto Naskh Arabic', 'Amiri', serif;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #2c1810;
	background: #faf6f1;
	border: 1px solid #d9cfc4;
	border-radius: 6px;
	padding: 0.65rem 0.85rem;
	width: 100%;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: #c9a227;
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
	outline: none;
	background: #fff;
}

/* Password visibility toggle — WordPress 4.9+ adds an eye icon */
.login .wp-pwd .button.wp-hide-pw {
	color: #8b5e3c;
}

.login .wp-pwd .button.wp-hide-pw:hover,
.login .wp-pwd .button.wp-hide-pw:focus {
	color: #c9a227;
}


/* ══════════════════════════════════════════════════════
   PRIMARY BUTTON — full-width, brown → gold hover
   ══════════════════════════════════════════════════════ */

.login .button-primary {
	display: block;
	width: 100%;
	font-family: 'Noto Naskh Arabic', 'Amiri', serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(180deg, #96673f 0%, #8b5e3c 100%);
	border: 1px solid #5c3a21;
	border-radius: 6px;
	padding: 0.7rem 1.25rem;
	text-shadow: none;
	box-shadow: 0 2px 4px rgba(92, 58, 33, 0.15);
	cursor: pointer;
	transition:
		background 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		transform 0.1s ease;
}

.login .button-primary:hover,
.login .button-primary:focus {
	background: linear-gradient(180deg, #d4ac30 0%, #c9a227 100%);
	border-color: #a88620;
	color: #fff;
	box-shadow: 0 4px 12px rgba(201, 162, 39, 0.25);
}

.login .button-primary:active {
	background: #5c3a21;
	border-color: #3e2615;
	box-shadow: none;
	transform: translateY(1px);
}

/* "Remember Me" row — space it from the button */
.login .forgetmenot {
	margin-block-end: 1rem;
}

.login .forgetmenot label {
	font-size: 0.85rem;
	color: #6b5b4f;
	font-weight: 400;
}

/* Override the inline float on the submit wrapper so the
   full-width button renders correctly in both LTR and RTL. */
.login .submit {
	float: none !important;
}


/* ══════════════════════════════════════════════════════
   SECONDARY LINKS — Lost password, Back to site
   ══════════════════════════════════════════════════════ */

.login #nav,
.login #backtoblog {
	text-align: center;
	padding: 0;
}

.login #nav {
	margin-block-start: 1.25rem;
}

.login #backtoblog {
	margin-block-start: 0.75rem;
}

.login #nav a,
.login #backtoblog a {
	font-family: 'Noto Naskh Arabic', 'Amiri', serif;
	font-size: 0.9rem;
	color: #8b5e3c;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.login #nav a:hover,
.login #nav a:focus,
.login #backtoblog a:hover,
.login #backtoblog a:focus {
	color: #c9a227;
	border-bottom-color: #c9a227;
}


/* ══════════════════════════════════════════════════════
   MESSAGE BOXES — error, info, success
   ══════════════════════════════════════════════════════ */

.login .message,
.login .success,
.login #login_error {
	font-family: 'Noto Naskh Arabic', 'Amiri', serif;
	font-size: 0.9rem;
	line-height: 1.8;
	border-radius: 6px;
	padding: 0.75rem 1rem;
	margin-block-end: 1rem;
	box-shadow: 0 1px 3px rgba(92, 58, 33, 0.06);
}

.login .message,
.login .success {
	background: #faf6f1;
	border: 1px solid #e0d5c8;
	border-inline-start: 3px solid #c9a227;
	color: #5c3a21;
}

.login #login_error {
	background: #fdf5f5;
	border: 1px solid #e8c8c8;
	border-inline-start: 3px solid #9e2a2b;
	color: #6e1e1e;
}

.login #login_error a {
	color: #8b5e3c;
}

.login #login_error a:hover {
	color: #c9a227;
}


/* ══════════════════════════════════════════════════════
   PRIVACY POLICY LINK
   ══════════════════════════════════════════════════════ */

.login .privacy-policy-page-link {
	text-align: center;
	margin-block-start: 1.5rem;
}

.login .privacy-policy-page-link a {
	font-size: 0.8rem;
	color: #8b5e3c;
	text-decoration: none;
}

.login .privacy-policy-page-link a:hover {
	color: #c9a227;
}


/* ══════════════════════════════════════════════════════
   LANGUAGE SWITCHER (WP 5.9+)
   ══════════════════════════════════════════════════════ */

.language-switcher {
	text-align: center;
}

.language-switcher label {
	font-family: 'Noto Naskh Arabic', 'Amiri', serif;
}

.language-switcher .button {
	font-family: 'Noto Naskh Arabic', 'Amiri', serif;
	border-color: #d9cfc4;
	color: #5c3a21;
	border-radius: 4px;
}

.language-switcher .button:hover {
	color: #8b5e3c;
	border-color: #c9a227;
}


/* ══════════════════════════════════════════════════════
   INTERIM LOGIN (re-auth overlay)
   ══════════════════════════════════════════════════════ */

.login .interim-login #login {
	padding-block-start: 2rem;
}