/*
 | heritage-public-responsive.css
 | Responsive polish + sticky audio player styles for the Heritage Music public site.
 */

/* ============================================================
   1. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
body.mobile-menu-open { overflow: hidden; }
img, svg, video { max-width: 100%; display: block; }
button, a, input, select, textarea { touch-action: manipulation; }

/* ============================================================
   2. MOBILE NAV TOGGLE BUTTON (injected by JS)
   ============================================================ */
#nav-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.75);
    background: transparent;
    cursor: pointer;
    transition: border-color .2s, color .2s;
    flex-shrink: 0;
}
#nav-mobile-toggle:hover { border-color: #C7A052; color: #C7A052; }
@media (max-width: 767px) { #nav-mobile-toggle { display: flex; } }

/* ============================================================
   3. MOBILE NAV DRAWER
   ============================================================ */
#nav-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
}
#nav-mobile-drawer.open { pointer-events: all; }

#nav-mobile-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    opacity: 0;
    transition: opacity .25s ease;
}
#nav-mobile-drawer.open #nav-mobile-backdrop { opacity: 1; }

#nav-mobile-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(85vw, 300px);
    background: #1B140D;
    color: rgba(255,255,255,.85);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
html[dir="ltr"] #nav-mobile-panel { right: auto; left: 0; transform: translateX(-100%); }
#nav-mobile-drawer.open #nav-mobile-panel { transform: translateX(0); }

#nav-mobile-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
#nav-mobile-close {
    width: 2rem; height: 2rem;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.6);
    background: transparent;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
#nav-mobile-links {
    padding: .75rem .5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
#nav-mobile-links a {
    display: block;
    padding: .75rem 1rem;
    border-radius: .75rem;
    font-size: .95rem;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .15s, color .15s;
}
#nav-mobile-links a:hover { background: rgba(255,255,255,.06); color: #C7A052; }

#nav-mobile-languages {
    margin: .5rem 1rem 1.25rem;
    padding: .35rem;
    border-radius: 9999px;
    background: rgba(255,255,255,.06);
    display: flex;
    gap: .35rem;
}
#nav-mobile-languages a {
    flex: 1;
    text-align: center;
    padding: .55rem .35rem;
    border-radius: 9999px;
    color: rgba(255,255,255,.68);
    text-decoration: none;
    font-size: .8rem;
    font-weight: 700;
}
#nav-mobile-languages a.active {
    background: #C7A052;
    color: #1B140D;
}
.language-switcher a {
    min-width: 2rem;
    text-align: center;
}
@media (max-width: 767px) {
    .language-switcher { gap: .15rem; }
    .language-switcher a { min-width: 1.85rem; padding-left: .45rem !important; padding-right: .45rem !important; }
}

/* ============================================================
   4. HERO — mobile scaling
   ============================================================ */
@media (max-width: 639px) {
    section.relative.bg-char > .relative.max-w-4xl {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }
    .font-display.text-4xl { font-size: 1.85rem !important; line-height: 1.25 !important; }
    .w-20.h-20 { width: 3.75rem !important; height: 3.75rem !important; }
}

/* ============================================================
   5. SECTION PADDING
   ============================================================ */
@media (max-width: 639px) {
    section#archive { padding-left: 0 !important; padding-right: 0 !important; }
    section#archive .max-w-3xl,
    section#written .max-w-3xl { padding-left: 1rem !important; padding-right: 1rem !important; }
    .max-w-3xl.mx-auto.px-5.py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}

/* ============================================================
   6. GENRE ACCORDION — touch friendly
   ============================================================ */
details.heritage-card > summary {
    min-height: 3.75rem;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
@media (max-width: 639px) {
    details.heritage-card > summary { padding: .75rem .875rem; }
    details.heritage-card .px-5.pb-5 { padding-left: .875rem; padding-right: .875rem; }
    details.heritage-card li a {
        flex-direction: column;
        align-items: flex-start;
        gap: .1rem;
        padding-top: .6rem;
        padding-bottom: .6rem;
    }
}

/* ============================================================
   7. SONGS INDEX GRID
   ============================================================ */
@media (max-width: 479px) {
    .grid.grid-cols-2.md\:grid-cols-4 { gap: .625rem !important; }
}

/* ============================================================
   8. SEARCH FORM — stack on mobile
   ============================================================ */
@media (max-width: 639px) {
    form.flex.flex-wrap.gap-2 { flex-direction: column; }
    form.flex.flex-wrap.gap-2 input,
    form.flex.flex-wrap.gap-2 select,
    form.flex.flex-wrap.gap-2 button { width: 100%; font-size: 16px; }
}

/* ============================================================
   9. SONG SHOW — stacked on mobile
   ============================================================ */
@media (max-width: 767px) {
    .max-w-5xl.mx-auto.px-5.py-10.grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        gap: 1.5rem !important;
    }
    .md\:col-span-1 { order: 2; }
    .md\:col-span-2 { order: 1; }
    .md\:col-span-1 .aspect-square { max-width: 220px; margin: 0 auto; }

    /* Documentation grid → single col */
    .bg-cream-card .grid.md\:grid-cols-2 { grid-template-columns: 1fr !important; }
}

/* ============================================================
   10. FOOTER
   ============================================================ */
@media (max-width: 639px) {
    footer .max-w-3xl.mx-auto.px-5.py-16 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    footer .w-24.h-24 { width: 4rem !important; height: 4rem !important; }
}

/* ============================================================
   11. LANG SWITCHER — tiny screens
   ============================================================ */
@media (max-width: 360px) {
    .language-switcher a { padding: .2rem .38rem !important; font-size: .6rem; min-width: 1.45rem; }
}

/* ============================================================
   12. SONG ROW PLAY BUTTON (injected by JS)
   ============================================================ */
.song-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: rgba(199,160,82,.1);
    border: 1px solid rgba(199,160,82,.3);
    color: #C7A052;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, transform .1s;
    margin-inline-start: .5rem;
    padding: 0;
}
.song-play-btn:hover { background: rgba(199,160,82,.22); border-color: rgba(199,160,82,.6); }
.song-play-btn:active { transform: scale(.88); }
.song-play-btn svg { width: .8rem; height: .8rem; flex-shrink: 0; }
.song-play-btn.playing { background: #C7A052; color: #1B140D; border-color: #C7A052; }
.song-play-btn .pause-icon { display: none; }
.song-play-btn.playing .play-icon { display: none; }
.song-play-btn.playing .pause-icon { display: block; }

/* ============================================================
   13. STICKY AUDIO PLAYER BAR
   ============================================================ */
#heritage-player {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 8000;
    height: 68px;
    background: #1B140D;
    border-top: 1px solid rgba(199,160,82,.22);
    box-shadow: 0 -8px 32px rgba(0,0,0,.40);
    color: #fff;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 0 1rem;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
#heritage-player.visible { transform: translateY(0); }

/* Cover */
#hp-cover {
    width: 44px; height: 44px;
    border-radius: .5rem;
    background: rgba(199,160,82,.12);
    overflow: hidden;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}
#hp-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Info */
#hp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
#hp-title { font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #C7A052; }
#hp-subtitle { font-size: .68rem; color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Play button */
#hp-play-btn {
    width: 2.4rem; height: 2.4rem;
    border-radius: 9999px;
    background: #C7A052; color: #1B140D;
    border: none; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .1s;
    padding: 0;
}
#hp-play-btn:hover { background: #d4ad5a; }
#hp-play-btn:active { transform: scale(.92); }
#hp-play-btn svg { width: 1rem; height: 1rem; }

/* Generic icon buttons */
.hp-btn {
    width: 2rem; height: 2rem;
    border-radius: 9999px; border: none;
    background: transparent; color: rgba(255,255,255,.6);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: color .15s; padding: 0; flex-shrink: 0;
}
.hp-btn:hover { color: #C7A052; }
.hp-btn svg { width: 1rem; height: 1rem; }

/* Progress */
#hp-progress-wrap {
    flex: 1; min-width: 80px; max-width: 300px;
    display: flex; align-items: center; gap: .35rem;
}
#hp-time-current, #hp-time-total {
    font-size: .62rem; color: rgba(255,255,255,.4);
    font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 2.2rem; text-align: center;
}
#hp-progress {
    flex: 1; -webkit-appearance: none; appearance: none;
    height: 4px; border-radius: 2px;
    background: rgba(255,255,255,.15);
    cursor: pointer; outline: none;
}
#hp-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px; border-radius: 9999px;
    background: #C7A052; margin-top: -4px; cursor: pointer;
}
#hp-progress::-moz-range-thumb {
    width: 12px; height: 12px; border-radius: 9999px;
    background: #C7A052; border: none; cursor: pointer;
}

/* Volume */
#hp-volume-wrap { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
#hp-volume {
    -webkit-appearance: none; appearance: none;
    width: 58px; height: 4px; border-radius: 2px;
    background: rgba(255,255,255,.15); cursor: pointer; outline: none;
}
#hp-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px; height: 10px; border-radius: 9999px;
    background: rgba(199,160,82,.75); margin-top: -3px; cursor: pointer;
}
#hp-volume::-moz-range-thumb {
    width: 10px; height: 10px; border-radius: 9999px;
    background: rgba(199,160,82,.75); border: none; cursor: pointer;
}

/* Close */
#hp-close {
    width: 1.75rem; height: 1.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,.15);
    background: transparent; color: rgba(255,255,255,.4);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: border-color .15s, color .15s; padding: 0;
}
#hp-close:hover { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.8); }
#hp-close svg { width: .85rem; height: .85rem; }

/* Body padding when player is visible */
body.player-visible { padding-bottom: 68px; }

/* ============================================================
   14. PLAYER — MOBILE COMPACT
   ============================================================ */
@media (max-width: 639px) {
    #heritage-player { height: 60px; padding: 0 .75rem; gap: .45rem; }
    #hp-volume-wrap { display: none; }
    #hp-time-current, #hp-time-total { display: none; }
    #hp-progress-wrap { max-width: 120px; }
    #hp-cover { width: 36px; height: 36px; }
    #hp-play-btn { width: 2rem; height: 2rem; }
    #hp-play-btn svg { width: .85rem; height: .85rem; }
    body.player-visible { padding-bottom: 60px; }
}

@media (min-width: 640px) and (max-width: 900px) {
    #hp-volume-wrap { display: none; }
    #hp-progress-wrap { max-width: 170px; }
}