/* Site-wide overrides layered on top of the theme's style.css.
   Loaded from footer.php, which every page includes, so these rules win the
   cascade without editing the 14,000-line vendor stylesheet.

   The page-banner rules that used to live here (.breadcumb-wrapper height
   trims and the mobile background swap) are gone: the banner itself was
   removed from menu, catering, aboutus and contact, so no live page renders
   one any more. assets/img/bg/breadcumb-bg.jpg and breadcumb-bg-mobile.jpg
   are now referenced only by the unused theme demos in pages/. */

/* The theme only shows the header phone number above 1400px, so it vanishes on
   most laptops and on every phone. Bring it back as the number alone (the
   "Contact us for reservation" caption does not fit) wherever there is room:
   1200-1399px, and below 992px where the nav collapses to the menu toggle.
   Between 992 and 1199 the full nav already fills the bar, so it stays hidden. */
@media (min-width: 1200px) and (max-width: 1399px) {
    .header-call,
    .header-layout3 .header-call {
        display: block;
        margin: 0 10px;
        padding-left: 18px;
    }
}
@media (max-width: 991px) {
    .header-call,
    .header-layout3 .header-call {
        display: block;
        margin: 0 8px 0 0;
        padding-left: 0;
        border-left: 0;
    }
}
@media (max-width: 1399px) {
    .header-call .box-title {
        font-size: 18px;
        margin-bottom: 0;
    }
    .header-call .box-text {
        display: none;
    }
}
@media (max-width: 575px) {
    /* On phones the theme pushes the logo to the centre (margin-left: 65%) and
       keeps the toggle right, so there is no room left in the flex row: park the
       number in the empty space at the far left instead. */
    .header-layout3 .menu-area {
        position: relative;
    }
    .header-call,
    .header-layout3 .header-call {
        position: absolute;
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        z-index: 2;
    }
    .header-call .box-title {
        font-size: 13px;
    }
    .header-call .icon {
        width: 14px;
        height: 14px;
        margin-right: 2px;
    }
}