/* Capital Stonewall Democrats — shared styles. Generated from the approved design. */

  body { margin: 0; background: #FFFFFF; color: #1A2233; }
  * { box-sizing: border-box; }
  a { color: #13285E; text-decoration: underline; text-underline-offset: 3px; }
  a:hover { color: #A81020; }
  :focus-visible { outline: 3px solid #13285E; outline-offset: 3px; box-shadow: 0 0 0 6px #FFD400; }
  @keyframes csd-lift { from { box-shadow: 0 0 0 0 rgba(13,28,66,0); } to { box-shadow: 0 10px 26px rgba(13,28,66,.34); } }
  @keyframes csd-spin { to { transform: rotate(360deg); } }
  @keyframes csd-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes csd-slide { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
  @keyframes csd-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; animation-timeline: auto !important; transition-duration: .001ms !important; } }
  .csd-skip { position: absolute; left: -9999px; }
  .csd-skip:focus { left: 16px; top: 16px; z-index: 99; background: #FFD400; color: #13285E; padding: 12px 18px; font-weight: 800; }

/* [hidden] must beat inline display declarations on filtered rows */
[hidden] { display: none !important; }

/* Hover states (were inline in the prototype) */
.csdh-1:hover { color: #FFD400 !important; }
.csdh-2:hover { color: #FFD400 !important; box-shadow: inset 0 -2px 0 0 #FFD400 !important; }
.csdh-3:hover { background: #A81020 !important; }
.csdh-4:hover { background: #FFD400 !important; border-color: #FFD400 !important; }
.csdh-5:hover { background: #13285E !important; color: #FFFFFF !important; }
.csdh-6:hover { transform: translateY(-8px) !important; filter: brightness(1.1) !important; box-shadow: 0 20px 40px rgba(0,107,33,.28) !important; }
.csdh-7:hover { border-bottom-color: #FFFFFF !important; letter-spacing: .14em !important; }
.csdh-8:hover { transform: translateY(-8px) !important; filter: brightness(1.1) !important; box-shadow: 0 20px 40px rgba(27,58,143,.3) !important; }
.csdh-9:hover { transform: translateY(-8px) !important; filter: brightness(1.1) !important; box-shadow: 0 20px 40px rgba(107,36,130,.3) !important; }
.csdh-10:hover { background: #0D1C42 !important; }
.csdh-11:hover { transform: translateY(-6px) !important; box-shadow: 0 16px 34px rgba(19,40,94,.18) !important; }
.csdh-12:hover { transform: translateX(10px) !important; background: #0D1C42 !important; }
.csdh-13:hover { background: #FFFFFF !important; }
.csdh-14:hover { transform: translateX(10px) !important; background: #F4F6FA !important; }
.csdh-15:hover { background: #004E18 !important; border-color: #004E18 !important; }
.csdh-16:hover { background: #8FDFFF !important; border-color: #8FDFFF !important; }
.csdh-17:hover { color: #A81020 !important; border-bottom-color: #A81020 !important; gap: 16px !important; }
.csdh-18:hover { background: #FFFFFF !important; color: #13285E !important; padding: 0 18px !important; }
.csdh-19:hover { transform: translateY(-4px) !important; }
.csdh-20:hover { transform: translateY(-6px) !important; box-shadow: 0 16px 34px rgba(19,40,94,.16) !important; }
.csdh-21:hover { color: #FFD400 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; }
.csdh-22:hover { background: #A81020 !important; border-color: #A81020 !important; }
.csdh-23:hover { background: #FFA733 !important; border-color: #FFA733 !important; }
.csdh-24:hover { background: #142C6E !important; border-color: #142C6E !important; }
.csdh-25:hover { color: #A81020 !important; }
.csdh-26:hover { transform: translateY(-6px) !important; background: #E8EDF6 !important; }
.csdh-27:hover { color: #A81020 !important; border-color: #A81020 !important; }
.csdh-28:hover { background: #13285E !important; color: #FFFFFF !important; }
.csdh-29:hover { background: #FFFFFF !important; }

/* ---- Reflow (WCAG 2.2 AA 1.4.10) ----
   Inline grid-template-columns needs !important to be overridden; every
   multi-column grid carries data-grid so one breakpoint collapses them all. */
@media (max-width: 900px) {
  [data-grid] { grid-template-columns: 1fr !important; }
  header nav, header > div, header > div > div { flex-wrap: wrap !important; }
}
@media (max-width: 640px) {
  h1 { font-size: 2.5rem !important; }
  h2 { font-size: 1.875rem !important; }
  blockquote { font-size: 1.375rem !important; }
  [data-grid] > * > article, [data-grid] > article { padding: 22px !important; }
  main section > div { padding-left: 20px !important; padding-right: 20px !important; }
  footer > div:nth-child(2) { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 640px) {
  [style*="flex: none; width: 380px"],
  [style*="flex: none; width: 340px"],
  [style*="flex: none; width: 250px"] { width: 100% !important; }
  [style*="min-height: 420px"] { min-height: 240px !important; }
}
.csdh-30:hover { background: #13285E !important; border-color: #13285E !important; color: #FFFFFF !important; }