/* Yay! Theme Poll — front end.
   Deliberately inherits the theme's font and body size. Colours in one place. */

.ycp-poll {
  --ycp-ink: #30353d;
  --ycp-pink: #f977c5;
  --ycp-pink-dark: #ff44b4;
  --ycp-teal: #00d7de;
  --ycp-beige: #f6efe2;
  --ycp-beige-soft: #fdf9f2;
  --ycp-border: #dcd5d0;
  --ycp-rule: #e2e8f0;
  --ycp-red: #d02323;

  border: 2px solid var(--ycp-ink);
  border-radius: 20px;
  padding: clamp(20px, 5vw, 32px);
  color: var(--ycp-ink);
}

.ycp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ycp-month {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  background: #f6ea06;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.ycp-count { font-size: 14px; font-weight: 700; }
.ycp-urgent { color: var(--ycp-red); }

.ycp-question {
  margin: 0 0 10px;
  font-weight: 800;
  line-height: 1.3;
}

/* Paragraph spacing in the ballot is padding, not margin: host pages often zero
   <p> margins with !important (the new Subscriber Central CSS does), which
   would press the text right up against the options. */
.ycp-sub { margin: 0; padding: 0 0 28px; }

.ycp-options { display: grid; gap: 12px; }

.ycp-option {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 18px 20px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--ycp-border);
  border-radius: 16px;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  flex-wrap: wrap;
  transition: background 140ms ease, border-color 140ms ease;
}

.ycp-option:hover,
.ycp-option:focus,
.ycp-option:focus-visible,
.ycp-option:active {
  background: var(--ycp-beige-soft);
  border-color: var(--ycp-ink);
  color: var(--ycp-ink);
}

/* Themes often restyle button states; keep the label ink in every state. */
.ycp-poll .ycp-option,
.ycp-poll .ycp-option:hover,
.ycp-poll .ycp-option:focus,
.ycp-poll .ycp-option:active {
  color: var(--ycp-ink);
  box-shadow: none;
  text-decoration: none;
}

.ycp-dot {
  width: 26px;
  height: 26px;
  border: 2px solid var(--ycp-ink);
  border-radius: 99px;
  flex-shrink: 0;
  transition: background 140ms ease, border-color 140ms ease;
}

.ycp-option:hover .ycp-dot,
.ycp-option:focus .ycp-dot,
.ycp-option:focus-visible .ycp-dot {
  background: var(--ycp-pink);
  border-color: var(--ycp-pink);
}

.ycp-label { flex-grow: 1; min-width: 0; }

.ycp-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--ycp-teal);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.ycp-yours { background: var(--ycp-ink); color: #fff; }

.ycp-banner {
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--ycp-beige);
  border-radius: 12px;
  font-weight: 700;
}

.ycp-closed .ycp-option { cursor: default; opacity: 1; }
.ycp-closed .ycp-option:hover { background: #fff; border-color: var(--ycp-border); }
.ycp-closed .ycp-option:hover .ycp-dot { background: transparent; border-color: var(--ycp-ink); }

.ycp-note { margin: 0; padding: 22px 0 0; font-size: 0.85em; color: #6b6b6b; }

/* results */
.ycp-bars { display: grid; gap: 20px; }
.ycp-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ycp-bar-label { font-weight: 800; line-height: 1.3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ycp-figures { display: flex; align-items: baseline; gap: 20px; white-space: nowrap; }
.ycp-votes { font-size: 0.85em; }
.ycp-pct { font-weight: 800; }

.ycp-track {
  height: 22px;
  background: var(--ycp-beige);
  border-radius: 999px;
  overflow: hidden;
}
.ycp-fill {
  height: 100%;
  background: var(--ycp-teal);
  border-radius: 999px;
  transition: width 420ms cubic-bezier(.2,.8,.3,1);
}

.ycp-total { margin-top: 22px; font-weight: 800; }
.ycp-thanks {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ycp-rule);
  font-weight: 800;
  color: var(--ycp-pink-dark);
}

@media (prefers-reduced-motion: reduce) {
  .ycp-fill, .ycp-option, .ycp-dot { transition: none; }
}

/* The plugin owns the spacing between its own blocks, so it reads the same
   whether or not the page adds a gap of its own between children. */
.ycp-root {
  display: grid;
  gap: 28px;
}

/* The three blocks are laid out by the page around them, not by their own
   margins, and they must fill whatever column they land in. Page builders that
   wrap content in a flex column (or in WordPress's "constrained" layout, which
   puts a max-width plus auto side margins on every child) otherwise shrink and
   centre them — which is what squashed the ballot narrower than the band above
   it. Stated here so the plugin looks the same wherever it is dropped. */
/* Class doubled so this outranks a page rule of equal specificity that loads
   later — e.g. a `.sc-section > * + * { margin-top: 28px }` sibling rule, which
   would otherwise stack its margin on top of the container's own gap. */
.ycp-root.ycp-root,
.ycp-winner-section.ycp-winner-section,
.ycp-poll.ycp-poll,
.ycp-prev.ycp-prev {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  align-self: stretch;
  margin: 0;
}

/* A little air above the poll, on top of whatever gap the page already puts
   between its own children. */
.ycp-root.ycp-root { margin-top: 12px; }
.ycp-winner-section *,
.ycp-poll *,
.ycp-prev * { box-sizing: border-box; }

/* Winner announcement band — image left, announcement and results right */
.ycp-winner-section {
  padding: clamp(24px, 2.6vw, 32px);
  background: #fdeef3;
  color: #30353d;
}

.ycp-winner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
/* Before the winner is released there is no image, so the band is one
   full-width column. */
.ycp-winner-section--solo .ycp-winner-grid { grid-template-columns: minmax(0, 1fr); }

.ycp-winner-media { margin: 0; min-width: 0; }
.ycp-winner-media a { display: block; text-decoration: none; box-shadow: none; }
.ycp-winner-media img,
.ycp-winner-section .ycp-winner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.ycp-winner-body {
  min-width: 0;
  display: grid;
  gap: 16px;
  align-content: start;
  justify-items: start;
}

.ycp-winner-section .ycp-winner-kicker.ycp-winner-kicker {
  display: block;
  margin: 15px 0 0;
  padding: 0;
  /* Some themes give a bare <span> inside content a highlight background on
     small screens; the band supplies its own colour, so it is cleared here. */
  background: none;
  box-shadow: none;
  color: #30353d;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* The space under the eyebrow is a grid gap, not a margin: pages commonly zero
   heading margins with !important, which a margin here could not survive. */
.ycp-winner-intro {
  display: grid;
  gap: 12px;
}

.ycp-winner-section .ycp-winner-heading {
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
  text-wrap: pretty;
}

.ycp-winner-section .ycp-winner-pending { margin: 0; }

/* Themes style anything button-shaped inside post content — Astra gives links in
   .entry-content their own colour, padding, border and shadow. Every property the
   button relies on is restated here, in every state, so nothing leaks in. */
.ycp-winner-section a.ycp-winner-cta,
.ycp-winner-section a.ycp-winner-cta:link,
.ycp-winner-section a.ycp-winner-cta:visited,
.ycp-winner-section a.ycp-winner-cta:hover,
.ycp-winner-section a.ycp-winner-cta:focus,
.ycp-winner-section a.ycp-winner-cta:active,
.ycp-prev a.ycp-winner-cta,
.ycp-prev a.ycp-winner-cta:link,
.ycp-prev a.ycp-winner-cta:visited,
.ycp-prev a.ycp-winner-cta:hover,
.ycp-prev a.ycp-winner-cta:focus,
.ycp-prev a.ycp-winner-cta:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 0;
  border-radius: 30px;
  box-shadow: none;
  background: #f977c5;
  color: #fff;
  font-family: Karla, inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: background 140ms ease;
}

/* Astra underlines content links several different ways — text-decoration, a
   gradient background, an inset shadow, a border, or a pseudo-element — some of
   them with !important and a selector as specific as anything written here. The
   class is doubled and html/body prepended so this outranks all of them, and
   every underline mechanism is switched off rather than guessing which is in use. */
html body .ycp-winner-section a.ycp-winner-cta.ycp-winner-cta,
html body .ycp-winner-section a.ycp-winner-cta.ycp-winner-cta:link,
html body .ycp-winner-section a.ycp-winner-cta.ycp-winner-cta:visited,
html body .ycp-winner-section a.ycp-winner-cta.ycp-winner-cta:hover,
html body .ycp-winner-section a.ycp-winner-cta.ycp-winner-cta:focus,
html body .ycp-winner-section a.ycp-winner-cta.ycp-winner-cta:active,
html body .ycp-prev a.ycp-winner-cta.ycp-winner-cta,
html body .ycp-prev a.ycp-winner-cta.ycp-winner-cta:link,
html body .ycp-prev a.ycp-winner-cta.ycp-winner-cta:visited,
html body .ycp-prev a.ycp-winner-cta.ycp-winner-cta:hover,
html body .ycp-prev a.ycp-winner-cta.ycp-winner-cta:focus,
html body .ycp-prev a.ycp-winner-cta.ycp-winner-cta:active {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 0 !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
}

html body .ycp-winner-section a.ycp-winner-cta.ycp-winner-cta::before,
html body .ycp-winner-section a.ycp-winner-cta.ycp-winner-cta::after,
html body .ycp-prev a.ycp-winner-cta.ycp-winner-cta::before,
html body .ycp-prev a.ycp-winner-cta.ycp-winner-cta::after {
  content: none !important;
  display: none !important;
}

.ycp-winner-section a.ycp-winner-cta:hover,
.ycp-winner-section a.ycp-winner-cta:focus,
.ycp-winner-section a.ycp-winner-cta:active,
.ycp-prev a.ycp-winner-cta:hover,
.ycp-prev a.ycp-winner-cta:focus,
.ycp-prev a.ycp-winner-cta:active { background: #ff44b4; }

/* The band's button follows the site-standard pill (17px, 10px/20px, r30),
   a size down from the strip's. Placed after the shared block above so it
   wins on source order at equal specificity. */
.ycp-winner-section a.ycp-winner-cta,
.ycp-winner-section a.ycp-winner-cta:link,
.ycp-winner-section a.ycp-winner-cta:visited,
.ycp-winner-section a.ycp-winner-cta:hover,
.ycp-winner-section a.ycp-winner-cta:focus,
.ycp-winner-section a.ycp-winner-cta:active {
  margin: 10px 0;
}

.ycp-winner-results {
  width: 100%;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid #4a4a4a;
  display: grid;
  gap: 0;
}

.ycp-winner-section .ycp-results-heading {
  display: block;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  /* Same 20px/1.65 rhythm as a body list, so the heading and the three rows
     sit on one even four-line grid. */
  line-height: 1.65;
}

.ycp-winner-section .ycp-results-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ycp-winner-section .ycp-results-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1.65;
  list-style: none;
}
.ycp-results-name { min-width: 0; }
.ycp-results-pct { white-space: nowrap; }

@media (max-width: 760px) {
  .ycp-winner-grid { grid-template-columns: minmax(0, 1fr); }
  /* At phone type sizes the eyebrow crowds the headline, so it gets more room. */
  .ycp-winner-intro { gap: 22px; }
  /* Long theme names wrap instead of shoving the percentage off the row. */
  .ycp-winner-section .ycp-results-row { flex-wrap: wrap; }
}

/* Previous winner strip — the month before the one up top */
.ycp-prev {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 26px;
  background: #fdf9f2;
  border-radius: 20px;
  color: #30353d;
}

/* Yellow sticker, gold star — tone on tone, so it reads as one object. */
.ycp-prev-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 99px;
  background: #f6ea06;
}

.ycp-prev-badge svg { display: block; }

.ycp-prev-text { flex-grow: 1; min-width: 180px; display: flex; flex-direction: column; gap: 4px; }

.ycp-prev-label {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.ycp-prev-name { font-size: 1.2em; font-weight: 800; line-height: 1.25; }
.ycp-prev-share-short { display: none; }

/* On phones the strip stacks and centres: badge, then the winner, then the button. */
@media (max-width: 600px) {
  .ycp-prev-share { display: none; }
  .ycp-prev-share-short { display: inline; }

  /* The sticker straddles the top edge — its middle on the line — which lets the
     box itself stay short instead of growing a row to hold the badge. */
  .ycp-prev.ycp-prev {
    position: relative;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    /* Only the strip needs more room here — its badge overhangs the top edge by
       26px, so a little is added on top of the shared gap. Nothing else moves. */
    margin-top: 12px;
    padding: 40px 20px 26px;
  }
  .ycp-prev-badge {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
  }
  .ycp-prev-text { align-items: center; min-width: 0; }
  .ycp-prev a.ycp-winner-cta { width: 100%; max-width: 320px; }
}