/*
  ================================================================
  styles.css — THE SINGLE SOURCE OF TRUTH FOR ALL VISUAL DESIGN
  ================================================================

  This file is linked by EVERY html page in your project with:
    <link rel="stylesheet" href="../css/styles.css">
    (or just href="css/styles.css" from the root index.html)

  Change something here → it changes everywhere instantly.

  FILE STRUCTURE:
  ---------------
  1.  CSS Variables (colors, fonts, spacing)
  2.  Reset & Base
  3.  Typography
  4.  Layout Utilities
  5.  Navigation
  6.  Footer
  7.  Home Page — Hero
  8.  Blog List Page
  9.  Post Cards
  10. Article / Post Page
  11. Interactive Demo Components
  12. Callout Boxes
  13. Code styling
  14. Animations
  15. Responsive (mobile)

  ================================================================
*/


/* ================================================================
   1. CSS VARIABLES
   ================================================================
   growingSWE uses a very restrained palette:
   - Near-white background
   - Near-black text
   - A single accent color (teal/green)
   - Thin borders for separation
   - System monospace for code

   We mirror that here with our own slight personality.
   ================================================================ */

:root {

  /* --- COLORS --- */

  /* Background & Surfaces */
  --bg:           #ffffff;   /* pure white — main page background */
  --bg-subtle:    #f9f9f9;   /* very slightly off-white for demo boxes */
  --bg-code:      #f4f4f4;   /* inline code background */

  /* Text */
  --text:         #1a1a1a;   /* near-black — main body text */
  --text-muted:   #6b6b6b;   /* grey — dates, labels, captions */
  --text-light:   #999;      /* lighter grey — secondary info */

  /* Accent — the ONE color used for links, tags, highlights */
  /* Pardon My Data uses a refined purple palette */
  --accent:       #6b3fa0;   /* deep purple — main accent */
  --accent-hover: #4a2870;   /* darker purple for hover states */
  --accent-light: #f0e8ff;   /* very pale purple for tag backgrounds */
  --accent-mid:   #9b6fd4;   /* mid purple for borders on callouts */

  /* Borders */
  --border:       #e8e8e8;   /* light grey — dividers, card borders */
  --border-dark:  #d0d0d0;   /* slightly darker border */

  /* --- TYPOGRAPHY --- */

  /* growingSWE uses a system sans-serif stack — clean and fast.
     We do the same but add a touch more character. */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New',
                  Courier, monospace;
  --font-heading: var(--font-body); /* same font, just heavier weight */

  /* --- SPACING SCALE ---
     A consistent scale makes the page feel rhythmic and professional.
     All spacing throughout the site uses these values — never arbitrary numbers.

     xs  = tiny gaps (between icon and label)
     sm  = small gaps (between tag pills)
     md  = medium gaps (between paragraphs)
     lg  = large gaps (between sections)
     xl  = extra large (padding around major sections)
     2xl = very large (hero padding)
  */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  56px;
  --space-2xl: 96px;

  /* --- LAYOUT --- */
  --max-width:     680px;   /* max width of content column — narrow for readability */
  --max-width-wide: 900px;  /* wider variant for the blog list */
  --radius:          4px;   /* border radius for cards, buttons */
  --radius-pill:   100px;   /* for tag pills */

  /* --- TRANSITIONS --- */
  --transition: 0.15s ease; /* default speed for hover animations */
}


/* ================================================================
   2. RESET & BASE
   ================================================================
   We neutralize browser defaults so the page looks the same
   in Chrome, Firefox, Safari, and Edge.
   ================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* scroll-behavior: smooth makes anchor links animate */
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Make images responsive by default */
img {
  max-width: 100%;
  display: block;
}

/* Remove bullet points from all lists by default */
ul, ol {
  list-style: none;
}


/* ================================================================
   3. TYPOGRAPHY
   ================================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
h3 { font-size: 1.15rem; }

/* Article body gets extra spacing on headings */
.article-body h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
}

.article-body h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-md);
}

/* The last paragraph in a container shouldn't have extra bottom margin */
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

/* Italic opening line — used for the "motivation" line at the top of posts */
.post-lede {
  font-style: italic;
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

/* Back to top */
.back-to-top-wrapper {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px dashed var(--border);
  text-align: right;
}

.back-to-top {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--transition);
}

.back-to-top:hover {
  color: var(--accent);
  text-decoration: none;
}

/* ================================================================
   4. LAYOUT UTILITIES
   ================================================================
   These are reusable "helper" classes, not tied to any specific page.
   ================================================================ */

/* .container centers and constrains content width */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* A slightly wider container for the blog list */
.container--wide {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Horizontal divider line */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-xl) 0;
}


/* ================================================================
   5. NAVIGATION
   ================================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: var(--space-md) 0;
}

.nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* The logo / site name */
.nav__logo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
  font-family: var(--font-body);
  /* same font as nav links — consistent feel */
}

.nav__logo:hover {
  color: var(--accent);
  text-decoration: none;
}

.nav__logo-tag {
  color: var(--accent);
}

.nav__links {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.nav__links a {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color var(--transition);
}

.nav__links a:hover {
  color: var(--text);
  text-decoration: none;
}

/* The currently active nav link */
.nav__links a.active {
  color: var(--text);
  font-weight: 600;
}

.lang-toggle img {
  width: 16px;
  height: 12px;
  vertical-align: middle;
  margin-right: 4px;
  border-radius: 2px;
}

/* -------------------------------------------------------
   LANGUAGE TOGGLE BUTTON (EN / FR)
   -------------------------------------------------------
   Sits in the nav bar. On English pages it shows "FR",
   on French pages it shows "EN".
   It's just a styled link — no JavaScript needed.
------------------------------------------------------- */
.lang-toggle {
  border: 1px solid var(--border-dark);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  color: var(--text-muted) !important;
  transition: all var(--transition);
}

.lang-toggle:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white !important;
  text-decoration: none !important;
}


/* ================================================================
   6. FOOTER
   ================================================================ */

.footer {
  border-top: 1px solid var(--border);
  padding: var(--space-xl) 0;
  margin-top: var(--space-2xl);
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer__logo {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text);
  font-size: 0.9rem;
}

/* Social media links in footer */
.footer__social {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  transition: color var(--transition);
}

.footer__social-link:hover {
  color: var(--accent);
  text-decoration: none;
}

/* The SVG icon inside each social link */
.footer__social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  /* currentColor means the SVG inherits the link's text color —
     so it automatically turns purple on hover, no extra CSS needed */
}


/* ================================================================
   7. HOME PAGE — HERO
   ================================================================ */

.hero {
  padding: var(--space-2xl) 0 var(--space-xl);
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15;
  margin-bottom: var(--space-lg);
  letter-spacing: -0.03em;
}

.hero__bio {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-lg);
  max-width: 520px;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: gap var(--transition);
}

.hero__cta:hover {
  text-decoration: none;
  gap: var(--space-md);
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.hero__cta::after {
  content: '→';
}

@keyframes shimmer {
  0%   { color: var(--accent); }
  50%  { color: var(--accent-mid); }
  100% { color: var(--accent); }
}

.shimmer-text {
  animation: shimmer 3s ease-in-out infinite;
}

/* ================================================================
   8. BLOG LIST PAGE
   ================================================================ */

.blog-header {
  padding: var(--space-xl) 0 var(--space-lg);
}

.blog-header__subtitle {
  color: var(--text-muted);
  margin-top: var(--space-sm);
  font-size: 1rem;
}

/* Tag filter bar */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.tag-btn {
  background: transparent;
  border: 1px solid var(--border-dark);
  color: var(--text-muted);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--transition);
}

.tag-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.tag-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}


/* ================================================================
   9. POST CARDS (on the blog list page)
   ================================================================ */

.post-list {
  display: flex;
  flex-direction: column;
}

.post-card {
  display: block;
  padding: var(--space-lg) 0;
  border-bottom: 1px dashed var(--border);
  color: var(--text);
  transition: none;
  text-decoration: none;
}

.post-card:hover {
  text-decoration: none;
}

.post-card:hover .post-card__title {
  color: var(--accent);
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.post-card__date {
  font-size: 0.82rem;
  color: var(--text-light);
  font-weight: 500;
}

.post-card__tags {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* A tag pill — small colored label */
.tag {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.post-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-xs);
  transition: color var(--transition);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.post-card__excerpt {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
}


/* ================================================================
   10. ARTICLE / POST PAGE
   ================================================================ */

.article {
  padding: var(--space-xl) 0 var(--space-2xl);
}

/* The "← Back" link */
.article__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: var(--space-xl);
  transition: color var(--transition);
}

.article__back::before { content: '←'; }

.article__back:hover {
  color: var(--accent);
  text-decoration: none;
}

.article__header {
}

.article__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.article__date {
  font-size: 0.85rem;
  color: var(--text-light);
  font-weight: 500;
}

.article__title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.03em;
}

/* Bullshit report button */
.bullshit-btn-wrapper {
  margin: var(--space-lg) 0;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  justify-content: flex-end;
}

.bullshit-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}

.bullshit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-dark);
  color: var(--text-muted);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition);
}

.bullshit-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  text-decoration: none;
}

/* The article body — actual readable content */
.article-body {
  font-size: 1.02rem;
  line-height: 1.8;
}

/* Lists inside article body should look natural */
.article-body ul,
.article-body ol {
  list-style: initial;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

.article-body li {
  margin-bottom: var(--space-xs);
}


/* ================================================================
   11. INTERACTIVE DEMO COMPONENTS
   ================================================================
   This is the most important component — the boxed demo widget
   that holds your canvas visualizations.

   Structure:
     <div class="demo">
       <div class="demo__header"> ← title bar with dots
       <div class="demo__body">   ← canvas + controls
   ================================================================ */

.demo {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: var(--space-xl) 0;
  background: var(--bg);
  /* Subtle shadow to lift the demo off the page */
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
}

/* The title bar — mimics growingSWE's minimal demo headers */
.demo__header {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  padding: 9px var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* macOS-style traffic light dots */
.demo__dots {
  display: flex;
  gap: 5px;
}

.demo__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.demo__dot:nth-child(1) { background: #ff5f57; }
.demo__dot:nth-child(2) { background: #febc2e; }
.demo__dot:nth-child(3) { background: #28c840; }

.demo__title {
  flex: 1;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-light);
  letter-spacing: 0.03em;
  font-family: var(--font-mono);
}

.demo__body {
  padding: var(--space-lg);
}

/* The canvas drawing surface */
.demo__canvas {
  display: block;
  width: 100%;
  border-radius: 3px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}

/* Controls row below the canvas */
.demo__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  align-items: center;
}

/* Primary button */
.demo__btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 7px 16px;
  border-radius: var(--radius);
  font-size: 0.83rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background var(--transition);
  letter-spacing: 0.02em;
}

.demo__btn:hover { background: var(--accent-hover); }

/* Secondary (outlined) button */
.demo__btn--secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-dark);
}

.demo__btn--secondary:hover {
  background: var(--bg-subtle);
}

/* Label + slider row */
.demo__label {
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

input[type="range"] {
  accent-color: var(--accent);
  width: 100px;
  cursor: pointer;
}

/* Stats bar below controls */
.demo__stats {
  margin-top: var(--space-md);
  padding: 8px var(--space-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  display: flex;
  gap: var(--space-lg);
}

.demo__stat-value {
  color: var(--accent);
  font-weight: 600;
}


/* ================================================================
   12. CALLOUT BOXES
   ================================================================
   Highlighted boxes to call out key insights mid-article.
   ================================================================ */

.callout {
  border-left: 3px solid var(--accent-mid);
  background: var(--accent-light);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.callout__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}

.callout p {
  font-size: 0.95rem;
  color: #3d1f6b;
  margin: 0;
  line-height: 1.7;
}


/* ================================================================
   13. CODE STYLING
   ================================================================ */

/* Inline code: `like this` */
code {
  font-family: var(--font-mono);
  background: var(--bg-code);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.85em;
  color: var(--accent);
  border: 1px solid var(--border);
}

/* Code block (multi-line) */
pre {
  background: #1a1a1a;
  color: #e8e8e8;
  padding: var(--space-lg);
  border-radius: var(--radius);
  overflow-x: auto;
  margin: var(--space-xl) 0;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.6;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}


/* ================================================================
   14. ANIMATIONS
   ================================================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeInUp 0.4s ease forwards;
}

/* Staggered delays for lists of items */
.fade-in:nth-child(1) { animation-delay: 0.05s; }
.fade-in:nth-child(2) { animation-delay: 0.10s; }
.fade-in:nth-child(3) { animation-delay: 0.15s; }
.fade-in:nth-child(4) { animation-delay: 0.20s; }
.fade-in:nth-child(5) { animation-delay: 0.25s; }


/* ================================================================
   15. RESPONSIVE — MOBILE
   ================================================================
   @media queries apply styles only when the screen matches
   the condition. "max-width: 600px" means: on screens
   narrower than 600px (phones), apply these overrides.
   ================================================================ */

@media (max-width: 600px) {

  body {
    font-size: 16px;
  }

  .container,
  .container--wide {
    padding: 0 var(--space-md);
  }

  .nav__links {
    gap: var(--space-md);
  }

  .hero {
    padding: var(--space-xl) 0 var(--space-lg);
  }

  .demo__body {
    padding: var(--space-md);
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}