/* styles.css - three-column liquid layout + boxed sections + colored headings */

/* Root variables */
:root{
  --bg-top:#f4f7fb;
  --bg-mid:#e9eef6;
  --panel:#ffffff;
  --accent:#0066cc;
  --header-bg:#4b2b7f;
  --heading-accent:#ffd54a;
  --text:#222222;
  --muted:#666666;
  --radius:10px;
  --max-width:1100px;
  --shadow:0 6px 18px rgba(0,0,0,0.06);
  font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  color:var(--text);
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 50%,var(--bg-top) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* Container */
.container{max-width:var(--max-width);margin:0 auto;padding:18px}

/* Header */
.site-header{
  background:var(--header-bg);
  color:#fff;
  padding:18px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.header-left{display:flex;align-items:center;gap:12px}
.profile-photo{width:72px;height:72px;border-radius:8px;object-fit:cover;border:3px solid rgba(255,255,255,0.12)}
.header-meta .name{margin:0;font-size:20px}
.header-meta .email{margin:4px 0 0;color:rgba(255,255,255,0.9);font-size:13px}
.header-meta .course{margin:2px 0 0;color:rgba(255,255,255,0.85);font-size:12px}

/* Header nav */
.header-nav{display:flex;align-items:center;gap:10px}
.nav-btn{background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff;padding:8px 10px;border-radius:8px;cursor:pointer}
.nav-btn:hover{background:rgba(255,255,255,0.06)}
.nav-link{background:linear-gradient(90deg,#ffd54a,#ffb74d);color:#2b1a00;padding:8px 10px;border-radius:8px;text-decoration:none}

/* Layout: three-column liquid */
.layout{display:grid;grid-template-columns:1fr 2fr 1fr;gap:18px;margin-top:18px}

/* Columns */
.col{background:transparent}
.col-left,.col-right{min-width:180px}
.col-main{min-width:320px}

/* Section title with yellow highlight */
.section-title{
  display:inline-block;
  background:linear-gradient(90deg, rgba(255,213,74,0.18), rgba(255,213,74,0.08));
  padding:8px 12px;border-radius:8px;color:#2b1a00;font-weight:700;margin-bottom:8px;
}

/* Quick links and resources */
.quick-links, .resources{list-style:none;padding:0;margin:8px 0 0}
.quick-links li, .resources li{margin:8px 0}
.quick-links a, .resources a{color:var(--accent);text-decoration:none}
.quick-links a:hover, .resources a:hover{text-decoration:underline}

/* Projects grid */
.projects{padding:6px 0}
.lead{color:var(--muted);margin:6px 0 12px}
.projects-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){ .projects-grid{grid-template-columns:repeat(2,1fr)} }

/* Project card */
.project-card{
  background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;transition:transform .18s ease,box-shadow .18s ease;
}
.project-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,0,0,0.10)}
.project-card h3{margin:0 0 8px;color:var(--header-bg)}
.project-desc{background:linear-gradient(180deg, rgba(255,245,224,0.95), rgba(255,243,207,0.95));padding:10px;border-radius:8px;color:#3b2b00;box-shadow:0 6px 18px rgba(75,43,127,0.02)}

/* Panels (interactive, game, etc.) */
.panel{background:var(--panel);padding:14px;border-radius:10px;box-shadow:var(--shadow);margin-bottom:12px}
.game-area{position:relative;height:140px;border-radius:8px;background:linear-gradient(180deg,#f7fbff,#eef6ff);display:flex;align-items:center;justify-content:center;flex-direction:column}
.target{width:36px;height:36px;border-radius:50%;background:linear-gradient(90deg,#ff6b6b,#ffb86b);position:absolute;display:none;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.12)}

/* Tip form */
.tip-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tip-form label{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.tip-form input{padding:6px;border-radius:6px;border:1px solid #ddd;width:120px}

/* Buttons */
.btn{background:var(--accent);color:#fff;padding:8px 12px;border-radius:8px;border:none;cursor:pointer;font-weight:700}
.btn:hover{opacity:0.95}

/* Blog */
.blog .news-item{margin-bottom:12px}
.news-item h4{margin:0 0 6px}

/* Footer */
.site-footer{margin-top:22px;padding:14px;border-radius:8px;background:linear-gradient(90deg, rgba(75,43,127,0.95), rgba(37,117,252,0.95));color:#fff;text-align:center}
.muted{color:var(--muted);font-size:13px}

/* Responsive: collapse to single column on small screens */
@media (max-width:900px){
  .layout{grid-template-columns:1fr;gap:12px}
  .col-left,.col-right{order:2}
  .col-main{order:1}
  .header-nav{display:none}
  .profile-photo{width:64px;height:64px}
}