/*!
 * Hostreta Frontend Articles — public styles
 * Matches hostreta.com: terminal / server-room ink, blue logo gradient, gold for monetization.
 * All rules are scoped under .hfa so the theme is never affected.
 */

/* ---------- Tokens ---------------------------------------------------- */
.hfa {
	--hfa-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--hfa-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", Arial, sans-serif;

	/* Dark (default — hostreta terminal) */
	--hfa-bg: #0b1424;
	--hfa-surface: #0f1b2e;
	--hfa-surface-2: #14233b;
	--hfa-line: #22344f;
	--hfa-text: #dce6f6;
	--hfa-muted: #8c9cb7;
	--hfa-blue: #4f8bff;
	--hfa-blue-2: #38bdf8;
	--hfa-blue-ink: #0a1f4a;
	--hfa-gold: #f5b83d;
	--hfa-ok: #3ddc97;
	--hfa-bad: #ff7a7a;
	--hfa-warn: #ffcb57;
	--hfa-focus: 0 0 0 3px rgba(79, 139, 255, .45);
	--hfa-radius: 10px;
	--hfa-radius-sm: 6px;

	/* Bootstrap bridge (scoped) */
	--bs-body-color: var(--hfa-text);
	--bs-body-bg: var(--hfa-surface);
	--bs-border-color: var(--hfa-line);
	--bs-secondary-color: var(--hfa-muted);
	--bs-link-color-rgb: 79, 139, 255;
	--bs-emphasis-color: var(--hfa-text);

	color: var(--hfa-text);
	font-family: var(--hfa-font-sans);
	font-size: 1rem;
	line-height: 1.6;
	margin-block: 1.5rem;
	-webkit-font-smoothing: antialiased;
}

.hfa[data-hfa-theme="light"],
.hfa[data-hfa-scheme="light"] {
	--hfa-bg: #eef3fa;
	--hfa-surface: #ffffff;
	--hfa-surface-2: #f4f7fc;
	--hfa-line: #d6e0ee;
	--hfa-text: #111c2e;
	--hfa-muted: #55657f;
	--hfa-blue: #1d4ed8;
	--hfa-blue-2: #0ea5e9;
	--hfa-blue-ink: #ffffff;
	--hfa-gold: #b7791f;
	--hfa-ok: #0f8a5f;
	--hfa-bad: #c53030;
	--hfa-warn: #a16207;
	--hfa-focus: 0 0 0 3px rgba(29, 78, 216, .35);
	--bs-link-color-rgb: 29, 78, 216;
}

@media (prefers-color-scheme: light) {
	.hfa[data-hfa-scheme="auto"]:not([data-hfa-theme="dark"]) {
		--hfa-bg: #eef3fa;
		--hfa-surface: #ffffff;
		--hfa-surface-2: #f4f7fc;
		--hfa-line: #d6e0ee;
		--hfa-text: #111c2e;
		--hfa-muted: #55657f;
		--hfa-blue: #1d4ed8;
		--hfa-blue-2: #0ea5e9;
		--hfa-blue-ink: #ffffff;
		--hfa-gold: #b7791f;
		--hfa-ok: #0f8a5f;
		--hfa-bad: #c53030;
		--hfa-warn: #a16207;
	}
}

/* ---------- Window chrome (the signature element) --------------------- */
.hfa-window {
	background: var(--hfa-surface);
	border: 1px solid var(--hfa-line);
	border-radius: var(--hfa-radius);
	overflow: hidden;
}
.hfa-window--compact { max-width: 720px; margin-inline: auto; }

.hfa-window__bar {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .65rem 1rem;
	background: var(--hfa-bg);
	border-bottom: 1px solid var(--hfa-line);
	font-family: var(--hfa-font-mono);
	font-size: .8rem;
	color: var(--hfa-muted);
	position: relative;
}
.hfa-window__bar::after { /* logo gradient hairline */
	content: "";
	position: absolute;
	inset: auto 0 -1px 0;
	height: 2px;
	background: linear-gradient(90deg, var(--hfa-blue), var(--hfa-blue-2) 60%, transparent);
}
.hfa-window__lights { display: inline-flex; gap: 6px; flex: none; }
.hfa-window__lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--hfa-line); display: block; }
.hfa-prompt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hfa-prompt b { color: var(--hfa-blue-2); font-weight: 700; }
.hfa-caret {
	display: inline-block;
	width: .55em;
	height: 1em;
	margin-inline-start: .3em;
	vertical-align: -.15em;
	background: var(--hfa-blue);
	animation: hfa-blink 1.1s steps(1) infinite;
}
@keyframes hfa-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hfa-caret { animation: none; } }

.hfa-pad { padding: clamp(1.1rem, 3vw, 2rem); }

/* ---------- Type -------------------------------------------------------- */
.hfa-title {
	font-family: var(--hfa-font-mono);
	font-weight: 700;
	font-size: clamp(1.3rem, 2.4vw, 1.65rem);
	letter-spacing: -.01em;
	line-height: 1.25;
	color: var(--hfa-text);
	margin: 0 0 .4rem;
}
.hfa-subtitle {
	font-family: var(--hfa-font-mono);
	font-size: 1rem;
	font-weight: 600;
	margin: 1.75rem 0 .75rem;
	color: var(--hfa-text);
}
.hfa-muted, .hfa .form-text { color: var(--hfa-muted); }
.hfa a:not(.btn) { color: var(--hfa-blue); text-underline-offset: 3px; }
.hfa code { font-family: var(--hfa-font-mono); color: var(--hfa-blue-2); background: transparent; font-size: .85em; }

/* ---------- Form layout ------------------------------------------------- */
.hfa-form { padding: clamp(1.1rem, 3vw, 2rem); border-inline-end: 1px solid var(--hfa-line); }
.hfa-form__head { margin-bottom: 1.5rem; max-width: 62ch; }

.hfa-step { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; }
.hfa-step__legend {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--hfa-font-mono);
	font-size: .95rem;
	font-weight: 600;
	color: var(--hfa-text);
	margin-bottom: 1rem;
	padding-bottom: .6rem;
	border-bottom: 1px dashed var(--hfa-line);
	width: 100%;
	float: none;
}
.hfa-step__n {
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: var(--hfa-radius-sm);
	background: var(--hfa-blue);
	color: var(--hfa-blue-ink);
	font-size: .8rem;
	font-weight: 700;
}

.hfa .form-label { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; color: var(--hfa-text); }
.hfa-req { color: var(--hfa-bad); margin-inline-start: .15rem; }

.hfa .form-control,
.hfa .form-select {
	background-color: var(--hfa-surface-2);
	border: 1px solid var(--hfa-line);
	color: var(--hfa-text);
	border-radius: var(--hfa-radius-sm);
	font-family: var(--hfa-font-sans);
}
.hfa .form-control::placeholder { color: var(--hfa-muted); opacity: .75; }
.hfa .form-control:focus,
.hfa .form-select:focus,
.hfa .form-check-input:focus {
	border-color: var(--hfa-blue);
	box-shadow: var(--hfa-focus);
	background-color: var(--hfa-surface-2);
	color: var(--hfa-text);
}
.hfa .form-control[readonly] { opacity: .75; }
.hfa .form-control-lg { font-family: var(--hfa-font-mono); font-size: 1.1rem; }
.hfa .form-control.is-invalid,
.hfa .form-select.is-invalid { border-color: var(--hfa-bad); }
.hfa .invalid-feedback { color: var(--hfa-bad); font-size: .85rem; }
.hfa .form-check-input { background-color: var(--hfa-surface-2); border-color: var(--hfa-line); }
.hfa .form-check-input:checked { background-color: var(--hfa-blue); border-color: var(--hfa-blue); }

/* Dark select chevron */
.hfa:not([data-hfa-theme="light"]) .form-select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238c9cb7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Honeypot: off-screen, not display:none */
.hfa-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* WordPress editor inside the dark form */
.hfa-editor .wp-editor-wrap { border: 1px solid var(--hfa-line); border-radius: var(--hfa-radius-sm); overflow: hidden; }
.hfa-editor.is-invalid .wp-editor-wrap { border-color: var(--hfa-bad); }
.hfa-editor .wp-editor-tabs button { font-family: var(--hfa-font-mono); font-size: .75rem; }
.hfa-editor .wp-editor-area { background: var(--hfa-surface-2); color: var(--hfa-text); font-family: var(--hfa-font-mono); border: 0; }
.hfa-editor .quicktags-toolbar { background: var(--hfa-bg); border-color: var(--hfa-line); }
.hfa-editor .mce-panel { background: var(--hfa-surface-2) !important; }

/* Image drop */
.hfa-drop {
	border: 1px dashed var(--hfa-line);
	border-radius: var(--hfa-radius-sm);
	padding: .9rem;
	background: var(--hfa-bg);
}
.hfa-drop.is-invalid { border-color: var(--hfa-bad); }
.hfa-drop__preview { max-height: 180px; width: auto; max-width: 100%; border-radius: var(--hfa-radius-sm); margin-bottom: .75rem; display: block; }

/* Article type choice */
.hfa-types { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 1.25rem; }
.hfa-type {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	padding: .9rem 1rem;
	border: 1px solid var(--hfa-line);
	border-radius: var(--hfa-radius-sm);
	background: var(--hfa-surface-2);
	cursor: pointer;
}
.hfa-type .form-check-input { margin-top: .3rem; flex: none; }
.hfa-type:has(input:checked) { border-color: var(--hfa-blue); box-shadow: inset 3px 0 0 var(--hfa-blue); }
.hfa-type--sponsored:has(input:checked) { border-color: var(--hfa-gold); box-shadow: inset 3px 0 0 var(--hfa-gold); }
.hfa-type__name { display: block; font-family: var(--hfa-font-mono); font-weight: 600; }
.hfa-type--sponsored .hfa-type__name { color: var(--hfa-gold); }
.hfa-type__desc { display: block; font-size: .85rem; color: var(--hfa-muted); }

.hfa-consent { margin-bottom: 1rem; }
.hfa-consent .form-check-label { font-size: .92rem; }

/* Actions */
.hfa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding-top: .5rem; }
.hfa-btn {
	font-family: var(--hfa-font-mono);
	font-weight: 600;
	font-size: .92rem;
	border-radius: var(--hfa-radius-sm);
	padding: .65rem 1.2rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.hfa-btn--primary {
	background: linear-gradient(135deg, var(--hfa-blue), var(--hfa-blue-2));
	color: #fff;
	border: 0;
}
.hfa-btn--primary:hover, .hfa-btn--primary:focus-visible { color: #fff; filter: brightness(1.08); }
.hfa-btn--ghost { background: transparent; color: var(--hfa-text); border: 1px solid var(--hfa-line); }
.hfa-btn--ghost:hover { border-color: var(--hfa-blue); color: var(--hfa-text); }
.hfa-btn--gold { background: var(--hfa-gold); color: #1a1204; border: 0; }
.hfa-btn:focus-visible { outline: none; box-shadow: var(--hfa-focus); }
.hfa-btn[disabled] { opacity: .7; cursor: progress; }

/* ---------- Preflight panel ------------------------------------------- */
.hfa-preflight { background: var(--hfa-bg); }
.hfa-preflight__inner { padding: clamp(1.1rem, 3vw, 1.75rem); position: sticky; top: 1rem; }
.hfa-preflight__title { font-family: var(--hfa-font-mono); font-size: .95rem; font-weight: 700; margin: 0 0 .9rem; color: var(--hfa-text); }
.hfa-progress { height: 6px; background: var(--hfa-line); border-radius: 99px; margin-bottom: 1.1rem; }
.hfa-progress .progress-bar { background: linear-gradient(90deg, var(--hfa-blue), var(--hfa-blue-2)); transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .hfa-progress .progress-bar { transition: none; } }

.hfa-checks { list-style: none; margin: 0 0 1.5rem; padding: 0; font-family: var(--hfa-font-mono); font-size: .82rem; }
.hfa-checks li {
	display: grid;
	grid-template-columns: 1.4rem 1fr auto;
	align-items: center;
	gap: .4rem;
	padding: .45rem 0;
	border-bottom: 1px solid var(--hfa-line);
	color: var(--hfa-muted);
}
.hfa-checks__mark::before { content: "·"; color: var(--hfa-muted); font-weight: 700; }
.hfa-checks li.is-ok { color: var(--hfa-text); }
.hfa-checks li.is-ok .hfa-checks__mark::before { content: "✓"; color: var(--hfa-ok); }
.hfa-checks li.is-bad .hfa-checks__mark::before { content: "✗"; color: var(--hfa-bad); }
.hfa-checks code { color: var(--hfa-muted); font-size: .8rem; }
.hfa-checks li.is-ok code { color: var(--hfa-ok); }
.hfa-checks li.is-bad code { color: var(--hfa-bad); }

.hfa-preflight__rules { font-size: .85rem; color: var(--hfa-muted); }
.hfa-preflight__rules ol { padding-inline-start: 1.1rem; }

/* ---------- Messages ------------------------------------------------- */
.hfa-alert { border-radius: var(--hfa-radius-sm); border-width: 1px; font-size: .95rem; }
.hfa .alert-danger { background: color-mix(in srgb, var(--hfa-bad) 12%, var(--hfa-surface)); border-color: color-mix(in srgb, var(--hfa-bad) 45%, transparent); color: var(--hfa-text); }
.hfa .alert-success { background: color-mix(in srgb, var(--hfa-ok) 12%, var(--hfa-surface)); border-color: color-mix(in srgb, var(--hfa-ok) 45%, transparent); color: var(--hfa-text); }
.hfa .alert-info { background: color-mix(in srgb, var(--hfa-blue) 12%, var(--hfa-surface)); border-color: color-mix(in srgb, var(--hfa-blue) 45%, transparent); color: var(--hfa-text); }

.hfa-callout {
	border-inline-start: 3px solid var(--hfa-line);
	background: var(--hfa-surface-2);
	padding: .75rem 1rem;
	border-radius: 0 var(--hfa-radius-sm) var(--hfa-radius-sm) 0;
	margin-bottom: 1.25rem;
}
.hfa-callout--warn { border-inline-start-color: var(--hfa-warn); }

.hfa-notice { padding: clamp(1.25rem, 3vw, 2rem); }
.hfa-notice--warning { border-inline-start: 3px solid var(--hfa-warn); }
.hfa-notice--danger { border-inline-start: 3px solid var(--hfa-bad); }

.hfa-success { padding: clamp(1.25rem, 4vw, 2.5rem); }
.hfa-success:focus { outline: none; }
.hfa-tracking { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; font-family: var(--hfa-font-mono); }
.hfa-tracking span { color: var(--hfa-muted); font-size: .85rem; }
.hfa-tracking code { font-size: 1.15rem; color: var(--hfa-blue-2); letter-spacing: .02em; }

/* ---------- Lists / tables / dashboard ------------------------------- */
.hfa-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.25rem; }
.hfa-tabs__item {
	font-family: var(--hfa-font-mono);
	font-size: .8rem;
	padding: .35rem .7rem;
	border: 1px solid var(--hfa-line);
	border-radius: 99px;
	text-decoration: none !important;
	color: var(--hfa-muted) !important;
}
.hfa-tabs__item.is-active, .hfa-tabs__item:hover { color: var(--hfa-text) !important; border-color: var(--hfa-blue); }
.hfa-tabs__count { color: var(--hfa-blue-2); margin-inline-start: .2rem; }

.hfa-table { --bs-table-bg: transparent; --bs-table-color: var(--hfa-text); --bs-table-border-color: var(--hfa-line); font-size: .92rem; }
.hfa-table thead th { font-family: var(--hfa-font-mono); font-size: .75rem; font-weight: 600; color: var(--hfa-muted); border-bottom-width: 1px; }
.hfa-badge { font-family: var(--hfa-font-mono); font-weight: 600; font-size: .72rem; }
.hfa-pagination .page-link { background: var(--hfa-surface-2); border-color: var(--hfa-line); color: var(--hfa-text); font-family: var(--hfa-font-mono); }
.hfa-pagination .active .page-link { background: var(--hfa-blue); border-color: var(--hfa-blue); color: #fff; }

.hfa-empty { text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--hfa-line); border-radius: var(--hfa-radius-sm); }

.hfa-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--hfa-line); border: 1px solid var(--hfa-line); border-radius: var(--hfa-radius-sm); overflow: hidden; margin: 0; }
.hfa-stats__item { background: var(--hfa-surface-2); padding: 1rem; }
.hfa-stats dt { font-size: .8rem; font-weight: 500; color: var(--hfa-muted); }
.hfa-stats dd { font-family: var(--hfa-font-mono); font-size: 1.6rem; font-weight: 700; margin: 0; color: var(--hfa-text); }

.hfa-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.hfa-list__item { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--hfa-line); }
.hfa-list__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hfa-link { font-family: var(--hfa-font-mono); font-size: .85rem; }

/* ---------- Author box (on single posts, follows theme colors) -------- */
.hfa-author-box {
	margin: 2.5rem 0 1rem;
	padding: 1.25rem 1.4rem;
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 18%, transparent);
	border-inline-start: 3px solid #3b82f6;
	border-radius: 8px;
	font-family: inherit;
	color: inherit;
	--hfa-text: inherit;
}
.hfa-author-box__label { font-family: var(--hfa-font-mono); font-size: .75rem; opacity: .7; margin: 0 0 .25rem; }
.hfa-author-box__name { font-family: var(--hfa-font-mono); font-weight: 700; margin: 0 0 .4rem; }
.hfa-author-box__bio { margin: 0 0 .5rem; }
.hfa-author-box__link { font-family: var(--hfa-font-mono); font-size: .85rem; }

/* ---------- Responsive ------------------------------------------------ */
@media (max-width: 991.98px) {
	.hfa-form { border-inline-end: 0; border-bottom: 1px solid var(--hfa-line); }
	.hfa-preflight { order: -1; }
	.hfa-preflight__inner { position: static; }
	.hfa-preflight__rules { display: none; }
}
@media (max-width: 575.98px) {
	.hfa-window { border-radius: 0; border-inline: 0; }
	.hfa-actions .hfa-btn { width: 100%; justify-content: center; }
	.hfa-window__lights { display: none; }
}