/* WordPress markup bridges. Do not load in wp-admin. */

.admin-bar header.site {
  top: calc(40px + var(--wp-admin--admin-bar--height, 32px));
}
.admin-bar body.inner header.site {
  top: 0;
}

.skip-link.screen-reader-text {
  position: absolute;
  left: 6px;
  top: -100px;
  z-index: 100000;
  padding: 8px 16px;
  background: var(--pine);
  color: var(--ivory);
}
.skip-link.screen-reader-text:focus {
  top: 8px;
}

.alignwide { max-width: 1400px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; max-width: none; }

.wp-block-image img,
.wp-block-post-featured-image img {
  height: auto;
}

body.v27 .has-baked-label img,
.catalog-card.has-baked-label img,
.detail.has-baked-label img {
  object-fit: contain;
}

.sinricon-empty {
  padding: 72px 0 96px;
}
.sinricon-empty p {
  max-width: 62ch;
  color: var(--mute);
}

.sinricon-editor-note {
  display: none;
}

#wpadminbar { z-index: 100000; }

.sticky {
  z-index: 20;
}
.lead-fab {
  z-index: 25;
}

body.nav-open {
  overflow: hidden;
}

/*
  390px Hero overflow came from .hero-a img scale(1.03) expanding
  document scrollWidth. Clip at the overflowing element, not the body.
*/
.hero-a,
.hero-a picture {
  overflow: clip;
  contain: paint;
  max-width: 100%;
}
.hero-media {
  overflow: clip;
  contain: paint;
}
.hero-a img,
.hero-media img {
  width: 100%;
  height: 100%;
}
@media (max-width: 720px) {
  .hero-a img {
    transform: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
  }
}
.hero-copy > p,
.hero-copy > h1 {
  margin-top: 0;
}
.hero-copy .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-copy .wp-block-button__link {
  text-decoration: none;
}

.strip-grid .wp-block-group,
.about-chapter .wp-block-group {
  margin: 0;
}

.catalog-filters .filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  max-width: 100%;
}
.catalog-filters a {
  display: inline-block;
  padding: 6px 0;
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.catalog-filters a.is-active,
.catalog-filters a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--copper);
}
@media (max-width: 720px) {
  .catalog-card,
  .catalog-grid,
  .detail,
  .article-layout,
  .insight-card img {
    max-width: 100%;
  }
}

.has-baked-label .catalog-fill,
.product.has-baked-label img.catalog-fill {
  object-fit: contain;
  object-position: center;
}