/**
 * Shared blog article chrome — breadcrumbs + prev/next navigation.
 * Injected on single-post pages. Overrides missing Utouch theme CSS.
 */

/* -------------------------------------------------------------------------- */
/* Centered article column (overrides per-page blog-post-layout flush-left)   */
/* -------------------------------------------------------------------------- */
body.single-post #primary.container {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}

body.single-post #primary .row.medium-padding30 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.single-post #primary .col-lg-8 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.single-post .post-standard-details .post__content-info,
body.single-post .post-standard-details .post__content {
  max-width: 720px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body.single-post .post-standard-details .post__content-info .post__title,
body.single-post .post__subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.single-post .post__hero-meta {
  justify-content: center !important;
  text-align: center !important;
}

/* -------------------------------------------------------------------------- */
/* Breadcrumbs: horizontal trail (not a vertical numbered list)               */
/* -------------------------------------------------------------------------- */
.breadcrumbs,
.breadcrumbs--bordered,
.single-post .breadcrumbs {
  display: block !important;
  margin: 0 auto 1rem !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 720px !important;
  text-align: center !important;
}

.breadcrumbs-wrap,
.single-post .breadcrumbs-wrap,
ol.breadcrumbs-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  counter-reset: none !important;
}

.breadcrumbs-item,
.single-post .breadcrumbs-item,
ol.breadcrumbs-wrap > li.breadcrumbs-item {
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
  font-family: Ubuntu, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  color: #64748b !important;
}

.breadcrumbs-item::marker,
.breadcrumbs-item::before,
ol.breadcrumbs-wrap > li::marker,
ol.breadcrumbs-wrap > li::before {
  content: none !important;
  display: none !important;
}

.breadcrumbs-item:not(:last-child)::after {
  content: "/" !important;
  display: inline-block !important;
  margin: 0 0.55rem !important;
  color: #cbd5e1 !important;
  font-weight: 400 !important;
  pointer-events: none !important;
}

.breadcrumbs-item a {
  color: #1dbb99 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.breadcrumbs-item a:hover {
  color: #17a885 !important;
  text-decoration: underline !important;
}

.breadcrumbs-item.active span,
.breadcrumbs-item.active {
  color: #64748b !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

/* -------------------------------------------------------------------------- */
/* Hero / featured image — centered under title                                 */
/* -------------------------------------------------------------------------- */
.single-post .post-standard-details > .post-thumb {
  max-width: 1024px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.single-post .post-standard-details > .post-thumb img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* -------------------------------------------------------------------------- */
/* Prev / next — side-by-side, clearer hierarchy, brand hover                 */
/* -------------------------------------------------------------------------- */
.single-post .post-navigation-cards {
  max-width: 1024px !important;
  width: 100% !important;
  margin-top: min(80px, 8vw) !important;
  margin-right: auto !important;
  margin-bottom: 1.5rem !important;
  margin-left: auto !important;
  padding: 1.75rem 1.5rem 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.single-post .post-nav-heading {
  margin: 0 0 1rem !important;
  font-family: Ubuntu, system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  text-align: left !important;
}

.single-post .post-nav-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.single-post .post-nav-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: unset !important;
  margin: 0 !important;
  padding: 1.15rem 1.25rem !important;
  background: #f8fafb !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: inherit !important;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease !important;
}

.single-post .post-nav-card:hover {
  background: #fff !important;
  border-color: #1dbb99 !important;
  box-shadow: 0 6px 20px rgba(15, 45, 40, 0.08) !important;
  transform: translateY(-2px) !important;
}

.single-post .post-nav-card__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
  min-width: 0 !important;
  width: 100% !important;
}

.single-post .post-nav-card__label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  margin: 0 !important;
  font-family: Ubuntu, system-ui, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  transition: color 0.18s ease !important;
}

.single-post .post-nav-card:hover .post-nav-card__label {
  color: #1dbb99 !important;
}

.single-post .post-nav-chevron {
  flex-shrink: 0 !important;
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.18s ease !important;
}

.single-post .post-nav-card--prev:hover .post-nav-chevron {
  transform: translateX(-3px) !important;
}

.single-post .post-nav-card--next:hover .post-nav-chevron {
  transform: translateX(3px) !important;
}

.single-post .post-nav-card__title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  margin: 0 !important;
  font-family: Ubuntu, system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #0f172a !important;
}

.single-post .post-nav-card--next {
  text-align: right !important;
}

.single-post .post-nav-card--next .post-nav-card__content {
  align-items: flex-end !important;
}

.single-post .post-nav-card--next .post-nav-card__label {
  flex-direction: row !important;
}

.single-post .post-nav-card--next .post-nav-card__title {
  text-align: right !important;
}

@media (max-width: 700px) {
  .single-post .breadcrumbs {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .single-post .post-nav-cards {
    grid-template-columns: 1fr !important;
  }

  .single-post .post-nav-card--next {
    text-align: left !important;
  }

  .single-post .post-nav-card--next .post-nav-card__content {
    align-items: flex-start !important;
  }

  .single-post .post-nav-card--next .post-nav-card__title {
    text-align: left !important;
  }

  .breadcrumbs-item {
    font-size: 0.8125rem !important;
  }

  .breadcrumbs-item.active span {
    /* Keep current page readable but don’t dominate small screens */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    overflow: hidden !important;
    max-width: 14rem !important;
  }
}