/* CSS file containing formatting used in Humak webpages, e.g. colors, headers, footers... */

/* fonts */
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap");

/* global variables */
:root {
  /* colors */
  --color-header: #000000;
  --color-header-text: #ffffff;

  --color-footer: #000000;
  --color-footer-text: #ffffff;

  --color-background: #ffffff;
  --color-section-heading-background: #ffb549;

  --color-button: #f1baef;
  --color-button-text: #000000;

  --color-hover: #000000;
  --color-hover-text: #ffffff;

  --color-link-hover: #ffb549;

  --color-border: #ffb549;

  --color-primary-backround: #ffe0ab;
  --color-form-background: #ffe0ab;
  --color-form-background: #ffe0ab;

  --color-secondary-background: #fff2d6;
  --color-item-background: hsl(150, 2%, 96%);

  --color-form-error: #d97474;
  --color-form-empty: white;
  --color-timer: #d97474;

  --color-shadows: #b8b8b8;

  --color-section-heading: #000000;
  --color-primary-text: #000000;
  --color-secondary-text: white;

  --color-arrow: white;
  --color-icon: #ffb549;
  --color-camera-icon: #000000;

  --color-notification: #fff2d6;

  /* size of the screen */
  --size-minheight: 100vh;
  --size-minwidth: 100vw;
  --size-maincontent-minheight: calc(
    var(--size-minheight) - 2 * var(--size-header-footer)
  );

  /* 1 rem */
  /*--size-font-size: 16px;
  --size-font-size: clamp(16px, 0.7vw, 25px);*/

  /* sizing */
  --size-header-footer: 8vh;
  --size-header-footer-padding: 2rem;

  /* fonts */
  --font-primary: "Roboto";
  --font-heading: "Space Grotesk";
  --font-secondary: "Space Grotesk";
}

/* header */

.header {
  padding-right: 0rem;
}

.header__right {
  flex-direction: column !important;
  justify-content: space-evenly;
}

/* language */
.language-switcher,
.language-switcher:hover {
  all: unset;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-left: auto;
}

.language-button {
  all: unset;
  padding-right: var(--size-header-footer-padding);
}

.language {
  color: black;
  background-color: white;
  border-radius: 20%;
  padding: 0.2rem;
  display: inline-block;
}

.language:hover {
  color: var(--color-link-hover);
  background-color: black;
}

.language-chosen {
  padding: 0.2rem;
  display: inline-block;
}

.wide-button {
  color: var(--color-button-text);
  font-weight: 600;
}

/* navigation */

.burger-menu {
  display: none;
}

.burger-menu__line {
  display: none;
}

.navigation,
.navigation:hover {
  all: unset;
  display: flex;
  padding-right: 7rem;
}

.navigation-dropdown {
  all: unset;
  display: flex !important;
  font-family: var(--font-heading);
  background-color: var(--color-header);
  color: var(--color-header-text);
}

.navigation-dropdown a {
  all: unset;
  color: var(--color-header-text);
  padding-left: 2rem;
}

.navigation-dropdown a:hover {
  all: unset;
  color: var(--color-link-hover);
  padding-left: 2rem;
}

/* general buttons */
.button {
  position: relative;
  padding: 1rem;
  font-weight: 600;
  color: var(--color-button-text);
}

.button:hover,
.wide-button:hover {
  background-color: var(--color-hover);
  color: var(--color-hover-text);
}

.button:disabled {
  background-color: var(--color-hover);
  color: var(--color-hover-text);
  cursor: not-allowed;
}

.footer__text:hover {
  color: var(--color-link-hover);
}

.slider-container__item-arrow {
  outline: 1px solid var(--color-border);
}

.section-text__feedback-text a:link,
.section-text__feedback-text a:visited {
  all: unset;
  color: var(--color-primary-text);
  cursor: pointer;
}

.section-text__feedback-text a:hover {
  text-decoration-color: var(--color-link-hover);
  color: var(--color-link-hover);
}

/* Small phones (≤480px) Potrait
  Galaxy Z Fold 5 Potrait
  Iphone SE, XR, 12 Pro, 14 Pro MAx  Potrait
  Samsung galaxy s8+ Potrait
*/
@media screen and (max-width: 480px) {
  .header {
    flex-direction: column;
    padding-right: 0rem;
    padding-left: 0rem;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .header__left {
    margin: calc(var(--size-header-footer-padding) / 2);
    margin-bottom: 0rem;
  }

  .header__right {
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: column;
  }

  .language-switcher,
  .language-switcher:hover {
    justify-content: flex-start;
    margin-left: 0rem;
  }

  .navigation,
  .navigation:hover {
    display: flex;
    padding-right: 0rem;
    margin: calc(var(--size-header-footer-padding) / 2);
  }

  .navigation-dropdown,
  .navigation-dropdown:hover {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  .navigation-dropdown a,
  .navigation-dropdown a:hover {
    padding: 0rem;
  }
}

/* Tablets (portrait) phones(landscape)
Iphone SE Landscape
Samsung galaxy s8+ Landscape
iPad Mini Potrait
*/
@media screen and (min-width: 481px) and (max-width: 768px) {
  .header {
    flex-direction: column;
    padding-right: 0rem;
    padding-left: 0rem;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .header__left {
    margin: calc(var(--size-header-footer-padding) / 2);
    margin-bottom: 0rem;
  }

  .header__right {
    justify-content: flex-start;
    align-items: flex-end;
    flex-direction: column;
  }

  .language-switcher,
  .language-switcher:hover {
    justify-content: flex-start;
    margin-left: 0rem;
  }

  .navigation,
  .navigation:hover {
    display: flex;
    padding-right: 0rem;
    margin: calc(var(--size-header-footer-padding) / 2);
  }

  .navigation-dropdown,
  .navigation-dropdown:hover {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  .navigation-dropdown a,
  .navigation-dropdown a:hover {
    padding: 0rem;
  }
}

/* Small tablets landscape, big phones landscape, big tablets potrait
  iPad Mini Landscape
  Galaxy Z Fold 5 Landscape
  Iphone XR, 12 Pro, 14 Pro Max Landscape
  iPad Air, Pro Potrait
  Nest hub
  Surface Pro 7 Potrait
*/
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .header {
    flex-direction: column;
    padding-right: 0rem;
    padding-left: 0rem;
    align-items: flex-start;
  }

  .header__left {
    margin: calc(var(--size-header-footer-padding) / 2);
    margin-bottom: 0rem;
  }

  .header__right {
    width: 100%;
  }

  .language-switcher,
  .language-switcher:hover {
    align-self: end;
  }

  .navigation,
  .navigation:hover {
    display: flex;
    padding-right: 0rem;
    margin: calc(var(--size-header-footer-padding) / 2);
  }

  .navigation-dropdown,
  .navigation-dropdown:hover {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  .navigation-dropdown a,
  .navigation-dropdown a:hover {
    padding: 0rem;
  }
}

/* Big tablets landscape, small laptop
  iPad Air landscape
  Nest hub max
*/
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .header {
    flex-direction: column;
    padding-right: 0rem;
    padding-left: 0rem;
    align-items: flex-start;
  }

  .header__left {
    margin: calc(var(--size-header-footer-padding) / 2);
    margin-bottom: 0rem;
  }

  .header__right {
    width: 100%;
  }

  .language-switcher,
  .language-switcher:hover {
    align-self: end;
  }

  .navigation,
  .navigation:hover {
    display: flex;
    padding-right: 0rem;
    margin: calc(var(--size-header-footer-padding) / 2);
  }

  .navigation-dropdown,
  .navigation-dropdown:hover {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  .navigation-dropdown a,
  .navigation-dropdown a:hover {
    padding: 0rem;
  }
}