/** IMPORTS **/
@import 'components/page.css';
@import 'components/outlet.css';

/*** FONTS ***/
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("./fonts/Inter-BoldItalic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("./fonts/Inter-Italic.woff2") format("woff2"); }

@font-face {
  font-family: 'tex_gyre_scholaregular';
  src: url('./fonts/texgyreschola-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'tex_gyre_scholaregular';
  src: url('./fonts/texgyreschola-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
	font-family: 'PTSerif';
	src: 
		url('./fonts/PT-Serif_Regular.woff2') format('woff2'),
		url('./fonts/PT-Serif_Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/*** Variables ***/
:root {
  --clr-black: #111;
  --clr-white: #fff;
  --clr-green: #CFB828;
  --clr-yellow: #FFE643;
  --clr-beige: #E8D9BF;
  --clr-rosa: #F0C7E0;
  --clr-red: #EA4A4A;
  --clr-bluegreen: #ABD7CF;

  --padding: 1.5rem;
  --ff-serif: 'PTSerif', serif;
  --ff-sans: "Inter", "Helvetica", sans-serif;

  --fs-desktop-giant: clamp(56px, 7vw, 8rem);  
  --fs-desktop-big: clamp(26px, 2.083vw, 5.938rem);
  --fs-desktop-medium: clamp(18px, 1.583vw, 3.938rem);
  --fs-desktop-small: clamp(10px, 12px, 14px);
  /* --fs-desktop-big: clamp(1.875rem, 1.4613rem + 1.5988vw, 5.938rem); */
}



/**** CSS RESET ****/
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 16px;

  font-family: 'PTSerif', sans-serif;
  color: var(--clr-test) !important;
  background: var(--clr-white);
  scroll-behavior: smooth;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  scroll-margin-top: 85px;
}

body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
  padding: 0;
}


table tr td {
  padding: 0;
  font-size: var(--fs-desktop-big);
}
td {
  padding-right: 20px !important;
}
/*** TYPO ***/
a,
a:visited {
  text-decoration: none;
  color: var(--clr-black);
  font-family: var(--ff-sans);
  font-weight: bold;
}

a:active,
a:hover {
  text-decoration: none;
  font-weight: bold;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

p + p {
  margin-top: var(--fs-desktop-medium);
}

.fs-small {
  font-size: var(--fs-desktop-medium);
  font-family: var(--ff-sans);
}

.fs-marg {
  font-size: var(--fs-desktop-small);
  font-family: var(--ff-sans);
}

.fs-huge {
  font-size: var(--fs-desktop-giant);
  font-weight: bold;
  font-family: var(--ff-sans);
}

strong, b {
  font-weight: bold;
  font-family: var(--ff-sans);
}


/*** LAYOUT ***/

.header {
  position: fixed;
  width: 100%;
  right: 0;
  background: var(--clr-green);
  border-bottom: 0px solid var(--clr-black);
  z-index: 998;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.header img {
  max-width: 150px;
  margin-top: 5px;
  max-height: 40px;
}

.nav-toggler {
  display: none;
}

.nav-toggler-label {
  width: 40px;
  height: 30px;
  position: fixed;
  top: 20px;
  right: 40px;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  background: var(--clr-black);
  height: 2.5px;
  width: 100%;
  border-radius: 2px;
  position: relative;
  -webkit-transition: all ease-in-out 100ms;
  -o-transition: all ease-in-out 100ms;
  transition: all ease-in-out 100ms;
}

.hamburger::after,
.hamburger::before {
  position: absolute;
  content: '';
  left: 0;
}

.hamburger::before {
  bottom: 10px;
}

.hamburger::after {
  top: 12px;
}

/* Hamburger Animation */
.nav-toggler:checked~.nav-toggler-label .hamburger {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.nav-toggler:checked~.nav-toggler-label .hamburger::after {
  -webkit-transform: rotate(90deg) translate(-12px);
      -ms-transform: rotate(90deg) translate(-12px);
          transform: rotate(90deg) translate(-12px);
}

.nav-toggler:checked~.nav-toggler-label .hamburger::before {
  opacity: 0;
}


.nav {
  position: relative;
  margin-top: 12rem;
  font-size: var(--fs-desktop-giant);
  line-height: 1;
}

.nav li {
  margin-top: 0.5rem;
}

.nav a {
  color: var(--clr-black);
  text-decoration: none;
  font-weight: bold;
}



/* .nav li::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: black;
  left: 0;
  margin-top: calc(var(--fs-desktop-big) * 1.5);
  -webkit-transition: all ease 0.2s;
  -o-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
*/

.nav-item-active a,
.nav-item-active {
  font-weight: bold !important;
}

.social {
  font-size: var(--fs-desktop-small);
  padding-bottom: 5rem;
  line-height: 1;
}

.social a {
  text-decoration: none;
  color: var(--clr-black);
}

.social li:before {
  content: '·';
  font-size: calc(var(--fs-desktop-medium)*1.5);
  line-height: var(--fs-desktop-medium);
}

.menu {
  font-family: var(--ff-sans);
  background: var(--clr-green);
  height: 100vh;
  width: 100%;
  right: 0;
  position: fixed;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: -webkit-transform 250ms ease-in-out;
  transition: -webkit-transform 250ms ease-in-out;
  -o-transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
  padding-left: clamp(40px, 12vw, 12vw);
  padding-right: clamp(40px, 12vw, 12vw);
  z-index: 888;
}

.nav-toggler:checked~.menu {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}


.main {
  padding: 30px;
  padding-top: 6.5rem;
  width: 100%;
  background-color: var(--bg-color);
  min-height: 100vh;
  font-size: var(--fs-desktop-big);
}

/** HEROINE **/

.heroine {
  width: 100%;
  height: 100vh;
}

.heroine img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.heroine figcaption {
  font-family: var(--ff-sans);
  font-size: var(--fs-desktop-giant);
  line-height: 1;
  color: var(--clr-white);
  font-weight: bold;
  position: absolute;
  bottom: 40px;
  padding-left: 40px;
  width: 60%;
}


/* footer */
.footer {
  background: var(--clr-black);
  color: var(--clr-white);
  padding: 80px;
  font-family: var(--ff-sans);
}

.footer a {
  color: var(--clr-white);
  text-decoration: none;
  font-weight: bold;
}

.footer img {
  max-width: 250px;
}

/* Werkstatt Button */
.btn-werkstatt {
  position: absolute;
  top: 80px;
  left: 40px;
  width: 250px;
  transition: all 0.2s ease;
}

.btn-werkstatt:hover {
  transform: scale(1.1) rotate(5deg);
}

/*** Uniform Plugon ***/
.uniform__potty {
  position: absolute;
  left: -9999px;
}




/*** MEDIA QUERIES ***/
@media screen and (min-width: 1000px) {
  .menu {
    width: 15%;
    text-align: left;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    border-right: 0px solid var(--clr-black);
  }

  .header {
    width: 15%;
    border-bottom: 0;
    padding: 40px 40px 0 40px;
    border-right: 0px solid var(--clr-black);
  }

  .header img {
    max-width: 100%;
    max-height: 100%;
  }

  .nav {
    margin-top: 60vh;
    font-size: var(--fs-desktop-medium);
  }

  .nav li {
    width: 0%;
    text-align: left;
    white-space: nowrap;
    -webkit-transition: all ease 0.2s;
    -o-transition: all ease 0.2s;
    transition: all ease 0.2s;
  }

  .nav li:hover,
  .nav li.nav-item-active {
    width: 100%;
    -webkit-transition: all ease 0.2s;
    -o-transition: all ease 0.2s;
    transition: all ease 0.2s;
  }

  .social {
    text-align: left;
    padding-bottom: 40px;
  }

  .menu {
    padding-left: 40px;
    padding-right: 40px;
  }

  .nav-toggler-label {
    display: none;
  }

  .main {
    width: 85%;
    padding: 80px;
    margin-right: 15%;
    padding-top: 40px;
  }

  .heroine {
    width: 85%;
    margin-right: 15%;

  }

}