/* iBlogger v26 — Light-theme readability for the homepage hero eyebrow.
   Scope: homepage only. Dark mode stays unchanged. */
html:not([data-theme="dark"]) body.home-page.v4-page #top .v4-eyebrow {
  color: #4f43c7 !important;
  background: rgba(255, 255, 255, .96) !important;
  border-color: rgba(105, 91, 231, .28) !important;
  box-shadow: 0 8px 24px rgba(65, 55, 160, .16), inset 0 1px 0 rgba(255,255,255,.92) !important;
  text-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

html:not([data-theme="dark"]) body.home-page.v4-page #top .v4-eyebrow > i {
  background: #695be7 !important;
  box-shadow: 0 0 0 4px rgba(105, 91, 231, .13) !important;
}

html:not([data-theme="dark"]) body.home-page.v4-page #top .v4-eyebrow > .home-text-icon {
  color: #695be7 !important;
  filter: none !important;
}

@media (max-width: 620px) {
  /* The approved mobile hero artwork contains an embedded dark eyebrow.
     In Light Mode reveal the real DOM label as an opaque light badge over it. */
  html:not([data-theme="dark"]) body.home-page.v4-page #top .v4-eyebrow {
    position: absolute !important;
    top: 12.35% !important;
    left: 50% !important;
    right: auto !important;
    z-index: 20 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: calc(100% - 56px) !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 5px 11px !important;
    gap: 6px !important;
    border-radius: 999px !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    font-size: clamp(9px, 2.45vw, 10.5px) !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  html:not([data-theme="dark"]) body.home-page.v4-page #top .v4-eyebrow > .home-text-icon {
    width: 12px !important;
    height: 12px !important;
  }
}