/* 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-perks { display: grid; gap: .9rem; }
.page-contact .contact-perks li { display: flex; gap: .75rem; align-items: center; font-weight: 500; }
.page-contact .contact-perks i, .page-contact .contact-perks span[class*="fa-"] { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--brand-primary-subtle); color: var(--brand-primary); }
.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; }

/* 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; }