/* ==========================================================================
   POLICY MODALS
   Privacy Policy, Cookie Policy, Terms of Service, opened from the footer.

   The dialog reads its content from the page itself through the REST API, so
   what is styled here is whatever core blocks the editor wrote -- headings,
   paragraphs, lists and the two group classes the template uses
   (.policy-lead and .policy-note).

   Theme-aware throughout: these open over a light or dark page and have to
   belong to it.
   ========================================================================== */

.policy-modal {
	position: fixed;
	inset: 0;
	z-index: 1200; /* above .site-header (1000) and the floating controls (999) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 4vw, 2.5rem);
	--pm-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/*
 * premium-enhancements.css turns [hidden] back into display:flex for the
 * scroll-top button with !important. That selector cannot reach this, but the
 * dialog is hidden through the attribute too, so it says so explicitly rather
 * than relying on the UA default surviving.
 */
.policy-modal[hidden] { display: none !important; }

.policy-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(var(--ink-rgb, 13, 13, 13), 0.62);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.policy-modal-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(760px, 100%);
	max-height: min(88vh, 860px);
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: 20px;
	background: var(--card-bg, var(--color-surface));
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
	opacity: 0;
	transform: translateY(14px) scale(0.98);
	transition: opacity 0.3s var(--pm-ease), transform 0.3s var(--pm-ease);
}

/* .is-open lands a frame after [hidden] is removed, so the transition has a
   start value to animate from. */
.policy-modal.is-open .policy-modal-backdrop { opacity: 1; }
.policy-modal.is-open .policy-modal-dialog {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* --------------------------------------------------------------------------
   Head
   -------------------------------------------------------------------------- */
.policy-modal-head {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: clamp(1.2rem, 3vw, 1.6rem) clamp(1.2rem, 3vw, 1.75rem) 1rem;
	border-bottom: 1px solid var(--color-border);
}
.policy-modal-heading { min-width: 0; }

.policy-modal-title {
	margin: 0 0 0.2rem;
	font-size: clamp(1.1rem, 2.4vw, 1.4rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-text);
}
.policy-modal-meta {
	margin: 0;
	font-size: 0.78rem;
	color: var(--color-text-muted);
}

.policy-modal-close {
	flex: none;
	margin-left: auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.policy-modal-close:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	transform: rotate(90deg);
}
.policy-modal-close:focus-visible {
	outline: 3px solid rgba(var(--color-accent-rgb), 0.5);
	outline-offset: 2px;
}
.policy-modal-close svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   Body -- the page's own blocks
   -------------------------------------------------------------------------- */
.policy-modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain; /* stop the page behind scrolling at the end */
	padding: clamp(1.2rem, 3vw, 1.75rem);
	font-size: 0.94rem;
	line-height: 1.75;
	color: var(--color-text-muted);
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--color-accent-rgb), 0.6) transparent;
}

.policy-modal-body h2 {
	margin: 1.9rem 0 0.6rem;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--color-text);
}
.policy-modal-body h2:first-child { margin-top: 0; }

.policy-modal-body p { margin: 0 0 1rem; }
.policy-modal-body strong { color: var(--color-text); }

.policy-modal-body ul {
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
}
.policy-modal-body ul li {
	position: relative;
	margin: 0 0 0.5rem;
	padding-left: 1.4rem;
}
/* A drawn marker rather than the browser's bullet, matching the articles. */
.policy-modal-body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 6px;
	height: 6px;
	border-radius: 2px;
	background: var(--color-accent);
	transform: rotate(45deg);
}

.policy-modal-body a {
	color: var(--color-accent-hover);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.3s var(--pm-ease);
}
.policy-modal-body a:hover { background-size: 100% 1px; }

/* The opening line of each policy, set a little larger. */
.policy-modal-body .policy-lead {
	margin-bottom: 1.25rem;
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--color-text);
}

/*
 * The "draft for review" panel each template carries. Deliberately loud: it is
 * there so an unreviewed legal page cannot quietly look finished.
 */
.policy-modal-body .policy-note,
.page-policy .policy-note {
	margin: 1.5rem 0 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid rgba(214, 145, 30, 0.4);
	border-left-width: 3px;
	border-radius: 10px;
	background: rgba(214, 145, 30, 0.08);
	font-size: 0.86rem;
	color: var(--color-text);
}
.policy-modal-body .policy-note p:last-child,
.page-policy .policy-note p:last-child { margin-bottom: 0; }

/* The page's own revision date, hidden here because the dialog header already
   prints one from the REST response. The standalone page keeps it. */
.policy-modal-body .policy-updated { display: none; }

.policy-modal-status {
	margin: 0;
	padding: 1.5rem 0;
	text-align: center;
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Foot
   -------------------------------------------------------------------------- */
.policy-modal-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 0.95rem clamp(1.2rem, 3vw, 1.75rem);
	border-top: 1px solid var(--color-border);
}
.policy-modal-full {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-accent-hover);
	text-decoration: none;
}
.policy-modal-full:hover { text-decoration: underline; }
.policy-modal-full svg { width: 14px; height: 14px; }

.policy-modal-hint {
	margin: 0 0 0 auto;
	font-size: 0.76rem;
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Scroll lock

   main.css sets `overflow-x: hidden` on html and body with !important, so this
   has to match on !important or the shorthand there keeps overflow-y at its
   default and the page scrolls underneath the dialog.
   -------------------------------------------------------------------------- */
body.policy-modal-open { overflow: hidden !important; }

/* --------------------------------------------------------------------------
   The pages themselves

   They are real pages with real URLs, so they have to read properly on their
   own -- the dialog is the convenience, not the only way in.
   -------------------------------------------------------------------------- */
.page-policy .page-content-wrap,
.page-policy .entry-content { font-size: 0.98rem; }
.page-policy .policy-lead {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.policy-modal { padding: 0; }
	.policy-modal-dialog {
		width: 100%;
		height: 100%;
		max-height: 100%;
		border: 0;
		border-radius: 0;
	}
	.policy-modal-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.policy-modal-backdrop,
	.policy-modal-dialog { transition-duration: 0.01ms; }
	.policy-modal-dialog { transform: none; }
	.policy-modal-close:hover { transform: none; }
}