/**
 * Hosterwise — prose v2: long-form typography, callouts, key takeaways, FAQ block,
 * paper, search form, quick search field (FAQ, glossary). Enqueued on every page
 * except the home page (inc/assets.php). 404: pages/404.css, results: pages/search.css.
 * Tokens: main.css.
 */
/* =========================================================================
 * 12. Prose — long-form typography (articles, legal, content pages).
 *     Designed for the light canvas (.hw-sheet / .hw-paper / .hw-light);
 *     works on the dark canvas through the same tokens.
 * ====================================================================== */

.hw-prose {
	--hw-prose-body: rgba(245, 247, 255, 0.86);
	max-width: var(--hw-container-narrow);
	/* 17 px on phones → 18 px on desktop (was 20 px): comfortable long reading. */
	font-size: clamp(1.0625rem, 1.02rem + 0.18vw, 1.125rem);
	line-height: 1.72;
	color: var(--hw-prose-body);
	text-wrap: pretty;
	overflow-wrap: break-word;
}

.hw-light .hw-prose,
.hw-sheet .hw-prose,
.hw-paper .hw-prose,
.hw-section--light .hw-prose,
.hw-prose--light { --hw-prose-body: #2a2d52; color: var(--hw-prose-body); }

.hw-prose--wide { max-width: none; }

.hw-prose > * + * { margin-top: 1.15em; }

.hw-prose > * { margin-bottom: 0; }

.hw-prose h2 {
	position: relative;
	margin-top: 2.1em;
	font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem); /* 22 → 30 px (was 36). */
	letter-spacing: -0.03em;
	scroll-margin-top: calc(var(--hw-header-h) + 24px);
}

.hw-prose h3 { margin-top: 1.75em; font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); /* 19 → 22 px (was 28). */ scroll-margin-top: calc(var(--hw-header-h) + 24px); }

.hw-prose h4 { margin-top: 1.5em; font-size: var(--hw-fs-md); }

.hw-prose h2 + *,
.hw-prose h3 + *,
.hw-prose h4 + * { margin-top: 0.6em; }

.hw-prose a {
	color: var(--hw-link);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--hw-link) 45%, transparent);
	text-decoration-thickness: 1.5px;
	font-weight: 550;
}

.hw-prose a:hover { text-decoration-color: currentColor; }

.hw-prose strong { color: var(--hw-text); font-weight: 700; }

.hw-prose ul,
.hw-prose ol { padding-left: 1.5em; }

.hw-prose li + li { margin-top: 0.5em; }

.hw-prose li::marker { color: var(--hw-accent-bright); font-weight: 700; }

.hw-prose ol > li::marker { font-family: var(--hw-font-head); color: var(--hw-cyan); }

.hw-prose blockquote,
.hw-prose .wp-block-quote {
	position: relative;
	margin-inline: 0;
	padding: 0.4em 0 0.4em 1.4em;
	border-left: 0;
	color: var(--hw-text);
	font-family: var(--hw-font-head);
	font-size: var(--hw-fs-lg);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.01em;
}

.hw-prose blockquote::before,
.hw-prose .wp-block-quote::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	bottom: 0.3em;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--hw-accent-bright), var(--hw-violet), var(--hw-cyan));
}

.hw-prose blockquote cite,
.hw-prose .wp-block-quote cite {
	display: block;
	margin-top: 0.6em;
	font-family: var(--hw-font-body);
	font-size: var(--hw-fs-sm);
	font-style: normal;
	font-weight: 500;
	color: var(--hw-text-muted);
}

.hw-prose img,
.hw-prose figure,
.hw-prose video,
.hw-prose iframe { border-radius: var(--hw-radius-lg); }

.hw-prose figure { margin-inline: 0; }

/* Scrolling table figures: no rounded clip (it cut the caption's first letter). */
.hw-prose .wp-block-table { border-radius: 0; }

.hw-prose figure img:not(.hw-illustration__img) { box-shadow: var(--hw-shadow); }

.hw-prose figcaption,
.hw-prose .wp-element-caption {
	margin-top: 0.75em;
	font-size: var(--hw-fs-xs);
	line-height: 1.5;
	color: var(--hw-text-muted);
	text-align: center;
}

.hw-prose .alignwide { max-width: none; }

@media (min-width: 1100px) {
	.hw-prose .alignwide { margin-inline: -8%; }
}

.hw-prose .aligncenter { margin-inline: auto; }

.hw-prose table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--hw-fs-sm);
	line-height: 1.55;
	border: 1px solid var(--hw-border);
	border-radius: var(--hw-radius);
	overflow: hidden;
}

.hw-prose .wp-block-table,
.hw-prose .hw-table-scroll { overflow-x: auto; }

.hw-prose th,
.hw-prose td,
.hw-prose .wp-block-table th,
.hw-prose .wp-block-table td {
	padding: 0.8em 1.05em;
	border: 0;
	border-bottom: 1px solid var(--hw-border-soft);
	text-align: left;
	vertical-align: top;
}

.hw-prose .wp-block-table thead { border-bottom: 0; }

.hw-prose th + th,
.hw-prose td + td,
.hw-prose th + td { border-left: 1px solid var(--hw-border-soft); }

.hw-prose tr:last-child > * { border-bottom: 0; }

.hw-prose th {
	background: var(--hw-surface-2);
	color: var(--hw-text);
	font-family: var(--hw-font-head);
	font-weight: 700;
}

.hw-prose thead th {
	font-size: 0.86em;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.hw-prose tbody th { background: transparent; }

:is(.hw-light, .hw-sheet, .hw-paper, .hw-section--light) .hw-prose table { background: #fff; box-shadow: var(--hw-light-shadow-sm); }

.hw-prose tbody tr:nth-child(even) > * { background: rgba(127, 134, 181, 0.05); }

/* Code: always a dark island, even on the light canvas. */
.hw-prose pre,
.hw-prose .wp-block-code {
	overflow-x: auto;
	padding: 1.15em 1.35em;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--hw-radius-lg);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 40px),
		#070934;
	box-shadow: var(--hw-shadow);
	color: #e5e8ff;
	font-size: 0.86em;
	line-height: 1.7;
	tab-size: 2;
}

.hw-prose pre code,
.hw-prose .wp-block-code code {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

.hw-prose :not(pre) > code {
	color: var(--hw-pink-text);
	background: color-mix(in srgb, var(--hw-accent-bright) 8%, transparent);
	border-color: color-mix(in srgb, var(--hw-accent-bright) 18%, transparent);
}

.hw-prose mark {
	padding: 0 0.2em;
	border-radius: 4px;
	background: linear-gradient(120deg, rgba(1, 200, 239, 0.3), rgba(139, 108, 255, 0.25));
	color: inherit;
}

.hw-prose hr { height: 2px; margin-block: 2.5em; background: linear-gradient(90deg, transparent, var(--hw-border), transparent); }

.hw-prose .wp-block-button__link {
	display: inline-flex;
	padding: 0.8em 1.5em;
	border-radius: var(--hw-radius-btn);
	background: var(--hw-gradient-cta);
	box-shadow: var(--hw-glow-accent);
	color: #fff;
	font-family: var(--hw-font-head);
	font-weight: 700;
	text-decoration: none;
}

/* Optional drop cap on the first paragraph. */
.hw-prose--dropcap > p:first-of-type::first-letter {
	float: left;
	margin: 0.06em 0.12em 0 0;
	font-family: var(--hw-font-head);
	font-size: 3.6em;
	font-weight: 800;
	line-height: 0.82;
	background: var(--hw-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Lead paragraph of an article. */
.hw-prose .hw-prose__lead,
.hw-prose > .is-style-lead { font-size: var(--hw-fs-lg); line-height: 1.65; color: var(--hw-text); }

/* ---------- Callouts ---------- */

.hw-callout {
	--hw-callout: var(--hw-info);
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.85em;
	padding: 1.1em 1.3em;
	border: 1px solid color-mix(in srgb, var(--hw-callout) 35%, transparent);
	border-radius: var(--hw-radius-lg);
	background: color-mix(in srgb, var(--hw-callout) 8%, transparent);
	font-size: var(--hw-fs-sm);
	line-height: 1.65;
}

.hw-callout > .hw-icon { --hw-icon-size: 1.4em; color: var(--hw-callout); }

.hw-callout__title {
	display: block;
	margin-bottom: 0.2em;
	font-family: var(--hw-font-head);
	font-weight: 800;
	color: var(--hw-text);
}

.hw-callout p { margin: 0; }

.hw-callout--tip { --hw-callout: var(--hw-cyan); }

.hw-callout--success { --hw-callout: var(--hw-success); }

.hw-callout--warning { --hw-callout: var(--hw-warning); }

.hw-callout--danger { --hw-callout: var(--hw-danger); }

/* ---------- Key takeaways (top of articles) ---------- */

.hw-key-takeaways {
	position: relative;
	padding: clamp(1.3rem, 1rem + 1.4vw, 2rem);
	border-radius: var(--hw-radius-xl);
	background:
		radial-gradient(500px 200px at 0% 0%, rgba(1, 200, 239, 0.12), transparent 70%),
		radial-gradient(400px 200px at 100% 100%, rgba(243, 53, 91, 0.08), transparent 70%),
		var(--hw-surface);
	box-shadow: var(--hw-shadow);
	isolation: isolate;
}

.hw-key-takeaways::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 1.5px;
	border-radius: inherit;
	background: var(--hw-hairline-brand);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}

.hw-key-takeaways__title,
.hw-key-takeaways > h2,
.hw-key-takeaways > p:first-child strong,
.hw-key-takeaways > .wp-block-group__inner-container > h2:first-child,
.hw-key-takeaways > .wp-block-group__inner-container > p:first-child strong {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 0.85em;
	font-family: var(--hw-font-head);
	font-size: var(--hw-fs-sm);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hw-cyan);
}

.hw-key-takeaways > p:first-child,
.hw-key-takeaways > .wp-block-group__inner-container > p:first-child { margin: 0; }

.hw-key-takeaways > p:first-child strong::before,
.hw-key-takeaways > .wp-block-group__inner-container > p:first-child strong::before,
.hw-key-takeaways__title::before {
	content: "";
	width: 1.6em;
	height: 1.6em;
	flex: none;
	border-radius: 8px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2z'/%3E%3C/svg%3E") center / 62% no-repeat,
		var(--hw-gradient-brand);
	box-shadow: 0 6px 16px -6px rgba(139, 108, 255, 0.8);
}

.hw-key-takeaways .wp-block-group__inner-container > * + * { margin-top: 0.9em; }

.hw-key-takeaways ul,
.hw-key-takeaways ol {
	display: grid;
	gap: 0.65em;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hw-kt;
}

.hw-key-takeaways li {
	position: relative;
	margin: 0;
	padding-left: 2.1em;
	font-size: var(--hw-fs-base);
	line-height: 1.6;
	color: var(--hw-text);
}

.hw-key-takeaways li::before {
	counter-increment: hw-kt;
	content: counter(hw-kt);
	position: absolute;
	left: 0;
	top: 0.1em;
	display: grid;
	place-items: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: var(--hw-gradient-brand);
	color: #fff;
	font-family: var(--hw-font-head);
	font-size: 0.8em;
	font-weight: 800;
}

.hw-prose .hw-key-takeaways li + li { margin-top: 0; }

/* ---------- FAQ block (inside articles) ---------- */

.hw-faq-block { margin-top: 2.5em; }

.hw-faq-block > h2,
.hw-faq-block__title { margin-top: 0; }

.hw-faq-block details:not(.hw-accordion__item) { border-bottom: 1px solid var(--hw-border); }

.hw-faq-block summary:not(.hw-accordion__q) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1em 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--hw-font-head);
	font-size: var(--hw-fs-base);
	font-weight: 700;
	color: var(--hw-text);
}

.hw-faq-block summary::-webkit-details-marker { display: none; }

.hw-faq-block summary:not(.hw-accordion__q)::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border-right: 2px solid var(--hw-text-muted);
	border-bottom: 2px solid var(--hw-text-muted);
	transform: rotate(45deg) translateY(-3px);
	transition: transform var(--hw-dur) var(--hw-ease);
}

.hw-faq-block details:not(.hw-accordion__item)[open] summary::after { transform: rotate(225deg) translateY(-3px); }

.hw-faq-block details:not(.hw-accordion__item) > :not(summary) { margin: 0 0 1em; color: var(--hw-text-muted); font-size: var(--hw-fs-sm); }

.hw-faq-block details:not(.hw-accordion__item)::details-content { block-size: 0; overflow: hidden; transition: block-size 320ms var(--hw-ease), content-visibility 320ms allow-discrete; }

.hw-faq-block details:not(.hw-accordion__item)[open]::details-content { block-size: auto; }

.hw-prose .hw-accordion { margin-top: 1.25em; }

.hw-prose .hw-accordion__item + .hw-accordion__item { margin-top: 0; }

.hw-prose .hw-accordion__q-text { margin: 0; font-size: var(--hw-fs-base); line-height: 1.4; }

.hw-prose .hw-accordion__q-text::before { content: none; }

/* ---------- Paper (legal pages) ---------- */

.hw-paper {
	padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	border-radius: var(--hw-radius-xl);
	background: var(--hw-light-surface);
	box-shadow: var(--hw-shadow-xl);
}

:is(.hw-light, .hw-sheet, .hw-section--light, .hw-paper, .hw-card--light) .hw-prose a { color: var(--hw-link); }

/* ---------- Search form (searchform.php: 404, search results) ---------- */

.hw-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hw-space-2);
	width: 100%;
	max-width: 560px;
}

.hw-search-form .hw-input { flex: 1 1 260px; min-width: 0; }

/* ---------- Quick search field (FAQ, glossary: assets/js/content.js filter) ---------- */

.hw-qsearch {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 620px;
	margin-top: var(--hw-space-6);
	border-radius: var(--hw-radius-pill);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
		var(--hw-glass);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), var(--hw-shadow-lg), var(--hw-inner-hl);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	transition: box-shadow var(--hw-dur) var(--hw-ease);
}

.hw-qsearch:focus-within {
	box-shadow: 0 0 0 1px rgba(1, 200, 239, 0.75), 0 0 0 5px rgba(1, 200, 239, 0.16), 0 24px 60px -24px rgba(1, 200, 239, 0.55);
}

.hw-qsearch__icon {
	position: absolute;
	left: 1.25rem;
	display: grid;
	color: var(--hw-cyan);
	pointer-events: none;
}

.hw-qsearch__icon .hw-icon { --hw-icon-size: 22px; }

.hw-qsearch__input {
	width: 100%;
	min-height: 64px;
	padding: 0 3.75rem 0 3.4rem;
	border: 0;
	border-radius: inherit;
	background: transparent;
	color: var(--hw-text);
	font: inherit;
	font-size: max(1rem, var(--hw-fs-md));
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.hw-qsearch__input::placeholder { color: var(--hw-text-faint); opacity: 1; }

.hw-qsearch__input::-webkit-search-cancel-button { display: none; }

.hw-qsearch__reset {
	position: absolute;
	right: 0.65rem;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--hw-text);
	cursor: pointer;
}

.hw-qsearch__reset:hover { background: rgba(255, 255, 255, 0.16); }

.hw-qsearch__reset .hw-icon { --hw-icon-size: 18px; }

.hw-qsearch__count {
	margin: var(--hw-space-3) 0 0 1.4rem;
	font-size: var(--hw-fs-xs);
	font-weight: 600;
	color: var(--hw-text-muted);
	font-variant-numeric: tabular-nums;
}

:is(.hw-light, .hw-sheet, .hw-paper) .hw-qsearch {
	background: #fff;
	box-shadow: 0 0 0 1px var(--hw-light-border-strong), var(--hw-light-shadow);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

:is(.hw-light, .hw-sheet, .hw-paper) .hw-qsearch__reset { background: var(--hw-light-bg-2); }

/* Items hidden by the filter (the [hidden] attribute must win over display rules). */
[data-hw-filter-item][hidden],
[data-hw-filter-group][hidden],
[data-hw-filter-empty][hidden] { display: none !important; }

@media (prefers-contrast: more) {
	.hw-qsearch { box-shadow: 0 0 0 2px currentColor; background: var(--hw-bg); }
}