/* =========================================================
   Shobrook header - replicates legacy www.shobrook.co.uk
   Reference: https://www.shobrook.co.uk/css/default.css?v1.0.3
   ========================================================= */

/* ---- Grid shims (only the classes the header needs) ---- */
.row.full-width { width: 100%; max-width: 120rem; margin: 0 auto; }
.row.full-width::after { content: ""; display: table; clear: both; }
.shobrook-header .columns {
    padding-left: .9375rem;
    padding-right: .9375rem;
    box-sizing: border-box;
}
.shobrook-header .text-center { text-align: center; }
@media (min-width: 50rem) {
    .shobrook-header .medium-text-left { text-align: left; }
}
@media (min-width: 73.75rem) {
    .shobrook-header .large-3 { width: 25%; float: left; }
    .shobrook-header .large-9 { width: 75%; float: left; }
}
@media (max-width: 73.6875rem) {
    .shobrook-header .small-12,
    .shobrook-header .medium-12 { width: 100%; float: none; }
}

/* ---- Header shell ---- */
#header {
    margin: 0;
    padding: 0;
    border-top: 8px solid #134164;
    background: #fff;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 15;
}
@media (max-width: 73.6875rem) { #header { position: relative; } }
@media (min-width: 73.75rem) { #header { padding-top: 1rem; } }
body.admin-bar #header { top: 32px; }
@media (max-width: 782px) {
    body.admin-bar #header { top: 46px; }
}

/* ---- Logo ---- */
#header #logo,
#header .custom-logo-link { display: block; }
#header #logo img,
#header .custom-logo-link img { max-width: 24.6875rem; height: auto; }
@media (min-width: 73.75rem) {
    #logo-wrapper .custom-logo-link { margin-top: 1.9rem; margin-left: .625rem; }
}
@media (max-width: 73.6875rem) {
    #logo-wrapper .custom-logo-link { margin: 1.25rem auto; }
}

/* ---- Mobile nav button ---- */
#header #nav-btn { display: none; }
@media (max-width: 73.6875rem) {
    #header #nav-btn {
        display: inline-block;
        padding: 1rem;
        color: #06253e;
        text-decoration: none;
        font-family: "Jost", sans-serif;
        text-transform: uppercase;
        font-size: 1rem;
    }
    #header #nav-btn .fa { margin-right: .5rem; }
    #header #nav.large { display: none; }
}

/* ---- Desktop nav ---- */
#header #nav { display: block; float: right; }
#header #nav ul#nav-menu {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}
#header #nav ul#nav-menu li { margin: 0; padding: 0; }
#header #nav ul#nav-menu li::before,
#header #nav ul#nav-menu li::after { display: none; }
#header #nav ul#nav-menu > li {
    display: inline-block;
    vertical-align: top;
    text-align: center;
}
#header #nav ul#nav-menu > li > a {
    display: block;
    font-family: "Jost", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.0625rem;
    padding: 4.5rem 1.0625rem 1.875rem;
    color: #06253e;
    text-shadow: 0 0 0.003em rgba(6, 37, 62, .4);
    text-decoration: none;
    position: relative;
    transition: all 200ms linear;
}
@media (min-width: 73.75rem) {
    #header #nav ul#nav-menu > li > a { max-width: 8rem; }
}
@media (min-width: 73.75rem) and (max-width: 91.75rem) {
    #header #nav ul#nav-menu > li > a {
        padding: 4.5rem .625rem 1rem;
        font-size: .875rem;
        max-width: 6rem;
    }
}
#header #nav ul#nav-menu > li > a .li-label {
    position: relative;
    z-index: 2;
}
#header #nav ul#nav-menu > li > a::after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: rgba(6, 37, 62, .15);
    border-radius: 7px 7px 0 0;
    margin-bottom: -12px;
    transition: all 200ms linear;
}
#header #nav ul#nav-menu > li:hover > a {
    color: #fff;
    text-shadow: 0 0 0.003em rgba(255, 255, 255, .4);
}
#header #nav ul#nav-menu > li:hover > a::after { height: 100%; }

/* ---- Per-item hover colours (verbatim from legacy CSS, except
        property_management which is interpolated between
        professional_services and about_shobrooks) ---- */
#header #nav ul#nav-menu > li.general_auctions:hover     > a::after { background: #0d677c; }
#header #nav ul#nav-menu > li.house_clearance:hover      > a::after { background: #78cac9; }
#header #nav ul#nav-menu > li.professional_services:hover > a::after { background: #78cbbe; }
#header #nav ul#nav-menu > li.property_management:hover  > a::after { background: #78ccb8; }
#header #nav ul#nav-menu > li.about_shobrooks:hover      > a::after { background: #78ccb2; }
#header #nav ul#nav-menu > li.contact_us:hover           > a::after { background: #78cda6; }

/* ---- Icon above each menu label (via :before, swapped on hover) ---- */
#header #nav ul#nav-menu > li.general_auctions    > a::before,
#header #nav ul#nav-menu > li.house_clearance     > a::before,
#header #nav ul#nav-menu > li.professional_services > a::before,
#header #nav ul#nav-menu > li.property_management > a::before,
#header #nav ul#nav-menu > li.about_shobrooks     > a::before,
#header #nav ul#nav-menu > li.contact_us          > a::before {
    content: "";
    display: block;
    position: absolute;
    top: 22px;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 2;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 200ms linear;
}

/* Default state (teal) */
#header #nav ul#nav-menu > li.general_auctions    > a::before { background-image: url("../img/icons/property-auctions-turq.svg"); }
#header #nav ul#nav-menu > li.house_clearance     > a::before { background-image: url("../img/icons/house-clearance-turq.svg"); }
#header #nav ul#nav-menu > li.professional_services > a::before { background-image: url("../img/icons/professional-services-turq.svg"); }
#header #nav ul#nav-menu > li.property_management > a::before { background-image: url("../img/icons/property-management-turq.svg"); }
#header #nav ul#nav-menu > li.about_shobrooks     > a::before { background-image: url("../img/icons/about-shobrooks-turq.svg"); }
#header #nav ul#nav-menu > li.contact_us          > a::before { background-image: url("../img/icons/contact-us-turq.svg"); }

/* Hover state (white) */
#header #nav ul#nav-menu > li.general_auctions:hover    > a::before { background-image: url("../img/icons/property-auctions-white.svg"); }
#header #nav ul#nav-menu > li.house_clearance:hover     > a::before { background-image: url("../img/icons/house-clearance-white.svg"); }
#header #nav ul#nav-menu > li.professional_services:hover > a::before { background-image: url("../img/icons/professional-services-white.svg"); }
#header #nav ul#nav-menu > li.property_management:hover > a::before { background-image: url("../img/icons/property-management-white.svg"); }
#header #nav ul#nav-menu > li.about_shobrooks:hover     > a::before { background-image: url("../img/icons/about-shobrooks-white.svg"); }
#header #nav ul#nav-menu > li.contact_us:hover          > a::before { background-image: url("../img/icons/contact-us-white.svg"); }

/* ---- Search / login icons inline with desktop nav ---- */
#header #nav .user-icons {
    display: inline-block;
    list-style: none;
    margin: 0 0 0 .5rem;
    padding: 0;
    vertical-align: top;
}
#header #nav .user-icons li { display: inline-block; }
#header #nav .user-icons a {
    display: block;
    padding: 4.5rem .75rem 1.875rem;
    color: #06253e;
    font-size: 1.1rem;
    text-decoration: none;
    transition: color 200ms linear;
}
#header #nav .user-icons a:hover { color: #0d677c; }

/* ---- Bottom gradient strip ---- */
.gradient-blue-green {
    display: block;
    clear: both;
    width: 100%;
    height: .75rem;
    background: linear-gradient(
        to right,
        #025d74 0%, #025d74 36%, #78c9ce 68%, #78cea1 100%
    );
}

/* =========================================================
   Shobrook footer (replaces Elementor bt-footer)
   ========================================================= */
.shobrook-footer {
    background: #0b2238;
    color: #cfd8df;
    font-family: "Jost", sans-serif;
    line-height: 1.5;
    margin-top: 3rem;
}

.shobrook-footer a { color: #ffffff; text-decoration: none; transition: color 200ms linear; }
.shobrook-footer a:hover { color: #78c9ce; }

.shobrook-footer__inner {
    max-width: 75rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    box-sizing: border-box;
}

/* ---- Top grid: 4 columns desktop, stack on mobile ---- */
.shobrook-footer__top .shobrook-footer__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.4fr;
    gap: 2.5rem;
}
@media (max-width: 60rem) {
    .shobrook-footer__top .shobrook-footer__inner {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 36rem) {
    .shobrook-footer__top .shobrook-footer__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* ---- Brand column (logo + social) ---- */
.shobrook-footer__logo { display: inline-block; margin-bottom: 1.25rem; }
.shobrook-footer__logo img {
    max-width: 14rem;
    height: auto;
    /* white version of the navy logo via CSS inversion */
    filter: brightness(0) invert(1);
}

.shobrook-footer__social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .75rem;
}
@media (max-width: 36rem) { .shobrook-footer__social { justify-content: center; } }
.shobrook-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem; height: 2.25rem;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;
    font-size: 1rem;
}
.shobrook-footer__social a:hover { background: #78c9ce; color: #0b2238; border-color: #78c9ce; }

/* ---- Menu columns ---- */
.shobrook-footer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.shobrook-footer__menu li { margin: 0 0 .5rem; }
.shobrook-footer__menu a { display: inline-block; padding: .25rem 0; font-size: .9375rem; }

/* ---- Contact column ---- */
.shobrook-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
}
.shobrook-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0 0 .75rem;
    font-size: .9375rem;
}
@media (max-width: 36rem) { .shobrook-footer__contact li { justify-content: center; } }
.shobrook-footer__contact a {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.shobrook-footer__contact i { color: #78c9ce; min-width: 1.25rem; padding-top: .15rem; }

/* ---- Bottom strip (copyright) ---- */
.shobrook-footer__bot {
    background: #061726;
    color: rgba(255,255,255,.6);
    font-size: .8125rem;
}
.shobrook-footer__bot .shobrook-footer__inner {
    padding: 1rem 1.5rem;
    text-align: center;
}
.shobrook-footer__bot p { margin: 0; }
.shobrook-footer__bot a { color: #ffffff; }