/*
 * Theme Name: Bergisch Gladbach
 * Template: exwpedient-theme
 * Author: Maximilian Schalch
 * Author URI: https://designerDeveloper.de
 * Version: 0.9
 * Description: Das Theme für das MVZ Pathologie Bergisch Gladbach. Titelfoto von <a href="https://unsplash.com/de/@maltregan?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">Etienne Assenheimer</a>auf <a href="https://unsplash.com/de/fotos/bahnschienen-pJ33NWyytvg?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target?"_blank">Unsplash</a>.
 */

:root {
  --black-color: #10100e;
  --gray-d3-color: #191815;
  --gray-d2-color: #30302b;
  --gray-d1-color: #606055;
  --gray-bg-color: #c0c0ab;
  --gray-l1-color: #e8e8cf;
  --gray-l2-color: #f8f8dd;
  --white-color: #f6fbfe;

  --accent-color: #29abe2;
  --accent-l4-color: #ddeefa;
  --accent-l3-color: #baddf4;
  --accent-l2-color: #94ccef;
  --accent-l1-color: #6abbe9;
  --accent-d1-color: #2a86b1;
  --accent-d2-color: #266382;
  --accent-d3-color: #1f4255;
  --accent-d4-color: #16242c;

  /* light mode */

  --cur-color: var(--black-color);
  --inv-color: var(--white-color);

  --body-color: var(--black-color);
  --headline-color: var(--accent-d2-color);
  --body-bg-color: #fff;
  
  --header-bg-color: var(--body-bg-color);
  
  --button-bg: var(--accent-l2-color);
  --button-bg-hover: var(--accent-d2-color);
  --button-text: var(--accent-d3-color);
  --button-text-hover: var(--accent-l4-color);
  
  --footer-bg: var(--accent-d4-color);
  --footer-color: var(--accent-l4-color);
  --footer-color-hover: var(--white-color);
  
  --nav-toggler: var(--accent-d4-color);
  --menu-bg: var(--accent-l3-color);
  --menu-bg: #fff;
  
  --logo-color: var(--accent-d4-color);
  --text-color: var(--body-color);
  --text-link-color: var(--accent-d1-color);
  --text-link-color-hover: var(--accent-color);
  
  --a11y-color: #ff00a1;
  --a11y-color: #a1ffa1;
  
}

@media (prefers-color-scheme: dark) {
  :root {
    --cur-color: var(--white-color);
    --inv-color: var(--black-color);
    
    --body-color: var(--white-color);
    --headline-color: var(--accent-l2-color);
    --body-bg-color: var(--accent-d4-color);

    --header-bg-color: #fff;
    --footer-bg: var(--accent-d3-color);

    --button-bg: var(--accent-l4-color);
    --button-bg-hover: var(--accent-d2-color);
    --button-text: var(--accent-d3-color);
    --button-text-hover: var(--accent-l4-color);

    --menu-bg: #fff;
    
    --text-link-color: var(--accent-l1-color);
    --text-link-color-hover: var(--accent-color);
  }
}

* {
  margin:0;
  padding:0;
}

body {
  background: var(--body-bg-color);
  color: var(--body-color);
  font-family: 'HostGrotesk', sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight:300;
  transition: padding .2s ease-in;
}

b,strong {
  font-weight:570;
}

@media (prefers-color-scheme: dark) {
  b,strong {
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0.2em;
    font-style:italic;
  }
}

.inner {
  width: 95%;
  margin: 0 auto;
  max-width: 1280px;
}

.skip-link {
  position:absolute;
  top: 9rem;
  left: -9999px;
  z-index:100;
  color: var(--text-link-color);
}

.skip-link:focus-visible {
  left: 10px;
}

*:focus-visible {
  border: 3px dashed var(--a11y-color);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

h1 {
  font-weight:455;
  font-size:1.1rem;
  font-size:4vw;
  line-height:1.1rem;
  line-height:3.8vw;
  text-transform:uppercase;
  letter-spacing:1.6px;
  letter-spacing:0.1rem;
  color: var(--logo-color);
  border: solid 2px var(--logo-color);
  /*border: solid 0.5vw var(--logo-color);*/
  padding: 1rem;
  padding: 3vw 3.5vw;
}

h1 a {
  text-decoration:none;
  color:var(--logo-color);
}

h1 span {
  letter-spacing: 0.2px;
  letter-spacing: 0.0125rem;
}

.header {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:1rem 0;
  position:relative;
  background: var(--header-bg-color);
  border-bottom: 1px solid var(--gray-l1-color);
}

/*
Das plus ein JS das bei ScrollY > 10px dem body die .fixed-header anhängt.
Teste es jetzt aber mal mit sticky, alternativ.

.fixed-header {
  padding-top: 10rem;
  transition: padding .5s ease-out;
}

.fixed-header .header {
  position: fixed;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
  top:0;
  left:0;
  right:0;
}
  */

.header.sticky {
  position: sticky;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  right: 0;
  z-index:1000; /* damit bei image:hover der header oberhalb bleibt */
}

.header-inner-1,
.header-inner-2 {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
}

.header-inner-2{
  justify-content:flex-end;
}

.cert {
  width:150px;
  margin-top: 1rem;
}

.main-nav {
  display:block;
  position:absolute;
  width:100%;
  max-width: 450px;
  padding:0.5rem 2rem;
  box-sizing:border-box;
  background: var(--menu-bg);
  transform:translateY(-100%);
  right: 0;
  top:-30rem;
}

.main-nav.visible {
  display:block;
  top:0;
  transform:translateY(2rem);
  box-shadow: 7px 7px 7px rgba(0,0,0,0.2);
}

@media (max-width:1023px) {
  .main-nav {
      transition: all .5s ease-in-out;
    }
  
  .main-nav.visible {
    transition: all .35s ease-out;
  }

  .header nav a:link,
  .header nav a:visited {
    transition: color, background .4s ease-in-out;
  }

  .header nav a:hover,
  .header nav a:active {
    transition: color, background .2s ease-in-out;
  }

}

@media (prefers-color-scheme: dark) {
  .header.sticky,
  .main-nav.visible {
    box-shadow: 0 7px 7px rgba(0,0,0,0.6);
  }
}

.hamburger .line {
  width: 50px;
  height: 2px;
  background-color: var(--nav-toggler);
  display: block;
  margin: 8px auto;
  transition: all 0.1s ease-in-out;
}

.hamburger:hover {
  cursor: pointer;
}

.hamburger.is-active .line:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active .line:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.hamburger.is-active .line:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

nav ul {
  list-style-type:none;
}

.header nav {
  margin: 2.8rem 0 0;
  font-size:1rem;
  letter-spacing: 1px;
  text-transform:uppercase;
  font-weight:440;
}

.header nav li {
  margin: 1.8rem 0;
}

.header nav a:link,
.header nav a:visited {
  display: block;
  padding: 0.5rem 2rem;
  border-radius: 0.4rem;
  background: var(--button-bg);
  text-align:center;
  color: var(--button-text);
  text-decoration:none;
}

.header nav a:hover,
.header nav a:active {
  background: var(--button-bg-hover);
  color: var(--button-text-hover);
}

.header nav .current-menu-item a {
  border:2px solid var(--button-text);
}

.footer {
  background: var(--footer-bg);
  color: var(--footer-color);
  font-size: 1.2rem;
  line-height:1.5rem;
  padding: 2rem 1rem 5rem;
  box-sizing:content-box;
}

.footer.footer-fixed-bottom {
  position:absolute;
  bottom:0;
  right:0;
  left:0;
}

.footer h3,
.footer h4,
.footer b,
.footer strong {
  font-weight: 700;
  letter-spacing: .1rem;
}

.footer h3,
.footer p {
  margin-bottom: 1rem;
}

.footer h4 {
  margin: 2.5rem 0 0.5rem;
  color: var(--footer-color);
}

.footer a:link,
.footer a:visited {
  color: var(--footer-color);
  text-decoration:none;
  border-bottom: 1px solid var(--footer-bg);
  transition: color .4s ease-in-out;
}

.footer a:hover,
.footer a:active {
  color: var(--footer-color-hover);
  transition: color .2s ease-in-out;
}

.footer .numbers {
  line-height:1.8rem;
}

.footer .numbers .nmbr {
  font-size:1.1rem;
}

.footer p a:link,
.footer p a:visited {
  border-bottom: 1px solid var(--footer-color);
}

.footer p a:hover,
.footer p a:active {
  border-bottom: 1px solid var(--footer-color-hover);
}

.footer nav {
  text-align: center;
  margin: 4rem 0 2rem;
}

.footer nav a:link,
.footer nav a:visited {
  text-decoration: none;
  border-bottom: 1px solid var(--footer-bg);
  transition: border-color .4s ease-in-out;
}
.footer nav a:hover,
.footer nav a:active {
  border-bottom: 1px solid var(--footer-color-hover);
  transition: border-color .2s ease-in-out;
}

.footer nav .current-menu-item a {
  font-weight: 500;
}
.footer nav .current-menu-item a::before {
  content: "→ ";
  font-weight: bold;
}

.footer nav li {
  display:block;
  margin: 1rem 0;
}

.footer-inner {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

.footer-column {
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
}

.main {
  font-weight:350;
  margin: 2rem 0 5rem;
}

@media (prefers-color-scheme: dark) {
  .main {
    font-weight: 300;
  }
}

.main h2 {
  font-size:2rem;
  line-height:2rem;
  margin:5rem 0 1rem;
}

.main p,
.main li {
  font-size:1.25rem;
  line-height:2.1rem;
  hyphens:auto;
  margin:1rem auto;
}

.main ul,
.main ol {
  margin: 1rem auto;
}

.main li {
  margin-left: 1.5rem;
  margin: 0 0 0 1.5rem;
  hyphens:none;
}

.main p a:link,
.main p a:visited,
.main li a:link,
.main li a:visited {
  color: var(--text-link-color);
  text-decoration: none;
  border-bottom: 1px solid var(--text-link-color);
}

.main p a:hover,
.main p a:active,
.main li a:hover,
.main li a:active {
  color: var(--text-link-color-hover);
}

.hero {
  position:relative;
  height:500px;
  height:50vh;
  margin-top:-2rem;
  overflow:hidden;
}

.hero-bg {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:140%;
  background: var(--accent-l4-color) url('img/hero.jpg') no-repeat center center;
  background-size: cover;
  transform: translateY(0);
  z-index: -1;
}

.home .main h2 {
  margin: -5rem 0 6rem;
  font-size: 3rem;
  font-weight: 200;
  color: var(--white-color);
  text-shadow:1px 1px 8px rgba(0,0,0,.8);
}

h3 {
  margin-top: 4rem;
}

h4,h5 {
  margin-top: 2rem;
  color:var(--headline-color);
  font-weight:400;
}

h5 {
  margin-top: 1rem;
  font-weight:600;
  letter-spacing: 0.8px;
}

.teaser-holder {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
}

a.wp-block-button__link:link,
a.wp-block-button__link:visited {
  text-decoration:none;
  color:var(--accent-d1-color);
  border:2px solid var(--accent-l1-color);
  border-radius:2rem;
  padding:0.5rem 1rem;
  display:block;
  letter-spacing:1px;
  transition:color .3s ease-out, background .4s ease-out;
}

a.wp-block-button__link:hover,
a.wp-block-button__link:active {
  color:var(--body-bg-color);
  background:var(--accent-l1-color);
  transition:color .2s ease-in, background .2s ease-in;
}

.wp-block-image.microscope {
  max-width: 100%;
  overflow:hidden;
}

.wp-block-image.microscope img {
  width: 100%;
  height: auto;
  margin-bottom: -8px; /* weird hack */
}

@media (min-width: 500px) {

  .main-nav.visible {
    transform: translateY(4rem); /* könnte auch 5 sein auf einem richtigen iPad? */
  }

  h1 {
    width: 275px;
    border-width: 3px;
    font-size:1.5rem;
    line-height:1.45rem;
    font-weight:500;
    padding: 1rem;
  }

  .footer-column {
    min-width: 300px; /* check: macht das probleme? */
  }
}

@media (min-width: 700px) {
  /*.header {
      flex-direction: row;
      justify-content: space-between;
  }
  .header nav {
    margin: 0;
  }*/

  .main li {
    width: 80%;
  }

  .wp-block-image.microscope {
    float: right;
    width: 50%;
    max-width: 610px;
    margin:0.6rem 0 2rem 2rem;
    box-shadow: -1px 1px 10px rgba(0,0,0,.3);
    border: 1px solid var(--white-color);
    transition:transform 1s  ease-out, box-shadow 1s ease-out;
  }

  .wp-block-image.microscope:hover {
    transform:scale(1.1);
    transition:transform .5s  ease-out, box-shadow .5s ease-out, transform-origin .5s ease-out;
    box-shadow: 0px 4px 25px rgba(0,0,0,.15);
  }
  
  .wp-block-image.microscope img {
    transition:transform 1s ease-out;
    transform-origin: center center;
    will-change: transform;
  }
  
  .wp-block-image.microscope img:hover {
    transform:scale(1.4);
    transition:transform 1.2s cubic-bezier(0.31 0.01 0.64 1.11), transform-origin 1s ease-in;
    cursor:zoom-in;
  }

  section.teaser-holder { /* increased specificity */
    gap:unset;
    flex-direction:row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    margin:6rem auto 8rem;
    max-width:800px;
  }

} 

@media (min-width:980px) {
  
  .footer-inner {
    justify-content: space-between;
  }
  
  .footer nav {
    text-align: right;
    margin-bottom: 0;
  }
}

@media (min-width:1024px) {


  .cert {
    margin: 0 1.3rem 1rem auto;
  }

  .header nav {
    margin:0;
  }

  .header nav ul {
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    
  }
  .header nav li {
    margin: 0 0 0 1rem;
  }

  .nav-toggle {
    display:none;
  }
  
  .main-nav,
  .main-nav.visible {
    position:relative;
    display:block;
    transform:translateY(0);
    top:0;
    max-width:64vw;
    background:transparent;
    padding:0;
    margin:0;
    line-height:1rem;
    box-shadow:none;
  }

  .header nav link {
    margin: 0.5rem 0;
  }

  .header nav a:link,
  .header nav a:visited {
    padding: 0.5rem 1rem;
    background: var(--header-bg-color);
    border-radius: 0;
    border: 2px solid var(--header-bg-color);
    transition: color .3s ease-in-out;
  }
  .header nav a:hover,
  .header nav a:active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    transition: color .2s ease-in-out;
  }
  
  .header nav .current-menu-item a {
    font-weight: 800;
  }

}

@media (min-width:1180px) {
  
  .header nav {
    font-size: 1.2rem;
  }

}

@media (min-width:1350px) {
  .main-nav,
  .main-nav.visible {
    max-width:930px;
  }
  
  .footer-inner {
    justify-content: space-between;
  }

}