/* Shift The Interest, shared site chrome.
 *
 * The 12 rules every page needs: logo, nav, footer links, the X icon, body font.
 * Extracted 2026-08-30 from the inline blocks, where each was copy-pasted 16 times.
 *
 * SCOPE: chrome only. Page-specific styling stays in that page's inline <style>
 * block, which loads AFTER this file and therefore wins any tie. Roughly three
 * quarters of the site's CSS is genuinely single-page and belongs there, not here.
 * Do not move page layout into this file.
 *
 * LOAD ORDER, which matters: this file, then the page's inline <style>, then
 * assets/tailwind.css last. See CLAUDE.md before changing any of that.
 */

/* Brand token. Defined here so this file stands on its own: four tool pages have
   no :root block of their own, which is exactly why they used to hardcode the
   green below instead of referencing it. */
:root {
  --green: #059669;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Logo */
.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Nav links, with the underline that slides in on hover and stays on the
   current page. Child pages underline their parent nav item: a blog post
   underlines "Blog", a tool underlines "Tools". */
.nav-link {
  position: relative;
  transition: color 0.2s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--green);
  transition: width 0.25s ease;
}
.nav-link:hover { color: #059669; }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: #059669; }
.nav-link.active::after { width: 100%; }

/* Footer */
footer a { transition: color 0.15s; }
footer a:hover { color: #6ee7b7; }

/* X / Twitter icon button in the footer */
.x-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  transition: background 0.2s;
}
.x-icon:hover { background: rgba(110,231,183,0.2); }