/*
   Comments:
   -> z-index for menu - 999
   -> tablet version breakpoint - 992px
   -> z-index for contact us button - 1001
*/

/* General Sidemenu Styles */
@import url("elements/sidemenu.css");

/* Logo Styles */
@import url("elements/logo.css");

/* Text Menu Styles */
@import url("elements/text-menu.css");

/* Button Styles */
@import url("elements/contact-button.css");

/* Desktop Open Button */
@import url("elements/desktop-open-button.css");

/* Desktop Close Button */
@import url("elements/desktop-close-button.css");

/* Desktop Mobile Button */
@import url("elements/mobile-button.css");

/* Vars */
header.site-header {
  --menu-width-desktop: 240px; /* Desktop content width */
  --menu-width-mobile: 230px; /* Mobile content width */

  --menu-padding-desktop: 32px;
  --menu-padding-mobile: 20px;
  --menu-top-bottom-padding-desktop: 5vh;

  --menu-width-desktop-open: 304px; /* Total width when the menu is opened on desktop */
  --menu-width-desktop-close: 97px; /* Total width when the menu is closed on desktop */
  --menu-width-mobile-open: 270px; /* Total width when the menu is opened on desktop */

  --submenu-max-height: 200px;
}

@media screen and (min-width: 992px) {
  div#page.site {
    width: calc(100% - 97px);
    margin-left: 97px;
    transition: margin-left var(--transition-duration) linear;
  }

  div#page.site.menu-is-opened {
    width: calc(100% - 97px);
    margin-left: 304px;
  }

  div#page.site.menu-is-opened {
    width: calc(100% - 97px);
    margin-left: 304px;
  }
}

@media screen and (max-width: 991.88px) {
  div#page.site .site-header {
    margin-left: calc(-1 * var(--menu-width-mobile-open));
  }
}