/*
Theme Name:   Deep Digital Co
Theme URI:    https://deepdigitalco.com
Description:  Deep Digital Co - Child theme of Twenty Twenty-Five
Author:       Deep Digital Co
Author URI:   https://deepdigitalco.com
Template:     twentytwentyfive
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  deepdigitalco
Tags:         full-site-editing, block-theme, child-theme
*/

/* Fix: allow logo to be resized freely in Site Editor */

* {
    outline: none !important;
    box-sizing: border-box !important;
    scroll-behavior: smooth !important;
    text-decoration: none !important;
}

header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 9;
    background: #111;
    background: rgba(20, 20, 20, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 0;
}

.contact-form .wpcf7-form p {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form .wpcf7-form p br {
    display: none;
}

.contact-form .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
}

.contact-form .wpcf7-form p .wpcf7-form-control {
    width: 100%;
    background: #1c1a1a;
    border: 0;
    border-radius: 10px;
    font-family: Satoshi;
    font-weight: 400;
    font-size: 16px;
    vertical-align: middle;
    color: #fff;
    padding: 20px;
    outline: 0;
    box-shadow: 0 0 0 transparent;
}

.contact-form .wpcf7-form p .wpcf7-form-control.wpcf7-submit {
    background-color: #fff;
    /* Gradient fill that slides in from the left on hover. Inputs can't use
       :before/:after, so we animate background-size instead. */
    background-image: linear-gradient(60.77deg, #8F6DFC 24.23%, #F0D5ED 59.48%, #F4BF01 124.53%);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    color: #111;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 50px;
    cursor: pointer;
    padding: 18px 32px;
    transition: background-size 0.4s ease, color 0.4s ease;
}

.contact-form .wpcf7-form p .wpcf7-form-control.wpcf7-submit:hover {
    background-size: 100% 100%;
    color: #111;
}

/* Gradient button — just the opposite of the default button: the default
   button's :before already holds the gradient, so we only flip it to show by
   default and retract (left-to-right) on hover. !important is required because
   the default-button rule is inlined later in the page and would otherwise win
   (equal specificity, later source order). */
.wp-block-button.gradient-button .wp-block-button__link.wp-element-button:before {
    transform: scaleX(1) !important;
    transform-origin: left center !important;
}

.wp-block-button.gradient-button .wp-block-button__link.wp-element-button:hover:before {
    transform: scaleX(0) !important;
}

.contact-form .wpcf7-form-control.wpcf7-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("./img/menu-dropdown-icon.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center right 20px !important;
    background-size: 15px !important;
    padding-right: 35px !important;
}

.wp-block-navigation__responsive-container {
    display: none !important;
}

.wp-block-navigation__responsive-container-open {
    display: block !important;
}

.wp-block-navigation__responsive-container.has-modal-open {
    display: block !important;
}

.wp-block-post .wp-block-post-featured-image img {
    transition: all 0.3s ease-in-out;
}

.wp-block-post:hover .wp-block-post-featured-image img {
    scale: 1.01;
    /* transform: translateY(-10px); */
}

.hero-sec figure.is-type-video {
    border-radius: 10px;
    overflow: hidden;
}

.wp-block-accordion-heading__toggle:hover {
    color: #979797;
}

.mega-menu>.wp-block-group {
    position: relative;
}

.mega-menu>.wp-block-group a:after {
    content: '';
    position: absolute;
    z-index: 9;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
}

.wp-block-column .is-layout-grid {
    row-gap: 40px;
}

@media screen and (min-width: 1100px) {
    .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
        padding: 4px 15px;
        position: relative;
    }

    .wp-block-navigation__responsive-container-content {
        border: 1px solid #3F3F3F;
        background: #1A1A1A;
        border-radius: 60px;
        max-width: 100%;
        padding: 10px 12px;
    }

    .wp-block-navigation__container {
        gap: 5px;
    }

    .wp-block-navigation-submenu {
        position: relative;
    }

    .wp-block-navigation-submenu .wp-block-navigation-item__content {
        padding-right: 28px;
    }

    .wp-block-navigation-submenu .wp-block-navigation__submenu-icon {
        position: absolute;
        right: 12px;
    }

    header .wp-block-navigation-item .wp-block-navigation-item__content {
        position: relative;
    }

    header .wp-block-navigation-item .wp-block-navigation-item__content:hover:after,
    header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 30px;
        padding: 1px;
        background: linear-gradient(60.77deg, #8F6DFC 24.23%, #F0D5ED 59.48%, #F4BF01 124.53%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: add, add;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

    .wp-block-navigation__responsive-container {
        display: block !important;
    }

    .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    .mega-menu {
        width: 100%;
        min-width: 900px;
        padding: 30px;
        background: #1A1A1A;
        border: 1px solid #3F3F3F;
        border-radius: 40px;
        position: fixed;
        top: 99px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
    }

    /* JS adds .is-open on hover. The high specificity + !important is needed to
       beat the block's own inline "display:none !important". Opens with a
       bottom-to-top slide via the keyframes below. */
    .main-menu .wp-block-group.mega-menu.is-open {
        display: grid !important;
        animation: megaMenuSlideUp 0.35s ease forwards;
    }

    /* Hide the native WP submenu dropdown for the mega-menu item so the rich
       mega panel shows instead of the plain link list. */
    .have-mega-menu .wp-block-navigation__submenu-container {
        display: none !important;
    }
}

@keyframes megaMenuSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media screen and (max-width: 1099px) {
    .nav-row>.wp-block-site-logo {
        order: 1;
    }

    .header-btns {
        order: 2;
        margin-right: 10px !important;
        margin-left: auto !important;
    }

    .main-menu {
        order: 3;
    }

    .wp-block-navigation__container {
        width: 100%;
    }

    header .wp-block-navigation__container .wp-block-navigation-item {
        width: 100%;
        justify-content: center;
        flex-direction: column;
    }

    .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item__content {
        font-size: 16px;
    }

    .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation__submenu-icon {
        position: absolute;
        right: 0;
        background: #1c1a1a;
        font-size: 24px;
        padding: 15px;
        top: 0;
    }

    .wp-block-navigation__container .wp-block-navigation__submenu-icon svg {
        margin-top: -7px;
        margin-left: -7px;
        right: 0;
    }

    .wp-block-navigation__container .wp-block-navigation-submenu {
        position: relative !important;
        background: transparent !important;
        border: none !important;
        padding-top: 9px !important;
    }

    .wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation-submenu .wp-block-navigation-item__content {
        color: #fff;
        font-size: 14px;
    }


}

@media screen and (max-width: 781px) {
    .header-btns {
        position: fixed;
        bottom: 0;
        left: 0;
        background: #111;
        width: 100%;
        padding: 10px 15px !important;
        box-shadow: 0px 0px 20px 0px #464646;
    }

    .header-btns .wp-block-button {
        width: calc(50% - 5px);
    }

    body.wp-singular.page-template-default {
        padding-bottom: 67px;
    }

    .common-sec {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .about-sec>.wp-block-group {
        background-image: none !important;
    }

    .hero-sec .wp-block-columns {
        flex-direction: column-reverse;
    }

    .nav-row>.wp-block-site-logo .custom-logo {
        max-width: 120px;
    }
}