/*
Theme Name:     Fabrixa (BrightHub Child)
Theme URI:      https://fabrixa.com
Description:    Fabrixa brand child theme for BrightHub. Overrides BrightHub's color tokens, typography, and logo to match Fabrixa's industrial infrastructure identity. Do NOT edit the BrightHub parent theme — all brand changes live here.
Author:         Probegin / Fabrixa
Author URI:     https://fabrixa.com
Template:       brighthub
Version:        1.0.0
Text Domain:    fabrixa
Tags:           saas, elementor, child-theme
*/

/* =====================================================================
   FABRIXA BRAND TOKENS
   --------------------------------------------------------------------
   Navy    #18202D  — primary surface / backgrounds
   Coral   #E95121  — accent / CTA / links / highlights
   Off-wht #F0F0F0  — body text on dark surface / light surfaces
   Muted   #9AA4B2  — secondary text, labels, dividers on dark
   Mono    'JetBrains Mono' — code, numerics, labels
   Body    'Poppins'        — everything else
   ===================================================================== */

/* 1. CSS CUSTOM PROPERTY OVERRIDES
      BrightHub outputs its color tokens via _options.scss as CSS vars on :root.
      We override them globally so every pxl_ widget inherits Fabrixa brand. */
:root,
body,
.elementor-kit-4,
[class*="elementor-kit-"] {
    /* Core palette */
    --fbx-navy:        #18202D;
    --fbx-navy-soft:   #1F2937;
    --fbx-coral:       #E95121;
    --fbx-coral-deep:  #C73E11;
    --fbx-cream:       #F0F0F0;
    --fbx-muted:       #9AA4B2;
    --fbx-border:      rgba(240, 240, 240, 0.08);

    /* Override BrightHub's tokens */
    --primary-color:        var(--fbx-coral);        /* was #181D27 */
    --secondary-color:      var(--fbx-coral);        /* was purple #7A5AF8 */
    --third-color:          var(--fbx-muted);        /* was grey */
    --body-bg-color:        var(--fbx-navy);         /* was #fff  -> dark mode */
    --body-color:           var(--fbx-cream);
    --heading-color:        var(--fbx-cream);
    --link-color:           var(--fbx-coral);
    --link-hover-color:     var(--fbx-cream);
    --border-color:         var(--fbx-border);
    --gradient-color-from:  var(--fbx-coral);
    --gradient-color-to:    var(--fbx-coral-deep);

    /* Typography tokens */
    --f-primary:   'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
    --f-secondary: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
    --f-mono:      'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

/* 2. GLOBAL TYPOGRAPHY */
html,
body {
    background-color: var(--fbx-navy);
    color: var(--fbx-cream);
    font-family: var(--f-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--f-primary);
    color: var(--fbx-cream);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

h1, .h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2, .h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3, .h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }

p, li, span { color: var(--fbx-cream); }

/* Monospace utility */
.fbx-mono,
.fbx-tag,
code, pre, kbd, samp {
    font-family: var(--f-mono);
    letter-spacing: 0;
}

/* 3. COMPONENT LAYER — links, buttons, selection */
a {
    color: var(--fbx-coral);
    text-decoration: none;
    transition: color .18s ease;
}
a:hover,
a:focus-visible {
    color: var(--fbx-cream);
}

::selection {
    background: var(--fbx-coral);
    color: var(--fbx-navy);
}

/* BrightHub button skin — coral CTA */
.pxl-button,
.pxl-btn,
.elementor-button,
.wp-block-button__link,
button.btn-primary {
    background: var(--fbx-coral) !important;
    border-color: var(--fbx-coral) !important;
    color: var(--fbx-navy) !important;
    font-family: var(--f-primary);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 2px !important;
}
.pxl-button:hover,
.pxl-btn:hover,
.elementor-button:hover,
.wp-block-button__link:hover,
button.btn-primary:hover {
    background: var(--fbx-cream) !important;
    border-color: var(--fbx-cream) !important;
    color: var(--fbx-navy) !important;
}

/* Ghost button variant (for "Read the docs" style) */
.fbx-btn-ghost,
.pxl-button.style-outline,
.elementor-button.elementor-button-outline {
    background: transparent !important;
    border: 1px solid var(--fbx-cream) !important;
    color: var(--fbx-cream) !important;
}
.fbx-btn-ghost:hover,
.pxl-button.style-outline:hover,
.elementor-button.elementor-button-outline:hover {
    background: var(--fbx-cream) !important;
    color: var(--fbx-navy) !important;
}

/* 4. SECTION / SURFACE STYLES */
.pxl-section,
.elementor-section,
main,
#pxl-main {
    background-color: transparent;
    color: var(--fbx-cream);
}

/* Coral accent strip — BrightHub's gradient pre-header used by Fabrixa as accent */
.fbx-coral-rule {
    height: 2px;
    width: 40px;
    background: var(--fbx-coral);
    display: inline-block;
}

/* 5. HEADER / NAVIGATION */
#pxl-header,
.pxl-header,
.pxl-header-default {
    background: var(--fbx-navy) !important;
    border-bottom: 1px solid var(--fbx-border);
}

.pxl-main-menu > ul > li > a,
.pxl-menu > ul > li > a,
.nav-primary a {
    color: var(--fbx-cream) !important;
    font-family: var(--f-primary);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.01em;
}
.pxl-main-menu > ul > li > a:hover,
.pxl-menu > ul > li > a:hover,
.pxl-main-menu > ul > li.current-menu-item > a {
    color: var(--fbx-coral) !important;
}

.pxl-main-menu .sub-menu,
.pxl-menu .sub-menu {
    background: var(--fbx-navy-soft) !important;
    border: 1px solid var(--fbx-border) !important;
    border-radius: 4px;
}
.pxl-main-menu .sub-menu a,
.pxl-menu .sub-menu a {
    color: var(--fbx-cream) !important;
}
.pxl-main-menu .sub-menu a:hover,
.pxl-menu .sub-menu a:hover {
    color: var(--fbx-coral) !important;
    background: rgba(233, 81, 33, 0.06) !important;
}

/* 6. FOOTER */
#pxl-footer,
.pxl-footer {
    background: var(--fbx-navy) !important;
    border-top: 1px solid var(--fbx-border);
    color: var(--fbx-muted);
}
#pxl-footer a,
.pxl-footer a {
    color: var(--fbx-cream);
}
#pxl-footer a:hover,
.pxl-footer a:hover {
    color: var(--fbx-coral);
}

/* 7. CARDS / TILES — used by products grid and statements grid */
.fbx-tile,
.pxl-image-box,
.pxl-info-box {
    background: var(--fbx-navy-soft);
    border: 1px solid var(--fbx-border);
    border-radius: 4px;
    transition: border-color .18s ease, transform .18s ease;
}
.fbx-tile:hover,
.pxl-image-box:hover,
.pxl-info-box:hover {
    border-color: var(--fbx-coral);
}

/* 8. FORMS */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="password"], input[type="number"],
textarea, select {
    background: var(--fbx-navy-soft) !important;
    border: 1px solid var(--fbx-border) !important;
    color: var(--fbx-cream) !important;
    font-family: var(--f-primary);
    border-radius: 2px !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--fbx-coral) !important;
    outline: none;
}
::placeholder { color: var(--fbx-muted); }

/* 9. CODE / API SAMPLE BLOCKS */
.fbx-code,
pre.fbx-code,
.elementor-widget-shortcode pre {
    background: #0E141D;
    border: 1px solid var(--fbx-border);
    border-radius: 4px;
    padding: 24px;
    font-family: var(--f-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--fbx-cream);
    overflow-x: auto;
}
.fbx-code .k  { color: #F7A072; }  /* keyword   */
.fbx-code .s  { color: #A7F3D0; }  /* string    */
.fbx-code .n  { color: #FDE68A; }  /* number    */
.fbx-code .c  { color: var(--fbx-muted); font-style: italic; }
.fbx-code .p  { color: var(--fbx-cream); }

/* 10. LABELS / TAGS — small uppercase coral markers */
.fbx-tag,
.pxl-sub-title,
.elementor-heading-title.small {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fbx-coral);
}

/* 11. FIGURES — give all tile images a dark-dominant fallback */
img { max-width: 100%; height: auto; }
.fbx-figure {
    background: var(--fbx-navy-soft);
    overflow: hidden;
}

/* 12. WOOCOMMERCE — keep consistent with dark brand (if used) */
.woocommerce-page,
.woocommerce-page * {
    color: var(--fbx-cream);
}
.woocommerce .button,
.woocommerce a.button {
    background: var(--fbx-coral) !important;
    color: var(--fbx-navy) !important;
}

/* 13. UTILITIES */
.fbx-bg-navy      { background: var(--fbx-navy); }
.fbx-bg-navy-soft { background: var(--fbx-navy-soft); }
.fbx-bg-coral     { background: var(--fbx-coral); color: var(--fbx-navy); }
.fbx-text-coral   { color: var(--fbx-coral); }
.fbx-text-cream   { color: var(--fbx-cream); }
.fbx-text-muted   { color: var(--fbx-muted); }
.fbx-border-t     { border-top: 1px solid var(--fbx-border); }
.fbx-border-b     { border-bottom: 1px solid var(--fbx-border); }
.fbx-container    { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* 14. KILL BRIGHTHUB'S LIGHT-MODE ARTIFACTS WHEN THEY LEAK */
body.home,
body.page-template-default,
.pxl-page-title,
.pxl-breadcrumbs {
    background: var(--fbx-navy) !important;
    color: var(--fbx-cream);
}
/* ===================================================================
   FABRIXA MEGA-MENU — rendered by [fbx_megamenu] shortcode
   v2 — beat BrightHub's mega-menu wrapper
   =================================================================== */

.fbx-megamenu,
.pxl-mega-menu .fbx-megamenu,
.sub-menu .fbx-megamenu,
.elementor-widget-shortcode .fbx-megamenu {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 56px !important;
    padding: 48px 64px !important;
    background: #18202D !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.fbx-megamenu.fbx-mm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.fbx-megamenu.fbx-mm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.fbx-megamenu.fbx-mm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

.fbx-megamenu .fbx-mm-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.fbx-megamenu .fbx-mm-heading {
    display: block !important;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #9AA4B2 !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

.fbx-megamenu .fbx-mm-item {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
    border: none !important;
    background: transparent !important;
}

.fbx-megamenu .fbx-mm-label {
    display: block !important;
    font-family: 'Poppins', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #F0F0F0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: color .15s ease !important;
}

.fbx-megamenu .fbx-mm-desc {
    display: block !important;
    font-family: 'Poppins', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #9AA4B2 !important;
    line-height: 1.5 !important;
    margin-top: 3px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.fbx-megamenu .fbx-mm-item:hover .fbx-mm-label,
.fbx-megamenu .fbx-mm-item:focus-visible .fbx-mm-label {
    color: #E95121 !important;
}

.fbx-megamenu .fbx-mm-cta {
    display: inline-block !important;
    margin-top: 24px !important;
    color: #E95121 !important;
    font-family: 'Poppins', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color .15s ease !important;
}
.fbx-megamenu .fbx-mm-cta:hover {
    color: #F0F0F0 !important;
}

/* Boxed-mode tightening */
.pxl-menu__mega-boxed .fbx-megamenu {
    padding: 36px 40px !important;
    gap: 40px !important;
}
/* Push column CTAs to bottom so they all align across columns */
.fbx-megamenu .fbx-mm-col {
    height: 100% !important;
}
.fbx-megamenu .fbx-mm-cta {
    margin-top: auto !important;
}
/* Hide BrightHub's default page-title bar on custom-template pages */
body.page-pricing #pxl-ptit__default,
body.page-pricing #pxl-ptit__elementor,
body.page-pricing .pxl-ptit,
body.fbx-no-title-bar #pxl-ptit__default,
body.fbx-no-title-bar #pxl-ptit__elementor,
body.fbx-no-title-bar .pxl-ptit {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Belt-and-braces — hide on any page with our custom main wrapper */
.fbx-page-pricing ~ #pxl-ptit__default,
.fbx-page-pricing ~ #pxl-ptit__elementor,
body:has(.fbx-page-pricing) #pxl-ptit__default,
body:has(.fbx-page-pricing) #pxl-ptit__elementor {
    display: none !important;
}
/* Headings cream on every custom-template page (not just homepage) */
body.fbx-no-title-bar h1,
body.fbx-no-title-bar h2,
body.fbx-no-title-bar h3,
body.fbx-no-title-bar h4,
body.fbx-no-title-bar h5,
body.fbx-no-title-bar h6,
body.fbx-no-title-bar .elementor-heading-title,
.fbx-page-pricing h1,
.fbx-page-pricing h2,
.fbx-page-pricing h3,
.fbx-page-pricing h4,
.fbx-page-pricing h5,
.fbx-page-pricing h6 {
    color: #F0F0F0 !important;
}
/* Letter-spacing fix for medium/small headings.
   H1 and H2 keep their tight branded tracking (-0.02em).
   H3 and smaller need normal/positive spacing for readability at smaller sizes. */
h3, h4, h5, h6,
.fbx-brand h3,
.fbx-brand h4,
.fbx-brand h5,
.fbx-brand h6 {
    letter-spacing: 0.015em;
}