:root { --fg:#111; --bg:#fff; --muted:#666; --link:#0a66c2; --border:#eee; }
*{box-sizing:border-box;}
body{margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu; color:var(--fg); background:var(--bg);} 
a{color:var(--link); text-decoration:none;} a:hover{text-decoration:underline;}
.site-header{display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:#fff; z-index:1000;}
.brand{font-weight:700;}
nav a{margin-right:.75rem;}
.container{max-width:860px; margin:2rem auto; padding:0 1rem;}
.post-list{list-style:none; padding:0; margin:1rem 0;}
.post-list li{padding:1rem 0; border-bottom:1px solid var(--border);} 
.muted{color:var(--muted); font-size:.9rem;}
.tags a{margin-right:.5rem;}
.excerpt{margin:.35rem 0 0;}
.site-footer{padding:2rem 1.25rem; border-top:1px solid var(--border); margin-top:3rem; color:var(--muted);} 
.post img{max-width:100%; height:auto;}
code, pre{background:#f6f8fa; padding:.2rem .4rem; border-radius:.3rem;}

/* Social Sharing Styles */
.social-sharing {
  margin: 3rem 0;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.social-sharing h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.2rem;
  color: var(--fg);
  text-align: center;
}

.social-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-decoration: none;
}

.social-btn svg {
  flex-shrink: 0;
}

/* Social Platform Colors */
.social-btn.twitter:hover {
  background: #1da1f2;
  color: #fff;
  border-color: #1da1f2;
}

.social-btn.facebook:hover {
  background: #1877f2;
  color: #fff;
  border-color: #1877f2;
}

.social-btn.linkedin:hover {
  background: #0a66c2;
  color: #fff;
  border-color: #0a66c2;
}

.social-btn.reddit:hover {
  background: #ff4500;
  color: #fff;
  border-color: #ff4500;
}

.social-btn.copy-link:hover {
  background: var(--link);
  color: #fff;
  border-color: var(--link);
}

.social-btn.copy-link.copied {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}

/* Responsive Social Buttons */
@media (max-width: 600px) {
  .social-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  .social-btn {
    justify-content: center;
    padding: 1rem 1.5rem;
  }
  
  .social-sharing {
    padding: 1.5rem;
    margin: 2rem 0;
  }
}

/* Quick Social Sharing for Home Page */
.quick-social-sharing {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  align-items: center;
}

.quick-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.quick-social-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  text-decoration: none;
}

.quick-social-btn.twitter:hover {
  background: #1da1f2;
  color: #fff;
  border-color: #1da1f2;
}

.quick-social-btn.facebook:hover {
  background: #1877f2;
  color: #fff;
  border-color: #1877f2;
}

.quick-social-btn.linkedin:hover {
  background: #0a66c2;
  color: #fff;
  border-color: #0a66c2;
}

/* Overlay */
.site-overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:900;}

/* Navigation restructure */
.site-nav{display:flex; align-items:center; gap:1rem;}
.site-header .site-nav ul{list-style:none; margin:0; padding:0;}
.site-header .site-nav .nav-primary{display:flex; gap:.75rem; align-items:center;}
.site-header li{list-style:none !important;}
.site-nav li{margin:0;}
.site-nav a{margin-right:0; padding:.5rem .65rem; border-radius:.4rem;}
.site-nav a:hover{background:#f6f8fa; text-decoration:none;}

.nav-more{position:relative;}
.more-toggle{background:transparent; border:0; padding:.5rem .65rem; border-radius:.4rem; cursor:pointer; color:var(--link);} 
.more-toggle:hover{text-decoration:underline; background:transparent;}

.nav-dropdown{position:absolute; top:calc(100% + .4rem); right:0; background:#fff; border:1px solid var(--border); border-radius:.5rem; box-shadow:0 6px 18px rgba(0,0,0,.07); min-width:220px; display:none; flex-direction:column; padding:.35rem 0; z-index:1001; pointer-events:auto;}
.nav-dropdown li{padding:0;}
.nav-dropdown li.label{padding:.4rem .75rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);} 
.nav-dropdown li.divider{height:1px; background:var(--border); margin:.3rem 0;}
.nav-dropdown li.legal a{font-size:.95rem; color:var(--muted);} 
.nav-dropdown a{display:block; padding:.6rem .75rem; margin:0; color:var(--fg);} 
.nav-dropdown a:hover{background:#f6f8fa; text-decoration:none;}

/* Desktop hover handled by JS to avoid stickiness */
.nav-more.open .nav-dropdown{display:flex;}

/* Hamburger toggle */
.nav-toggle{display:none; background:#fff; border:1px solid var(--border); padding:.45rem .65rem; border-radius:.4rem; font-size:1.1rem; cursor:pointer;}

/* Responsive */
@media (max-width: 720px){
  .nav-toggle{display:inline-block;}
  .site-nav{position:fixed; top:64px; right:0; left:0; background:#fff; border-top:1px solid var(--border); box-shadow:0 10px 24px rgba(0,0,0,.08); padding:.5rem .75rem 1rem; display:none; flex-direction:column; gap:.25rem; z-index:1001;}
  .site-nav.open{display:flex;}
  .site-nav ul{flex-direction:column; gap:.1rem;}
  .site-nav a{margin:0; padding:.7rem .5rem;}
  .nav-more{align-self:stretch;}
  .more-toggle{width:100%; text-align:left;}
  .nav-dropdown{position:relative; top:0; right:auto; left:0; box-shadow:none; border:1px solid var(--border); border-radius:.5rem; margin-top:.25rem;}
}