/*
 * CricketWindies "Get Started" banner (windies_get_started plugin).
 *
 * Uses --surface/--border/--ink/--muted/--blue-link throughout, so it
 * adapts to dark mode automatically without its own [data-theme="dark"]
 * block — same reasoning as Recent Posts' redesign. The left border and
 * the hover color both need an explicit dark override though, since
 * --maroon reads poorly on this theme's dark surfaces (see theme.css's
 * .post-actions a:hover for the same fix, same reasoning).
 */

.cw-get-started {
  position: relative;
  margin-bottom: 11px;
  padding: 14px 40px 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--maroon);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
}

[data-theme="dark"] .cw-get-started {
  border-left-color: var(--gold);
}

.cw-get-started p {
  margin: 0;
  color: var(--ink);
}

.cw-get-started__emoji {
  margin-right: 6px;
}

.cw-get-started a {
  color: var(--blue-link);
  font-weight: 700;
  text-decoration: none;
}

.cw-get-started a:hover {
  color: var(--maroon);
}

[data-theme="dark"] .cw-get-started a:hover {
  color: var(--gold);
}

/* An SVG X, not the × glyph -- see .cw-catch-up__dismiss's identical
   note: that character's vertical position inside its own line box is
   font/OS-dependent, an SVG's geometry centers exactly everywhere.
   min-height/padding:0 needed too -- the generic `button` base rule's
   min-height:35px and padding:0 14px otherwise win as floors over this
   button's own height/no-padding, silently pushing the icon off-center. */
.cw-get-started__dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.cw-get-started__dismiss .icon {
  width: 15px;
  height: 15px;
}

.cw-get-started__dismiss:hover {
  color: var(--ink);
  background: var(--surface-hover);
}