.round-btn-container {
    width: fit-content;
}

.round-btn {
    display: inline-block;
    font-weight: 700 !important;
    font-family: 'Lato', sans-serif !important;
    -ms-word-break: normal !important;
    word-break: normal !important;
    text-decoration: none !important;
    padding: 16px 32px !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 1.313rem !important;
    font-weight: 800 !important;
    border-radius: 50px !important;
    width: fit-content !important;
    -webkit-border-radius: 50px !important;
    -moz-border-radius: 50px !important;
    cursor: pointer !important;
}

.round-btn:hover:not([DISABLED]),
.round-btn:focus:not([DISABLED]) {
    border: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
}

.btn-blue {
    color: var(--bg-light-gray);
    background-color: var(--highlight-blue) !important;
}

.btn-yellow {
    color: var(--ee-blue);
    background-color: var(--bright-yellow) !important;
}

.round-btn-container .round-btn.hide {
    display: none !important;
}

.round-btn-container:not(.round-btn.hide) {
    display: block;
}

.round-btn-container:has(:focus) {
    box-shadow: var(--focus-border);
}

.contact-btn-wrap {
    padding: 5rem 0;
}

.contact-btn-wrap .round-btn-container {
    margin: 0 auto;
}
/* ---- Song navigation (/album/<track>/) ---------------------------------- */

/* The three links used to sit in a bare <p> with no whitespace between them.
   Inline-level boxes with no intervening whitespace give the line no break
   opportunity, so on a narrow viewport the browser broke inside the labels
   instead -- "Previous Song" stacked over two lines -- and the pills rendered
   flush against each other with no gap at all. A flex row with a real gap wraps
   *between* the buttons, and nowrap labels stop them splitting internally. */
.song-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0 0 1.5em;
}

.song-nav .round-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    /* Flex gives the label its own line box, which is taller than the one an
       inline-block got. Pin it so these pills stay the same height as every
       other .round-btn on the site. */
    line-height: 1.2;
}

/* currentColor so an icon always tracks its button's text color, and em sizing
   so it scales with the label rather than being pinned to a px size. */
.song-nav .round-btn svg {
    flex: none;
    fill: currentColor;
    width: 1em;
    height: 1em;
}

/* The list glyph fills its viewBox far more than the chevron does, so it needs
   a smaller box to carry the same visual weight. */
.song-nav .round-btn svg.song-nav-icon--list {
    width: 0.82em;
    height: 0.82em;
}

/* Phone layout: one column, so all three buttons are the same width and the
   same height and every one is a full-width tap target. Grid rather than the
   wrapping flex row above, because wrapping gave three different widths and an
   uneven 2 + 1 split that read as a mistake.

   min-height is well past the 44px that WCAG 2.5.5 Target Size asks for, and
   the label is centered so the pair reads as a matched set. */
@media (max-width: 640px) {
    .song-nav {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* !important is required, not stylistic: the base .round-btn rule above
       sets `width: fit-content !important`, which otherwise wins and leaves the
       three buttons at three different widths. */
    .song-nav .round-btn {
        width: 100% !important;
        min-height: 56px;
        justify-content: center;
        padding: 16px 24px !important;
    }
}