/*
Theme Name: itsdark Starter
Theme URI: https://itsdark.io/
Description: Minimal dark starter theme for itsdark.io, to use until the full theme is designed. System fonts and no external requests, so it's fast and private for Tor visitors. Includes styles for the Sonar Index.
Version: 0.1.1
Requires at least: 6.4
Requires PHP: 8.1
Author: itsdark.io
License: GPL-2.0-or-later
Text Domain: itsdark
*/

/* ------------------------------------------------------------ tokens */
:root {
	--bg: #070b16;
	--bg-raise: #0e1528;
	--ink: #e9edf5;
	--muted: #9aa6bd;
	--rule: #1f2a44;
	--accent: #f2b134;
	--accent-soft: rgba(242, 177, 52, 0.12);
	--link: #ffd27a;
	--measure: 70ch;
	--wide: 1120px;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	color-scheme: dark;
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font: 400 1.0625rem/1.7 var(--font);
	color: var(--ink);
	background: var(--bg);
	/* the page darkens as you go deeper */
	background-image: linear-gradient(180deg, #16244a 0, #0b1226 520px, var(--bg) 1400px);
	background-repeat: no-repeat;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: #0b0f1a; }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 16px; top: 16px; z-index: 100; background: var(--accent); color: #0b0f1a; padding: 8px 14px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: calc(var(--measure) + 40px); }
main { flex: 1; }

/* ------------------------------------------------------------ header */
.site-header { border-bottom: 1px solid var(--rule); background: rgba(7, 11, 22, 0.55); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { display: block; width: 168px; height: auto; }
.brand-text { font-weight: 700; font-size: 1.3rem; color: var(--ink); letter-spacing: -0.02em; }
.brand-text span { color: var(--accent); }

.nav-toggle { display: none; background: none; border: 1px solid var(--rule); color: var(--ink); border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 0.9rem; cursor: pointer; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.primary-nav a { color: var(--muted); text-decoration: none; font-size: 0.95rem; }
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current-cat > a { color: var(--ink); }

@media (max-width: 760px) {
	.nav-toggle { display: inline-block; }
	.primary-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg-raise); border-bottom: 1px solid var(--rule); padding: 12px 20px 18px; }
	.primary-nav.is-open { display: block; }
	.primary-nav ul { flex-direction: column; gap: 10px; }
	.brand img { width: 140px; }
}

/* ------------------------------------------------------------ home */
.hero { padding: 72px 0 40px; }
.eyebrow { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 18px; max-width: 18ch; }
.hero .lede { font-size: 1.2rem; color: var(--muted); max-width: 46ch; margin: 0; }
.hero .sonar-stats { margin-top: 26px; display: inline-block; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 16px; font-size: 0.92rem; color: var(--muted); background: rgba(14, 21, 40, 0.6); }
.hero .sonar-stats strong { color: var(--ink); }

.zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; padding: 18px 0 56px; }
.zone { border: 1px solid var(--rule); border-radius: 12px; padding: 20px 20px 18px; background: rgba(14, 21, 40, 0.55); }
.zone .depth { font: 600 0.78rem var(--mono); color: var(--accent); letter-spacing: 0.04em; }
.zone h2 { font-size: 1.12rem; margin: 6px 0 6px; letter-spacing: -0.01em; }
.zone p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }

.section-title { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; padding-top: 28px; border-top: 1px solid var(--rule); }
.empty-note { border: 1px dashed var(--rule); border-radius: 12px; padding: 22px; color: var(--muted); margin-bottom: 56px; }
.empty-note strong { color: var(--ink); }

/* ------------------------------------------------------------ post lists */
.post-list { list-style: none; margin: 0 0 56px; padding: 0; }
.post-list li { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.post-list h2, .post-list h3 { font-size: 1.3rem; line-height: 1.3; margin: 4px 0 6px; letter-spacing: -0.01em; }
.post-list h2 a, .post-list h3 a { color: var(--ink); text-decoration: none; }
.post-list h2 a:hover, .post-list h3 a:hover { color: var(--accent); }
.post-list p { margin: 0; color: var(--muted); }
.meta { font-size: 0.85rem; color: var(--muted); }
.meta a { color: var(--muted); }
.cat-link { color: var(--accent); text-decoration: none; font-weight: 600; }

.archive-head { padding: 52px 0 10px; }
.archive-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.15; }
.archive-head .desc { color: var(--muted); max-width: 60ch; }
.pagination { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 60px; }
.pagination .page-numbers { padding: 6px 12px; border: 1px solid var(--rule); border-radius: 6px; text-decoration: none; color: var(--ink); }
.pagination .current { background: var(--accent); color: #0b0f1a; border-color: var(--accent); }

/* ------------------------------------------------------------ article */
.entry-head { padding: 56px 0 8px; }
.entry-head h1 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.12; letter-spacing: -0.025em; margin: 8px 0 14px; }
.entry-head .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.entry-content { padding: 18px 0 40px; }
.entry-content > * { margin-top: 0; margin-bottom: 1.15em; }
.entry-content h2 { font-size: 1.6rem; line-height: 1.25; letter-spacing: -0.015em; margin-top: 1.9em; }
.entry-content h3 { font-size: 1.25rem; line-height: 1.3; margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin: 0.3em 0; }
.entry-content blockquote { margin-left: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); color: var(--muted); }
.entry-content code { font: 0.88em var(--mono); background: var(--bg-raise); padding: 0.12em 0.35em; border-radius: 4px; word-break: break-word; }
.entry-content pre { background: var(--bg-raise); border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px; overflow-x: auto; }
.entry-content pre code { background: none; padding: 0; }
.entry-content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2em 0; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content th, .entry-content td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.entry-content th { color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.entry-content figure { margin-left: 0; margin-right: 0; }
.entry-content figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.entry-content .alignwide { max-width: min(var(--wide), 100vw - 40px); margin-left: 50%; transform: translateX(-50%); width: min(var(--wide), 100vw - 40px); }

/* Callouts for the Signal answer box and the Lantern safety box:
   add the class "signal" or "lantern" to a Group or Paragraph block (Block → Advanced → Additional CSS class). */
.signal, .lantern { border-radius: 10px; padding: 16px 18px; border: 1px solid var(--rule); }
.signal { background: rgba(14, 21, 40, 0.8); border-left: 3px solid var(--link); font-size: 1.08rem; }
.lantern { background: var(--accent-soft); border-color: rgba(242, 177, 52, 0.35); }
.lantern::before { content: "Lantern"; display: block; font: 600 0.75rem var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.signal > :last-child, .lantern > :last-child { margin-bottom: 0; }

.entry-foot { border-top: 1px solid var(--rule); padding: 20px 0 60px; font-size: 0.9rem; color: var(--muted); }

/* ------------------------------------------------------------ search, 404 */
.search-form { display: flex; gap: 8px; max-width: 520px; margin: 20px 0 40px; }
.search-form input[type="search"] { flex: 1; font: inherit; color: var(--ink); background: var(--bg-raise); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; }
.search-form button { font: inherit; font-weight: 600; background: var(--accent); color: #0b0f1a; border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer; }

/* ------------------------------------------------------------ footer */
.site-footer { border-top: 1px solid var(--rule); padding: 40px 0 44px; font-size: 0.9rem; color: var(--muted); background: rgba(3, 5, 11, 0.6); }
.site-footer .wrap { display: grid; gap: 28px; grid-template-columns: 1.4fr 1fr 1fr; }
.foot-tagline { color: var(--ink); max-width: 40ch; margin: 0 0 10px; }
.foot-head { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.onion { margin: 10px 0 0; font-size: 0.85rem; }
.onion code { font-family: var(--mono); color: var(--link); word-break: break-all; }
.copyright { margin-top: 14px; font-size: 0.8rem; }
@media (max-width: 860px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .foot-about { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ WordPress bits */
.alignleft { float: left; margin: 0 1.2em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.2em; }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.wp-caption-text, .gallery-caption { font-size: 0.85rem; color: var(--muted); }
.sticky, .bypostauthor { }

/* ------------------------------------------------------------ overrides for WordPress block styles */
.entry-content .wp-block-table table,
.entry-content .wp-block-table th,
.entry-content .wp-block-table td,
.entry-content .wp-block-table thead,
.entry-content .wp-block-table tfoot { border: 0; }
.entry-content .wp-block-table th,
.entry-content .wp-block-table td { border-bottom: 1px solid var(--rule); }
.entry-content .wp-block-table thead th { border-bottom-color: #33405e; }
.entry-content .wp-block-quote { border-left: 3px solid var(--accent); }
.entry-content .sonar-addr { background: none; padding: 0; font-size: 0.8em; }
.entry-content .sonar-index { font-size: 0.92rem; }