/**
 * Global readability — foreground/background contrast (WCAG-oriented).
 * Loaded from footer.xhtml so it applies site-wide after page-specific CSS.
 */
:root {
    --te-ink: #0f172a;
    --te-ink-body: #1e293b;
    --te-ink-muted: #475569;
    --te-ink-faint: #64748b;
    --te-surface: #ffffff;
    --te-surface-soft: #f8fafc;
    --te-edge: #e2e8f0;
    --te-brand: #183d71;
    --te-link: #183d71;
    --te-link-hover: #0f2847;
}

/* Thank-you / payment return / contact confirmation — solid panel on busy backgrounds */
.pay-return-wrap,
.thankyou-wrap {
    background: var(--te-surface);
    color: var(--te-ink-body);
    border-radius: 16px;
    border: 1px solid var(--te-edge);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.15);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding: 100px 28px 60px;
    text-align: center;
}

.pay-return-wrap h1,
.thankyou-wrap h1 {
    color: var(--te-brand);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pay-return-wrap p,
.thankyou-wrap p {
    color: var(--te-ink-body);
    font-size: 1.05rem;
    line-height: 1.65;
}

.pay-return-wrap code {
    background: #e8eef7;
    color: var(--te-ink);
    border: 1px solid #cbd5e1;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.92rem;
}

.pay-return-wrap a,
.thankyou-wrap a {
    color: var(--te-link);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pay-return-wrap a:hover,
.thankyou-wrap a:hover {
    color: var(--te-link-hover);
}

/* Pricing hero — second word was too light (#aaa) on pale gradient */
.pricing-content h1:nth-child(2) {
    color: var(--te-ink-faint) !important;
}

.pricing-content > p,
.pricing-content p {
    color: var(--te-ink-body) !important;
}

/* Checkout */
.checkout-wrap .checkout-lead {
    color: var(--te-ink-body) !important;
}

.checkout-wrap h1 {
    color: var(--te-brand);
}

/* FAQ — category titles were nearly invisible */
.faq-container .category-title {
    color: var(--te-ink-muted) !important;
    border-bottom-color: var(--te-edge) !important;
}

.faq-question {
    color: var(--te-ink-body) !important;
}

.faq-answer {
    color: var(--te-ink-body) !important;
}

/* Blog listing header tagline */
.header-blog p {
    color: var(--te-ink-muted) !important;
}

/* Clients showcase: do not force te-* dark inks here — .clients-showcase is a dark panel; colors live in cssClients.css */

/* Login / signup — subtitle on animated gradient (was low contrast vs background) */
.form-container .brand-subtitle {
    color: #f0f9ff !important;
    text-shadow: 0 1px 3px rgba(0, 24, 54, 0.65);
}

/* Terms / Privacy — plain prose pages without footer contrast hook */
.te-legal-page {
    color: var(--te-ink-body);
    background-color: var(--te-surface-soft);
}

.te-legal-page h1 {
    color: var(--te-brand);
}

.te-legal-page h2,
.te-legal-page h3 {
    color: var(--te-ink);
}

.te-legal-page a {
    color: var(--te-link);
    font-weight: 600;
}

.te-legal-page a:hover {
    color: var(--te-link-hover);
}

/* Service page pricing cards — description text */
.pricing-card .card-title,
.card .card-title {
    color: var(--te-ink-muted);
}

.features-list li {
    color: var(--te-ink-body);
}

/*
 * Clients showcase (dark panel): PrimeFaces theme + other globals often set h2/p to dark ink.
 * This file loads from the footer after head CSS, so these rules win.
 */
.clients-showcase .clients-showcase__copy > h2 {
    color: #f8fbff !important;
    text-shadow: 0 1px 3px rgba(0, 8, 24, 0.45);
}

.clients-showcase .clients-showcase__copy > p {
    color: rgba(248, 251, 255, 0.94) !important;
    text-shadow: 0 1px 2px rgba(0, 8, 24, 0.35);
}