/* Component overrides */
/* Offscreen text fix for Check Date at 1440px and mobile nav button visibility */
@media (max-width: 639px) {
  .header-actions .btn {
    display: none !important;
  }
}

/* Ensure mobile menu toggle is always visible on small viewports */
@media (max-width: 1139px) {
  .nav-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Site header condensed and fixed overlay blocks content */
.site-header {
  height: auto;
  max-height: 80px;
}
.site-header.is-condensed {
  padding: 0.4rem 0 !important;
}
.page-header-block,
.legal-page-header,
.hero-split {
  scroll-margin-top: 5rem;
}
.page-header-block {
  padding-top: calc(5.5rem + clamp(2rem, 4vw, 3.5rem)) !important;
}

/* About statement-divider-caption contrast fix */
.statement-divider-caption {
  background: rgba(0, 0, 0, 0.95) !important;
  color: #ffffff !important;
}
.statement-divider-caption span,
.statement-divider-caption span.mono-num {
  color: #ffffff !important;
  background-color: transparent !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Collage section covered_text and escaped_text fixes */
.collage-item {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.collage-item img {
  width: 100% !important;
  height: auto !important;
  max-height: calc(100% - 2.5rem) !important;
  object-fit: cover !important;
}

.collage-item-caption {
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
  background-color: #ffffff !important;
  color: var(--ink) !important;
  padding: 0.5rem 0.5rem !important;
  font-weight: 600 !important;
  min-height: 2.2rem !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

@media (min-width: 768px) {
  .collage-stage {
    min-height: 640px !important;
  }
  .collage-item-primary {
    height: 400px !important;
  }
  .collage-item-secondary {
    height: 360px !important;
    z-index: 5 !important;
  }
  .collage-item-tertiary {
    height: 340px !important;
    bottom: -10px !important;
    z-index: 6 !important;
  }
}

/* Fix header container padding or flex-shrink to prevent Check Date button from touching viewport edge at 1440px */
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  overflow: visible !important;
}
.header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.header-actions .btn {
  margin-right: 0;
}

/* Fix nav_missing at 320px and 390px */
@media (max-width: 1139px) {
  header.site-header .nav-toggle,
  header.site-header.is-condensed .nav-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-height: 44px !important;
    min-width: 44px !important;
  }
}
@media (max-width: 480px) {
  .site-header .brand-logo {
    max-width: 180px !important;
    height: auto !important;
  }
  .header-actions {
    display: flex !important;
    visibility: visible !important;
  }
}

/* Fix offscreen_text at 1440px: a.btn.btn-primary with text "Check Date" sliced by viewport edge */
@media (min-width: 1200px) and (max-width: 1500px) {
  .site-header .header-phone {
    display: none !important;
  }
}
.site-header .header-actions {
  flex-shrink: 0 !important;
  margin-right: 0 !important;
}
.site-header .container {
  padding-left: clamp(1rem, 3vw, 2.5rem) !important;
  padding-right: clamp(1rem, 3vw, 2.5rem) !important;
  box-sizing: border-box !important;
}

/* Fix overlay_blocks_content at 1024px and 1920px: header.site-header.is-condensed blocks 31% of h1 */
html {
  scroll-padding-top: 7rem !important;
}
.page-header-block {
  padding-top: calc(7rem + clamp(2rem, 4vw, 4rem)) !important;
}
.hero-split {
  padding-top: 6.5rem !important;
}
@media (min-width: 992px) {
  .hero-split {
    padding-top: 6.5rem !important;
  }
  .page-main > section:first-of-type,
  .page-main > div.page-header-block:first-of-type {
    padding-top: calc(7rem + 2rem) !important;
  }
}

/* Fix covered_text on index.html at 1920px: div.collage-item-caption "Daily Scratch Prep Station" painted over by img */
.collage-item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}
.collage-item img {
  position: relative !important;
  z-index: 1 !important;
}
.collage-item-caption {
  position: relative !important;
  z-index: 10 !important;
  background-color: #ffffff !important;
  color: #111111 !important;
  min-height: auto !important;
}

/* Fix escaped_text on index.html: div.collage-item-caption hangs 33px / 81px past bottom edge */
.collage-item-tertiary {
  height: auto !important;
  min-height: 320px !important;
  bottom: 0 !important;
}
@media (min-width: 768px) {
  .collage-stage {
    min-height: 680px !important;
    padding-bottom: 2rem !important;
  }
  .collage-item-primary {
    height: auto !important;
    min-height: 400px !important;
  }
  .collage-item-secondary {
    height: auto !important;
    min-height: 360px !important;
  }
  .collage-item-tertiary {
    height: auto !important;
    min-height: 360px !important;
  }
}
.collage-item {
  height: auto !important;
  box-sizing: border-box !important;
}

/* Fix low_contrast on about.html at 390px: rgb(255, 255, 255) on flat backdrop rgb(246, 246, 246) */
.statement-divider-photo {
  background-color: #111111 !important;
}
.statement-divider-caption {
  position: relative !important;
  background: #111111 !important;
  color: #ffffff !important;
  padding: 1rem var(--container-pad) !important;
}
.statement-divider-caption span,
.statement-divider-caption span.mono-num {
  color: #ffffff !important;
  background-color: transparent !important;
  text-shadow: none !important;
}