/*
Theme Name: IndieViral Blog
Theme URI: https://www.indieviral.com/blog
Author: IndieViral
Author URI: https://www.indieviral.com
Description: Custom theme for the IndieViral blog. Mirrors the IndieViral app's default dark design system (dark navy background, blue primary, Alata display font) and is tuned for indie game marketing content and SEO.
Version: 1.1.3
License: GNU General Public License v2 or later
Text Domain: indieviral
*/

/* ============================================================
   Design tokens, mirrored from the IndieViral app .dark theme
   (index.css) which is the brand's default theme.
   ============================================================ */
:root {
  --iv-background: hsl(222.2 84% 4.9%);       /* dark navy */
  --iv-foreground: hsl(210 40% 98%);          /* near white */
  --iv-card: hsl(217.2 32.6% 17.5%);          /* slate card */
  --iv-card-2: hsl(217.2 33% 13%);            /* slightly darker panel */
  --iv-primary: hsl(217.2 91.2% 59.8%);       /* IndieViral blue */
  --iv-primary-600: hsl(217.2 91% 67%);       /* lighter blue for hover on dark */
  --iv-primary-foreground: hsl(222.2 47.4% 11.2%);
  --iv-muted-foreground: hsl(215 20.2% 65.1%);
  --iv-border: hsl(217.2 32.6% 26%);          /* a touch lighter than card for definition */
  --iv-radius: 0.5rem;
  --iv-maxw: 760px;
  --iv-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
  --iv-font-display: 'Alata', var(--iv-font-body);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--iv-font-body);
  color: var(--iv-foreground);
  background: var(--iv-background);
  line-height: 1.7;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--iv-primary); text-decoration: none; }
a:hover { color: var(--iv-primary-600); text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--iv-font-display); line-height: 1.2; color: var(--iv-foreground); font-weight: 400; }
h1 { font-size: 2.4rem; letter-spacing: -0.01em; }
h2 { font-size: 1.7rem; margin-top: 2.2em; }
h3 { font-size: 1.3rem; margin-top: 1.8em; }

p, li { color: hsl(210 30% 88%); }

img { max-width: 100%; height: auto; border-radius: var(--iv-radius); }

code, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
pre { background: #0b1120; color: hsl(210 40% 92%); padding: 1rem 1.25rem; border-radius: var(--iv-radius); overflow-x: auto; font-size: 0.9rem; border: 1px solid var(--iv-border); }
:not(pre) > code { background: var(--iv-card); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.88em; color: hsl(210 40% 92%); }

blockquote {
  border-left: 4px solid var(--iv-primary);
  margin: 1.6em 0; padding: 0.4em 0 0.4em 1.2em;
  color: var(--iv-muted-foreground); font-style: italic;
}

/* ============================================================
   Layout
   ============================================================ */
.iv-container { max-width: var(--iv-maxw); margin: 0 auto; padding: 0 1.25rem; }
.iv-wide { max-width: 1080px; }

/* Header */
.iv-header {
  position: sticky; top: 0; z-index: 50;
  background: hsl(222.2 84% 4.9% / 0.8);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--iv-border);
}
.iv-header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.iv-brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--iv-font-display); font-size: 1.25rem; color: var(--iv-foreground); }
.iv-brand:hover { text-decoration: none; color: var(--iv-foreground); }
.iv-brand img { width: 32px; height: 32px; border-radius: 8px; }
.iv-brand b { font-weight: 400; }
.iv-nav { display: flex; align-items: center; gap: 1.4rem; }
.iv-nav a { color: var(--iv-foreground); font-size: 0.95rem; font-weight: 500; }
.iv-nav a:hover { color: var(--iv-primary); text-decoration: none; }
.iv-cta {
  background: var(--iv-primary); color: var(--iv-primary-foreground) !important;
  padding: 0.5rem 1rem; border-radius: var(--iv-radius); font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease;
}
.iv-cta:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 20px hsl(217.2 91.2% 59.8% / 0.35); color: var(--iv-primary-foreground) !important; }
@media (max-width: 640px) { .iv-nav a.iv-navlink { display: none; } }

/* Hero (blog index) */
.iv-hero { text-align: center; padding: 3.5rem 1.25rem 2rem; }
.iv-hero h1 { font-size: 2.8rem; margin: 0 0 0.5rem; background: linear-gradient(180deg, #fff, hsl(210 40% 80%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.iv-hero p { color: var(--iv-muted-foreground); font-size: 1.15rem; max-width: 620px; margin: 0 auto; }
.iv-kicker { display: inline-block; color: var(--iv-primary); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 0.5rem; }

/* Post cards grid */
.iv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; padding: 1.5rem 0 3rem; }
.iv-card {
  border: 1px solid var(--iv-border); border-radius: calc(var(--iv-radius) + 4px);
  overflow: hidden; background: var(--iv-card-2); display: flex; flex-direction: column;
}
.iv-card-thumb { aspect-ratio: 16/9; background: var(--iv-card); overflow: hidden; }
.iv-card-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.iv-card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.iv-card-body h2 { font-size: 1.2rem; margin: 0; line-height: 1.3; }
.iv-card-body h2 a { color: var(--iv-foreground); }
.iv-card-body h2 a:hover { color: var(--iv-primary); text-decoration: none; }
.iv-card-excerpt { color: var(--iv-muted-foreground); font-size: 0.95rem; margin: 0; }
.iv-meta { color: var(--iv-muted-foreground); font-size: 0.82rem; display: flex; gap: 0.6rem; align-items: center; }
.iv-cat { display: inline-block; background: hsl(217.2 91.2% 59.8% / 0.15); color: var(--iv-primary); font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Single post */
.iv-article { padding: 2.5rem 0 3rem; }
.iv-article-header { text-align: center; margin-bottom: 2rem; }
.iv-article-header h1 { margin: 0.6rem 0; }
.iv-article-content > * { margin-bottom: 1.2rem; }
.iv-article-content ul, .iv-article-content ol { padding-left: 1.4rem; }
.iv-article-content li { margin-bottom: 0.4rem; }
.iv-featured { margin: 0 auto 2rem; }
.iv-featured img { width: 100%; border-radius: calc(var(--iv-radius) + 4px); border: 1px solid var(--iv-border); }

/* In-content CTA box */
.iv-ctabox {
  border: 1px solid hsl(217.2 91.2% 59.8% / 0.4);
  background: linear-gradient(135deg, hsl(217.2 91.2% 59.8% / 0.12), hsl(217.2 60% 40% / 0.05));
  border-radius: calc(var(--iv-radius) + 4px);
  padding: 1.6rem 1.8rem; margin: 2.5rem 0; text-align: center;
}
.iv-ctabox h3 { margin: 0 0 0.4rem; }
.iv-ctabox p { color: var(--iv-muted-foreground); margin: 0 0 1rem; }

/* Footer */
.iv-footer { border-top: 1px solid var(--iv-border); background: var(--iv-card-2); margin-top: 3rem; }
.iv-footer-inner { padding: 2.5rem 1.25rem; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; }
.iv-footer a { color: var(--iv-muted-foreground); display: block; font-size: 0.92rem; margin: 0.3rem 0; }
.iv-footer a:hover { color: var(--iv-primary); text-decoration: none; }
.iv-footer h4 { font-family: var(--iv-font-body); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--iv-foreground); margin: 0 0 0.6rem; }
.iv-footer p { color: var(--iv-muted-foreground); }
.iv-footer-bottom { border-top: 1px solid var(--iv-border); text-align: center; padding: 1.2rem; color: var(--iv-muted-foreground); font-size: 0.85rem; }

/* Pagination */
.iv-pagination { display: flex; justify-content: center; gap: 0.5rem; padding: 1rem 0 3rem; }
.iv-pagination a, .iv-pagination span { padding: 0.5rem 0.9rem; border: 1px solid var(--iv-border); border-radius: var(--iv-radius); color: var(--iv-foreground); }
.iv-pagination a:hover { border-color: var(--iv-primary); text-decoration: none; }
.iv-pagination .current { background: var(--iv-primary); color: var(--iv-primary-foreground); border-color: var(--iv-primary); }

/* Prose helpers */
.iv-lead { font-size: 1.15rem; color: var(--iv-muted-foreground); }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--iv-border); padding: 0.6rem 0.8rem; text-align: left; }
th { background: var(--iv-card); color: var(--iv-foreground); }
strong { color: var(--iv-foreground); }