/* =================================================================
 * Shivtaya — Header Fix CSS
 * Keeps the header visually on top, even though it now lives BELOW
 * <main> in the DOM.
 *
 * RTL-safe: uses logical properties (inset-inline-*) instead of left/right.
 * Installation: append to hello-elementor-child/style.css
 * ================================================================= */

/* Wrapper rendered after the content — visually pinned to the top. */
.shivtaya-header-after-content {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 9999;
    background: var(--header-bg, #fff);
    /* Soft shadow so the floating header separates from the content below. */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Own stacking context, so submenus do not slip behind Elementor sections. */
    isolation: isolate;
}

/* Push the first content block down so it is not covered by the fixed header. */
body.elementor-page {
    /* Fallback 100px, overridden at runtime by JS with the real measured height. */
    padding-block-start: var(--shivtaya-header-h, 100px);
}

/* Skip-link must become visible the moment it receives keyboard focus. */
.skip-link:focus {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    z-index: 100000;
    padding: 12px 24px;
    background: #000;
    color: #fff;
    text-decoration: none;
}

/* Mobile: account for the WP admin bar when a logged-in user is testing. */
@media screen and (max-width: 782px) {
    body.admin-bar .shivtaya-header-after-content {
        top: 46px;
    }
}

@media screen and (min-width: 783px) {
    body.admin-bar .shivtaya-header-after-content {
        top: 32px;
    }
}

/* Prevent layout shift: Elementor headers often carry their own section margins. */
.shivtaya-header-after-content > header.elementor-location-header {
    margin: 0;
}

/* =================================================================
 * Tablet-only Hidden-H1 fix (Elementor-Container .elementor-element-3f75fb4)
 *
 * Container hatte schon "elementor-hidden-desktop" und "elementor-hidden-mobile",
 * also war auf Desktop und Mobile sauber versteckt — aber auf Tablet (768–1024px)
 * sichtbar, was sich auf 1024px-Screenshots als seitlich überlappender H1-Text zeigt.
 *
 * Konsistent zur bisherigen Sichtbarkeitslogik: jetzt auch auf Tablet ausblenden,
 * damit der versteckte H1 nirgendwo visuell stört. Roll-back: diese Regel entfernen.
 * ================================================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .elementor-element.elementor-element-3f75fb4 {
        display: none !important;
    }

    /* Social-Icons Sidebar (PowerPack icon-list 88d6d8b) — Tablet-Lücke schließen.
     * Original-CSS hat nur Mobile (≤767, top:45%, z-index:999) und Desktop (≥1025, anderes Widget).
     * Auf Tablet 768–1024 bleibt das Widget bei top:0 + z-index:99999 → kollidiert mit fixed Header
     * UND überlappt das geöffnete Burger-Dropdown (das bei z-index:9998 liegt).
     * Wir kopieren das Mobile-Verhalten 1:1, damit Tablet konsistent rendert. */
    .elementor-459 .elementor-element.elementor-element-88d6d8b {
        top: 45%;
        z-index: 999;
    }
}

/* =================================================================
 * Burger-Dropdown unter den Header schieben.
 *
 * Das Burger-Dropdown ist .pp-advanced-menu__container.pp-menu-style-toggle
 * mit position:absolute (ohne explizites top). Sein nächster
 * positionierter Ancestor ist jetzt .shivtaya-header-after-content
 * (position:fixed) — also rendert das Dropdown an top:0 dieses Wrappers
 * und überlappt visuell die Header-Navi-Zeile.
 *
 * Mit top:100% startet das Dropdown direkt UNTER dem Header.
 * ================================================================= */
.shivtaya-header-after-content .pp-advanced-menu__container.pp-menu-style-toggle.pp-advanced-menu--dropdown {
    /* Burger-Dropdown am Viewport ausrichten (nicht am Widget-Ancestor).
     *
     * position:fixed → top wird relativ zum Viewport gemessen, nicht zu
     * .elementor-element-c632b55. Damit greift --shivtaya-header-h direkt
     * als Pixel-Wert vom oberen Bildschirmrand.
     *
     * smartmenus.js setzt inline style="top: 37px"; mit !important schlagen wir das. */
    position: fixed !important;
    top: var(--shivtaya-header-h, 100px) !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    width: auto !important;
    margin-top: 0 !important;
}

/* =================================================================
 * Burger-Dropdown — Sub-Arrow (caret-down SVG) gelb färben.
 *
 * Auf ≤767px sind die Pfeile gelb (Widget 77d2ee3 mit fill:#F7C539
 * vererbt sich auf SVG-path). Ab 768 wechselt das sichtbare Burger-
 * Dropdown auf einen anderen Style → Pfeile werden dunkel.
 *
 * Wir erzwingen denselben Gelb-Ton wie auf Mobile, damit die Pfeile
 * auf allen Bildschirmgrößen einheitlich sichtbar bleiben.
 * ================================================================= */
.pp-advanced-menu--dropdown .sub-arrow svg,
.pp-advanced-menu--dropdown .sub-arrow svg path {
    fill: #F7C539 !important;
}