/* ---------------------------------------------------------------------------
 * Horse Racing Tips — the design system for everything the plugin renders.
 *
 * It lives here rather than in the theme so the existing child theme is left
 * alone. The shortcodes carry their own design; Elementor keeps the layout.
 *
 * Red is already the brand — #E30118 is the most-used colour on the live site.
 * Here it stops being decoration and becomes a signal: it marks the verdict and
 * nothing else, so on a page full of prices and form figures the eye finds the
 * opinion. Everything else is deliberately quiet.
 * ------------------------------------------------------------------------- */

.hrt-nap, .hrt-bets, .hrt-writeups, .hrt-l15, .hrt-archive, .hrt-race, .hrt-result {
  --_paper: var(--hrt-paper, #FFFFFF);
  --_sink:  var(--hrt-sink,  #F4F6FA);
  --_line:  var(--hrt-line,  #E3E7EF);
  --_ink:   var(--hrt-ink,   #0E1116);
  --_muted: var(--hrt-muted, #5B6472);
  --_red:   var(--hrt-red,   #E30118);
  --_win:   var(--hrt-win,   #0B8457);
  --_gold:  var(--hrt-gold,  #B8860B);
  --_fd:    var(--hrt-display, "Bricolage Grotesque", system-ui, sans-serif);
  --_fb:    var(--hrt-body, "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif);
  --_fm:    var(--hrt-mono, "Roboto Mono", ui-monospace, monospace);
  color: var(--_ink);
  font-family: var(--_fb);
}

.hrt-nap h2, .hrt-bets h2, .hrt-writeups h2, .hrt-l15 h2, .hrt-archive h2,
.hrt-writeups h3 {
  font-family: var(--_fd); font-weight: 800; letter-spacing: -.02em; line-height: 1.08;
  text-wrap: balance;
}

/* --- the verdict: the one thing on the page that is ours ---------------- */
.hrt-verdict, .hrt-nap {
  background: var(--_paper); border: 1px solid var(--_line);
  border-left: 4px solid var(--_red); border-radius: 0 10px 10px 0;
  padding: 20px 22px; margin: 18px 0; box-shadow: 0 1px 2px rgba(14,17,22,.05);
}
.hrt-verdict__tag, .hrt-nap__h {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--_fm); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--_red); margin: 0 0 12px; font-weight: 500;
}
.hrt-verdict__tag::before, .hrt-nap__h::before {
  content: ""; width: 22px; height: 2px; background: var(--_red); flex: 0 0 auto;
}
.hrt-nap p, .hrt-verdict p { margin: 0 0 12px; line-height: 1.7; }
.hrt-nap p:last-of-type, .hrt-verdict p:last-of-type { margin-bottom: 0; }

/* --- a bet: horse, price, where, stake --------------------------------- */
.hrt-bet {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--_line);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.hrt-nap .hrt-bet:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.hrt-bet__head { display: contents; }
.hrt-bet__horse {
  font-family: var(--_fd); font-weight: 800; font-size: 20px; letter-spacing: -.02em;
}
.hrt-bet__price {
  font-family: var(--_fm); font-size: 19px; font-weight: 500; color: var(--_red);
  font-variant-numeric: tabular-nums;
}
.hrt-bet__where { font-family: var(--_fm); font-size: 11.5px; color: var(--_muted); }
.hrt-bet__stake {
  margin-left: auto; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--_win);
}

/* --- best bets --------------------------------------------------------- */
.hrt-bets__row {
  background: var(--_paper); border: 1px solid var(--_line); border-radius: 10px;
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center;
  padding: 14px 18px 14px 0; margin-bottom: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(14,17,22,.05);
}
.hrt-bets__pos {
  align-self: stretch; margin: -14px 0; background: var(--_sink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--_fd); font-weight: 800; font-size: 17px; color: var(--_muted);
}
.hrt-bets__row:first-of-type .hrt-bets__pos { background: var(--_red); color: #fff; }
.hrt-bets__verdict { margin: 6px 0 0; color: var(--_muted); font-size: 14px; }

/* --- write-ups: the content that earns the page ------------------------ */
.hrt-writeups .hrt-course {
  font-family: var(--_fd); font-weight: 800; font-size: 20px; letter-spacing: -.02em;
  margin: 26px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--_ink);
}
.hrt-race {
  background: var(--_paper); border: 1px solid var(--_line); border-radius: 10px;
  margin-bottom: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(14,17,22,.05);
}
.hrt-race__head {
  padding: 14px 18px; border-bottom: 1px solid var(--_line);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.hrt-race__time { font-family: var(--_fm); font-weight: 500; font-size: 17px; }
.hrt-race__name { font-family: var(--_fd); font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.hrt-race__cond { width: 100%; font-family: var(--_fm); font-size: 12.5px; color: var(--_muted); }
.hrt-race > p { padding: 0 18px; margin: 14px 0; line-height: 1.7; }
.hrt-race__verdict {
  margin: 0 18px 16px; padding: 12px 14px; background: var(--_sink);
  border-left: 3px solid var(--_red); border-radius: 0 6px 6px 0;
}

/* --- going watch ------------------------------------------------------- */
.hrt-going {
  background: #FFF8E1; border-left: 3px solid #E8A700; padding: 13px 16px;
  border-radius: 0 8px 8px 0; margin: 16px 0; color: #6B5200;
}
.hrt-going h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; font-family: var(--_fm); font-weight: 500; }
.hrt-going ul { margin: 0; padding-left: 18px; }

/* --- lucky 15 ---------------------------------------------------------- */
.hrt-l15 ol { margin: 0; padding-left: 20px; }
.hrt-l15 li { padding: 6px 0; }
.hrt-l15__where { font-family: var(--_fm); font-size: 13px; color: var(--_muted); }
.hrt-l15__price { font-family: var(--_fm); color: var(--_red); font-weight: 500; }

/* --- archive ----------------------------------------------------------- */
.hrt-archive ul {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px;
}
.hrt-archive a {
  display: block; padding: 9px 12px; border: 1px solid var(--_line);
  border-radius: 6px; text-decoration: none; color: var(--_ink); background: var(--_paper);
}
.hrt-archive a:hover { border-color: var(--_red); color: var(--_red); }

/* Yesterday's tips, shown because today's have not landed. Saying so beats
   silently serving stale content. */
.hrt-stale {
  background: #FFF8E1; border-left: 3px solid #E8A700; padding: 9px 12px;
  border-radius: 0 5px 5px 0; font-size: .9rem; color: #6B5200; margin: 0 0 14px;
}

.hrt-disc {
  margin: 14px 0 0; font-family: var(--_fm); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--_muted);
}

@media (max-width: 620px) {
  .hrt-bets__row { grid-template-columns: 34px 1fr; }
  .hrt-bet { gap: 8px; }
  .hrt-bet__stake { margin-left: 0; width: 100%; }
  .hrt-race > p, .hrt-race__verdict { margin-left: 14px; margin-right: 14px; padding-left: 0; padding-right: 0; }
  .hrt-race__verdict { padding: 12px 14px; }
}