/* FoxMedia — shared styles on top of Tailwind CDN */
:root {
  --brand-blue:   #0a2463;
  --brand-blue-2: #073da0;
  --brand-orange: #FF8800;
  --brand-orange-2: #e67a00;
  --ink:          #1a1a1a;
  --muted:        #5b6478;
  --bg-soft:      #f6f8fc;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background: #fff;
}

.hero-gradient {
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-2) 100%);
  color: #fff;
}
.brand-orange { color: var(--brand-orange); }
.bg-brand-blue { background: var(--brand-blue); }
.bg-soft { background: var(--bg-soft); }

.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  transition: all .2s ease;
  text-decoration: none;
}
.btn-primary {
  background: var(--brand-orange);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-orange-2); transform: translateY(-1px); }
.btn-outline {
  border: 2px solid var(--brand-orange);
  color: var(--brand-orange);
}
.btn-outline:hover { background: var(--brand-orange); color: #fff; }
.btn-ghost {
  border: 2px solid rgba(255,255,255,0.6);
  color: #fff;
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); }

/* Cards */
.card {
  background: #fff;
  border: 1px solid #e6e9f1;
  border-radius: 10px;
  padding: 28px;
  transition: all .2s ease;
}
.card:hover { box-shadow: 0 10px 30px rgba(10,36,99,0.08); transform: translateY(-2px); }

/* Section heading */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .82rem;
  font-weight: 600;
  color: var(--brand-orange);
}
h1, h2, h3 { color: var(--brand-blue); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 2.4rem; line-height: 1.15; }
h2 { font-size: 1.85rem; line-height: 1.2; }
h3 { font-size: 1.3rem; }

/* Blog typography */
.prose-blog p { margin-bottom: 1.1em; color: #2a2f3a; }
.prose-blog h2 { margin: 2em 0 .6em; font-size: 1.65rem; }
.prose-blog h3 { margin: 1.6em 0 .5em; }
.prose-blog ul, .prose-blog ol { margin: 1em 0 1.2em 1.5em; }
.prose-blog li { margin-bottom: .4em; }
.prose-blog code {
  background: #eef1f7; padding: 2px 6px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
}
.prose-blog blockquote {
  border-left: 4px solid var(--brand-orange);
  padding: .4em 1.2em; margin: 1.4em 0; color: var(--muted);
  background: var(--bg-soft);
}

/* Nav */
nav.site-nav {
  background: #fff; border-bottom: 1px solid #eef1f7;
  position: sticky; top: 0; z-index: 50;
}
.nav-link { color: var(--ink); font-weight: 500; padding: 8px 12px; }
.nav-link:hover { color: var(--brand-orange); }
.nav-link.active { color: var(--brand-orange); }

/* Footer */
footer.site-footer {
  background: var(--brand-blue); color: #c8d2e8; padding: 60px 0 30px;
}
footer.site-footer h4 { color: #fff; margin-bottom: 14px; }
footer.site-footer a { color: #c8d2e8; }
footer.site-footer a:hover { color: var(--brand-orange); }
footer .same-as a { margin-right: 14px; font-size: 1.3rem; }

/* Tags */
.tag {
  display: inline-block; background: #eef1f7; color: var(--brand-blue);
  padding: 4px 10px; border-radius: 4px; font-size: .78rem; font-weight: 500;
  margin: 2px 4px 2px 0;
}

/* Mobile nav toggle */
@media (max-width: 768px) {
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.45rem; }
  .mobile-hide { display: none; }
}