/* ============================================================
 * SoniqTools base.css
 * Shared design tokens, reset, body, and header rules used by
 * every tool page. Tool-specific styles stay inside the tool's
 * own <style> block. Browsers cache this file across navigations.
 * ============================================================ */

/* === Design tokens === */
:root {
  --bg: #0a0a0c;
  --bg-raised: #111116;
  --bg-card: #16161c;
  --border: #222230;
  --border-light: #2a2a3a;
  --text: #e8e6f0;
  --text-dim: #8885a0;
  --text-muted: #55536a;
  --accent: #00e5a0;
  --accent-dim: #00e5a020;
  --accent-glow: #00e5a040;
  --warning: #ffb347;
  --danger: #ff5c6c;
  --gold: #ffd700;
  --blue: #5caaff;
  --purple: #b388ff;
  --yellow: #f0d060;
  --pink: #ff6eb4;
  --orange: #ff8c42;
  --cyan: #00d4ff;
  --gradient-1: linear-gradient(135deg, #00e5a0, #00b8d4);
  --gradient-2: linear-gradient(135deg, #b388ff, #ff5c6c);
  --font-display: 'Satoshi', 'Space Grotesk', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
}

/* === Reset === */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Utility: hide any element tagged with class="hidden".
   Tool JS toggles this class to show/hide sections (batch cards,
   download buttons, info bars) — was inline in every tool pre-refactor. */
.hidden { display: none !important; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

/* === Body === */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background:
    radial-gradient(ellipse at 30% 20%, #00e5a008 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, #b388ff06 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* === Shared header === */
header {
  position: relative;
  z-index: 10;
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  color: var(--text);
}

.logo-icon {
  width: 42px;
  height: 42px;
  background: var(--gradient-1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Tagline under the logo. Values match the original inline rule still
   present on most tool pages — kept here for pages (analyzer) whose
   inline copy was removed during the CSS extraction. */
.logo-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  font-weight: 400;
  line-height: 1;
}

.logo-subtitle span {
  color: var(--accent);
}

/* === Shared site footer ===
   Markup lives in each page (static HTML so crawlers always see the
   links); all styling lives here so it stays consistent site-wide.
   Class selectors below deliberately out-rank the plain `footer`
   element rules still present in each page's inline <style>. */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 56px 40px 28px;
  text-align: left;
}

.site-footer .footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px 32px;
}

/* Brand blurb (first column) */
.footer-brand .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.footer-brand .footer-logo em {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
}

.footer-brand .footer-logo .logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.footer-brand .footer-logo .logo-icon svg { width: 17px; height: 17px; }

.footer-brand p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 260px;
}

.footer-brand .footer-privacy-note {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
}

/* Link columns */
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.footer-col .footer-col-title:not(:first-child) { margin-top: 24px; }

.site-footer .footer-col a {
  display: block;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer .footer-col a:hover { color: var(--accent); }

/* Ko-fi donation link — stands out in the brand green */
.site-footer .footer-col a.footer-support-link { color: var(--accent); font-weight: 500; }
.site-footer .footer-col a.footer-support-link:hover { text-decoration: underline; }

/* "Featured on" badge strip (homepage only) — compact version */
.site-footer .featured-on {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.site-footer .featured-on-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.site-footer .featured-on-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.site-footer .featured-on-badges img { height: 28px; width: auto; opacity: 0.75; transition: opacity 0.15s; }
.site-footer .featured-on-badges a:hover img { opacity: 1; }

/* Copyright line */
.site-footer .footer-bottom {
  max-width: 1200px;
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.site-footer .footer-bottom a { color: var(--text-dim); text-decoration: none; }
.site-footer .footer-bottom a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .site-footer { padding: 40px 20px 24px; }
  .site-footer .footer-grid { grid-template-columns: 1fr; }
}

/* === Ko-fi support nudge card ===
   Injected by shared.js (soniqSupportNudge) after a tool delivers
   its result. Slides in bottom-right; never blocks the page. */
.soniq-nudge {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 500;
  max-width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.soniq-nudge.visible { opacity: 1; transform: translateY(0); }

.soniq-nudge p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 18px 12px 0;
}

.soniq-nudge-cta {
  display: inline-block;
  background: var(--accent);
  color: #0a0a0c;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  transition: filter 0.15s;
}

.soniq-nudge-cta:hover { filter: brightness(1.1); }

.soniq-nudge-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.soniq-nudge-close:hover { color: var(--text); }

@media (max-width: 480px) {
  .soniq-nudge { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* === Sidebar ad rails (tool pages + homepage) ===================
   Gives the ad script an <aside> on each side of <main> to place a
   sticky unit in. Before this, no tool page or homepage had a sidebar
   container at all, so no sidebar ad could be placed on them.

   These pages are far wider than a blog article -- main is 1200px on
   tool pages and 1100px on the homepage, against 720px for a post --
   so the rails need much more screen before they fit:

     >= 1880px    two 300px rails
     1600-1879px  two 160px rails
     < 1600px     no rails; the page renders exactly as it did before

   Width budget on a tool page (main = 1200):
     300 + 40 + 1200 + 40 + 300 = 1880
     160 + 40 + 1200 + 40 + 160 = 1600
   The homepage (main = 1100) clears both thresholds with room to spare.

   BOTH rails always appear together, never one alone: a single rail
   would push the whole tool interface off centre, which is the exact
   problem the blog rails were rebuilt to avoid.

   Grid rather than flex, with items pinned to explicit columns. A
   hidden rail is removed as a grid ITEM, and without explicit
   placement the remaining items auto-place into the wrong columns --
   which puts <main> in a 160px rail column.

   The rails are not hidden when empty: ad scripts skip display:none
   containers at scan time, so hiding them would stop them ever being
   filled. Because the pair is symmetric, empty rails leave even
   margins rather than off-centre content. */
.page-layout {
  display: grid;
  /* minmax(0, 1200px), not auto: an `auto` track sizes to content and
     shrank <main> from 1200px to 980px, silently narrowing every tool
     interface. This caps the track at main's own max-width instead. */
  grid-template-columns: 300px minmax(0, 1200px) 300px;
  gap: 40px;
  justify-content: center;
  align-items: start;
}
.page-rail-left  { grid-column: 1; }
/* margin:0 and width:100% matter: <main> carries `margin: 0 auto`,
   and an auto margin on a grid item makes it shrink-to-fit its content
   instead of filling the track -- which rendered main at 980px rather
   than its usual 1200px. The block fallback below restores the auto
   margin, since there is no track to fill there. */
/* justify-self centres main inside its track for pages whose own
   max-width is narrower than the track -- the homepage caps main at
   1100px, so without this it sat 50px left of centre.

   It MUST be reset in the block fallback below. justify-self applies
   to block-level boxes too in modern browsers, and any value other
   than normal/stretch makes the box shrink-to-fit: left in place, it
   narrowed the homepage from 1100px to 847px on every screen under
   1600px. */
.page-layout > main {
  grid-column: 2; margin: 0; width: 100%; justify-self: center;
}
.page-rail-right { grid-column: 3; }
.page-rail { position: sticky; top: 20px; }

@media (max-width: 1879px) {
  .page-layout { grid-template-columns: 160px minmax(0, 1200px) 160px; }
}
@media (max-width: 1599px) {
  .page-layout { display: block; }
  .page-layout > main { margin: 0 auto; width: auto; justify-self: auto; }
  .page-rail { display: none; }
}