/* Small adjustments specific to the .NET port.
   Everything else comes from the stylesheets carried over from WordPress. */

/* The WordPress footer had widgets and share buttons; this one is just the
   divider and the copyright strip, so it needs its own spacing. */
#footer { padding: 40px 0 0; }
#footer .ico-border { margin: 0 auto 30px; }

body #footer .copyright { padding: 18px 0; }

body #footer .copyright p {
    margin: 0 0 6px;
    text-align: center;
}

body #footer .copyright .footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

body #footer .copyright .footer-menu li {
    display: inline-block;
    margin: 0 10px;
}

/* Skip-to-content affordance is not present, so make sure keyboard focus is
   at least visible - the carried-over theme CSS suppresses outlines. */
a:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--spa-purple);
    outline-offset: 2px;
}


/* --------------------------------------------------------- music button */
/* The top bar is styled by the theme's own CSS (#bbar-wrapper /
   .dt-sc-social-icons), matching the live WordPress site, so no overrides
   here. Only the music control is new. */
/* inline-block with NO float, matching the live site. Floating it left steals
   the first float slot: the logo then starts beside it instead of on the line
   below (left 229 rather than 108) and the menu is pushed onto a second row.
   As inline content it occupies its own line and the floated logo clears it. */
.spa-music { display: inline-block; float: none; margin: 0; }
.spa-music-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #7fbf3f;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 3px;
    cursor: pointer;
}
.spa-music-btn:hover { background: #7fbf3f; color: #fff; }
@media (max-width: 767px) { .spa-music { float: none; margin: 8px 0; } }

/* ---------------------------------------------------------- share buttons */
/* Footer share links, matching the pair the WordPress site renders. */
.spa-share {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 8px;
}
/* Values taken from the live WordPress site's computed styles, so the pair
   matches exactly: 16px/700 Roboto, bright green on the theme's two blues,
   12px/18px padding, 2px radius. */
/* Selector is #footer-qualified on purpose: 07-spa-theme.css carries
   `body #footer a { color: var(--spa-purple) }`, which outranks a bare class
   and turned the button text purple instead of the site's green. */
#footer .spa-share-btn,
body #footer a.spa-share-btn {
    display: inline-block;
    padding: 12px 18px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: rgb(84, 255, 54);
    text-decoration: none;
    border: 0;
    border-radius: 2px;
}
#footer .spa-share-btn:hover,
body #footer a.spa-share-btn:hover { opacity: .88; color: rgb(84, 255, 54); }
.spa-share-twitter  { background: rgb(41, 169, 224); }
.spa-share-linkedin { background: rgb(14, 118, 168); }
@media (max-width: 600px) {
    .spa-share { justify-content: center; }
}