/* ========================================================================
   Swedish Paleo – Mobilheader (≤960 px)
   Pluginets egen mobilheader, temabytet steg 3 (docs/tema-byte/PLAN.md).
   Måtten är uppmätta från temats header live 2026-10-10 (390 px):

   1. Dölj temats header när den nya är aktiv
   2. Headern (130 px, sandfärgad halvgenomskinlig, 40 px luft under)
   3. Logotyp (176 px/top 25 upp till 960, 140 px/top 15 upp till 640)
   4. Sökikon och hamburgare (inloggad: top 47/45; utloggad: top 81/79,
      under pillret)
   5. Pillret "Bli medlem" / "Logga in" (utloggad, top 14/right 12)
   6. Header-gapet: samma body-klasser som förut nollar luften under
   ======================================================================== */

.sp-mh {
    display: none;
}

@media (max-width: 960px) {

    /* === 1. DÖLJ TEMATS HEADER === */
    body.sp-new-mobile-header .header {
        display: none !important;
    }

    /* === 2. HEADERN === */
    .sp-mh {
        display: block;
        position: relative;
        box-sizing: border-box;
        height: 130px;
        padding: 10px 0;
        margin: 0 0 40px;
        background: rgba(250, 249, 247, 0.85);
    }

    /* === 3. LOGOTYP === */
    .sp-mh-logo {
        position: absolute;
        top: 25px;
        left: 0;
        right: 0;
        width: 176px;
        margin: 0 auto;
        z-index: 2;
        display: block;
        line-height: 0;
    }

    .sp-mh-logo img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* === 4. SÖKIKON OCH HAMBURGARE === */
    .sp-mh-search {
        position: absolute;
        left: 15px;
        top: 47px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .sp-mh-search img {
        display: block;
        width: 40px;
        height: 40px;
    }

    .sp-mh-search:focus {
        outline: none;
    }

    .sp-mh-search:focus-visible {
        outline: 2px solid #3D5F42;
        outline-offset: 2px;
    }

    .sp-mh .sp-mm-trigger {
        top: 45px;
        right: 10px;
    }

    body:not(.logged-in) .sp-mh-search {
        top: 81px;
    }

    body:not(.logged-in) .sp-mh .sp-mm-trigger {
        top: 79px;
    }

    /* === 5. PILLRET (UTLOGGAD) === */
    .sp-mh-cta {
        position: absolute;
        top: 14px;
        right: 12px;
        z-index: 3;
    }

    .sp-mh-cta a {
        display: block;
        box-sizing: border-box;
        padding: 11px 16px;
        border: 0;
        border-radius: 999px;
        background: var(--sp-cta-bg, #7a9e4e);
        color: #fff;
        font-family: 'Proxima Nova Semibold', proxima_nova_semibold, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600;
        text-align: center;
        text-decoration: none;
        transition: background 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .sp-mh-cta a:active {
        background: var(--sp-cta-hover, #6b8c43);
    }

    .sp-mh-cta a:focus-visible {
        outline: 2px solid #3D5F42;
        outline-offset: 2px;
    }

    .sp-mh-cta-login {
        display: none !important;
    }

    html.sp-kand .sp-mh-cta-medlem {
        display: none !important;
    }

    html.sp-kand .sp-mh-cta-login {
        display: block !important;
    }

    /* === 6. HEADER-GAPET === */
    body.page-template-template-sp-fullwidth .sp-mh,
    body.sp-ra-page .sp-mh,
    body.sp-as-page .sp-mh,
    body.sp-sp-page .sp-mh,
    body.sp-veckomeny-active .sp-mh,
    body.single-sp_veckomeny .sp-mh,
    body.sp-vm-has-hero .sp-mh {
        margin-bottom: 0;
    }
}

@media (max-width: 640px) {
    .sp-mh-logo {
        width: 140px;
        top: 15px;
    }
}