/* Compact sticky header on desktop.
   scripts.js adds body.fix-nav once you scroll past the header (screens wider than 950px).
   While scrolled, fold the tall header (phone, address, logo, buttons, then nav) into one
   slim row: logo on the left, navigation on the right. The floating Request / Call / Map tabs
   stay on screen, so booking is still one click away. Phones keep their existing compact bar. */

/* Keep the logo mark's proportions at every width. site.css caps its height on small
   phones (max-height: 30px) while the width stayed at 141px, which stretched it sideways. */
header .logo #desk-logo {
    height: 49px;   /* its normal size; the smaller max-height on phones still applies */
    width: auto;
}
/* Phones: center the logo in the blue bar beside the menu button. */
@media (max-width: 590px) {
    header #main-header .logo {
        flex: 1 1 auto;
        width: auto;
        justify-content: center;
    }
}
@media (min-width: 951px) {
    body.fix-nav header {
        display: flex;
        align-items: center;
        gap: 32px;
        padding: 8px max(24px, calc((100vw - 1240px) / 2));
        box-sizing: border-box;
    }
    body.fix-nav header #main-header {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    body.fix-nav header .header-contact,
    body.fix-nav header .header-btn {
        display: none !important;
    }
    body.fix-nav header .logo {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: auto;
    }
    body.fix-nav header .logo #desk-logo {
        height: 38px;
        width: auto;
        margin: 0;
    }
    body.fix-nav header .logo span {
        width: auto;
    }
    /* the blue bar needs the white version of the logo text */
    body.fix-nav header .logo #logo-text {
        display: none !important;
    }
    body.fix-nav header .logo #wh-logo-text {
        display: block !important;
        width: auto;
        height: 22px;
    }
    body.fix-nav header #main-nav {
        flex: 1 1 auto;
        width: auto;
        justify-content: flex-end;
    }
}
/* On narrower laptops the full logo plus menu won't fit on one line: keep just the mark. */
@media (min-width: 951px) and (max-width: 1200px) {
    body.fix-nav header .logo span { display: none !important; }
    body.fix-nav header { gap: 16px; }
}

/* Footer headings read white on the blue footer, and the phone numbers in the header and
   footer turn white on hover (site.css turned them navy, which vanished on the blue). */
footer .fo-title {
    color: #fff;
}
header .pho:hover,
header .pho:focus,
footer .pho:hover,
footer .pho:focus {
    color: #fff;
}