/* ------------------------------------------------------------------ *
 * back-button.css
 * The one "Back to …" button used across the whole site: a flat, mild
 * yellow button with the arrow in its own span. Loaded by base.html,
 * admin_panel/base_admin.html, and every standalone page that has a back
 * link.
 *
 * Markup:
 *   <a class="site-back" href="…"><span class="site-back-arrow"
 *      aria-hidden="true">&#8592;</span> Back to …</a>
 *
 * The doubled class (a.site-back.site-back) is deliberate: it outranks the
 * page stylesheets' contextual rules (".back-bar a", ".bowl-page a", …) so
 * the button looks the same everywhere without !important.
 *
 * Add .site-back--inline when the button sits in a toolbar or header row;
 * it drops the bottom margin so the row's own alignment wins.
 * ------------------------------------------------------------------ */

a.site-back.site-back,
a.site-back.site-back:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    margin: 0 0 18px;
    padding: 8px 18px 8px 14px;
    border: 1px solid #e9cf6b;
    border-radius: 8px;
    background: #fbe89b;
    color: #5c4506;
    font: 700 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.02em;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(120, 90, 10, 0.18);
    filter: none;
    transform: none;
    transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

a.site-back.site-back .site-back-arrow {
    display: inline-block;
    font-size: 1.1em;
    line-height: 1;
    transition: transform 0.15s;
}

a.site-back.site-back:hover {
    background: #f8df7c;
    color: #5c4506;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(120, 90, 10, 0.22);
}

a.site-back.site-back:hover .site-back-arrow {
    transform: translateX(-3px);
}

a.site-back.site-back:active {
    background: #f3d766;
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(120, 90, 10, 0.2);
}

a.site-back.site-back:focus-visible {
    outline: 3px solid #a16207;
    outline-offset: 2px;
}

/* In a toolbar / header row: no bottom margin, let the row align it. */
a.site-back.site-back.site-back--inline {
    margin: 0;
}