/*
 * Stoxello Product Theme – front-end styles
 * Version: 1.2.0
 */

:root {
  --stoxello-bg: #ffffff;
  --stoxello-fg: #0b1320;
  --stoxello-muted: #64748b;
  --stoxello-card: #ffffff;
  --stoxello-border: rgba(15, 23, 42, 0.12);
  --stoxello-primary: #0d6efd;
}

body {
  background: var(--stoxello-bg);
  color: var(--stoxello-fg);
}

body.stoxello-dark {
  --stoxello-bg: #0b1220;
  --stoxello-fg: #e5e7eb;
  --stoxello-muted: #94a3b8;
  --stoxello-card: #0f172a;
  --stoxello-border: rgba(148, 163, 184, 0.25);
  --stoxello-primary: #60a5fa;
}

/* Make common blocks respect theme colors */
.wp-site-blocks,
.wp-block-group {
  color: inherit;
}

/* Badges (New / Updated) */
.stoxello-badge {
  display: inline-block;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.22rem 0.42rem;
  border-radius: 999px;
  margin-left: 0.5rem;
  vertical-align: middle;
  border: 1px solid var(--stoxello-border);
}

.stoxello-badge-new {
  background: rgba(13, 110, 253, 0.12);
  color: var(--stoxello-primary);
}

.stoxello-badge-updated {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

body.stoxello-dark .stoxello-badge-updated {
  color: #4ade80;
}

/* Theme toggle button */
.stoxello-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--stoxello-border);
  background: var(--stoxello-card);
  color: var(--stoxello-fg);
  font-size: 0.9rem;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
}

.stoxello-theme-toggle:hover {
  border-color: rgba(13, 110, 253, 0.45);
}

.stoxello-theme-toggle-floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

/* Featured card fix in dark hero */
.hero,
.hero .hero-left,
.hero .hero-left * {
  color: #ffffff;
}

.hero .featured-card {
  background: #ffffff;
  color: #0b1320;
}

.hero .featured-card * {
  color: #0b1320;
}

body.stoxello-dark .hero .featured-card {
  background: var(--stoxello-card);
  color: var(--stoxello-fg);
}

body.stoxello-dark .hero .featured-card * {
  color: var(--stoxello-fg);
}

/* Featured rotator */
.stoxello-featured-rotator {
  display: grid;
  gap: 0.5rem;
}

.stoxello-featured-kicker {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stoxello-muted);
}

.stoxello-featured-title {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.stoxello-featured-excerpt {
  color: var(--stoxello-muted);
  font-size: 0.95rem;
}

/* Platform / Docs cards */
.stx-card {
  background: var(--stoxello-card);
  border-color: var(--stoxello-border) !important;
  overflow: hidden;
}

/* Ensure featured images behave like proper card headers */
.stx-card .card-img-top {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

@media (min-width: 992px) {
  .stx-card .card-img-top {
    height: 200px;
  }
}