/**
	This file does note generate code.  It is imported by other sass files to include
	variables, mixins, and functions.
	*/
/* Settings
   -------------------------------------------------------------------------- */
/**
	Global variables
*/
/* Site Max Width. Used in 03-base/_template.scss
   -------------------------------------------------------------------------- */
/* Location of compiled icons in theme.
   Used in project/build/common/sass/04-components/_icons.scss
   -------------------------------------------------------------------------- */
/* Breakpoints
	px is excluded so we can do math on the breakpoints
   -------------------------------------------------------------------------- */
/* Colors
   Suffix color variables with a 3 digit number.  Generally try to progress from
   lightest/dullest to darkest/most vibrant.
   -------------------------------------------------------------------------- */
/* Filter Colors
   -------------------------------------------------------------------------- */
/* Default transition.  Used in transition() mixin.
   ------------------------------------------------------------------------ */
/* Tools
   -------------------------------------------------------------------------- */
/**
	This file does note generate code.  It is imported by other sass files to include
	variables, mixins, and functions.
	*/
/* Settings
   -------------------------------------------------------------------------- */
/**
	This file does note generate code.  It is imported by other sass files to include
	variables, mixins, and functions.
	*/
/* Settings
   -------------------------------------------------------------------------- */
/**
	General mixins
*/
/* Variable Size
   Function can be used to make any property value variable
   -------------------------------------------------------------------------- */
/* Basic Transition
   -------------------------------------------------------------------------- */
/* Default Unordered List
   This mixin is used in place of defining base ul styles and then having to
   override them everywhere.  Ex: in a menu.
   This should be included when you output an acf wysiwyg field.
   -------------------------------------------------------------------------- */
/* Default Link Style
   This mixin is used in place of defining base a styles and then having to
   override them everywhere. Ex: text links vs buttons.
   This should be included when you output an acf wysiwyg field.
   -------------------------------------------------------------------------- */
/* Default Table
   -------------------------------------------------------------------------- */
/* Default Gradient
   -------------------------------------------------------------------------- */
/* Button Reset
   -------------------------------------------------------------------------- */
/* List Reset
   -------------------------------------------------------------------------- */
/* 100vh Mixin
   -------------------------------------------------------------------------- */
/* Accessibility Mixins to allow or prevent animations and transitions
   -------------------------------------------------------------------------- */
/* Tools
   -------------------------------------------------------------------------- */
/**
	Typography specific mixins
	These mixins are used in classes in build/common/sass/03-base/_typography.scss.
	They can also be used in a component/layout stylesheet, but that should be avoided.
*/
/* Fonts
   -------------------------------------------------------------------------- */
/* Typography
   -------------------------------------------------------------------------- */
/**
	This file does note generate code.  It is imported by other sass files to include
	variables, mixins, and functions.
	*/
/* Settings
   -------------------------------------------------------------------------- */
/* Tools
   -------------------------------------------------------------------------- */
/**
	Form specific mixins
	A set of default styles that can be applied to Gravity Forms and other forms
*/
.header {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  margin: 0 auto;
  top: var(--wp-admin--admin-bar--height, 0px);
  width: 100%;
  z-index: 7;
}
.header--overlay {
  position: absolute;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(59.3%, color-mix(in srgb, black, transparent 100%)), color-stop(99.07%, black));
  background: linear-gradient(0deg, color-mix(in srgb, black, transparent 100%) 59.3%, black 99.07%);
}
.header--sticky {
  position: -webkit-sticky;
  position: sticky;
}
.header--fixed {
  position: fixed;
}
.header--sticky, .header--scrolled {
  background: white;
  -webkit-box-shadow: rgba(114, 121, 119, 0.1) 0 2px 16px 0;
          box-shadow: rgba(114, 121, 119, 0.1) 0 2px 16px 0;
  --main-menu-label-color: #1f2221;
  --main-menu-icon-background: #1f2221;
  --main-menu-icon-color: white;
}
.header--sticky .header__logo, .header--scrolled .header__logo {
  --icon-size: 50px;
}
@media (min-width: 1024px) {
  .header--sticky .header__container, .header--scrolled .header__container {
    padding-block: 16px;
  }
}
.header__skip-button {
  inset: 0 auto auto 0;
  position: absolute;
  translate: 0 -100%;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  z-index: 10;
}
.header__skip-button:focus {
  translate: 0;
}
.header__container {
  display: grid;
  grid-template-areas: "menu logo booking";
  grid-template-columns: 1fr auto 1fr;
  padding: var(--spacer-four) calc(24px + (100vw - 320px) / ((768 - 320) / (40 - 24)));
}
@media (min-width: 1024px) {
  .header__container {
    -webkit-padding-before: var(--spacer-five);
            padding-block-start: var(--spacer-five);
    padding-inline: calc(48px + (100vw - 1024px) / ((1280 - 1024) / (64 - 48)));
  }
}
@media (min-width: 1280px) {
  .header__container {
    padding-inline: 64px;
  }
}
.header__logo {
  --icon-size: calc(42px + (100vw - 320px) / ((768 - 320) / (55 - 42)));
  grid-area: logo;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .header__logo {
    --icon-size: calc(55px + (100vw - 768px) / ((1024 - 768) / (60 - 55)));
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .header__logo {
    --icon-size: calc(60px + (100vw - 1024px) / ((1280 - 1024) / (72 - 60)));
  }
}
@media (min-width: 1280px) {
  .header__logo {
    --icon-size: 70px;
  }
}
.header__booking {
  grid-area: booking;
  place-self: center end;
}
@media (max-width: 1023.98px) {
  .header__booking {
    z-index: 10;
  }
}
.header__booking a {
  --icon-size: 24px;
  color: var(--main-menu-label-color, white);
}
@media (min-width: 1024px) {
  .header__booking a {
    display: none;
  }
}
.header .main-menu {
  grid-area: menu;
  place-self: center start;
}

#header-spacer {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  height: var(--header-height, 0);
  background-color: grey;
}