/* --- FONTS --- */

@font-face {
  font-family: Ragfille;
  src: url("../assets/fonts/Ragfille.otf");
}

@font-face {
  font-family: NewSpirit;
  src: url("../assets/fonts/New\ Spirit\ Regular.otf");
}

@font-face {
  font-family: AdegaSerif-Bold;
  src: url("../assets/fonts/AdegaSerif-Bold.otf");
}

@font-face {
  font-family: AdegaSerif-Regular;
  src: url("../assets/fonts/AdegaSerif-Regular.otf");
}

/* --- ROOT VARIABLES --- */

:root {
  --mobile-breakpoint: 70rem;

  --col-light-100: #f6eee3;
  --col-light-200: #ddcbb8;
  --col-light-400: #ad8b69;
  --col-brown: #845628;
  --col-brown-hover: #997558;
  --col-darkbrown: #845628;
  --col-darkbrown-hover: #562f15;

  --font-title: "Ragfille", serif;
  --font-body: "AdegaSerif-Regular", sans-serif;
  --font-body-bold: "AdegaSerif-Bold", sans-serif;
  --font-extra: "NewSpirit", sans-serif;
  --font-btn: "Ragfille", serif;

  --fs-100: 1rem;
  --fs-200: 1.2rem;
  --fs-300: 1.5rem;
  --fs-400: 1.6rem;
  --fs-450: 1.8rem;
  --fs-500: 2rem;
  --fs-600: 3.2rem;
  --fs-700: 4.8rem;
  --fs-800: 6.2rem;
  --fs-900: 7.2rem;

  --ls-st: 0.075rem;
  --ls-400: 0.25rem;
  --ls-600: 0.5rem;
  --lh-400: 1.4;
  --lh-300: 1.2;
  --lh-200: 1;
  --lh-100: 0.9;

  --padding-0: 0rem;
  --padding-100: 1.2rem;
  --padding-200: 2rem;
  --padding-300: 3.2rem;
  --padding-400: 4.8rem;
  --padding-500: 6.4rem;
  --padding-600: 9.6rem;
  --padding-700: 12rem;
  --padding-800: 18rem;
  --padding-push: 100rem;


    --bg-texture: url("/wp-content/themes/hippiefish/assets/images/hippieFish_brandColor.jpg");
}

/* HEADER NAVIGATION */

.header-nav > img {
  position: absolute;
  top: 1.9rem;
  left: 4.8rem;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.logo-text {
  height: 5rem;
  margin-top: 1.5rem;
}

.logo-icon {
  max-height: 5.8rem;
  margin-top: 1.5rem;
}

.logo-hero-container {
  align-self: center;
}

.logo-hero-icon {
  width: 35rem;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}

.logo-hero-icon .section-imgageslider {
  height: 60vh;
  display: flex;
  align-items: center;
  padding: 0rem 0rem 0rem 4.8rem;
}

.logo-footer {
  height: 18rem;
  margin-right: 8rem;
}

/* MEDIA QUERIES */

@media screen and (max-width: 992px) {
  .logo-hero-icon {
    width: 28rem;
  }
}

@media screen and (max-width: 800px) {
  .logo-icon {
    display: none;
  }

  .header-logo {
    gap: 0rem;
  }

  .logo-footer {
    margin: 0;
  }
}