.layout-brand-logo {
  height: 2.75rem;
  width: auto;
  max-width: 7rem;
  object-fit: contain;
  border-radius: 0.75rem;
}

.layout-header {
  border-bottom: 1px solid var(--theme-layout-header-border);
  background: var(--theme-layout-header-background);
  backdrop-filter: blur(16px);
}

.layout-brand-link {
  color: var(--theme-layout-brand-text);
  text-decoration: none;
}

.layout-nav-link {
  color: var(--theme-layout-nav-link-text);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.layout-nav-link:hover {
  background: var(--theme-layout-nav-link-background-hover);
  color: var(--theme-layout-nav-link-text-hover);
}

.layout-nav-link-active {
  background: var(--theme-layout-nav-link-active-background);
  color: var(--theme-layout-nav-link-active-text);
}

.layout-menu-button {
  border: 1px solid var(--theme-layout-menu-button-border);
  background: var(--theme-layout-menu-button-background);
  color: var(--theme-layout-menu-button-text);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.layout-menu-button:hover {
  background: var(--theme-layout-menu-button-background-hover);
}

.layout-menu-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-brand-text) 18%, transparent);
}

.layout-primary-action {
  border: 1px solid var(--theme-layout-primary-action-border);
  background: var(--theme-layout-primary-action-background);
  color: var(--theme-layout-primary-action-text);
  box-shadow: var(--theme-layout-primary-action-shadow);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.layout-primary-action:hover {
  background: var(--theme-layout-primary-action-background-hover);
  color: var(--theme-layout-primary-action-text);
  text-decoration: none;
}

.layout-primary-action:focus-visible {
  outline: none;
  box-shadow: var(--theme-layout-primary-action-shadow), var(--theme-layout-primary-action-focus-ring);
}

.layout-footer {
  border-top: 1px solid var(--theme-layout-footer-border);
  background: var(--theme-layout-footer-background);
}

.layout-footer-content {
  color: var(--theme-layout-footer-text);
}

.layout-footer-link {
  color: var(--theme-layout-footer-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

.layout-footer-link:hover {
  color: var(--theme-layout-footer-link-hover);
}