/* =========================================================
   OFFICE PRIDE MEGA HEADER
   Loaded via wp_enqueue_style in functions.php.
   Markup: template-parts/header/header-mega.php
   ========================================================= */

 /* =========================================================
   OFFICE PRIDE MEGA HEADER
   Clean, scoped stylesheet
   Requires: <header class="op-site-header op-mega-preview-header">
   ========================================================= */

.op-mega-preview-header {
    position: relative;
    z-index: 1000;
    background: #fff;
}

.op-mega-preview-header,
.op-mega-preview-header * {
    box-sizing: border-box;
}

.op-mega-preview-header .header-wrap,
.op-mega-preview-header .nav-container,
.op-mega-preview-header .header-bottom,
.op-mega-preview-header .op-main-nav {
    overflow: visible;
}

.op-mega-preview-header .header-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    padding: 0 28px;
}

.op-mega-preview-header .logo {
    flex: 0 0 260px;
    width: 260px;
    padding-right: 24px;

    /* vendor.css carries "header .logo { padding: 10px 0 0 30px }" from the
       previous header, and that selector still matches this one. The 10px top
       padding made the box taller than the logo and left it sitting low of
       centre in both header states. The left padding is left alone: it is
       load-bearing for the horizontal position here. */
    padding-top: 0;
}

.op-mega-preview-header .logo a,
.op-mega-preview-header .logo img {
    display: block;
}

.op-mega-preview-header .logo img {
    width: 100%;
    max-width: 235px;
    height: auto;
}

.op-mega-preview-header .nav-container {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}


/* =========================================================
   TOP UTILITY BAR
   ========================================================= */

.op-mega-preview-header .header-top {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    width: auto !important;
    max-width: 1320px;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
}

.op-mega-preview-header .header-location-list,
.op-mega-preview-header .header-top-list {
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.op-mega-preview-header .header-location-list {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    background: #f2f3f2 !important;
    border-radius: 6px 0 0 6px !important;
}

.op-mega-preview-header .header-top-list {
    flex: 0 0 auto !important;
    width: auto !important;
    background: #858786 !important;
    border-radius: 0 6px 6px 0 !important;
}

.op-mega-preview-header .header-location-list > ul,
.op-mega-preview-header .header-top-list > ul {
    display: flex !important;
    align-items: stretch !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.op-mega-preview-header .header-location-list > ul > li,
.op-mega-preview-header .header-top-list > ul > li {
    display: flex !important;
    align-items: stretch !important;
    min-width: 0;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.op-mega-preview-header .header-location-list > ul > li + li {
    border-left: 1px solid #d3d8d5 !important;
}

.op-mega-preview-header .header-top-list > ul > li + li {
    border-left: 1px solid rgba(255,255,255,.14) !important;
}

.op-mega-preview-header .header-location-list > ul > li > a,
.op-mega-preview-header .header-top-list > ul > li > a {
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    margin: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.op-mega-preview-header .header-location-list > ul > li > a {
    padding: 0 18px !important;
    background: transparent !important;
    color: #007c3e !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: normal !important;
}

.op-mega-preview-header #loco_title > a {
    min-width: 0 !important;
    max-width: 360px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/**
 * Location pin beside the location name.
 *
 * Attached to the anchor rather than to #loco_title, because developer.js only
 * creates that anchor once it has a location from the cookie. The icon
 * therefore cannot appear on its own next to an empty bar - there is nothing to
 * attach to until there is a name to sit beside.
 *
 * Same marker as the "Change Location" link, inlined as a data URI so it costs
 * no request, and tinted to match the green the name is set in.
 */
.op-mega-preview-header #loco_title > a::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 14px;
    margin-right: 7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 57.4'%3E%3Cpath fill='%23007c3e' d='M18.5,0C8.3,0,0,8.3,0,18.5c0,8.2,11.9,29.6,16.6,37.8c0.8,1.5,3,1.5,3.8,0C25.1,48.1,37,26.7,37,18.5C37,8.3,28.7,0,18.5,0z M18.5,31.9c-7.4,0-13.5-6-13.5-13.5C5,11,11.1,5,18.5,5C26,5,32,11,32,18.4C32,25.9,26,31.9,18.5,31.9z'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
}

.op-mega-preview-header #loco_contact > a {
    min-width: 150px !important;
    justify-content: center !important;
    color: #006c39 !important;
    /* Real bold face; 700 on CeraPro Regular was being synthesised. */
    font-family: 'CeraPro Bold', 'CeraPro Regular', sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.op-mega-preview-header .header-location-list > ul > li > a:hover,
.op-mega-preview-header .header-location-list > ul > li > a:focus {
    background: #e5e9e6 !important;
    color: #005f32 !important;
}

.op-mega-preview-header .header-top-list > ul > li > a {
    justify-content: center !important;
    min-width: 0 !important;
    padding: 0 17px !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    /* Left at the real 400 face. At this size a synthesised weight is more
       obviously soft than it is heavier, and these are secondary links. */
    font-weight: normal !important;
}

.op-mega-preview-header .header-top-list > ul > li:nth-child(1) > a { min-width: 110px !important; }
.op-mega-preview-header .header-top-list > ul > li:nth-child(2) > a { min-width: 175px !important; }
.op-mega-preview-header .header-top-list > ul > li:nth-child(3) > a { min-width: 155px !important; }

.op-mega-preview-header .header-top-list > ul > li > a:hover,
.op-mega-preview-header .header-top-list > ul > li > a:focus {
    background: rgba(0,0,0,.08) !important;
    color: #fff !important;
}

.op-mega-preview-header .header-top-list .list-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin-right: 6px !important;
}

.op-mega-preview-header .header-top-list .list-icon svg {
    display: block !important;
    width: 11px !important;
    height: 16px !important;
}

.op-mega-preview-header .header-top-list .list-icon svg path {
    fill: #fff !important;
}


/* =========================================================
   DESKTOP NAV
   ========================================================= */

.op-mega-preview-header .header-bottom {
    position: relative;
    height: 68px;
    min-height: 68px;
}

.op-mega-preview-header .op-main-nav {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 68px;
}

.op-mega-preview-header .op-desktop-nav {
    position: static;
    z-index: 50;
    display: flex !important;
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: flex-end;
    min-width: 0;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.op-mega-preview-header .op-nav-item {
    position: relative;
    list-style: none;
    background: transparent !important;
    border: 0 !important;
}

.op-mega-preview-header .op-nav-item > a {
    position: relative;
    display: flex;
    align-items: center;
    height: 68px;
    padding: 0 13px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #152044 !important;
    /* This theme ships bold as a separate family ("CeraPro Bold"), not as a
       weight of "CeraPro Regular" - the only real faces loaded are 400 and 700.
       Asking for 600 leaves the browser no face to use, so it synthesises one
       by smearing the 400, which renders soft. Switching family gives a real
       bold outline; the weight is pinned to normal so nothing is synthesised
       on top of a face that is already bold. */
    font-family: 'CeraPro Bold', 'CeraPro Regular', sans-serif;
    font-size: 18px;
    line-height: 1;
    font-weight: normal;
    white-space: nowrap;
    text-decoration: none !important;
    transition: color .18s ease;
}

.op-mega-preview-header .op-nav-item > a:hover,
.op-mega-preview-header .op-nav-item:focus-within > a {
    color: #00964d !important;
}

.op-mega-preview-header .op-nav-item > a::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 0;
    height: 3px;
    background: #00964d;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .18s ease;
}

.op-mega-preview-header .op-nav-item:hover > a::after,
.op-mega-preview-header .op-nav-item:focus-within > a::after {
    transform: scaleX(1);
}

.op-mega-preview-header .op-nav-chevron {
    display: inline-flex;
    margin-left: 5px;
    color: currentColor;
    font-size: 14px;
    line-height: 1;
    transition: transform .18s ease;
}

.op-mega-preview-header .op-has-menu:hover .op-nav-chevron,
.op-mega-preview-header .op-has-menu:focus-within .op-nav-chevron {
    transform: rotate(180deg);
}


/* Primary nav CTA */

.op-mega-preview-header .op-nav-primary {
    display: flex !important;
    align-items: center !important;
    margin-left: 12px !important;
}

.op-mega-preview-header .op-nav-primary > a {
    height: 44px !important;
    padding: 0 20px !important;
    background: #00964d !important;
    color: #fff !important;
    border-radius: 4px !important;
    /* Real bold face rather than a synthesised 700 - see the note on
       .op-nav-item > a above. */
    font-family: 'CeraPro Bold', 'CeraPro Regular', sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    box-shadow: 0 2px 8px rgba(0,150,77,.16) !important;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.op-mega-preview-header .op-nav-primary > a::after {
    display: none !important;
}

.op-mega-preview-header .op-nav-primary > a:hover,
.op-mega-preview-header .op-nav-primary > a:focus {
    background: #007c3e !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.10) !important;
}


/* =========================================================
   DROPDOWNS / MEGA MENU
   ========================================================= */

.op-mega-preview-header .op-menu-panel {
    position: absolute !important;
    top: 100% !important;
    left: 50%;
    z-index: 99999 !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: #fff !important;
    border: 1px solid #e1e6e3 !important;
    border-top: 4px solid #00964d !important;
    box-shadow: 0 18px 40px rgba(18,63,93,.14) !important;
    transform: translate(-50%, 10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.op-mega-preview-header .op-menu-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}

.op-mega-preview-header .op-has-menu:hover > .op-menu-panel,
.op-mega-preview-header .op-has-menu:focus-within > .op-menu-panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.op-mega-preview-header .op-services-menu {
    width: 700px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    padding: 28px;
}

.op-mega-preview-header .op-has-menu:hover > .op-services-menu,
.op-mega-preview-header .op-has-menu:focus-within > .op-services-menu {
    transform: translate(-50%, 0);
}

.op-mega-preview-header .op-mega-intro {
    padding-right: 28px;
    border-right: 1px solid #e4e8e6;
}

.op-mega-preview-header .op-mega-eyebrow {
    display: block;
    margin-bottom: 9px;
    color: #00964d !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.op-mega-preview-header .op-mega-intro h3,
.op-mega-preview-header .op-mega-header h3 {
    margin: 0 0 12px;
    color: #123f5d !important;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 500;
}

.op-mega-preview-header .op-mega-intro p {
    margin: 0 0 16px;
    color: #56636e;
    font-size: 14px;
    line-height: 1.55;
}

.op-mega-preview-header .op-mega-link,
.op-mega-preview-header .op-mega-link:link,
.op-mega-preview-header .op-mega-link:visited {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #00964d !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transform: none !important;
}

.op-mega-preview-header .op-mega-link:hover,
.op-mega-preview-header .op-mega-link:focus,
.op-mega-preview-header .op-mega-link:active {
    background: transparent !important;
    color: #007c3e !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    transform: none !important;
}

.op-mega-preview-header .op-menu-links {
    display: flex;
    flex-direction: column;
}

.op-mega-preview-header .op-menu-links > a,
.op-mega-preview-header .op-resource-menu > a {
    display: block;
    margin: 0 -12px;
    padding: 10px 12px;
    color: #123f5d !important;
    text-decoration: none !important;
    border-radius: 3px;
}

.op-mega-preview-header .op-menu-links > a:hover,
.op-mega-preview-header .op-resource-menu > a:hover {
    background: #f3f8f5;
}

.op-mega-preview-header .op-menu-links > a strong,
.op-mega-preview-header .op-resource-menu > a strong {
    display: block;
    margin-bottom: 2px;
    color: #123f5d;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.op-mega-preview-header .op-menu-links > a span,
.op-mega-preview-header .op-resource-menu > a span {
    display: block;
    color: #66757f;
    font-size: 13px;
    line-height: 1.4;
}


/* Industries mega */

.op-mega-preview-header .op-mega-parent {
    position: static !important;
}

.op-mega-preview-header .op-industries-mega {
    left: 50% !important;
    right: auto !important;
    width: min(1100px, calc(100vw - 80px)) !important;
    margin: 0 !important;
    padding: 28px 34px 0 !important;
    transform: translate(-50%, 10px) !important;
}

.op-mega-preview-header .op-mega-parent:hover > .op-industries-mega,
.op-mega-preview-header .op-mega-parent:focus-within > .op-industries-mega {
    transform: translate(-50%, 0) !important;
}

.op-mega-preview-header .op-mega-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e9e7;
}

.op-mega-preview-header .op-mega-header h3 {
    margin-bottom: 0;
}

.op-mega-preview-header .op-industry-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 52px;
    padding: 26px 0 30px;
}

.op-mega-preview-header .op-industry-column {
    display: flex;
    flex-direction: column;
}

.op-mega-preview-header .op-industry-column h4 {
    margin: 0 0 9px;
    color: #00964d !important;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.op-mega-preview-header .op-industry-column a {
    display: block;
    margin: 0;
    padding: 7px 0;
    background: transparent !important;
    color: #384c5b !important;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;
    text-decoration: none !important;
    transition: color .15s ease, transform .15s ease;
}

.op-mega-preview-header .op-industry-column a:hover {
    color: #00964d !important;
    transform: translateX(3px);
}


/* Mega footer */

.op-mega-preview-header .op-mega-footer {
    margin: 0 -34px !important;
    padding: 0 !important;
    background: #f2f7f4 !important;
    border-top: 1px solid #e1e9e4 !important;
}

.op-mega-preview-header .op-mega-footer-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 18px 34px !important;
    color: #123f5d !important;
    text-decoration: none !important;
    transition: background .18s ease;
}

.op-mega-preview-header .op-mega-footer-link:hover {
    background: #e7f2eb !important;
}

.op-mega-preview-header .op-mega-footer-link > span:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.op-mega-preview-header .op-mega-footer-link strong {
    color: #123f5d !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.op-mega-preview-header .op-mega-footer-link small {
    color: #687781 !important;
    font-size: 13px !important;
}

.op-mega-preview-header .op-mega-footer-arrow {
    color: #00964d !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}


/* Why / Resources */

.op-mega-preview-header .op-why-menu {
    width: 540px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    padding: 28px;
}

.op-mega-preview-header .op-has-menu:hover > .op-why-menu,
.op-mega-preview-header .op-has-menu:focus-within > .op-why-menu {
    transform: translate(-50%, 0);
}

.op-mega-preview-header .op-menu-column {
    display: flex;
    flex-direction: column;
}

/* A location's About menu is built from a single column, so the two column
   grid it inherits would leave most of the panel empty. */
.op-mega-preview-header .op-local-menu {
    width: 300px;
    grid-template-columns: 1fr;
}

.op-mega-preview-header .op-menu-column a {
    display: block;
    margin: 0 -10px;
    padding: 9px 10px;
    color: #384c5b !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    border-radius: 3px;
}

.op-mega-preview-header .op-menu-column a:hover {
    color: #00964d !important;
    background: #f3f8f5;
}

.op-mega-preview-header .op-resource-menu {
    left: auto !important;
    right: 0 !important;
    width: 360px;
    padding: 28px;
    transform: translateY(10px);
}

.op-mega-preview-header .op-has-menu:hover > .op-resource-menu,
.op-mega-preview-header .op-has-menu:focus-within > .op-resource-menu {
    transform: translateY(0);
}

/* Resources shares the two-line link style defined above. */


/* =========================================================
   MOBILE + TABLET
   ========================================================= */

.op-mega-preview-header .burger,
.op-mega-preview-header .mobile-nav {
    display: none;
}

@media (max-width: 1023px) {

    .op-mega-preview-header {
        z-index: 9999;
    }

    .op-mega-preview-header .header-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 84px !important;
        margin: 0 !important;
        padding: 11px 22px !important;
        background: #fff !important;
        overflow: visible !important;
    }

    .op-mega-preview-header .header-top,
    .op-mega-preview-header .op-desktop-nav,
    .op-mega-preview-header .op-menu-panel,
    .op-mega-preview-header .location-popup {
        display: none !important;
    }

    .op-mega-preview-header .logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: calc(100% - 70px) !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        z-index: 100 !important;
    }

    .op-mega-preview-header .logo a {
        display: block !important;
    }

    .op-mega-preview-header .logo img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        width: 225px !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .op-mega-preview-header .nav-container,
    .op-mega-preview-header .header-bottom,
    .op-mega-preview-header .op-main-nav {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .op-mega-preview-header .op-mega-mobile-toggle {
        appearance: none !important;
        -webkit-appearance: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        width: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        cursor: pointer !important;
        z-index: 10002 !important;
    }

    .op-mega-preview-header .burger-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .op-mega-preview-header .burger-close {
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .op-mega-preview-header .op-mega-mobile-toggle i {
        color: #777 !important;
        font-size: 29px !important;
        line-height: 1 !important;
    }

    .op-mega-preview-header.is-mobile-open .burger-open {
        display: none !important;
    }

    .op-mega-preview-header.is-mobile-open .burger-close {
        display: flex !important;
    }

    .op-mega-preview-header .mobile-nav,
    .op-mega-preview-header .mobile-nav.d-flex {
        display: none !important;
    }

    .op-mega-preview-header.is-mobile-open .mobile-nav,
    .op-mega-preview-header.is-mobile-open .mobile-nav.d-flex {
        display: flex !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: calc(100vh - 84px) !important;
        /* dvh tracks the visible viewport once mobile browser chrome is
           accounted for; 100vh alone runs the last menu item off-screen where
           it cannot be scrolled to. mega-header.js refines this on open. */
        max-height: calc(100dvh - 84px) !important;
        margin: 0 !important;
        padding: 8px 22px calc(24px + env(safe-area-inset-bottom)) !important;
        /* max-height has to include the padding, or the panel ends up taller
           than the cap and its last item sits under the bottom edge of the
           screen where it cannot be scrolled into view. */
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        background: #fff !important;
        border: 0 !important;
        border-top: 1px solid #e5e8e6 !important;
        box-shadow: 0 14px 30px rgba(0,0,0,.13) !important;
        transform: none !important;
        z-index: 10001 !important;
    }

    /**
     * Careers, Own a Franchise and Change Location are the tail of this menu.
     * They carry d-lg-none because they are mobile-only, which is what pins
     * them last here - the panel is a flex column, so visual order is set by
     * the order property rather than by where the items sit in the markup.
     * That matters because a location's own links are appended to the menu
     * HTML, which would otherwise place them after these three.
     */
    .op-mega-preview-header .mobile-nav > li {
        order: 1;
    }

    .op-mega-preview-header .mobile-nav > li.d-lg-none {
        order: 2;
    }

    .op-mega-preview-header .mobile-nav > li {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        background: transparent !important;
        border-bottom: 1px solid #e9ecea !important;
    }

    .op-mega-preview-header .mobile-nav > li > a {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 4px !important;
        background: transparent !important;
        color: #123f5d !important;
        font-size: 17px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }

    .op-mega-preview-header .mobile-nav > li > a:hover,
    .op-mega-preview-header .mobile-nav > li > a:focus {
        color: #00964d !important;
    }

    .op-mega-preview-header .mobile-nav .sub-menu {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 0 10px 18px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        overflow: visible !important;
    }

    .op-mega-preview-header .mobile-nav .sub-menu li,
    .op-mega-preview-header .mobile-nav .sub-menu a {
        width: 100% !important;
        max-width: none !important;
    }

    .op-mega-preview-header .mobile-nav .sub-menu a {
        display: block !important;
        margin: 0 !important;
        padding: 9px 4px !important;
        background: transparent !important;
        color: #526672 !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        font-weight: 500 !important;
        text-decoration: none !important;
    }

    .op-mega-preview-header .mobile-nav .sub-menu a:hover {
        color: #00964d !important;
    }
}

@media (max-width: 640px) {
    .op-mega-preview-header .header-wrap {
        min-height: 78px !important;
        padding: 10px 14px !important;
    }

    .op-mega-preview-header .logo {
        max-width: calc(100% - 58px) !important;
    }

    .op-mega-preview-header .logo img {
        width: 210px !important;
    }

    .op-mega-preview-header .op-mega-mobile-toggle {
        width: 42px !important;
        height: 42px !important;
    }

    .op-mega-preview-header .op-mega-mobile-toggle i {
        font-size: 27px !important;
    }

    .op-mega-preview-header.is-mobile-open .mobile-nav,
    .op-mega-preview-header.is-mobile-open .mobile-nav.d-flex {
        max-height: calc(100vh - 78px) !important;
        max-height: calc(100dvh - 78px) !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}


/* =========================================================
   MOBILE ACTION DOCK
   ========================================================= */

.op-mobile-action-dock {
    display: none;
}

@media (max-width: 1023px) {

    .op-mobile-action-dock {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9998 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        width: 100% !important;
        margin: 0 !important;
        padding:
            0
            env(safe-area-inset-right)
            env(safe-area-inset-bottom)
            env(safe-area-inset-left) !important;
        background: #fff !important;
        border-top: 1px solid #dfe5e1 !important;
        box-shadow: 0 -5px 20px rgba(0,0,0,.10) !important;
        transition: opacity .18s ease, visibility .18s ease !important;
    }

    .op-mobile-action-dock.quote-only {
        grid-template-columns: 1fr !important;
    }

    .op-mobile-action {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 10px 18px !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        transition: background .18s ease, color .18s ease !important;
    }

    .op-mobile-action-copy {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        line-height: 1.15 !important;
    }

    .op-mobile-action-copy small {
        display: block !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
        font-weight: 500 !important;
    }

    .op-mobile-action-copy strong {
        display: block !important;
        font-size: 15px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .op-mobile-call {
        gap: 10px !important;
        background: #f3f6f4 !important;
        color: #123f5d !important;
        border-right: 1px solid #dce3df !important;
    }

    .op-mobile-call:hover,
    .op-mobile-call:focus {
        background: #e9efeb !important;
        color: #123f5d !important;
    }

    .op-mobile-call .op-mobile-action-copy small {
        color: #687781 !important;
    }

    .op-mobile-call .op-mobile-action-copy strong {
        color: #007c3e !important;
    }

    .op-mobile-action-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #00964d !important;
        font-size: 21px !important;
        line-height: 1 !important;
    }

    .op-mobile-quote {
        background: #00964d !important;
        color: #fff !important;
    }

    .op-mobile-quote:hover,
    .op-mobile-quote:focus {
        background: #007c3e !important;
        color: #fff !important;
    }

    .op-mobile-quote .op-mobile-action-copy small {
        color: rgba(255,255,255,.82) !important;
    }

    .op-mobile-quote .op-mobile-action-copy strong {
        color: #fff !important;
    }

    /* General sibling, not adjacent. This was "+" until the sticky header
       introduced .op-header-spacer between the header and the dock, at which
       point it silently stopped matching - so the dock stayed pinned over the
       bottom of the open menu and clipped its last items. */
    .op-mega-preview-header.is-mobile-open ~ .op-mobile-action-dock {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Do not put body/html/icon-font rules in this stylesheet.
   Keeping all selectors scoped prevents header CSS from changing
   testimonial quotes, arrows, Font Awesome glyphs, etc. */
/* =========================================================
   INDUSTRIES MEGA MENU FOOTER
   ========================================================= */

.op-mega-preview-header .op-mega-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;

    width: auto !important;

    margin: 0 -34px !important;
    padding: 16px 34px !important;

    background: #f2f7f4 !important;
    border-top: 1px solid #dfe8e2 !important;
}

/* Left copy */
.op-mega-preview-header .op-mega-footer > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    gap: 2px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.op-mega-preview-header .op-mega-footer > div strong {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #123f5d !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.op-mega-preview-header .op-mega-footer > div span {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #687781 !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
}


/* Request a Quote button */
.op-mega-preview-header .op-mega-footer > a.op-mega-cta,
.op-mega-preview-header .op-mega-footer > a.op-mega-cta:link,
.op-mega-preview-header .op-mega-footer > a.op-mega-cta:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 150px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    background: #00964d !important;
    color: #fff !important;

    border: 0 !important;
    border-radius: 4px !important;

    box-shadow: none !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    transform: none !important;

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease !important;
}

.op-mega-preview-header .op-mega-footer > a.op-mega-cta:hover,
.op-mega-preview-header .op-mega-footer > a.op-mega-cta:focus {
    background: #007c3e !important;
    color: #fff !important;

    text-decoration: none !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 4px 12px rgba(0,0,0,.10) !important;
}


/* =========================================================
   MOBILE ACTION DOCK - HIDDEN CALL BUTTON
   The call button is rendered empty and revealed by
   developer.js once the loco_contact cookie is read, so the
   markup stays identical for every visitor under full-page
   caching. Needs !important to beat the dock's own
   display:flex !important inside the media query.
   ========================================================= */

.op-mobile-action-dock .op-mobile-action[hidden] {
    display: none !important;
}


/* =========================================================
   TRANSPARENT HEADER
   Applied only on the Corporate Homepage template, where the
   header sits over the hero. Every other page keeps the
   default white background defined at the top of this file.
   ========================================================= */

.op-mega-preview-header.op-header-transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    background: transparent !important;
    box-shadow: none !important;
}

/* Utility pills read as glass over the hero image */

.op-header-transparent .header-location-list {
    background: rgba(255,255,255,.92) !important;
}

.op-header-transparent .header-top-list {
    background: rgba(0,0,0,.38) !important;
    backdrop-filter: blur(2px);
}

.op-header-transparent .header-top-list > ul > li > a:hover,
.op-header-transparent .header-top-list > ul > li > a:focus {
    background: rgba(0,0,0,.22) !important;
}

/* Main nav links go white over the hero */

.op-header-transparent .op-nav-item > a {
    color: #fff !important;
    /* Tight and dark rather than wide and faint. A 2px blur spreads past the
       letterforms and reads as softness on white text over video; 1px hugs the
       edge, so it still lifts the text off the footage without blurring it. */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.op-header-transparent .op-nav-item > a:hover,
.op-header-transparent .op-nav-item:focus-within > a {
    color: #fff !important;
}

.op-header-transparent .op-nav-item > a::after {
    background: #fff;
}

/* The CTA button keeps its solid green treatment */

.op-header-transparent .op-nav-primary > a {
    background: #00964d !important;
    color: #fff !important;
    text-shadow: none;
}

.op-header-transparent .op-nav-primary > a:hover,
.op-header-transparent .op-nav-primary > a:focus {
    background: #007c3e !important;
}

/* Open dropdown panels stay white cards with dark text, so
   everything inside them keeps the default styling. */

@media (max-width: 1023px) {

    .op-mega-preview-header.op-header-transparent .header-wrap {
        background: transparent !important;
    }

    .op-header-transparent .op-mega-mobile-toggle i {
        color: #fff !important;
        text-shadow: 0 1px 2px rgba(0,0,0,.3);
    }

    /* Once the mobile menu opens, the bar needs a solid
       background so the white panel below it connects. */

    .op-mega-preview-header.op-header-transparent.is-mobile-open .header-wrap {
        background: #fff !important;
    }

    .op-header-transparent.is-mobile-open .op-mega-mobile-toggle i {
        color: #777 !important;
        text-shadow: none;
    }
}


/* =========================================================
   LEGACY FIXED-HEADER OFFSETS

   vendor.css pins the old header with `header { position: fixed }`, so the
   page templates pushed their banner sections down to clear it - either with
   a literal 110px margin or via var(--header-height).

   The mega header sits in normal flow on interior pages and merely overlays
   the hero on the homepage, so neither offset is wanted any more; left in
   place they open a blank band between the header and the banner. Both are
   neutralised here rather than edited out of five large page templates.

   The doubled :root is deliberate - it outranks the `:root` declarations in
   the templates' own inline <style> blocks, which would otherwise win on
   source order because they come later in the document.
   ========================================================= */

:root:root {
    --header-height: 0px;
}

.locations-banner-section {
    margin-top: 0 !important;
}


/* =========================================================
   CORPORATE HOMEPAGE HERO

   The template pulls .hero-with-video up by 118px and pushes .hero-content
   down by 117px - a pair that cancelled out the <main> padding the old fixed
   header required. With that padding gone the negative pull crops the top of
   the hero and drags the headline underneath the logo, so it is removed here.

   The transparent header overlays the hero, so .hero-content carries the
   clearance instead. The template already sets 117px for desktop and zeroes
   it on mobile, which is where the collision showed up.
   ========================================================= */

.hero-with-video {
    margin-top: 0 !important;
}

@media (max-width: 1023px) {
    .op-header-transparent ~ main .hero-content {
        margin-top: 108px !important;
    }
}

@media (max-width: 640px) {
    .op-header-transparent ~ main .hero-content {
        margin-top: 100px !important;
    }
}


/* =========================================================
   LOCATION-ADDED NAV ITEMS

   Rendered by the Office Pride Location Nav plugin into the
   do_action hooks in header-mega.php. The markup reuses the menu's own
   classes, so the only thing needed here is room for a fourth industries
   column; without this the extra column wraps onto a second row.

   :has() degrades safely - older engines simply get the wrapped layout.
   ========================================================= */

.op-mega-preview-header .op-industry-columns:has(.op-industry-column--local) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 38px;
}


/* =========================================================
   MAIN OFFSET

   vendor.js pads <main> by the header's height when the header is
   position:fixed, standing in for space a fixed header does not occupy in the
   flow. The mega header is never fixed - it either sits in normal flow or is
   positioned absolutely so it deliberately overlays the hero - so that padding
   is always wrong here.

   This is asserted in CSS rather than left to the script because the script can
   run before this stylesheet applies, see the position:fixed that vendor.css
   sets on bare `header`, and pad anyway. That transient state was visible on
   the homepage as a gap above the hero.

   It also matters for optimisers. NitroPack builds its critical CSS by
   snapshotting computed styles, and captured that transient padding as a
   literal `main{padding-top:110px}` rule in every cached copy of the page - a
   gap on load that the deferred script then undid. Declaring the value here
   means the snapshot records the correct one.

   If the header is ever made fixed, remove this and let vendor.js do its job.
   ========================================================= */

.op-mega-preview-header ~ main,
.op-mega-preview-header ~ main main {
    padding-top: 0 !important;
}


/* =========================================================
   NARROW DESKTOP WIDTHS

   The nav is close to full at the low end of the desktop range, and a
   location that adds its own top level item makes it wider still - enough
   that the first link runs into the logo. The desktop nav is nowrap and
   right-aligned, so it overflows leftwards rather than wrapping.

   These steps reclaim room progressively, tightening the spacing between
   items first and only then reducing the type and the logo. They sit above
   the 1280px mobile breakpoint, so they cover the band between a comfortable
   desktop and the burger menu.
   ========================================================= */

@media (min-width: 1401px) and (max-width: 1500px) {

    /* First step down from the full 18px. */
    .op-mega-preview-header .op-nav-item > a {
        padding: 0 9px;
        font-size: 16px;
    }

    .op-mega-preview-header .op-nav-chevron {
        font-size: 13px;
    }

    .op-mega-preview-header .op-nav-primary {
        margin-left: 8px !important;
    }

    .op-mega-preview-header .op-nav-primary > a {
        padding: 0 16px !important;
    }
}

@media (min-width: 1201px) and (max-width: 1400px) {

    .op-mega-preview-header .header-wrap {
        padding: 0 18px;
    }

    .op-mega-preview-header .op-nav-item > a {
        padding: 0 7px;
        font-size: 15px;
    }

    .op-mega-preview-header .op-nav-chevron {
        margin-left: 3px;
        font-size: 12px;
    }

    .op-mega-preview-header .op-nav-primary > a {
        font-size: 15px !important;
        padding: 0 14px !important;
    }

    /* Last resort before the burger: give the logo some of its width back to
       the nav. It stays legible at this size. */
    .op-mega-preview-header .logo {
        flex: 0 0 215px;
        width: 215px;
        padding-right: 14px;
    }

    .op-mega-preview-header .logo img {
        max-width: 205px;
    }
}


/* The narrowest desktop band, added when the burger breakpoint moved down from
   1280 to 1024.

   At 1280 the row had 18px of slack left, so a laptop running at exactly
   1280 wide landed on max-width:1280px and got the burger - the nav was
   effectively unavailable on a common screen size. Everything here buys back
   the width that makes the full nav fit down to 1024: a smaller type step,
   tighter item padding, and a logo reduced to the point where it is still
   clearly legible. */
@media (min-width: 1024px) and (max-width: 1200px) {

    .op-mega-preview-header .header-wrap {
        padding: 0 12px;
    }

    .op-mega-preview-header .op-nav-item > a {
        padding: 0 5px;
        font-size: 14px;
    }

    .op-mega-preview-header .op-nav-chevron {
        margin-left: 2px;
        font-size: 11px;
    }

    .op-mega-preview-header .op-nav-primary {
        margin-left: 6px !important;
    }

    .op-mega-preview-header .op-nav-primary > a {
        padding: 0 12px !important;
        font-size: 14px !important;
    }

    .op-mega-preview-header .logo {
        flex: 0 0 178px;
        width: 178px;
        padding-left: 14px;
        padding-right: 10px;
    }

    .op-mega-preview-header .logo img {
        max-width: 154px;
    }
}


/* =========================================================
   STICKY HEADER (DESKTOP AND TABLET)

   The header stays put while the page scrolls and collapses to a slimmer bar
   once you are past the top, so the phone number and Request a Quote stay
   reachable on pages that run several thousand pixels long.

   position: fixed rather than sticky. vendor.css sets overflow-x: hidden on
   html and body, which makes them the scroll container and stops position:
   sticky working entirely - a silent failure that looks like the rule was
   ignored. Fixed is unaffected by ancestor overflow.

   Deliberately not applied on mobile. There is already a fixed action dock
   pinned to the bottom there, and pinning a bar to the top as well would
   sandwich the content between two fixed elements on the smallest screens.
   The dock already keeps call and quote one tap away.
   ========================================================= */

.op-header-spacer {
    height: 0;
}

@media (min-width: 1024px) {

    .op-mega-preview-header,
    /* Repeated at the transparent variant's own specificity: that rule sets
       position: absolute to overlay the hero, and would otherwise win here. */
    .op-mega-preview-header.op-header-transparent {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        transition: box-shadow .25s ease, background-color .25s ease;
    }

    /* Reserves the header's place. Fixed at the unscrolled height, so the
       collapse does not move the page underneath it. */
    .op-header-spacer {
        height: 108px;
    }

    /* The homepage header sits over the hero, so it reserves nothing. */
    .op-header-transparent + .op-header-spacer {
        height: 0;
    }

    .op-mega-preview-header .header-top,
    .op-mega-preview-header .header-bottom,
    .op-mega-preview-header .op-main-nav,
    .op-mega-preview-header .op-nav-item > a,
    .op-mega-preview-header .logo img {
        transition: height .22s ease, min-height .22s ease, opacity .18s ease, max-width .22s ease;
    }


    /* ----- collapsed state ----- */

    /* Two layers, because one does not work here.
     *
     * A wide soft shadow needs a darker surface to register against; over the
     * white page below it simply is not visible, and the header reads as
     * floating with no edge. The 1px layer is effectively a hairline rule and
     * is what actually separates white from white; the wider one sits under it
     * and supplies the depth. */
    .op-mega-preview-header.is-stuck {
        box-shadow:
            0 1px 0 rgba(18, 63, 93, .06),
            0 4px 12px rgba(18, 63, 93, .06);
    }

    /* The utility bar slims rather than disappears.
     *
     * The phone number is a primary conversion here, so scrolling it away on a
     * page thousands of pixels long loses the thing a reader is most likely to
     * want. What does go are Careers, Change Location and Own a Franchise -
     * genuinely secondary, and where most of the row's width sits. What remains
     * is the location and its number, at 26px instead of 40px. */
    .op-mega-preview-header.is-stuck .header-top {
        height: 26px !important;
        min-height: 26px !important;
    }

    .op-mega-preview-header.is-stuck .header-top-list {
        display: none !important;
    }

    .op-mega-preview-header.is-stuck .header-location-list,
    .op-mega-preview-header.is-stuck .header-location-list > ul,
    .op-mega-preview-header.is-stuck .header-location-list > ul > li,
    .op-mega-preview-header.is-stuck .header-location-list > ul > li > a {
        height: 26px !important;
    }

    .op-mega-preview-header.is-stuck .header-location-list {
        border-radius: 0 0 6px 6px !important;
    }

    .op-mega-preview-header.is-stuck #loco_title > a {
        font-size: 13px !important;
        padding: 0 12px !important;
    }

    .op-mega-preview-header.is-stuck #loco_title > a::before {
        width: 9px;
        height: 12px;
        margin-right: 5px;
    }

    .op-mega-preview-header.is-stuck #loco_contact > a {
        min-width: 0 !important;
        padding: 0 12px !important;
        font-size: 14px !important;
    }
}

/* The location name used to be hidden here, on the reasoning that the nav was
   too tight at these widths to carry it. That reasoning was wrong: in the
   collapsed header the location sits in the utility strip above the nav row,
   not beside it, so it never competed with the nav for width - it just
   disappeared on the most common desktop sizes for no reason. */

@media (min-width: 1024px) {

    .op-mega-preview-header.is-stuck .header-bottom,
    .op-mega-preview-header.is-stuck .op-main-nav,
    .op-mega-preview-header.is-stuck .op-nav-item > a {
        height: 58px;
        min-height: 58px;
    }

    /* Sized by height rather than width once collapsed. The bar is 58px and the
       logo is a two-line lockup, so constraining the width leaves its height to
       chance and it ends up crowding the bar. Capping the height instead
       guarantees clear space above and below whatever the artwork's ratio. */
    /* The logo box is deliberately NOT a flex container. Making it one turned
       the anchor into a flex item with auto width, at which point the image's
       max-width: 100% resolved against a width that depended on the image -
       a circular dependency that collapses both to zero and made the logo
       vanish. Left as a block, the parent's align-items: center places it. */
    .op-mega-preview-header.is-stuck .logo {
        flex: 0 0 225px;
        width: 225px;
        margin-top: 0;
    }

    /* Capped by height, with the box wide enough that the width never binds
       first - that is what was quietly holding it to 43px. */
    .op-mega-preview-header.is-stuck .logo img {
        width: auto;
        max-width: 100%;
        max-height: 46px;
    }

    /* The button is sized for the full 68px row and dominates the shorter one.
       min-height has to be set as well as height: the row-height rule above
       applies min-height: 58px to every nav link, and a min-height always wins
       over a smaller height no matter how either is declared - which is why
       this button was still filling the row top to bottom. */
    .op-mega-preview-header.is-stuck .op-nav-primary > a {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 16px !important;
        font-size: 15px !important;
    }

    /* The dropdowns hang off the nav row, which has moved up. */
    .op-mega-preview-header.is-stuck .op-nav-item > a::after {
        bottom: 0;
    }


    /* ----- the homepage, once it has left the hero -----
       Transparent over the hero is only legible while the hero is behind it.
       Scrolled past, the header has to become solid or it is white on white. */

    .op-mega-preview-header.op-header-transparent.is-stuck {
        background: #fff !important;

        /* Restated because the transparent variant carries
           box-shadow: none !important so it sits cleanly over the hero. That
           applies in every state, so once collapsed the homepage header went
           solid white with no edge at all against the white page beneath. */
        box-shadow:
            0 1px 0 rgba(18, 63, 93, .06),
            0 4px 12px rgba(18, 63, 93, .06) !important;
    }

    .op-header-transparent.is-stuck .op-nav-item > a {
        color: #152044 !important;
        text-shadow: none;
    }

    /* The CTA is excluded. It carries both op-nav-item and op-nav-primary,
       and this selector is more specific than every rule that keeps the button
       label white, so on the collapsed homepage header it turned the text
       green over the green button on hover. */
    .op-header-transparent.is-stuck .op-nav-item:not(.op-nav-primary) > a:hover,
    .op-header-transparent.is-stuck .op-nav-item:not(.op-nav-primary):focus-within > a {
        color: #00964d !important;
    }

    .op-header-transparent.is-stuck .op-nav-item > a::after {
        background: #00964d;
    }

    .op-header-transparent.is-stuck .op-nav-primary > a {
        color: #fff !important;
    }
}


/* =========================================================
   "FIND YOUR LOCATION" PROMPT

   Occupies the same slot as the location name and phone, for visitors who
   have not chosen a location yet. It is the visible default and the location
   bar is hidden; developer.js swaps them when a cookie says otherwise. That
   ordering is deliberate - the cached copy of a page is the one a visitor
   with no location receives, so the markup it holds should be theirs.

   Styled off the location pill it stands in for, so the swap is a change of
   content rather than a change of shape.
   ========================================================= */

.op-mega-preview-header .header-location-prompt {
    /* Deliberately not !important. developer.js hides this with an inline
       display:none when a location is set, and an inline style cannot beat an
       !important declaration - with one here, both the prompt and the location
       bar showed at once. Nothing else styles this class, so it does not need
       the extra weight. */
    display: flex;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: #f2f3f2 !important;
    border-radius: 6px 0 0 6px !important;
}

.op-mega-preview-header .header-location-prompt > a {
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    background: transparent !important;
    color: #007c3e !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: normal !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.op-mega-preview-header .header-location-prompt > a::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 14px;
    margin-right: 7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 57.4'%3E%3Cpath fill='%23007c3e' d='M18.5,0C8.3,0,0,8.3,0,18.5c0,8.2,11.9,29.6,16.6,37.8c0.8,1.5,3,1.5,3.8,0C25.1,48.1,37,26.7,37,18.5C37,8.3,28.7,0,18.5,0z M18.5,31.9c-7.4,0-13.5-6-13.5-13.5C5,11,11.1,5,18.5,5C26,5,32,11,32,18.4C32,25.9,26,31.9,18.5,31.9z'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
}

.op-mega-preview-header .header-location-prompt > a:hover,
.op-mega-preview-header .header-location-prompt > a:focus {
    background: #e5e9e6 !important;
    color: #005f32 !important;
}

/* Follows the location bar's collapsed height so the slot behaves the same
   whichever of the two is showing. */
@media (min-width: 1024px) {

    .op-mega-preview-header.is-stuck .header-location-prompt,
    .op-mega-preview-header.is-stuck .header-location-prompt > a {
        height: 26px !important;
    }

    .op-mega-preview-header.is-stuck .header-location-prompt {
        border-radius: 0 0 6px 6px !important;
    }

    .op-mega-preview-header.is-stuck .header-location-prompt > a {
        padding: 0 12px !important;
        font-size: 13px !important;
    }

    .op-mega-preview-header.is-stuck .header-location-prompt > a::before {
        width: 9px;
        height: 12px;
        margin-right: 5px;
    }
}


/* =========================================================
   MOBILE: LOCATION STRIP AND CLICK TO CALL

   Two additions for small screens, both filled in by developer.js and both
   shipped hidden so the cached markup stays the same for every visitor.

   The mobile menu drops Change Location and the utility bar is desktop-only,
   so without these a phone visitor has no indication of which location they
   are looking at, and no one-tap number outside the dock.
   ========================================================= */

/* Covers both new elements as well as the dock's call button, which is why
   this is broader than the earlier .op-mobile-action rule it replaces. */
.op-mobile-action-dock [hidden],
.op-mega-preview-header [hidden] {
    display: none !important;
}

@media (max-width: 1023px) {

    /* ----- location strip across the top of the dock ----- */

    .op-mobile-location {
        grid-column: 1 / -1;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 6px 14px !important;
        background: #f3f6f4 !important;
        border-bottom: 1px solid #dfe5e1 !important;
        color: #007c3e !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
    }

    .op-mobile-location::before {
        content: "";
        flex: 0 0 auto;
        width: 9px;
        height: 12px;
        margin-right: 6px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 57.4'%3E%3Cpath fill='%23007c3e' d='M18.5,0C8.3,0,0,8.3,0,18.5c0,8.2,11.9,29.6,16.6,37.8c0.8,1.5,3,1.5,3.8,0C25.1,48.1,37,26.7,37,18.5C37,8.3,28.7,0,18.5,0z M18.5,31.9c-7.4,0-13.5-6-13.5-13.5C5,11,11.1,5,18.5,5C26,5,32,11,32,18.4C32,25.9,26,31.9,18.5,31.9z'/%3E%3C/svg%3E") no-repeat center center;
        background-size: contain;
    }

    .op-mobile-location > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* ----- click to call, beside the burger ----- */

    .op-mega-preview-header .op-mobile-header-call {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: 42px !important;
        height: 42px !important;

        /* Keeps clear of the burger, which is 46px and sits to its right. */
        margin: 0 4px 0 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        color: #007c3e !important;
        font-size: 22px !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .op-header-transparent .op-mobile-header-call {
        color: #fff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    }

    .op-header-transparent.is-mobile-open .op-mobile-header-call {
        color: #007c3e !important;
        text-shadow: none;
    }
}

@media (max-width: 640px) {

    .op-mega-preview-header .op-mobile-header-call {
        width: 38px !important;
        height: 38px !important;
        font-size: 20px !important;
    }
}


/* =========================================================
   MOBILE NAV - APPEARANCE

   The inherited styling had three problems: a FontAwesome chevron on every
   item with children, left from the older menu where sub-menus collapsed on
   tap; a bottom border on both the parent and each child, so group
   boundaries drew twice; and children separated by lines rather than shown
   as belonging to the item above.

   An earlier attempt grouped children under a vertical rule, but that rule
   and the horizontal divider met at each group boundary and the crossing
   read as lines overlapping.

   So there is now exactly one line in the whole menu: a full-width divider
   between top-level groups. Hierarchy is carried by indentation, weight and
   spacing instead - a child is obviously a child because it is indented and
   lighter, which needs no rule to explain it.
   ========================================================= */

@media (max-width: 1023px) {

    /* The chevron advertised a tap that does nothing; these are always open. */
    .op-mega-preview-header .mobile-nav li.menu-item-has-children::after,
    .op-mega-preview-header .mobile-nav li::after {
        content: none !important;
        display: none !important;
    }

    .op-mega-preview-header .mobile-nav > li {
        border: 0 !important;
        padding: 0 !important;
    }

    /* Drawn on the top edge, so the last group leaves no trailing line. */
    .op-mega-preview-header .mobile-nav > li + li {
        border-top: 1px solid #e9edea !important;
    }

    /* Tight to its own children, generous above - the space does the grouping. */
    .op-mega-preview-header .mobile-nav > li > a {
        padding: 18px 4px 6px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #123f5d !important;
    }

    /* Nothing below it to sit close to. */
    .op-mega-preview-header .mobile-nav > li:not(.menu-item-has-children) > a {
        padding: 17px 4px !important;
    }

    .op-mega-preview-header .mobile-nav .sub-menu {
        margin: 0 !important;
        padding: 0 0 14px !important;
        border: 0 !important;
    }

    .op-mega-preview-header .mobile-nav .sub-menu li {
        border: 0 !important;
        background: transparent !important;
    }

    .op-mega-preview-header .mobile-nav .sub-menu a {
        padding: 9px 4px 9px 18px !important;
        font-size: 15px !important;
        font-weight: normal !important;
        color: #5b6b74 !important;
    }

    .op-mega-preview-header .mobile-nav .sub-menu a:hover,
    .op-mega-preview-header .mobile-nav .sub-menu a:focus {
        color: #00964d !important;
    }
}


/* =========================================================
   CLICK TO CALL - VISIBILITY AND ICON

   The button was only ever styled inside the mobile media query, which set
   its layout but never stopped it appearing elsewhere. Once developer.js
   cleared the hidden attribute it rendered on desktop too, as a stray inline
   anchor. Hidden by default at every width, and shown only on mobile.

   The [hidden] rule is repeated at matching specificity inside the query,
   because the broader one further up this file is less specific than the
   display rule here and would otherwise lose to it - leaving the button
   visible for visitors with no location.
   ========================================================= */

.op-mega-preview-header .op-mobile-header-call {
    display: none !important;
}

@media (max-width: 1023px) {

    .op-mega-preview-header .op-mobile-header-call {
        display: flex !important;
    }

    .op-mega-preview-header .op-mobile-header-call[hidden] {
        display: none !important;
    }

    .op-mega-preview-header .op-mobile-header-call svg {
        display: block;
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 640px) {

    .op-mega-preview-header .op-mobile-header-call svg {
        width: 23px;
        height: 23px;
    }
}