/* --------------------------------------------------------
   Reset
-------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#1F2937;color:#E5E8E4;font-family:"Inter",sans-serif;line-height:1.6}
a{color:#60A5FA;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1240px;margin:0 auto;padding:0 1.25rem}

/* --------------------------------------------------------
   Header and navigation
-------------------------------------------------------- */
header{
    border-bottom:1px solid #314A40;

    /* --- FIX: create stacking context & allow overflow --- */
    position:relative;          /* new */
    z-index:1000;               /* new */
    overflow:visible;           /* new */
}

/* Flex-center layout (mobile first):
   • Logo is centered with auto margins.
   • Hamburger and desktop menu are absolutely positioned so they
     never push the logo off-center.
   • Logo shifts to the left on wider screens (see media query).
*/
.navbar{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem 0;
}

/* Logo (mobile = centered, desktop = left-aligned) */
.logo{margin:0 auto}
.logo img{height:34px;width:auto}

/* Mobile hamburger */
.hamburger{
    position:absolute;
    left:1.25rem;
    top:50%;transform:translateY(-50%);
    display:none;flex-direction:column;cursor:pointer
}
.hamburger span{width:24px;height:3px;background:#E5E8E4;margin:4px 0}

/* Desktop navigation */
.nav-links{
    position:absolute;
    right:2.5rem;
    top:50%;transform:translateY(-50%);
    display:flex;gap:1.5rem
}
.drop-btn{
    background:none;border:none;color:#E5E8E4;font-weight:600;
    display:flex;align-items:center;gap:.35rem;cursor:pointer
}
.dropdown{position:relative}
.dropdown-menu{
    display:none;flex-direction:column;gap:.4rem;
    position:absolute;left:0;top:100%;
    background:#111827;border:1px solid #314A40;border-radius:12px;
    padding:.9rem 1rem;min-width:260px;

    /* --- FIX: raise above overlapping content --- */
    z-index:1100;               /* new */
}
.dropdown:hover .dropdown-menu{display:flex}
.dropdown-menu a{
    color:#E5E8E4;font-size:.9rem;display:flex;align-items:center;
    gap:.45rem;white-space:nowrap;padding:.15rem 0
}
.mini-ico{width:18px;height:18px;object-fit:contain}

/* Mobile side drawer */
.side-drawer{
    position:fixed;top:0;left:0;height:100vh;width:82%;max-width:300px;
    background:#111827;border-right:1px solid #314A40;
    transform:translateX(-105%);transition:transform .28s ease;
    padding:1.4rem;overflow-y:auto;z-index:1000
}
.side-drawer.show{transform:translateX(0)}
#drawer-close{
    background:none;border:none;color:#E5E8E4;font-size:2rem;
    position:absolute;top:.55rem;right:.65rem;cursor:pointer
}
.drawer-group{border-bottom:1px solid #314A40;padding:.6rem 0}
.drawer-group summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;gap:.5rem;font-size:1.05rem;color:#E5E8E4
}
.drawer-menu{display:flex;flex-direction:column;margin-top:.6rem}
.drawer-menu a{
    color:#E5E8E4;font-size:.95rem;display:flex;align-items:center;
    gap:.5rem;padding:.25rem 0
}

/* Show hamburger / hide desktop nav on small screens */
@media(max-width:768px){
    .nav-links{display:none}
    .hamburger{display:flex}
}

/* --------------------------------------------------------
   Hero section
-------------------------------------------------------- */
.hero{text-align:center;margin:3rem auto 2.2rem;max-width:680px}
.hero h1{font-size:1.8rem;font-weight:700;margin-bottom:.9rem;line-height:1.3}
.hero p{font-size:1.05rem;line-height:1.45;color:#cbd5e1}

/* --------------------------------------------------------
   Category filter bar
-------------------------------------------------------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2rem;justify-content:center}
.filter-btn{
    border:1px solid #314A40;background:#1F2937;color:#E5E8E4;
    padding:.45rem 1.1rem;border-radius:9999px;font-size:.95rem;
    cursor:pointer;display:flex;align-items:center;gap:.3rem;
    transition:background .12s,border .12s
}
.filter-btn:hover{background:#314A40}
.filter-btn.active{background:#60A5FA;color:#1F2937;border-color:#60A5FA}

/* --------------------------------------------------------
   Tool cards
-------------------------------------------------------- */
main{margin-top:3rem !important;padding:0 0 2.5rem}
.tools-grid{
    display:grid;gap:2rem;
    grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
    justify-content:center
}
.tool-card{
    display:flex;flex-direction:column;align-items:flex-start;
    background:#1F2937;border:1px solid #314A40;border-radius:18px;
    padding:1.8rem 1.8rem 2.2rem;height:290px;
    transition:transform .12s,background .12s,box-shadow .12s
}
.tool-card:hover{
    background:#E8A784;transform:translateY(-4px);
    box-shadow:0 8px 22px rgba(0,0,0,.35);text-decoration:none
}
.tool-card:hover .tool-title,
.tool-card:hover .tool-desc{color:#1F2937}
.tool-icon{width:180px;height:100px;margin-bottom:1.25rem}
.tool-icon img{width:100%;height:100%;object-fit:contain}
.tool-title{
    width:100%;text-align:center;font-size:1.15rem;font-weight:600;
    margin-bottom:.8rem;color:#E5E8E4
}
.tool-desc{font-size:.95rem;color:#cbd5e1;line-height:1.55;word-break:break-word}

/* --------------------------------------------------------
   Footer
-------------------------------------------------------- */
footer{border-top:1px solid #314A40;padding:2rem 0;margin-top:4rem;text-align:center}
.footer-links{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;margin-bottom:1rem}
small{color:#9CA3AF}

/* --------------------------------------------------------
   Desktop overrides
   -- move logo to the left while keeping mobile centered
-------------------------------------------------------- */
@media(min-width:769px){
    .navbar{justify-content:flex-start}
    .logo{
        margin-left:1.25rem;      /* push away from edge */
        margin-right:auto;        /* take remaining space */
    }
}