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

/* ---- Buttons (docs/BUTTONS.md) -------------------------------------------

   One shape for every button: a rounded rectangle, Lato Bold, a 2px border.
   Yellow (.btn-yellow) is the main action and the only yellow filled shape on
   the site. Blue (.btn-blue) is a secondary action on light backgrounds.

   Yellow on white is 1.2:1, so on its own the yellow shape vanished on white
   and grey pages. The brand blue border gives the edge 9.8:1 on white and
   8.5:1 on light grey; on the blue banner and footer it blends in and the
   yellow fill does the work (8.4:1). One rule, no per-section classes.

   The !important declarations fight the exported page CSS, which sets its own
   padding, fonts and backgrounds on these classes. Page CSS that needs a
   different size (ee-training.css, ee-doj.css) uses a more specific selector
   with its own !important. */
.round-btn {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 48px;
    width: fit-content !important;
    /* 14px + the 2px border keeps the old 16px outer padding. */
    padding: 14px 30px !important;
    /* Transparent unless a variant colors it, so Windows High Contrast and
       other forced-colors modes still draw an edge (they drop backgrounds and
       shadows). */
    border: 2px solid transparent !important;
    border-radius: var(--btn-radius) !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 1.313rem !important;
    /* Bold, as the brand guide says. 800 is not a loaded weight and rendered
       as 900. */
    font-weight: 700 !important;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    -ms-word-break: normal !important;
    word-break: normal !important;
    /* A single long word (at 200% text on a phone) breaks instead of pushing
       the button past the screen edge. */
    overflow-wrap: break-word;
    -webkit-appearance: none;
    cursor: pointer !important;
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

/* Brand black label (8.8:1), with a light highlight under the letters for
   emphasis. The highlight is decoration; the contrast comes from the label. */
.btn-yellow {
    color: var(--ee-black);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    background-color: var(--btn-yellow) !important;
    border-color: var(--ee-blue) !important;
    box-shadow: var(--btn-shadow);
}

/* Solid dark blue, raised on a darker edge, brightening to brand blue on hover
   and focus. White label 12.2:1 at rest and 9.8:1 on brand blue; the fill is
   9.7:1 or better on every grey a blue button sits on. It replaced a highlight
   blue (#4357EE) fill on 2026-10-17. Never on brand blue: it would vanish. */
.btn-blue {
    color: #fff;
    background-color: var(--btn-blue) !important;
    box-shadow: var(--btn-blue-edge);
}

.btn-yellow:visited { color: var(--ee-black); }
.btn-blue:visited   { color: #fff; }

/* Hover only where there is a real pointer, so the state does not stick after
   a tap. The fill brightens to the brand color and the button lifts slightly.
   No underline: an underline says "link", and these are actions (Thomas,
   2026-10-17). Label contrast stays 7:1 or better. */
@media (hover: hover) {
    .round-btn:hover:not([disabled]):not([aria-disabled="true"]) {
        transform: translateY(-1px);
    }

    .btn-yellow:hover:not([disabled]):not([aria-disabled="true"]) {
        background-color: var(--btn-yellow-hover) !important;
        box-shadow: var(--btn-shadow-raised);
    }

    /* Blue is already raised on its edge, so it brightens without lifting. */
    .btn-blue:hover:not([disabled]):not([aria-disabled="true"]) {
        background-color: var(--btn-blue-hover) !important;
        transform: none;
    }
}

/* Pressed: down into the page, with less shadow. */
.round-btn:active:not([disabled]):not([aria-disabled="true"]) {
    transform: translateY(1px);
}

.btn-yellow:active:not([disabled]):not([aria-disabled="true"]) {
    box-shadow: var(--btn-shadow-pressed);
}
/* Blue presses all the way down onto its edge. */
.btn-blue:active:not([disabled]):not([aria-disabled="true"]) {
    transform: translateY(4px);
    box-shadow: none;
}

/* Disabled (the newsletter's Subscribe, while it sends). The label stays
   readable at full contrast; only the depth, the motion and the cursor go. */
.round-btn:disabled,
.round-btn[aria-disabled="true"] {
    box-shadow: none;
    transform: none;
    cursor: not-allowed !important;
}

.round-btn.processing {
    cursor: progress !important;
}

/* The focus ring sits on the button itself. It used to be drawn only on
   .round-btn-container, so a button with no container, such as the three
   "Book a free consultation" links on /services/training/ and the Send button
   on /services/, had no indicator at all. Meryl's review, issue #31. */
/* One focus rule for buttons and form fields; docs/FOCUS.md shows each one
   before and after. --focus-ring reads on white, grey, yellow and the blue
   banner and footer alike. The header search field and the newsletter email
   field had only the browser's own thin outline; the header Search button had
   nothing.

   The ring is a box-shadow, which forced-colors modes remove. The transparent
   outline is what those modes draw instead (they repaint it in a system
   color); everywhere else it is invisible. The block after this one names the
   color outright. */
/* Buttons (2026-10-17): a thicker indicator than the fields' ring, drawn as an
   outline so it does not replace the blue button's raised edge. The white gap
   is a box-shadow added to each button's own shadow. Forced-colors modes keep
   the outline and repaint it (block below). !important so a hovered button
   keeps its indicator: the hover rules above are more specific. */
.round-btn:focus-visible:not([DISABLED]) {
    outline: var(--btn-focus-outline) !important;
    outline-offset: 4px;
    box-shadow: var(--btn-focus-gap) !important;
}
/* Focus brightens the fill too, like hover. */
.btn-yellow:focus-visible:not([DISABLED]) {
    background-color: var(--btn-yellow-hover) !important;
    box-shadow: var(--btn-shadow), var(--btn-focus-gap) !important;
}
/* Blue: a yellow ring inside the edge instead of an outline outside. The
   transparent outline is invisible except in forced-colors modes, which drop
   the ring (a shadow) and repaint the outline in Highlight. */
.btn-blue:focus-visible:not([DISABLED]) {
    outline-color: transparent !important;
    background-color: var(--btn-blue-hover) !important;
    box-shadow: var(--btn-focus-ring-blue), var(--btn-blue-edge) !important;
}
.btn-blue:active:focus-visible:not([DISABLED]) {
    box-shadow: var(--btn-focus-ring-blue) !important;
}
/* Form fields keep the three-band ring. */
.search-form .search-submit:focus-visible,
.search-form input[type="search"]:focus-visible,
#ac_email:focus-visible,
.ee-year-range:focus-visible,
.ee-sf-why textarea:focus-visible,
.ee-sf-why input:focus-visible {
    outline: 3px solid transparent !important;
    outline-offset: 3px;
    box-shadow: var(--focus-ring) !important;
}

@media (forced-colors: active) {
    .round-btn {
        border-color: ButtonText !important;
    }

    .round-btn:focus-visible:not([DISABLED]),
    .search-form .search-submit:focus-visible,
    .search-form input[type="search"]:focus-visible,
    #ac_email:focus-visible {
        outline-color: Highlight !important;
    }
}

/* Lift and press move the button; reduced motion keeps the color change and
   drops the movement. ee-reduced-motion.css already shortens
   the transition itself. */
@media (prefers-reduced-motion: reduce) {
    .round-btn,
    .round-btn:hover,
    .round-btn:active {
        transform: none !important;
    }
}

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

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

.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. */
/* A small header bar right under the song's title: Previous, Next, and
   Album at the far end (tools/export/09-postprocess.mjs). */
.song-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 1.5em;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ee-gray);
}

.song-nav .song-nav-album {
    margin-left: auto;
}

.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) {
    /* Previous and Next side by side, then Album. */
    .song-nav {
        display: grid;
        /* minmax(0, 1fr), not 1fr: a 1fr track never shrinks below its
           widest label, which ran past a 320px screen with large text. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "prev next"
            "album album";
        gap: 12px;
    }

    .song-nav .song-nav-prev { grid-area: prev; }
    .song-nav .song-nav-next { grid-area: next; }
    .song-nav .song-nav-album { grid-area: album; margin-left: 0; }

    /* !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 12px !important;
        /* Full width, so a long label wraps rather than overflowing. */
        white-space: normal;
        text-align: center;
    }
}