/* =============================================================
   tradirishmusic.net — shared design theme
   Load on every page AFTER the Google Fonts link:
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Inter:wght@400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="trad-theme.css">
   ============================================================= */

/* -------------------------------------------------------------
   Palette tokens
   ------------------------------------------------------------- */
:root {
    --forest:            #2d6a4f;   /* primary green                        */
    --forest-dark:       #1b4332;   /* darker green — gradients, filter bar */
    --forest-hover:      #1b4332;
    --forest-muted:      #3a6a52;   /* muted green text on light bg         */

    --gold:              #d4a843;   /* accent gold                          */
    --gold-light:        #f0d990;   /* pale gold — large titles on dark bg  */
    --gold-muted:        #c8b870;   /* muted gold — secondary on dark bg    */

    --green-soft:        #b7e4c7;   /* light mint — secondary text on dark  */
    --green-faint:       #d8f3dc;   /* very faint mint                      */

    --cork:              #c0612a;   /* warm terracotta — AKA, favourites    */
    --cork-bg:           #faecea;

    --amber:             #c07010;   /* selection active, warnings           */
    --amber-bg:          rgba(192,112,16,0.10);
    --amber-border:      rgba(192,112,16,0.40);
    --amber-soft:        #fff3cd;

    --parchment:         #faf8f3;   /* card surfaces                        */
    --parchment-2:       #f2efe8;   /* page background, section headings    */
    --parchment-ctrl:    #f7f4ef;   /* controls bar background              */
    --parchment-border:  #ddd8cc;   /* controls bar border                  */
    --parchment-dark:    #eeebe4;   /* selection sub-bar                    */

    --border:            #e0d9ce;   /* general borders                      */
    --border-light:      #ede8e0;   /* lighter dividers                     */

    --text-main:         #1c2b22;   /* dark green-tinted near-black         */
    --text-muted:        #5a7a6a;
    --text-hint:         #9aada0;

    --serif: 'Playfair Display', Georgia, serif;
    --sans:  'Inter', system-ui, sans-serif;
}

/* -------------------------------------------------------------
   Reset / base
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--sans);
    background: var(--parchment-2);
    color: var(--text-main);
}

/* -------------------------------------------------------------
   Site header  (used by index.php; topbar variant used by players)
   ------------------------------------------------------------- */
.site-header {
    background: linear-gradient(160deg, var(--forest) 0%, var(--forest-dark) 100%);
    padding: 16px 24px 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.header-brand    { flex: 1; }
.brand-name {
    font-family: var(--serif);
    color: var(--gold-light);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.2px;
}
.brand-sub {
    font-size: 0.62rem;
    color: var(--green-soft);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    display: block;
    margin-top: 3px;
    opacity: 0.85;
}

/* -------------------------------------------------------------
   Slim topbar  (used by abcfileplayer.php and player.php)
   ------------------------------------------------------------- */
.trad-topbar {
    background: linear-gradient(160deg, var(--forest) 0%, var(--forest-dark) 100%);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.trad-topbar-brand {
    font-family: var(--serif);
    color: var(--gold-light);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.2px;
}
.trad-topbar-back {
    font-size: 0.72rem;
    color: var(--green-soft);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.85;
    transition: opacity 0.15s, color 0.15s;
}
.trad-topbar-back:hover { opacity: 1; color: var(--gold-light); }

/* -------------------------------------------------------------
   About / info button  (shared by both headers)
   ------------------------------------------------------------- */
.btn-about {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    color: var(--green-soft);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    font-family: var(--sans);
}
.btn-about:hover { background: rgba(255,255,255,0.22); color: var(--gold-light); }

/* -------------------------------------------------------------
   Filter / search bar  (index.php)
   ------------------------------------------------------------- */
.filter-bar {
    background: var(--forest-dark);
    padding: 10px 24px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,0.15);
}
.search-wrap { flex: 1; position: relative; }

.filter-bar input[type=text] {
    width: 100%;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 7px;
    padding: 8px 32px 8px 12px;
    color: #e8f4ec;
    font-size: 0.9rem;
    font-family: var(--sans);
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.filter-bar input[type=text]::placeholder { color: rgba(183,228,199,0.55); }
.filter-bar input[type=text]:focus {
    border-color: var(--gold);
    background: rgba(255,255,255,0.15);
}
#clearSearch {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--green-soft);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    display: none;
    opacity: 0.7;
}
#clearSearch:hover { opacity: 1; color: var(--gold); }

.filter-bar select {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 7px;
    padding: 8px 12px;
    color: #e8f4ec;
    font-size: 0.88rem;
    font-family: var(--sans);
    outline: none;
    cursor: pointer;
    min-width: 140px;
    transition: border-color 0.15s;
}
.filter-bar select:focus  { border-color: var(--gold); }
.filter-bar select option { background: var(--forest-dark); color: #e8f4ec; }

/* -------------------------------------------------------------
   Section headings  (index.php list dividers)
   ------------------------------------------------------------- */
.section-heading {
    font-size: 0.65rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 8px 24px;
    background: var(--parchment-2);
    border-bottom: 1px solid var(--border);
    font-weight: 500;
}
.section-heading.favs {
    background: #2d1a05;
    color: var(--gold);
    border-bottom-color: #5a3a10;
}

/* -------------------------------------------------------------
   Tune rows  (index.php)
   ------------------------------------------------------------- */
.tune-row {
    display: flex;
    align-items: center;
    padding: 11px 24px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
    background: #fff;
    transition: background 0.1s;
}
.tune-row:hover   { background: #f7fbf8; }
.tune-row.is-fav  { background: #fffdf7; }
.tune-row.is-fav:hover { background: #fffbee; }

.btn-fav {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: #d0c8bc;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.15s, transform 0.1s;
}
.btn-fav:hover  { color: var(--cork); transform: scale(1.15); }
.btn-fav.active { color: var(--cork); }

.tune-title-container { flex: 1; min-width: 0; }
.tune-title-text {
    font-size: 0.95rem;
    color: var(--text-main);
    font-weight: 500;
    cursor: pointer;
    word-wrap: break-word;
    line-height: 1.3;
}
.tune-type-badge {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
    flex-shrink: 0;
}

/* -------------------------------------------------------------
   AKA badge and expanded list  (index.php + drawer)
   ------------------------------------------------------------- */
.trad-aka-badge {
    font-size: 0.62rem;
    font-weight: 400;
    cursor: pointer;
    padding: 1px 5px;
    background: var(--cork-bg);
    color: var(--cork);
    border-radius: 3px;
    margin-left: 6px;
    border: 1px solid #f0c8c0;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}
.aka-list {
    font-size: 0.78rem;
    color: #5a4a3a;
    padding: 3px 0 0 26px;
    font-style: italic;
    border-left: 2px solid #e8d8c0;
    margin-left: 6px;
    margin-top: 3px;
}

/* -------------------------------------------------------------
   Resources button  (index.php)
   ------------------------------------------------------------- */
.btn-resources {
    background: var(--forest);
    color: var(--green-soft);
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 0.8rem;
    font-family: var(--sans);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.btn-resources:hover {
    background: var(--forest-dark);
    color: var(--gold-light);
}

/* -------------------------------------------------------------
   Site footer  (index.php)
   ------------------------------------------------------------- */
.site-footer {
    background: var(--parchment);
    border-top: 1px solid var(--border);
    padding: 8px 24px;
    text-align: center;
    flex-shrink: 0;
}
.site-footer button {
    background: none;
    border: none;
    font-size: 0.72rem;
    color: var(--text-hint);
    cursor: pointer;
    font-family: var(--sans);
}
.site-footer button:hover { color: var(--cork); }

/* -------------------------------------------------------------
   Resource drawer  (index.php offcanvas)
   ------------------------------------------------------------- */
.offcanvas { font-family: var(--sans); }

.drawer-header {
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dark) 100%);
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.drawer-title {
    font-family: var(--serif);
    color: var(--gold-light);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
}
.drawer-type {
    font-size: 0.62rem;
    color: var(--green-soft);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-top: 3px;
    opacity: 0.8;
}
.btn-close-drawer {
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    color: var(--green-soft);
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.btn-close-drawer:hover { background: rgba(255,255,255,0.22); color: #fff; }

.drawer-aka-band {
    background: #fdf8ed;
    border-bottom: 1px solid #ede8d8;
    padding: 8px 18px;
    font-size: 0.75rem;
    color: #6b4c1e;
}
.drawer-aka-band strong { color: var(--amber); }

.drawer-section {
    font-size: 0.6rem;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 8px 18px 4px;
    background: var(--parchment-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-weight: 500;
}
.drawer-item {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.1s;
}
.drawer-item:hover    { background: var(--parchment); }
.drawer-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}
.di-play  { background: #dff0e8; }
.di-score { background: #dce8f8; }
.di-mp3   { background: #ede8e0; }
.di-pdf   { background: #f5e8e4; }
.di-midi  { background: #ece4f2; }
.di-abc   { background: #e4ede4; }
.di-sess  { background: #fdf4e0; }
.di-yt    { background: #fce8e4; }
.di-link  { background: #e8eef4; }

.drawer-item-body  { flex: 1; }
.drawer-item-title { font-size: 0.88rem; font-weight: 500; color: var(--text-main); }
.drawer-item-sub   { font-size: 0.72rem; color: var(--text-muted); margin-top: 1px; }
.drawer-arrow      { color: var(--text-hint); font-size: 0.85rem; }

.session-badge {
    display: inline-block;
    background: #d6ad33;
    color: #3b2416;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 0.65rem;
    font-weight: 500;
    font-family: serif;
    margin-right: 5px;
}

/* -------------------------------------------------------------
   About / info modal  (index.php)
   ------------------------------------------------------------- */
.modal-header.trad {
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dark) 100%);
}
.modal-header.trad .modal-title { color: var(--gold-light); font-family: var(--serif); font-weight: 400; }
.modal-header.trad .btn-close   { filter: brightness(0.65); }

/* -------------------------------------------------------------
   Styled range slider  (player.php + abcfileplayer.php)
   ------------------------------------------------------------- */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #b8b0a4;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    margin: 6px 0;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--forest);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
input[type=range]::-webkit-slider-thumb:hover {
    background: var(--forest-dark);
    box-shadow: 0 2px 6px rgba(0,0,0,0.30);
}
input[type=range]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--forest);
    border: 3px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    cursor: pointer;
}
input[type=range]::-moz-range-thumb:hover {
    background: var(--forest-dark);
}
input[type=range]::-moz-range-track {
    height: 6px;
    background: #b8b0a4;
    border-radius: 3px;
}

/* -------------------------------------------------------------
   Mini toggle switch  (player.php + abcfileplayer.php)
   ------------------------------------------------------------- */
.trad-toggle {
    width: 36px;
    height: 20px;
    background: #c8c2ba;
    border-radius: 10px;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background 0.15s;
}
.trad-toggle.on { background: var(--forest); }
.trad-toggle::after {
    content: '';
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.15s;
}
.trad-toggle.on::after { left: 18px; }

/* -------------------------------------------------------------
   Count-in widget  (player.php + abcfileplayer.php)
   ------------------------------------------------------------- */
.countin-widget {
    display: flex;
    align-items: center;
    gap: 6px;
}
.countin-arrow {
    width: 24px;
    height: 24px;
    border: 0.5px solid #bbb4aa;
    border-radius: 4px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #7a8a7a;
    cursor: pointer;
    user-select: none;
    line-height: 1;
}
.countin-arrow:hover { border-color: var(--forest); color: var(--forest); }
.countin-val {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    min-width: 18px;
    text-align: center;
}
.countin-unit { font-size: 0.68rem; color: var(--text-hint); }

/* -------------------------------------------------------------
   Countdown overlay  (player.php + abcfileplayer.php)
   ------------------------------------------------------------- */
#countdownOverlay {
    position: fixed;
    inset: 0;
    background: rgba(250,248,243,0.97);
    z-index: 2000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#countdownOverlay.active { display: flex; }
.countdown-label {
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--forest-muted);
    margin-bottom: 10px;
}
.countdown-number {
    font-family: var(--serif);
    font-size: 7rem;
    font-weight: 400;
    color: var(--forest);
    line-height: 1;
}
.countdown-cancel {
    margin-top: 1.5rem;
    background: none;
    border: none;
    font-size: 0.85rem;
    color: var(--cork);
    cursor: pointer;
    font-family: var(--sans);
}

/* -------------------------------------------------------------
   Shared action buttons  (player.php)
   ------------------------------------------------------------- */
.btn-trad {
    flex: 1;
    padding: 10px;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: var(--sans);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.15s, color 0.15s;
}
.btn-trad-ghost {
    background: var(--parchment-2);
    color: #5a6a5a;
    border: 0.5px solid var(--border);
}
.btn-trad-ghost:hover { background: #e8e2d8; }
.btn-trad-primary {
    background: var(--forest);
    color: var(--gold-light);
    border: none;
}
.btn-trad-primary:hover { background: var(--forest-dark); }

/* -------------------------------------------------------------
   Responsive — mobile first, then scale up for larger screens
   ------------------------------------------------------------- */

/* Small screens: compact the supporting elements so the tune
   name gets as much space as possible                          */
@media (max-width: 499px) {

    /* Tighter row padding */
    .tune-row {
        padding: 10px 12px;
        gap: 7px;
        align-items: flex-start;  /* top-align so long titles don't push heart down */
    }

    /* Smaller heart, top-aligned with the title */
    .btn-fav {
        font-size: 0.9rem;
        margin-top: 2px;
    }

    /* Title container stacks title + type badge vertically */
    .tune-title-container {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .tune-title-text { font-size: 0.88rem; }

    /* Style badge moves under the title as a small subtitle */
    .tune-type-badge {
        font-size: 0.68rem;
        color: var(--text-hint);
        min-width: unset;
        text-align: left;
        order: 2;           /* sits after title text within the container */
    }

    /* Resources button: compact pill — text only, tighter padding */
    .btn-resources {
        padding: 6px 10px;
        font-size: 0.75rem;
        border-radius: 5px;
        align-self: center;
        flex-shrink: 0;
    }

    .section-heading { padding: 7px 12px; }
    .site-footer     { padding: 7px 12px; }
    .filter-bar      { padding: 8px 12px; }
}

/* Medium and up: restore side-by-side layout with more breathing room */
@media (min-width: 500px) {
    .tune-title-text { font-size: 1rem; }
    .tune-type-badge { font-size: 0.78rem; min-width: 80px; }
    .btn-resources   { padding: 7px 14px; font-size: 0.82rem; }
    .tune-row        { padding: 12px 20px; }
    .section-heading { padding: 8px 20px; }
    .site-footer     { padding: 9px 20px; }
}

@media (min-width: 700px) {
    .tune-title-text { font-size: 1rem; }
    .tune-type-badge { font-size: 0.8rem; min-width: 90px; }
    .btn-resources   { padding: 8px 18px; font-size: 0.85rem; }
    .tune-row        { padding: 13px 28px; }
    .section-heading { padding: 8px 28px; }
    .site-footer     { padding: 10px 28px; }
}

@media (min-width: 960px) {
    .tune-title-text { font-size: 1.05rem; }
}