/*
Theme Name: NOVUS Divi Child
Theme URI: https://dev.novuspower.com
Description: NOVUS Precision Timing Products — dark red theme for Divi. Converted from Figma design.
Author: WLTechBlog
Author URI: https://wltechblog.com
Template: Divi
Version: 1.9.14
License: proprietary
Text Domain: novus-divi
*/

/* ═══════════════════════════════════════════════════════════
   NOVUS Design Tokens — from Figma .make export
   ═══════════════════════════════════════════════════════════ */
:root {
    /* Backgrounds */
    --novus-bg-primary:    #080000;
    --novus-bg-secondary:  #060000;
    --novus-bg-card:       #120000;
    --novus-bg-nav:        linear-gradient(to right, #cc0000, #000000);
    --novus-bg-footer:     #030811;
    --novus-bg-section:    #050000;
    --novus-bg-splash:     radial-gradient(ellipse 70% 55% at 50% 50%, rgba(204,0,0,0.08) 0%, transparent 70%);

    /* Accent colors */
    --novus-red:           #cc0000;
    --novus-red-bright:    #ff3333;
    --novus-red-dim:       #8a5050;
    --novus-red-dark:      #5a3030;
    --novus-red-tint:      rgba(200,0,0,0.08);

    /* Text colors */
    --novus-text-heading:  #f0e8e8;
    --novus-text-body:     #b08080;
    --novus-text-muted:    #8a6060;
    --novus-text-faint:    #5a3030;
    --novus-text-dim:      #3d5068;
    --novus-text-link:     #cc0000;
    --novus-text-link-hover: #ff3333;

    /* Borders */
    --novus-border:        rgba(200,0,0,0.11);
    --novus-border-strong: rgba(200,0,0,0.35);
    --novus-border-faint:  rgba(0,180,255,0.08);

    /* Fonts */
    --novus-font-body:     'Inter', system-ui, -apple-system, sans-serif;
    --novus-font-mono:     'JetBrains Mono', 'Courier New', monospace;
    --novus-font-cond:     'Roboto Condensed', 'Inter', sans-serif;

    /* Radius */
    --novus-radius:        8px;
    --novus-radius-lg:     12px;
    --novus-radius-xl:     16px;

    /* Layout */
    --novus-max-width:     1280px;
    --novus-nav-height:    64px;
}

/* ═══════════════════════════════════════════════════════════
   Base Styles
   ═══════════════════════════════════════════════════════════ */
body {
    font-family: var(--novus-font-body);
    background: var(--novus-bg-primary);
    color: var(--novus-text-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--novus-font-body);
    color: var(--novus-text-heading);
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    letter-spacing: -0.025em;
    line-height: 1.08;
}

h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.02em;
}

h3 {
    font-size: 1.5rem;
    letter-spacing: -0.015em;
}

h4 {
    font-size: 1.2rem;
}

/* Links */
a { color: var(--novus-text-link); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--novus-text-link-hover); }

/* Code / mono */
code, pre, .mono {
    font-family: var(--novus-font-mono);
}

/* Paragraphs */
p { color: var(--novus-text-body); line-height: 1.7; }

/* Labels / eyebrows */
.novus-eyebrow {
    font-family: var(--novus-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--novus-red);
    font-weight: 700;
}

.novus-eyebrow-dim {
    font-family: var(--novus-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--novus-red-dim);
}

/* ═══════════════════════════════════════════════════════════
   Body Containers
   ═══════════════════════════════════════════════════════════ */
#main-content,
.et_pb_section,
.novus-container {
    background: var(--novus-bg-primary);
}

.novus-container {
    max-width: var(--novus-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ═══════════════════════════════════════════════════════════
   Navbar Override
   ═══════════════════════════════════════════════════════════ */
#main-header,
.et-l--header {
    background: var(--novus-bg-nav) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--novus-border-strong);
}

#main-header .logo_container a,
#main-header .et_mobile_menu a,
#main-header nav>ul>li>a {
    color: rgba(255,255,255,0.8) !important;
    font-family: var(--novus-font-body);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

#main-header nav>ul>li>a:hover,
#main-header .et_mobile_menu a:hover {
    color: #fff !important;
}

#main-header nav>ul>li.current-menu-item>a,
#main-header nav>ul>li.current_page_item>a {
    color: #fff !important;
}

#top-header {
    background: rgba(0,0,0,0.9) !important;
    color: var(--novus-red-dim) !important;
    font-family: var(--novus-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
}

#top-header a { color: var(--novus-red-dim) !important; }

/* Mobile menu */
.et_mobile_menu {
    background: linear-gradient(to right, #cc0000, #000000) !important;
    border-top: 1px solid var(--novus-border-strong);
}

/* Products dropdown — Figma Navbar dropdown spec */
/* Cert badge — desktop only (hidden in mobile menu per Figma) */
#top-menu li.novus-cert-item { display: none; }

@media only screen and (min-width: 981px) {

    /* Invisible bridge covering the float gap so hover isn't lost */
    #top-menu > li.menu-item-has-children::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 8px;
    }

    #top-menu li ul.sub-menu {
        top: 100% !important;
        margin-top: 8px !important;
        left: 0 !important;
        right: auto !important;
        width: 288px !important;
        padding: 8px 0 !important;
        background: #1a0000 !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 8px;
        box-shadow: 0 28px 56px rgba(0,0,0,0.65) !important;
        -webkit-box-shadow: 0 28px 56px rgba(0,0,0,0.65) !important;
        overflow: hidden;
        z-index: 99999;
    }

    #top-menu li ul.sub-menu::before {
        content: "PRODUCT CATEGORIES";
        display: block;
        padding: 8px 16px;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        color: rgba(255,255,255,0.35);
        font-family: var(--novus-font-mono);
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    #top-menu li ul.sub-menu li {
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        line-height: 1.4 !important;
    }

    #top-menu li ul.sub-menu li a {
        padding: 10px 16px !important;
        width: 100% !important;
        color: rgba(255,255,255,0.65) !important;
        font-family: var(--novus-font-body);
        font-size: 14px;
        font-weight: 400;
        letter-spacing: normal;
        text-transform: none;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    #top-menu li ul.sub-menu li a:hover {
        color: #ffffff !important;
        background: rgba(255,255,255,0.07);
    }


    /* Nav row layout — Figma: logo left, links + cert badge on one right-aligned row.
       Divi's left-header style pushes the nav right via inline padding-left computed
       from the logo width (js); the oversized 1024px logo made it overflow the container.
       Neutralize it and lay the menu out as a flex row so the badge is a real flex item. */
    #logo {
        max-height: 40px !important;
        width: auto !important;
        height: auto !important;
    }
    /* Divi left-header centers the logo via a zero-width inline helper; the collapsed
       container chain leaves the logo top-aligned in the 80px bar. Center it directly. */
    #main-header .logo_container {
        height: 80px !important;
        display: flex !important;
        align-items: center !important;
    }
    /* Nav row: flex the whole nav so links + badge form one right-aligned row.
       Divi's left-header style relies on inline padding-left (computed from the logo
       width by js) + 33px link paddings — both neutralized; badge flushes to the
       container's right edge as a plain flex item. */
    #et-top-navigation {
        padding: 0 !important;
        height: 80px;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        float: right;
    }
    #et-top-navigation nav#top-menu-nav { float: none !important; }
    #et-top-navigation nav > ul > li > a { padding-bottom: 0 !important; }
    #top-menu {
        display: flex !important;
        align-items: center;
        float: none !important;
    }
    #top-menu > li { float: none !important; }

    /* Uniform spacing between nav items + before the cert badge.
       Divi's default link paddings (0 left / 20px right) are asymmetric and
       also produced the tight 20px gap in front of the badge. Zero them and
       drive all spacing with one flex gap, matching the Figma Navbar's
       uniform gap between every nav child. */
    #et-top-navigation nav > ul > li > a {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #top-menu {
        gap: 34px;
    }
    #top-menu li.novus-cert-item {
        margin-left: 26px;
    }

    /* Cert badge (AS9100 / Made in USA / ISO9001) — flex sibling of the links,
       per Figma Navbar (36px tall, desktop only). */
    #top-menu li.novus-cert-item {
        display: block !important;
        position: static !important;
        transform: none !important;
        float: none !important;
    }
    #top-menu li.novus-cert-item a.novus-cert-link {
        padding: 0 !important;
        display: block !important;
    }
    #top-menu li.novus-cert-item img.novus-cert-badge {
        height: 36px;
        width: auto;
        object-fit: contain;
        display: block;
        transition: opacity 0.3s ease;
    }
    #top-menu li.novus-cert-item:hover img.novus-cert-badge {
        opacity: 0.9;
    }

    /* Caret on the Products top-level link — rotates 180° while its dropdown is open.
       Must out-specify Divi's own caret rule
       #top-menu .menu-item-has-children>a:first-child:after (1,2,1)
       which forces position:absolute + ETmodules glyph "3" at the li's corner. */
    #top-menu > li.menu-item-has-children > a:first-child::after,
    #top-menu > li.menu-item-has-children > a::after {
        /* SVG caret, NOT a font glyph — Inter has no U+25BE, so content:"\25BE"
           renders as a blank advance (space reserved, nothing painted). */
        content: "";
        width: 9px;
        height: 6px;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffffff'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        position: static !important;
        right: auto;
        top: auto;
        display: inline-block;
        vertical-align: middle;
        margin-left: 7px;
        transform: rotate(0deg);
        transform-origin: center center;
        transition: transform 0.25s ease;
    }
    #top-menu > li.menu-item-has-children:hover > a::after,
    #top-menu > li.menu-item-has-children:focus-within > a::after,
    #top-menu > li.menu-item-has-children.novus-menu-open > a::after {
        transform: rotate(180deg);
        opacity: 0.9;
    }
}

/* Search bar */
#et-top-search { margin-top: 3px; }
.et_search_form_container input {
    background: rgba(0,0,0,0.5) !important;
    border-color: var(--novus-border) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   Footer Override
   ═══════════════════════════════════════════════════════════ */
#main-footer,
.et-l--footer {
    background: var(--novus-bg-footer) !important;
    border-top: 1px solid var(--novus-border-faint);
}

#main-footer .et_pb_widget h4,
#main-footer .et_pb_widget .widgettitle,
#main-footer h4 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #a0b4cc;
    margin-bottom: 20px;
}

#main-footer .et_pb_widget a,
#main-footer .et_pb_widget li,
#main-footer p,
#main-footer li {
    font-size: 14px;
    color: var(--novus-text-dim);
    transition: color 0.3s ease;
}

#main-footer .et_pb_widget a:hover,
#main-footer a:hover {
    color: #6a85a0;
}

#footer-bottom {
    background: rgba(0,0,0,0.3) !important;
    border-top: 1px solid var(--novus-border-faint) !important;
}

#footer-bottom .et_pb_text,
#footer-bottom p,
#footer-bottom a {
    font-size: 12px;
    color: #1e2d40;
}

/* ═══════════════════════════════════════════════════════════
   Divi Section/Row/Column Dark Theme
   ═══════════════════════════════════════════════════════════ */
.et_pb_section_0,
.et_pb_section {
    background-color: var(--novus-bg-primary) !important;
}

/* Card component for dark theme */
.novus-card {
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius-lg);
    padding: 24px;
    transition: all 0.3s ease;
}

.novus-card:hover {
    border-color: var(--novus-red);
    transform: translateY(-2px);
}

/* Grid backgrounds (subtle red grid) */
.novus-grid-bg {
    position: relative;
    overflow: hidden;
}

.novus-grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(200,0,0,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,0,0,0.035) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Radial glow */
.novus-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--novus-bg-splash);
}

/* ═══════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════ */
.novus-btn {
    display: inline-block;
    padding: 12px 32px;
    background: var(--novus-red);
    color: #fff;
    border: none;
    border-radius: var(--novus-radius);
    font-family: var(--novus-font-body);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.novus-btn:hover {
    background: var(--novus-red-bright);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(204,0,0,0.3);
}

.novus-btn-outline {
    display: inline-block;
    padding: 12px 32px;
    background: transparent;
    color: var(--novus-red);
    border: 1px solid var(--novus-red);
    border-radius: var(--novus-radius);
    font-family: var(--novus-font-body);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.novus-btn-outline:hover {
    background: var(--novus-red-tint);
    color: var(--novus-red-bright);
}

/* Divi button override */
.et_pb_button {
    background: var(--novus-red) !important;
    border-color: var(--novus-red) !important;
    color: #fff !important;
    border-radius: var(--novus-radius) !important;
    font-family: var(--novus-font-body) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    padding: 12px 32px !important;
    transition: all 0.3s ease !important;
}

.et_pb_button:hover {
    background: var(--novus-red-bright) !important;
    border-color: var(--novus-red-bright) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(204,0,0,0.3) !important;
}

/* ═══════════════════════════════════════════════════════════
   Text Module Overrides
   ═══════════════════════════════════════════════════════════ */
.et_pb_text_inner h1,
.et_pb_text_inner h2,
.et_pb_text_inner h3 {
    color: var(--novus-text-heading);
}

.et_pb_text_inner p {
    color: var(--novus-text-body);
}

/* Gradient text */
.novus-gradient-text {
    background: linear-gradient(135deg, #cc0000, #ff3333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════════════════════════════════════════
   Divi Text Module Dark Theme
   ═══════════════════════════════════════════════════════════ */
.et_pb_bg_layout_dark .et_pb_text_inner,
.et_pb_text_align_left .et_pb_text_inner {
    color: var(--novus-text-body);
}

/* ═══════════════════════════════════════════════════════════
   WooCommerce Overrides
   ═══════════════════════════════════════════════════════════ */
.woocommerce ul.products li.product {
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    border-color: var(--novus-red);
    transform: translateY(-4px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--novus-text-heading);
    font-weight: 600;
    font-size: 18px;
}

.woocommerce ul.products li.product .price {
    color: var(--novus-red-bright) !important;
    font-family: var(--novus-font-mono);
}

.woocommerce ul.products li.product .price ins {
    color: var(--novus-red-bright);
    text-decoration: none;
}

.woocommerce ul.products li.product .price del {
    color: var(--novus-red-dim);
}

.woocommerce ul.products li.product .button {
    background: var(--novus-red);
    color: #fff;
    border-radius: var(--novus-radius);
    font-weight: 600;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--novus-red-bright);
    transform: translateY(-1px);
}

/* Product page */
.single-product .product .summary > h1 {
    color: var(--novus-text-heading);
    font-size: 2rem;
    font-weight: 700;
}

.single-product .product .price {
    color: var(--novus-red-bright) !important;
    font-family: var(--novus-font-mono);
    font-size: 1.5rem !important;
}

/* WooCommerce tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: var(--novus-red) !important;
    border-color: var(--novus-red) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #fff !important;
}

.woocommerce div.product .woocommerce-tabs .panel {
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius);
    background: var(--novus-bg-card);
}

/* Product category page */
.woocommerce .term-description {
    background: var(--novus-bg-card);
    border: 1px solid var(--novus-border);
    border-radius: var(--novus-radius-lg);
    padding: 20px;
    color: var(--novus-text-body);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: var(--novus-bg-card) !important;
    border-top-color: var(--novus-red) !important;
    color: var(--novus-text-heading) !important;
}

.woocommerce-message a,
.woocommerce-info a {
    color: var(--novus-red-bright) !important;
}

/* Forms */
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid var(--novus-border) !important;
    border-radius: var(--novus-radius) !important;
    color: #fff !important;
    padding: 10px 14px !important;
}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--novus-red) !important;
    outline: none;
}

.woocommerce form .form-row label {
    color: var(--novus-text-body) !important;
}

/* ═══════════════════════════════════════════════════════════
   Pagination
   ═══════════════════════════════════════════════════════════ */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    background: var(--novus-bg-card) !important;
    color: var(--novus-text-body) !important;
    border: 1px solid var(--novus-border) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--novus-red) !important;
    color: #fff !important;
    border-color: var(--novus-red) !important;
}

/* ═══════════════════════════════════════════════════════════
   Breadcrumb
   ═══════════════════════════════════════════════════════════ */
.woocommerce-breadcrumb {
    color: var(--novus-text-muted) !important;
    font-size: 13px;
}

.woocommerce-breadcrumb a {
    color: var(--novus-red) !important;
}

/* ═══════════════════════════════════════════════════════════
   WordPress Admin Bar Fix
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body { font-size: 15px; }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .novus-container { padding: 0 16px; }
}

/* ═══════════════════════════════════════════════════════════
   Scrollbar (WebKit)
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0a0000; }
::-webkit-scrollbar-thumb { background: #2a0808; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--novus-red-dark); }

/* ═══════════════════════════════════════════════════════════
   Selection
   ═══════════════════════════════════════════════════════════ */
::selection {
    background: rgba(204,0,0,0.3);
    color: #fff;
}