/* =========================================================
   SHARED NAVIGATION
   ========================================================= */

body.menu-open {
  overflow:hidden;
}

.header a,
.header a:visited,
.header a:hover,
.header a:active,
.mobile-menu a,
.mobile-menu a:visited,
.mobile-menu a:hover,
.mobile-menu a:active {
  color:var(--black, #000);
  text-decoration:none;
}

.mobile-menu-button:focus-visible,
.header a:focus-visible,
.mobile-menu a:focus-visible {
  outline:2px solid var(--black, #000);
  outline-offset:4px;
}

/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

@media screen and (min-width:1200px) and (min-height:501px) {
  .header {
    position:relative;
    z-index:100;
    width:100%;
    height:80px;
    padding:0 80px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    background:var(--white, #fff);
  }

  .header-left {
    justify-self:start;
    font-size:30px;
    font-weight:400;
    white-space:nowrap;
  }

  .header-center {
    justify-self:center;
    font-size:45px;
    font-weight:500;
    line-height:1;
    white-space:nowrap;
  }

  .header-right,
  .desktop-nav {
    justify-self:end;
    display:flex;
    align-items:center;
    gap:35px;
    font-size:30px;
    font-weight:400;
  }

  .header-right img {
    display:block;
    width:26px;
    height:26px;
  }

  .mobile-menu-button,
  .mobile-menu {
    display:none !important;
  }
}

/* =========================================================
   TABLET NAVIGATION
   ========================================================= */

@media screen and (min-width:768px) and (max-width:1199px) and (min-height:501px) {
  .header {
    position:relative;
    z-index:1000;
    width:100%;
    height:var(--header-height, 80px);
    padding:0 var(--tablet-margin, 5.5556%);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    background:var(--white, #fff);
  }

  .header-left {
    justify-self:start;
    font-size:clamp(20px, 2.6vw, 28px);
    font-weight:400;
    white-space:nowrap;
  }

  .header-center {
    justify-self:center;
    max-width:52vw;
    overflow:hidden;
    font-size:clamp(28px, 3.5vw, 40px);
    font-weight:500;
    line-height:1;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .header-right,
  .desktop-nav {
    display:none !important;
  }

  .mobile-menu-button {
    grid-column:3;
    justify-self:end;
    width:44px;
    height:44px;
    padding:8px;
    border:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    background:transparent;
    color:var(--black, #000);
    cursor:pointer;
  }

  .mobile-menu-button span {
    display:block;
    width:100%;
    height:2px;
    background:currentColor;
  }

  .mobile-menu {
    position:fixed;
    top:var(--header-height, 80px);
    left:0;
    z-index:999;
    width:100%;
    min-height:calc(100svh - var(--header-height, 80px));
    padding:48px var(--tablet-margin, 5.5556%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:28px;
    background:var(--white, #fff);
    font-size:clamp(28px, 5vw, 44px);
    line-height:1;
  }

  .mobile-menu[hidden],
  .mobile-menu-button[hidden] {
    display:none !important;
  }

  .mobile-menu img {
    display:none;
  }
}

/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media screen and (max-width:767px),
       screen and (orientation:landscape) and (max-height:500px) {
  .header {
    position:fixed;
    top:0;
    left:50%;
    z-index:1000;
    width:100%;
    max-width:var(--mobile-page-width, 440px);
    height:var(--header-height, 64px);
    margin:0;
    padding:0 var(--mobile-margin, var(--page-margin, 2.5%));
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    background:var(--white, #fff);
    transform:translateX(-50%);
  }

  .header-left {
    grid-column:1;
    justify-self:start;
    min-width:0;
    font-size:18px;
    font-weight:400;
    line-height:1;
    white-space:nowrap;
  }

  .header-center {
    grid-column:2;
    justify-self:center;
    max-width:min(52vw, 250px);
    overflow:hidden;
    font-size:clamp(24px, 7vw, 31px);
    font-weight:500;
    line-height:1;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .header-right,
  .desktop-nav {
    display:none !important;
  }

  .mobile-menu-button {
    grid-column:3;
    justify-self:end;
    width:32px;
    height:24px;
    margin:0;
    padding:0;
    border:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:transparent;
    color:var(--black, #000);
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    z-index:1002;
  }

  .mobile-menu-button span {
    display:block;
    width:100%;
    height:2px;
    background:currentColor;
    transform-origin:center;
    transition:transform 180ms ease, opacity 180ms ease;
  }

  .header.menu-open .mobile-menu-button span:nth-child(1) {
    transform:translateY(11px) rotate(45deg);
  }

  .header.menu-open .mobile-menu-button span:nth-child(2) {
    opacity:0;
  }

  .header.menu-open .mobile-menu-button span:nth-child(3) {
    transform:translateY(-11px) rotate(-45deg);
  }

  .mobile-menu {
    position:fixed;
    top:var(--header-height, 64px);
    left:0;
    z-index:1001;
    width:100%;
    min-height:calc(100svh - var(--header-height, 64px));
    padding:36px var(--mobile-margin, var(--page-margin, 2.5%));
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:24px;
    background:var(--white, #fff);
    font-size:28px;
    font-weight:400;
    line-height:1;
  }

  .mobile-menu a {
    display:block;
    white-space:nowrap;
  }

  .mobile-menu img {
    display:none;
  }

  .mobile-menu[hidden],
  .mobile-menu-button[hidden] {
    display:none !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .mobile-menu-button span {
    transition:none;
  }
}