/*
Theme Name: Twenty Twenty-Five Child Theme for GTGroup
Theme URI: https://gtgroup.com
Author: Able
Author URI: https://skill-sync.pro
Description: A custom child theme for Twenty Twenty-Five.
Template: twentytwentyfive
Version: 1.0.0
Text Domain: twentytwentyfive-child
*/

/* Config */
:root {
    --gt-btn-arrow-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.471 2.10526L1.25483e-07 2.10526L0 8.74228e-07L20 0V20H17.8947V3.65954L1.68875 19.9681L0.182793 18.4961L16.471 2.10526Z' fill='currentColor'/%3E%3C/svg%3E");
}


/* - Utils */
/* -- Display */
.d-none {
    display: none !important;
}

@media (min-width: 992px) {
    .d-lg-none {
        display: none !important;
    }

    .d-lg-flex {
        display: flex !important;
    }
}

/* -- Width */
.max-w-none {
    max-width: none;
}

/* -- Padding */
.p-0 {
    padding: 0;
}

.global--content-size--w-100 {
    --wp--style--global--content-size: 100%;
}

/* -- Grid */
.grid-minmax-240px-1fr {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Gutenberg Overrides */
/* @media (min-width: 782px) {
    .wp-block-columns {
        flex-wrap: wrap !important;
    }
} */

/* -- Text */
.no-wrap-text {
    white-space: nowrap;
}

.no-wrap-text.overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.word-break-normal {
    word-break: normal;
}

.word-spacing-next-line {
    word-spacing: 9999px;
}

.text-wrap-balance {
    text-wrap: balance;
}

.text-truncate {
    white-space: normal!important;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

.text-truncate-heading-lines-2 {
    height: calc(1em * 1 * 2); /* headings lh = 1 */
    -webkit-line-clamp: 2
}

.text-truncate-p-lines-3 {
    height: calc(1em * 1.725 * 3); /* paragraphs lh =~ 1.725 */
    -webkit-line-clamp: 3
}


/* -- Image */
.w-100.wp-block-image img { /* TODO: ?move to theme.json */
    width: 100%;
}


/* Header */
header.wp-block-template-part {

    .wp-block-site-logo {
        position: relative;
    }
    
    .custom-logo-link:after {
        content: '';
        right: 0;
        height: 1px;
        position: absolute;
        background: black;
        left: calc(120px + 3rem); /* 120px = logo.width */
        top: 49.5%;
    }
    
    .custom-logo-link:before {
        content: '';
        right: 0;
        width: 1px;
        height: 100%;
        position: absolute;
        background: black;
    }
    
    /* Responsive Menu move from 600 -> 992 */
    @media (max-width: 992px) {
        .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
            display: none !important; 
        }
    
        .wp-block-navigation__responsive-container-open {
            display: flex !important;
        }
    
        .wp-block-navigation__responsive-container:not(.is-menu-open) {
            display: none !important;
        }
    }
}

/* Button */
/* -- Fill */
/* -- styles.elements.button :hover doesn't work - added in styles.blocks.core/button.css */
/* -- https://github.com/WordPress/gutenberg/issues/55359 */
.wp-element-button:after {
    content: '';
    mask-image: var(--gt-btn-arrow-icon);
    mask-position: center center;
    mask-repeat: no-repeat;
    color: inherit;
    background-color: currentColor;
    width: 1em;
    height: 1em;
    margin-inline-start: .75em;
    display: inline-block;
}

/* -- Outline */
/* --- Move from Editor to theme.json */
.wp-block-button.is-style-outline a {
    border: none;
    padding: 0.25rem 0;
}

.wp-block-button.is-style-outline a:before,
.wp-block-button.is-style-outline a:after {
    content: '';
    background: var(--wp--preset--color--gt-black);
    mask: none;
}

:is(.btn-line-left, .btn-line-right) a {
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
    column-gap: 2em;
    transition: all .1s linear;
    
    &:hover {
        column-gap: 1em;
    }
}

.btn-line-left a:before,
.btn-line-right a:after{
    width: 100%;
    height: 1px;
}

.btn-line-left a:after,
.btn-line-right a:before {
    content: '';
    width: 1px;
    height: 1em;
    position: absolute;
    left: 0;
    margin-inline-start: auto;
}

.btn-line-right a:before {
    left: auto;
    right: 0;
}
.btn-line-right a:after {
    margin-inline-start: auto;
}

/* Select (all Select Dropdowns) */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--wp--preset--color--gt-white);
    border: 1px solid transparent; /* var(--wp--preset--color--gt-gray); */
    padding: 0.5em 2.5em 0.75em 1em;
    cursor: pointer;
    line-height: 1.5;
    box-sizing: border-box;
    border-radius: 0;
    height: auto;

    font-family: var(--wp--preset--font-family--sweet-sans-pro);
    font-weight: 400;
    font-size: 20px;
    color: var(--wp--preset--color--gt-black);

    background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0.639954L6 5.63995L1 0.639954' stroke='%23010101' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1em center;
    background-size: 12px 7px;

    &::-moz-focus-inner {
        border: 0;
    }
}

select:hover {
    border-color: var(--wp--preset--color--gt-black);
}

select:focus {
    outline: none;
    border-color: var(--wp--preset--color--gt-blue);
    box-shadow: 0 0 0 1px var(--wp--preset--color--gt-blue);
}

select::-ms-expand {
    display: none;
}

/* Blocks & Patterns */
/* -- Blockera also */
:is(
    .image-text-data-pattern,
    .wp-block-columns.wp-block-columns.image-text-data-pattern
) {

    &.reversed {
        background-color: var(--wp--preset--color--gt-white) !important;
        flex-direction: row-reverse;
    }
}

/* -- Tabs */
.tab-item {
    display: block;
    cursor: pointer;
}

.tab-item-title:has(:checked),
.wp-block-heading.blockera-block.tab-item-title:has(:checked) {
    font-weight: 600 !important;
}

.tab-item-title input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.tab-content {
    display: none; 
}

.tabs:has(#tab-1:checked) .tab-content:nth-of-type(2) { display: block; }
.tabs:has(#tab-2:checked) .tab-content:nth-of-type(3) { display: block; }
.tabs:has(#tab-3:checked) .tab-content:nth-of-type(4) { display: block; }
.tabs:has(#tab-4:checked) .tab-content:nth-of-type(5) { display: block; }
.tabs:has(#tab-5:checked) .tab-content:nth-of-type(6) { display: block; }


/* Projects */
.project-stage {
    position: relative;
    --project-stage-lines-width: 3px;

    &:before {
        content: '';
        position: absolute;
        bottom: .5rem;
        /* width: calc(100% - var(--project-stage-lines-width) * 2); */
        width: 100%;
        height: 3rem;
        border: var(--project-stage-lines-width) solid var(--wp--preset--color--gt-black);
        border-block-width: 0;
    }

    .wp-block-columns  {
        overflow-x: auto;
        flex-wrap: nowrap !important;

        &:after {
            content: '';
            position: absolute;
            bottom: calc(.3rem + 1.5rem);
            width: calc(100% + var(--project-stage-lines-width) * 2);
            height: var(--project-stage-lines-width);
            background: var(--wp--preset--color--gt-black);
        }

        .wp-block-image {
            position: relative;
            z-index: 1;
        }
    }

    @media (max-width: 991px) {
        &:after {
            content: 'Scroll horizontally';
            width: 100%;
            text-align: center;
            top: calc(100% + 1em);
            opacity: .5;
            position: absolute;
        }
        
        .wp-block-column {
            min-width: 234px;
        }
    }
}

.bg-like-ps {
  background-image: linear-gradient(45deg, #EBEBEB 25%, transparent 25%), linear-gradient(-45deg, #EBEBEB 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #EBEBEB 75%), linear-gradient(-45deg, transparent 75%, #EBEBEB 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
}

/* Blog Home: 3 cols */
.posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    
    @media (min-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--wp--preset--spacing--50);
    }
    
    @media (min-width: 1200px) {
        grid-template-columns: repeat(3, 1fr);
    }

    &:where(.is-layout-flow) > :first-child {
        margin-block-start: var(--wp--preset--spacing--30);
    }

    .posts-grid-tags-categories {
        position: absolute;
        top: 0;
        z-index: 1;
        width: 100%;
    }

    .wp-block-post-featured-image img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* -- gtgroup-blog-filters-wrapper */
.gtgroup-blog-filters-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Google Map */
.google-map > *{
    height: 100% !important;
    
    @media (max-width: 991px) {
        height: 500px !important;
    }
}

.google-map-max-w-none > * {
    max-width: none;
}

.leaflet-popup .leaflet-popup-content h6 {
    white-space: nowrap;
    font-family: var(--wp--preset--font-family--martel);
    font-size: large;
    margin-bottom: .4em;
}

.leaflet-popup .leaflet-popup-content {
    text-align: left;
    margin: 1em 1.5em;
}

.leaflet-popup-content-wrapper {
    background: rgba(175 228 244 / .75);
    border-radius: 0;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .2);
}

.leaflet-popup-tip-container {
    display: none;
}

/* Projects Loop */

.projects-loop li:nth-child(even) .project-layout {
    flex-direction: row-reverse;
    background-color: var(--wp--preset--color--gt-white) !important;

    .wp-block-read-more.wp-element-button.blockera-block  {
        background-color: var(--wp--preset--color--gt-blue) !important;
        color: var(--wp--preset--color--gt-black) !important;

        &:hover {
            background-color: var(--wp--preset--color--gt-black) !important;
            color: var(--wp--preset--color--gt-white) !important;
        }
    }
}

.projects-loop .project-layout .gtgroup-acf-field-output {
    font-family: var(--wp--preset--font-family--league-gothic) !important;
    font-size: var(--wp--preset--font-size--xxx-large) !important;
    white-space: nowrap;
    text-align: center;
}

/* Team Members Loop */
.team-member-layout {
    .gtgroup-acf-field-output {
        font-family: var(--wp--preset--font-family--sweet-sans-pro) !important;
        font-weight: 100 !important;
        font-style: normal !important;
        font-size: var(--wp--preset--font-size--large) !important;
    }

    &:hover .team-member-info {
        opacity: 1;
    }
}

.team-member-info  {
    position: absolute;
    inset: 0;
    padding-bottom: 4rem;
    opacity: 0;
    transition: opacity .3s linear;
}

.team-member-info > .wp-block-group {
    overflow-y: auto;
    height: 100%;
}

/* Careers */
#vacancies-list .wp-block-post .is-layout-grid {
    @media (max-width: 478px) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: .5rem;
    }
}

/* CF7 */

.cf-7-contact-us {
    
    .wpcf7-form-control {
        background: transparent;
        border: 1px solid var(--wp--preset--color--black);
        border-width: 0 0 1px;
        min-height: 2rem;
        padding: .5em .5em;
        margin-bottom: 1em;
    
        &:focus {
            border: none;
            outline: none;
            background: rgba(1 1 1 / .05);
        }
    }

    .wpcf7-textarea {
        resize: vertical;
    }

    small {
        font-size: var(--wp--preset--font-size--small);
    }

    .wpcf7-submit {
        background-color: var(--wp--preset--color--gt-blue);
        border: none;
        color: var(--wp--preset--color--gt-black);
        padding-top: var(--wp--preset--spacing--20);
        padding-right: var(--wp--preset--spacing--30);
        padding-bottom: var(--wp--preset--spacing--20);
        padding-left: var(--wp--preset--spacing--30);
        font-size: var(--wp--preset--font-size--medium);
        font-family: var(--wp--preset--font-family--sweet-sans-pro);
        
        &:hover {
            color: var(--wp--preset--color--gt-white);
            background-color: var(--wp--preset--color--gt-black);
        }
    }
}

.cf-7-vacancy-apply {
    .wpcf7-form-control {
        width: 100%;
        box-sizing: border-box;
    }
}