/* Shared appearance controls. Header and footer structure stays fixed. */
html { scroll-padding-top: calc(var(--header-height) + 16px); }
.blog-navbar {
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--header-shadow);
}
.blog-navbar .container, .blog-footer .container {
  padding-left: var(--chrome-side-padding);
  padding-right: var(--chrome-side-padding);
}
.blog-navbar .blog-brand-logo {
  height: min(var(--logo-height), calc(var(--header-height) - 12px));
  width: auto;
  max-height: calc(var(--header-height) - 12px);
  max-width: min(var(--logo-max-width), 55vw);
  object-fit: contain;
}
.blog-navbar .navbar-toggler {
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--header-text);
  border: 1px solid color-mix(in srgb, var(--header-text) 12%, transparent);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.blog-navbar .navbar-toggler:hover,
.blog-navbar .navbar-toggler[aria-expanded="true"] {
  background: color-mix(in srgb, var(--header-text) 6%, transparent);
  border-color: color-mix(in srgb, var(--header-text) 22%, transparent);
}
.blog-navbar .navbar-toggler:focus { box-shadow: none; }
.blog-navbar .navbar-toggler:focus-visible {
  outline: 2px solid var(--header-text);
  outline-offset: 4px;
}
.blog-navbar .navbar-toggler-icon {
  background-image: none;
  position: relative;
  height: 22px;
  width: 22px;
  vertical-align: middle;
}
.blog-navbar .navbar-toggler-icon::before,
.blog-navbar .navbar-toggler-icon::after,
.blog-navbar .navbar-toggler-icon > span {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}
.blog-navbar .navbar-toggler-icon::before { transform: translateY(-7px); }
.blog-navbar .navbar-toggler-icon::after { transform: translateY(7px); }
.blog-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: rotate(45deg);
}
.blog-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(-45deg);
}
.blog-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon > span {
  opacity: 0;
  transform: scaleX(0.5);
}
@media (prefers-reduced-motion: reduce) {
  .blog-navbar .navbar-toggler,
  .blog-navbar .navbar-toggler-icon::before,
  .blog-navbar .navbar-toggler-icon::after,
  .blog-navbar .navbar-toggler-icon > span { transition: none; }
}
.blog-navbar .navbar-nav, .blog-navbar .nav-link,
.blog-navbar .dropdown-toggle, .blog-navbar .dropdown-menu, .blog-navbar .dropdown-item {
  font-family: var(--font-navigation);
}
.blog-navbar .nav-link, .blog-navbar .dropdown-toggle {
  font-size: var(--navigation-size);
  font-weight: var(--navigation-weight);
  letter-spacing: var(--navigation-spacing);
  text-transform: var(--navigation-transform);
  color: var(--header-text);
}
.blog-navbar .nav-link:hover, .blog-navbar .nav-link:focus-visible,
.blog-navbar .dropdown-toggle:hover, .blog-navbar .dropdown-toggle:focus-visible {
  color: var(--navigation-hover);
}
.blog-navbar .nav-link.active, .blog-navbar .nav-link:active,
.blog-navbar .dropdown-toggle.show, .blog-navbar .dropdown-toggle:active {
  color: var(--navigation-active);
}
.blog-navbar .nav-link:focus-visible, .blog-navbar .dropdown-toggle:focus-visible,
.blog-navbar .dropdown-item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.blog-navbar .dropdown-menu {
  background: var(--dropdown-bg);
  border-radius: var(--dropdown-radius);
  box-shadow: var(--dropdown-shadow);
  padding: var(--dropdown-padding);
}
.blog-navbar .dropdown-item {
  color: var(--dropdown-text);
  font-size: var(--navigation-size);
  font-weight: var(--navigation-weight);
  padding: var(--dropdown-item-padding);
  border-radius: min(var(--dropdown-radius), 10px);
}
.blog-navbar .dropdown-item:hover, .blog-navbar .dropdown-item:focus,
.blog-navbar .dropdown-item:focus-visible, .blog-navbar .dropdown-item:active {
  color: var(--dropdown-text);
  background: var(--dropdown-hover-bg);
}
.blog-footer {
  border-top: 1px solid var(--footer-border);
  font-family: var(--font-content);
  font-size: var(--footer-size);
  font-weight: var(--footer-weight);
  line-height: var(--footer-line);
}
.blog-footer .blog-footer-brand { font-family: var(--font-content-heading); }
.blog-footer a { color: var(--footer-link); }
.blog-footer a:hover, .blog-footer a:focus-visible {
  color: var(--footer-hover);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.blog-footer .brand-footer-container {
  padding-top: var(--footer-padding);
  padding-bottom: var(--footer-padding);
}
.blog-footer .brand-footer-row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin: 0;
  gap: var(--footer-column-gap);
}
.blog-footer .footer-links {
  gap: var(--footer-item-gap);
  text-align: left;
  justify-items: start;
}
.blog-footer-logo {
  display: block;
  height: var(--footer-logo-height);
  width: auto;
  max-width: min(var(--footer-logo-max-width), 100%);
  object-fit: contain;
  object-position: left;
}
@media (min-width: 992px) {
  .blog-navbar .navbar-nav {
    column-gap: var(--navigation-gap);
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .blog-navbar .navbar-collapse { min-width: 0; }
  .blog-footer .footer-links {
    text-align: var(--footer-alignment);
    justify-items: var(--footer-alignment);
  }
}
@media (max-width: 991.98px) {
  .blog-navbar .navbar-collapse { padding: 12px 0; }
  .blog-navbar .dropdown-menu { min-width: 0; max-width: 100%; }
}
