@layer base {
  :root {
    --focus-ring: 0 0 0 var(--spacing-1) var(--color-outline);
    --nav-height-mobile: var(--spacing-16);
    --nav-height-desktop: var(--spacing-20);
    --nav-height: var(--nav-height-mobile);
  }

  html {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    scrollbar-gutter: stable;
  }

  :where(h1, h2, h3, h4, h5, h6, button, .button, .btn) {
    font-family: var(--font-display);
  }

  :where(a, button, input):focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .page-section {
    scroll-margin-top: var(--nav-height);
  }
}

@media (min-width: 1024px) {
  :root {
    --nav-height: var(--nav-height-desktop);
  }
}

@layer components {
  .page-hero__content {
    transform: translateY(calc(var(--nav-height) / 2));
  }

  .brand-map-infowindow {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-block-start: var(--spacing-3);
  }

  .brand-map-infowindow__logo {
    width: 7rem;
    height: auto;
  }

  .brand-map-infowindow__address {
    font-style: normal;
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
    color: var(--color-black);
  }

  .gm-style-iw-chr {
    display: none !important;
  }
}

/* Mobile Menu States */
html.is-menu-open,
body.is-menu-open {
  overflow: hidden !important;
  height: 100dvh !important;
  position: fixed !important;
  width: 100% !important;
}

body.is-menu-open > *:not(#main-header):not(script) {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

body > *:not(#main-header):not(script) {
  transition: filter 0.3s ease-out;
}