/* Reset & base */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
line-height: 1.5;
color: #111;
background-color: #000000;

-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none;}
img { max-width: 100%; display: block;}

/* Utility */

.container {

    max-width: 1000px;

    margin: 0 auto;
    padding: 0 1rem;
}

.section { padding: 4rem 0;}

/* Header */

.site-header {
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: #000000;

    /* use fixed while debugging overlap issues (keeps header visible) */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* ensure the header stays on top of other content */
    z-index: 9999;
}

/* add top spacing so main content isn't hidden behind fixed header
   set to the header height (adjust if you change padding/font-size) */
main { padding-top: 68px; }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1rem 0;
}

.site-title a {
    font-size: 1.1rem;
    letter-spacing: .2px;
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.site-title a:focus,
.site-title a:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 3px;
}

.site-logo {
    width: 40px;
    height: auto;
    display: block;
}

@media (max-wdith: 600px) {
    .site-logo {width: 32px}
    .site-title a {gap: .45rem; font-size: 1rem;}
}

.logo { font-size: 1.1rem; letter-spacing: 0.2px; color:#ffffff}

.nav-link { margin-left: 1rem; font-weight: 600; color: #ffffff}
.nav-link:hover { opacity: .8;}

/* Hero */
.hero {
    position: relative;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
 
    background-size: cover;
    background-position: center;
 
    text-align: center;
}
.hero-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
}
.hero-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
   

}
.hero-title { font-size: 2rem; margin-bottom: 0.5rem; color: #ffffff }
.hero-sub { color: #fafafa; margin-bottom: 1rem;}
.btn {
    display: inline-block;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    font-weight: 700;
}
.btn.primary { background: #111; color: #fff;}

/* Services grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.service {
    border: 1px solid rgba(0,0,0,0.06);
    padding: 1.25rem;
    border-radius: 10px;
}
.service h4 { margin-bottom: 0.5rem;}

/* Footer */
.site-footer { border-top: 1px solid rgba(0,0,0,0.06); padding: 1.5rem 0; text-align: center;}

/* Responsive */
@media (max-width: 800px) {
    .services-grid { grid-template-columns: 1fr; }
        /* hide default nav on small screens; show via toggle */
        .nav { display: none; }
    .hero { padding: 4rem 0;}
}

/* Mobile nav toggle button and open menu styles */
.nav-toggle { display: none; background: transparent; border: 0; color: #fff; cursor: pointer; padding: .25rem; z-index: 10001; }
/* hamburger made with three spans for better cross-browser rendering (Safari friendly) */
.nav-toggle .hamburger { display:flex; flex-direction:column; gap:6px; width:22px; }
.nav-toggle .hamburger span { display:block; height:2px; background:#fff; border-radius:2px; }

@media (max-width: 800px) {
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    /* make header-inner a positioning context so we can absolutely position the toggle on the right */
    .header-inner { gap: .5rem; position: relative; }
    /* position the toggle absolutely so it reliably appears on top/right on small devices (fixes iPhone issues where flex placement may hide it) */
    .nav-toggle { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); z-index: 10002; }
            /* animate dropdown: use max-height/opacity/transform for smooth open/close */
            .nav {
                display: block; /* keep block so it occupies width when opened */
            }
            .nav { max-height: 0; opacity: 0; transform: translateY(-6px); overflow: hidden; transition: max-height 260ms ease, opacity 220ms ease, transform 220ms ease; }
            .site-header.open .nav {
                max-height: 480px; /* big enough to hold nav links; adjust if needed */
                opacity: 1;
                transform: translateY(0);
                position: absolute;
                left: 0;
                right: 0;
                top: 100%;
                background: #000;
                padding: .5rem 0;
                border-top: 1px solid rgba(255,255,255,0.04);
                z-index: 10000;
            }
            .site-header.open .nav .nav-link { display: block; padding: .5rem 1rem; }

            /* hamburger -> X animation */
            .nav-toggle .hamburger span { transition: transform 220ms ease, opacity 180ms ease; }
            .site-header.open .nav-toggle .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
            .site-header.open .nav-toggle .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
            .site-header.open .nav-toggle .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* small tweaks */
p { color: #222;}
/* Playlist styles */
.playlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.track { display:flex; align-items:center; gap:1rem; padding: .6rem; border: 1px solid rgba(255,255,255,0.04); border-radius:8px; background: #070707; color:#fff; }
.track-cover { width:64px; height:64px; object-fit:cover; border-radius:6px; flex: 0 0 64px; }
.track-meta { flex:1; min-width:0; }
.track-title { display:block; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-artist { display:block; font-size:.9rem; color:#bbb; }
.track-play { margin-left: .5rem; padding:.4rem .6rem; border-radius:6px; border:1px solid rgba(255,255,255,0.06); background:#111; color:#fff; cursor:pointer; }
.track-download { margin-left:.5rem; font-size:.9rem; color:#ddd; text-decoration:underline; }
.track.playing { box-shadow: 0 6px 20px rgba(0,0,0,0.6); }

@media (max-width: 600px) {
    /* stack track content on small screens to avoid overlap */
    .track { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .track-cover { width:56px; height:56px; }
    .track-meta { order: 1; }
    .track-title { white-space: normal; }
    .track-controls { order: 2; width: 100%; margin-left: 0; display:flex; align-items:center; gap:.5rem; }
    .track-progress { flex: 1 1 auto; width: auto; }
    .track-time { min-width: 64px; }
    .track-play { order: 3; align-self: flex-end; padding:.35rem .5rem; margin-left: 0; }
}

/* small utility for visually-hidden text (screen readers) */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* progress/time styles */
.track-controls { display:flex; align-items:center; gap:.75rem; margin-left: .5rem; }
.track-progress { position:relative; width:160px; height:8px; background: rgba(255,255,255,0.06); border-radius:999px; cursor:pointer; flex: 0 0 160px; }
.track-progress-bar { position:absolute; left:0; top:0; bottom:0; width:0%; background: linear-gradient(90deg, #ffcc00, #ff9a00); border-radius:999px; }
.track-time { font-size: .85rem; color:#ddd; min-width:92px; text-align:right; }

@media (max-width: 600px) {
    /* ensure progress is flexible on small screens */
    .track-controls { width: 100%; margin-left: 0; justify-content: space-between; }
    .track-progress { width: auto; flex: 1 1 auto; }
    .track-time { min-width:64px; text-align: right; }
}

/* Very small screens: simplify controls and increase tap targets */
@media (max-width: 420px) {
    /* hide the progress bar to reduce clutter */
    .track-progress { display: none; }

    /* keep the time visible but smaller/more compact */
    .track-time { font-size: .9rem; color: #ddd; order: 2; }

    /* make the play button full-width and finger-friendly */
    .track-play {
        order: 3;
        width: 100%;
        padding: 0.9rem 1rem;
        font-size: 1rem;
        border-radius: 8px;
        min-height: 44px; /* meets touch target recommendations */
        align-self: stretch;
        margin-left: 0;
    }

    /* slightly tighten overall spacing so the blocks fit on narrow screens */
    .track { padding: 0.6rem; gap: 0.5rem; }
}
/* fixed invalid color token ($) -> use valid hex color */
h1, h2, h3, h4 { color: #ffffff;}
p { color: #222;}
p { color: #ffffff;}