/* Search page sections: each result section gets its own color band and a tinted header bar, so the sections
   are easy to tell apart when scrolling. Scoped to the search page (the only page with the .hero). */
.card { --sec: #64748b; --sec-tint: #f1f4f8; --sec-line: #dbe2ea; }
.card.supcard { --sec: #0b2e22; --sec-tint: #e8f3ed; --sec-line: #cfe6d9; }
.card.organic { --sec: #b07d12; --sec-tint: #fff6e0; --sec-line: #f1d79a; }
.card:has(.mktbox), .card:has(.extlinks) { --sec: #14513b; --sec-tint: #e8f3ed; --sec-line: #cfe6d9; }
.card.oidcard { --sec: #0f766e; --sec-tint: #e6f5f3; --sec-line: #bfe3de; }
.card.webcard { --sec: #2a5db0; --sec-tint: #eaf1fc; --sec-line: #c9d8ef; }
.card.doccard { --sec: #6b4fa0; --sec-tint: #f3effa; --sec-line: #ddd2ef; }

main:has(> .hero) > .card:not(.narrow) { border-left: 6px solid var(--sec); }
main:has(> .hero) > .card:not(.narrow) > h2,
main:has(> .hero) > .card:not(.narrow) > .row.between h2 { color: var(--sec); }

/* collapsible section headers: a full-width tinted bar with its own arrow */
main:has(> .hero) > .card details > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 14px; margin: 0 0 12px; border-radius: 10px; background: var(--sec-tint);
  border: 1px solid var(--sec-line); color: var(--sec); font-weight: 700; user-select: none;
  transition: background .15s, border-color .15s; }
main:has(> .hero) > .card details > summary::-webkit-details-marker { display: none; }
main:has(> .hero) > .card details > summary::before { content: ""; flex: none; width: 9px; height: 9px; margin: 0 2px 0 2px;
  border-right: 2.5px solid var(--sec); border-bottom: 2.5px solid var(--sec); transform: rotate(-45deg);
  transition: transform .15s; }
main:has(> .hero) > .card details[open] > summary::before { transform: rotate(45deg); margin-top: -4px; }
main:has(> .hero) > .card details > summary:hover { border-color: var(--sec); }
main:has(> .hero) > .card details > summary h2,
main:has(> .hero) > .card details > summary .inline-h { color: var(--sec); margin: 0; font-size: 1.1rem; }
main:has(> .hero) > .card details:not([open]) > summary { margin-bottom: 0; }
main:has(> .hero) > .card details > summary::after { content: "Show"; margin-left: auto; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
main:has(> .hero) > .card details[open] > summary::after { content: "Hide"; }

/* sections without a collapsible header get the same tinted header bar */
main:has(> .hero) > .card:not(.narrow) > h2:first-child,
main:has(> .hero) > .card:not(.narrow) > .row.between:first-child { background: var(--sec-tint); border: 1px solid var(--sec-line);
  border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; align-items: center; }
main:has(> .hero) > .card:not(.narrow) > .row.between:first-child h2 { margin: 0; }

/* multi-line text boxes look like the single-line inputs */
textarea { font: inherit; font-size: 14px; border: 1px solid #cdd7d1; border-radius: var(--radius-sm); padding: 10px 12px;
           background: #fff; width: 100%; color: var(--ink); resize: vertical; transition: border-color .15s, box-shadow .15s; }
textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(29, 107, 79, .18); }
pre.small { margin: 0; white-space: pre-wrap; font: inherit; }

/* documents page */
.grow { flex: 1; min-width: 220px; }
.row .grow input, .row input.grow { width: 100%; }
select { border: 1px solid #cdd7d1; border-radius: var(--radius-sm); padding: 10px 12px; background: #fff; color: var(--ink); }
details > summary { cursor: pointer; }
.docs-add { margin-top: 12px; }
.pill.doc { border-color: #ddd2ef; background: #f3effa; color: #553c85; font-weight: 600; text-decoration: none; }
.doc-files { margin: 4px 0 2px; }
.doc-files td { vertical-align: middle; }
.doc-files select, .doc-files input { padding: 6px 8px; font-size: 13px; }
.doc-files input { width: 100%; min-width: 180px; }

/* search results: action buttons (Documents, Request a quote) */
.res-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-left: 14px; vertical-align: middle; }
.res-actions .btn { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 14px;
  font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid; transition: background .15s, color .15s, box-shadow .15s; }
.res-actions .btn-doc { border-color: #6b4fa0; color: #553c85; background: #fff; }
.res-actions .btn-doc:hover { background: #6b4fa0; color: #fff; }
.res-actions .btn-go { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow: 0 2px 8px rgba(20, 81, 59, .25); }
.res-actions .btn-go:hover { background: linear-gradient(135deg, #237a5b, var(--brand-deep)); color: #fff; }
@media (max-width: 680px) { .res-actions { margin: 10px 0 0; } }