/*
 Theme Name:   Understrap Child
 Theme URI:    https://understrap.com
 Description:  Understrap Child Theme
 Author:       the Understrap Contributors
 Author URI:   https://github.com/understrap/understrap-child/graphs/contributors
 Template:     understrap
 Version:      1.2.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 Tags: one-column, custom-menu, featured-images, theme-options, translation-ready
 GitHub Theme URI: understrap/understrap-child
*/

html {
    scrollbar-color: #000 #fff;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    font-variant-numeric: lining-nums;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background: #0f0f0f;
    border: 6px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

::selection {
    background: var(--bs-primary);
}

.transition {
    transition: 0.3s all ease-in-out;
}

.grecaptcha-badge {
    scale: 0;
    opacity: 0;
    pointer-events: none
}

/* Pagination - START */
.pagination li {

    .prev-icon {
        scale: -1;
    }

    &:hover {
        svg path {
            fill: var(--bs-white);
        }
    }

    .page-link:focus {
        svg path {
            fill: var(--bs-black);
        }
    }
}
/* Pagination - END */

.line-clamp {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.line-clamp-1 {
    -webkit-line-clamp: 1;
    height: 1lh;
}

.line-clamp-2 {
    -webkit-line-clamp: 2;
    height: 2lh;
}

.line-clamp-3 {
    -webkit-line-clamp: 3;
    height: 3lh;
}

.line-clamp-4 {
    -webkit-line-clamp: 4;
    height: 4lh;
}

.line-clamp-5 {
    -webkit-line-clamp: 5;
    height: 5lh;
}

/* Articles - START */
#articles-section,
#related-posts {
    .post-blog {
        img {
            aspect-ratio: 1;
            object-fit: cover;
            transition: 0.3s ease-in-out;
        };

        .post-arrow {
            opacity: 0;
            visibility: hidden;
            transition: 0.3s ease-in-out;
        }

        @media (width >= 1136px) {
            &:hover {
                img {
                    scale: 1.1;
                }
                .post-arrow {
                    opacity: 1;
                    visibility: visible;
                }

                h2,svg {
                    animation: MoveScaleUpInitial 0.2s forwards, MoveScaleUpEnd 0.2s forwards 0.2s;
                }
            }
        }
    }
}

#single-post {
    .post-image {
        max-height: 600px;
    }
}

.content__wrapper {
    a {
        text-decoration: underline;
    }
    img {
        max-width: 100%;
        object-fit: cover;
        height: auto;
    }
}

/* Articles - END */

h1.entry-title {
    margin-bottom: 1.2rem;
}

/* CF7 Plugin Form - START */
.wpcf7 .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    position: relative;

    label {
        max-width: 100%;
        width: 100%;
    }

    input:not([type="checkbox"]) {
        border-radius: 8px;
        background: #F8F8F8;
        color: #424242;
        padding: 16px 12px;
        border: 1px solid #F8F8F8;
        transition: 0.3s ease-in-out;
        max-width: 100%;
        width: 100%;

        &:hover {
            background: #F0F0F0;
            color: var(--bs-black);
            border: 1px solid #BFBFBF;
        }
        &:focus,
        &:focus-visible {
            border: 1px solid #BFBFBF;
            color: var(--bs-black);
            outline: 0;
        }
    }

    .wpcf7-list-item {
        margin: 0;
        margin-top: 1.2rem;
    }

    .wpcf7-acceptance label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    --checkbox-width: 24px;
    --checkbox-height: 24px;
    --checkbox-background: var(--bs-primary);

    input[type="checkbox"] {
        position: relative;
        -webkit-appearance: none;
        appearance: none;
        border: 0;
        width: var(--checkbox-width);
        height: var(--checkbox-height);

        &:focus-visible {
            outline: 1px solid var(--bs-primary);
        }
    }

    input[type="checkbox"]::before {
        position: absolute;
        width: var(--checkbox-width);
        height: var(--checkbox-height);
        background: #fff;
        border: 1px solid var(--checkbox-background);
        border-radius: 6px;
        cursor: pointer;
        transition: background .3s;
        content: '';
    }

    input[type="checkbox"]:checked::before {
        background: var(--checkbox-background);
    }

    input[type="checkbox"]::before {
        position: absolute;
        width: var(--checkbox-width);
        height: var(--checkbox-height);
        background: #fff;
        border: 1px solid var(--checkbox-background);
        border-radius: 2px;
        cursor: pointer;
        transition: background .3s;
        content: '';
    }

    input[type="checkbox"]:checked::after {
        content: '';
        position: absolute;
        transform: rotate(-45deg);
        top: 7px;
        left: 5px;
        width: 16px;
        height: 8px;
        border: 2px solid #fff;
        border-top-style: none;
        border-right-style: none;
    }

    input.wpcf7-submit {
        width: 100%;
        color: var(--bs-white);
        font-size: 1.6rem;
        margin-top: 1.2rem;
        border-radius: 0.8rem;
        text-align: center;
        justify-content: center;
        -webkit-appearance: none !important;
        appearance: none !important;
        background: var(--bs-black);
        
        &:disabled {
            background: var(--bs-black);
        }

        &:hover {
            color: var(--bs-white);
            background: var(--bs-black);
        }
        
        &:focus,
        &:focus-visible {
            border: 1px solid var(--bs-black);
            color: var(--bs-black);
            background: var(--bs-white);
            outline: 0;
        }
    }
    
    .wpcf7-spinner {
        margin: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50%;
    }
    
    /* Common styles for .wpcf7-response-output */
    .wpcf7-response-output {
        border: none !important;
        font-size: 1.2rem;
        border-radius: 32px;
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1.2rem;
    
        @media (width >=1250px) {
            font-size: 1.5rem;
            max-width: 80%;
            margin: 0rem auto;
        }
    }
    
    /* Specific styles for different form states */
    &.invalid .wpcf7-response-output,
    &.unaccepted .wpcf7-response-output,
    &.payment-required .wpcf7-response-output {
        background: rgba(198, 0, 34, 0.1);
        color: #C60022;
    }
    
    .wpcf7-response-output {
        background: rgba(0, 158, 60, 0.1);
        color: #009E3C;
    }
    
    .wpcf7-response-output::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='23' viewBox='0 0 22 23' fill='none'%3E%3Crect x='1' y='1.5' width='20' height='20' rx='5' stroke='%23009E3C' stroke-width='1.5'/%3E%3Cpath d='M8.5 11L10.5 13L14.5 9' stroke='%23009E3C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        width: 25px;
        height: 25px
    }
    
    &.invalid .wpcf7-response-output::before {
        content: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 18.4261C2 17.8187 2.15479 17.2214 2.44975 16.6904L8.63566 5.5558C9.18399 4.56881 10.1381 3.87239 11.2452 3.65096V3.65096C11.7435 3.55131 12.2565 3.55131 12.7548 3.65096V3.65096C13.8619 3.87239 14.816 4.56881 15.3643 5.55581L21.5502 16.6904C21.8452 17.2214 22 17.8187 22 18.4261V18.4261C22 20.3999 20.3999 22 18.4261 22H5.57391C3.60009 22 2 20.3999 2 18.4261V18.4261Z' stroke='%23C60022' stroke-width='1.5'/%3E%3Cpath d='M12 9.5L12 13.5' stroke='%23C60022' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16.5L12 17' stroke='%23C60022' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        width: 25px;
        height: 25px
    }
}
/* CF7 Plugin Form - END */

/* 404 page - START */
.error-404 {
    height: 60dvh;
    display: grid;
    place-content: center;
}
/* 404 page - END */