/* Local Nunito variable font to reduce initial font swap */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
    src: url('/assets/fonts/nunito-latin-var.woff2') format('woff2-variations');
}

/* Header responsive heights */
#main-header {
    transition: height 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
    margin-top: 0 !important;
    top: 0 !important;
}

/* Prevent header from overlapping with browser UI */
body {
    margin: 0;
    padding: 0;
}

/* Ensure header content doesn't overlap */
#main-header > div {
    position: relative;
}

/* Prevent text shadow artifacts on logo */
#main-header .text-2xl {
    text-shadow: none !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    #main-header,
    #main-header *,
    .mobile-menu-transition {
        transition: none !important;
        animation: none !important;
    }
}

/* Mobile menu transitions */
.mobile-menu-transition {
    transition: opacity 200ms cubic-bezier(0.2, 0.6, 0.2, 1), transform 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Active/Current page indicator for navigation links */
nav[role="navigation"] a[href].active::after,
nav[role="navigation"] a[href]:focus::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 16px);
    height: 2px;
    background-color: #3B82F6 !important;
    border-radius: 1px;
}

/* Mobile menu: blue bar under expanded section (override any teal) */
#mobile-navigation a[href].mobile-dropdown-toggle::after,
#mobile-navigation a[href]:focus::after {
    background-color: #3B82F6 !important;
}

html.dark nav[role="navigation"] a[href].active::after,
html.dark nav[role="navigation"] a[href]:focus::after {
    background-color: #60A5FA !important;
}

html.dark #mobile-navigation a[href].mobile-dropdown-toggle::after {
    background-color: #60A5FA !important;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* Dark theme focus */
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible {
    outline-color: #60A5FA;
}

/* Theme Switcher Buttons */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #E5E7EB;
    cursor: pointer;
    transition: all 120ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.theme-toggle-btn svg {
    display: block;
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
}

.theme-toggle-btn:focus-visible {
    outline: 2px solid #6366F1;
    outline-offset: 2px;
}

.theme-toggle-btn.active {
    background-color: rgba(99, 102, 241, 0.2);
    border-color: #6366F1;
    color: #6366F1;
}

.theme-toggle-btn.active:hover {
    background-color: rgba(99, 102, 241, 0.3);
    border-color: #818CF8;
    color: #818CF8;
}

/* Dark theme styles for theme switcher buttons */
[data-theme="dark"] .theme-toggle-btn {
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.1);
    color: #E5E7EB;
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
}

[data-theme="dark"] .theme-toggle-btn.active {
    background-color: rgba(99, 102, 241, 0.2);
    border-color: #6366F1;
    color: #6366F1;
}

[data-theme="dark"] .theme-toggle-btn.active:hover {
    background-color: rgba(99, 102, 241, 0.3);
    border-color: #818CF8;
    color: #818CF8;
}

/* Dark theme: colored card borders stay colored (index, apps, app pages) */
html.dark .qa-card.border-\[\#3B82F6\] { border-color: rgba(59,130,246,0.6) !important; }
html.dark .qa-card.border-\[\#10B981\] { border-color: rgba(16,185,129,0.6) !important; }
html.dark .qa-card.border-\[\#F97316\] { border-color: rgba(249,115,22,0.6) !important; }
html.dark .qa-card.border-\[\#6366F1\] { border-color: rgba(99,102,241,0.6) !important; }
/* SEO pill badge stays blue in dark mode */
html.dark .border-\[\#1D4ED8\] { border-color: rgba(29,78,216,0.6) !important; }
html.dark .text-\[\#1D4ED8\] { color: #60A5FA !important; }

/* Hero (#0f172a) vs first content stripe (#0b1220 on odd) already differ; no override needed */


/* =============================================================================
   QA / marketing landing (formerly inline <style> in page <head>)
   Loaded after Tailwind via a second <link> in head-includes so these rules
   win over utility classes where needed.
   ============================================================================= */

body {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

main [style*="font-family: Inter"] {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.qa-section-odd {
    background-color: #fff9f5;
}

.qa-section-even {
    background-color: #f8fafc;
}

html.dark .qa-section-odd {
    background-color: #0b1220;
}

html.dark .qa-section-even {
    background-color: #0f172a;
}

.qa-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06), 0 1px 1px rgba(2, 6, 23, 0.04);
}

html.dark .qa-card {
    background-color: #111827 !important;
    border-color: rgba(255, 255, 255, 0.12);
}

.qa-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    background: #fff;
    margin-bottom: 16px;
}

html.dark .qa-card-icon {
    /* Slight lift so the circle reads on dark cards (#111827), not “invisible” */
    background-color: rgba(255, 255, 255, 0.1);
}

.qa-card-float {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.qa-card-float:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px -8px rgba(2, 6, 23, 0.15), 0 4px 14px -4px rgba(2, 6, 23, 0.08);
}

.qa-mini-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    background: #F97316;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.28);
    transition: all 120ms ease;
}

.qa-mini-cta:hover {
    transform: translateY(-1px);
    background: #EA580C;
    box-shadow: 0 8px 14px rgba(249, 115, 22, 0.34);
}

.app-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.app-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px -8px rgba(2, 6, 23, 0.15);
}

.qa-card-purple {
    background-color: #F5F3FF !important;
    border: 2px solid #3B82F6;
}

html.dark .qa-card-purple {
    background-color: #1e1b4b !important;
    border-color: rgba(59, 130, 246, 0.6);
}

.qa-card-blue {
    background-color: #EFF6FF;
    border: 2px solid #3B82F6;
}

.qa-card-green {
    background-color: #ECFDF5;
    border: 2px solid #10B981;
}

html.dark .qa-card-blue {
    background-color: #1E293B;
    border-color: rgba(59, 130, 246, 0.5);
}

html.dark .qa-card-green {
    background-color: #1E293B;
    border-color: rgba(16, 185, 129, 0.5);
}

html.dark .qa-card-blue .qa-card-badge,
html.dark .qa-card-green .qa-card-badge {
    background-color: #334155 !important;
}

/* Hero: full (three radials) - default */
.hero-section {
    background-color: #FFF9F5;
    background-image:
        radial-gradient(circle at 110% -10%, rgba(255, 198, 133, 0.52) 0%, rgba(255, 154, 108, 0.42) 36%, rgba(255, 154, 108, 0) 65%),
        radial-gradient(circle at -10% 110%, rgba(255, 228, 196, 0.52) 0%, rgba(255, 218, 185, 0.35) 40%, rgba(255, 218, 185, 0) 70%),
        radial-gradient(circle at 80% 45%, rgba(255, 198, 133, 0.30) 0%, rgba(255, 154, 108, 0.22) 32%, rgba(255, 154, 108, 0) 60%);
}

html.dark .hero-section {
    background-color: #0f172a;
    background-image: none;
}

/* Hero: two radials only (legal hub, apps listing) */
.hero-section--simple {
    background-color: #fff9f5;
    background-image:
        radial-gradient(circle at 110% -10%, rgba(255, 198, 133, 0.52) 0%, rgba(255, 154, 108, 0.42) 36%, rgba(255, 154, 108, 0) 65%),
        radial-gradient(circle at -10% 110%, rgba(255, 228, 196, 0.52) 0%, rgba(255, 218, 185, 0.35) 40%, rgba(255, 218, 185, 0) 70%);
}

html.dark .hero-section--simple {
    background-color: #0f172a;
    background-image: none;
}

.post-pricing-text-bg {
    position: relative;
    margin-top: -1px;
    background:
        radial-gradient(circle at 120% -25%, rgba(255, 198, 133, 0.18) 0%, rgba(255, 154, 108, 0.08) 35%, rgba(255, 154, 108, 0) 65%),
        radial-gradient(circle at -20% 120%, rgba(255, 218, 185, 0.14) 0%, rgba(255, 218, 185, 0) 70%),
        linear-gradient(180deg, #FFF9F5 0%, #FFF6EE 22%, #F6E3D1 58%, #EFD4BD 100%);
}

html.dark .post-pricing-text-bg {
    background: linear-gradient(180deg, #0f172a 0%, #0b1220 50%, #020617 100%);
}

html.dark .post-pricing-text-bg .ambient-blob {
    opacity: 0.08;
}

html.dark .post-pricing-text-bg article {
    background-color: #1e293b !important;
    color: #94A3B8 !important;
}

html.dark .post-pricing-text-bg article h3,
html.dark .post-pricing-text-bg article p,
html.dark .post-pricing-text-bg article ul,
html.dark .post-pricing-text-bg article li,
html.dark .post-pricing-text-bg article div {
    color: inherit !important;
}

html.dark .post-pricing-text-bg article .text-\[34px\] {
    color: #ffffff !important;
}

html.dark .post-pricing-text-bg article .qa-price-highlight {
    color: #F97316 !important;
}

html.dark .post-pricing-text-bg .rounded-full.bg-white {
    background-color: #1e293b !important;
}

html.dark .post-pricing-text-bg .rounded-full.bg-\[\#EFF6FF\],
html.dark .post-pricing-text-bg .rounded-full.bg-\[\#FFF0E3\],
html.dark .post-pricing-text-bg .rounded-full.bg-\[\#EEF2FF\],
html.dark .post-pricing-text-bg .rounded-full.bg-\[\#FFF1F2\] {
    background-color: #334155 !important;
}

.post-pricing-text-bg .ambient-blob {
    position: absolute;
    filter: blur(95px);
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

.post-pricing-text-bg .blob-1 {
    top: 14%;
    left: 20%;
    width: 500px;
    height: 500px;
    background: #ffdec7;
    border-radius: 50%;
}

.post-pricing-text-bg .blob-2 {
    top: 52%;
    right: 10%;
    width: 600px;
    height: 600px;
    background: #ffe3d9;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}

.post-pricing-text-bg > section {
    position: relative;
    z-index: 1;
}

.qa-faq-item {
    transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.qa-faq-item[open] {
    border-color: #3B82F6 !important;
    background-color: #F8FAFC;
    box-shadow: 0 6px 12px rgba(2, 6, 23, 0.08);
}

html.dark .qa-faq-item[open] {
    background-color: #111827;
    border-color: rgba(59, 130, 246, 0.75) !important;
}

.qa-faq-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.qa-faq-summary::-webkit-details-marker {
    display: none;
}

.qa-faq-question {
    flex: 1;
    text-align: center;
}

.qa-faq-chevron {
    color: #64748B;
    transition: transform 200ms ease, color 200ms ease;
    flex-shrink: 0;
}

.qa-faq-item[open] .qa-faq-chevron {
    transform: rotate(180deg);
    color: #3B82F6;
}

.qa-faq-answer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #E2E8F0;
    text-align: center;
}

html.dark .qa-faq-answer {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* Page-scoped icon spacing variants */
.page-answering-service-app .qa-card-icon,
.page-call-to-text .qa-card-icon,
.page-landline-texting .qa-card-icon,
.page-sms-text-back .qa-card-icon,
.page-virtual-receptionist-software .qa-card-icon {
    margin-bottom: 12px;
}

.page-apps .qa-card-icon,
.page-index .qa-card-icon {
    margin-bottom: 12px;
    /* Border color comes from Tailwind utilities on the element (e.g. border-[#F97316]) */
}