/*
Theme Name: New Scottish Hymns Child
Theme URI: https://newscottishhymns.com/
Description: Child theme for Divi tailored for New Scottish Hymns.
Author: New Scottish Hymns
Author URI: https://newscottishhymns.com/
Template: Divi
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nshymns
*/

/* For licensing/copyright details, see ./license.txt */

/* General */

/* Top Bar */

.nsh-top-bar {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 1rem !important;
}

@media (max-width: 781px) {
    .nsh-top-bar {
        justify-content: space-between;
    }
}

@media (max-width: 481px) {
    .nsh-top-bar {
        display: none;
    }
}

.nsh-top-bar > p {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.nsh-follow a.nsh-social-link {
    display: flex;
    align-items: center;
}

.nsh-follow a.nsh-social-link svg {
    transition: fill .2s ease;
}

.nsh-follow a.nsh-social-link:focus svg {
    outline: 2px solid #3e8c8b;
    outline-offset: 3px;
}

/* Primary Menu */

.et-db #et-boc .et-l .et_pb_row {
    max-width: 1280px;
}
.et_pb_menu.nsh-menu-header .et_pb_menu__wrap {
    justify-content: flex-end!important;
}

.et_pb_menu.nsh-menu-header .et-menu-nav > ul.et-menu {
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}
.et-db #et-boc .et-l .et_pb_menu.nsh-menu-header .et_pb_menu__menu>nav>ul>li {
    align-items: center;
}
/* Mobile */

header .et_pb_menu .mobile_menu_bar:before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url('media/menu-icon.svg') no-repeat center center;
    background-size: contain;
    font-family: initial !important;
}

.nsh-menu-cart {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}


.et-menu a {
    font-size: 15px;
    font-weight: bold;
}

.et-menu .nsh-menu-cta a {
    background-color: #0D1C1C;
    color: #fff !important;
    padding: 1rem 2rem !important;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2rem;
    transition: background-color .2s ease;
}

/* Mobile */

header .et_pb_menu ul.et_mobile_menu {
    border: 0;
    margin-top: -15px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    
    .nsh-menu-mobile {
        display: block !important;
    }
    
    .nsh-menu-cart, .nsh-menu-account {
        display: none !important;
    }
    
    a {
        color: #0D1C1C;
        font-size: 16px;
        border-color: rgba(112, 112, 112, 0.15);
        padding: 10px 5%;
        
        &:hover {
            background-color: transparent;
            opacity: 1;
        }
    }
    
    .sub-menu {
        padding-left: 0;
    }
    
    li li {
        padding-left: 0;
        
        a {
            font-weight: normal;
            font-size: 14px
        }
    }
    
    li.current-menu-item li a {
        color: var(--gcid-primary-color) !important;
    }
    
    li li.current-menu-item a {
        color: var(--gcid-primary-color) !important;
    }
    
    li:last-child a {
        border: 0;
    }
    
}
/* Menu Footer */

.menu-footer.et_pb_menu .et_pb_menu__wrap {
    justify-content: center;
}

/* Search header */
.is-search-form.is-form-style {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.is-search-form .is-loader-image {
    left: 50%!important;
}

.is-search-form.is-form-style input[type="search"] {
    border-radius: 5px;
    min-height: 50px;
    color: #707070;
    font-size: 15px;
    font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
    
    padding-left: 40px;
    background-image: url('media/search-icon.svg') !important;
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 20px;
}

.is-search-form.is-form-style input[type="submit"].is-search-submit {
    background-color: var(--gcid-primary-color);
    font-weight: 700;
    font-size: 15px !important;
    border-radius: 8px;
    border-color: var(--gcid-primary-color);
    color: #fff !important;
    padding: 0.45rem 1.1rem !important;
    height: unset;
    min-height: 50px;
    cursor: pointer;
    position: relative;
}

@media (min-width: 781px) {
    .is-search-form.is-form-style input[type="submit"].is-search-submit {
        min-width: 150px;
    }
}

@media (max-width: 781px) {
    .is-search-form.is-form-style {
        flex-wrap: wrap;
    }
    
    .is-search-form.is-form-style input[type="submit"].is-search-submit {
        width: 100px;
        flex-basis: 100%;
    }
}

.nsh-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Homepage */

@media (min-width: 800px) and (max-width: 980px) {
    .nsh-albums-wrapper {
        display: flex;
    }
}

/* Helpers */

@media (min-width: 768px) {
    .nsh-reverse-tablet-desktop {
        display: flex;
        flex-direction: row-reverse;
    }
    
    .et_pb_row.nsh-reverse-tablet-desktop > .et_pb_column:first-child {
        margin-right: 0 !important;
    }
    
    .et_pb_row.nsh-reverse-tablet-desktop > .et_pb_column:last-child {
        margin-right: 5.5% !important;
    }
}

/* ----------------------------------------------------------------
   Check List styles
   ----------------------------------------------------------------*/

ul.nsh-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.nsh-check-list li {
    margin-bottom: .5rem;
}

ul.nsh-check-list li::before {
    content: "";
    position: relative;
    left: 0;
    top: 0.4em;
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    margin-right: .4rem;
    background: url('media/check.svg') no-repeat center center;
    background-size: auto;
}

/* ===  Playlist (vertical)  =================================== */

.nsh-playlist-title {
    margin-bottom: .5rem;
    font-weight: 700;
    font-size: clamp(18px, 4vw, 24px);
}

/* list container */
.nsh-play-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow: auto;
}

/* align icon + text horizontally */
.nsh-play-list li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    margin-bottom: .65rem;
}

.nsh-play-list li::before {
    content: "";
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    background: url('media/play.svg') no-repeat center/contain;
}

/* link styling */
.nsh-play-list a {
    display: inline-block;
    font-weight: normal;
    text-decoration: underline;
    color: inherit;
}

.nsh-play-list::-webkit-scrollbar {
    width: 6px;
}

.nsh-play-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .25);
    border-radius: 3px;
}

/* --- responsive horizontal playlist on larger screens --- */
@media (min-width: 768px) {
    .nsh-play-list {
        display: flex;
        flex-wrap: wrap;
        column-gap: 2rem;
        row-gap: .75rem;
        max-height: none;
        margin: 0 0 0 auto;
    }
    
    .nsh-play-list li {
        margin-bottom: 0;
        
    }
    
    /* place title and list on one line */
    .nsh-playlist {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }
    
    .nsh-playlist-title {
        margin: 0;
        flex: 0 0 auto;
    }
}

/* Video */


@media (prefers-reduced-motion: reduce) {
    .nsh-evb-container { transition: none !important; }
}


.nsh-evb-container {
    position: relative;
    width: 90%;
    max-width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 18px;
    cursor: pointer;
    margin: auto;
    transition: box-shadow .3s;
}

@media (min-width: 768px) {
    .nsh-evb-container {
        width: 400px;
    }
}

@media (min-width: 981px) {
    .nsh-evb-container {
        width: 760px;
    }
}

@media (min-width: 1400px) {
    .nsh-evb-container {
        width: 1280px;
    }
}

.nsh-evb-container:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
}

/* Expanded state */
.nsh-evb-expanded {
    width: 100% !important;
    /* height: auto via aspect-ratio */
    border-radius: 0 !important;
}

/* Form */
.mc4wp-form.mc4wp-form-theme .mc4wp-form-fields {
    display: flex;
    gap: 1rem;
    row-gap: .5rem;
    flex-wrap: wrap;
}
.mc4wp-form.mc4wp-form-theme .mc4wp-form-fields > p:first-child,
.mc4wp-form.mc4wp-form-theme .mc4wp-form-fields > p:nth-child(2) {
    width: calc(50% - .5rem);
}

.mc4wp-form.mc4wp-form-theme .mc4wp-form-fields > p:nth-child(3) {
    width: calc(100% - 1rem - 150px);
}

.mc4wp-form.mc4wp-form-theme .mc4wp-form-fields > p:nth-child(4) {
    width: auto;
}

.mc4wp-form.mc4wp-form-theme input[type=email],
.mc4wp-form.mc4wp-form-theme input[type=text] {
    border: 0;
    border-radius: 4px;
    background-color: #fff;
    width: 100%;
    height: 50px;
    font-size: 15px;
    max-width: unset;
}

.mc4wp-form.mc4wp-form-theme input::placeholder {
    color: #707070
}

.mc4wp-form.mc4wp-form-theme label:not(.m4-terms) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.mc4wp-form.mc4wp-form-theme p:has(label.m4-terms) {
    width: 100%;
}

.mc4wp-form.mc4wp-form-theme label.m4-terms {
    font-size: 14px;
    color: #707070!important;
    font-weight: 500;
    margin: auto;
}

.mc4wp-form.mc4wp-form-theme label.m4-terms a {
    color: #3E8C8B;
    font-weight: 700;
    text-decoration: underline;
}

.mc4wp-form.mc4wp-form-theme input[type=submit] {
    background-color: #0D1C1C !important;
    color: #fff !important;
    padding: 1.1rem 0.45rem !important;
    font-weight: 700 !important;
    border-radius: 8px;
    text-decoration: none;
    font-size: 15px;
    transition: background-color .2s ease;
    min-width: 150px;
    line-height: 14px;
}

label.m4-terms input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: unset;
    border-radius: 4px;
    background-color: #DEE5E5;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 8px;
    transition: all 0.2s ease;
}

label.m4-terms input[type="checkbox"]:checked::after {
    content: "";
    width: 20px;
    height: 20px;
    background: url('media/check.png') no-repeat center center;
    position: absolute;
}

@media (max-width: 581px) {
    .mc4wp-form.mc4wp-form-theme .mc4wp-form-fields > p {
        width: 100% !important;
    }
    
    .mc4wp-form.mc4wp-form-theme input[type=submit] {
        width: 100%;
    }
}

/*Thank you page, cart empty page buttons*/

.woocommerce .woocommerce-order-downloads a.button,
.woocommerce-page .woocommerce-order-downloads a.button {
    background-color: transparent !important;
    color: #0D1C1C !important;
    padding: .7rem 1rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-decoration: none;
    font-size: 14px !important;
    transition: background-color .2s ease;
    line-height: 1.2em !important;
    border: 2px #0D1C1C solid !important;
}

.woocommerce .return-to-shop a.button,
.woocommerce p.order-again a.button {
    background-color: #3E8C8B !important;
    color: #fff !important;
    padding: 1.3rem 1rem !important;
    font-weight: 700 !important;
    border-radius: 8px;
    text-decoration: none;
    font-size: 15px;
    transition: background-color .2s ease;
    line-height: 12px !important;
    border: 1px #3E8C8B solid !important;
}

.woocommerce .product .cart button[name="add-to-cart"] {
    background-color: #3E8C8B !important;
    color: #fff !important;
    padding: 1.3rem 1rem !important;
    font-weight: 700 !important;
    border-radius: 8px;
    text-decoration: none;
    font-size: 15px;
    transition: background-color .2s ease;
    line-height: 12px !important;
    border: 1px #3E8C8B solid !important;
}

.woocommerce .product .cart button[name="add-to-cart"]::after {
    display: none
}

.woocommerce-cart .container,  .woocommerce-checkout .container{
    max-width: 1280px !important;
    padding-top: 3rem!important;
}