/*
Theme Name: Tools Hub Theme
Theme URI: https://example.com/tools-hub-theme
Author: Tools Hub
Author URI: https://example.com
Description: A clean, fast, dark theme built to pair with the Tools Hub plugin. Full-width tool pages, a minimal header and footer, and a layout that lets the tools grid take centre stage. Works with any plugin, but looks best with Tools Hub.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: toolshub-theme
Tags: dark, one-column, full-width-template, custom-menu, blog
*/

:root {
	--bg: #0b121b;
	--surface: #0f1722;
	--border: #1f2a38;
	--text: #e6edf5;
	--muted: #9fb0c3;
	--accent: #ff6a3d;
	--accent-2: #4f8cff;
	--maxw: 1280px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--accent-2); }

img { max-width: 100%; height: auto; }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(11, 18, 27, .9);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
}
.site-header__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}
.site-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 1.2rem;
	text-decoration: none;
	color: var(--text);
}
.site-brand .logo-mark {
	width: 32px; height: 32px;
	display: grid; place-items: center;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--accent), #ff9d3d);
	color: #fff; font-weight: 900;
}
.main-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.main-nav a {
	color: var(--muted);
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 8px;
	font-size: .95rem;
	font-weight: 600;
}
.main-nav a:hover, .main-nav .current-menu-item a { color: var(--text); background: var(--surface); }
.nav-cta { background: var(--accent) !important; color: #fff !important; }

/* ---------- Content ---------- */
.site-main { min-height: 60vh; }
.page-full .site-main { max-width: 100%; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 30px 18px 60px; }

.entry-title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 16px; letter-spacing: -.02em; }
.entry-content { font-size: 1.02rem; }
.entry-content h2 { margin-top: 32px; }
.entry-content a { color: var(--accent-2); }

/* Post list */
.post-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 22px 24px;
	margin-bottom: 18px;
}
.post-card h2 a { color: var(--text); text-decoration: none; }
.post-card h2 a:hover { color: var(--accent); }
.post-meta { color: var(--muted); font-size: .85rem; margin-bottom: 8px; }

/* ---------- Footer ---------- */
.site-footer {
	border-top: 1px solid var(--border);
	background: var(--surface);
	color: var(--muted);
}
.site-footer__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 30px 18px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	font-size: .9rem;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: flex-end; }
.footer-menu li { margin: 0; }
.footer-menu li a { color: var(--muted); text-decoration: none; }
.footer-menu li a:hover { color: var(--text); }

/* ---------- Utilities ---------- */
.button {
	display: inline-block;
	background: var(--accent);
	color: #fff;
	padding: 12px 22px;
	border-radius: 10px;
	font-weight: 700;
	text-decoration: none;
}
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Ad zones (site-wide, used by Tools Hub plugin) ---------- */
.th-ad-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.th-ad { margin: 18px auto; max-width: 970px; text-align: center; clear: both; }
.th-ad__label { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #6b7a8d; margin-bottom: 5px; }
.th-ad ins { display: block; }
.th-ad--placeholder { border: 1px dashed var(--border); border-radius: 10px; padding: 24px 12px; color: #6b7a8d; }
.th-ad--placeholder span { font-size: .85rem; }

@media (max-width: 640px) {
	.site-header__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}