/* Bridge styles so exported WP/Elementor markup lays out correctly in Laravel */
body.wp-theme-hrhub {
    margin: 0;
    font-family: "DM Sans", sans-serif;
    color: #4d4d4d;
    background: #fff;
}

#header-wrapper { margin-bottom: 0 !important; }
#header-wrapper.header-top-absolute { position: relative; z-index: 100; }

.elementor-section { width: 100%; }
.elementor-container { margin-left: auto; margin-right: auto; }

.zmd-main-nav a:hover { opacity: 0.85; }

/*
 * Elementor exported markup often contains `elementor-invisible` for
 * scroll/entrance animations. In WordPress, Elementor's runtime JS removes it.
 * In Laravel we don't fully boot Elementor, so force visibility.
 */
.elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

/*
 * Keep WP theme + Elementor CSS in control for widget styling.
 * Bridge should only fix missing runtime behaviors/layout basics.
 */
.wdt-button {
    text-decoration: none;
}

@media (max-width: 768px) {
    .zmd-main-nav { display: none !important; }
}

.wdt-elementor-container-fluid {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/*
 * Only pages whose first content block has no top padding in Elementor CSS.
 * Service/about/pricing pages already include 150px (or intentional flush layout).
 */
body.elementor-page-213 #header-wrapper:has(.main-title-section-wrapper) + #main,
body.elementor-page-430 #header-wrapper:has(.main-title-section-wrapper) + #main,
body.page-id-3 #header-wrapper:has(.main-title-section-wrapper) + #main {
    padding-top: clamp(48px, 5vw, 90px);
}

.elementor img { max-width: 100%; height: auto; }

/* Fix internal WP theme paths in exported header menus */
#menu-main-menu a[href*="/wp-content/themes/hrhub"] {
    pointer-events: none;
    opacity: 0.5;
}

.zmd-alert-success {
    background: #e7f6ec;
    color: #1b5e20;
    border: 1px solid #b7dfbf;
    padding: 1rem 1.25rem;
    border-radius: 8px;
}

/* Contact form injected in WP pages */
.zmd-contact-form-wrap {
    max-width: 640px;
    margin: 2rem auto;
    padding: 2rem;
    background: #f4f7fd;
    border-radius: 12px;
}
.zmd-contact-form-wrap label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.zmd-contact-form-wrap input,
.zmd-contact-form-wrap textarea {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid #d8e0f0;
    border-radius: 8px;
    font: inherit;
}
.zmd-contact-form-wrap button {
    background: #1268fb;
    color: #fff;
    border: 0;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
}