/*
Theme Name: Wahlioptik.ch
Theme URI: 
Author: Armin Oppliger
Author URI: https://arminoppliger.ch/
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wahlioptik-ch
Tags: 
*/
@import url('responsive.css');

[id] { scroll-margin-top: 380px; }
/* Global */
:focus,
button:focus,
a:focus {
    outline: none;
}

a {
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

/* Header */
header {
    position: relative;
}
header::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: #CEDAD7;
    background: linear-gradient(90deg, rgba(206, 218, 215, 0.8) 8%, rgba(153, 178, 169, 0.8) 0%);
    border-left: 4px solid #9D2235;
}
header .wp-block-site-logo {
    z-index: 2;
    margin: 0 auto;
}
header .wp-block-site-logo a {
    margin-left: -52px;
}
header nav {
    z-index: 1;
    width: 100%;
    top: -70px;
}

/* Sticky header states */
header {
    transition: transform .3s ease, padding .3s ease, background-color .3s ease;
}
header.header--sticky {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
header.header--hidden {
    transform: translateY(-100%);
}
header.header--compact {
    /* reduce vertical space when showing on scroll up */
    /* original padding is set inline in the block; we visually shrink */
    /* padding-top: 10px !important;
    padding-bottom: 10px !important; */
}
header.header--compact .wp-block-site-logo img {
    width: 200px !important;
    height: auto !important;
    transition: width .3s ease;
}
header.header--compact .logo-nav-wrapper {
    padding:0 !important;
}
header.header--compact nav {
    top: -30px;
}
header.header--compact .custom-logo {
    padding-top: 30px;
    margin-bottom: -30px;
}


header nav ul {
    margin:50px 0 0 !important;
    /* width: 80% !important; */
}

header nav ul li a{
    /* margin: 0 70px 0 0; */
}

.nav-menu-item a {
    position: relative;
    /* margin: 0 70px 0 0; */
    font-size: 1.2rem;
    font-weight: 600;
    /* right: 100px; */
}
.nav-menu-item a::before {
    content: '';
    background: url('images/glasses__.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 70px;
    height: 45px;
    margin: 0 0 0 -38px;
    display: block;
}

/* Pupils inside glasses (two circle.svg instances layered) */
.nav-menu-item a::after {
    content: '';
    position: absolute;
    top: 0;
    left: -38px; /* align with glasses block */
    width: 70px;
    height: 45px;
    display: block;
    pointer-events: none;
    background-image: url('images/circle.svg'), url('images/circle.svg');
    background-repeat: no-repeat, no-repeat;
    /* default sizes of pupils */
    background-size: 12px 12px, 12px 12px;
    /* default neutral gaze (roughly center of each lens) */
    background-position: 18px 16px, 42px 16px;
    transition: background-position .35s cubic-bezier(.22,.61,.36,1);
}

/* Per-item default gaze directions (tweak as desired) */
.wp-block-navigation__container > .nav-menu-item:nth-child(1) a {
    margin-right: 70px;
}
.wp-block-navigation__container > .nav-menu-item:nth-child(1) a::after {
    background-position: 12px 10px, 52px 10px;
}

.wp-block-navigation__container > .nav-menu-item:nth-child(2) a {
    margin-right: 250px;
}
.wp-block-navigation__container > .nav-menu-item:nth-child(2) a::after {
    background-position: 9px 9px, 48px 9px;
}

.wp-block-navigation__container > .nav-menu-item:nth-child(3) a {
    margin-right: 120px;
}
.wp-block-navigation__container > .nav-menu-item:nth-child(3) a::after {
    background-position: 13px 7px, 52px 7px;
}

.wp-block-navigation__container > .nav-menu-item:nth-child(4) a {
    margin-right: 270px;
}
.wp-block-navigation__container > .nav-menu-item:nth-child(4) a::after {
    background-position: 7px 13px, 46px 13px;
}

.wp-block-navigation__container > .nav-menu-item:nth-child(5) a {
    margin-right: 140px;
}
.wp-block-navigation__container > .nav-menu-item:nth-child(5) a::after {
    background-position: 9px 6px, 48px 6px;
}

.wp-block-navigation__container > .nav-menu-item:nth-child(1) a:hover::after {
    background-position: 12px 5px, 52px 5px;
}
.wp-block-navigation__container > .nav-menu-item:nth-child(2) a:hover::after {
    background-position: 14px 9px, 43px 9px;
}
.wp-block-navigation__container > .nav-menu-item:nth-child(3) a:hover::after {
    background-position: 13px 13px, 52px 13px;
}
.wp-block-navigation__container > .nav-menu-item:nth-child(4) a:hover::after {
    background-position: 6px 7px, 45px 7px;
}
.wp-block-navigation__container > .nav-menu-item:nth-child(5) a:hover::after {
    background-position: 9px 14px, 48px 14px;
}

.wp-block-navigation__container > .nav-menu-item a:hover::after {
    background-position: 20px 20px, 44px 20px;
}

/* Front Page */
/* .home main::after, */
.home-content::before {
    content: '';
    position: absolute;
    bottom: 40px;
    right: 23px;
    width: 69px;
    height: 66px;
    background: url('images/footer_logo.svg') no-repeat center center;
    background-size: contain;
    z-index: 1;
}

.home-content::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: #CEDAD7;
    background: linear-gradient(90deg, rgba(206, 218, 215, 1) 8%, rgba(153, 178, 169, 1) 0%);
    border-left: 4px solid #9D2235;
}

/* Kontakt Form */
.wpcf7-form input {
    background: #99B2A9;
    border-radius:0;
    padding: 10px;
    width: 90%;
    border: 1px solid #fff;
    margin-top: 10px;
    color: #fff;
  }
.wpcf7-form textarea {
    background: #99B2A9;
    border-radius:0;
    padding: 10px;
    width: 90%;
    border: 1px solid #fff;
    margin-top: 10px;
    max-height: 190px;    
    color: #fff;
}
.wpcf7-form input.wpcf7-submit {
    background: #9D2235;
    line-height: 1;
    padding: 15px 40px;
    width: auto;
    font-weight: 500;
    border:1px solid #9D2235;
    cursor: pointer;
}
.wpcf7-form input.wpcf7-submit:hover {
    background: #fff;
    color: #9D2235;
}
.wpcf7-form div.wpcf7-validation-errors,
.wpcf7-form div.wpcf7-acceptance-missing {
    border: 2px solid #b10832;
    background: #b10832;
    color: #fff;
}
.wpcf7-form span.wpcf7-not-valid-tip {
    color: #b10732;
}
.wpcf7 form.invalid .wpcf7-response-output {
    background: #ffb900;
    margin: 0;
    color: #000;
    width: 88%;
}
  
div.wpcf7 span.ajax-loader {display: table;}

/* Wahli: Hamburger icon and overlay animations (CodePen-like) */
.wp-block-navigation__responsive-container-open.has-wahli-burger {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 4px 0 0;
}
.wp-block-navigation__responsive-container-open.has-wahli-burger .wahli-burger {
    position: relative;
    width: 24px;
    height: 20px;
    display: inline-block;
}
.wp-block-navigation__responsive-container-open.has-wahli-burger .wahli-burger-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background: currentColor;
    transform-origin: 50% 50%;
    transition: transform .55s cubic-bezier(.645,.045,.355,1), opacity .45s cubic-bezier(.645,.045,.355,1), top .55s cubic-bezier(.645,.045,.355,1), bottom .55s cubic-bezier(.645,.045,.355,1);
}
.wp-block-navigation__responsive-container-open.has-wahli-burger .line-1 { top: 0; }
.wp-block-navigation__responsive-container-open.has-wahli-burger .line-2 { top: 8px; }
.wp-block-navigation__responsive-container-open.has-wahli-burger .line-3 { bottom: 0; }

/* Morph to X */
.wp-block-navigation__responsive-container-open.is-active .line-1 {
    top: 8px;
    transform: rotate(45deg);
}
.wp-block-navigation__responsive-container-open.is-active .line-2 {
    opacity: 0;
}
.wp-block-navigation__responsive-container-open.is-active .line-3 {
    bottom: auto;
    top: 8px;
    transform: rotate(-45deg);
}

/* Overlay/menu entrance animation */
.wp-block-navigation__responsive-container {
    width: 100%;
	position:relative;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
    transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1), visibility 0s linear .55s;
}
.nav-open .wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container.is-menu-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s;
    background: transparent !important;
    top: -70px;
    
}
.wp-block-navigation__responsive-container.is-menu-open button {
    right: -5px;
    display: block;
    width: 22px;
    height: 22px;
    top:0;
    z-index: 10;
}
.wp-block-navigation__responsive-container.is-menu-open button svg {
    display: none;
}
.wp-block-navigation__responsive-container.is-menu-open ul,
.wp-block-navigation__responsive-container.is-menu-open ul li {
    width: 100%;
}

/* Staggered items */
.wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.nav-open .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
    opacity: 1;
    transform: translateY(0);
}
.nav-open .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1),
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { transition-delay: .2s; }
.nav-open .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2),
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { transition-delay: .2s; }
.nav-open .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3),
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { transition-delay: .2s; }
.nav-open .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4),
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { transition-delay: .2s; }
.nav-open .wp-block-navigation__responsive-container .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5),
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { transition-delay: .2s; }