@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Define CSS variables for consistency with Tailwind colors in custom CSS */
:root {
    --color-blue-900: #1e3a8a;
    --color-orange-500: #f97316;
    --color-white: #ffffff;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --bg-white-90: rgba(255, 255, 255, 0.9);
}

/* Custom CSS for the REQUIRED NAV STRUCTURE to avoid injecting Tailwind classes */
.header-nav {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; /* Hidden by default for mobile, JS will toggle, desktop CSS will override */
    flex-direction: column;
}

@media (min-width: 1024px) { /* Equivalent to lg breakpoint */
    .menu {
        display: flex !important;
        flex-direction: row;
        gap: 1.5rem; /* space-x-6 equivalent */
        align-items: center;
        position: static;
        background-color: transparent;
        box-shadow: none;
    }
    .menu .propClone {
        width: auto;
        padding: 0;
        text-align: left;
    }
}

.propClone {
    margin: 0;
}

.submenus {
    display: block;
    padding: 0.5rem 0.75rem;
    color: var(--color-blue-900);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    white-space: nowrap;
}

.submenus:hover {
    color: var(--color-orange-500);
}

/* Mobile menu toggle button */
#pull {
    display: block;
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--color-blue-900);
    line-height: 1;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

@media (min-width: 1024px) { /* Hide hamburger icon on desktop */
    #pull {
        display: none;
    }
}

/* Style for active mobile menu (toggled by JS) */
.menu.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--bg-white-90);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    z-index: 40;
    padding: 1rem 0;
    border-top: 1px solid var(--color-gray-100);
}

.menu.active .propClone {
    width: 100%;
    text-align: center;
    padding: 0.25rem 0;
}

.menu.active .submenus {
    padding: 0.75rem 1rem;
    color: var(--color-blue-900);
}

.menu.active .submenus:hover {
    background-color: var(--color-gray-50);
}

/* General styling for builder elements */
.wp {
    outline: 1px dashed transparent;
    transition: outline-color 0.2s ease-in-out;
}
.wp:hover {
    outline-color: #f97316;
}
.add_myrow > div {
    min-height: 1.5rem;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
 .add_new_elements_rapify, .wp { float: none !important; width: unset !important; }
        .add_new_elements_rapify { display: unset !important; }
        .header-nav ul li { list-style: none !important; }
        p { color: unset !important; }