/**
 * The security notice and the threat alerts box.
 *
 * Tokens from the child theme's design-tokens.css, each with its value as
 * the fallback so the plugin renders the same on wp-login.php, where the
 * child theme's stylesheets do not load.
 *
 * The notice is the prototype's SecurityNotice component: muted surface,
 * 8px corners, 12px/16px padding, 14px text, the shield and the link in
 * the accessible dark red. The box is the successor of SBT Threat Alerts'
 * inline styles, on the same tokens.
 */

/* --------------------------------------------------------------------------
 * Notice
 * -------------------------------------------------------------------------- */

.raskin-security-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	box-sizing: border-box;
	margin: 0 0 24px;
	padding: 12px 16px;
	border-radius: var(--sba-radius, 0.5rem);
	background: var(--sba-muted, #F3F4F6);
	color: var(--sba-charcoal, #1D212B);
	font-family: var(--sba-font-sans, "Helvetica Neue", Helvetica, Arial, sans-serif);
	font-size: 14px;
	line-height: 20px;
	text-align: left;
}

.raskin-security-notice .raskin-security-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.raskin-security-notice > .raskin-security-icon-shield {
	margin-top: 2px;
	color: var(--sba-red-dark, #BD2810);
}

.raskin-security-notice-text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

.raskin-security-notice-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--sba-red-dark, #BD2810);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--sba-duration-hover, 0.3s) ease;
}

.raskin-security-notice-link:hover,
.raskin-security-notice-link:focus {
	color: var(--sba-red-darker, #9A2010);
	text-decoration: none;
}

/* Qualified with the notice's class: the Global Kit styles `button` as
   `.elementor-kit-N button`, one class and one element, which outranks a
   lone class and painted the X dark red. */
.raskin-security-notice .raskin-security-notice-dismiss {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin: -8px -8px -8px 0;
	padding: 0;
	border: 0;
	border-radius: var(--sba-radius-md, 0.375rem);
	background: transparent;
	color: var(--sba-charcoal, #1D212B);
	cursor: pointer;
	transition: background-color var(--sba-duration-hover, 0.3s) ease;
}

.raskin-security-notice .raskin-security-notice-dismiss:hover,
.raskin-security-notice .raskin-security-notice-dismiss:focus-visible {
	background: var(--sba-accent, #E8EAED);
}

.raskin-security-notice .raskin-security-notice-dismiss:focus-visible {
	outline: 2px solid var(--sba-ring, #E73137);
	outline-offset: 2px;
}

/* Above the forms on /my-account/ when MyListing's own form-login.php is in
   use: it prints the hook the notice hangs on after the form boxes, inside
   .login-content; a flex column with the notice ordered first puts it
   above them. The child theme's template has its own column and orders
   the notice in assets/css/auth.css. */
.sign-in-wrapper .login-content {
	display: flex;
	flex-direction: column;
}

.sign-in-wrapper .login-content > .raskin-security-notice {
	order: -1;
}

/* wp-login.php: the form is 320px wide with 24px of padding; the notice
   takes the same width above it. */
body.login .raskin-security-notice {
	width: 320px;
	max-width: 100%;
	margin: 0 auto 16px;
}

/* --------------------------------------------------------------------------
 * Box
 * -------------------------------------------------------------------------- */

.raskin-security-box {
	clear: both;
	box-sizing: border-box;
	margin: 0 0 36px;
	padding: 22px 26px;
	border: 1px solid var(--sba-border, #E2E4E9);
	border-left: 4px solid var(--sba-red, #E73137);
	border-radius: var(--sba-radius, 0.5rem);
	background: var(--sba-red-light, #FDE8E8);
	color: var(--sba-charcoal, #1D212B);
	overflow-wrap: anywhere;
}

.raskin-security-box .raskin-security-box-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	padding: 0;
	color: var(--sba-red-dark, #BD2810);
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: normal;
	text-transform: none;
}

.raskin-security-box-title .raskin-security-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.raskin-security-box .raskin-security-box-meta {
	margin: 0 0 18px;
	padding: 0;
	color: var(--sba-slate, #6A7181);
	font-size: 13px;
	line-height: 20px;
}

.raskin-security-box-body > *:first-child { margin-top: 0; }
.raskin-security-box-body > *:last-child { margin-bottom: 0; }

.raskin-security-box-body h3,
.raskin-security-box-body h4,
.raskin-security-box-body h5 {
	margin: 0 0 6px;
	padding: 0;
	color: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: normal;
	text-transform: none;
}

.raskin-security-box-body p {
	margin: 0 0 10px;
	padding: 0;
	font-size: 15px;
	line-height: 24px;
}

/* Date and status line, authored as a bold-only paragraph. */
.raskin-security-box-body p > strong:only-child {
	color: var(--sba-red-dark, #BD2810);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.raskin-security-box-body hr {
	height: 1px;
	margin: 18px 0;
	border: 0;
	background: var(--sba-border, #E2E4E9);
}

/* The site's inline link, as in the child theme's links.css. */
.raskin-security-box-body a {
	color: var(--sba-charcoal, #1D212B);
	font-weight: inherit;
	text-decoration: underline;
	text-decoration-color: hsl(var(--sba-red-hsl, 358 79% 55%) / 0.5);
	text-underline-offset: 4px;
	transition: text-decoration-color var(--sba-duration-hover, 0.3s) ease;
}

.raskin-security-box-body a:hover,
.raskin-security-box-body a:focus {
	color: var(--sba-charcoal, #1D212B);
	text-decoration: underline;
	text-decoration-color: var(--sba-red, #E73137);
}

.raskin-security-box-body em {
	color: var(--sba-slate, #6A7181);
	font-size: 14px;
	font-style: normal;
}

.raskin-security-box-body code {
	padding: 1px 4px;
	border-radius: var(--sba-radius-sm, 0.25rem);
	background: rgba(255, 255, 255, 0.7);
	font-family: var(--sba-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 0.9em;
}

/* Expandable detail: the summary as a link with a chevron that rotates. */
.raskin-security-box-body details {
	margin: 6px 0 10px;
}

.raskin-security-box-body summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	margin: 0;
	padding: 0;
	color: var(--sba-red-dark, #BD2810);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	list-style: none;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}

.raskin-security-box-body summary::-webkit-details-marker { display: none; }
.raskin-security-box-body summary::marker { content: ""; }

.raskin-security-box-body summary::after {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.1em);
	transition: transform 0.15s ease;
}

.raskin-security-box-body details[open] > summary::after {
	transform: rotate(-135deg) translateY(-0.1em);
}

.raskin-security-box-body summary:hover,
.raskin-security-box-body summary:focus-visible {
	text-decoration: none;
}

.raskin-security-box-body details > *:not(summary) {
	font-size: 14px;
	line-height: 22px;
}

.raskin-security-box-body details > p:first-of-type { margin-top: 10px; }
.raskin-security-box-body details > *:last-child { margin-bottom: 0; }

.raskin-security-box-body details ul,
.raskin-security-box-body details ol {
	margin: 6px 0 10px;
	padding-left: 18px;
}

.raskin-security-box-body details li {
	margin: 0 0 4px;
	font-size: 14px;
	line-height: 22px;
}

@media (max-width: 782px) {
	.raskin-security-box {
		padding: 18px 18px;
	}
	.raskin-security-box .raskin-security-box-title {
		font-size: 17px;
	}
}

@media print {
	.raskin-security-box {
		border: 1px solid #999;
		background: transparent;
	}
	.raskin-security-box-body details > *:not(summary) {
		display: block !important;
	}
	.raskin-security-notice .raskin-security-notice-dismiss {
		display: none;
	}
}