/* =============================================================================
   HUMEXA THEME OVERRIDE
   Scoped entirely under body[data-theme="humexa"] so it layers on top of the
   base style.css. Loaded only when SITE_THEME=humexa. Disabling the flag
   removes this file and restores the original ("classic") design untouched.

   Design tokens (from Humexa handoff):
     bg #0A1628 · surface #1E2D40 · accent #0C7ECF / #019CE0 · gold #E8A020
     text #F0F4F8 / muted #8BA0B8 · fonts: Syne (headings) / Lora (body) / DM Mono (labels)
   ============================================================================= */

body[data-theme="humexa"] {
    --hx-bg: #0A1628;
    --hx-bg-2: #0d1b2f;
    --hx-surface: #1E2D40;
    --hx-surface-2: #243549;
    --hx-line: rgba(139, 160, 184, 0.18);
    --hx-accent: #019CE0;
    --hx-accent-2: #0C7ECF;
    --hx-gold: #E8A020;
    --hx-text: #F0F4F8;
    --hx-muted: #8BA0B8;
    --hx-heading: 'Syne', system-ui, sans-serif;
    --hx-body: 'Lora', Georgia, serif;
    --hx-mono: 'DM Mono', ui-monospace, monospace;

    background: var(--hx-bg);
    color: var(--hx-text);
    font-family: var(--hx-body);
}

/* Headings: apply the display FONT everywhere, but only recolor headings that
   sit on the dark page background. Cards/sections with their own light
   background keep their original dark heading color (see overrides below). */
body[data-theme="humexa"] h1,
body[data-theme="humexa"] h2,
body[data-theme="humexa"] h3,
body[data-theme="humexa"] h4,
body[data-theme="humexa"] h5,
body[data-theme="humexa"] h6,
body[data-theme="humexa"] .section-title,
body[data-theme="humexa"] .hero-title,
body[data-theme="humexa"] .cta-title {
    font-family: var(--hx-heading);
    letter-spacing: -0.02em;
}

/* Page-level headings that render directly on the dark background → light */
body[data-theme="humexa"] .section-title,
body[data-theme="humexa"] .hero-title {
    color: var(--hx-text);
}

body[data-theme="humexa"] .section-subtitle,
body[data-theme="humexa"] .hero-subtitle {
    color: var(--hx-muted);
}

/* Dark page sections: ALL headings light, ALL body copy muted — by default
   (descendant selectors so we don't depend on exact wrapper nesting).
   White cards inside these sections are flipped back to dark by the
   READABILITY GUARD block near the end of this file (higher specificity). */
body[data-theme="humexa"] .about-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .mission-vision-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .values-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .services-catalog-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .templates-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .testimonials-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .why-choose-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .partners-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .Management-Topic :is(h1,h2,h3,h4,h5,h6) {
    color: var(--hx-text);
}
body[data-theme="humexa"] .about-section :is(p,li,span),
body[data-theme="humexa"] .mission-vision-section > .container > .section-header :is(p,span),
body[data-theme="humexa"] .values-section > .container > .section-header :is(p,span),
body[data-theme="humexa"] .services-catalog-section :is(p,li),
body[data-theme="humexa"] .templates-section > .container-lg > .section-header :is(p,span),
body[data-theme="humexa"] .testimonials-section > .container-lg > .section-header :is(p,span),
body[data-theme="humexa"] .why-choose-section p,
body[data-theme="humexa"] .partners-section :is(p,span),
body[data-theme="humexa"] .Management-Topic :is(p,li) {
    color: var(--hx-muted);
}

/* Light-background cards keep dark, readable heading + body text */
body[data-theme="humexa"] .contact-info-card h1,
body[data-theme="humexa"] .contact-info-card h2,
body[data-theme="humexa"] .contact-info-card h3,
body[data-theme="humexa"] .contact-info-card h4,
body[data-theme="humexa"] .contact-info-card h5,
body[data-theme="humexa"] .mission-vision-card h1,
body[data-theme="humexa"] .mission-vision-card h2,
body[data-theme="humexa"] .mission-vision-card h3,
body[data-theme="humexa"] .mission-vision-card h4,
body[data-theme="humexa"] .mission-vision-card h5 {
    color: #10203a;
}
body[data-theme="humexa"] .contact-info-card p,
body[data-theme="humexa"] .mission-vision-card p {
    color: #555;
}

body[data-theme="humexa"] a { color: var(--hx-accent); }

/* ── Section backgrounds ────────────────────────────────────────────────── */
body[data-theme="humexa"] .services-catalog-section,
body[data-theme="humexa"] .templates-section,
body[data-theme="humexa"] .Management-Topic,
body[data-theme="humexa"] .wishlist-page,
body[data-theme="humexa"] main {
    background: var(--hx-bg);
}
body[data-theme="humexa"] .about-section,
body[data-theme="humexa"] .testimonials-section {
    background: var(--hx-bg-2);
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
body[data-theme="humexa"] .navbar-premium {
    background: rgba(10, 22, 40, 0.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hx-line);
}
body[data-theme="humexa"] .navbar-premium .nav-link {
    font-family: var(--hx-mono);
    font-size: 0.9rem;
    color: var(--hx-muted);
}
body[data-theme="humexa"] .navbar-premium .nav-link:hover { color: var(--hx-text); }
body[data-theme="humexa"] .brand-wordmark {
    font-family: var(--hx-heading);
    color: var(--hx-text);
}
/* "Humexa" — dim the middle so it reads Hum-exa like the handoff wordmark */
body[data-theme="humexa"] .brand-wordmark { position: relative; }
body[data-theme="humexa"] .brand-descriptor,
body[data-theme="humexa"] .footer-brand-descriptor {
    font-family: var(--hx-mono);
    color: var(--hx-muted);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
body[data-theme="humexa"] .btn-primary-modern {
    background: var(--hx-gold);
    border-color: var(--hx-gold);
    color: #10203a;
    font-family: var(--hx-mono);
    font-weight: 500;
    letter-spacing: 0.3px;
    border-radius: 6px;
}
body[data-theme="humexa"] .btn-primary-modern:hover {
    background: #f2ad2d;
    border-color: #f2ad2d;
    color: #10203a;
}
body[data-theme="humexa"] .btn-light,
body[data-theme="humexa"] .btn-outline-light {
    font-family: var(--hx-mono);
    border-radius: 6px;
}

/* ── Hero ─── matched 1:1 to the Humexa handoff (#hero) ─────────────────── */
body[data-theme="humexa"] .hero-slider,
body[data-theme="humexa"] .hero-slide { background: var(--hx-bg); }

/* Two glows on the element (blue top-right, gold bottom-left) like the handoff */
body[data-theme="humexa"] .hero-slide-bg {
    background-color: var(--hx-bg) !important;
    background-image:
        radial-gradient(circle 800px at calc(100% + 200px) -200px, rgba(12,126,207,0.14), transparent 65%),
        radial-gradient(circle 400px at -100px calc(100% - 100px), rgba(232,160,32,0.16), transparent 65%) !important;
    background-size: 100% 100%, 100% 100% !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat, no-repeat !important;
}
/* Grid on ::before, radial-masked so it fades toward the edges like the handoff */
body[data-theme="humexa"] .hero-slide-bg::before {
    content: '' !important;
    position: absolute; inset: 0;
    background:
        linear-gradient(rgba(12,126,207,0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12,126,207,0.18) 1px, transparent 1px) !important;
    background-size: 70px 70px, 70px 70px !important;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
    z-index: 2;
    pointer-events: none;
}

/* Hero sizing: align content toward the top (not vertically centered) and trim
   the height so the headline + subtitle + search bar fit on first view. */
body[data-theme="humexa"] .heroSwiper { min-height: 0; }
body[data-theme="humexa"] .hero-slide {
    height: auto;
    min-height: 88vh;
    align-items: flex-start;
    padding-top: 130px;
    padding-bottom: 3rem;
}
body[data-theme="humexa"] .hero-slide .container-lg,
body[data-theme="humexa"] .hero-slide .row { height: auto; }

/* Center the hero content (responsive so it never overflows on narrow screens) */
body[data-theme="humexa"] .hero-content { width: 100%; max-width: 900px; margin: 0 auto; text-align: center; }
body[data-theme="humexa"] .hero-eyebrow { justify-content: center; margin-bottom: 1.25rem; }
body[data-theme="humexa"] .hero-title { width: 100%; max-width: 100%; overflow-wrap: break-word; margin-bottom: 1.5rem; }
body[data-theme="humexa"] .hero-subtitle { margin: 0 auto 2rem; }
body[data-theme="humexa"] .search-container { margin: 0 auto; }

body[data-theme="humexa"] .services-catalog-section { background: var(--hx-bg); }

body[data-theme="humexa"] .hero-eyebrow {
    font-family: var(--hx-mono);
    color: var(--hx-accent);
    border: none;
    background: transparent;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.7rem;
    display: inline-flex; align-items: center; gap: 12px;
}
body[data-theme="humexa"] .hero-eyebrow::after {
    content: ''; display: inline-block;
    width: 40px; height: 1px; background: var(--hx-accent);
}
body[data-theme="humexa"] .hero-title {
    font-family: var(--hx-heading);
    font-weight: 800;
    font-size: clamp(2.4rem, 4.8vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--hx-text);
}
/* Word-level accent colors from the handoff (.acc = blue, .gold = gold) */
body[data-theme="humexa"] .hero-title .acc  { color: var(--hx-accent-2); }
body[data-theme="humexa"] .hero-title .gold { color: var(--hx-gold); }

body[data-theme="humexa"] .hero-subtitle {
    font-family: var(--hx-body);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--hx-muted);
    max-width: 560px;
}

/* Search box in hero — dark pill, gold round button */
body[data-theme="humexa"] .search-wrapper {
    background: rgba(30, 45, 64, 0.85);
    border: 1px solid var(--hx-line);
    border-radius: 50px;
    padding: 0.75rem 0.9rem 0.75rem 1.3rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
}
body[data-theme="humexa"] .search-wrapper:focus-within {
    border-color: var(--hx-gold);
    box-shadow: 0 8px 32px rgba(232, 160, 32, 0.25);
}
body[data-theme="humexa"] .search-wrapper i { color: var(--hx-gold); }
body[data-theme="humexa"] .search-input {
    background: transparent;
    color: var(--hx-text);
    font-family: var(--hx-body);
}
body[data-theme="humexa"] .search-input::placeholder { color: var(--hx-muted); }
body[data-theme="humexa"] .btn-search {
    background: var(--hx-gold);
    color: #10203a;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
body[data-theme="humexa"] .btn-search i {
    color: #10203a;
    font-size: 1.05rem;
    line-height: 1;
    margin: 0;
}
body[data-theme="humexa"] .btn-search:hover { background: #f2ad2d; transform: none; }

/* ── Eyebrows / tags ────────────────────────────────────────────────────── */
body[data-theme="humexa"] .svc-eyebrow,
body[data-theme="humexa"] .section-tag {
    font-family: var(--hx-mono);
    color: var(--hx-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ── Service cards ──────────────────────────────────────────────────────── */
body[data-theme="humexa"] .svc-card {
    background: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: 18px;
    color: var(--hx-text);
}
body[data-theme="humexa"] .svc-card:hover { border-color: var(--hx-accent); }
body[data-theme="humexa"] .svc-card.featured {
    border-color: var(--hx-gold);
    box-shadow: 0 0 0 1px var(--hx-gold);
}
body[data-theme="humexa"] .svc-card-num { font-family: var(--hx-mono); color: var(--hx-accent); }
body[data-theme="humexa"] .svc-card-name { font-family: var(--hx-heading); color: var(--hx-text); }
body[data-theme="humexa"] .svc-card-desc,
body[data-theme="humexa"] .svc-card-tag { color: var(--hx-muted); }
body[data-theme="humexa"] .svc-card-explore { color: var(--hx-gold); font-family: var(--hx-mono); }
body[data-theme="humexa"] .svc-pill {
    background: var(--hx-gold); color: #10203a;
    font-family: var(--hx-mono); text-transform: uppercase;
}
body[data-theme="humexa"] .svc-pill.new { background: var(--hx-accent); color: #fff; }

/* ── Product / template cards ───────────────────────────────────────────── */
body[data-theme="humexa"] .template-card {
    background: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: 18px;
}
body[data-theme="humexa"] .template-title { font-family: var(--hx-heading); color: var(--hx-text); }
body[data-theme="humexa"] .template-stats p { color: var(--hx-muted); }
body[data-theme="humexa"] .amount-text { color: var(--hx-gold); font-family: var(--hx-mono); }

/* ── Topic / category cards ─────────────────────────────────────────────── */
body[data-theme="humexa"] .category-card {
    background: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: 18px;
}
body[data-theme="humexa"] .category-header {
    background: var(--hx-surface-2);
    color: var(--hx-text);
    font-family: var(--hx-heading);
}
body[data-theme="humexa"] .category-list a,
body[data-theme="humexa"] .category-list li { color: var(--hx-muted); }

/* ── About stats ────────────────────────────────────────────────────────── */
body[data-theme="humexa"] .stat,
body[data-theme="humexa"] .stat-box,
body[data-theme="humexa"] .about-stat {
    background: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: 12px;
    color: var(--hx-text);
}

/* ── Testimonials ───────────────────────────────────────────────────────── */
body[data-theme="humexa"] .testimonial-card {
    background: var(--hx-surface);
    border: 1px solid var(--hx-line);
    border-radius: 18px;
    color: var(--hx-text);
}
body[data-theme="humexa"] .testimonial-text { color: var(--hx-text); font-style: italic; }
body[data-theme="humexa"] .testimonial-author strong { color: var(--hx-text); font-family: var(--hx-heading); }
body[data-theme="humexa"] .testimonial-author p { color: var(--hx-muted); }
body[data-theme="humexa"] .testimonial-stars i { color: var(--hx-gold); }

/* ── CTA band (above footer) ────────────────────────────────────────────── */
body[data-theme="humexa"] .cta-section {
    background: linear-gradient(135deg, var(--hx-accent-2), var(--hx-bg));
    border-top: 1px solid var(--hx-line);
}
body[data-theme="humexa"] .cta-title { color: #fff; }
body[data-theme="humexa"] .cta-subtitle { color: rgba(240, 244, 248, 0.85); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
body[data-theme="humexa"] .footer-section {
    background: #06101f;
    border-top: 1px solid var(--hx-line);
}
body[data-theme="humexa"] .footer-title { font-family: var(--hx-heading); color: var(--hx-text); }
body[data-theme="humexa"] .footer-text,
body[data-theme="humexa"] .footer-links a { color: var(--hx-muted); }
body[data-theme="humexa"] .footer-links a:hover { color: var(--hx-accent); }
body[data-theme="humexa"] .footer-bottom { border-top: 1px solid var(--hx-line); }
body[data-theme="humexa"] .social-links a { color: var(--hx-muted); }
body[data-theme="humexa"] .social-links a:hover { color: var(--hx-gold); }

/* ── Generic surfaces used across inner pages (cards, forms, tables) ────── */
body[data-theme="humexa"] .card {
    background: var(--hx-surface);
    border: 1px solid var(--hx-line);
    color: var(--hx-text);
}
body[data-theme="humexa"] .form-control,
body[data-theme="humexa"] .form-select {
    background: var(--hx-surface);
    border: 1px solid var(--hx-line);
    color: var(--hx-text);
}
body[data-theme="humexa"] .form-control::placeholder { color: var(--hx-muted); }
body[data-theme="humexa"] .table { color: var(--hx-text); }

/* Swiper controls */
body[data-theme="humexa"] .swiper-button-next,
body[data-theme="humexa"] .swiper-button-prev { color: var(--hx-gold); }
body[data-theme="humexa"] .swiper-pagination-bullet-active { background: var(--hx-gold); }

/* =============================================================================
   READABILITY GUARD
   body sets light text for dark sections; these containers keep their own
   LIGHT (white) background from the base stylesheet, so force dark text inside
   them so headings/copy stay readable. Covers all inner-page white cards/forms.
   ============================================================================= */
body[data-theme="humexa"] .wishlist-card,
body[data-theme="humexa"] .wishlist-empty-card,
body[data-theme="humexa"] .wishlist-stat-chip,
body[data-theme="humexa"] .team-member-card,
body[data-theme="humexa"] .blog-card,
body[data-theme="humexa"] .contact-info-card,
body[data-theme="humexa"] .mission-vision-card,
body[data-theme="humexa"] .contact-form-section,
body[data-theme="humexa"] .login-form-section,
body[data-theme="humexa"] .register-form-section,
body[data-theme="humexa"] .appointment-info-card,
body[data-theme="humexa"] .appointment-form-section,
body[data-theme="humexa"] .appointment-slots-scroll,
body[data-theme="humexa"] .cart-items-section,
body[data-theme="humexa"] .cart-summary-section,
body[data-theme="humexa"] .product-page-container,
body[data-theme="humexa"] .cms-page-card,
body[data-theme="humexa"] .cms-page-content,
body[data-theme="humexa"] .pd-price-block,
body[data-theme="humexa"] .pd-faq-item,
body[data-theme="humexa"] .pd-tabs-section,
body[data-theme="humexa"] .pd-pdf-viewer-wrap,
body[data-theme="humexa"] .category-description-intro {
    color: #1c2b3e;
}
body[data-theme="humexa"] .wishlist-card :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .team-member-card :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .blog-card :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .contact-info-card :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .mission-vision-card :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .contact-form-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .login-form-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .register-form-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .appointment-info-card :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .appointment-form-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .cart-items-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .cart-summary-section :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .product-page-container :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .cms-page-card :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .pd-price-block :is(h1,h2,h3,h4,h5,h6),
body[data-theme="humexa"] .pd-tabs-section :is(h1,h2,h3,h4,h5,h6) {
    color: #10203a;
}
/* form fields inside white form sections stay light-on-light? no — keep them
   readable: white field, dark text (override the dark-surface .form-control) */
body[data-theme="humexa"] .contact-form-section .form-control,
body[data-theme="humexa"] .login-form-section .form-control,
body[data-theme="humexa"] .register-form-section .form-control,
body[data-theme="humexa"] .appointment-form-section .form-control,
body[data-theme="humexa"] .cart-summary-section .form-control {
    background: #fff;
    color: #1c2b3e;
    border-color: #d7dde5;
}