/*
    Theme Name: TailPress
    Theme URI: https://github.com/jeffreyvr/tailpress
    Author: Jeffrey van Rossum
    Author URI: https://vanrossum.dev
    Description: TailPress is a simple boilerplate WordPress theme with Tailwind CSS.
    Version: 4.0.0
    License: MIT
    License URI: https://github.com/jeffreyvr/tailpress/blob/master/LICENSE
    Text Domain: tailpress
    */

    h2 {
        font-size: 1.125rem;
    }


    body {
        font-family: 'Montserrat';
    }

    /* Header Menu Stlyes */

    .df-main-menu li {
        list-style: none;
        text-decoration: none;
        text-transform: uppercase;
    }

    /* Base link styling */

    /* Underline animation */
    .df-main-menu li a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0;
        height: 2px;
        background-color: #1d1d1b;
        transition: width 0.3s ease;
    }

    .df-main-menu li a:hover::after {
        width: 100%;
    }

    .df-main-menu li a {
        font-weight: bold;
        text-decoration: none;
        transition: color 0.3s ease;
        position: relative
    }



    /* MObile */

    .top-bar a {
        text-decoration: none;
    }

    .menu-bar {
        transition: all 0.3s ease-in-out;
        /* Smooth transition */
    }

    .menu-bar .sub-menu {

        /* Change to block for sliding effect */
        display: none;
        color: #ffffff;
        /* Adjust width as needed */
        padding: 10px 15px 20px 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        /* Start with 0 height */
        overflow: hidden;
        /* Hide overflow content */
        transition: max-height 0.3s ease, opacity 0.3s ease;
        /* Smooth transition */
        /* Start with 0 opacity */
    }

    @media (min-width: 781px) {
        .df-main-menu li:hover {
            color: #e63b2f;
        }

        .menu-bar .sub-menu {
            min-width: 250px;
            /* Change to block for sliding effect */
            position: absolute;
            top: 100%;
            background-color: #1d1d1b;
            left: -20px;
            color: #ffffff;
            /* Adjust width as needed */
            padding: 10px 25px 25px 25px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            max-height: 0;
            /* Start with 0 height */
            overflow: hidden;
            /* Hide overflow content */
            transition: max-height 0.3s ease, opacity 0.3s ease;
            /* Smooth transition */
            opacity: 0;
            /* Start with 0 opacity */
        }

    }



    .menu-bar .dropdown-arrow {
        display: none;
    }

    @media (max-width: 781px) {


        .menu-bar .dropdown-arrow {
            display: block;
        }

        /* Mobile Menu Dropdown */
        .menu-bar .sub-menu.open {
            display: block !important;
        }

        .menu-bar .sub-menu {
            margin-top: .5rem;
            background-color: #ffffff;
            color: #1d1d1b;
            display: none !important;
        }

        .df-main-menu li.menu-item-has-children.active:after {
            content: '';
            position: absolute;
            right: 0;
            width: 50px;
            height: 50px;
            background-size: contain;
            top: 0;
        }

        .df-main-menu li span {

            background-image: url('../tailpress/assets/arrow-down.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: right;
        }

        .df-main-menu li.menu-item-has-children.active span {
            background-image: url('../tailpress/assets/arrow-up.png');
        }

        /* End Mobile Menu Dropdown   */
        .df-main-menu {
            width: 100%;
        }

        .menu-bar {
            position: fixed;
            width: 280px;
            top: 0;
            left: 0;
            height: 100%;
            background: #1d1d1b;
            color: #ffffff;
            z-index: 1000;
            transform: translateX(-100%);
        }

        .menu-bar.open {
            transform: translateX(0);
        }
    }

    #close-menu-toggle {
        display: none;
    }

    #close-menu-toggle.show {
        display: block;
    }


    .overlay {
        background-color: #000000;
        position: fixed;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        display: none;
        opacity: .5;
    }

    .overlay.opened {
        display: block;
    }

    .nav-bar.fixed {
        top: 0;
        left: 0;
        position: fixed;
        width: 100%;
        z-index: 100;
        background: #ffffff;
    }


    /* Carousel */

    .slick-slide {
        max-height: 500px;
    }

    /* Mega Menu  */

    .menu-bar .sub-menu>li {
        margin-top: 15px;
        font-size: 1rem
    }

    .menu-item a {
        text-decoration: none;
    }

    /* Show Submenu on Hover */
    .menu-item-has-children:hover .sub-menu {
        max-height: 500px;
        display: block;
        /* Adjust to the maximum height of your submenu */
        opacity: 1;
        /* Fade in to full opacity */
    }

    /* Show Submenu on Hover */
    .menu-bar .menu-item-has-children {
        position: relative;
    }

    /* Top Bar Menu */
    .site-logo {
        max-width: 250px;
    }

    /* Desktop */

    /* Footer */

    /* General Menu Styles */

    .site-footer .menu-item {
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
    }


    .site-footer .menu-item:hover {
        color: #e63b2f;
    }

    /* Ensure images do not exceed the carousel height */
    .main-carousel img {
        width: auto;
        /* Maintain aspect ratio */
        margin: 0 auto;
        /* Center the images horizontally */
    }

    /* Contact Form Styles */

    .wpcf7 input {
        outline: 0;
        border-bottom: 1px solid #000000;

    }

    .wpcf7 input:focus,
    .wpcf7 input:hover {
        border-bottom: 1px solid red;
    }

    .wpcf7 textarea {
        outline: 1px solid #000000
    }

    .wpcf7 input,
    .wpcf7 textarea {
        padding: 1rem;
        margin-top: 1rem;
        background-color: #ffffff;
    }

    .wpcf7 textarea:hover {
        outline: 1px solid #e63b2f
    }

    .wpcf7-form-control.wpcf7-submit {
        min-width: 225px;
        padding: 15px;
        color: #ffffff;
        border: 2px solid #000000;
        background-color: #000000;
        font-size: 1rem;
        font-weight: bold;
        transition: 0.3s ease;
    }

    .entry-header {
        display: none;
    }

    .wpcf7-form-control.wpcf7-submit:hover {
        background-color: #e63b2f;
    }

    .home-contact {
        flex-wrap: wrap;
    }

    .wpcf7-form input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="range"],
    input[type="date"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="color"],
    select,
    textarea {
        width: 100% !important;
    }