/*
Theme Name: profitherm
Template: twentytwentyfive
Author: ESENTiS S. Zingg
Author URI: https://esentis.ch
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.0
Version: 1
*/

/*
Daten
=====

Profitherm Hauptfarbe:               #e0600b
Inhaltsbreite:                       1200px
Limit für Burger-Menu:                950px
Limit für mobile Ansicht (Landscape): 700px
*/



/* ###################################################################################
   Globale Variablen
*/

 :root{
    --wp--preset--color--profitherm-accent: #e0600b;
    --wp--preset--color--profitherm-accent3: #c03000;
    --wp-gutter: clamp(70px, 10xv ,140px); 

    --es-responsive-limit: 950px; /* Limit für Burger-Menu */
    --es-mobile-limit: 700px; /* Limit für mobile Ansicht */
}



/* ###################################################################################
   Globale styles
*/

/* Bild Zentrierung */
.center-image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Padding bei schmaler Ansicht */
@media (max-width: 700px) {
    .has-global-padding{
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
}

.es-title-orange h1
{
    font-size: 1.2em !important;
    font-weight: bold !important;
    color: var(--wp--preset--color--profitherm-accent) !important;
}

/* ####################################################################################
   Image Slider
*/
.swiper-button-prev,
.swiper-button-next
{
    border-radius: 50px 50px 50px 50px !important;
    width: 32px !important;
    height: 32px !important;
    background-color: rgba(250,80,0,0.5) !important;
    top: 90% !important;
}

.gslider-image-slider-wrapper
{
    margin-bottom: 0px !important;
}


/* ####################################################################################
   Allgemeine Buttons
*/

.wp-block-button a
{
    border-radius: 5px !important;
    font-weight: bold !important;
    font-size: 0.8em !important;
    padding: 3px 10px !important;
    color: var(--wp--preset--color--profitherm-accent) !important; 
    background-color: white !important;
    border: 1px solid  var(--wp--preset--color--profitherm-accent) !important;
}

.wp-block-button a:hover
{
    background-color: var(--wp--preset--color--profitherm-accent) !important;
    color: white !important;
    transition: 0.3s;
}


/* für toggle buttons (z.B. Filter) */
.wp-block-button.es-filter-active a
{
    background-color: var(--wp--preset--color--profitherm-accent) !important;
    color: white !important;
    border: 1px solid  var(--wp--preset--color--profitherm-accent) !important;
}



/* standard inline Links */

.es-link-container a,
.es-link-container p
{
    text-decoration: none !important;
    font-weight:400 !important;
    font-size: 0.9em !important;
    padding: 4px 0px 0px 0px !important;
    margin:0 !important;
}

.es-link-container a:hover
{
    color: var(--wp--preset--color--profitherm-accent3);
    font-weight:600 !important; 
    text-decoration: underline !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}


/* Footer inks */

.es-footerlinks-container,
.es-footerlinks-container a
{
    text-decoration: none !important;
    font-weight:normal !important;
    font-size: 1em !important;
    
}

.es-footerlinks-container a:hover
{
    text-decoration: none !important;
    font-weight:600 !important;
    color: lightgray !important;
}



/*###################################################################################
  Bild Captions rechts unten mit Hintergrund
*/
.es-link-image .wp-element-caption
{
    position: absolute !important;
    color: white !important;
    font-size: 1em !important;
    font-weight: bold !important;
    right: 0px !important;
    bottom: 20px !important;
    padding: 5px 15px !important;
    margin-right: -0px !important;
    background-color: rgba(55,55,55,0.8) !important;
}


/*###################################################################################
  Team bilder Grid und Modal einzeln
*/
.es-team-image .wp-element-caption
{
    position: absolute !important;
    color: white !important;
    font-size: 0.8em !important;
    font-weight:bolder !important;
    right: -10px !important;
    bottom: 30px !important;
    padding: 0px 10px !important;
    margin: 0px !important;
    background-color:var(--wp--preset--color--profitherm-accent) !important;
}


.es-modal.active .wp-element-caption
{
    font-size: 1.2rem !important;
    left: 0px !important;
    bottom: 0px !important;
    padding-left: 20px !important;
}


.es-team-picture-container
{
    display: flex;
    justify-content: center;  /* horizontal */
    align-items: center;      /* vertikal */
    position: relative !important;
    padding: 0px 0px 25px 0px!important;
    margin: 0px;

    /* border: 1px solid blue !important; */ 
}


.es-modal.active img{
    width: 100vw !important;
    height: 100% !important;
    object-position: center center; 
    /* border:1px yellow solid !important; */
}


/* Beschreibung unter halb bild nur im Modal anzeigen */

.es-team-desc
{
    display: none
}

.es-modal.active .es-team-desc
{
    display: block;
    padding: 20px; 
}



.es-team-card {
    cursor: pointer;
    text-align: center;
}

.es-modal {
    display: none;
    position: fixed;
    left:10px;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 9999;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: background 0.3s ease, opacity 0.3s ease;
}

.es-modal-content {
  
    display: flex;
    flex-direction: column;
    position: relative;
    background: white; 
    width: min(700px, 90%);
    margin: 5% auto;
    padding: 0px;
    border-radius: 2px;
    z-index: 10000; /* optional */
overflow: hidden;
}

.es-modal.active {
    display: block;
    opacity: 1;
    pointer-events: all;
    background: rgba(0,0,0,0.6);
}


.es-close
{
    font-size: 2em !important;
    font-weight: norlmal !important;
    cursor: pointer;
    padding: 0px 20px !important;
    margin:0px 0px 0px 0px !important;
    /* border: 1px solid blue; */
}



/* Modal Inhalt 
   Wird in JS gesetzt, hier nur allgemeine Styles für Bilder und Text 

add_action('wp_footer', function () {
    ?>

    <div id="es-modal" class="es-modal">
        <div class="es-modal-content">
            <span class="es-close">&times;</span>
            <div id="es-modal-body">
            ...............................................
            ... Modal Inhalt wird hier per JS eingefügt ...
            ...............................................
            </div>
        </div>
    </div>

    <?php
});

*/



/* ###################################################################################
   Header 
*/

/* -------------------------------------------------------
Nav-Menü Container sichtbarkeit und Style*/

.wp-block-navigation__responsive-container
{
    display: flex !important;
    width: 100% !important;
    position: relative;
    background: none !important;
    padding: 0px !important;

}

.wp-block-navigation__responsive-open
{
    display: flex !important;
    width: 100% !important;
    background-color: #e0600b !important;
}

    @media (max-width: 950px) 
    {
        .wp-block-navigation__responsive-container:not(.is-menu-open)
        {
            display: none !important;
        }

        /* Style des geöffneten modalen Menüs */
        
        .wp-block-navigation__responsive-dialog
        {
            position: absolute !important;
            padding: 0 !important;
            top: 0px !important; 
            display: flex !important;
            align-items: flex-start !important; 
        }
    }



/* ------------------------------------------------------- */
/* Vollbild-Overlay für das geöffnete Burger Menü */

.wp-block-navigation__responsive-container.is-menu-open
{
    position: fixed !important; 
    top: 0px;
    left: 0px !important;
    right: 0px !important;
    width: 100% !important;
    height: 100vh;  /*  100% der Bildschirmhöhe */
    
    /* Der wichtigste Teil: Alles überlagern */
    z-index: 999999 !important; 
    
    /* Hintergrund-Design */
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(10px); 

    display: flex; 
    align-items: flex-start !important; 

    flex-direction: column; 
    justify-content: center; 
    transform: 1.5s ease-in-out; 
}


/* Logo und Menu */

/*
.header-container
{
    height: 98px !important; 
}
*/

.titel-logo
{
    width: 250px;
    padding-top: 12px;
    padding-bottom:10px;
}

@media (max-width: 700px) {
    .titel-logo{
        padding-bottom: 4px;
        padding-left: 0px !important;
        width: 200px;
    }
}


/* ###################################################################################
   ###################################################################################
   Header und Navigation
*/





/* -------------------------------------------------------
   Seiten Banner
*/

/* Banner auf Standard Seiten (nicht Startseite) über die volle Breite ziehen und zentrieren */
/* Blocck muss mit Anker #es-banner versehen werden */

#es-banner
{
    margin-left: calc(50% - 50vw);
    padding:0px !important;
    width: 100vw;
    /* border: 1px solid gray !important; */
}

/* Höhe des Banners (feste Höhe) */

.es-banner-block figure
{
    height: 150px !important;      
}


.es-banner-block figure img
{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;  
    /* Optional: Wo soll das Bild fixiert sein? (z.B. Kopf nicht abschneiden) */
    object-position: top center; 
}

/* Höhe des Banners (variable Höhe) */

.es-banner-block-var figure
{
    height: 350px !important;      
}
    @media (max-width: 950px) 
    {
        .es-banner-block-var figure
        {
            height: 250px !important;      
        }
    }

    @media (max-width: 700px) 
    {
        .es-banner-block-var figure
        {
            height: 150px !important;      
        }
    }

.es-banner-block-var figure img
{
   width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;  
    /* Optional: Wo soll das Bild fixiert sein? (z.B. Kopf nicht abschneiden) */
    object-position: bottom center; 
}








/* -------------------------------------------------------
öffnen Burger Menu Sichtbarkeit und Style*/

.wp-block-navigation__responsive-container-open, 
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close, 
.wp-block-navigation__responsive-container-close svg
{ 
    width: 35px !important; 
    height: 35px !important;
    color:#e0600b !important;
}

    @media (max-width: 950px)
    {
        /* öffnen Burger */
        .wp-block-navigation__responsive-container-open,
        .wp-block-navigation__responsive-container-open svg
        {
            display: flex !important;
            position: relative;
            margin-bottom: 15px !important;
            background: none !important;
        }

        /* schliessen Kreuz */ 
        .wp-block-navigation__responsive-container-close, 
        .wp-block-navigation__responsive-container-close svg
        {
            top: 25px !important;
            right: 13px !important;
        }
    }

/* ------------------------------------------------------- */
/* Font für die Navigation */

.wp-block-navigation-item__label
{
    /* font-family: 'Roboto', sans-serif !important; */
    font-weight: normal !important;
    font-size: 1.2rem !important;
    text-decoration: none !important;
    color: #303030 !important;
    padding: 0px 10px 0px 2px !important;
}

/* Fokusrahmen beim Klicken unterdrücken aber mit Tastatur anzeigen */
.wp-block-navigation__responsive-container-content *:focus
{
    outline: none !important;
    box-shadow: none !important;
}

.wp-block-navigation__responsive-container-content *:focus-visible
{
    outline: 2px solid gray !important;
    outline-offset: 2px;
}

    @media (max-width: 950px)
    {
        .wp-block-navigation-item__label
        {
            color: white !important;
            padding: 5px 0px 5px 0px !important;            
        }

        .wp-block-navigation__responsive-container-content
        {
            display: flex !important;
            top: 0 !important;
            width: 100% !important;
            align-items: flex-start !important;
        }

        .wp-block-navigation__container
        {
            width: 70% !important;    
            padding: 20px !important;
        }

        .main-nav 
        {
            display: flex !important;
            padding: 8px 0px 0px 0px !important;
            margin: 0px 0px 10px 0px !important;
            align-items:start !important;
            width: 100% !important; 
            border-top: 1px solid rgb(177, 176, 176) !important;
        }

        .main-nav > a > span 
        {
            font-weight: bold !important;
            font-size: 1.2rem !important;
            text-decoration: none !important;
            color: var(--wp--preset--color--profitherm-accent) !important;
            padding: 0 !important;
        }
    }

/* Haupmenu Items (Links <a>) */
.main-nav > a
{
    padding: 8px 4px !important; 
    margin-bottom:20px;
    border-left: solid 2px var(--wp--preset--color--profitherm-accent) !important;
}

    @media (max-width: 950px)
    {
        .main-nav > a
        {
            padding: 2px 10px !important; 
            margin-bottom:10px;
            border: none !important;
        }

        .wp-block-navigation__responsive-dialog
        {
            top: 80px;
            display: flex !important;
            width: 100% !important;
            margin-left: 0 !important;
            padding-left: 0px !important;
            align-items: flex-start !important;
            text-align: left !important;
        }
    }

.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__label:hover,
.wp-block-navigation-item__content:hover span
{
    /* background-color: #d0d0d0 !important; */
    background-color: var(--wp--preset--color--profitherm-accent);
    text-decoration: none !important;
    color: white !important;
    transition: 0.1s;
}


/* Border um den Submenü Block (nur für Desktop) */ 
.wp-block-navigation__submenu-container
{
    border: 1px solid gray !important;
    width: 220px !important;
}

    @media (max-width: 950px)
    {
        .wp-block-navigation__submenu-container
        {
                border: none !important;
        }

        
        .wp-block-navigation__submenu-container > li > a
        {
                padding: 5px 5px !important;
                margin-left: 20px !important;
        }
    }


/* ###################################################################################
   ###################################################################################
   Banner auf standard Seiten
*/

#es-banner-slider figure
{
    height: 150px !important;      /* Oder eine beliebige feste Höhe */

}




/* ###################################################################################
   ###################################################################################
   Slider auf Startseite
*/

/* Bild auf Höhe anpassen und in der breite schneiden */

.flexi-content-item figure
{
    height: 350px !important;      /* Oder eine beliebige feste Höhe */
    width: 100% !important;        /* Volle Breite des Eltern-Elements */
    position: relative;
}


@media (max-width: 950px) {
    .flexi-content-item figure
    {
        height: 180px !important;      /* Oder eine beliebige feste Höhe */
    }
}


.flexi-content-item figure img
{
    width: 100% !important;
    height: 100% !important;
    
    /* Der magische Teil: */
    object-fit: cover !important;  
    
    /* Optional: Wo soll das Bild fixiert sein? (z.B. Kopf nicht abschneiden) */
    object-position: center center; 
}

/* Slider Beschriftung */

.gslider-flexi-content-wrapper .swiper-caption
{
    position: absolute;
    right: 0px !important;
    bottom: 10px;
    border-radius: 0px 0px 0px 0px;
    padding: 5px 15px !important;
    background-color: rgba(155,155,155,0.8) !important;
    color: white;
    z-index: 10;
}

.gslider-flexi-content-wrapper .swiper-caption p {

    color: white !important;
    font-style: normal !important;
} 

@media (max-width: 950px) {
    .gslider-flexi-content-wrapper .swiper-caption
    {
        padding: 2px 5px !important;
        position: absolute;
        bottom: 0px;
        font-size: 0.5em;
    }

    .gslider-flexi-content-wrapper .swiper-caption p
    {
        font-size: 1.5em !important;
    }
}



/* ###################################################################################
   Footer Styling
*/   

footer .footer-block
{
    width: 100% !important;
    max-width: 300px;
}

    @media (max-width: 800px) 
    {
        footer .footer-block
        {
            width: 100% !important;
            max-width: 100%;
        }
    }