/*
  Refined Dark Theme Palette
  Inspired by modern, clean design.
*/
/* Default to Light Theme 
*/
:root {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --ink: #111827;      /* A slightly softer black for text */
  --muted: #6B7280;    /* A nice, readable gray */
  --accent: #2563EB;   /* A modern, clean blue */
  --border: #E5E7EB;   /* A light, subtle gray for borders */
}

/* Automatically use Dark Theme if the user has it set in their OS 
*/
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A0A0A;
    --card: #141414;
    --ink: #EAEAEA;
    --muted: #A1A1A1;
    --accent: #38BDF8;
    --border: #262626;
  }
}

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

html, body { 
  background-color: var(--bg);
  color: var(--ink); 
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6; 
  font-size: 16px;
}

a { 
  color: var(--accent); 
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a:hover { 
  opacity: 0.8;
  text-decoration: underline;
}

.container { 
  max-width: 900px; /* Tighter container for better readability */
  margin: 0 auto; 
  padding: 24px; 
}

/* --- Navigation --- */
.nav { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 24px 0; 
  border-bottom: 1px solid var(--border);
  margin-bottom: 64px;
}
.brand { 
  font-weight: 600; 
}

/* --- Hero Section --- */
.hero { 
  padding: 48px 0;
  text-align: center; /* Centered hero text is very common and clean */
}
.hero h1 { 
  font-size: clamp(32px, 5vw, 48px); 
  line-height: 1.2; 
  margin: 0 0 16px; 
  font-weight: 700;
  letter-spacing: -1px;
}
.lead { 
  color: var(--muted); 
  font-size: 18px; 
  max-width: 650px; /* Constrain line length */
  margin: 0 auto 24px;
}

/* Card grid + card (keep if you already have them) */
.section-title { margin: 64px 0 24px; font-size: 24px; text-align: center; }
.cardgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,.2); text-decoration: none; }
.card h3 { margin: 0 0 8px; font-size: 20px; }
.card .meta { color: var(--muted); font-size: 14px; margin-bottom: 8px; }

/* New: teaser line under meta */
.card .teaser {
  color: var(--muted);
  font-size: 15px;
  margin-top: 6px;
  margin-bottom: 0;
}

/* New: bold CTA with more spacing */
.card .view-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;     /* more space above CTA */
  font-weight: 700;     /* bold */
  color: var(--ink);    /* override global link color */
  text-decoration: none;
}
.card:hover .view-link { color: var(--accent); }

.card .view-link .arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.card:hover .view-link .arrow { transform: translateX(4px); }



/* --- Footer Layout --- */
.footer .social-links {
  justify-content: center;
  margin-bottom: 16px;
}

.footer .copyright {
  margin: 0;
  font-size: 14px;
  text-align: center;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
  .cardgrid { 
    grid-template-columns: 1fr; /* Single column on smaller screens */
  }
  .nav {
    margin-bottom: 32px;
  }
  .hero {
    padding: 24px 0;
  }
}

/* --- Social Icons --- */
.social-links {
  display: flex;       /* Aligns icons horizontally */
  align-items: center;
  gap: 16px;           /* Adds space between icons */
}

.social-links a {
  color: var(--muted); /* Use the muted color for icons */
  display: inline-block; /* Helps with alignment and hover effects */
}

.social-links a:hover {
  color: var(--accent); /* Use the accent color on hover */
  text-decoration: none; /* We don't want underlines on icons */
  opacity: 1; /* Override the default link opacity for a cleaner effect */
}

.social-links svg {
  width: 28px;         /* Set a consistent size */
  height: 28px;
  fill: currentColor;  /* This is the magic! The SVG will inherit the color from its parent 'a' tag */
}