/* ================================================================
   strong.css — The Honour Roll · Spotlight Winners
   All selectors prefixed with body div#page for WordPress specificity
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,300..900;1,300..900&display=swap');

/* ── Design tokens ──────────────────────────────────────────────── */
body div#page {
  --ink:              #282828;
  --ink-muted:        rgba(40,40,40,.70);
  --ink-soft:         rgba(40,40,40,.48);
  --paper:            #ffffff;
  --cream:            #EEF2F5;
  --cream2:           #DDE6EC;
  --hairline:         rgba(30,57,78,.12);
  --hairline-strong:  rgba(30,57,78,.25);
  --accent:           #D0AF21;
  --accent-soft:      rgba(208,175,33,.10);
  --accent-ink:       #9A8018;
  --accent-light:     #F0DE8A;
  --accent-lavender:  #FBF7DC;
  --forest:           #1E394E;
  --forest-soft:      rgba(30,57,78,.10);
  --forest-light:     #B8CFE0;
  --ember:            #282828;
  --ember-soft:       rgba(40,40,40,.10);
  --ember-light:      #C8C8C8;
  font-family: Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background: var(--paper);
}

body div#page section[id] {
  scroll-margin-top: 20px;
}

/* ── Eyebrow label ──────────────────────────────────────────────── */
body div#page .strong-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
body div#page .strong-eyebrow .strong-bar {
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

/* ── Spotlight category filter pills ───────────────────────────── */
body div#page .strong-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--hairline-strong);
  color: var(--ink-muted);
  background: #fff;
  transition: border-color .15s, color .15s, background-color .15s;
  cursor: pointer;
  font-family: Roboto, sans-serif;
  line-height: 1;
}
@media (min-width: 640px) {
  body div#page .strong-filter-pill {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
body div#page .strong-filter-pill:hover {
  border-color: var(--ink);
  color: var(--ink);
}
body div#page .strong-filter-pill.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ── Year pills ─────────────────────────────────────────────────── */
body div#page .strong-year-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid var(--hairline-strong);
  color: var(--ink-muted);
  background: #fff;
  transition: border-color .15s, color .15s, background-color .15s;
  cursor: pointer;
  line-height: 1;
}
body div#page .strong-year-pill:hover {
  border-color: var(--ink);
  color: var(--ink);
}
body div#page .strong-year-pill.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ── Hero ───────────────────────────────────────────────────────── */
body div#page .strong-hero {
  position: relative !important;
  overflow: hidden !important;
}
body div#page .strong-hero__gold-bar {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: #D0AF21;
  z-index: 2;
}
body div#page .strong-hero__overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
}
body div#page .strong-hero__fade {
  position: absolute !important;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  z-index: 2;
}
body div#page .strong-hero__content {
  position: relative !important;
  z-index: 3;
}

/* ── Spotlight cards ─────────────────────────────────────────────── */
body div#page .strong-spotlight-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  cursor: pointer;
}
body div#page .strong-spotlight__overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}
body div#page .strong-spotlight__content {
  position: relative !important;
  z-index: 2 !important;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  color: #fff !important;
}
/* Force white on all text inside spotlight cards — theme headings/links can't override */
body div#page .strong-spotlight__content h2,
body div#page .strong-spotlight__content h3,
body div#page .strong-spotlight__content h4,
body div#page .strong-spotlight__content p,
body div#page .strong-spotlight__content a,
body div#page .strong-spotlight__content span {
  color: inherit !important;
}
body div#page .strong-spotlight__content h2,
body div#page .strong-spotlight__content h3,
body div#page .strong-spotlight__content h4 {
  margin-top: 0 !important;
}

/* ── Winner cards ────────────────────────────────────────────────── */
body div#page .strong-winner-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
}
body div#page .strong-winner-card__bar {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 4px;
}
/* Prevent theme heading/link colours from bleeding in */
body div#page .strong-winner-card h2,
body div#page .strong-winner-card h3,
body div#page .strong-winner-card h4 {
  color: #282828 !important;
  margin-top: 0 !important;
}

/* ── About block (spotlights section) ───────────────────────────── */
/* No aspect-ratio here — the grid row height is set by the 16/9 image cards;
   height:100% stretches the about block to fill that same row height. */
body div#page .strong-about-block {
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}
body div#page .strong-about-block h2,
body div#page .strong-about-block h3,
body div#page .strong-about-block h4 {
  margin-top: 0 !important;
  color: #282828 !important;
}

/* ── Nominate panel ──────────────────────────────────────────────── */
body div#page .strong-nominate-panel {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px;
}
body div#page .strong-nominate-panel__watermark {
  position: absolute !important;
  top: -1.5rem;
  right: -1.5rem;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 140px;
  color: rgba(208,175,33,.10);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* ── Filter cards ───────────────────────────────────────────────── */
body div#page .filter-card {
  --fc:      #1E394E;
  --fc-soft: rgba(30,57,78,.08);
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1.1rem 1.25rem !important;
  border-radius: 14px !important;
  border: 2px solid var(--fc-soft) !important;
  background: #fff !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .15s;
  font-family: Roboto, sans-serif !important;
  line-height: 1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body div#page .filter-card:hover {
  border-color: var(--fc) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  transform: translateY(-1px);
}
body div#page .filter-card.active {
  border-color: var(--fc) !important;
  background: var(--fc) !important;
  color: #fff !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  transform: translateY(-2px);
}
body div#page .filter-card .fc-icon {
  flex-shrink: 0;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: var(--fc-soft) !important;
  color: var(--fc) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s, color .2s;
}
body div#page .filter-card.active .fc-icon {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
body div#page .filter-card .fc-name,
body div#page .filter-card .fc-sub {
  color: inherit !important;
}
body div#page .filter-card .fc-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink) !important;
  transition: color .2s;
  display: block;
  margin-bottom: 3px;
}
body div#page .filter-card.active .fc-name {
  color: #fff !important;
}
body div#page .filter-card .fc-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted) !important;
  letter-spacing: .04em;
  transition: color .2s;
  display: block;
}
body div#page .filter-card.active .fc-sub {
  color: rgba(255,255,255,.65) !important;
}

/* ── Arrow icon ─────────────────────────────────────────────────── */
body div#page .strong-arrow {
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
  position: relative;
  vertical-align: middle;
}
body div#page .strong-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}