/*
 * call-bar - the fixed "Call us today <number>" bar below 768px, one full-width
 * tap target.
 *
 * Loaded from site/layouts/app.blade.php: the bar is part of the site chrome,
 * so every page carries it. The bar pads the body out by its own height, so
 * it can never cover the last line of the footer.
 */

/* Exactly the bar's own height, so the footer meets it with no strip of page
   background showing between the two: the 56px touch target of its links plus
   the 1px border along its top, plus whatever the phone reserves below. */
body {
    padding-bottom: var(--site-call-bar-h);
}

@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }
}

/* Brass, not navy. The footer above it is navy and so is .btn-brand, so a navy
   bar disappeared into the bottom of the page; brass reads as the one thing on
   the screen to tap. Navy on brass is 6.45:1. */
.call-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1050;
    display: flex;
    background-color: var(--site-accent);
    border-top: 1px solid rgba(var(--site-primary-rgb), 0.25);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.call-bar a {
    flex: 1 1 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--site-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
}

/* The number never breaks across lines: on a narrow phone the label wraps
   onto its own line above it instead. */
.call-bar-number {
    white-space: nowrap;
}

/* The dark brass, with white on it at 5.06:1 - the light brass cannot darken
   without the navy label on it failing. */
.call-bar a:hover {
    background-color: var(--site-accent-ink);
    color: #ffffff;
}

/* The link fills the screen edge to edge, so the site's ring, drawn outside the
   element, would run off three sides. Here it sits inside the cell, and on brass
   it is the navy stripe that shows rather than the brass one. */
.call-bar a:focus-visible {
    outline: 3px solid var(--site-primary);
    outline-offset: -5px;
    box-shadow: none;
}

@media (min-width: 768px) {
    .call-bar {
        display: none;
    }
}