/* einstein-saas/public/css/site-header-mobile.css
 *
 * Shared mobile header fixes for all standalone templates (about, contact,
 * features, pricing, integrations, kennisbank, security, feature-detail,
 * etc.) that each copy-paste their own .site-header with a hardcoded
 * 130px logo and no mobile media queries.
 *
 * Include as the LAST stylesheet link in each template <head> so these
 * rules override the inline height:130px on <img> and the
 * `.site-header .logo img { height: 130px !important }` baked into each
 * template's internal <style> block.
 */

@media (max-width: 768px) {
    html, body { overflow-x: clip !important; }
    /* Header base: compact */
    .site-header .header-inner,
    .site-header .nav-inner,
    .site-header .header-container { min-height: 70px !important; padding: 8px 14px !important; gap: 10px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; position: relative !important; }
    /* Logo shrink — covers both inline style="height:130px" and the
       `.site-header .logo img { height: 130px !important }` rules that
       repeat across templates. Specificity + !important beats them. */
    .site-header .logo img,
    .site-header a.logo img,
    .site-header .nav-logo img,
    .site-header a.nav-logo img,
    header.site-header img[src*="logo"],
    header.site-header img[src*="interaip"] {
        height: 56px !important;
        max-width: 50vw !important;
        width: auto !important;
        flex-shrink: 1 !important;
    }
    /* Hide desktop nav items (pages use a dropdown or mobile-toggle) */
    .site-header .nav-links,
    .site-header .nav-menu,
    .site-header .main-nav { display: none !important; }
    /* If there's a mobile-toggle button in this template, show it and
       style it for light headers (dark ink on light bg). */
    .site-header .mobile-toggle,
    .site-header .nav-toggle,
    .site-header .menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px !important;
        height: 42px !important;
        background: rgba(15,23,42,0.08) !important;
        border: 1.5px solid rgba(15,23,42,0.25) !important;
        border-radius: 8px !important;
        color: #0f172a !important;
        font-size: 1.4rem !important;
        line-height: 1 !important;
        cursor: pointer;
        padding: 0 !important;
        flex-shrink: 0 !important;
        margin-left: auto;
        order: 3;
    }
    /* When nav has .open state, show as dropdown overlay */
    .site-header .nav-links.open,
    .site-header .nav-menu.open {
        display: flex !important;
        position: absolute !important;
        top: 72px; left: 0; right: 0;
        background: #ffffff !important;
        flex-direction: column !important;
        padding: 1rem 1.25rem !important;
        gap: 0.9rem !important;
        border-top: 1px solid #e2e8f0;
        border-bottom: 2px solid #a855f7;
        box-shadow: 0 8px 24px rgba(15,23,42,0.12);
        z-index: 200;
        list-style: none !important;
    }
    .site-header .nav-links.open li,
    .site-header .nav-menu.open li { list-style: none; }
    .site-header .nav-links.open a,
    .site-header .nav-menu.open a { color: #1e293b !important; font-weight: 600; display: block; padding: 0.5rem 0; }
    /* Header-actions compact: hide lang + theme, keep login */
    .site-header .lang-btn,
    .site-header .landing-lang-btn,
    .site-header .theme-toggle,
    .site-header .nav-search-btn,
    .site-header .search-btn { display: none !important; }
    .site-header .header-actions,
    .site-header .nav-actions { gap: 8px !important; flex-shrink: 0 !important; order: 4; }
    .site-header .btn-primary,
    .site-header .nav-cta { padding: 0.45rem 0.9rem !important; font-size: 0.8rem !important; white-space: nowrap !important; }
}
@media (max-width: 400px) {
    .site-header .logo img,
    .site-header a.logo img,
    .site-header .nav-logo img,
    .site-header a.nav-logo img,
    header.site-header img[src*="logo"],
    header.site-header img[src*="interaip"] { height: 48px !important; max-width: 48vw !important; }
}
