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

:root {
    --bg-primary: #0d1117;
    --bg-secondary: #151b23;
    --bg-card: #171e27;
    --bg-card-hover: #1c2530;

    --border: rgba(255,255,255,0.08);

    --text-primary: #f1f5f9;
    --text-secondary: #a7b1c2;
    --text-muted: #7d8797;

    --accent: #7cc7a3;
    --accent-hover: #9adbbd;

    --tag-bg: rgba(124,199,163,0.12);
    --tag-border: rgba(124,199,163,0.25);

    --radius: 16px;

    --shadow:
        0 10px 30px rgba(0,0,0,0.25);
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top,
            rgba(124,199,163,0.08),
            transparent 35%
        ),
        var(--bg-primary);

    color: var(--text-primary);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;
}



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


.site-header {

    max-width: 1200px;

    margin:
        80px auto 50px;

    padding:
        0 25px;

}


.site-header h1 {

    margin: 0 0 12px;

    font-size: clamp(2.5rem, 5vw, 4rem);

    font-weight: 700;

    letter-spacing: -0.04em;

}


.site-header p {

    max-width: 780px;

    color: var(--text-secondary);

    font-size: 1.2rem;

    line-height: 1.7;

}



/* =====================================================
   FILTERS
===================================================== */


.filters {

    max-width: 1200px;

    margin:
        0 auto 25px;

    padding:
        0 25px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.filter-button {

    border: 1px solid var(--border);

    background: var(--bg-secondary);

    color: var(--text-secondary);

    padding:
        9px 18px;

    border-radius: 999px;

    cursor: pointer;

    font-size: 0.95rem;

    transition:
        all .25s ease;

}



.filter-button:hover {

    color: var(--text-primary);

    border-color:
        rgba(255,255,255,.2);

}



.filter-button.active {

    background: var(--accent);

    color: #09110d;

    border-color: var(--accent);

}



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


.search {

    max-width:1200px;

    margin:
        0 auto 25px;

    padding:
        0 25px;

}



.search input {

    width:100%;

    max-width:500px;

    background:
        var(--bg-secondary);

    border:
        1px solid var(--border);

    color:
        var(--text-primary);

    padding:
        14px 18px;

    border-radius:
        999px;

    font-size:
        1rem;

    outline:none;

    transition:
        border .2s ease;

}


.search input::placeholder {

    color:
        var(--text-muted);

}


.search input:focus {

    border-color:
        var(--accent);

}



/* =====================================================
   RESULT COUNT
===================================================== */


.results-info {

    max-width:1200px;

    margin:
        0 auto 25px;

    padding:
        0 25px;

    color:
        var(--text-muted);

    font-size:
        .9rem;

}



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


.song-grid {

    max-width:1200px;

    margin:
        0 auto;

    padding:
        0 25px 60px;


    display:grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(320px,1fr)
        );

    gap:
        25px;

}



/* =====================================================
   SONG CARD
===================================================== */


.song-card {

    background:
        var(--bg-card);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    overflow:hidden;

    box-shadow:
        var(--shadow);

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;

}



.song-card:hover {

    transform:
        translateY(-5px);

    background:
        var(--bg-card-hover);

    border-color:
        rgba(255,255,255,.15);

}



/* Spotify */

.spotify-player {

    line-height:0;

}


.spotify-player iframe {

    display:block;

    width:100%;

}



/* Content */


.song-content {

    padding:
        22px;

}



.song-content h2 {

    margin:
        0 0 5px;

    font-size:
        1.35rem;

    letter-spacing:
        -0.02em;

}



.artist {

    color:
        var(--text-secondary);

    margin-bottom:
        15px;

}



/* =====================================================
   ROLE TAGS
===================================================== */


.roles {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:
        15px;

}



.role-tag {

    background:
        var(--tag-bg);

    border:
        1px solid var(--tag-border);

    color:
        var(--accent);

    padding:
        4px 10px;

    border-radius:
        999px;

    font-size:
        .8rem;

}



.description {

    color:
        var(--text-secondary);

    margin:
        0;

    font-size:
        .95rem;

}



/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:600px) {


    .site-header {

        margin-top:
            35px;

    }


    .song-grid {

        grid-template-columns:
            1fr;

        padding:
            0 15px 40px;

    }


    .filters,
    .search,
    .results-info {

        padding:
            0 15px;

    }

}

/* =====================================================
   TEXT LINKS
===================================================== */


a {

    color:
        var(--accent);

    text-decoration:
        none;

    transition:
        color .25s ease,
        opacity .25s ease;

}



a:hover {

    color:
        var(--accent-hover);

}



/*
   Links i brødtekst
*/

.description a,
.site-header p a {

    position:relative;

    color:
        var(--accent);

}



.description a::after,
.site-header p a::after {

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:100%;

    height:1px;

    background:
        var(--accent);

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .3s ease;

}



.description a:hover::after,
.site-header p a:hover::after {

    transform:
        scaleX(1);

}