/*
Theme Name: Lynn Law Firm
Theme URI:
Author: Kishmish
Author URI:
Description: Custom theme for Lynn Law
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lynn-law-firm
Tags:
*/

@media (max-width: 600px) {
    .carousel-heading p {
        font-size: 1.35em !important;
        padding: 0.5rem 0;
    }
    .carousel-group {
        min-height: 80vh !important;
    }
    .site-logo-row {
        padding: 1rem !important;
        .wp-block-site-logo {
            width: 90px;
        }
    }
	.areas-of-practice-grid {
		grid-template-columns: 1fr;
	}
}

.nav-wrapper {

    @media (max-width: 600px) {
        padding: 1.5rem !important;
        .nav-text {
            font-size: 2em !important;
        }

        & > div {
            justify-content: space-between;
            .nav-text {
                font-size: 1.5em !important;
            }
        }
    }

    /* copy of wp default css to a 1000px media query */
    @media (min-width: 900px) {
        .wp-block-navigation__responsive-container-open:not(.always-shown) {
            display: none !important;
        }

        .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
            display: block !important;
            width: 100%;
            position: relative;
            z-index: auto;
            background-color: inherit;
        }
    }

    /* neutralize the wp default for 600px */
    @media (min-width: 600px) {
        .wp-block-navigation__responsive-container-open:not(.always-shown) {
            display: flex;
        }
        .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
            display: none;
        }
    }
    /* this is to split the nav menu apart so the firm's name is in the center */
    @media (min-width: 600px) {
        .nav-menu {
            margin-left: 0;
            flex-grow: 1;
            .nav-our-team-link {
                margin-left: auto;
            }
        }
    }

    &:has( > div.is-position-sticky) {
        top: calc(0px + var(--wp-admin--admin-bar--height, 0px));
        position: sticky;
        z-index: 10;
    }

    .call-us-nav-text {
        display: none;
        padding: 1rem 0;
        @media (max-width: 383px) {
            width: 200px;
        }
    }

    .nav-menu {
        a {
            transition: color 0.5s ease-in-out;
            &:hover {
                color: #767676;
            }
        }
    }

    .nav-text {
        z-index: 10;
    }

    .nav-text, .call-us-nav-text {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .nav-phone-icon {
        cursor: pointer;
        margin-left: 20px;
    }

    .wp-block-navigation {
        .wp-block-navigation-submenu {
            border: none !important;
            padding: 1rem;
        }

        .has-child .wp-block-navigation__submenu-container {
            transition: opacity 0.5s linear !important;
        }
    }
}

/* this is to fade between "call us..." and firm name on the homepage */
.home {
    .nav-wrapper {

        .nav-phone-icon, .nav-text, .call-us-nav-text {
            transition: opacity 0.5s ease-in-out;
        }

        .nav-phone-icon, .nav-text {
            opacity: 0;
        }

        .call-us-nav-text {
            cursor: pointer;
            display: block;
            opacity: 1;
            z-index: 10;
            & a {
                text-decoration: none;
            }
        }

        &.sticky {
            .nav-phone-icon {
                opacity: 1;
            }
            .nav-text {
                opacity: 1;

            }
            .call-us-nav-text {
                opacity: 0;
                z-index: -1;
            }
        }
    }
}

#gform_confirmation_wrapper_1 {
    margin-top: 14px;
    #gform_confirmation_message_1 {
        color: white;
        font-family: Baskerville, serif;
        font-style: italic;
    }
}

.gform_wrapper {
    min-width: 80%;

    form {
        &#gform_1 input {
            color: white;
            border-bottom: 1px solid white;
            &::placeholder {
                color: white;
            }
        }
        &#gform_2 {
            input, textarea {
                color: black;
                border-bottom: 1px solid black;
                &::placeholder {
                    color: black;
                }
            }
        }

        input[type="submit"] {
            cursor: pointer;
        }

        input, textarea {
            border: none;
            background-color: transparent;
            font-family: Arial, san-serif;
            &::placeholder {
                opacity: 1;
            }
        }
    }
}

.required-label {
    font-family: 'mr-eaves-sans', sans-serif;

}

/* this controls the max width of the accredidations images */
.accreditations {
    figure.wp-block-gallery {
        align-items: center;
        @media (max-width: 650px) {
            flex-direction: column;
        }
    }
    figure.wp-block-image {
        max-width: 150px;
    }
}

/* personal injury page grid */
.wp-container-core-group-is-layout-28 {
    @media (max-width: 1100px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (max-width: 650px) {
        grid-template-columns: auto;
    }
}

/* resolved cases on automobile accidents page */
.wp-container-core-group-is-layout-7,
.wp-container-core-group-is-layout-12 {
    @media (max-width: 650px) {
        grid-template-columns: auto;
    }
}

.wp-block-separator {
    border-top: 1px solid;
}

.accreditations-separator {
    width: 100%;
    border-top: none;
}

.bio-details {
    font-family: 'neue-haas-unica', sans-serif;
    font-size: 14px;
    font-weight: 400;
    @media (max-width: 600px) {
        font-size: 20px;
    }
}
/* this styles the details accordions with + and - symbols */
.staff-details {
    .wp-block-details {
        summary {
            padding: 0;
        }
    }
    &.single-staff {
        @media (max-width: 600px) {
            .wp-block-columns {
                flex-direction: column-reverse;
                .staff-details-column {
                    padding-top: 2rem !important;
                }
                .staff-photo-column {
                    figure {
                        padding-top: 0 !important;
                        img {
                            object-fit: cover !important;
                        }
                    }
                }
            }
        }
    }
}
.wp-block-details {
    width: 100%;

    summary {
        @media (max-width: 600px) {
            padding: 2rem 0;
        }
        cursor: pointer;
        border-bottom: 1px solid #676767;
        &::marker {
            content: none;
        }
        &::after {
            content: " -";
            font-family: sans-serif;
            float: right;
            text-align: right;
        }
    }

    &[open] summary::after {
        content: " +";
        font-family: sans-serif;
    }
}

.staff-subtitle {
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    font-family: Baskervville, serif !important;
    color: #3f3328 !important;

    margin-bottom: 1.5rem;
    &.single {
        font-size: 18px;
    }
    a {
        color: #3f3328 !important;
        text-decoration: none;
    }
    .sep {
        margin: 0 5px;
    }
}

.staff-accordions {
    details {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        font-family: 'neue-haas-unica', sans-serif !important;
        margin-bottom: 10px;
        @media (max-width: 600px) {
            font-size: 20px;
        }
        summary {
            font-size: 15px;
            text-transform: uppercase;
            font-family: 'mr-eaves-sans', sans-serif !important;
            border-bottom: 1px solid #bc9765;
            @media (max-width: 600px) {
                font-size: 20px;
            }
        }
    }

}

#contact-map {
    height: 400px;
    width: 100%;
}
/* HELPER CLASSES */
@media (min-width: 782px) {
    .max-height-447-desktop {
        max-height: 447px;
    }
}

.no-underline {
    text-decoration: none;
    & a {
        text-decoration: none;
    }
}

.w-150 {
    width: 150px;
}

.w-250 {
    width: 250px;
}

.w-300 {
    width: 300px;
}

.position-absolute-bottom-0 {
    position:absolute;
    bottom:0;
}

.width-100p {
    width:100%;
}

.padding-lr-med-sm {
    @media (max-width: 600px) {
        padding-left: 2rem !important;
        padding-right: 2rem !important;

    }
}

.min-height-484-sm {
    @media (max-width: 600px) {
        min-height: 484px !important;
    }
}

.padding-top-0-sm {
    @media (max-width: 600px) {
        padding-top: 0 !important;
    }
}
/* END HELPER CLASSES */
.slider-images {
    position: relative;
    overflow: hidden;
    height: 100%;
    img {
        max-width: 100%;
        object-fit: contain;
        position: absolute;
    }

    figure {
        position: absolute;
        top: 0;
        left: 0;

        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin: 0;

        opacity: 0;
        transition: opacity 2s ease-in-out;
        width: 100%;

        &:first-child {
            position: relative;
        }

        &.active {
            opacity: 1;
        }
    }
}

.bio-images {
    position: relative;
    overflow: hidden;
    min-height: 75vh;

    img {
        max-width: 100%;
        height: 80vh;
        object-fit: contain;
    }

    figure {

        position: absolute;
        top:0;
        left:0;

        opacity: 0;
        transition: opacity 2s ease-in-out;
        width: 100%;

        &:first-child {
            position: relative;
        }

        &.active {
            opacity: 1;
        }
    }
}