/*
Theme Name: AI Authority Rank
Version: 1.0
*/
/* ===================
   RESET
=================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    background:#0b0f19;
    color:#ffffff;
    font-family:Arial, sans-serif;
    overflow-x:hidden;
}
/* ===================
   NAVBAR
=================== */
.navbar{
    background:#0b0f19;
    border-bottom:1px solid rgba(255,255,255,.08);
    position:sticky;
    top:0;
    z-index:999;
}
.nav-inner{
    max-width:1200px;
    margin:0 auto;
    padding:14px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    position:relative; /* needed so mobile drawer anchors correctly */
}
/* LOGO */
.logo{
    font-size:28px;
    font-weight:800;
    color:#fbbf24;
    white-space:nowrap;
}
/* ===================
   WORDPRESS MENU
=================== */
.nav-links{
    flex:1;
    display:flex;
    justify-content:center;
}
.nav-links > ul{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    list-style:none;
    margin:0;
    padding:0;
    align-items:center;
}
.nav-links li{
    list-style:none;
    position:relative;
    white-space:nowrap;
}
.nav-links a{
    color:#ffffff;
    text-decoration:none;
    padding:8px 12px;
    border-radius:8px;
    font-weight:600;
    font-size:14px;
    transition:0.3s;
    display:block;
}
.nav-links a:hover{
    background:rgba(251,191,36,.15);
    color:#fbbf24;
}
.current-menu-item a{
    background:#fbbf24;
    color:#111111 !important;
}
/* ===================
   DROPDOWN
=================== */
.nav-links .sub-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#0b0f19;
    border:1px solid rgba(255,255,255,.08);
    min-width:200px;
    border-radius:10px;
    padding:6px 0;
    z-index:9999;
}
.nav-links li:hover > .sub-menu{
    display:block;
}
.nav-links .sub-menu li{
    width:100%;
}
.nav-links .sub-menu li a{
    padding:8px 12px;
    font-size:13px;
}
.nav-links .sub-menu li a:hover{
    background:rgba(251,191,36,.15);
    color:#fbbf24;
}
/* ===================
   NAV BUTTON
=================== */
.nav-btn{
    background:#fbbf24;
    color:#111111;
    padding:10px 18px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    font-size:14px;
    white-space:nowrap;
}
/* ===================
   HAMBURGER BUTTON
   hidden on desktop
=================== */
.nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:40px;
    height:40px;
    background:none;
    border:2px solid rgba(251,191,36,.3);
    border-radius:8px;
    cursor:pointer;
    padding:6px;
    flex-shrink:0;
}
.nav-toggle span{
    display:block;
    height:2px;
    width:100%;
    background:#fbbf24;
    border-radius:2px;
    transition:transform .3s ease, opacity .3s ease;
}
/* Animate to X */
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===================
   HERO
=================== */
.hero{
    text-align:center;
    padding:120px 20px;
}
.hero h1{
    font-size:64px;
    max-width:900px;
    margin:0 auto;
    line-height:1.1;
}
.hero p{
    max-width:700px;
    margin:25px auto;
    color:#9ca3af;
    font-size:20px;
}
/* ===================
   STATS
=================== */
.stats{
    padding:60px 20px;
}
.stats-grid{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
/* ===================
   CHECKER
=================== */
.checker{
    padding:100px 20px;
}

/* ===================
   MOBILE — max 768px
   (replaces old wrap fix)
=================== */
@media(max-width:768px){

    /* Show hamburger, hide desktop nav links and CTA */
    .nav-toggle{ display:flex; }
    .nav-links{ display:none; }
    .nav-inner > .nav-btn{ display:none; }

    /* Drawer: hidden by default, slides open */
    .nav-links.open{
        display:block;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#0b0f19;
        border-top:1px solid rgba(255,255,255,.08);
        border-bottom:2px solid rgba(251,191,36,.2);
        box-shadow:0 8px 30px rgba(0,0,0,.6);
        z-index:998;
        animation:slideDown .3s ease;
    }

    @keyframes slideDown{
        from{ opacity:0; transform:translateY(-8px); }
        to{   opacity:1; transform:translateY(0); }
    }

    /* Stack menu items */
    .nav-links > ul{
        flex-direction:column;
        gap:0;
        padding:10px 20px;
    }
    .nav-links ul li{
        width:100%;
        border-bottom:1px solid rgba(255,255,255,.06);
        white-space:normal;
    }
    .nav-links ul li:last-child{ border-bottom:none; }
    .nav-links ul li a{
        padding:14px 6px;
        font-size:16px;
        color:#e5e7eb;
        border-radius:0;
    }
    .nav-links ul li a:hover{
        background:none;
        color:#fbbf24;
        padding-left:14px;
    }
    .current-menu-item a{
        background:none;
        color:#fbbf24 !important;
        border-left:3px solid #fbbf24;
        padding-left:12px;
    }

    /* Dropdown inside mobile drawer */
    .nav-links .sub-menu{
        display:none;
        position:static;
        border:none;
        background:rgba(255,255,255,.03);
        border-radius:8px;
        padding:4px 0 4px 12px;
        margin-bottom:8px;
    }
    .nav-links li.open > .sub-menu{ display:block; }

    /* Mobile CTA inside drawer */
    .nav-mobile-cta{
        display:block;
        margin:14px 20px 20px;
        background:#fbbf24;
        color:#111111 !important;
        text-align:center;
        padding:14px;
        border-radius:10px;
        font-weight:700;
        font-size:16px;
        text-decoration:none;
    }

    /* Hero */
    .hero{ padding:80px 20px; }
    .hero h1{ font-size:38px; }
    .hero p{ font-size:17px; }

    /* Stats */
    .stats-grid{ grid-template-columns:1fr; }
}

/* Hide mobile CTA on desktop */
@media(min-width:769px){
    .nav-mobile-cta{ display:none; }
    .nav-toggle{ display:none; }
}

/* ================================
   MOBILE NAV BUTTON FIX
   !important prevents LiteSpeed
   CSS minifier from breaking these
================================ */
@media(max-width:768px){
    .nav-inner > .nav-btn{
        display:none !important;
    }
    .nav-toggle{
        display:flex !important;
    }
    .nav-links{
        display:none !important;
    }
    .nav-links.open{
        display:block !important;
        position:absolute !important;
        top:100% !important;
        left:0 !important;
        right:0 !important;
        background:#0b0f19 !important;
        border-top:1px solid rgba(255,255,255,.08) !important;
        border-bottom:2px solid rgba(251,191,36,.2) !important;
        box-shadow:0 8px 30px rgba(0,0,0,.6) !important;
        z-index:998 !important;
    }
    .nav-links.open > ul{
        flex-direction:column !important;
        gap:0 !important;
        padding:10px 20px !important;
        list-style:none !important;
    }
    .nav-links.open ul li{
        width:100% !important;
        border-bottom:1px solid rgba(255,255,255,.06) !important;
        list-style:none !important;
    }
    .nav-links.open ul li a{
        display:block !important;
        padding:15px 6px !important;
        font-size:16px !important;
        color:#e5e7eb !important;
        text-decoration:none !important;
    }
    /* Get Started button injected inside drawer by JS */
    .nav-mobile-cta{
        display:block !important;
        margin:14px 20px 20px !important;
        background:#fbbf24 !important;
        color:#111 !important;
        text-align:center !important;
        padding:14px !important;
        border-radius:10px !important;
        font-weight:700 !important;
        font-size:16px !important;
        text-decoration:none !important;
    }
}