/* ==========================================================================
   Location contact bar — the fixed callout at the bottom of /<location>/.

   Markup + rationale: includes/gsd/gsd-location-contact-bar.php.

   Colours are the brand tokens from css/webflow.css (--color-2 navy #001543,
   --color-6 gold #d29f13), not the old site's #B9A25F/#0C2340. The bar is navy
   with white text and inverts to gold-on-navy on hover — the same inversion
   .location-hero.gsd-hero-classic .btn-div .button already uses, so the bar and
   the hero buttons above it behave alike. White on the gold would have been
   ~2.2:1, well under AA; white on the navy is ~15:1.

   Three layouts:
     >=1025px  all five cells in a row
     768-1024  fax drops out (the old bar hid it here too), type steps down
     <=767px   icon row of Call / Text / Map + a disclosure holding hours & fax
   ========================================================================== */

:root {
    /* Fallback until the script measures the real bar. Kept close to the
       rendered height at each breakpoint so nothing jumps on load. */
    --gsd-locbar-h: 90px;
}

body.gsd-has-locbar {
    /* Stops the bar sitting on top of the end of the footer. */
    padding-bottom: var(--gsd-locbar-h);
}

/* The back-to-top button is fixed at bottom:20px and would land inside the
   bar, so it rides above it on these pages. */
body.gsd-has-locbar .top-floating-button {
    bottom: calc(20px + var(--gsd-locbar-h));
}

/* Same for AudioEye's launcher. Its corner is set in the AudioEye dashboard
   (Site settings → Accessibility Help Desk settings → Icon placement; lower-left
   since 2026-10-12) and lands as an inline `bottom: 24px`, inside the bar, which
   out-ranks it (bar 2147483647, its #ae_app 2147483646). Only the height is
   adjusted here, so the dashboard keeps deciding the side; the inline style
   needs !important. */
body.gsd-has-locbar #ae_app #ae_launcher {
    bottom: calc(24px + var(--gsd-locbar-h)) !important;
}

/* AudioEye's Help Desk panel lives in a shadow root, so it can't be moved from
   here, and the bar would cover its foot (21px on desktop, 60px of the
   full-screen phone panel). AudioEye marks <body> with data-audioeye-toolbar
   while the panel is open, so the bar steps aside until it closes. visibility,
   not display, so the measured --gsd-locbar-h (and every lift riding on it)
   holds still. */
body.gsd-has-locbar[data-audioeye-toolbar] .gsd-locbar {
    visibility: hidden;
}

.gsd-locbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    /* style.css:83 styles the bare `aside` ELEMENT as the page sidebar:
       position:sticky, top:170px, cream background, 3px gold border-top,
       1.5rem padding, flex-basis:25%. All of it lands on this <aside> too, and
       the stray `top` is the dangerous one — top + bottom + a known height is
       over-constrained, so `top` wins and the bar parks itself 170px down the
       page instead of on the viewport floor. Reset here rather than narrowing
       the sidebar rule, which the real sidebar still depends on. */
    top: auto;
    border-top: 0;
    flex-basis: auto;
    align-self: auto;
    /* Top of the stack, by client direction 2026-09-08 — 2147483647 is the
       maximum a browser accepts, so nothing on the site can outrank it. Note
       Klara's widget claims the same value and, being injected after this
       element, would still paint over it on a tie; that is why the widget is
       moved up out of the bar's rectangle rather than left to fight for the
       layer (see the corner-widget block below).

       Consequence worth knowing: the bar now also sits above the fixed header
       (1020), the mobile nav overlay and the search modal. They do not share
       screen space with a 60px strip on the viewport floor, but an open
       full-screen menu will show the bar across its bottom edge. */
    z-index: 2147483647;
    background: var(--color-2, #001543);
    color: #fff;
    box-shadow: 0 -2px 16px rgb(0 0 0 / 22%);
    /* Zeroes the sidebar padding; the bottom value clears the iOS home
       indicator. */
    padding: 0 0 env(safe-area-inset-bottom, 0px);
}

.gsd-locbar__inner {
    display: flex;
    align-items: stretch;
    margin: 0 auto;
}

.gsd-locbar__item {
    /* `auto` basis, not 0: cells start at their content width and then share
       the leftover space equally, so "Call (626) 963-0226" and a two-line
       address each get what they need. Equal 1fr columns squeezed the address
       to four lines on some offices and dragged the whole bar taller. */
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 13px 18px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 0;
    transition: background-color .2s ease, color .2s ease;
}

/* Divider between cells. Written as an adjacent-sibling border-left rather
   than a border-right plus :last-child, because the disclosure button is the
   real last child and is display:none on desktop — :last-child would strip the
   border from the wrong cell. */
.gsd-locbar__item + .gsd-locbar__item {
    border-left: 1px solid rgb(255 255 255 / 22%);
}

.gsd-locbar__icon {
    flex: none;
    width: 34px;
    height: 34px;
}

.gsd-locbar__text {
    min-width: 0;
}

.gsd-locbar__lede {
    display: block;
    font-weight: 700;
}

.gsd-locbar__short {
    display: none;
}

/* Only the cells that do something respond to the pointer. */
a.gsd-locbar__item:hover,
a.gsd-locbar__item:focus-visible,
button.gsd-locbar__item:hover,
button.gsd-locbar__item:focus-visible {
    background-color: var(--color-6, #d29f13);
    color: var(--color-2, #001543);
}

.gsd-locbar__item:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* The disclosure and its chevron exist for the phone layout only. */
.gsd-locbar__more {
    display: none;
    cursor: pointer;
}

.gsd-locbar__more .gsd-locbar__icon:last-of-type {
    width: 18px;
    height: 18px;
    transition: transform .2s ease;
}

.gsd-locbar[data-open] .gsd-locbar__more .gsd-locbar__icon:last-of-type {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Third-party corner widgets.

   Klara's messaging widget — carried by 43 of the 51 offices — appends a bare
   position:fixed iframe straight to <body> at bottom:0/right:0 with z-index
   2147483647. It lands squarely on the bar's right-hand cell (on a phone, the
   Hours disclosure) and swallows the tap. It is lifted clear rather than
   out-ranked: winning the z-index fight would only bury the chat bubble under
   the bar, which is worse.

   Matched two ways, because the iframe carries no id or class: by its title,
   and by a data attribute the script stamps on any body-level widget it finds
   parked on the viewport floor — so a Klara rename, or a second widget, still
   gets moved.
   -------------------------------------------------------------------------- */
body.gsd-has-locbar > iframe[title="Message Us"],
body.gsd-has-locbar > [data-gsd-locbar-lifted] {
    bottom: var(--gsd-locbar-h) !important;
}

/* …and they step aside with the bar while AudioEye's Help Desk is open (see
   the AudioEye rule near the top): at 2147483647 Klara's bubble paints over the
   panel's form fields, whose #ae_app container tops out at 2147483646. */
body.gsd-has-locbar[data-audioeye-toolbar] > iframe[title="Message Us"],
body.gsd-has-locbar[data-audioeye-toolbar] > [data-gsd-locbar-lifted] {
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   Tablet. The old bar dropped the fax column at this width; so does this one,
   and the type steps down the same way (16px -> 14px, 38px -> 28px icons).
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    :root {
        --gsd-locbar-h: 84px;
    }

    .gsd-locbar__item--fax {
        display: none;
    }

    .gsd-locbar__item {
        gap: 10px;
        padding: 12px 12px;
        font-size: 14px;
    }

    .gsd-locbar__icon {
        width: 26px;
        height: 26px;
    }
}

/* --------------------------------------------------------------------------
   Phone. One row of icon actions instead of the old bar's ~200px stack.

   Call / Text / Map act on the first tap. Hours and fax are display:none until
   the disclosure is open, at which point flex-basis:100% + a negative order
   floats them out of the row and into full-width lines above it — so the same
   elements serve both states and nothing is duplicated in the DOM.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    :root {
        --gsd-locbar-h: 68px;
    }

    .gsd-locbar__inner {
        flex-wrap: wrap;
    }

    .gsd-locbar__item {
        /* Equal thumb targets again — every cell is just an icon and a word. */
        flex-basis: 0;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 9px 6px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .02em;
        text-align: center;
        /* Comfortable thumb target on the smallest phones. */
        min-height: 60px;
    }

    .gsd-locbar__icon {
        width: 22px;
        height: 22px;
    }

    .gsd-locbar__full {
        display: none;
    }

    .gsd-locbar__short {
        display: block;
    }

    .gsd-locbar__more {
        display: flex;
        position: relative;
    }

    /* The chevron rides in the corner rather than taking a third row. */
    .gsd-locbar__more .gsd-locbar__icon:last-of-type {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 14px;
        height: 14px;
    }

    /* Collapsed: hours and fax are out of the row entirely. */
    .gsd-locbar__item--hours,
    .gsd-locbar__item--fax {
        display: none;
    }

    .gsd-locbar[data-open] .gsd-locbar__item--hours,
    .gsd-locbar[data-open] .gsd-locbar__item--fax {
        flex: 1 0 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        min-height: 0;
        padding: 12px 18px;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        border-left: 0;
        border-bottom: 1px solid rgb(255 255 255 / 15%);
        display: flex;
    }

    /* Hours above fax, both above the action row. */
    .gsd-locbar[data-open] .gsd-locbar__item--hours {
        order: -2;
    }

    .gsd-locbar[data-open] .gsd-locbar__item--fax {
        order: -1;
    }

    .gsd-locbar[data-open] .gsd-locbar__item--hours .gsd-locbar__full,
    .gsd-locbar[data-open] .gsd-locbar__item--fax .gsd-locbar__full {
        display: block;
    }

    .gsd-locbar[data-open] .gsd-locbar__item--hours .gsd-locbar__short,
    .gsd-locbar[data-open] .gsd-locbar__item--fax .gsd-locbar__short {
        display: none;
    }

    .gsd-locbar[data-open] .gsd-locbar__item--hours .gsd-locbar__icon,
    .gsd-locbar[data-open] .gsd-locbar__item--fax .gsd-locbar__icon {
        width: 20px;
        height: 20px;
    }
}

/* Very narrow phones: four 60px targets across 320px is tight, so the labels
   shrink before the icons do. */
@media screen and (max-width: 359px) {
    .gsd-locbar__item {
        padding: 9px 2px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gsd-locbar__item,
    .gsd-locbar__more .gsd-locbar__icon:last-of-type {
        transition: none;
    }
}

@media print {
    .gsd-locbar {
        display: none;
    }

    body.gsd-has-locbar {
        padding-bottom: 0;
    }
}