/* =========================================================================
   Brokix — theme-added component styles.
   These classes do NOT exist in the original design CSS; they cover WordPress
   features the static mockups lacked (breadcrumbs, pagination, a11y skip link,
   award voting, related blocks). Built with the same design tokens so they feel
   native to the design system. The original style.css/home.css are untouched.
   ========================================================================= */

/* ── Accessibility: skip link + sr-only ─────────────────────────────────── */
.skip-link.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.skip-link.screen-reader-text:focus {
  left: 0;
  outline: 3px solid var(--gold);
}
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}

/* Visible keyboard focus everywhere (WCAG 2.2). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */
.brokix-crumbs {
  padding: 14px 0 2px;
  font-size: 12px;
  color: var(--ink3);
}
.brokix-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.brokix-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.brokix-crumbs a {
  color: var(--ink3);
  font-weight: 500;
  text-decoration: none;
}
.brokix-crumbs a:hover { color: var(--accent); }
.brokix-crumbs span[aria-current] { color: var(--ink); font-weight: 700; }
.brokix-crumb-sep { color: var(--muted); }

/* ── Numbered pagination ────────────────────────────────────────────────── */
.brokix-pagination { margin: 26px 0 8px; }
.brokix-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.brokix-pagination a,
.brokix-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink2);
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-display);
  text-decoration: none;
  transition: all .15s;
}
.brokix-pagination a:hover { border-color: var(--accent); color: var(--accent); }
.brokix-pagination .current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Related blocks / auto-links ────────────────────────────────────────── */
.brokix-related { margin-top: 8px; }
.brokix-autolink {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted rgba(37, 99, 235, .4);
}
.brokix-autolink:hover { border-bottom-style: solid; }

/* ── Award voting UI ────────────────────────────────────────────────────── */
.brokix-vote {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 12px 0;
}
.brokix-vote-row {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  transition: border-color .2s, box-shadow .2s;
}
.brokix-vote-row:hover { border-color: var(--accent); box-shadow: var(--sh-sm); }
.brokix-vote-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.brokix-vote-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.brokix-vote-count {
  font-weight: 800;
  font-size: 14px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.brokix-vote-bar {
  height: 8px;
  border-radius: var(--r-full);
  background: var(--surface2);
  overflow: hidden;
  margin-bottom: 10px;
}
.brokix-vote-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--accent), #60a5fa);
  transition: width .6s ease;
}
.brokix-vote.has-voted .brokix-vote-btn { display: none; }
.brokix-vote-msg { font-size: 13px; font-weight: 600; margin-top: 4px; min-height: 18px; }
.brokix-vote-msg.is-ok { color: var(--green-dk); }
.brokix-vote-msg.is-err { color: var(--red); }
.brokix-vote-closed { font-size: 12px; color: var(--muted); }

/* ── Generic single-content prose (for CPT bodies) ──────────────────────── */
.brokix-prose { font-size: 15px; line-height: 1.8; color: var(--ink2); }
.brokix-prose h2 { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ink); margin: 28px 0 12px; letter-spacing: -.02em; }
.brokix-prose h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); margin: 22px 0 10px; }
.brokix-prose p { margin: 0 0 16px; }
.brokix-prose ul, .brokix-prose ol { margin: 0 0 16px 22px; }
.brokix-prose li { margin-bottom: 6px; }
.brokix-prose a { color: var(--accent); font-weight: 600; }
.brokix-prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.brokix-prose blockquote {
  border-left: 3px solid var(--accent);
  background: var(--surface2);
  padding: 12px 18px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: 0 0 16px;
  color: var(--ink3);
}

/* Pros / cons lists on broker singles. */
.brokix-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.brokix-proscons .col { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; }
.brokix-proscons .col h3 { font-size: 14px; font-family: var(--font-display); margin-bottom: 10px; }
.brokix-proscons ul { list-style: none; margin: 0; padding: 0; }
.brokix-proscons li { font-size: 13px; color: var(--ink3); padding: 5px 0 5px 24px; position: relative; line-height: 1.5; }
.brokix-proscons .pros li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.brokix-proscons .cons li::before { content: "✕"; position: absolute; left: 0; color: var(--red); font-weight: 800; }

/* FAQ accordion (broker/article). */
.brokix-faq details { border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; margin-bottom: 10px; padding: 4px 16px; }
.brokix-faq summary { cursor: pointer; font-weight: 700; font-family: var(--font-display); color: var(--ink); padding: 12px 0; list-style: none; }
.brokix-faq summary::-webkit-details-marker { display: none; }
.brokix-faq summary::after { content: "+"; float: right; color: var(--accent); font-weight: 800; }
.brokix-faq details[open] summary::after { content: "–"; }
.brokix-faq p { font-size: 14px; color: var(--ink3); line-height: 1.7; padding: 0 0 14px; margin: 0; }

@media (max-width: 640px) {
  .brokix-proscons { grid-template-columns: 1fr; }
}