/* Small additions on top of the design stylesheet (app.css): only for elements the design didn't have. */

html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: #0f172a; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.skip-link:focus { top: 12px; }

/* Honeypot field for spam bots */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Desktop dropdowns also open on hover when JS is slow to load */
@media (hover: hover) and (min-width: 1024px) {
    [data-dropdown]:hover > [data-dropdown-menu] { display: block !important; }
    [data-dropdown]:hover .dd-chevron { transform: rotate(180deg); color: #035fa7; }
}
.dd-open .dd-chevron { transform: rotate(180deg); color: #035fa7; }
body.modal-open { overflow: hidden; }

/* Rich text written in the admin editor */
.prose-content { color: #475569; font-size: 15px; line-height: 1.75; }
.prose-content > * + * { margin-top: 1em; }
.prose-content h2 { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin-top: 1.6em; line-height: 1.25; }
.prose-content h3 { font-size: 1.2rem; font-weight: 700; color: #0f172a; margin-top: 1.4em; }
.prose-content h4 { font-size: 1rem; font-weight: 700; color: #0f172a; margin-top: 1.2em; }
.prose-content ul { list-style: disc; padding-left: 1.4em; }
.prose-content ol { list-style: decimal; padding-left: 1.4em; }
.prose-content li + li { margin-top: .35em; }
.prose-content li::marker { color: #00a78e; }
.prose-content a { color: #035fa7; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose-content strong { color: #0f172a; }
.prose-content blockquote { border-left: 4px solid #00a78e; background: #f0f7fc; padding: 14px 18px; border-radius: 0 12px 12px 0; color: #0f172a; }
.prose-content img { border-radius: 16px; max-width: 100%; height: auto; }
.prose-content table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.prose-content th, .prose-content td { border: 1px solid #e2e8f0; padding: 8px 12px; text-align: left; }
.prose-content th { background: #f8fafc; color: #0f172a; }

/* Legal pages (same look as the design: numbered sections) */
.legal-content h2 { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin-bottom: .5rem; }
.legal-content section > * + * { margin-top: .5rem; }
.legal-content ul { list-style: disc; padding-left: 1.25rem; }
.legal-content li + li { margin-top: .25rem; }
.legal-content a { color: #035fa7; font-weight: 600; text-decoration: underline; }

/* FAQ accordion */
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .2s; }

/* Pagination */
.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid #e2e8f0; font-size: 13px; font-weight: 700; color: #334155; background: #fff; }
.pagination a:hover { border-color: #035fa7; color: #035fa7; }
.pagination .is-current span { background: #035fa7; border-color: #035fa7; color: #fff; }
.pagination .is-disabled span { color: #cbd5e1; }

/* Keep the floating buttons clear of the iOS home bar */
@supports (padding: max(0px)) {
    aside[aria-label="Quick contact actions"] { bottom: max(1.25rem, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Spacing utility the design stylesheet lacks (same scale as Tailwind). */
.mt-16 { margin-top: 4rem; }

/* Header fit: the full menu + phone pill + button is wider than the 1280px container, so tighten it per breakpoint. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    [data-logo-text] { display: none !important; }
    nav[aria-label="Main"] { gap: 1.1rem !important; }
}
@media (min-width: 1280px) { nav[aria-label="Main"] { gap: 1.5rem !important; } }
@media (max-width: 1535.98px) { [data-header-phone] { display: none !important; } }
@media (min-width: 1536px) { [data-header-inner] { max-width: 1440px; } }