/* ============================================
   XENO TYPE BRIDGE — load LAST in <head>
   Beats: inline template <style>, Tailwind utilities, legacy styles.css
   Goal: one readable scale + brand colors sitewide
   ============================================ */

/* Global page canvas (marketing + blog shells) */
body {
    font-family: var(--font-family, "Inter", system-ui, sans-serif) !important;
    font-size: var(--xeno-fs-base) !important;
    line-height: var(--xeno-lh-body) !important;
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text) !important;
}

/* Kill template / inline .container drift */
.container {
    max-width: var(--xeno-container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--xeno-container-pad) !important;
    padding-right: var(--xeno-container-pad) !important;
}

@media (max-width: 768px) {
    .container {
        padding-left: var(--xeno-container-pad-sm) !important;
        padding-right: var(--xeno-container-pad-sm) !important;
    }

    .top-navbar-logo img,
    .home-nav-logo,
    .services-nav-logo,
    .about-nav-logo {
        max-height: 2.25rem !important;
        width: auto !important;
    }

    .mobile-menu-link {
        font-size: 0.95rem !important;
        padding-top: 0.7rem !important;
        padding-bottom: 0.7rem !important;
    }
}

/* Hero primitives (inline blocks often redefine these) */
.hero-title {
    font-size: var(--xeno-fs-hero) !important;
    font-weight: 700 !important;
    line-height: var(--xeno-lh-tight) !important;
    letter-spacing: var(--xeno-letter-heading) !important;
    color: var(--color-text) !important;
    max-width: var(--xeno-measure-wide) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    text-wrap: balance;
}

.hero-subtitle {
    font-size: var(--xeno-fs-xl) !important;
    line-height: var(--xeno-lh-body) !important;
    color: var(--color-muted) !important;
    max-width: var(--xeno-measure-prose) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.section-title {
    font-size: clamp(1.5rem, 1.5vw + 1.1rem, var(--xeno-fs-4xl)) !important;
    font-weight: 700 !important;
    line-height: var(--xeno-lh-tight) !important;
    letter-spacing: var(--xeno-letter-heading) !important;
    color: var(--color-text) !important;
    text-align: center !important;
}

.section-subtitle {
    font-size: var(--xeno-fs-lg) !important;
    line-height: var(--xeno-lh-body) !important;
    color: var(--color-muted) !important;
    max-width: var(--xeno-measure-prose) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* -------- Blog / Tailwind article (direct children of body or main) -------- */
article h1,
article h1.text-4xl,
article h1.text-5xl {
    font-size: var(--xeno-fs-hero) !important;
    font-weight: 700 !important;
    line-height: var(--xeno-lh-tight) !important;
    letter-spacing: var(--xeno-letter-heading) !important;
    color: var(--color-text) !important;
}

article h2.text-2xl,
article h2 {
    font-size: var(--xeno-fs-2xl) !important;
    font-weight: 700 !important;
    line-height: var(--xeno-lh-tight) !important;
    color: var(--color-text) !important;
}

article h3.text-xl,
article h3 {
    font-size: var(--xeno-fs-xl) !important;
    font-weight: 700 !important;
    line-height: var(--xeno-lh-snug) !important;
    color: var(--color-text) !important;
}

article p.text-lg,
article p.text-xl,
article p.leading-relaxed {
    font-size: var(--xeno-fs-lg) !important;
    line-height: var(--xeno-lh-relaxed) !important;
    color: var(--color-muted) !important;
}

article p.text-sm,
article span.text-sm {
    font-size: var(--xeno-fs-sm) !important;
    line-height: var(--xeno-lh-body) !important;
}

/* Map slate/gray copy to theme neutrals inside article only */
article .text-gray-400,
article .text-gray-500 {
    color: var(--xeno-text-faint) !important;
}

article .text-gray-600,
article .text-gray-700 {
    color: var(--color-muted) !important;
}

article .text-gray-900 {
    color: var(--color-text) !important;
}

/* Article column width: align with design system measure */
article .max-w-4xl,
article .max-w-3xl {
    max-width: var(--xeno-measure-wide) !important;
}

/* Tailwind scale inside main marketing columns (framework, hybrid pages) */
main .text-sm {
    font-size: var(--xeno-fs-sm) !important;
}
main .text-base {
    font-size: var(--xeno-fs-base) !important;
}
main .text-lg {
    font-size: var(--xeno-fs-lg) !important;
    line-height: var(--xeno-lh-relaxed) !important;
}
main .text-xl {
    font-size: var(--xeno-fs-xl) !important;
}
main .text-2xl {
    font-size: var(--xeno-fs-2xl) !important;
    line-height: var(--xeno-lh-tight) !important;
}
main .text-3xl {
    font-size: var(--xeno-fs-3xl) !important;
    line-height: var(--xeno-lh-tight) !important;
}
main .text-4xl {
    font-size: var(--xeno-fs-4xl) !important;
    line-height: var(--xeno-lh-tight) !important;
}
main .text-5xl {
    font-size: var(--xeno-fs-hero) !important;
    line-height: var(--xeno-lh-tight) !important;
}

main .text-gray-600,
main .text-gray-700 {
    color: var(--color-muted) !important;
}
main .text-gray-900 {
    color: var(--color-text) !important;
}

/* Dark marketing footers: keep layout; normalize meta text size only */
footer.footer .text-gray-400,
footer.footer .text-sm {
    font-size: var(--xeno-fs-sm) !important;
    opacity: 0.9;
}

/* ============================================
   LAYOUT BRIDGE — nav bar to first main content
   Beats: inline .hero-section hacks, Tailwind pt-24/pt-32, min-height:75vh heroes
   ============================================ */

/* Any first block in #main-content: same air below top chrome */
main#main-content > *:first-child {
    padding-top: var(--xeno-main-below-nav) !important;
}

/* Hero-only: reset template flex / min-height so vertical rhythm matches other routes */
main#main-content > .hero-section:first-child {
    padding-bottom: var(--xeno-hero-pad-bottom) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: unset !important;
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
}

/* Blog posts: fixed nav + consistent clearance (class from templates) */
article.pt-32 {
    padding-top: var(--xeno-article-nav-clearance) !important;
}

/* Standalone framework doc (no site nav): align top inset with marketing rhythm */
body > main.py-20 {
    padding-top: var(--xeno-main-below-nav) !important;
}

/* ============================================
   BUTTON BRIDGE — inline template gradients / oversized padding
   Beats: legacy .btn-* blocks in styles.css / inline <style>
   ============================================ */
/* Nav bar CTA uses .top-navbar-cta — same chrome as .btn-primary (gold primary, not legacy teal) */
.btn-primary,
a.btn-primary,
button.btn-primary,
a.top-navbar-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--xeno-btn-gap) !important;
    padding: var(--xeno-btn-py) var(--xeno-btn-px) !important;
    min-height: var(--xeno-btn-min-height) !important;
    font-size: var(--xeno-btn-fs) !important;
    font-weight: var(--xeno-btn-fw) !important;
    line-height: var(--xeno-btn-leading) !important;
    border-radius: var(--xeno-btn-radius) !important;
    background: var(--xeno-btn-primary-bg) !important;
    color: var(--xeno-btn-primary-fg) !important;
    border: 1px solid var(--xeno-btn-primary-border) !important;
    background-image: none !important;
    box-shadow: var(--xeno-btn-primary-shadow) !important;
    text-decoration: none !important;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
a.top-navbar-cta:hover {
    background: var(--xeno-btn-primary-bg-hover) !important;
    color: var(--xeno-btn-primary-fg) !important;
    background-image: none !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--xeno-btn-primary-shadow-hover) !important;
}

.btn-primary:active,
a.btn-primary:active,
button.btn-primary:active,
a.top-navbar-cta:active {
    transform: translateY(0) !important;
    box-shadow: var(--xeno-btn-primary-shadow) !important;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
a.top-navbar-cta:focus-visible {
    outline: 2px solid var(--xeno-accent) !important;
    outline-offset: 2px !important;
}

.btn-secondary,
a.btn-secondary,
button.btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--xeno-btn-gap) !important;
    padding: var(--xeno-btn-py) var(--xeno-btn-px) !important;
    min-height: var(--xeno-btn-min-height) !important;
    font-size: var(--xeno-btn-fs) !important;
    font-weight: var(--xeno-btn-fw) !important;
    line-height: var(--xeno-btn-leading) !important;
    border-radius: var(--xeno-btn-radius) !important;
    color: var(--xeno-btn-secondary-fg) !important;
    border: var(--xeno-btn-secondary-border-w) solid var(--xeno-btn-secondary-border) !important;
    background: var(--xeno-btn-secondary-bg) !important;
    background-image: none !important;
    box-shadow: var(--xeno-btn-secondary-shadow) !important;
    text-decoration: none !important;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
    background: var(--xeno-btn-secondary-hover-bg) !important;
    color: var(--xeno-btn-secondary-hover-fg) !important;
    border-color: var(--xeno-btn-secondary-hover-bg) !important;
    background-image: none !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--xeno-btn-secondary-shadow-hover) !important;
}

.btn-secondary:active,
a.btn-secondary:active,
button.btn-secondary:active {
    transform: translateY(0) !important;
    box-shadow: var(--xeno-btn-secondary-shadow) !important;
    background: var(--xeno-btn-secondary-hover-bg) !important;
    color: var(--xeno-btn-secondary-hover-fg) !important;
    border-color: var(--xeno-btn-secondary-hover-bg) !important;
}

/* Full-width form CTAs — same chrome, template often sets huge padding */
form .btn-primary,
.newsletter-form .btn-primary {
    width: 100% !important;
    padding: var(--xeno-btn-py) var(--xeno-btn-px) !important;
    min-height: var(--xeno-btn-min-height) !important;
    font-size: var(--xeno-btn-fs) !important;
    font-weight: var(--xeno-btn-fw) !important;
    line-height: var(--xeno-btn-leading) !important;
    border-radius: var(--xeno-btn-radius) !important;
    box-shadow: var(--xeno-btn-primary-shadow) !important;
}

form .btn-primary:hover,
.newsletter-form .btn-primary:hover {
    box-shadow: var(--xeno-btn-primary-shadow-hover) !important;
    transform: translateY(-1px) !important;
}

/* Contact page (and similar): inline <style> uses .contact-form .btn-primary — match specificity + load order */
.contact-form .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--xeno-btn-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--xeno-btn-py) var(--xeno-btn-px) !important;
    min-height: var(--xeno-btn-min-height) !important;
    font-size: var(--xeno-btn-fs) !important;
    font-weight: var(--xeno-btn-fw) !important;
    line-height: var(--xeno-btn-leading) !important;
    border-radius: var(--xeno-btn-radius) !important;
    background: var(--xeno-btn-primary-bg) !important;
    background-image: none !important;
    color: var(--xeno-btn-primary-fg) !important;
    border: 1px solid var(--xeno-btn-primary-border) !important;
    box-shadow: var(--xeno-btn-primary-shadow) !important;
    cursor: pointer !important;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease !important;
}

.contact-form .btn-primary:hover {
    background: var(--xeno-btn-primary-bg-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--xeno-btn-primary-shadow-hover) !important;
}

.contact-form .btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: var(--xeno-btn-primary-shadow) !important;
}

/* ============================================
   DARK MODE — Tailwind / legacy gray utilities
   Problem: --xeno-n-* stayed light in dark, so .bg-gray-50 / .bg-white stayed cream while body went dark.
   Also: .text-gray-900 must read as primary text, not “n-900” chip color.
   Load order: this file is last; these beat utilities + CDN Tailwind.
   ============================================ */
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800 {
    color: var(--color-text) !important;
}

html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600 {
    color: var(--color-muted) !important;
}

html[data-theme="dark"] .text-gray-500 {
    color: var(--xeno-text-subtle) !important;
}

html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-gray-300 {
    color: var(--xeno-text-faint) !important;
}

html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300 {
    border-color: var(--color-border) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100 {
    background-color: var(--color-bg-secondary) !important;
}

html[data-theme="dark"] .bg-gray-200 {
    background-color: var(--color-bg-tertiary) !important;
}

html[data-theme="dark"] .bg-gray-900 {
    background-color: var(--xeno-footer-bg) !important;
}

/* Tailwind opacity backgrounds (article headers, nav glass) */
html[data-theme="dark"] .bg-white\/80,
html[data-theme="dark"] .bg-white\/90 {
    background-color: color-mix(in srgb, var(--xeno-surface) 88%, transparent) !important;
}

html[data-theme="dark"] .border-gray-200\/50 {
    border-color: color-mix(in srgb, var(--color-border) 55%, transparent) !important;
}

html[data-theme="dark"] nav.bg-white,
html[data-theme="dark"] header.bg-white {
    background-color: var(--color-bg-secondary) !important;
}

html[data-theme="dark"] a.text-emerald-600,
html[data-theme="dark"] .text-emerald-600,
html[data-theme="dark"] .hover\:text-emerald-600:hover {
    color: var(--color-accent) !important;
}

html[data-theme="dark"] .bg-emerald-100 {
    background-color: var(--xeno-accent-tint-bg) !important;
}

/* ============================================
   INLINE MARKETING TEMPLATE (hex in <style>)
   Pages like contact, apps, pricing, resources, privacy ship a duplicated block AFTER
   linked CSS: .hero-section gradient, .card #FFF, .nav-link #374151, etc. Those rules
   win in the cascade unless we match + !important here (load this file last).
   ============================================ */
html[data-theme="dark"] .hero-section {
    background: linear-gradient(
        135deg,
        var(--xeno-page) 0%,
        var(--xeno-surface) 50%,
        var(--xeno-page) 100%
    ) !important;
}

html[data-theme="dark"] .hero-section::before {
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--xeno-accent) 18%, transparent) 0%,
        transparent 70%
    ) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .hero-stat {
    background: var(--xeno-surface) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--color-text);
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .hero-stat:hover {
    border-color: var(--color-accent) !important;
    box-shadow: var(--shadow-md) !important;
}

html[data-theme="dark"] .card::before {
    background: linear-gradient(
        90deg,
        var(--xeno-accent),
        color-mix(in srgb, var(--xeno-accent) 55%, var(--xeno-cta) 45%)
    ) !important;
}

html[data-theme="dark"] .nav-link {
    color: var(--color-muted) !important;
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active {
    color: var(--color-accent) !important;
    background-color: var(--xeno-accent-soft) !important;
}

html[data-theme="dark"] .section-title {
    color: var(--color-text) !important;
}

html[data-theme="dark"] .section-subtitle {
    color: var(--color-muted) !important;
}

html[data-theme="dark"] .hero-stat-title {
    color: var(--color-text) !important;
}

html[data-theme="dark"] .hero-stat-desc {
    color: var(--color-muted) !important;
}

html[data-theme="dark"] .hero-stat-icon {
    color: var(--color-accent) !important;
}

/* Legacy mobile strip bundled with the same template */
html[data-theme="dark"] .top-nav {
    background: var(--xeno-surface) !important;
    border-bottom-color: var(--color-border) !important;
}

html[data-theme="dark"] .top-nav-toggle {
    border-color: var(--color-border) !important;
}

html[data-theme="dark"] .top-nav-toggle:hover {
    background: var(--xeno-accent-soft) !important;
    border-color: var(--color-accent) !important;
}

html[data-theme="dark"] .top-nav-menu {
    background: var(--xeno-surface) !important;
    border-top-color: var(--color-border) !important;
}

html[data-theme="dark"] .top-nav-link {
    color: var(--color-muted) !important;
    border-bottom-color: var(--color-border) !important;
}

html[data-theme="dark"] .top-nav-link:hover,
html[data-theme="dark"] .top-nav-link.active {
    background: var(--xeno-accent-soft) !important;
    color: var(--color-accent) !important;
}

/* Contact form fields (inline #E1DDD6 / gray labels) */
html[data-theme="dark"] .contact-form .form-input,
html[data-theme="dark"] .contact-form .form-textarea,
html[data-theme="dark"] .contact-form .form-select,
html[data-theme="dark"] .contact-form-input {
    border-color: var(--color-border) !important;
    background-color: var(--xeno-surface) !important;
    color: var(--color-text) !important;
}

html[data-theme="dark"] .contact-form .form-label,
html[data-theme="dark"] .contact-info-item h4 {
    color: var(--color-text) !important;
}

html[data-theme="dark"] .contact-faq-a,
html[data-theme="dark"] .contact-faq-a-last,
html[data-theme="dark"] .contact-info-row,
html[data-theme="dark"] .contact-location-value {
    color: var(--color-muted) !important;
}

/* --------------------------------------------------------------------------
   Touch / tablet / narrow: never leave cards or entrance layers invisible.
   Beats GSAP inline opacity on .card when ScrollTrigger failed (images looked "missing").
   -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse), (max-width: 1199px) {
    .card,
    .motion-ready [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}
