/* Fonts */
/* ------------------------------------------------- */

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 17, 2024 */
@font-face {
  font-family: 'human_sanslight';
  src: url('fonts/humansans-light-luna-webfont.eot');
  src: url('fonts/humansans-light-luna-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/humansans-light-luna-webfont.woff2') format('woff2'),
       url('fonts/humansans-light-luna-webfont.woff') format('woff'),
       url('fonts/humansans-light-luna-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'rowan6_styled';
  src: url('fonts/rowan-6styled-luna-webfont.eot');
  src: url('fonts/rowan-6styled-luna-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/rowan-6styled-luna-webfont.woff2') format('woff2'),
       url('fonts/rowan-6styled-luna-webfont.woff') format('woff'),
       url('fonts/rowan-6styled-luna-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


/* CSS Resets */
/* ------------------------------------------------- */

html  {
  margin: 0;
  padding: 0;
  font-size: 16px;
  scroll-behavior: smooth;
}

body  {
  margin: 0;
  padding: 0;
  height: 100vh;   
  width: 100dvw;    
  position: relative; 
  background-color: var(--cashew);
}


*  { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


h1, h2, h3, h4 h5, h6, p, a {
  margin: 0;
}


a:link, a:active, a:visited {
  text-decoration: none;
  color: black;
}

button {
  cursor: pointer;
}


/* Custom Properties */
/* ------------------------------------------------- */

:root {

  /* Colours */
  --sage: #8DA384;
  --spinach: #355925;
  --cashew: #FFF4E8;
  --sand: #DEBE9E;
  --caramel: #D68E47;
  --black: #000000;
  --dark: #E0C9A2;
  --light: #FFF8F0;
  --lighter: #FFFBF8;

  /* Fluid Type Scale */
  --fs-xs: clamp(0.51rem, -0.02vi + 0.52rem, 0.5rem);
  --fs-s: clamp(0.64rem, 0.05vi + 0.63rem, 0.67rem);
  --fs-sm: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);
  --fs-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
  --fs-md: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
  --fs-lg: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
  --fs-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
  --fs-2xl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
  --fs-3xl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);

  /* Font-Family */
  --rowan: 'rowan6_styled';
  --humansans: 'human_sanslight';

}




/* Actual Styling */
/* ------------------------------------------------- */


/* Overall -- Top Level Layouts */
/* ------------------------------------------------- */

header {
 width: 100%;
}

main {
  width: 100%;
}

section {
  width: 100%;
}


/* Header */
/* ------------------------------------------------- */

header {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-base);
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 1rem;
  height: 80px;
  background: var(--dark);
  /* background: linear-gradient(180deg, rgba(222,190,158,1) 0%, rgba(222,190,158,0) 100%); */
}


header div {
  height: 100%;
}


header div img {
  height: 100%;
  width: auto;
}


header#desktop nav ul {
  display: flex;
  gap: 2rem;
  align-items: baseline;
  justify-content: start;
  list-style: none;
  margin: 0;
  padding: 0;
  width: fit-content;
  /* font-family: 'rowan6_styled'; */
  font-family: var(--humansans);
  text-transform: uppercase;
}

header#desktop nav li {
  margin: 0;
  padding: 0;
}

header nav li a:hover {
  color: var(--spinach);
  
}


header #logo {
  font-family: var(--rowan);
  font-size: calc(0.9 * var(--fs-lg));
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  height: fit-content;

}

header#desktop aside {
  display: flex;
  align-items: center;
  gap: 1rem
}

header aside button {
  box-shadow: none;
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  border: none;
  background-color: var(--black);
  color: var(--cashew);
  text-transform: uppercase;
  cursor: pointer;
  font-size: var(--fs-sm);
}

header aside button:hover {
  background-color: var(--caramel);
}

header aside i.bi {
  font-size: var(--fs-md);
  color: var(--black);
}


/* Header Responsive*/
/* ------------------------------------------------- */

@media screen and (max-width: 1100px) {
  header#desktop nav {
    display: none;
  }
}

#mobile, #mobile-menu {
  display: none;
}



/* Hero */
/* ------------------------------------------------- */

#hero {
  position: relative;
  height: 100vh;
  margin-top: -80px;
  z-index: 0;
  top: 0;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--light);
}

#hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  #hero {
    height: 60vh; /* Reduce height for mobile */
    min-height: 400px;
  }

  #hero img {
    object-fit: contain; /* Prevent excessive cropping */
    width: 100%;
    height: auto;
  }
}




/* Quote */
/* ------------------------------------------------- */

#quote {
  min-height: 40vh;
  height: fit-content;
  background-color: var(--light);
  display: flex;
  padding: 3em 1em;
  align-items: center;
  justify-content: center;

}


#quote div {
  width: 100%;
  max-width: 800px;
}

#quote blockquote {
  font-family: 'rowan6_styled';
  font-size: var(--fs-lg);
  text-align: center;
  letter-spacing: 0.0125em;
}


#quote p {
  font-family: var(--humansans);
  font-size: var(--fs-md);
  text-align: right;
}

/* About */
/* ------------------------------------------------- */

#about {
  min-height: 100vh;
  height: fit-content;
  background-color: var(--light);
  display: flex;
  flex-wrap: wrap;
  padding: 5em 0;
  gap: 2em;
  align-items: center;
  justify-content: center;
}



#about > div:nth-of-type(1) {
  width: 100%;
  height: 100%;
  flex: 1 0 35%;
  min-width: 320px;
  max-width: 640px;
  padding: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

#about > div:nth-of-type(1) > img {
  width: 100%;
}


#about > div:nth-of-type(2) {
  height: fit-content;
  width: 100%;
  flex: 1 0 35%;
  min-width: 320px;
  max-width: 640px;
  padding: 2em;
}

#about > div:nth-of-type(2) > img {
  max-width: 240px;
  height: auto;
  margin: -30px ;
}


#about p {
  font-family: 'human_sanslight';
  font-size: calc(1.1 * var(--fs-base));
}


/* Courses */
/* ------------------------------------------------- */

#courses {
  height: fit-content;
  min-height: 100vh;
  background-color: var(--dark);
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;

}

#courses h2 {
  font-family: var(--rowan);
  font-size: var(--fs-xl);
  padding: 1rem 0;
  border-bottom: 1.5px solid black;
}

#courses .left {
  flex: 1 1 40%;
  min-width: 300px;
  min-height: 100vh ;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.3s ease-in-out;

}


#courses .right {
  flex: 1 0 60%;
  padding: 3em 2em;
  min-width: 300px;
}


#courses:after {
  content: "";
  display: block;
  clear: both;
}

#courses details {
  border-bottom: 1.5px solid black;
  padding: 2rem 0;
}

#courses details summary {
  font-family: var(--rowan);
  font-size: var(--fs-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

#courses details p {
  font-family: var(--humansans);
  font-size: var(--fs-base);
  padding: 1rem 0;
}

#courses details summary {
  list-style-type: none;
}

#courses details summary::-webkit-details-marker {
  display: none;
}

#courses details summary::after {
  font-family: 'Bootstrap-icons';
  content: "\F282";
}
#courses details[open] summary:after {
  content: "\F286";
}

details summary {
  transition: margin 200ms ease-in-out;
}

details[open] summary {
  margin-bottom: 10px;
}


/* Events */
/* ------------------------------------------------- */

#events {
  min-height: 100vh;
  background-color: var(--light);
  padding: 3rem;
}

#events h2 {
  font-family: var(--rowan);
  font-size: var(--fs-xl);
  text-align: center;
  padding: 3rem 0;
  margin: 0;
}

.calendar {
  padding-top: 5rem;
  display: flex;
  height: fit-content;
  gap: 5rem;
  flex-wrap: wrap;
  justify-content: center;
  justify-items: center;
  row-gap: 5rem;  
  column-gap: 5rem;

}

.event-card {
  width: fit-content;
  width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
  padding: 0rem;
}

.event-card .date {
  font-family: var(--humansans);
  font-size: calc(1 * var(--fs-base));
  margin: 0;
  padding: 0;

}

.event-card .event-time {
  font-family: var(--humansans);
  font-size: calc(1 * var(--fs-base));
  margin: 0;
  padding: 0;

}

.event-card .location {
  font-family: var(--humansans);
  font-size: var(--fs-base);
  font-size: calc(1 * var(--fs-base));
  text-transform: uppercase;
  font-weight: 800;

}
.event-card .description {
  font-family: var(--rowan);
  font-size: calc(1.1 * var(--fs-base));
}


.event-card button {
  box-shadow: none;
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  border: none;
  background-color: var(--black);
  color: var(--cashew);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  margin-top: 0.5em;
}

.event-card button:hover {
  background-color: var(--caramel);
}

.event-card button a:link, 
.event-card button a:hover, 
.event-card button a:visited, 
.event-card button a:active {
  color: var(--cashew);
} 


/* Events */
/* ------------------------------------------------- */

#testimonials {
  min-height: 100vh;
  background-color: var(--dark);
  padding: 5em 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  align-items: center;
}

#testimonials h2 {
  font-family: var(--rowan);
  font-size: var(--fs-xl);
  padding: 3rem 0;
}

#testimonials .left {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 300px;

}

#testimonials .left img {
  max-width: 100%;
  width: 420px;
  min-width: 300px;
}

#testimonials .right {
  flex: 1 1 40%;
  text-align: center;
  min-width: 300px;
  padding: 0 2em;

}


#testimonials .right p {
  font-family: var(--humansans);
  font-size: var(--fs-base);
}

.testimonial p:last-of-type {
  margin-bottom: 2.5rem;
}


/* Contact */
/* ------------------------------------------------- */

#contact {
  min-height: 100vh;
  background-color: var(--light);
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: center;
}

#contact h2 {
  font-family: var(--rowan);
  font-size: var(--fs-xl);
  padding: 2rem 0;
}

#contact .left {
  flex: 1 1 40%;
  min-width: 320px;
  width: 480px;
  padding: 3rem;
}

#contact .left form {
  display: flex;
  flex-direction: column;
  font-family: var(--humansans);
  font-size: var(--fs-base);
  gap: 1rem;
}

#contact .left form input, 
#contact .left form textarea, 
#contact .left form select {
  padding: 0.5rem;
  border: 1px solid var(--black);
  background-color: var(--lighter);
  border-radius: 0.5rem;
  font-family: var(--humansans);
  font-size: var(--fs-base);
}

#contact .left form textarea {
  resize: none;
  min-height: 240px;
}


#contact .left form input:focus, 
#contact .left form textarea:focus, 
#contact .left form select:focus {
  padding: 0.5rem;
  outline-color: var(--caramel);
}

#contact .left form button {
  box-shadow: none;
  border-radius: 2rem;
  width: 180px;
  padding: 0.5rem;
  border: none;
  background-color: var(--black);
  color: var(--cashew);
  text-transform: uppercase;
  font-weight: 500;
  font-size: var(--fs-base);
}

#contact .left form button:hover {
  background-color: var(--caramel);

}



#contact .right {
  flex: 1 1 40%;
  min-width: 300px;
  min-height: 100vh ;
  background-image: url(images/Kontakt.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.3s ease-in-out;

}

/* Newsletter */
/* ------------------------------------------------- */

#newsletter {
  height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--dark);
  padding: 3em;
}

#newsletter a:link {
  font-family: var(--rowan);
  font-size: var(--fs-lg);
  max-width: 800px;
  line-height: 1.2;
  text-align: center;
}


#newsletter a:hover {
  color: var(--cashew);
  text-decoration: underline;
}

/* Footer */
/* ------------------------------------------------- */

footer {
  height: 120px;
  width: 100%;
  display: flex;
  background-color: var(--light);
  padding: 1rem;
  justify-content: space-between;
  align-items: center;
  color: black;
}

footer img {
  height: 100%;
}

footer ul {
  list-style-type: none;
  font-family: var(--humansans);
  font-size: var(--fs-base);
  padding: 1rem;
  margin: 0;
  padding: 0;
}

footer ul:first-of-type a:link {
  text-decoration: underline;
  text-underline-offset: 0.1rem;
  color: black
}

footer ul:last-of-type a:link {
  font-size: var(--fs-base);
}

footer ul:last-of-type {
  text-align: right;
}



footer i.bi {
  font-size: var(--fs-base);
  color: var(--black);
}