/* Custom overrides and component responsive fixes */

/* Ensure terms container does not squeeze aside in narrow widths */
@media (max-width: 600px) {
  .terms-container {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-l) !important;
  }

  .terms-sidebar {
    width: 100% !important;
    position: static !important;
  }

  .hero-meta-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-meta-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }

  .hero-meta-item strong {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
}

/* Ensure duotone panels properly separate blocks on mobile so text never overlaps */
.duotone-caesura-panel {
  display: block !important;
  position: relative !important;
  height: auto !important;
  min-height: 320px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clear: both !important;
}

.duotone-caesura-panel .duotone-content {
  position: relative !important;
  z-index: 2 !important;
  padding: var(--space-xl) var(--space-l) !important;
}

.page-panel {
  position: relative !important;
  clear: both !important;
}

/* Fix nav_missing at 1440px and 1920px */
@media (min-width: 1025px) {
  header.site-header,
  header.site-header.is-scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    width: var(--sidebar-width) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    border-right: 1px solid var(--line-grid) !important;
    border-bottom: none !important;
    overflow-y: auto !important;
    z-index: 500 !important;
  }

  header.site-header .nav-panel,
  header.site-header.is-scrolled .nav-panel {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow-y: visible !important;
  }

  header.site-header .nav-list,
  header.site-header.is-scrolled .nav-list {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  header.site-header .nav-item,
  header.site-header.is-scrolled .nav-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  header.site-header .nav-link,
  header.site-header.is-scrolled .nav-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Fix text_overlap and relative positioning collisions on mobile */
.page-panel,
.duotone-caesura-panel,
.duotone-caesura {
  position: relative;
  clear: both;
}

.duotone-caesura-panel {
  min-height: 280px;
  height: auto;
  aspect-ratio: auto !important;
}

.duotone-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-meta-bar {
  position: relative;
  clear: both;
}

/* Contrast enhancement for bold text inside hero meta bars and badges */
.hero-meta-item strong {
  background-color: #230B0D !important;
  color: #FFFFFF !important;
  border: 1px solid #D4A359 !important;
  padding: 0.2rem 0.5rem !important;
  display: inline-block !important;
}

/* Fix mobile viewport blank layout on index.html: ensure main-content and page-panel have content height and flow */
@media (max-width: 1024px) {
  .site-wrapper {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
  }

  .main-column {
    margin-left: 0 !important;
    padding-top: var(--header-mobile-height) !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .page-panel-hero {
    min-height: auto !important;
    padding-top: calc(var(--header-mobile-height) + 1rem) !important;
    padding-bottom: 2rem !important;
  }
}