/* SimplyIrfan Magazine v2.10.15 — homepage accessibility fixes.
   Loaded last so these rules take precedence over older homepage styles. */

/* WCAG AA contrast for small text on the light category tiles and sidebar widgets.
   #4b5563 on #f7f8fb is approximately 7.12:1 (normal text requirement: 4.5:1). */
:root:not([data-theme="dark"]) .home .category-tile small,
:root:not([data-theme="dark"]) .home .home-favorite-item time,
:root:not([data-theme="dark"]) .home .home-related-item time,
:root:not([data-theme="dark"]) .home .home-newsletter-widget p,
:root:not([data-theme="dark"]) .home .home-newsletter-widget .newsletter-setup-note {
  color: #4b5563 !important;
  opacity: 1 !important;
}
:root:not([data-theme="dark"]) .home .home-newsletter-form input[type="email"]::placeholder {
  color: #596575 !important;
  opacity: 1 !important;
}

/* Dark-mode equivalents: keep muted text legible against the dark widget surfaces. */
:root[data-theme="dark"] .home .category-tile small,
:root[data-theme="dark"] .home .home-favorite-item time,
:root[data-theme="dark"] .home .home-related-item time,
:root[data-theme="dark"] .home .home-newsletter-widget p,
:root[data-theme="dark"] .home .home-newsletter-widget .newsletter-setup-note {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}
:root[data-theme="dark"] .home .home-newsletter-form input[type="email"]::placeholder {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

/* Category labels are no longer tiny independent links in the lead story.
   Other homepage category links retain a comfortable 24px minimum target height. */
.home a.eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 5px 9px !important;
  line-height: 1.2 !important;
}

.home .hero-copy .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  margin: 0 0 10px !important;
  padding: 6px 10px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

/* The lead story is one large, non-overlapping article target. The category label
   and title are inside this anchor, avoiding overlapping image/title/category links. */
.home .hero-media::after {
  content: none !important;
}
.home .hero-image-link {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  color: #fff !important;
  text-decoration: none !important;
}
.home .hero-image-link::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(0,0,0,.02) 30%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.78) 100%) !important;
}
.home .hero-image-link:hover,
.home .hero-image-link:focus,
.home .hero-image-link:active {
  color: #fff !important;
}
.home .hero-image-link:focus-visible {
  outline: 3px solid #6258ff !important;
  outline-offset: -4px !important;
}
.home .hero-image-link > .hero-copy {
  position: absolute !important;
  z-index: 2 !important;
  top: auto !important;
  right: clamp(18px, 3vw, 38px) !important;
  bottom: clamp(18px, 3vw, 36px) !important;
  left: clamp(18px, 3vw, 38px) !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  pointer-events: none !important;
}
.home .hero-image-link > .hero-copy > h1 {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  text-decoration: none !important;
}

@media (max-width: 780px) {
  .home .hero-image-link > .hero-copy {
    right: 14px !important;
    bottom: 13px !important;
    left: 14px !important;
  }
  .home .hero-image-link > .hero-copy > .eyebrow {
    min-height: 28px !important;
    margin-bottom: 7px !important;
    padding: 6px 9px !important;
  }
}