/* Blog-only styles (optional). Keep light; prefer Elementor Global Styles for typography/colors. */

.starter-breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .95em; }
.starter-breadcrumbs a { text-decoration: none; }
.starter-breadcrumbs .sep { opacity: .6; }
.starter-reading-time { opacity: .85; }
/* Button on the article page (open reader mode) */
.starter-reader-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(11,13,18,.12);
  background: rgba(11,13,18,.04);
  color: rgba(11,13,18,.78);
  cursor: pointer;
  font-weight: 600;
}

.starter-reader-btn:hover{ background: rgba(11,13,18,.06); }
.starter-reader-btn:focus-visible{ outline: 2px solid rgba(11,13,18,.25); outline-offset: 2px; }

.starter-reader-btn__icon{ display:grid; place-items:center; }

body .starter-reader-btn__label{ white-space: nowrap; }

/* If your site has dark sections, make it adapt better */
@media (prefers-color-scheme: dark) {
  .starter-reader-btn{
    border-color: rgba(242,244,248,.14);
    background: rgba(242,244,248,.06);
    color: rgba(242,244,248,.80);
  }
}

.starter-push-btn{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.78);
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}
.starter-push-btn:hover{ background: rgba(0,0,0,.06); }