/**
 * Robbie Williams Database (RWDB)
 *
 * @author Tamara Williams
 * @copyright 2026 RWDB
 *
 */

/**********************************************************************************************************************
* Primary Text | Antique White | #FAF9F6 | (250, 249, 246)
**********************************************************************************************************************/

body,
li.track-item .track-title,
.badge,
.breadcrumb-item.active,
.btn.active,
.btn.btn-dark,
.btn.btn-dark:hover,
.btn.btn-dark:focus,
.btn.btn-dark:active,
.card-body,
.editions-list div,
.no-results-banner,
.no-results-banner .note-text,
.filter-pill-remove,
.form-control,
.form-control:focus,
.form-select.dark,
.list-group-item,
.selected,
.subtitle {
    color: #FAF9F6;
}

blockquote,
.extras,
.info-icon,
.info-image,
.info-panel.upcoming-shows .show-item,
.tracklist,
#explore .info-fact {
    background: rgba(250,249,246,0.02);
    border: 1px solid rgba(250,249,246,0.03);
}

/**********************************************************************************************************************
* Light Accent | Pumpkin Soup | #FFB566 | (255, 181, 102)
**********************************************************************************************************************/

a.button-links:hover,
footer a,
h1 a,
main a,
main a:hover,
nav .dropdown-menu a,
nav .dropdown-menu .dropdown-item,
nav .nav-item.dropdown > .nav-link,
nav .nav-item.dropdown > button.nav-link,
.accordion-header-content,
.breadcrumb-item a,
.card-body a:hover,
.card h3,
.btn.btn-dark {
    color: #FFB566;
}

.dual-range-wrapper input[type="range"],
.dual-range-wrapper input[type="range"]::-webkit-slider-runnable-track,
.dual-range-wrapper input[type="range"]::-webkit-slider-thumb {
    background-color: #FFB566;
}

footer a,
h1 a,
main a,
.accordion-header-content,
.card h3 {
    border-bottom: 1px dotted #FFB566;
}

.accordion-item:focus-visible {
    outline: 2px solid #FFB566;
}

nav .navbar-toggler,
.btn.btn-dark:hover,
.btn.btn-dark:focus,
.card:hover,
.card:focus,
.form-select.dark,
.form-select.dark:focus,
.form-control:focus,
.member-row,
.selected {
    border: 1px solid rgba(255,181,102,0.25);
}

.dual-range-wrapper input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(255, 181, 102, 0.25);
}

.dual-range-wrapper input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(255, 181, 102, 0.25);
}

nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,181,102,1)' stroke-width='2.2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24' /%3E%3C/svg%3E");
    width: 30px;
    height: 30px;
}

.accordion-button:not(.collapsed)::after,
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFB566' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/**********************************************************************************************************************
* Main Brand Color | Deep Blush | #E4738A | (228, 115, 138)
**********************************************************************************************************************/

blockquote::after,
blockquote::before,
h2,
h3,
main a:hover,
nav .nav-item.dropdown > .nav-link:hover,
nav .nav-item.dropdown > button.nav-link:hover,
nav .nav-item.dropdown > .nav-link:focus,
nav .nav-item.dropdown > button.nav-link:focus,
nav .nav-item.dropdown > .nav-link[aria-expanded="true"],
nav .nav-item.dropdown > button.nav-link[aria-expanded="true"],
nav .nav-item.dropdown.show > .nav-link,
nav .nav-item.dropdown.open > .nav-link,
nav .nav-item.dropdown.show > button.nav-link,
nav .nav-item.dropdown.open > button.nav-link,
nav .dropdown-menu .dropdown-item:hover,
nav .dropdown-menu .dropdown-item:focus,
nav .dropdown-menu .dropdown-item:active,
nav .dropdown-menu .dropdown-item:focus-visible,
nav .nav-item.dropdown.show > .nav-link,
nav .nav-item.dropdown.open > .nav-link,
nav .dropdown-menu.show .dropdown-item[aria-current="true"],
footer a:hover,
.award-result-win,
.breadcrumb-item a:hover,
.breadcrumb-item + .breadcrumb-item::before,
.disc,
.no-results-banner .note-title,
.header-block-full a:hover,
.left-panel table a:hover,
.results-count-highlight,
#explore .info-icon {
    color: #E4738A;
}

.form-control {
    border: 1px solid rgba(228, 115, 138, 1);
}

.filter-pill-remove:hover,
.filter-pill-remove:focus,
.selected.card::before {
    background-color: #E4738A;
}

footer a:hover,
main a:hover,
.header-block-full a:hover,
.info-panel .form-control {
    border-bottom: 1px solid #E4738A;
}

h2 {
    border-bottom: 2px solid #E4738A;
}

.disc,
.no-results-banner,
#charity-info-panel .card {
    border-left: 3px solid #E4738A;
}

.tour-leg-map-placeholder {
    border: 2px dashed #E4738A;
}

.accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(228, 115, 138, 0.25);
}

.disc,
li.track-item .track-featuring,
.lyric-credit,
.list-group-item.award-row-win,
nav .dropdown-menu .dropdown-item:active,
nav .dropdown-menu .dropdown-item:focus-visible,
nav .dropdown-menu .dropdown-item:hover,
nav .dropdown-menu .dropdown-item:focus {
    background-color: rgba(228, 115, 138, 0.05);
}


nav .navbar-toggler:focus,
nav .navbar-toggler:focus-visible {
    box-shadow: 0 6px 18px rgba(228, 115, 138, 0.12), 0 0 0 4px rgba(228, 115, 138, 0.12);
    border-color: rgba(228, 115, 138, 1);
}

.selected {
    background-image: linear-gradient(90deg, #E4738A 0 4px, rgba(228, 115, 138, 0.12) 4px 100%);
    background-repeat: no-repeat;
    color: #FAF9F6;
    position: relative;
}

/* Results updated highlight animation for mobile */
@keyframes results-flash {
    0% { background-color: rgba(228, 115, 138, 0.12); }
    100% { background-color: transparent; }
}

.filter-pill {
    background-color: rgba(228, 115, 138, 0.12);
    border: 1px solid rgba(228, 115, 138, 0.3);
}

blockquote {
    border-left: 3px solid rgba(228, 115, 138, 0.2);}

/**********************************************************************************************************************
* Dark Accent | Storm Gray | #9391AD | (147, 145, 173)
**********************************************************************************************************************/

cite,
li.track-item .track-duration,
li.track-item .track-number,
.award-result-nomination,
.awards-header,
.date,
.filter-pill-label,
.form-control::placeholder,
.form-label,
.info-icon,
.info-label,
.list-group-item .small,
.results-count {
    color: #9391AD;
}

/* Awards header row */
.list-group-item.awards-header {
    border-bottom: 2px solid rgba(147, 145, 173, 0.3);
}

.filter-pill-remove {
    background-color: rgba(147, 145, 173, 0.3);
}

/**********************************************************************************************************************
* Background | Soft Charcoal | #1E1E1E | (30, 30, 30)
**********************************************************************************************************************/

body,
.badge,
.list-group-item {
    background-color: #1E1E1E;
}

/**********************************************************************************************************************
* Darker Shades | WOOD SMOKE | #141518 | (20, 21, 24)
**********************************************************************************************************************/

.list-group-item .badge,
footer {
    background-color: #141518;
}

.accordion-item{
    border-color: #141518;
}

.list-group-flush>.list-group-item,
.list-group-item {
    border: none;
    border-bottom: 2px solid rgba(20, 21, 24, 0.3);
}



.accordion-button.collapsed,
.accordion-button:not(.collapsed),
.btn.btn-dark,
.card,
.form-select.dark,
.form-control,
.form-control:focus,
.info-fact .info-link,
.tour-leg-map-placeholder,
.no-results-banner,
#explore .info-icon {
    background-color: rgba(20, 21, 24, 0.6);
}

nav .navbar-collapse.show,
nav .navbar-collapse.collapsing,
nav .dropdown-menu,
nav .dropdown-menu.show {
    background-color: rgba(20, 21, 24, 0.95);
}

h1 {
    text-shadow: 0 6px 18px rgba(20, 21, 24,0.95);
}

/* Editions toolbar styling */
.editions-toolbar-container {
    display: flex !important;
    justify-content: flex-end; /* keep toolbar at right edge */
    align-items: flex-end;
    gap: 0.5rem;
    white-space: nowrap; /* prevent wrapped items from creating visual float */
}
.edition-format-toolbar {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem;
    justify-content: flex-start !important;
    align-items: center;
}
.edition-format-btn,
.edition-sub-btn {
    flex: 0 0 auto;
    display: inline-block;
    min-width: 110px; /* ensure equal width */
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Subtoolbar popover (hidden by default) */
.edition-sub-toolbar {
    position: absolute;
    display: none !important; /* force hidden even if server emitted d-flex */
    gap: 0.5rem;
    padding: 0.35rem;
    background: rgba(20,21,24,0.98);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    z-index: 1200;
    white-space: nowrap;
    pointer-events: none;
}

/* Subtoolbar wrapper should not take up layout space; it should be a normal (static) element inside the header
   so that absolutely-positioned .edition-sub-toolbar children are positioned relative to .tracklist-header. */
.edition-sub-toolbar-wrapper {
    position: static; /* ensure .edition-sub-toolbar uses .tracklist-header as containing block */
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    pointer-events: none; /* wrapper itself should not capture pointer events */
    z-index: 1100;
}

/* Ensure the subtoolbar popover floats above and is interactive when visible */
.edition-sub-toolbar.visible {
    display: flex !important;
    pointer-events: auto;
}

@keyframes popIn {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* On small screens, fall back to inline stacking behaviour */
@media (max-width: 767px) {
    .edition-sub-toolbar {
        position: static;
        display: flex !important;
        box-shadow: none;
        background: transparent;
        padding: 0;
        gap: 0.35rem;
        flex-wrap: wrap;
    }
}

/* Ensure selected state is visually obvious for buttons */
.edition-format-btn.selected,
.edition-sub-btn.selected,
.btn.selected {
    border-color: rgba(228, 115, 138, 0.9);
    box-shadow: 0 0 0 3px rgba(228, 115, 138, 0.08);
}

/* Responsive: on small screens stack buttons full width */
@media (max-width: 767px) {
    .edition-format-toolbar,
    .edition-sub-toolbar {
        justify-content: center;
        flex-wrap: wrap;
    }
    .edition-format-btn,
    .edition-sub-btn {
        min-width: 40%;
    }
}

/* Tracklist header + inline edition toolbar */
.tracklist-header {
    position: relative; /* needed for pseudo-element positioning */
    /* remove the previous inline underline so we can draw a moved one */
    border-bottom: none;
    /* ensure there's enough space below the header to accommodate the moved title + underline */
    padding-bottom: calc(1.5rem + 2.25rem + 0.65rem); /* h2 height (1.5rem) + shift (2.25rem) + gap (0.65rem = 0.4 + 0.25) */
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

/* Move the Tracklist title and its underline down 1.95rem while keeping the buttons at the same height. */
.tracklist-header h2 {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
    line-height: 1;
    flex: 1 1 auto;
    /* move the title down exactly 2.25rem */
    transform: translateY(2.25rem);
}

/* draw a full-width underline located under the moved title */
.tracklist-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #E4738A;
    /* position the underline at (h2 height + shift). h2 height ~= 1.5rem
       add 0.25rem to create visual breathing room between the h2 and the line
       and nudge 1px down to align precisely with Edition Info underline */
    top: calc(1.5rem + 2.25rem + 0.25rem + 1px);
}

/* keep buttons visually at original header baseline */
.edition-toolbar-inline {
    display: inline-flex !important;
    align-items: flex-end;
    justify-content: flex-end; /* push the whole toolbar to the right edge of the header */
    gap: 0.5rem;
    min-width: 0;
    /* Nudge the primary toolbar down so the buttons visually rest on the pink underline.
       This aligns the primary row as a visual unit with the full-width underline. */
    /* Move up by 0.5rem relative to previous position to sit closer to the underline */
    transform: translateY(calc(2.25rem + 0.25rem - 0.5rem)); /* effectively 2rem */
    will-change: transform;
}

/* Remove the vertical nudge on small viewports so the toolbar stacks naturally */
@media (max-width: 767px) {
    .edition-toolbar-inline {
        transform: none;
    }
}

/* Buttons: remove optical translate now that underline is on the container */
.edition-format-btn,
.edition-sub-btn {
    padding: 0.2rem 0.65rem; /* slightly tighter vertical padding */
    font-size: 0.875rem;
    min-width: 100px; /* consistent sizing */
    margin-bottom: 0; /* rely on flex-end alignment */
    line-height: 1; /* predictable heights */
    transform: none;
}

/* When a button is selected, keep consistent vertical alignment */
.edition-format-btn.selected,
.edition-sub-btn.selected {
    transform: none;
}

/* On desktop ensure inline toolbar doesn't push the header height too much */
@media (min-width: 768px) {
    .tracklist-header { padding-bottom: 0; }
}

/* Ensure the H2 inside .tracklist-header cannot draw its own underline (override global h2 rule)
   so only the pseudo-element full-width underline is visible. */
.tracklist-header h2 {
    border-bottom: none !important;
    box-shadow: none !important;
}
.tracklist-header h2::after,
.tracklist-header h2 * {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Ensure format buttons align left within their toolbar (override any bootstrap justify-content-end)
   so buttons don't float to the far right unexpectedly. */
.edition-format-toolbar {
    justify-content: flex-start !important;
}

/* Make the toolbar container behave predictably inside the header and provide positioning context
   for absolute popovers. */
.editions-toolbar-container {
    display: flex !important;
    justify-content: flex-end; /* keep toolbar at right edge */
    align-items: flex-end;
    gap: 0.5rem;
    white-space: nowrap; /* prevent wrapped items from creating visual float */
}

/* Subtoolbar wrapper should not take up layout space; it should be a normal (static) element inside the header
   so that absolutely-positioned .edition-sub-toolbar children are positioned relative to .tracklist-header. */
.edition-sub-toolbar-wrapper {
    position: static; /* ensure .edition-sub-toolbar uses .tracklist-header as containing block */
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    pointer-events: none; /* wrapper itself should not capture pointer events */
    z-index: 1100;
}

/* Ensure the subtoolbar popover floats above and is interactive when visible */
.edition-sub-toolbar.visible {
    display: flex !important;
    pointer-events: auto;
}