/* Down Payment Assistance page.
   Rules copied from the <style> block of "Explore DPA by State.dc.html";
   everything else on the page is inline, as in the design. Scoped under
   .ij-dpa so the other Beaver Builder pages are untouched. */

.ij-dpa { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }
.ij-dpa a { color: var(--color-link); text-decoration: none; }

/* State cards */
.ij-dpa .st { transition: background 200ms cubic-bezier(0.4,0,0.2,1), box-shadow 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1); }
.ij-dpa .st-label,
.ij-dpa .st-flag { transition: color 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1), box-shadow 200ms cubic-bezier(0.4,0,0.2,1); }
.ij-dpa a.st:hover { background: var(--color-success-soft); box-shadow: var(--shadow-card); transform: translateY(-2px); }
/* Stated explicitly: without it `color` falls through to `.ij-dpa a:hover`
   and paints the label brand-orange. See tests/test-css-cascade.php. */
.ij-dpa a.st:hover .st-label { color: var(--brand-green-dark); }
.ij-dpa a.st:hover .st-flag { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(140,198,62,0.45); }

/* A state whose page is not published renders as a <div>: no pointer, no lift. */
.ij-dpa div.st { cursor: default; }

@media (max-width: 960px) { .ij-dpa .stgrid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } }
@media (max-width: 720px) { .ij-dpa .stgrid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } }
@media (max-width: 480px) { .ij-dpa .stgrid { grid-template-columns: minmax(0,1fr) !important; } }

@media (prefers-reduced-motion: reduce) {
  .ij-dpa .st, .ij-dpa .st-label, .ij-dpa .st-flag { transition: none; }
  .ij-dpa a.st:hover { transform: none; }
  .ij-dpa a.st:hover .st-flag { transform: none; }
}

/* FAQ disclosure. The design marks each row with a plus icon that rotates
   into a cross when the row opens, so the native marker is hidden and the
   icon in the markup does the work. */
/* The design's summary has no inline cursor; the affordance lives here so
   the markup stays byte-identical to it. */
.ij-dpa details > summary { cursor: pointer; }
.ij-dpa details > summary::-webkit-details-marker { display: none; }
.ij-dpa details > summary::marker { content: ''; }
.ij-dpa details[open] > summary .faq-chev { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .ij-dpa .faq-chev { transition: none; }
}

@media (max-width: 720px) {
  .ij-dpa h1 { font-size: 36px !important; letter-spacing: -1.6px !important; }
  .ij-dpa h2 { font-size: 30px !important; letter-spacing: -1.1px !important; }
}