/*
 * Homepage layout and dark mode from the vendor's homepage-replica (css/overrides.css), for the sections between
 * the hero and the footer. Loaded last on the homepage only. Mirrors takafuloman-website
 * styles/scss/components/_homepage-replica.scss and _theme-dark.scss, with this portal's class names.
 * Light mode is untouched: the dark rules only apply under html[data-theme="dark"] and read the --tk-* tokens
 * defined at the top of takaful.css.
 */

/* Steps stay on one row from 600px; narrower tablets scroll sideways inside the card. Phones stack, whatever the theme. */
@media (min-width: 600px) {
  .takaful-home-steps__card {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 28px;
    overflow-x: auto;
    /* Never scroll vertically: the steps slide up while they animate in, which would flash a scrollbar. */
    overflow-y: hidden;
    overflow-wrap: normal;
  }

  .takaful-home-steps__intro {
    flex: 0 0 230px;
    max-width: 250px;
  }

  .takaful-home-steps__list {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(var(--steps-columns, 4), minmax(140px, 1fr));
    gap: 20px 16px;
    width: auto;
    min-width: calc(var(--steps-columns, 4) * 140px);
    margin: 0;
  }
}

@media (min-width: 600px) and (max-width: 991px) {
  .takaful-home-steps__card { gap: 16px; padding: 20px 16px; }
  .takaful-home-steps__intro { flex-basis: 168px; max-width: 180px; }
  .takaful-home-steps__title { font-size: 22px; }
  .takaful-home-steps__icon-ring { width: 56px; height: 56px; font-size: 18px; }
  .takaful-home-steps__item h3 { font-size: 13px; }
  .takaful-home-steps__item p { font-size: 11px; }
}

@media (max-width: 599px) {
  .takaful-home-steps__card { flex-direction: column; align-items: stretch; overflow: visible; gap: 18px; }
  .takaful-home-steps__intro { flex: none; width: 100%; max-width: none; text-align: center; }
  .takaful-home-steps__list { width: 100%; min-width: 0; grid-template-columns: repeat(var(--steps-columns, 4), minmax(0, 1fr)); gap: 12px 8px; }
  .takaful-home-steps__connector { display: none; }
  .takaful-home-steps__icon-ring { width: 46px; height: 46px; }
  .takaful-home-steps__item h3 { font-size: 12px; }
  .takaful-home-steps__item p { font-size: 10px; }
}

/* Dark mode */
[data-theme="dark"] .takaful-home-steps,
[data-theme="dark"] .takaful-home-trust,
[data-theme="dark"] .takaful-home-statistics,
[data-theme="dark"] .takaful-home-links,
[data-theme="dark"] .takaful-home-testimonials,
[data-theme="dark"] .takaful-home-awards,
[data-theme="dark"] .takaful-home-news {
  background: var(--tk-section) !important;
  color: var(--tk-ink);
}

/* Headings */
[data-theme="dark"] .takaful-home-section-head h2,
[data-theme="dark"] .takaful-home-steps__title,
[data-theme="dark"] .takaful-home-steps__item h3,
[data-theme="dark"] .takaful-home-steps__item--highlight h3,
[data-theme="dark"] .takaful-home-links h2,
[data-theme="dark"] .takaful-home-links h3,
[data-theme="dark"] .takaful-home-links .takaful-home-link-card__head h3,
[data-theme="dark"] .takaful-home-testimonials h2,
[data-theme="dark"] .takaful-home-testimonial-card strong,
[data-theme="dark"] .takaful-home-awards h2,
[data-theme="dark"] .takaful-home-news h2,
[data-theme="dark"] .takaful-home-news-card__body h3,
[data-theme="dark"] .takaful-home-trust h2,
[data-theme="dark"] .takaful-home-trust__feature h3 {
  color: var(--tk-ink);
}

/* Rich text from the CMS can carry the dark theme colour inline; it would vanish on the dark surfaces. */
[data-theme="dark"] .takaful-home-steps span[style*="#1a1a1a"],
[data-theme="dark"] .takaful-home-trust span[style*="#1a1a1a"],
[data-theme="dark"] .takaful-home-links span[style*="#1a1a1a"],
[data-theme="dark"] .takaful-home-testimonials span[style*="#1a1a1a"],
[data-theme="dark"] .takaful-home-awards span[style*="#1a1a1a"],
[data-theme="dark"] .takaful-home-news span[style*="#1a1a1a"] {
  color: var(--tk-ink) !important;
}

[data-theme="dark"] .takaful-home-section-head__eyebrow,
[data-theme="dark"] .takaful-home-steps__eyebrow {
  color: var(--tk-eyebrow);
}

/* Secondary text */
[data-theme="dark"] .takaful-home-link-card p,
[data-theme="dark"] .takaful-home-news-card__body p,
[data-theme="dark"] .takaful-home-news-card__date,
[data-theme="dark"] .takaful-home-testimonial-card p,
[data-theme="dark"] .takaful-home-testimonial-card__tag,
[data-theme="dark"] .takaful-home-trust__feature p,
[data-theme="dark"] .takaful-home-steps__subtitle,
[data-theme="dark"] .takaful-home-steps__item p,
[data-theme="dark"] .takaful-home-statistics__copy span,
[data-theme="dark"] .takaful-home-trust .text-muted,
[data-theme="dark"] .takaful-home-links .text-muted {
  color: var(--tk-muted) !important;
}

/* Cards */
[data-theme="dark"] .takaful-home-steps__card,
[data-theme="dark"] .takaful-home-link-card,
[data-theme="dark"] .takaful-home-testimonial-card,
[data-theme="dark"] .takaful-home-news-card,
[data-theme="dark"] .takaful-home-awards__item,
[data-theme="dark"] .takaful-home-trust__features {
  background: var(--tk-card) !important;
  color: var(--tk-ink);
  border-color: var(--tk-card-border) !important;
  box-shadow: var(--tk-card-shadow) !important;
}

[data-theme="dark"] .takaful-home-awards__item.is-active {
  background: linear-gradient(135deg, #139bd3, #98c829) !important;
  border-color: transparent !important;
  color: #fff !important;
}
[data-theme="dark"] .takaful-home-awards__media { background: var(--tk-media); }
[data-theme="dark"] .takaful-home-news-card__read-more,
[data-theme="dark"] .takaful-home-news-card:hover .takaful-home-news-card__read-more { color: var(--tk-blue-text); }

/* Lines and rings */
[data-theme="dark"] .takaful-home-steps__divider { background: var(--tk-line); }
[data-theme="dark"] .takaful-home-steps__ring-track { stroke: var(--tk-ring-track); }
[data-theme="dark"] .takaful-home-trust__feature { border-color: var(--tk-line-soft); }
[data-theme="dark"] .takaful-home-testimonials__pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active),
[data-theme="dark"] .takaful-home-news__pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) { background: var(--tk-bullet); }

/* Accents */
[data-theme="dark"] .takaful-home-link-card__icon { background: var(--tk-accent-tint); color: var(--tk-green-text); }
[data-theme="dark"] .takaful-home-trust .btn-get-outline { background: transparent; color: var(--tk-green-text); border-color: #98c829; }
[data-theme="dark"] .takaful-home-trust .btn-get-outline:hover,
[data-theme="dark"] .takaful-home-trust .btn-get-outline:focus-visible { background: var(--tk-accent-tint); color: var(--tk-ink); }

[data-theme="dark"] .takaful-carousel-nav {
  background: var(--tk-nav-bg) !important;
  color: var(--tk-nav-fg) !important;
  border-color: var(--tk-nav-border) !important;
}

/* CMS images are often dark artwork on a transparent background: give them a light tile on the dark cards. */
[data-theme="dark"] .takaful-home-link-card__icon img,
[data-theme="dark"] .takaful-home-statistics__icon img {
  border-radius: 12px;
  background: var(--tk-icon-tile);
}