/*
Theme Name: Love Hate Original version
Author: Christopher Kelsey
Description: Love and Hate Tattoo original design.
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 5.6
Version: 1.0.0
Text Domain: love-hate-old
*/

body {
    background: url('./assets/img/DmaskPattern_Edited2.jpg');
}

/* h3 {
    text-align: center;
    background: linear-gradient(to top, 
    var(--wp--preset--color--body-text) 45%, transparent 45%, transparent 46%,
    var(--wp--preset--color--border-color) 60%,
    var(--wp--preset--color--border-color) 60%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    line-height: 150% !important;
} */

h2, h3 {
    text-align: center;
    background: linear-gradient(to top, #6C4310 40%, var(--wp--preset--color--body-text) 60%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter:drop-shadow(0px 0px 15px #e83611);
}

h2 {
    line-height: 125% !important;
}

.wp-block-group.has-background{
    padding: 0.2em 0;
}

.wp-block-column.center-column {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    border-bottom: 1px solid var(--wp--preset--color--body-text);
    flex-grow: 3 !important;
}

.wp-block-column.left-rail p {
    font-size: var(--wp--preset--font-size--micro);
    text-align: center;
    padding-top: 1.2rem;
}

.wp-block-column.center-column figure {
    padding-bottom: 1.25rem;
}

.juicer-feed h1.referral, .juicer-feed a.j-paginate {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.juicer-feed.white li.feed-item, .juicer-feed.user li.feed-item, .juicer-feed.juicer-widget li.feed-item, .juicer-feed.colors li.feed-item, .juicer-feed.gray li.feed-item, .juicer-feed.modern li.feed-item, .juicer-feed.polaroid li.feed-item {
    background-color: #1F1F1F !important;
    border:none !important;
}

.j-poster h3 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--wp--preset--color--body-text) !important;
    background-color: none;
    background-clip: none;
    border:none;
}

a.wp-block-navigation-item__content:hover {
    color: #985616 !important;
}

.wp-block-navigation .wp-block-navigation__submenu-icon {
    display:none;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
    color: var(--wp--preset--color--base) !important;
    background-color: var(--wp--preset--color--body-text) !important;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container li:hover{
    color: var(--wp--preset--color--base) !important;
    background-color: #985616 !important;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--base) !important;
}

.wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
    border-bottom: 1px solid var(--wp--preset--color--base) !important;
}

footer p {
    padding-bottom: 0.25rem;
}

/*FAQ Slider options */
.page-id-43 .wp-block-column.center-column p:not(p.faq-question) {
    visibility: hidden;
    height: 0;
    transition: height 5s ease-in-out;
} 


.page-id-43 .wp-block-column.center-column p.faq-question{
    display:block;
    position: relative;
    width: 100%;
    margin-bottom: 15px;
    padding-left: 15px;
}

p.faq-question::before {
    width: 0;
    height: 0;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    content: '';
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent transparent #b4985a;
}

.page-id-43 .wp-block-column.center-column p a {
    color: var(--wp--preset--color--body-text);
    text-decoration: none;
    font-weight: bold;
}


.page-id-43 .wp-block-column.center-column p.show {
    visibility: visible !important;
    height: auto !important;
} 

p.faq-question.show::before {
    left: -5px;
    top: 100%;
    transform: translateY(-100%);
    border-color: #b4985a transparent transparent transparent;
}

/* Desktop form elements */
    
.contact-form {
    margin-top: 4rem;
}

.form-div {
    width: 50%;
}

.form-div label {
    display: block;
    margin:24px 0;
}

.form-div input{
    width: 140px;
    font-size: var(--wp--preset--font-size--micro);
    padding: 0 2px;
}

.form-div span.required {
    visibility:visible;
    color: rgb(204,51,0);
}

.form-div textarea{
    width: 75%;
    font-size: var(--wp--preset--font-size--micro);
    padding: 0 2px;
}

#comment-field {
    width: 100%;
}

.submit-btn {
    width: 91px;
    margin:24px auto;
}

.wp-block-columns {
    flex-wrap: nowrap!important;
}

.left-rail {
    order: -1;
}

.center-column {
    flex-basis: 0 !important;
   flex-grow: 2 !important;
}

.wp-block-column.center-column figure.bus-card {
    padding-top:1.75rem;
    padding-bottom: 6.5rem;
}

.google-map {
    padding-bottom: 100%;
    position: relative;
    top:1.6rem;
}

.google-map iframe {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

.wp-block-column.left-rail h3.hours {
    margin-top: 2rem;
}

.wp-block-navigation__submenu-container {
    min-width: 180px !important;
    max-width: 180px !important;
}

/* tablet breakpoint */
@media (max-width:780px) {
    /*Mobile form elements */
    .contact-form {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
    }

    .form-div {
        width: 100%;
    }

    .form-div label {
        display: block;
        margin:12px 0;
    }

    .form-div input, .form-div textarea {
        width: 98%;
        font-size: var(--wp--preset--font-size--extra-small);
        padding: 0.5em 1%;
    }

    .form-div span {
        display:inline;
        visibility: hidden;
    }

    .form-div.required span{
        visibility:visible;
        color: rgb(204,51,0);
    }

    .submit-btn {
        margin-bottom: 24px;
        height: 38px;
        width: 100%;
    }
}

/*tablet breakpoint */
@media (max-width:768px) {
    .center-column {
        flex-basis: 100% !important;
    }

    .wp-block-columns {
        flex-wrap: wrap!important;
    }

    .left-rail {
        order: 0;
    }

    /* Mobile Navigation setting */
    .wp-block-navigation__responsive-container {
        background-color: var(--wp--preset--color--header) !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        animation: overlay-menu__fade-in-animation .1s ease-out;
        animation-fill-mode: forwards;
        height: 100%;
        padding: clamp(1rem,var(--wp--style--root--padding-top),20rem) 0 clamp(1rem,var(--wp--style--root--padding-bottom),20rem);
    }

    .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open{
        color: var(--wp--preset--color--body-text);
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .wp-block-navigation .wp-block-navigation-item__content {
        width: 100%;
    }

    .is-menu-open .wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-close, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
        height: 100%;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding-top: 24px !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        font-size: 150%;
    }

    .wp-block-navigation ul li a{
        width:100%;
        padding-top: 5% !important;
        padding-bottom: 5% !important;
        border-bottom: 1px solid var(--wp--preset--color--body-text) !important;
    }

    .wp-block-navigation ul li a span {
        margin-left: clamp(1rem,var(--wp--style--root--padding-left),20rem)
    }

    .artists-submenu .wp-block-navigation__submenu-icon {
        display: block !important;
        position:absolute;
        right: 1rem;
        top: 1.5rem;
        transform: rotate(90deg);
    }

    .artists-submenu.artists-submenu-open .wp-block-navigation__submenu-icon {
        transform: rotate(0);
    }

    button.wp-block-navigation__responsive-container-open {
        height: 36px;
        padding: 0 .5rem;
    }

    button.wp-block-navigation__responsive-container-close {
        right: 1rem;
    }

    .artists-submenu a {
        padding-left: clamp(1rem,var(--wp--style--root--padding-left),20rem) !important;
        width: calc(100% - clamp(1rem,var(--wp--style--root--padding-left),20rem)) !important;
    }

    .artists-submenu > ul.artists-submenu {
        display:none !important;
        height: 0;
    }

    .artists-submenu.artists-submenu-open > ul.artists-submenu {
        display:flex !important;
        height: auto;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
        padding: 0;
        color: var(--wp--preset--color--base) !important;
        background-color: var(--wp--preset--color--body-text) !important;
        max-width: 100% !important;
        width: 100%;
    }

    .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
        border-bottom: 1px solid var(--wp--preset--color--base) !important;
    }

        .page-id-43 .wp-block-column.center-column p.faq-question{
        width: calc(95% + 3.5rem);
        left: -1.75rem;
        border-bottom: 1px solid var(--wp--preset--color--body-text);
        padding-bottom: 15px;
    }

    p.faq-question::before, p.faq-questions.show::before {
        top: 25% !important;
        transform: translateY(-25%) !important;
    }
    
    .page-id-43 .wp-block-column.center-column p.show:not(p.faq-question) {
        width: calc(95% + 3.5rem);
        margin-left: -1.75rem;
        margin-bottom: 15px;
        padding-left: 1rem;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--wp--preset--color--body-text);
    }

}