/* =========================================================
   STUDYAGORA NOTES LIBRARY
   FINAL UI SYSTEM
========================================================= */

:root{
    --bg:#050505;
    --surface:#0d0d0f;
    --surface-2:#111114;
    --surface-3:#161619;

    --border:#222226;
    --border-soft:#1a1a1d;
    --border-hover:#38383d;

    --text:#ffffff;
    --text-soft:#c7c7cc;
    --muted:#85858d;
    --muted-2:#62626a;

    --orange:#ff9f43;
    --blue:#4db8ff;
    --green:#55d98a;
    --red:#ff6b7a;
    --yellow:#f6c453;

    --shadow:0 16px 45px rgba(0,0,0,.38);
}


/* =========================================================
   GLOBAL
========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;

    background:
        linear-gradient(
            rgba(255,255,255,.014) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.014) 1px,
            transparent 1px
        ),
        var(--bg);

    background-size:48px 48px;
    background-attachment:fixed;

    color:var(--text);
    font-family:Inter,Arial,Helvetica,sans-serif;

    line-height:1.5;

    animation:fadeIn .45s ease-out;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input{
    font:inherit;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar{
    position:sticky;
    top:0;
    z-index:1000;

    min-height:68px;

    padding:10px clamp(14px,4vw,48px);

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:rgba(5,5,5,.96);

    border-bottom:1px solid #171719;

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.nav-left{
    display:flex;
    align-items:center;
    min-width:0;
}

.brand-link{
    display:flex;
    align-items:center;
    gap:10px;
}

.nav-logo{
    width:40px;
    height:40px;

    border-radius:9px;

    object-fit:cover;
}

.nav-title{
    margin:0;

    color:#fff;

    font-size:20px;
    font-weight:900;

    letter-spacing:-.5px;
}

.desktop-menu{
    display:flex;
    align-items:center;

    gap:clamp(13px,1.8vw,25px);
}

.desktop-menu a{
    position:relative;

    color:#b9b9c0;

    font-size:14px;
    font-weight:700;

    transition:
        color .2s ease,
        transform .2s ease;
}

.desktop-menu a:hover{
    color:#fff;
}

.desktop-menu a.active-link{
    color:#fff;
}

.desktop-menu a.active-link::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-9px;

    height:2px;

    border-radius:99px;

    background:#fff;
}

.prelims-nav-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.prelims-nav-link i{
    color:var(--orange);
}

.premium-nav-link{
    display:inline-flex;
    align-items:center;
    gap:6px;

    color:#f3d36a !important;
}

.premium-nav-link i{
    color:#f3c94e;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-btn{
    display:none;

    width:42px;
    height:42px;

    border:1px solid #27272b;
    border-radius:11px;

    background:#111113;

    color:#fff;

    cursor:pointer;

    place-items:center;

    font-size:20px;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu{
    display:none;

    position:fixed;

    top:68px;
    left:0;
    right:0;

    z-index:999;

    padding:10px 12px 15px;

    background:rgba(7,7,8,.98);

    border-bottom:1px solid #242428;

    box-shadow:0 18px 40px rgba(0,0,0,.65);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.mobile-menu.is-open{
    display:block;
}

.mobile-menu a{
    display:flex;
    align-items:center;

    min-height:53px;

    margin:4px 0;

    padding:0 14px;

    border:1px solid #1d1d20;
    border-radius:12px;

    background:#101012;

    color:#c9c9ce;

    font-size:15px;
    font-weight:750;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.mobile-menu a:hover,
.mobile-menu a.active-link{
    color:#fff;

    background:#171719;

    border-color:#36363b;
}


/* =========================================================
   MAIN NOTES AREA
========================================================= */

.notes-section{
    width:min(1160px,calc(100% - 32px));

    margin:0 auto;

    padding:40px 0 90px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.breadcrumb-container{
    margin-bottom:16px;
}

.breadcrumb-list{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:7px;

    margin:0;
    padding:0;

    list-style:none;

    color:#66666d;

    font-size:11px;
    font-weight:650;
}

.breadcrumb-list li{
    margin:0;
}

.breadcrumb-list li + li::before{
    content:"/";

    margin-right:7px;

    color:#3d3d42;
}

.breadcrumb-list a{
    color:#85858c;
}

.breadcrumb-list a:hover{
    color:#fff;
}


/* =========================================================
   HERO
========================================================= */

.hero{
    position:relative;

    margin-bottom:30px;

    padding:28px;

    border:1px solid #252529;
    border-radius:22px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(255,159,67,.075),
            transparent 25%
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(77,184,255,.055),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #111113,
            #080809
        );

    box-shadow:var(--shadow);
}


/* subtle highlight line */

.hero::before{
    content:"";

    position:absolute;

    top:0;
    left:8%;
    right:8%;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );
}


/* =========================================================
   HERO TOP
========================================================= */

.hero-topline{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    margin-bottom:20px;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:7px 11px;

    border:1px solid #303035;
    border-radius:999px;

    background:#151517;

    color:#d5d5da;

    font-size:10px;
    font-weight:900;

    letter-spacing:1px;
    text-transform:uppercase;
}

.eyebrow i{
    color:#fff;
}

.hero-status{
    color:#73737a;

    font-size:11px;
    font-weight:700;
}

.hero-status i{
    margin-right:5px;

    color:var(--green);

    font-size:7px;
}


/* =========================================================
   HERO MAIN
========================================================= */

.hero-main{
    display:grid;

    grid-template-columns:minmax(0,1fr) 320px;

    align-items:center;

    gap:35px;
}

.hero-copy{
    min-width:0;
}

.notes-title{
    margin:0;

    max-width:none;

    color:#fff;

    font-size:clamp(42px,5vw,66px);

    line-height:.94;

    letter-spacing:-3.2px;

    font-weight:950;
}

.notes-title span{
    color:#9b9ba2;
}

.notes-sub{
    max-width:620px;

    margin:17px 0 0;

    color:#99999f;

    font-size:15px;

    line-height:1.65;
}


/* =========================================================
   HERO STATS
========================================================= */

.hero-stats{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:8px;
}

.hero-stat{
    min-height:94px;

    padding:14px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    border:1px solid #252529;
    border-radius:14px;

    background:#0b0b0d;
}

.hero-stat strong{
    color:#fff;

    font-size:25px;

    line-height:1;

    font-weight:950;

    letter-spacing:-1px;
}

.hero-stat span{
    margin-top:7px;

    color:#6e6e75;

    font-size:9px;
    font-weight:850;

    letter-spacing:.8px;

    text-transform:uppercase;
}


/* =========================================================
   SEO INTRO
========================================================= */

.seo-intro{
    width:100%;

    margin:20px 0 0;

    padding:13px 16px;

    border:1px solid #202023;
    border-radius:13px;

    background:#0a0a0c;
}

.seo-intro p{
    margin:0;

    color:#88888f;

    font-size:12px;

    line-height:1.65;
}

.seo-intro strong{
    color:#e5e5e8;
}


/* =========================================================
   SEARCH
========================================================= */

.controls{
    display:flex;

    justify-content:center;

    margin-top:13px;
}

.search-box{
    position:relative;

    width:100%;
}

.search-box i{
    position:absolute;

    left:17px;
    top:50%;

    transform:translateY(-50%);

    color:#66666d;

    pointer-events:none;
}

.search-box input{
    width:100%;

    height:52px;

    padding:0 18px 0 46px;

    border:1px solid #29292d;
    border-radius:14px;

    outline:none;

    background:#09090b;

    color:#fff;

    font-size:14px;
    font-weight:600;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.search-box input::placeholder{
    color:#66666d;
}

.search-box input:focus{
    border-color:#45454b;

    box-shadow:
        0 0 0 3px rgba(255,255,255,.035);
}


/* =========================================================
   LIBRARY STATS — FALLBACK FOR ORIGINAL MARKUP
========================================================= */

.library-stats{
    display:flex;

    justify-content:center;
    align-items:center;

    flex-wrap:wrap;

    gap:7px;

    margin-top:17px;
}

.library-stats span{
    padding:5px 10px;

    border:1px solid #242428;
    border-radius:999px;

    background:#0d0d0f;

    color:#77777e;

    font-size:10px;
    font-weight:700;
}

.library-stats strong{
    color:#e5e5e8;
}


/* =========================================================
   NOTES GRID
========================================================= */

.notes-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:14px;
}


/* =========================================================
   SUBJECT CARD
========================================================= */

.notes-category{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #111113,
            #0a0a0c
        );

    border:1px solid #202024;

    border-radius:17px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.25);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


/* Accent line */

.notes-category::before{
    content:"";

    position:absolute;

    top:0;
    left:17px;
    right:17px;

    height:2px;

    border-radius:0 0 8px 8px;

    background:#555;

    opacity:.85;
}


/* Different accents */

.notes-category:nth-child(4n+1)::before{
    background:var(--orange);
}

.notes-category:nth-child(4n+2)::before{
    background:var(--blue);
}

.notes-category:nth-child(4n+3)::before{
    background:var(--green);
}

.notes-category:nth-child(4n)::before{
    background:var(--red);
}


.notes-category:hover{
    transform:translateY(-2px);

    border-color:#37373c;

    box-shadow:
        0 14px 35px rgba(0,0,0,.38);
}

.notes-category[open]{
    border-color:#414147;

    box-shadow:
        0 16px 38px rgba(0,0,0,.45);
}


/* =========================================================
   ACCORDION SUMMARY
========================================================= */

.notes-category > summary{
    list-style:none;

    cursor:pointer;

    user-select:none;

    -webkit-tap-highlight-color:transparent;
}

.notes-category > summary::-webkit-details-marker{
    display:none;
}

.notes-category > summary:focus-visible{
    outline:2px solid #666;

    outline-offset:-3px;
}


/* =========================================================
   CATEGORY HEADER
========================================================= */

.category-header{
    width:100%;

    min-height:82px;

    padding:17px 18px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:16px;

    background:transparent;

    color:#fff;

    text-align:left;
}

.category-title-wrap{
    display:flex;

    align-items:center;

    gap:14px;

    min-width:0;
}

.category-icon{
    width:44px;
    height:44px;

    flex:none;

    display:grid;
    place-items:center;

    border-radius:13px;

    border:1px solid #29292e;

    background:#151517;

    color:#ddd;

    font-size:16px;
}


/* Icon accent colors */

.notes-category:nth-child(4n+1) .category-icon{
    color:var(--yellow);
}

.notes-category:nth-child(4n+2) .category-icon{
    color:var(--blue);
}

.notes-category:nth-child(4n+3) .category-icon{
    color:var(--green);
}

.notes-category:nth-child(4n) .category-icon{
    color:var(--red);
}


.category-name{
    display:block;

    color:#fff;

    font-size:16px;

    font-weight:950;

    letter-spacing:-.2px;
}

.category-count{
    display:block;

    margin-top:4px;

    color:#73737a;

    font-size:10px;

    font-weight:800;

    letter-spacing:.35px;

    text-transform:uppercase;
}


/* =========================================================
   CHEVRON
========================================================= */

.chevron{
    width:30px;
    height:30px;

    flex:none;

    display:grid;
    place-items:center;

    border:1px solid #29292d;
    border-radius:9px;

    background:#111113;

    color:#707077;

    transition:
        transform .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.notes-category[open] .chevron{
    transform:rotate(180deg);

    color:#fff;

    border-color:#44444a;
}


/* =========================================================
   TOPIC LIST
========================================================= */

.notes-list{
    display:block;

    margin:0;

    padding:0 18px 18px;

    list-style:none;
}

.notes-list li{
    border-top:1px solid #1d1d20;
}

.notes-list a{
    min-height:46px;

    padding:9px 4px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;

    color:#aaaab1;

    font-size:13px;

    font-weight:650;

    transition:
        color .18s ease,
        padding-left .18s ease;
}

.notes-list a::after{
    content:"\f054";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    color:#4e4e55;

    font-size:8px;

    transition:color .18s ease;
}

.notes-list a:hover{
    padding-left:9px;

    color:#fff;
}

.notes-list a:hover::after{
    color:#fff;
}


/* =========================================================
   HIGHLIGHT LINK
========================================================= */

.notes-list a.highlight{
    color:#fff !important;

    font-weight:850;
}

.notes-list a.highlight::after{
    color:var(--orange);
}


/* =========================================================
   SEARCH STATES
========================================================= */

.notes-list li.search-hidden{
    display:none !important;
}

.notes-category.search-hidden{
    display:none !important;
}

.no-results{
    display:none;

    grid-column:1/-1;

    padding:55px 20px;

    text-align:center;

    color:#66666d;
}

.no-results.show{
    display:block;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top{
    position:fixed;

    right:20px;
    bottom:20px;

    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    border:1px solid #29292d;
    border-radius:12px;

    background:#111113;

    color:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.5);

    cursor:pointer;

    opacity:0;
    visibility:hidden;

    transform:translateY(8px);

    transition:.2s ease;

    z-index:900;
}

.back-to-top.visible{
    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

.back-to-top:hover{
    border-color:#555;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .desktop-menu{
        display:none;
    }

    .mobile-menu-btn{
        display:grid;
    }

    .notes-section{
        width:min(100% - 20px,720px);

        padding-top:27px;
    }

    .hero{
        padding:23px 20px 20px;

        border-radius:20px;
    }

    .hero-main{
        grid-template-columns:1fr;

        gap:20px;
    }

    .hero-stats{
        width:100%;
        max-width:450px;
    }

    .notes-title{
        font-size:clamp(40px,8vw,56px);

        letter-spacing:-2.4px;
    }

    .notes-grid{
        grid-template-columns:1fr;

        gap:11px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:560px){

    body{
        background:
            linear-gradient(
                rgba(255,255,255,.012) 1px,
                transparent 1px
            ),
            linear-gradient(
                90deg,
                rgba(255,255,255,.012) 1px,
                transparent 1px
            ),
            #050505;

        background-size:36px 36px;
    }

    .navbar{
        min-height:62px;

        padding:9px 12px;
    }

    .nav-logo{
        width:36px;
        height:36px;
    }

    .nav-title{
        font-size:18px;
    }

    .mobile-menu{
        top:62px;
    }

    .notes-section{
        width:calc(100% - 12px);

        padding-top:18px;
        padding-bottom:65px;
    }

    .breadcrumb-container{
        margin:0 3px 12px;
    }

    .hero{
        margin-bottom:18px;

        padding:18px 14px 15px;

        border-radius:17px;
    }

    .hero-topline{
        margin-bottom:17px;
    }

    .eyebrow{
        padding:6px 8px;

        font-size:8px;

        letter-spacing:.8px;
    }

    .hero-status{
        font-size:9px;
    }

    .notes-title{
        font-size:37px;

        line-height:.97;

        letter-spacing:-2px;
    }

    .notes-sub{
        margin-top:11px;

        font-size:13px;

        line-height:1.55;
    }

    .hero-stats{
        gap:6px;
    }

    .hero-stat{
        min-height:72px;

        padding:10px;

        border-radius:11px;
    }

    .hero-stat strong{
        font-size:20px;
    }

    .hero-stat span{
        margin-top:5px;

        font-size:8px;
    }

    .seo-intro{
        margin-top:14px;

        padding:10px 12px;

        border-radius:11px;
    }

    .seo-intro p{
        font-size:11px;

        line-height:1.6;
    }

    .controls{
        margin-top:12px;
    }

    .search-box input{
        height:49px;

        border-radius:13px;

        font-size:13px;
    }

    .notes-grid{
        gap:10px;
    }

    .notes-category{
        border-radius:15px;
    }

    .category-header{
        min-height:72px;

        padding:13px;
    }

    .category-title-wrap{
        gap:11px;
    }

    .category-icon{
        width:40px;
        height:40px;

        border-radius:11px;

        font-size:15px;
    }

    .category-name{
        font-size:15px;

        font-weight:950;
    }

    .category-count{
        font-size:9px;

        margin-top:3px;
    }

    .chevron{
        width:28px;
        height:28px;

        border-radius:8px;
    }

    .notes-list{
        padding:0 13px 13px;
    }

    .notes-list a{
        min-height:47px;

        padding:9px 2px;

        font-size:12.5px;

        line-height:1.4;
    }

    .back-to-top{
        right:12px;
        bottom:14px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}