/**
 * IJIT: Indonesian Journal of Islamic Teaching - brand overrides (shared with Mozaic)
 * Menu bar, footer accents and the Login / Reset Password / Register forms.
 * Loaded as the journal style sheet (Settings > Website > Appearance > Journal style sheet).
 *
 * COLOURS ARE DYNAMIC
 * - Base colour: the theme option "Hover Effect Color / Warna Efek Hover"
 *   (Settings > Website > Appearance > theme options). The theme prints it as --ak-primary;
 *   every shade below (menu band, gradients, focus rings, shadows) is derived from it.
 * - Accent colour: --mz-gold below (the only colour set in this file).
 * The fallbacks after the comma are only used if the theme variables are missing.
 */
:root {
	--mz-teal: var(--ak-primary, #004754);
	--mz-teal-rgb: var(--ak-primary-rgb, 0 71 84);
	--mz-teal-2: color-mix(in srgb, var(--mz-teal) 82%, #ffffff);   /* lighter: gradient end, hovers */
	--mz-ink: color-mix(in srgb, var(--mz-teal) 60%, #111111);      /* darker: menu band, headings */
	--mz-ink-2: color-mix(in srgb, var(--mz-teal) 80%, #111111);
	--mz-shadow-rgb: var(--ak-primary-dark-rgb, 0 48 56);

	--mz-gold: #e0b454;
	--mz-gold-light: #f3d890;
}

/* ---------- Header: banner fills the width, menu band below it ---------- */
body .pkp_structure_head.border-primary-bottom {
	background: var(--mz-ink) !important;
	border-bottom: 3px solid var(--mz-gold) !important;
	box-shadow: 0 6px 18px rgb(var(--mz-shadow-rgb) / 0.28) !important;
}

body .pkp_site_name_wrapper {
	background: var(--mz-teal) !important;
}

body .pkp_structure_head .pkp_navigation_primary_row,
body .pkp_structure_head .pkp_navigation_primary_wrapper,
body .pkp_structure_head #navigationPrimary.pkp_navigation_primary {
	background: var(--mz-ink) !important;
}

/* ---------- Menu links: gold underline on hover / current page ---------- */
@media (min-width: 1024px) {
	body #navigationPrimary > li > a {
		color: rgba(255, 255, 255, 0.92) !important;
		font-weight: 600 !important;
		letter-spacing: 0.01em;
		background-color: transparent !important;
		/* gold underline drawn as a background so the theme's ::after dropdown caret stays */
		background-image: linear-gradient(var(--mz-gold), var(--mz-gold)) !important;
		background-repeat: no-repeat !important;
		background-position: 0.5rem calc(100% - 6px) !important;
		background-size: 0 2px !important;
		transition: color 0.2s ease, background-color 0.2s ease, background-size 0.25s ease !important;
	}

	body #navigationPrimary > li > a:hover,
	body #navigationPrimary > li > a:focus,
	body #navigationPrimary > li.active > a,
	body #navigationPrimary > li.current > a {
		color: var(--mz-gold-light) !important;
		background-color: rgba(255, 255, 255, 0.06) !important;
		background-size: calc(100% - 1rem) 2px !important;
	}

	/* Dropdown (About) */
	body #navigationPrimary ul {
		background: #ffffff !important;
		border-top: 3px solid var(--mz-gold) !important;
		border-radius: 0 0 8px 8px !important;
		box-shadow: 0 12px 28px rgb(var(--mz-shadow-rgb) / 0.22) !important;
	}

	body #navigationPrimary ul a {
		color: var(--mz-ink) !important;
		background: transparent !important;
	}

	body #navigationPrimary ul a:hover,
	body #navigationPrimary ul a:focus {
		color: #ffffff !important;
		background: var(--mz-ink-2) !important;
	}

	/* User links (Register / Login) */
	body .pkp_structure_head #navigationUser > li > a,
	body .pkp_structure_head #navigationUserWrapper > li > a {
		color: rgba(255, 255, 255, 0.92) !important;
		background: transparent !important;
	}

	body .pkp_structure_head #navigationUser > li > a:hover,
	body .pkp_structure_head #navigationUserWrapper > li > a:hover {
		color: var(--mz-gold-light) !important;
		background: rgba(255, 255, 255, 0.06) !important;
	}
}

/* ---------- Menu: 8 top-level items + search + Register/Login must fit the boxed layout ---------- */
@media (min-width: 1024px) {
	body #navigationPrimary > li > a {
		padding-left: 0.6rem !important;
		padding-right: 0.6rem !important;
		font-size: 0.9rem !important;
	}

	body .pkp_structure_head form[role="search"] input[type="search"] {
		width: 7rem !important;
	}

	body .pkp_structure_head form[role="search"] input[type="search"]:focus {
		width: 10rem !important;
	}
}

/* ---------- Footer: same ink-teal family, gold links ---------- */
body .pkp_structure_footer_wrapper .ak-footer-shell {
	--ak-gold: var(--mz-gold);
	--ak-gold-light: var(--mz-gold-light);
}

/* ---------- IJIT: menu band and footer in the banner's olive (the base colour itself, not a darker shade) ---------- */
body .pkp_structure_head.border-primary-bottom,
body .pkp_structure_head .pkp_navigation_primary_row,
body .pkp_structure_head .pkp_navigation_primary_wrapper,
body .pkp_structure_head #navigationPrimary.pkp_navigation_primary {
	background: var(--mz-teal) !important;
}

body .pkp_structure_footer_wrapper {
	--ak-footer-rgb: var(--mz-teal-rgb);
	--ak-footer-dark-rgb: var(--mz-shadow-rgb);
}

/* =====================================================================
 * Login, Reset Password and Register pages: centred card forms
 * ===================================================================== */
body.pkp_page_login .page_login,
body.pkp_page_login .page_lost_password,
body.pkp_op_register .page_register {
	position: relative;
	box-sizing: border-box;
	max-width: 460px;
	margin: 24px auto 40px !important;
	padding: 44px 40px 36px !important;
	background: #ffffff !important;
	border: 1px solid #e3e9ea;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgb(var(--mz-shadow-rgb) / 0.10);
	overflow: hidden;
}

body.pkp_op_register .page_register {
	max-width: 820px;
}

/* teal-to-gold strip along the top of the card */
body.pkp_page_login .page_login::before,
body.pkp_page_login .page_lost_password::before,
body.pkp_op_register .page_register::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--mz-teal), var(--mz-teal-2) 60%, var(--mz-gold));
}

/* the Home > Login breadcrumb adds nothing on a login card */
body.pkp_page_login .page_login .cmp_breadcrumbs,
body.pkp_page_login .page_lost_password .cmp_breadcrumbs,
body.pkp_op_register .page_register .cmp_breadcrumbs {
	display: none !important;
}

/* heading with a round icon badge */
body.pkp_page_login .page_login > h1,
body.pkp_page_login .page_lost_password > h1,
body.pkp_op_register .page_register > h1 {
	margin: 0 0 8px !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	text-align: center;
	color: var(--mz-ink) !important;
}

body.pkp_page_login .page_login > h1::before,
body.pkp_page_login .page_lost_password > h1::before,
body.pkp_op_register .page_register > h1::before {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--mz-teal), var(--mz-teal-2));
	box-shadow: 0 8px 20px rgb(var(--mz-teal-rgb) / 0.28), inset 0 0 0 3px color-mix(in srgb, var(--mz-gold) 55%, transparent);
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 24px;
	color: #ffffff;
	content: "\f023"; /* lock */
}

body.pkp_page_login .page_lost_password > h1::before {
	content: "\f084"; /* key */
}

body.pkp_op_register .page_register > h1::before {
	content: "\f234"; /* user-plus */
}

/* intro + "required fields" note */
body.pkp_page_login .page_login > p,
body.pkp_page_login .page_lost_password > p,
body.pkp_op_register .page_register > p {
	margin: 0 0 22px !important;
	font-size: 13.5px !important;
	line-height: 1.6 !important;
	text-align: center;
	color: #6b7c80 !important;
}

/* ---------- fields ---------- */
body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) {
	max-width: none !important;
	margin: 0 !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) fieldset,
body.pkp_op_register form.cmp_form#register fieldset {
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .fields > div,
body.pkp_op_register form.cmp_form#register .fields > div {
	margin: 0 0 16px !important;
	padding: 0 !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) label,
body.pkp_op_register form.cmp_form#register label {
	display: block !important;
	margin: 0 !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .label,
body.pkp_op_register form.cmp_form#register .label {
	display: block !important;
	margin: 0 0 6px !important;
	font-size: 13.5px !important;
	font-style: normal !important;
	font-weight: 600 !important;
	color: #2b3f44 !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .required,
body.pkp_op_register form.cmp_form#register .required {
	color: #c0392b !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) input[type="text"],
body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) input[type="email"],
body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) input[type="password"],
body.pkp_op_register form.cmp_form#register input[type="text"],
body.pkp_op_register form.cmp_form#register input[type="email"],
body.pkp_op_register form.cmp_form#register input[type="password"],
body.pkp_op_register form.cmp_form#register select {
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid #cfd9db !important;
	border-radius: 10px !important;
	background-color: #f7fafa !important;
	font-size: 15px !important;
	color: #1d2f33 !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) input:hover,
body.pkp_op_register form.cmp_form#register input:hover,
body.pkp_op_register form.cmp_form#register select:hover {
	border-color: #a9bcc0 !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) input:focus,
body.pkp_op_register form.cmp_form#register input:focus,
body.pkp_op_register form.cmp_form#register select:focus {
	outline: none !important;
	border-color: var(--mz-teal) !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 0 4px rgb(var(--mz-teal-rgb) / 0.14) !important;
}

/* "Forgot your password?" under the password field, right aligned */
body.pkp_page_login form#login .password a {
	display: block !important;
	width: 100%;
	margin-top: 8px;
	font-size: 13px !important;
	font-weight: 600;
	text-align: right !important;
	color: var(--mz-teal) !important;
	text-decoration: none !important;
	background: none !important;
}

body.pkp_page_login form#login .password a:hover {
	color: var(--mz-teal-2) !important;
	text-decoration: underline !important;
}

/* checkboxes (keep me logged in, consents, reviewer) */
body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .checkbox label,
body.pkp_op_register form.cmp_form#register .optin label {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #3b4d51 !important;
	cursor: pointer;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .checkbox .label {
	margin: 0 !important;
	font-weight: 500 !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) input[type="checkbox"],
body.pkp_op_register form.cmp_form#register input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0 !important;
	accent-color: var(--mz-teal);
	cursor: pointer;
}

/* consent labels mix text and links: a flex label would space them apart, so keep it inline text
   and pin the checkbox to the left instead */
body.pkp_op_register form.cmp_form#register .optin label {
	display: block !important;
	position: relative;
	padding-left: 28px !important;
}

body.pkp_op_register form.cmp_form#register .optin input[type="checkbox"] {
	position: absolute;
	top: 2px;
	left: 0;
}

/* ---------- buttons ---------- */
body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .buttons,
body.pkp_op_register form.cmp_form#register .buttons {
	display: flex !important;
	flex-direction: column;
	gap: 12px;
	margin: 22px 0 0 !important;
	padding: 0 !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .buttons .submit,
body.pkp_op_register form.cmp_form#register .buttons .submit,
body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .buttons a,
body.pkp_op_register form.cmp_form#register .buttons a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100% !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 20px !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .buttons .submit,
body.pkp_op_register form.cmp_form#register .buttons .submit {
	border: 0 !important;
	background: linear-gradient(135deg, var(--mz-teal), var(--mz-teal-2)) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 18px rgb(var(--mz-teal-rgb) / 0.25) !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .buttons .submit:hover,
body.pkp_op_register form.cmp_form#register .buttons .submit:hover {
	background: linear-gradient(135deg, var(--mz-ink), var(--mz-teal)) !important;
	box-shadow: 0 10px 22px rgb(var(--mz-teal-rgb) / 0.32) !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .buttons .submit:active,
body.pkp_op_register form.cmp_form#register .buttons .submit:active {
	transform: translateY(1px);
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .buttons .submit:focus-visible,
body.pkp_op_register form.cmp_form#register .buttons .submit:focus-visible,
body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .buttons a:focus-visible,
body.pkp_op_register form.cmp_form#register .buttons a:focus-visible {
	outline: 3px solid var(--mz-gold) !important;
	outline-offset: 2px;
}

/* secondary action (Register / Login) as an outline button */
body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .buttons a,
body.pkp_op_register form.cmp_form#register .buttons a {
	border: 1.5px solid #cfd9db !important;
	background: #ffffff !important;
	color: var(--mz-teal) !important;
}

body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .buttons a:hover,
body.pkp_op_register form.cmp_form#register .buttons a:hover {
	border-color: var(--mz-teal) !important;
	background: #f1f7f8 !important;
	color: var(--mz-ink) !important;
}

/* the theme's clearfix pseudo-elements would become flex items and add a gap on both sides */
body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .buttons::before,
body.pkp_page_login form.cmp_form:is(#login, #lostPasswordForm) .buttons::after,
body.pkp_op_register form.cmp_form#register .buttons::before,
body.pkp_op_register form.cmp_form#register .buttons::after {
	content: none !important;
	display: none !important;
}

/* ---------- Register: sectioned, two-column layout ---------- */
body.pkp_op_register .page_register form.cmp_form#register fieldset {
	margin: 0 0 22px !important;
}

body.pkp_op_register .page_register form.cmp_form#register fieldset > legend:not(.pkp_screen_reader) {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0 0 16px !important;
	padding: 0 0 10px !important;
	border-bottom: 1px solid #e3e9ea;
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mz-ink) !important;
}

body.pkp_op_register .page_register form.cmp_form#register fieldset > legend:not(.pkp_screen_reader)::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgb(var(--mz-teal-rgb) / 0.09);
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 14px;
	color: var(--mz-teal);
	content: "\f2c2"; /* id-card */
}

body.pkp_op_register .page_register form.cmp_form#register fieldset.login > legend::before {
	content: "\f084"; /* key */
}

body.pkp_op_register .page_register form.cmp_form#register fieldset.identity .fields,
body.pkp_op_register .page_register form.cmp_form#register fieldset.login .fields {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 18px;
}

/* consent + reviewer blocks as soft panels */
body.pkp_op_register .page_register form.cmp_form#register fieldset.consent,
body.pkp_op_register .page_register form.cmp_form#register fieldset.reviewer {
	padding: 16px 18px 2px !important;
	border: 1px solid #e3ecec !important;
	border-radius: 12px !important;
	background: #f5f9f9 !important;
}

body.pkp_op_register .page_register form.cmp_form#register fieldset.consent a {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	color: var(--mz-teal) !important;
	font-weight: 600;
	text-decoration: underline !important;
}

/* reviewing interests (tag-it input) */
body.pkp_op_register .page_register ul.tagit {
	min-height: 46px;
	margin: 0 !important;
	padding: 6px 10px !important;
	border: 1px solid #cfd9db !important;
	border-radius: 10px !important;
	background: #ffffff !important;
}

body.pkp_op_register .page_register ul.tagit li.tagit-choice {
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--mz-teal) !important;
	color: #ffffff !important;
}

body.pkp_op_register .page_register ul.tagit li.tagit-choice a,
body.pkp_op_register .page_register ul.tagit li.tagit-choice .tagit-close .text-icon {
	color: #ffffff !important;
}

/* Register buttons side by side */
body.pkp_op_register .page_register form.cmp_form#register .buttons {
	flex-direction: row;
	flex-wrap: wrap;
}

body.pkp_op_register .page_register form.cmp_form#register .buttons .submit,
body.pkp_op_register .page_register form.cmp_form#register .buttons a {
	flex: 1 1 200px;
	width: auto !important;
}

@media (max-width: 640px) {
	body.pkp_page_login .page_login,
	body.pkp_page_login .page_lost_password,
	body.pkp_op_register .page_register {
		margin: 12px auto 24px !important;
		padding: 36px 20px 28px !important;
		border-radius: 12px;
	}

	body.pkp_op_register .page_register form.cmp_form#register fieldset.identity .fields,
	body.pkp_op_register .page_register form.cmp_form#register fieldset.login .fields {
		grid-template-columns: minmax(0, 1fr);
	}
}