/*
Theme Name: Basel Child
Description: Basel Child Theme - Centre Court Bed & Breakfast
Author: XTemos
Author URI: http://xtemos.com
Template: basel
Version: 1.0.0
Text Domain: basel-child
*/

/* ========================================
   BASEL CHILD THEME
   CENTRE COURT BED & BREAKFAST
   ======================================== */


/* ========================================
   GLOBAL TYPOGRAPHY
   ======================================== */

h1 {
    font-family: "Cormorant Garamond", serif !important;
    font-size: 50px !important;
    color: #800020 !important;
    font-weight: 600 !important;
}

h2 {
    font-family: "Cormorant Garamond", serif !important;
    font-size: 32px !important;
    color: #800020 !important;
    font-weight: 600 !important;
}

h3 {
    font-family: "Cormorant Garamond", serif !important;
    font-size: 30px !important;
    color: #800020 !important;
    font-weight: 600 !important;
}

h4 {
    font-family: "Cormorant Garamond", serif !important;
    font-size: 27px !important;
    color: #000 !important;
    font-weight: 500 !important;
}

h5 {
    font-family: "Cormorant Garamond", serif !important;
    font-size: 26px !important;
    color: #9A8060 !important;
    font-weight: 500 !important;
}

h6 {
    font-family: "Cormorant Garamond", serif !important;
    font-size: 20px !important;
    color: #000 !important;
    font-weight: 500 !important;
}


/* ========================================
   CONTACT MAP
   ======================================== */

.contact-map {
    margin-top: 30px !important;
}


/* ========================================
   ACTIVE MENU ITEM
   ======================================== */

.site-navigation.basel-navigation.menu-right ul.menu > li:not(.book-now) > a {
    text-decoration: none !important;
    border: none !important;
}

.site-navigation.basel-navigation.menu-right ul.menu > li.current-menu-item:not(.book-now) > a,
.site-navigation.basel-navigation.menu-right ul.menu > li.current_page_item:not(.book-now) > a {
    text-decoration: underline !important;
    text-decoration-color: #800020 !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 5px !important;
}


/* ========================================
   BOOK NOW BUTTON
   ======================================== */

.site-navigation.basel-navigation.menu-right ul.menu > li.book-now > a {
    background-color: #800020 !important;
    background: #800020 !important;
    color: #ffffff !important;
    padding: 12px 22px !important;
    display: inline-block !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    border: none !important;
    margin-left: 15px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    transition: background-color 0.3s ease !important;
}

.site-navigation.basel-navigation.menu-right ul.menu > li.book-now > a:hover {
    background-color: #660019 !important;
    background: #660019 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: none !important;
}


/* ========================================
   BOOK NOW - ACTUAL BUTTON STRUCTURE
   li.book-now.callto-btn > a
   ======================================== */

html body ul.menu li.menu-item.book-now.callto-btn > a,
html body ul.menu li.menu-item.book-now.callto-btn > a:visited,
html body ul.menu li.menu-item.book-now.callto-btn > a:focus,
html body ul.menu li.menu-item.book-now.callto-btn > a:active {
    background-color: #800020 !important;
    background: #800020 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    border-color: #800020 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

html body ul.menu li.menu-item.book-now.callto-btn > a:hover {
    background-color: #660019 !important;
    background: #660019 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

html body ul.menu li.menu-item.book-now.callto-btn {
    background: transparent !important;
}


/* ========================================
   NIGHTBRIDGE BOOK NOW LINK
   FORCE BURGUNDY IN ALL HEADER STATES
   ======================================== */

html body ul.menu li.book-now.callto-btn > a[href*="nightsbridge.co.za"] {
    background-color: #800020 !important;
    background: #800020 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body ul.menu li.book-now.callto-btn > a[href*="nightsbridge.co.za"]:hover {
    background-color: #660019 !important;
    background: #660019 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ========================================
   HIDE PAGE TITLE
   ======================================== */

.page-title,
.page-title .entry-title,
.page-title h1,
.main-page-wrapper .page-title {
    display: none !important;
}

.main-header {
    margin-bottom: 10px !important;
}

.title-wrapper.basel-title-size-default .title-subtitle {
    font-size: 22px !important;
    font-weight: 300;
}

.title-wrapper.basel-title-color-default .title-subtitle {
    color: #898686 !important;
}

.main-nav .menu {
    margin-right: -160px !important;
}


/* ========================================
   ACCOMMODATION ROOMS
   TWO EXISTING WPBAKERY COLUMNS
   LEFT: 1, 3, 5, 7
   RIGHT: 2, 4, 6, 8
   ======================================== */

.accommodation-column {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


/* ========================================
   ROOM CARDS
   ======================================== */

.accommodation-column .room-card {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 25px !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}


/* ========================================
   ROOM CONTENT
   ======================================== */

.accommodation-column .room-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 22px 25px 25px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}


/* ========================================
   ROOM TITLE
   ======================================== */

.accommodation-column .room-content h4 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: #222222 !important;
    font-family: "Cormorant Garamond", serif !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}


/* ========================================
   ROOM TYPE
   ======================================== */

.accommodation-column .room-type {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #a18c4b !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-align: center !important;
}


/* ========================================
   ROOM DESCRIPTION
   ======================================== */

.accommodation-column .room-description {
    display: block !important;
    width: 100% !important;
    margin: 0 0 15px !important;
    padding: 0 !important;
    color: #6B6864 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: center !important;
}


/* ========================================
   SOCIAL HEADER
   ======================================== */

.social-header i {
    font-size: 20px;
}

.social-header a {
    margin-left: 7px;
}

.social-header {
    margin-left: 10px;
}


/* ========================================
   SOCIAL ICONS
   ======================================== */

footer .social-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

footer .social-icons a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

footer .social-icons a i,
footer .social-icons a i.fa,
footer .social-icons a .fa-facebook {
    display: inline-block !important;
    color: #800020 !important;
    -webkit-text-fill-color: #800020 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

footer .social-icons a span {
    display: inline-block !important;
    color: #800020 !important;
    -webkit-text-fill-color: #800020 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ========================================
   IMAGE BORDER
   ======================================== */

.border img {
    border: 2px double #7f001f !important;
    padding: 5px;
    border-radius: 15px !important;
}


/* ========================================
   CONTACT FORM 7
   ======================================== */

.wpcf7 {
    background: #F8F5F0 !important;
    padding: 30px !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important;
    box-sizing: border-box !important;
}

.wpcf7-form label {
    display: block !important;
    color: #333333 !important;
    font-size: 14px !important;
    margin-bottom: 7px !important;
}

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-select,
.wpcf7-form-control.wpcf7-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #D8D0C5 !important;
    background: #FFFFFF !important;
    border-radius: 4px !important;
    padding: 11px 12px !important;
    color: #333333 !important;
    font-size: 14px !important;
}

.wpcf7-form-control:focus {
    border-color: #800020 !important;
    outline: none !important;
}

input.wpcf7-form-control.wpcf7-submit {
    background-color: #7f001f !important;
    color: #fff !important;
    border-radius: 5px !important;
}

input.wpcf7-form-control.wpcf7-submit:hover {
    background-color: #7f001f !important;
    color: #fff !important;
    border-radius: 5px !important;
}


/* ========================================
   CONTACT DETAILS
   ======================================== */

.contact-details {
    background: #F8F5F0 !important;
    padding: 30px !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06) !important;
    box-sizing: border-box !important;
}

.contact-details h3 {
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    color: #800020 !important;
}

.contact-details p {
    margin: 0 0 18px !important;
    line-height: 1.5 !important;
    color: #333333 !important;
}

.contact-details i {
    width: 22px !important;
    color: #800020 !important;
    margin-right: 6px !important;
}

.contact-details a {
    color: #333333 !important;
    text-decoration: none !important;
}

.contact-details a:hover {
    color: #800020 !important;
}

.contact-details p:last-child {
    margin-bottom: 0 !important;
}


/* ========================================
   ACCOMMODATION ITEM IMAGES
   ======================================== */

.accommodation-item img {
    border: 1px solid #800020 !important;
    border-radius: 0 !important;
    padding: 6px !important;
    background: #fff !important;
    box-sizing: border-box !important;
}


/* ========================================
   NEARBY ATTRACTIONS - FLOATING CARDS
   ======================================== */

.nearby-attractions {
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.nearby-attractions h3 {
    margin: 0 0 35px !important;
    text-align: center !important;
}

.nearby-attractions .attractions-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px !important;
    width: 100% !important;
}

.nearby-attractions .attraction-card {
    display: block !important;
    width: 100% !important;
    min-height: 175px !important;
    margin: 0 !important;
    padding: 30px 35px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    text-align: center !important;
}

.nearby-attractions .attraction-card h4 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: #222222 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.nearby-attractions .attraction-card .attraction-description {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #6B6864 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

.nearby-attractions .attractions-intro {
    display: block !important;
    max-width: 900px !important;
    margin: 35px auto 0 !important;
    padding: 0 !important;
    color: #6B6864 !important;
    text-align: center !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

@media (max-width: 700px) {

    .nearby-attractions .attractions-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .nearby-attractions .attraction-card {
        min-height: 0 !important;
    }
}


/* ========================================
   CENTRE COURT FOOTER
   ======================================== */

footer a,
footer a:visited {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    opacity: 1 !important;
}

footer a:hover,
footer a:focus {
    color: #800020 !important;
    -webkit-text-fill-color: #800020 !important;
    opacity: 1 !important;
}

footer p,
footer li,
footer span {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    opacity: 1 !important;
}

footer h5 {
    color: #806548 !important;
    -webkit-text-fill-color: #806548 !important;
}

footer i[class*="fa-"] {
    color: #800020 !important;
    -webkit-text-fill-color: #800020 !important;
    opacity: 1 !important;
}


/* ========================================
   COPYRIGHT
   ======================================== */

footer .copyrights-wrapper,
footer .copyrights-wrapper *,
footer .copyrights,
footer .copyrights * {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    opacity: 1 !important;
}

footer .copyrights-wrapper {
    margin-top: -45px !important;
    padding-top: 20px !important;
    padding-bottom: 10px !important;
}

footer .copyrights-wrapper > .container {
    border-top: 1px solid rgba(128, 101, 72, 0.25) !important;
    padding-top: 18px !important;
}

footer .copyrights-wrapper .min-footer {
    margin: 0 !important;
    padding: 0 !important;
}

footer .copyrights-wrapper .min-footer p {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}


/* =========================================================
   DURBAN GUESTHOUSE - RESPONSIVE CSS
   ========================================================= */


/* =========================================================
   SMALLER DESKTOP
   1101px - 1500px
   ========================================================= */

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

    .main-nav .menu > li > a {
        font-size: 14px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        white-space: nowrap !important;
    }

    .main-nav .menu > li.book-now > a {
        padding-left: 14px !important;
        padding-right: 14px !important;
        white-space: nowrap !important;
    }

}


/* =========================================================
   BURGER RIGHT ALIGNMENT FIX
   ========================================================= */

@media (max-width: 1250px) {

    .main-nav,
    .site-navigation.basel-navigation {
        display: none !important;
    }

    .main-header .container {
        position: relative !important;
    }

    .right-column {
        position: absolute !important;
        right: 25px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        z-index: 99999 !important;
    }

    .mobile-nav-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-logo,
    .logo {
        position: relative !important;
        z-index: 1 !important;
    }

}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 767px) {

    .right-column {
        right: 20px !important;
    }

}


/* =========================================================
   STICKY HEADER FIX - MOBILE
   ========================================================= */

@media (max-width: 1250px) {

    .sticky-header,
    .is-sticky .main-header,
    .main-header.sticky-header {
        height: 80px !important;
        min-height: 80px !important;
    }

    .is-sticky .main-header .container,
    .sticky-header .container {
        height: 80px !important;
        display: flex !important;
        align-items: center !important;
    }

    .is-sticky .site-logo img,
    .is-sticky .logo img,
    .sticky-header .site-logo img,
    .sticky-header .logo img {
        max-height: 55px !important;
        width: auto !important;
    }

    .is-sticky .right-column {
        right: 25px !important;
        top: 50% !important;
    }

    body {
        padding-top: 0 !important;
    }

}


/* ========================================
   SMALL MOBILE
   ======================================== */

@media (max-width: 767px) {

    .sticky-header,
    .is-sticky .main-header {
        height: 70px !important;
        min-height: 70px !important;
    }

    .is-sticky .site-logo img,
    .sticky-header .site-logo img {
        max-height: 45px !important;
    }

}


/* =========================================================
   ROOMS BUTTONS - MOBILE ONLY
   ========================================================= */

@media (max-width: 767px) {

    .vc_inner.vc_row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .vc_inner.vc_row .wpb_column {
        width: 100% !important;
        float: none !important;
        display: flex !important;
        justify-content: center !important;
    }

    .vc_btn3-container,
    .vc_btn3-right,
    .vc_btn3-left {
        text-align: center !important;
        margin: 10px auto !important;
        width: auto !important;
    }

    .vc_btn3 {
        display: inline-block !important;
        padding: 14px 28px !important;
    }

}