/*
 Theme Name:   Divi Child Harpenden Theme
 Theme URI:    https://www.designwildwest.com
 Description:  Harpenden Osteopaths child theme for Divi
 Author:       Andrew Pettican @ WildWest Design
 Author URI:   https://www.designwildwest.com
 Template:     Divi
 Version:      202507220943
*/

/* =Divi media queries (template)
/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {
}

/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {
}

/*** Responsive Styles Small Desktop And Above ***/
@media all and (min-width: 981px) {
}

/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
}

/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {
}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
}

/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {
}


/* =Theme customization starts here
------------------------------------------------------- */


/* =Fonts
------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    padding-bottom: 18px;
}
h3 {
    padding-bottom: 6px;
}
p {
    padding-bottom: 0.5625rem; /* 9px */
}
p.spaced {
    padding-bottom: 0.9375rem; /* 15px */
}
p + h2, p + h3, ul + h2, ul + h3, ol + h2, ol + h3 {
    padding-top: 16px
}

/* Lists within text modules and contact forms */
.et_pb_text_inner ol, .et_pb_text_inner ul, .et-pb-contact-message ol, .et-pb-contact-message ul {
    list-style-position: outside;
    padding: 0 0 0.5625rem 1.125rem; /* 9px 18px */
    line-height: 1.3;
}
.et_pb_text_inner li {
    padding-bottom: 0.5625rem; /* 9px */
}
.et_pb_text_inner li:last-child {
    padding-bottom: 0;
}
.et_pb_text_inner .unspaced li {
    padding-bottom: 0;
}


/* =Standalone buttons
------------------------------------------------------- */
button.simpay-btn.simpay-payment-btn, .ho-standalone-btn {
    /* .et_pb_button */
    /*font-size: 20px;
    font-weight: 500;
    padding: .3em 1em;*/
    line-height: 1.7em!important;
    /*background-color: transparent;*/
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    border: 2px solid;
    /*border-radius: 3px;*/
    /*-webkit-transition: all .2s;
    transition: all .2s;*/
    position: relative;
    transition: all 300ms ease 0ms;

    /* Harpenden Overrides */
    color: #ffffff!important;
    border-width: 0px!important;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700!important;
    background-color: #d6db46!important;
    padding-top: 9px!important;
    padding-right: 18px!important;
    padding-bottom: 9px!important;
    padding-left: 18px!important;

    /* Override .cn-button */
    font-family: 'Nanum Gothic',Helvetica,Arial,Lucida,sans-serif;
    letter-spacing: 0;
}
button.simpay-btn.simpay-payment-btn:before, .ho-standalone-btn:before,
button.simpay-btn.simpay-payment-btn:after, .ho-standalone-btn:after {
    display: none;
}

/* Cookie Notice overrides */
#cookie-notice {
    font-family: 'Nanum Gothic',Helvetica,Arial,Lucida,sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3em;
}
#cookie-notice.cn-position-bottom {
    border-top: 1px solid #d6db46;
}
#cookie-notice.cn-position-bottom.cookie-notice-hidden {
    border-top: none;
}
#cookie-notice .cn-close-icon {
    opacity: 0.8;
}
#cookie-notice .cn-close-icon:before,
#cookie-notice .cn-close-icon:after {
    background-color: #5c5a57;
}
body.cookies-set {
    /* Override inline padding bottom when cookie bar is closed */
    padding-bottom: 0 !important;
}


/* =Header overrides
------------------------------------------------------- */
#main-header .container {
    width: calc(100% - 60px);
}

/* Mobile header overrides */
@media all and (max-width: 980px) {
    /* Mobile fixed header */
    /* Thanks: https://www.elegantthemes.com/blog/divi-resources/how-to-add-a-custom-fixed-header-for-mobile-using-divi */
    .et_fixed_nav #main-header.et-fixed-header  {
        position: fixed;
        background: rgba(255,255,255,0.93); /*change header background color here*/
        height: 80px;
    }
    .et-fixed-header .logo_container {
        height: 80px;
    }
    .et-fixed-header .mobile_menu_bar {
        padding-bottom: 5px;
    }

    /* Mobile logo sizing override */
    .et_header_style_left #logo, .et_header_style_split #logo {
        max-width: 60%;
    }
}


/* =Divi menu overrides
------------------------------------------------------- */
/* Adjust Divi Menu breakpoint: Based on: https://www.peeayecreative.com/how-to-change-the-divi-menu-module-responsive-breakpoint/ */
/* Divi default is a 980px breakpoint, use a higher value here to override that */
@media only screen and (max-width: 1200px) {
    /* Fix mobile spacing */
    .et_header_style_left #et-top-navigation, .et_header_style_split #et-top-navigation {
        padding: 24px 0 0 0 !important;
    }

    /* Display mobile nav */
    #top-menu-nav {
        display: none;
    }
    #et_mobile_nav_menu {
        display: block
    }
}

/* Adjust font weight */
#et-top-navigation {
    font-weight: 400;
    padding-left: 60px !important; /* Override inline padding */
}


/* =Flex centering
------------------------------------------------------- */
/*** Responsive Styles Small Desktop And Above ***/
@media all and (min-width: 981px) {
    /* Text spacing */
    .et_pb_row.ho-desktop-flex-center {
        display: flex;
        align-items: center;
    }
}


/* =Recaptcha badge
------------------------------------------------------- */
.grecaptcha-badge, body.et_pb_recaptcha_enabled .grecaptcha-badge {
    z-index: 10000;
    visibility: hidden !important;
}


/* =Hero banner
------------------------------------------------------- */

/* Blurb overrides */
.ho-hero-banner .et_pb_blurb_position_left .et_pb_main_blurb_image, .ho-hero-banner .et_pb_blurb_position_right .et_pb_main_blurb_image {
    padding-top: 5px;
}
.ho-hero-banner .et_pb_blurb_container h3 {
    padding-bottom: 6px;
}

/* Text overrides */
.ho-hero-banner .et_pb_text h1 {
    padding-bottom: 16px;
}
.ho-hero-banner .et_pb_text p {
}


/* =Welcome
------------------------------------------------------- */

/* Section spacing */
.ho-welcome.et_pb_section {
    padding-bottom: 0;
}

/* Row spacing */
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
    .ho-welcome .et_pb_row:first-child {
        padding-top: 0;
    }
}


/* =Osteopathy needs
------------------------------------------------------- */

/* Blurb overrides */
.ho-osteopathy-needs .et_pb_main_blurb_image {
    margin-bottom: 10px;
}
.ho-osteopathy-needs .et_pb_blurb_container h4 {
    padding-bottom: 10px;
}

/* Text overrides */
.ho-osteopathy-needs .et_pb_text h2 {
    margin-right: 20%;
}

/* Spacing overrides */

/* Row spacing */
.ho-osteopathy-needs .et_pb_row:first-child {
    padding-top: 0;
}
.ho-osteopathy-needs .et_pb_row:last-child {
    padding-bottom: 0;
}


/* =Contact me (footer)
------------------------------------------------------- */

/* Contact form overrides (submit button) */
.ho-contact-me .et_contact_bottom_container {
    margin-top: 0;
}

/* Blurb overrides */
.ho-contact-me .et_pb_blurb_container h4 {
    padding: 15px 0; /* One 16px line centred within 46px image ((46 - 16) / 2) = 7 */
}
.ho-contact-me .ho-contact-address .et_pb_blurb_container h4 {
    padding: 7px 0; /* Two 16px lines centred within 46px image ((46 - 16 - 16) / 2) = 7 */
}
/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
    .ho-contact-me .ho-contact-address .et_pb_blurb_container h4 {
        padding: 15px 0; /* One 16px line centred within 46px image ((46 - 16) / 2) = 7 */
    }
}

/* Textarea overrides */
.ho-contact-me .et_pb_contact_field textarea.et_pb_contact_message {
    min-height: 118px;
}

/* Success message */
.ho-contact-me .et-pb-contact-message:empty {
    /* Hide the contact message if empty */
    display: none;
}
.ho-contact-me .et-pb-contact-message {
    padding: 10px 14px;
    background: #eeefb5;
    border-radius: 12px;
    margin-bottom: 3%;
    font-weight: bold;
}
.ho-contact-me .et-pb-contact-message :empty {
    /* Hide empty elements within the message */
    display: none;
}
.ho-contact-me .et-pb-contact-message :last-child, .ho-contact-me .et-pb-contact-message > ul {
    /* Remove bottom spacing from last element (or ul's) */
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Row spacing */
/*** Responsive Styles Small Desktop And Above ***/
@media all and (min-width: 981px) {
    .ho-contact-me .et_pb_row:last-child {
        padding-top: 3.5%;
    }
}

/* Section spacing */
/*** Responsive Styles Small Desktop And Above ***/
@media all and (min-width: 981px) {
    .ho-contact-me.et_pb_section {
        padding-bottom: 6.5%
    }
    .ho-contact-me.ho-contact-me-lite.et_pb_section {
        padding-top: 2%; /* Tighter spacing */
    }
}


/* =Footer bar
------------------------------------------------------- */
.ho-footer-bar a {
    color: #5c5a57;
}


/* =Our office
------------------------------------------------------- */

/* Google embed */
.ho-our-office .et_pb_module .et_pb_code {
    line-height: 0;
}
.ho-our-office .iframeGoogle {
    width: 100%;
    border-radius: 12px;
}


/* =Gallery 4 (within our office)
 * Thanks: https://www.elegantthemes.com/blog/divi-resources/changing-the-number-of-columns-in-the-divi-gallery-module-at-different-breakpoints
------------------------------------------------------- */

.ho-gallery-4 .et_pb_gallery_item .et_pb_gallery_image img {
    border-radius: 12px !important;
}

/*** Responsive Tablet And Above ***/
@media all and (min-width: 768px) {
    /* 4 images with fixed 40px spacing */
    .ho-gallery-4 {
        width: calc(100% + 40px) !important;
    }
    .ho-gallery-4 .et_pb_gallery_item {
        width: 25% !important; /*four columns*/
        clear: none !important;
        margin: 0 !important;
    }
    .ho-gallery-4 .et_pb_gallery_item .et_pb_gallery_image {
        margin-right: 40px !important;
    }
}


/* =Services
------------------------------------------------------- */

/* Blurb overrides */
.ho-services .et_pb_blurb_container h4 {
    padding-bottom: 8px;
}

/* Row spacing */
/*** Responsive Styles Small Desktop And Above ***/
@media all and (min-width: 981px) {
    .ho-services {
        margin-top: 2%;
    }
    .ho-services .et_pb_row.ho-row-intro {
        padding-bottom: 0.5%;
    }
}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
    .ho-services .et_pb_row:last-child {
        padding-bottom: 0;
    }
}


/* =About osteopathy
------------------------------------------------------- */

/* Row spacing */
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
    .ho-about-osteopathy .et_pb_row:first-child {
        padding-top: 0;
    }
    .ho-about-osteopathy .et_pb_row:last-child {
        padding-bottom: 0;
    }
}

/* Blurb overrides */
.ho-about-osteopathy .et_pb_blurb_content {
    max-width: none;
}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
    /* Assumes .et_pb_image_wrap is 52px with .et_pb_blurb_container containing 15px (67px total) */
    .ho-about-osteopathy .et_pb_blurb_description.ho-visible {
        width: calc(100% + 67px);
        margin-left: -67px;
    }
}


/* =Blurb toggle
 * Used by "About osteopathy"
 * HTML syntax <a class="ho-blurb-toggle-trigger" href="#what-is-osteopathy" data-open-label="Read more" data-close-label="Read less">Read more</a>
------------------------------------------------------- */

/* Blurb overrides */
.ho-blurb-toggle .et_pb_blurb_container h4 {
    padding-bottom: 0;
}

/*** Responsive Tablet And Above ***/
@media all and (min-width: 768px) {
    .ho-blurb-toggle .et_pb_blurb_container h4 {
        padding-top: 6px;
    }
    .ho-blurb-toggle.et_pb_blurb_position_left .et_pb_blurb_container {
        padding-left: 29px;
    }
}

/* Toggle trigger */
.ho-blurb-toggle-trigger {
    display: inline-block;
    text-decoration: underline;
    padding-top: 0.5625rem; /* 9px - matching <p> padding-bottom */
}
.ho-toggle-hidden {
    max-height: 0;
    transition: max-height 0.5s;
    overflow: hidden;
}
.ho-toggle-hidden.ho-visible {
    max-height: 5000px;
    margin-top: 20px;
}


/* =Price list
------------------------------------------------------- */

/* Blurb overrides */
.ho-price-list .et_pb_main_blurb_image {
    margin-bottom: 16px;
}
.ho-price-list .et_pb_blurb_container h4 {
    padding-bottom: 4px;
}

/* Section spacing */
.ho-price-list.et_pb_section {
    padding-bottom: 0;
}

/* Row spacing */
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
    .ho-price-list .et_pb_row:first-child {
        padding-top: 0;
    }
    .ho-price-list .et_pb_column.ho-online-payments {
        margin-bottom: 0;
    }
}


/* =Video
------------------------------------------------------- */

/* Section spacing */
.ho-video.et_pb_section {
    padding-bottom: 0;
}


/* =Shockwave advantages
------------------------------------------------------- */

/* Blurb overrides */
.ho-shockwave-advantages .et_pb_main_blurb_image {
    margin-bottom: 16px;
}
.ho-shockwave-advantages .et_pb_blurb_container h4 {
    padding-bottom: 4px;
}

/* Section spacing */
.ho-shockwave-advantages.et_pb_section {
    padding-bottom: 0;
}
/*** Responsive Styles Small Desktop And Above ***/
@media all and (min-width: 981px) {
    .ho-shockwave-advantages.et_pb_section {
        padding-bottom: 2.5%;
    }
}

/* Mobile spacing */
.ho-shockwave-advantages .et_pb_row.ho-shockwave-advantages-mobile {
    padding-bottom: 0;
}
.ho-shockwave-advantages .et_pb_row.ho-shockwave-advantages-mobile + .et_pb_row.ho-shockwave-advantages-mobile {
    padding-top: 0;
}
.ho-shockwave-advantages .et_pb_row.ho-shockwave-advantages-mobile .et_pb_column {
    margin-bottom: 30px;
}


/* =Equipment
------------------------------------------------------- */

/* Blurb overrides */
.ho-equipment .et_pb_main_blurb_image {
    margin-bottom: 16px;
}
.ho-equipment .et_pb_blurb_container h4 {
    padding-bottom: 4px;
}

/* Section spacing */
.ho-equipment.et_pb_section {
    padding-bottom: 0;
}
/*** Responsive Styles Small Desktop And Above ***/
@media all and (min-width: 981px) {
    .ho-equipment.et_pb_section {
        padding-bottom: 2.5%;
    }
}


/* =Make Divi accordions closeable (also see scripts.js)
 * Inspired by: https://divibooster.com/make-divi-accordion-module-closable/
------------------------------------------------------- */
.et_pb_toggle .et_pb_toggle_title:before {
    /* Rotation animation */
    transform: rotate(0deg);
    transition: transform 0.5s;
}
.et_pb_toggle_open .et_pb_toggle_title:before {
    display: block !important;

    /* Rotate plus icon to an x, or remove all of this for a minus icon */
    content: "\e050";
    transform: rotate(225deg);
}

/* WW Overrides to fill white behind the icon (instead of transparent) */
/* NB: Assumes the icon is 24px */
/* Warning: Check that this actually sits behind the icon, it should be 2px smaller than the icon */
.et_pb_toggle .et_pb_toggle_title:before {
    z-index: 1;
}
.et_pb_toggle .et_pb_toggle_title:after {
    content: "";
    position: absolute;
    font-size: 24px;
    right: -2px; /* :before is -4px, add 2px */
    color: #d6db46;
    top: 50%;
    margin-top: -10px; /* :before is -12px, add 2px */
    left: auto;
    background: #ffffff;
    width: 20px; /* 24px - 2px - 2px */
    height: 20px; /* 24px - 2px - 2px */
    z-index: 0;
    border-radius: 100%;
}


/* =FAQs
------------------------------------------------------- */

/* Accordion / Toggle overrides */
.ho-faqs .et_pb_accordion .et_pb_module.et_pb_toggle_open,
.ho-faqs .et_pb_accordion .et_pb_module.et_pb_toggle_close {
    padding: 18px 20px 18px 30px;
    margin-bottom: 20px !important;
}
.ho-faqs .et_pb_accordion .et_pb_module.et_pb_toggle_open {
    padding-bottom: 24px;
}
.ho-faqs .et_pb_accordion .et_pb_module.et_pb_toggle_open:last-child,
.ho-faqs .et_pb_accordion .et_pb_module.et_pb_toggle_close:last-child {
    margin-bottom: 0 !important;
}

@media all and (max-width: 767px) {
    .ho-faqs .et_pb_accordion .et_pb_toggle_content {
        padding-right: 10px !important;
    }
}


/* =Google map
------------------------------------------------------- */
.gmap {
    min-height: 455px;
    background: #eeefb5;
}
.gmap p.static {
    text-align: center;
}
.gmap #gmap-marker-content {
    /* Necessary for iOS on initial click of map pin */
    padding-right: 12px;
    padding-bottom: 12px;
}
.gmap #gmap-marker-content p {
    font-family: 'Nanum Gothic',Helvetica,Arial,Lucida,sans-serif;
    font-size: 14px;
    color: #5c5a57;
    margin: 0 !important;
}
.gmap #gmap-marker-content p a {
    color: #d6db46;
    text-decoration: none;
}
.gmap #gmap-marker-content p a:link,
.gmap #gmap-marker-content p a:visited {
    color: #d6db46;
    text-decoration: none;
}


/* =Booking frame
------------------------------------------------------- */
/* Section spacing */
.ho-booking.et_pb_section {
    padding-bottom: 0;
}
.ho-booking.et_pb_section .et_pb_code {
    border: 1px solid #dfdfdf;
    border-radius: 12px;
    overflow: hidden;
}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
    .ho-booking .et_pb_row:first-child {
        padding-top: 0;
    }
}


/* =Contact map (contains a .gmap)
------------------------------------------------------- */
/* Section spacing */
.ho-contact-map.et_pb_section {
    padding-bottom: 0;
}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
    .ho-contact-map .et_pb_row:first-child {
        padding-top: 0;
        width: 100%;
    }
}


/* =Generic content pages
------------------------------------------------------- */

/* Section spacing */
.ho-generic-content.et_pb_section {
    padding-bottom: 0;
}

/* Row spacing */
.ho-generic-content .et_pb_row:last-child {
    padding-bottom: 0;
}


/* =Patient feedback questionnaire pages
------------------------------------------------------- */

/* Hide q16 date field */
.ho-patient-feedback #patient-feedback-form [data-id="q16-date"] {
    display: none;
}

/* Success message */
.ho-patient-feedback .et-pb-contact-message:empty {
    /* Hide the contact message if empty */
    display: none;
}
.ho-patient-feedback .et-pb-contact-message {
    padding: 10px 14px;
    background: #eeefb5;
    border-radius: 12px;
    margin-bottom: 3%;
    font-weight: bold;
}
.ho-patient-feedback .et-pb-contact-message :empty {
    /* Hide empty elements within the message */
    display: none;
}
.ho-patient-feedback .et-pb-contact-message :last-child, .ho-contact-me .et-pb-contact-message > ul {
    /* Remove bottom spacing from last element (or ul's) */
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Inline buttons */
@media all and (min-width: 981px) {
    .ho-inline-buttons .et_pb_button_module_wrapper {
        display: inline-block;
    }
}