/* styles.css - simple responsive styling for the Python Developer Guide */

:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#61dafb;
  --white:#eef2f7;
  --container-width:1000px;
  --radius:10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--white);
  background: linear-gradient(180deg, #071021 0%, #071827 100%);
  -webkit-font-smoothing:antialiased;
}
.container{
  max-width:var(--container-width);
  margin:0 auto;
  padding:24px;
}

.site-header{
  background: linear-gradient(90deg, rgba(6,10,17,0.6), rgba(6,12,22,0.4));
  border-bottom:1px solid rgba(255,255,255,0.04);
  padding:28px 0;
}
.site-header h1{margin:0;font-size:28px}
.tagline{color:var(--muted);margin:6px 0 12px}
.site-header nav{display:flex;gap:12px;flex-wrap:wrap}
.site-header nav a{color:var(--accent);text-decoration:none;font-weight:600}
.site-header nav a:hover{text-decoration:underline}

main{padding:24px 0}
section{margin-bottom:28px}
section h2{margin-top:0;color:var(--accent)}

.topics-list{columns:2;column-gap:28px;list-style:disc;margin:12px 0;padding-left:20px}
@media (max-width:700px){.topics-list{columns:1}}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  padding:16px;border-radius:var(--radius);
}
.card h3{margin-top:0;color:var(--white)}
.card ul{margin:8px 0 0;padding-left:18px;color:var(--muted)}
.card a{color:var(--accent);text-decoration:none}
.card a:hover{text-decoration:underline}

.site-footer{
  border-top:1px solid rgba(255,255,255,0.03);
  color:var(--muted);
  padding:20px 0;margin-top:20px
}

/* Utility */
strong{color:#fff}

/* Improve readability for long paragraphs */
p{line-height:1.6;color:var(--muted)}
ul{line-height:1.6}

/* make links open focus nicely */
a:focus{outline:2px dashed rgba(97,218,251,0.25);outline-offset:3px}

/* Small enhancements */
@media (prefers-reduced-motion:reduce){*{transition:none!important}}