/* site.css - index / main landing page styles (uses variables from base.css) */
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 40px 20px;
}

.left-section { display:flex; flex-direction:column; gap:24px }
.right-section { display:flex; flex-direction:column }

.profile { display:flex; align-items:center; gap:20px; margin-bottom:10px }
.name { font-size:36px; font-weight:700; line-height:1.2; font-family: 'SLFMacro', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.description { font-size:1.125rem; /* ~20px at 18px base */ color:var(--text-color); opacity:0.95; line-height:1.6; font-weight:600 }

.button-group { display:flex; gap:12px; align-items:center }
.contact-button { display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; background: linear-gradient(180deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 85%, black 15%)); border:0; border-radius:10px; color:#fff; font-weight:700; text-decoration:none }
.github-button { width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--card-bg); border:2px solid var(--border-color); color:var(--text-color) }

.links { display:flex; flex-direction:column; gap:16px }
.link-button { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 98%, black 2%), var(--card-bg)); border:1px solid var(--border-color); border-radius:10px; text-decoration:none; color:var(--text-color); font-weight:600; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.18s ease }
.link-button:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(0,0,0,0.09) }
.link-title { flex:1; text-align:left }
.link-subtitle { font-size:12px; opacity:0.8; color:var(--text-color); margin-left:12px }

/* ensure SVGs inside .github-button inherit color */
.github-button svg { width:20px; height:20px; fill: currentColor; stroke: none }

/* footer link color */
footer.site-footer a { color: var(--text-color); text-decoration:none; font-weight:600 }

@media (max-width: 768px) {
  .container { grid-template-columns: 1fr; gap:40px }
  .name { font-size:28px }
  .theme-toggle { width:45px; height:45px; top:15px; right:15px }
}