/* Contact page — status list, contact-details rows, support cards, FAQ accordion, form card. */
.page-contact .status-list { display: grid; gap: .6rem; margin: 0; }
.page-contact .status-list > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px dashed var(--brand-border); }
.page-contact .status-list dt { font-weight: 500; color: var(--brand-text-secondary); font-size: var(--text-sm); }
.page-contact .status-list dd { margin: 0; font-weight: 700; color: var(--brand-text); text-align: right; }
.page-contact .status-open { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.page-contact .status-closed { background: var(--brand-primary-subtle); color: var(--brand-primary-active); }
.page-contact .table th { font-weight: 500; color: var(--brand-text-body); }
.page-contact .table td { text-align: right; font-weight: 700; color: var(--brand-text); }
.page-contact .table thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-text-secondary); }
.page-contact .table thead th:last-child { text-align: right; }

/* Contact Details card — one icon + label + value(s) row per fact, same
   visual language as .connect-list but with a strong label above the values. */
.page-contact .contact-details-list { display: grid; gap: 1.1rem; }
.page-contact .detail-row { display: flex; gap: .9rem; align-items: flex-start; padding-bottom: 1.1rem; border-bottom: 1px dashed var(--brand-border); }
.page-contact .detail-row:last-child { padding-bottom: 0; border-bottom: 0; }
.page-contact .detail-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--brand-primary-subtle); color: var(--brand-primary); font-size: 1.05rem; }
.page-contact .detail-body { display: grid; gap: .2rem; min-width: 0; }
.page-contact .detail-body strong { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--brand-text); margin-bottom: .1rem; }
.page-contact .detail-body span { overflow-wrap: anywhere; color: var(--brand-text-body); }
.page-contact .detail-body a { color: var(--brand-text-body); font-weight: 500; }
.page-contact .detail-body a:hover { color: var(--brand-primary); }

/* Holiday hours — native <details>/<summary> disclosure, no JS required. */
.page-contact .holiday-disclosure summary { cursor: pointer; font-weight: 500; color: var(--brand-text-body); list-style: none; }
.page-contact .holiday-disclosure summary::-webkit-details-marker { display: none; }
.page-contact .holiday-disclosure summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .75em; margin-left: .5rem; color: var(--brand-primary); }
.page-contact .holiday-disclosure[open] summary::after { content: "\f077"; }
.page-contact .holiday-disclosure summary:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }

.page-contact .contact-form-card { border-top: 4px solid var(--brand-primary); box-shadow: var(--shadow-md); }
.page-contact .contact-form-card .form-lead { color: var(--brand-text-body); margin-bottom: 1.25rem; }
.page-contact .contact-form-card .form-label { font-weight: 500; }
.page-contact .contact-form-card label { display: inline-block; margin-bottom: .5rem; font-weight: 500; }
.page-contact .contact-form-card .star { color: var(--brand-primary); }
.page-contact .captcha-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; max-width: none; padding: .9rem 1rem; background: var(--brand-bg-soft); border: 1px solid var(--brand-border-strong); border-radius: var(--radius-md); }

/* Support-channel cards reuse the sitewide .feature-card / .icon-badge tokens
   (see template.css) — no page-specific overrides needed beyond centering. */
.page-contact .feature-card h3 { margin-bottom: .35rem; }

/* Quick Answers FAQ (.accordion.category-faq, #contactFaq). colors.css's
   `.accordion{}` block is light-only (no dark counterpart) and hardcodes the
   expanded row to literal light hex + a light-red focus ring, so an expanded
   FAQ answer in dark mode would render near-black text on a near-black page.
   Scoped to .page-contact so it wins on specificity without touching
   colors.css. Twin rule for the Help Center's own FAQ page in p-help.css. */
[data-bs-theme=dark] .page-contact .accordion {
    --bs-accordion-active-color: var(--brand-text);
    --bs-accordion-active-bg: var(--brand-primary-subtle);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--brand-primary-rgb), .35);
    --bs-accordion-border-color: var(--brand-border);
}

/* Support cards: pin each CTA to the card bottom so the three buttons line up. */
.page-contact .feature-card.h-100 { display: flex; flex-direction: column; align-items: center; }
.page-contact .feature-card.h-100 > .btn { margin-top: auto; align-self: stretch; }