/* ------------------------------
   1. CSS Custom Properties (variables)
   - Reusable variables for colors, spacing, and sizes
------------------------------ */
:root {
  --max: 760px;
  --gap: 16px;
  --bg: #fff;
  --ink: #111;
  --muted:#666;
  --border:#eee;
}

/* ------------------------------
   2. Global Defaults
   - Reset margins/padding
   - Apply base font, colors, and background
   - Use border-box sizing for easier layout control
------------------------------ */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ------------------------------
   3. Links
   - Links inherit text color
   - Always underlined for clarity
------------------------------ */
a {
  color: inherit;
  text-decoration: underline;
}

/* ------------------------------
   4. Header & Footer
   - Adds padding and border styling
   - Header has inline title and right-aligned navigation
   - Footer has top border only
------------------------------ */
.site-header, .site-footer { border-bottom: 1px solid var(--border); }
.site-footer { border-top: 1px solid var(--border); border-bottom: 0; }
.site-header, .site-footer { padding: 12px; }
.site-header h1 { margin: 0; font-size: 20px; display: inline-block; }
.site-header nav { float: right; }

/* ------------------------------
   5. Layout Containers
   - Constrains content to max width
   - Centers page content with spacing
------------------------------ */
.container {
  max-width: var(--max);
  margin: 24px auto;
  padding: 0 12px;
}

/* ------------------------------
   6. Text Styles
   - Muted text for secondary elements
   - e.g. subtitles, metadata, or sources
------------------------------ */
.lede { color: var(--muted); }
.sources { color: var(--muted); }

/* ------------------------------
   7. Buttons
   - Light gray background with border
   - Rounded corners and clickable cursor
------------------------------ */
.btn {
  background:#f2f2f2;
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
}

/* ------------------------------
   8. Forms
   - Styles input fields (filters/search bars)
   - Full width, padding, and rounded borders
------------------------------ */
.filter {
  width:100%;
  padding:10px;
  margin: 16px 0;
  border:1px solid var(--border);
  border-radius:8px;
}

/* ------------------------------
   9. Lists
   - Removes default bullets
   - Adds spacing and dividers between list items
   - Styles article headings and ranked lists
------------------------------ */
.list-index { list-style:none; padding:0; margin:0; }
.list-index li {
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.list-article h2 { margin-top:0; }
.ranked { padding-left: 20px; }

/* ------------------------------
   10. Ads
   - Placeholder styling for ad spaces
   - Centered, dashed border, flexible sizing
------------------------------ */
.ad {
  margin: 24px 0;
  display:flex;
  justify-content:center;
}
.ad-box {
  width: 100%;
  max-width: 728px;
  min-height: 90px;
  border:1px dashed var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  border-radius:8px;
}

/* ------------------------------
   11. Related Content
   - Cleans up related article lists
   - Removes bullets and adds vertical spacing
------------------------------ */
.related ul { list-style: none; padding: 0; }
.related li { padding: 6px 0; }

/* ------------------------------
   12. Responsive Design
   - Adjusts layout for small screens (under 480px)
   - Stacks nav below header title
------------------------------ */
@media (max-width: 480px) {
  .site-header nav { float:none; margin-top:8px; }
}