/* Förhindra radbrytning i sidhuvudsmenyn */
.header-nav .wp-block-navigation-item__content {
    white-space: nowrap !important;
}

/* --- SMART FOOTER GRID --- */

.footer-smart-grid {
    display: grid !important;
    /* Magin: Skapa två lika stora ytterkanter, och en mitten som anpassar sig */
    grid-template-columns: 1fr auto 1fr;
    align-items: start; /* Eller 'center' om du vill ha dem vertikalt centrerade */
    gap: 20px;
    width: 100%;
}

/* 1. Tvinga Loggan till vänsterkanten */
.footer-smart-grid > div:first-child {
    justify-self: start;
    text-align: left;
}

/* 2. Tvinga Infon till mitten */
.footer-smart-grid > div:nth-child(2) {
    justify-self: center;
    text-align: center;
    /* Här kan vi sätta en max-bredd så den inte blir för bred */
    max-width: 100%; 
}

/* 3. Tvinga Menyn till högerkanten */
.footer-smart-grid > div:last-child {
    justify-self: end;
    text-align: right;
}

/* --- MOBIL/BRYTPUNKT --- */
/* När skärmen är mindre än 1000px (justera siffran efter behov) */
@media (max-width: 1050px) {
    .footer-smart-grid {
        /* Byt till en stapel */
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    
    /* Centrera allt på mindre skärmar */
    .footer-smart-grid > div:first-child,
    .footer-smart-grid > div:last-child,
    .footer-smart-grid > div:nth-child(2) {
        justify-self: center;
        text-align: center;
        width: 100%; /* Låt dem ta plats */
    }
    
    /* Om du vill att menyn ska vara vänsterställd eller centrerad på mobil styr du det här */
    .footer-smart-grid > div:last-child {
        justify-content: center; /* Centrera menyn på mobil */
    }
}


/* =========================================
   STICKY FOOTER (Final + Header Fix)
   ========================================= */

/* 1. Sätt spelreglerna på sidans huvudbehållare */
.wp-site-blocks {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

/* 2. Sidfoten: Tryck ner den till botten */
.wp-site-blocks > footer, 
.wp-site-blocks > .wp-block-template-part:last-child {
    margin-top: auto !important;
    width: 100%;
}

/* 3. Sidhuvudet: Ta bort gapet i toppen */
/* Flexbox gör att dolda marginaler blir synliga. Vi tar bort dem från första elementet. */
.wp-site-blocks > *:first-child {
    margin-top: 0 !important;
}


/* =========================================
   GDPR GOOGLE MAP
   ========================================= */

.google-map-placeholder {
    position: relative;
    width: 100%;
    height: 450px; /* Justera höjden efter behov */
    background-color: #f0f0f0; /* Ljusgrå bakgrund */
    background-image: url('https://via.placeholder.com/1200x450/e0e0e0/aeaeae?text=Google+Maps'); /* Valfritt: Byt mot en skärmdump av kartan */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 8px; /* Samma rundning som dina andra element? */
    overflow: hidden;
}

/* Innehållet i rutan (Text & Knapp) */
.google-map-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 8px;
    max-width: 400px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.google-map-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.google-map-content p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 20px;
}

/* Knappen */
.btn-load-map {
    background-color: #000; /* Din accentfärg */
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.btn-load-map:hover {
    background-color: #333;
}

/* När kartan är laddad */
.google-map-placeholder.map-loaded iframe {
    display: block;
    width: 100%;
    height: 100%;
}


/* =========================================
   HERO HYBRID LAYOUT
   Användarens smarta lösning: Omslagsbild i mitten
   ========================================= */

/* --- 1. DESKTOP (Bredare än 781px) --- */
/* Här vill vi att Omslagsblocket ska se ut som en vanlig vit grupp */
@media (min-width: 782px) {
    
    /* Dölj bakgrundsbilden i omslagsblocket */
    .hero-hybrid-layout .hero-cover-inner .wp-block-cover__image-background {
        display: none !important;
    }
    
    /* Dölj den färgade overlayen (filtret) */
    .hero-hybrid-layout .hero-cover-inner .wp-block-cover__background {
        background: transparent !important;
        opacity: 0 !important;
    }
    
    /* Återställ padding och min-höjd så det inte blir jättehögt */
    .hero-hybrid-layout .hero-cover-inner {
        min-height: unset !important;
        padding: 0 !important;
        background: transparent !important; /* Säkerställ transparens */
    }
    
    /* Om du har en vit ruta runt texten inuti omslagsbilden, 
       kan vi behöva ta bort den skuggan/bakgrunden på desktop 
       om du vill att det ska se "rent" ut. 
       Avkommentera nedan om du vill ta bort vit bakgrund på textgruppen på desktop: */
    /*
    .hero-hybrid-layout .hero-cover-inner > .wp-block-group {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    */
}

/* --- 2. MOBIL (Smalare än 781px) --- */
@media (max-width: 781px) {
    
    /* 1. Dölj sidokolumnerna */
    .hero-hybrid-layout > .wp-block-column:nth-child(1),
    .hero-hybrid-layout > .wp-block-column:nth-child(3) {
        display: none !important;
    }

    /* 2. Mittenkolumnen: Breakout (Bryt ut ur global padding) */
    .hero-hybrid-layout > .wp-block-column:nth-child(2) {
        display: block !important;
        position: relative;
        
        /* Magin som ignorerar förälderns padding och går kant-i-kant */
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        max-width: 100vw !important;
        
        padding: 0 !important;
        overflow: hidden; /* Klipper bort ev. millimetrar som sticker ut */
    }

    /* 3. Omslagsblocket: Behållaren */
    .hero-hybrid-layout .hero-cover-inner {
        width: 100% !important;
        height: auto !important;
        min-height: 550px !important; /* Justera höjden på mobilen här */
        padding: 20px !important;
        margin: 0 !important;
        position: relative !important; /* Viktigt för att hålla fast bilden */
    }

    /* 4. BILDEN: Tvinga den till att bete sig som en bakgrund */
    /* Genom att sätta position: absolute slutar den trycka ut bredden */
    .hero-hybrid-layout .hero-cover-inner img.wp-block-cover__image-background {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: unset !important; /* Ta bort begränsningar */
        min-width: 100% !important;
        
        object-fit: cover !important; /* Beskär snyggt */
        z-index: 0; /* Lägg den under texten */
    }
    
    /* 5. Innehållet (Texten): Se till att det ligger ovanpå */
    .hero-hybrid-layout .hero-cover-inner .wp-block-cover__inner-container {
        position: relative !important;
        z-index: 10;
        width: 100% !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}


/* =========================================
   HEADER NAVIGATION BREAKPOINT
   Tvinga fram hamburgaren tidigare än 600px
   ========================================= */

/* Justera 1200px till den bredd där din meny börjar krocka */
@media (max-width: 781px) {
    
    /* 1. Göm den vanliga text-menyn */
    .header-nav .wp-block-navigation__container:not(.wp-block-navigation__responsive-container) {
        display: none !important;
    }

    /* 2. Visa hamburgarknappen (som annars är dold) */
    .header-nav .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
    
    /* 3. Justera positionen på knappen (valfritt) */
    /* Ibland hamnar knappen vänsterställd när man tvingar fram den,
       här kan du tvinga den till höger om det behövs: */
    .header-nav .wp-block-navigation__responsive-container-open {
        justify-content: flex-end; 
    }
}