/*
Theme Name: PowerDistroHub
Theme URI: https://virtuepower.co.za/
Author: Virtue Power
Author URI: https://virtueups.com/
Description: A high-performance, premium industrial B2B theme built for PowerDistroHub. Features a custom engineering design system, high-precision power distribution catalog, and technical Technical Resources library.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: powerbistrohub
Tags: industrial, b2b, energy, power-distribution, custom-colors, custom-menu, featured-images, full-width-template

This theme is built to bridge a React-based high-fidelity design with the robust content management of WordPress.
*/

/* --------------------------------------------------------------------------
   Virtue Power design system
   -------------------------------------------------------------------------- */

:root {
    --vp-navy: #020617;
    --vp-ink: #0f172a;
    --vp-blue: #1457b8;
    --vp-orange: #f97316;
    --vp-orange-dark: #ea580c;
    --vp-line: #dbe3ef;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #f8fafc;
}

::selection {
    background: var(--vp-orange);
    color: #fff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(249, 115, 22, .45);
    outline-offset: 3px;
}

/* Header ------------------------------------------------------------------ */
.site-navigation {
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

.site-navigation.is-scrolled {
    box-shadow: 0 12px 30px rgba(15, 23, 42, .10);
}

#mobile-menu-drawer .menu {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

#mobile-menu-drawer .menu a {
    display: block;
    padding: .8rem 0;
    border-bottom: 1px solid #e2e8f0;
    color: var(--vp-ink);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#mobile-menu-drawer .current-menu-item a {
    color: var(--vp-orange-dark);
}

/* Hero -------------------------------------------------------------------- */
.hero-section {
    isolation: isolate;
}

.hero-overlay {
    background:
        linear-gradient(90deg, rgba(2, 6, 23, .94) 0%, rgba(2, 6, 23, .78) 42%, rgba(2, 6, 23, .30) 75%, rgba(2, 6, 23, .20) 100%),
        linear-gradient(180deg, rgba(2, 6, 23, .10) 0%, rgba(2, 6, 23, .55) 100%);
}

.hero-title {
    max-width: 850px;
    text-wrap: balance;
}

.hero-copy {
    text-wrap: pretty;
}

.hero-primary-cta:hover {
    box-shadow: 0 12px 28px rgba(249, 115, 22, .32), inset 0 1px 0 rgba(255, 255, 255, .20);
    transform: translateY(-2px);
}

.hero-indicator:focus-visible {
    outline-color: #fff;
}

/* Sections and cards ------------------------------------------------------ */
.section-grid {
    background-color: #f8fafc;
    background-image:
        linear-gradient(rgba(20, 87, 184, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 87, 184, .045) 1px, transparent 1px);
    background-size: 36px 36px;
}

.premium-card {
    position: relative;
    box-shadow: 0 1px 1px rgba(15, 23, 42, .02);
}

.premium-card::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--vp-orange), #fb923c);
    transition: width .32s ease;
}

.premium-card:hover::before {
    width: 100%;
}

.process-card {
    position: relative;
    min-height: 215px;
    transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.process-card:hover {
    background-color: rgba(255, 255, 255, .09);
    border-color: rgba(251, 146, 60, .55);
    transform: translateY(-5px);
}

/* Footer ------------------------------------------------------------------ */
.site-footer {
    background-color: var(--vp-navy);
}

.site-footer .text-slate-900,
.site-footer .text-slate-600 {
    color: #cbd5e1;
}

.site-footer .text-slate-500 {
    color: #94a3b8;
}

.site-footer h4 {
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem;
    letter-spacing: .14em;
}

.site-footer a {
    color: #cbd5e1;
}

.site-footer a:hover {
    color: #fdba74;
}

.site-footer .border-gray-300,
.site-footer .border-gray-200 {
    border-color: rgba(255, 255, 255, .14);
}

.site-footer .bg-white {
    background-color: transparent;
}

@media (max-width: 767px) {
    .hero-section {
        min-height: 590px !important;
    }

    .hero-title {
        font-size: 2.65rem;
    }

    .process-card {
        min-height: 0;
    }
}