/*
Theme Name: North Tech Phlox Child
Theme URI: https://northtechsafes.co.za/
Description: Phlox Pro child theme for North Tech Safe Company with a CSS-generated crushed-steel background.
Author: Infinite Ideas
Template: phlox-pro
Version: 1.1.0
Text Domain: northtech-phlox-child
*/

/*
 * NORTH TECH DESIGN TOKENS
 */
:root {
    --northtech-steel-dark: #4f5559;
    --northtech-steel-mid: #858b8f;
    --northtech-steel-light: #c4c8ca;
    --northtech-steel-highlight: rgba(255, 255, 255, 0.26);
    --northtech-steel-shadow: rgba(0, 0, 0, 0.23);
    --northtech-ink: #16191c;
    --northtech-panel: rgba(244, 246, 247, 0.94);
    --northtech-blue: #0b2d91;
    --northtech-border: rgba(255, 255, 255, 0.28);
}

/*
 * CSS-ONLY CRUSHED STEEL
 *
 * The texture is made from layered gradients. There is no external image,
 * no base64 asset and no dependency on the WordPress media library.
 */
html {
    min-height: 100%;
    background-color: var(--northtech-steel-mid);
}

body {
    min-height: 100%;
    background-color: var(--northtech-steel-mid);
    background-image:
        radial-gradient(
            ellipse at 16% 8%,
            var(--northtech-steel-highlight) 0,
            rgba(255, 255, 255, 0.08) 10%,
            transparent 28%
        ),
        radial-gradient(
            ellipse at 82% 18%,
            rgba(255, 255, 255, 0.18) 0,
            transparent 25%
        ),
        radial-gradient(
            ellipse at 45% 42%,
            var(--northtech-steel-shadow) 0,
            transparent 30%
        ),
        radial-gradient(
            ellipse at 88% 70%,
            rgba(0, 0, 0, 0.18) 0,
            transparent 24%
        ),
        radial-gradient(
            ellipse at 18% 82%,
            rgba(255, 255, 255, 0.16) 0,
            transparent 25%
        ),
        repeating-linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.065) 0,
            rgba(255, 255, 255, 0.065) 1px,
            rgba(0, 0, 0, 0.045) 2px,
            rgba(0, 0, 0, 0.045) 3px,
            transparent 4px,
            transparent 8px
        ),
        repeating-linear-gradient(
            22deg,
            transparent 0,
            transparent 17px,
            rgba(255, 255, 255, 0.035) 18px,
            transparent 20px
        ),
        linear-gradient(
            135deg,
            var(--northtech-steel-dark) 0%,
            var(--northtech-steel-light) 18%,
            #73797d 36%,
            #a7acae 52%,
            #62686c 70%,
            #b2b6b8 86%,
            var(--northtech-steel-dark) 100%
        );
    background-size:
        900px 700px,
        760px 620px,
        980px 760px,
        820px 720px,
        760px 640px,
        18px 18px,
        48px 48px,
        100% 100%;
    background-position:
        0 0,
        120px 90px,
        -80px 220px,
        180px 360px,
        -130px 510px,
        0 0,
        0 0,
        center;
    background-repeat:
        repeat,
        repeat,
        repeat,
        repeat,
        repeat,
        repeat,
        repeat,
        no-repeat;
    background-attachment: fixed;
}

/*
 * Reusable classes for page-by-page rebuilding.
 * Existing Elementor sections are untouched until one of these classes is
 * explicitly assigned.
 */
.northtech-steel-surface {
    background-color: var(--northtech-steel-mid);
    background-image:
        radial-gradient(
            ellipse at 20% 15%,
            rgba(255, 255, 255, 0.22) 0,
            transparent 28%
        ),
        radial-gradient(
            ellipse at 75% 62%,
            rgba(0, 0, 0, 0.18) 0,
            transparent 30%
        ),
        repeating-linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) 1px,
            rgba(0, 0, 0, 0.04) 2px,
            transparent 5px
        ),
        linear-gradient(
            135deg,
            #565c60,
            #b7bbbd 24%,
            #73797d 48%,
            #a5aaad 68%,
            #565c60
        );
    background-size:
        780px 620px,
        900px 700px,
        18px 18px,
        100% 100%;
}

.northtech-content-panel {
    background: var(--northtech-panel);
    color: var(--northtech-ink);
    border: 1px solid var(--northtech-border);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/*
 * Mobile devices usually perform better without fixed backgrounds.
 */
@media (max-width: 767px) {
    body {
        background-attachment: scroll;
        background-size:
            620px 500px,
            560px 460px,
            680px 540px,
            600px 520px,
            560px 480px,
            18px 18px,
            48px 48px,
            100% 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}