/* Brand Immersion - Ultra Pro Polish */

/* 1. Custom Scrollbar (Webkit) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #121212;
    /* Neutral 3 */
}

::-webkit-scrollbar-thumb {
    background-color: #00AEEF;
    /* Primary Blue */
    border-radius: 6px;
    border: 3px solid #121212;
    /* Creates padding effect */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #F58220;
    /* Secondary Orange */
}

/* 2. Selection Color */
::selection {
    background: #00AEEF;
    color: #ffffff;
}

::-moz-selection {
    background: #00AEEF;
    color: #ffffff;
}

/* 3. Smooth Scrolling for Anchor Links */
html {
    scroll-behavior: smooth;
}

/* 4. Print Styles (Professionalism) */
@media print {

    .tz-header1,
    .tz-footer,
    .sticky-mobile-cta,
    .tz-offcanvas {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    a::after {
        content: " (" attr(href) ")";
        font-size: 0.8rem;
        color: #666;
    }
}

/* =========================================
   STRICT STANDARDIZATION SYSTEM
   ========================================= */
:root {
    /* Spacing Standards */
    --section-gap-desktop: 80px;
    --section-gap-mobile: 50px;

    /* Typography Standards */
    --h1-size-desktop: 64px;
    --h1-size-mobile: 42px;

    --h2-size-desktop: 48px;
    --h2-size-mobile: 32px;

    --h3-size-desktop: 32px;
    --h3-size-mobile: 24px;

    --h4-size-desktop: 24px;
    --h4-size-mobile: 20px;
}

/* 1. Global Section Spacing Override 
   Forces every direct section to use standard spacing, 
   ignoring utility classes like tz-pt-120 etc. */
section,
.common-section-spacing,
.tz-contact,
.tz-hero1,
.tz-breadcrumb,
.tz-about,
.tz-service,
.tz-process,
.tz-testimonial1,
.tz-blog {
    padding-top: var(--section-gap-desktop) !important;
    padding-bottom: var(--section-gap-desktop) !important;
}

/* Hero usually needs a bit more top padding for header clearance */
.tz-hero1 {
    padding-top: 180px !important;
}

/* 2. Global Headline Override
   Forces all headings to verify against the standard. */

[class*="tz-display-1"] {
    font-size: var(--h1-size-desktop) !important;
    line-height: 1.1 !important;
}

h2,
[class*="tz-display-2"] {
    font-size: var(--h2-size-desktop) !important;
    line-height: 1.2 !important;
}

h3,
[class*="tz-display-3"] {
    font-size: var(--h3-size-desktop) !important;
    line-height: 1.3 !important;
}

h4,
[class*="tz-display-4"] {
    font-size: var(--h4-size-desktop) !important;
    line-height: 1.3 !important;
}

/* 2.1 Span/Strong Inheritance
   Forces inner elements to start matching the parent headline 
   unless explicitly overridden. Fixes "mismatch" issues. */
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span,
[class*="tz-display-"] span,
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong,
[class*="tz-display-"] strong,
h1 b,
h2 b,
h3 b,
h4 b,
h5 b,
h6 b,
[class*="tz-display-"] b {
    font-size: inherit !important;
    line-height: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
}

/* 3. Mobile Overrides (< 991px for tablet/mobile transition) */
@media (max-width: 991px) {

    section,
    .common-section-spacing,
    .tz-contact,
    .tz-hero1,
    .tz-breadcrumb {
        padding-top: var(--section-gap-mobile) !important;
        padding-bottom: var(--section-gap-mobile) !important;
    }

    .tz-hero1 {
        padding-top: 110px !important;
        /* Reduced from 150px to fix big gap */
    }

    /* Fix "logo kitting top" */
    .tz-header1 {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}

/* 4. Strict Mobile Typography (< 576px) */
@media (max-width: 576px) {


    [class*="tz-display-1"] {
        font-size: var(--h1-size-mobile) !important;
    }

    h2,
    [class*="tz-display-2"] {
        font-size: var(--h2-size-mobile) !important;
    }

    h3,
    [class*="tz-display-3"] {
        font-size: var(--h3-size-mobile) !important;
    }

    h4,
    [class*="tz-display-4"] {
        font-size: var(--h4-size-mobile) !important;
    }

    .tz-display-1,
    .tz-display-2,
    .tz-display-3,
    .tz-display-4,
    h1,
    h2,
    h3,
    h4 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* 5. Utility Fixes */
.tz-section-top--centered {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.tz-section-top--centered .tz-section-subtitle {
    justify-content: center !important;
}