/* ============================================================
   SoloPricer theme — vanilla CSS, mobile-first, no frameworks.
   Light theme is the default; dark theme via [data-theme="dark"].
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
	--sp-indigo: #4F46E5;
	--sp-navy: #1E1B4B;
	--sp-teal: #14B8A6;

	--bg: #FFFFFF;
	--bg-muted: #F8FAFC;
	--surface: #FFFFFF;
	--text: #0F172A;
	--text-muted: #475569;
	--border: #E2E8F0;
	--accent: #4F46E5;
	--accent-text: #4F46E5;
	--accent-soft: #EEF2FF;
	--teal-text: #0F766E;
	--header-bg: #FFFFFF;
	--footer-bg: #0F172A;
	--footer-text: #CBD5E1;
	--focus: #4F46E5;
	--danger: #DC2626;
	--radius: 10px;
	--font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

[data-theme="dark"] {
	--bg: #0B0F1A;
	--bg-muted: #111827;
	--surface: #151D2E;
	--text: #F1F5F9;
	--text-muted: #94A3B8;
	--border: #26314A;
	--accent: #818CF8;
	--accent-text: #A5B4FC;
	--accent-soft: #1E1B4B;
	--teal-text: #2DD4BF;
	--header-bg: #0B0F1A;
	--focus: #A5B4FC;
	--danger: #F87171;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.65;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; margin-top: 2rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }

a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

/* Visible keyboard focus everywhere */
:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Screen-reader-only text */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
	position: absolute; left: 1rem; top: -100px;
	background: var(--accent); color: #fff;
	padding: 0.6rem 1rem; border-radius: 6px; z-index: 100;
	text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ---------- Header ---------- */
.site-header {
	background: var(--header-bg);
	border-bottom: 1px solid var(--border);
	position: sticky; top: 0; z-index: 50;
}

.header-inner {
	max-width: 1100px; margin: 0 auto; padding: 0.6rem 1rem;
	display: flex; align-items: center; gap: 1rem;
}

.site-logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.site-logo svg { width: 168px; height: auto; display: block; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-dark { display: inline; }
[data-theme="dark"] .logo-light { display: none; }

.primary-nav { margin-left: auto; }

.nav-toggle {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: none; border: 1px solid var(--border); border-radius: 8px;
	color: var(--text); padding: 0.5rem 0.75rem; cursor: pointer; font: inherit;
}
.nav-toggle-icon {
	display: inline-block; width: 18px; height: 2px; background: currentColor; position: relative;
}
.nav-toggle-icon::before, .nav-toggle-icon::after {
	content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }

.primary-menu {
	list-style: none; margin: 0; padding: 0;
	display: none;
}
.primary-nav.nav-open .primary-menu { display: block; }
.primary-menu a {
	display: block; padding: 0.6rem 0.25rem;
	color: var(--text); text-decoration: none; font-weight: 600;
}
.primary-menu a:hover { color: var(--accent-text); }

.theme-toggle {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid var(--border); background: var(--bg-muted);
	color: var(--text); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }

@media (min-width: 860px) {
	.nav-toggle { display: none; }
	.primary-menu { display: flex; gap: 0.25rem; align-items: center; }
	.primary-menu a { padding: 0.5rem 0.75rem; border-radius: 8px; white-space: nowrap; }
	.primary-menu a:hover { background: var(--accent-soft); text-decoration: none; }
}

/* ---------- Ad slots: HIDDEN until AdSense approval ----------
   Saad's order (2026-10-19): no empty ad gaps on the live site for now.
   When AdSense is approved: paste the ad code into the .ad-slot divs
   (header.php / page-tool.php / single.php) and DELETE this rule. */
.ad-slot { display: none !important; }

/* ---------- Hero ---------- */
.hero {
	background: var(--sp-navy) url('../assets/images/hero-bg.jpg') center/cover no-repeat;
	border-bottom: none;
	position: relative;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(30,27,75,0.45), rgba(79,70,229,0.25));
	pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 4rem 1rem; text-align: center; }
.hero h1 { color: #FFFFFF; }
.hero-sub { color: rgba(255,255,255,0.88); max-width: 36rem; margin: 0 auto 1.5rem; font-size: 1.1rem; }
.hero .button-secondary { color: #FFFFFF; border-color: rgba(255,255,255,0.7); }
.hero .button-secondary:hover { background: rgba(255,255,255,0.12); text-decoration: none; }
.hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.button {
	display: inline-block; padding: 0.7rem 1.4rem; border-radius: 8px;
	font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
	border: 2px solid transparent; font-family: inherit; line-height: 1.4;
}
.button-primary { background: var(--sp-indigo); color: #fff; }
.button-primary:hover { background: #4338CA; color: #fff; text-decoration: none; }
[data-theme="dark"] .button-primary { background: #6366F1; }
[data-theme="dark"] .button-primary:hover { background: #818CF8; }
.button-secondary {
	background: transparent; color: var(--accent-text); border-color: var(--accent);
}
.button-secondary:hover { background: var(--accent-soft); text-decoration: none; }
.button-small { padding: 0.35rem 0.6rem; font-size: 0.9rem; }
.preset-btn[aria-pressed="true"] { background: var(--sp-indigo); border-color: var(--sp-indigo); color: #fff; }
[data-theme="dark"] .preset-btn[aria-pressed="true"] { background: #6366F1; border-color: #6366F1; }
.button-danger { background: transparent; color: var(--danger); border-color: var(--danger); }

/* ---------- Sections & cards ---------- */
.tool-grid-section, .latest-guides { padding: 2.5rem 0; }
.section-sub { color: var(--text-muted); margin-top: -0.5rem; }

.tool-grid, .guide-grid {
	display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.5rem;
}
@media (min-width: 640px) {
	.tool-grid, .guide-grid { grid-template-columns: repeat(2, 1fr); }
}

.tool-card, .guide-card, .archive-item {
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 1.25rem;
}
.tool-card h3, .guide-card h3 { margin-top: 0; font-size: 1.15rem; }
.tool-card h3 a, .guide-card h3 a { color: var(--text); text-decoration: none; }
.tool-card h3 a:hover, .guide-card h3 a:hover { color: var(--accent-text); text-decoration: underline; }
.tool-card p, .guide-card p { color: var(--text-muted); font-size: 0.95rem; }
.card-link { font-weight: 700; text-decoration: none; }
.badge-soon {
	display: inline-block; font-size: 0.8rem; font-weight: 700;
	background: var(--accent-soft); color: var(--accent-text);
	border-radius: 999px; padding: 0.25rem 0.75rem;
}
.tool-card-soon { opacity: 0.85; }

.guide-meta, .archive-item-meta { color: var(--text-muted); font-size: 0.9rem; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding: 1rem 0 0; font-size: 0.9rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.breadcrumbs li { display: inline; color: var(--text-muted); }
.breadcrumb-separator { margin: 0 0.35rem; }

/* ---------- Tool pages ---------- */
.tool-page-wrap, .article-wrap, .archive-wrap, .page-wrap, .error-wrap {
	padding-bottom: 3rem;
}
.tool-header { padding: 1rem 0 0.5rem; }
.tool-intro { color: var(--text-muted); font-size: 1.1rem; max-width: 44rem; }

.tool-app {
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 1.25rem; margin: 1.5rem 0;
}
.tool-columns { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 960px) {
	.tool-columns { grid-template-columns: 1fr 1fr; }
	.tool-columns-narrow { grid-template-columns: 1fr 1fr; }
}
.tool-app h2 { margin-top: 0; font-size: 1.3rem; }

/* Forms */
.tool-form .field { margin-bottom: 1rem; }
.tool-form label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.tool-form input[type="text"],
.tool-form input[type="number"],
.tool-form input[type="date"],
.tool-form select {
	width: 100%; padding: 0.6rem 0.7rem; font: inherit;
	color: var(--text); background: var(--bg);
	border: 1px solid var(--border); border-radius: 8px;
}
.tool-form input:focus, .tool-form select:focus {
	border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px;
}
.field-hint { font-size: 0.85rem; color: var(--text-muted); margin: 0.25rem 0 0; }
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }

.form-fieldset {
	border: 1px solid var(--border); border-radius: 8px;
	padding: 1rem; margin: 0 0 1.25rem;
}
.form-fieldset legend { font-weight: 700; padding: 0 0.5rem; }

.line-item {
	display: grid; grid-template-columns: 1fr; gap: 0.75rem;
	border-top: 1px dashed var(--border); padding: 0.9rem 0;
}
.line-item:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 560px) {
	.line-item { grid-template-columns: 1fr 5.5rem 6.5rem auto; align-items: end; }
}

/* Invoice preview */
.invoice-sheet {
	background: #fff; color: #0F172A;
	border: 1px solid var(--border); border-radius: 8px;
	padding: 1.5rem; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}
[data-theme="dark"] .invoice-sheet { background: #FFFFFF; }
.invoice-head {
	display: flex; justify-content: space-between; gap: 1rem;
	border-bottom: 2px solid #0F172A; padding-bottom: 1rem; margin-bottom: 1rem;
}
.invoice-doctitle { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.05em; margin: 0; }
.invoice-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #475569; margin: 0; }
.invoice-party { font-weight: 700; margin: 0.15rem 0 0; }
.invoice-parties { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.invoice-dates p { margin: 0.2rem 0; font-size: 0.95rem; }

.invoice-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.95rem; }
.invoice-table th, .invoice-table td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid #E2E8F0; }
.invoice-table thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; }
.invoice-table td:last-child, .invoice-table th:last-child { text-align: right; }

.invoice-totals { max-width: 16rem; margin-left: auto; }
.invoice-totals p { display: flex; justify-content: space-between; margin: 0.3rem 0; font-size: 0.95rem; }
.invoice-grand { font-weight: 800; font-size: 1.15rem !important; border-top: 2px solid #0F172A; padding-top: 0.5rem; }

.tool-actions { margin-top: 1.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }

.tool-disclaimer {
	margin-top: 1.25rem; padding: 0.9rem 1rem;
	background: var(--accent-soft); border-left: 4px solid var(--accent);
	border-radius: 0 8px 8px 0; font-size: 0.92rem; color: var(--text);
}

/* Rate result */
.rate-result {
	background: var(--bg-muted); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 1.25rem;
}
.rate-label { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.rate-value { margin: 0.25rem 0 1rem; font-size: 2.4rem; font-weight: 800; color: var(--teal-text); letter-spacing: -0.02em; }
.rate-breakdown { margin: 0; }
.breakdown-row {
	display: flex; justify-content: space-between; gap: 1rem;
	padding: 0.55rem 0; border-top: 1px solid var(--border); font-size: 0.95rem;
}
.breakdown-row dt { color: var(--text-muted); }
.breakdown-row dd { margin: 0; font-weight: 700; }

/* Guide article + FAQ on tool pages */
.tool-guide { margin: 2rem 0; max-width: 46rem; }
.tool-faq { margin: 2rem 0; max-width: 46rem; }
.faq-item {
	border: 1px solid var(--border); border-radius: 8px;
	margin-bottom: 0.75rem; background: var(--surface);
}
.faq-item summary {
	padding: 0.9rem 1rem; font-weight: 700; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+ "; color: var(--accent-text); font-weight: 800; }
.faq-item[open] summary::before { content: "– "; }
.faq-answer { padding: 0 1rem 1rem; color: var(--text-muted); }
.faq-answer p { margin: 0; }

.tool-list { list-style: none; padding: 0; }
.tool-list li { margin-bottom: 0.5rem; }

/* ---------- Article / archive / page ---------- */
.article-header, .archive-header, .page-header, .error-header { padding: 1.5rem 0 0.5rem; }
.article-title, .archive-title, .page-title, .error-title { font-size: 2rem; }
.article-meta { color: var(--text-muted); font-size: 0.92rem; }
.entry-content { max-width: 46rem; }
.entry-content img { border-radius: 8px; }

.author-box {
	display: flex; gap: 1rem; align-items: flex-start;
	background: var(--bg-muted); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 1.25rem; margin-top: 2rem;
}
.author-avatar img { border-radius: 12px; display: block; }
.author-name { font-weight: 800; margin: 0 0 0.25rem; }
.author-bio p:last-child { margin-bottom: 0; }

.archive-item { margin-bottom: 1rem; }
.archive-item-title { margin: 0 0 0.25rem; font-size: 1.3rem; }
.archive-item-title a { color: var(--text); text-decoration: none; }
.archive-item-title a:hover { color: var(--accent-text); text-decoration: underline; }

.pagination { margin-top: 2rem; }
.pagination .nav-links { display: flex; gap: 0.5rem; }
.pagination a, .pagination span {
	padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; text-decoration: none;
}
.pagination .current { background: var(--accent-soft); font-weight: 700; }

/* Search form */
.search-form { display: flex; gap: 0.5rem; max-width: 28rem; margin: 1rem 0; }
.search-form label { flex: 1; }
.search-form input[type="search"] {
	width: 100%; padding: 0.6rem 0.7rem; font: inherit;
	color: var(--text); background: var(--bg);
	border: 1px solid var(--border); border-radius: 8px;
}

.error-links ul { list-style: none; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-text); margin-top: 3rem; }
.footer-inner {
	max-width: 1100px; margin: 0 auto; padding: 2.5rem 1rem 1.5rem;
	display: grid; gap: 1.5rem; grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.footer-inner { grid-template-columns: 1.2fr 1fr; }
	.footer-copyright { grid-column: 1 / -1; }
}
.footer-brand .site-logo svg { width: 150px; }
.footer-tagline { font-size: 0.92rem; margin: 0.75rem 0 0; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.footer-menu a { color: var(--footer-text); text-decoration: none; }
.footer-menu a:hover { text-decoration: underline; }
.footer-copyright { font-size: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 1rem; margin: 0; }

/* Footer logo: in auto mode always show the dark variant for visibility on navy */
.footer-brand .logo-variant.logo-light { display: none; }
.footer-brand .logo-variant.logo-dark { display: inline; }

/* ---------- Print: invoice only ---------- */
@media print {
	body.printing-invoice .site-header,
	body.printing-invoice .site-footer,
	body.printing-invoice .ad-slot,
	body.printing-invoice .breadcrumbs,
	body.printing-invoice .tool-header,
	body.printing-invoice .tool-form-panel,
	body.printing-invoice .tool-actions,
	body.printing-invoice .tool-disclaimer,
	body.printing-invoice .tool-guide,
	body.printing-invoice .tool-faq {
		display: none !important;
	}
	body.printing-invoice .tool-app {
		border: 0; padding: 0; margin: 0;
	}
	body.printing-invoice .tool-columns { display: block; }
	body.printing-invoice .tool-preview-panel h2 { display: none; }
	.invoice-sheet { box-shadow: none; border: 1px solid #000; }
}