/*
Theme Name: Localforge
Theme URI: https://localforge.example
Author: WalezTech
Author URI: https://waleztech.com
Description: Custom theme for Localforge — fast, focused, privacy-first browser tools with an integrated blog, collections, and evergreen guides. Built for Core Web Vitals and Rank Math SEO.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: localforge
*/

:root {
  --lf-bg: #FAFAF8;
  --lf-ink: #1A1A2E;
  --lf-ink-soft: #3D3D52;
  --lf-accent: #F4A340;
  --lf-accent-dark: #D6822A;
  --lf-line: #E6E4DD;
  --lf-card: #FFFFFF;
  --lf-success: #2E9E6B;
  --lf-radius: 12px;
  --lf-font-display: 'Space Grotesk', system-ui, sans-serif;
  --lf-font-body: 'Inter', system-ui, sans-serif;
  --lf-max-width: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lf-bg);
  color: var(--lf-ink);
  font-family: var(--lf-font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--lf-font-display);
  color: var(--lf-ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

a { color: inherit; }

.lf-wrap {
  max-width: var(--lf-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.lf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--lf-ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.lf-btn--accent {
  background: var(--lf-accent);
  color: var(--lf-ink);
}

.lf-card {
  background: var(--lf-card);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  padding: 24px;
}

.lf-grid {
  display: grid;
  gap: 20px;
}

@media (min-width: 640px) {
  .lf-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .lf-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .lf-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.lf-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(244,163,64,0.15);
  color: var(--lf-accent-dark);
}

.lf-breadcrumbs {
  font-size: 13px;
  color: var(--lf-ink-soft);
  margin-bottom: 20px;
}
.lf-breadcrumbs a { text-decoration: none; color: var(--lf-ink-soft); }
.lf-breadcrumbs a:hover { text-decoration: underline; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lf-ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
}
.skip-link:focus { left: 10px; top: 10px; }