/*
Theme Name: blogsundari-themes
Theme URI: http://example.com/
Author: Alor Desha
Author URI: http://alordesha.com/
Description: A custom theme for NaimaBlogsundari with sticky navbar and drawer submenus.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blogsundari-themes
*/

/* Base */
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#111;color:#fff}
a{text-decoration:none}

/* Sticky navbar */
.navbar{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px; background:#000; border-bottom:1px solid #222;
}
.logo{font-weight:700;font-size:22px}
.nav-links{list-style:none;display:flex;gap:18px;align-items:center;margin:0;padding:0}
.nav-links li{position:relative}
.nav-links a{color:#fff;padding:8px 10px;border-radius:6px;transition:.25s}
.nav-links a:hover{background:#1a1a1a;color:#ffd166}
.menu-toggle{display:none;color:#fff;font-size:22px;cursor:pointer}

/* Overlay (click to close) */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:1500;display:none;
}
.overlay.active{display:block}

/* Left Drawer (stays while scrolling) */
.submenu-drawer{
  position:fixed; top:60px; left:0; z-index:2000;
  width:280px; max-height:calc(100vh - 60px);
  background:#1c1c1c; border-right:1px solid #333;
  transform:translateX(-105%); transition:transform .35s ease;
  overflow-y:auto; box-shadow:2px 0 18px rgba(0,0,0,.35);
}
.submenu-drawer.active{ transform:translateX(0) }
.submenu-drawer ul{list-style:none;margin:0;padding:10px}
.submenu-header{
  position:sticky; top:0; background:#151515; z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid gold; padding:10px 14px
}
.submenu-header h3{margin:0;color:gold;font-size:18px}
.close-btn{cursor:pointer;font-size:25px;color:#fff;transition:.2s}
.close-btn:hover{color:#ff4d4f}

/* Items */
.submenu-drawer li{margin:8px 0}
.submenu-drawer a{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 12px; border-radius:8px; color:#fff; background:#1f1f1f;
  transition:background .25s,color .25s, transform .15s;
}
.submenu-drawer a:hover{ background:#2b2b2b; color:gold }
.submenu-drawer a span{
  display:inline-flex; align-items:center; font-size:15px; font-weight:600;
}
.submenu-drawer a span::after{
  content:"➔"; margin-left:8px; font-size:16px; color:gold; transition:transform .25s
}
.submenu-drawer a:hover span::after{ transform:translateX(4px) }

/* Profile image (bigger + glow on hover) */
.submenu-drawer img{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  border:2px solid gold; transition:transform .35s, box-shadow .35s, border-color .35s;
}
.submenu-drawer li:hover img{ transform:scale(1.12); box-shadow:0 0 12px #fff }

/* Desktop → Mobile */
@media (max-width: 1024px){
  .submenu-drawer{ width:260px }
}
@media (max-width: 768px){
  .menu-toggle{display:block}
  .nav-links{position:fixed; right:-100%; top:60px; background:#000; width:260px; height:calc(100vh - 60px); overflow:auto; flex-direction:column; padding:14px 10px; transition:.3s; z-index:1200}
  .nav-links.active{ right:0 }
  .nav-links a{width:100%}
  /* Drawer stays on left in mobile too */
  .submenu-drawer{ top:60px; left:0; width:85vw; max-height:calc(100vh - 60px) }
}

/* Optional custom scrollbar for drawer */
.submenu-drawer::-webkit-scrollbar{width:8px}
.submenu-drawer::-webkit-scrollbar-thumb{background:#444;border-radius:4px}
.submenu-drawer::-webkit-scrollbar-thumb:hover{background:#666}
/* Footer small */
 
footer{background:#000;padding:20px;text-align:center;color:#aaa;margin-top:50px}
/*09/09/20025 */
/* === Social Share Buttons === */
.social-share {
    margin-top: 30px;
    padding: 15px;
    border-top: 2px solid #333;
}
.social-share-heading {
    color: #ffcc00;
    margin-bottom: 15px;
    font-size: 18px;
}
.social-share-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.social-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    transition: 0.2s ease;
}
.social-btn:hover {
    opacity: 0.85;
}

/* Platforms */
.social-btn.facebook { background: #3b5998; }
.social-btn.whatsapp { background: #25D366; }
.social-btn.twitter  { background: #1DA1F2; }
.social-btn.linkedin { background: #0077b5; }