/*
Theme Name: Startup Bridge ME
Theme URI: https://startupbridgeme.com/
Author: Robert Mataruse
Description: A complete, custom WordPress theme for Startup Bridge ME, designed for business setup consultancy.
Version: 2.0.0
Requires at least: 5.2
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-background, custom-logo, custom-menu, responsive-layout, one-column, two-columns
Text Domain: startupbridgeme
*/

/* --- General Body & Typography --- */
body {
    font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}

/* --- Homepage Specific Styles --- */
.hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('http://startupbridge.me/wp-content/uploads/2025/06/building-300x200.jpg');
    background-size: cover;
    background-position: center;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-bg {
    background-color: #0D2C54;
}

/* --- Dropdown Menu Styles --- */
.sub-menu {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-radius: 0.375rem; /* rounded-md */
    margin-top: 0.5rem; /* mt-2 */
    width: 16rem; /* w-64 */
    z-index: 50;
    border: 1px solid #e5e7eb;
}

.menu-item-has-children:hover > .sub-menu {
    display: block;
}

.sub-menu a {
    display: block;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    color: #374151; /* text-gray-700 */
    white-space: nowrap;
}

.sub-menu a:hover {
    background-color: #F8F9FA; /* bg-brand-gray */
}

/* Custom styles to ensure the Calendly container takes full width and adapts */
        body {
            font-family: "Inter", sans-serif;
            background-color: #f3f4f6; /* Light gray background */
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .header-bg {
            background-color: #1a202c; /* Dark blue-gray for header */
        }
        .footer-bg {
            background-color: #2d3748; /* Slightly lighter dark blue-gray for footer */
        }
        .container-wrapper {
            /* This div ensures the Calendly embed is centered and has some max-width */
            max-width: 1024px; /* Max width for larger screens */
            margin: 0 auto; /* Center the container */
            padding: 1rem; /* Add some padding around the content */
            flex-grow: 1; /* Allow content to grow and fill available space */
        }
        .calendly-embed-container {
            /* This div will hold the Calendly iframe.
               It is set to take full width of its parent. */
            width: 100%;
            /* A minimum height is useful, but data-resize="true" on the Calendly widget
               itself will handle the optimal height dynamically. */
            min-height: 700px; /* Adjust this min-height if Calendly content is very short */
            background-color: #ffffff; /* White background for the tile */
            border-radius: 0.75rem; /* Rounded corners */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Subtle shadow */
            overflow: hidden; /* Hide any overflow */
            margin-bottom: 2rem; /* Add some space before the footer */
        }

        /* Ensure the Calendly widget itself fills its container */
        .calendly-inline-widget {
            width: 100% !important; /* Forces full width within its container */
            height: 100% !important; /* Ensures it uses the full height of the container */
            min-width: 320px; /* Calendly's recommended minimum width for mobile */
            /* The data-resize="true" attribute (added in HTML) will dynamically adjust
               the iframe's height to prevent internal scrollbars.
               So, we don't set a fixed height here directly on .calendly-inline-widget,
               but rather let it fill the calendly-embed-container. */
        }

        /* Responsive adjustments for smaller screens if needed, though Tailwind helps */
        @media (max-width: 768px) {
            .container-wrapper {
                padding: 0.5rem; /* Less padding on small screens */
            }
        }