:root {
  --hag-chrome-container: 80rem;
  --hag-chrome-gutter: 1rem;
  --hag-tap-target: 44px;
}

html[data-hag-chrome="v1"],
html[data-hag-chrome="v1"] body {
  max-width: 100%;
  overflow-x: clip;
}

html[data-hag-chrome="v1"] *,
html[data-hag-chrome="v1"] *::before,
html[data-hag-chrome="v1"] *::after {
  box-sizing: border-box;
}

[data-hag-role="chrome-container"] {
  width: min(calc(100% - (2 * var(--hag-chrome-gutter))), var(--hag-chrome-container));
  max-width: var(--hag-chrome-container);
  margin-inline: auto;
}

[data-hag-role="brand-logo"] {
  display: block;
  width: auto;
  height: auto;
  max-width: min(220px, 55vw);
  max-height: 64px;
  object-fit: contain;
  object-position: left center;
}

[data-hag-role="menu-button"],
[data-hag-role="cta"],
[data-hag-role="primary-nav"] [data-hag-role="nav-link"] {
  min-width: var(--hag-tap-target);
  min-height: var(--hag-tap-target);
}

[data-hag-role="menu-button"] {
  display: inline-grid;
  place-items: center;
}

[data-hag-role="cta"],
[data-hag-role="primary-nav"] [data-hag-role="nav-link"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-hag-role="menu-button"]:focus-visible,
[data-hag-role="cta"]:focus-visible,
[data-hag-role="primary-nav"] a:focus-visible,
[data-hag-role="site-footer"] a:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 3px;
}

[data-hag-role="primary-nav"] img,
[data-hag-role="site-footer"] img {
  flex-shrink: 0;
}

@media (min-width: 768px) {
  :root {
    --hag-chrome-gutter: 1.5rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --hag-chrome-gutter: 2rem;
  }
}