/*
Theme Name: UniBlock Child
Theme URI: https://www.wpzoom.com/themes/uniblock/
Template: uniblock
Description: This is a simple Child Theme.
Author: pstype smart web
Author URI: https://pstype.ch
Version: 1.0
*/

/* Write your custom CSS code below or add it in the Customizer > Additional CSS */

/*
html, body {
    scroll-behavior: smooth;
}

b,
strong {
    font-weight: var(--wp--custom--font-weight--bold) !important;
}
*/

h1 {
    font-size: 2.625em !important;
    font-weight: 400 !important;
}

::selection { color: #f9fafd; background-color: #e69f43; }

/*  Desktop Navigation Outermost Icons Pseudoklassen :hover, :active :focus
-------------------------------------------------------------------------------- */
.wp-block-outermost-icon-block a:hover svg {
    fill: #cf5e3e !important;
}

/*  Navigation Trennstriche
-------------------------------------------------------------------------------- */
.wp-block-navigation {
        padding-top: 0px;
}
.wp-block-navigation .wp-block-navigation-item {
        border-right: 1px solid rgba(35, 44, 57, 0.46);
        padding-right: 15px;
}
/*.wp-block-navigation .wp-block-navigation-item:first-child,*/
.wp-block-navigation .wp-block-navigation-item:last-child {
        border:none;
}
/* Abstand zwischen Navigations Punkten */
.wp-block-navigation__container {
    gap: 15px !important;
}

/*  Mobile Menu open
-------------------------------------------------------------------------------- */
/*  Mittelachse Text-Link unter Logo */
span.wp-block-navigation-item__label {
    display: flex;
    text-align: center;
}

.wp-block-navigation__responsive-container-open {
    color: #232c39;
}
.wp-block-navigation__responsive-container.is-menu-open {
    background-image: linear-gradient(#232c39, #3f5068) !important;
}
.hrmobile {
        border-bottom: 1px solid #60666f !important;
        width: 70%;
        margin-top: 60px !important;
}




/*  Outermost Icons
-------------------------------------------------------------------------------- */
.wp-block-outermost-icon-block a:hover svg { /* Desktop Navigation Icons Pseudoklassen :hover, :active :focus */
    fill: #cf5e3e !important;
}

/*  Button 
-------------------------------------------------------------------------------- */
.wpz-alt-button .wp-block-button__link, .wpz-alt-button.wp-block-button__link {
    color: var(--wp--preset--color--secondary); /*secondary = #232c39*/
}

/* Google Maps einbinden
---------------------------------------------------------------------------- */
.responsiveContainer {
	position: relative;
	padding-bottom: 56%;
	height: 0;
	overflow: hidden;
    filter:grayscale(1.5); /* bewirkt dass Karte grau dargestellt wird */
} 
.responsiveContainer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Video iFrame einbinden
---------------------------------------------------------------------------- */
.responsiveRow {
	position: relative;
	padding-bottom: 56%; /* Video Size */
	height: 0;
	overflow: hidden;
} 
.responsiveRow iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*  Hover Vergoesserung 
-------------------------------------------------------------------------------- */
.card {
    transition: transform 0.75s ease-in-out;
    margin: 0.5em; /* Increased margin since the outline expands outside the element */
}
.card:hover {
    transform: scale(1.1);
}

/*  PopUp | Light Modal Block
-------------------------------------------------------------------------------- */
.wp-block-cloudcatch-light-modal-block { /* Aussenabstand */
  margin-left: 20px;
  margin-right: 20px;
}
div#modal-1-content {
    z-index: 100; /* zeigt PopUp Modal Contact Modal an -- wenn ich auf dem Mobile Menu das [at] waehle */
}
.form-block__message-container.is-type-success {
    font-size: 0.75em;
    color: #cf5e3e;
}






/*
*   Safari Browser 
*   Entfernt sichtbaren Fokusrahmen bei gezielt angesprungenen Ankerzielen
____________________________________________________________________________ */
.no-focus-outline:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  outline-offset: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}




/*  Mobile Einstellungen
-------------------------------------------------------------------------------- */
.has-background .wp-block-navigation__responsive-container-open:hover {
    color: #cf5e3e !important;
}
.has-background .wp-block-navigation__responsive-container-open:focus {
    color: #232c39 !important;
}

@media(max-width:781px) {

    /*  Spacer
    ---------------------------- */
    .sechzehn {
        height: 8vh !important;
    }
    .zwoelf {
        height: 6vh !important;
    }
    .acht {
        height: 4vh !important;
    }

    /*  Mobile Navigation
    --------------------------------- */
    /* Mobile Background */
    div#modal-2 {
        background-color: #e69f43; /* For browsers that do not support gradients */
        background-image: linear-gradient(#e69f43, #cf5e3e);
    }
        
    /* Trenner Linie rechts ausblenden */
    .wp-block-navigation .wp-block-navigation-item {
        border-right: none;
    }

}










/*  Animating Link Underlines
-------------------------------------------------------------------------------- 
.an-underline a {
    position: relative;
    color: #cf5e3e;
    text-decoration: none !important;
}
.an-underline a:hover {
    color: #cf5e3e;
} 
.an-underline a::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    bottom: -3px;
    left: 0;
    background-color: #cf5e3e;
    transform: scaleX(0);
    transition: transform 0.3s ease;
} 
.an-underline a:hover::before {
    transform: scaleX(1);
}
*/

/* Bildnavigation mit Outline
.card {
  outline: solid 1px;
  border-radius: 10px;
  transition: transform 0.75s ease-in-out, outline 0.6s linear;
  margin: 0.5em;
  outline-color: #232c39;
}
.card:hover { 
    outline-width: 5px;
    transform: scale(1.1);
}
  Card Farben
-------------------------------------------------------------------------------- 
.card.hunter { outline-color: #b232cc; }
.card.migration { outline-color: #32c0cc; }
.card.schatten { outline-color: #ccff00; }
.card.reisen { outline-color: #ff0090; }

*/