/*
Theme Name: WZOCX Engineered Socks
Theme URI: https://www.wzocx.co.uk
Author: WZOCX Engineering
Author URI: https://www.wzocx.co.uk
Description: Official high-performance WordPress theme for WZOCX Engineered Socks. Features pure monochrome engineering design, dark/light mode toggle, TÜV SÜD & OEKO-TEX compliance badges, technical product catalogs, and interactive viewports.
Version: 2.0.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Commercial
Text Domain: wzocx
Tags: engineering, monochrome, responsive, dark-mode, custom-header, custom-menu, portfolio, e-commerce, translation-ready
*/

@import url('assets/css/wzocx-styles.css');

/* ==========================================================================
   WordPress Admin Bar Compatibility & Dynamic Header Offsetting
   ========================================================================== */
body.admin-bar .wzocx-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .wzocx-header {
        top: 46px !important;
    }
}

/* ==========================================================================
   Header Clearance & Page Top Padding (Balanced Port 9990 Exact Spacing)
   ========================================================================== */
/* Generic Tailwind Padding-Top Utility Fallbacks */
.pt-16 { padding-top: 4rem !important; }  /* 64px */
.pt-20 { padding-top: 5rem !important; }  /* 80px */
.pt-24 { padding-top: 6rem !important; }  /* 96px */
.pt-28 { padding-top: 7rem !important; }  /* 112px */
.pt-32 { padding-top: 8rem !important; }  /* 128px */
.pt-36 { padding-top: 9rem !important; }  /* 144px */

@media (min-width: 640px) {
    .sm\:pt-16 { padding-top: 4rem !important; }
    .sm\:pt-20 { padding-top: 5rem !important; }
    .sm\:pt-24 { padding-top: 6rem !important; }
    .sm\:pt-28 { padding-top: 7rem !important; }
    .sm\:pt-32 { padding-top: 8rem !important; }
    .sm\:pt-36 { padding-top: 9rem !important; }
}

/* Standard pages: 112px (exact Next.js pt-28 clearance) */
.wzocx-page-wrapper,
.wzocx-contact-wrapper,
.wzocx-products-wrapper,
.wzocx-about-wrapper {
    padding-top: 7rem !important; /* 112px */
}

/* When WordPress Admin Bar is active, offset by exactly +32px on desktop and +46px on mobile */
body.admin-bar .wzocx-page-wrapper,
body.admin-bar .wzocx-contact-wrapper,
body.admin-bar .wzocx-products-wrapper,
body.admin-bar .wzocx-about-wrapper {
    padding-top: 9rem !important; /* 144px */
}

@media screen and (max-width: 782px) {
    body.admin-bar .wzocx-page-wrapper,
    body.admin-bar .wzocx-contact-wrapper,
    body.admin-bar .wzocx-products-wrapper,
    body.admin-bar .wzocx-about-wrapper {
        padding-top: 9.75rem !important; /* 156px */
    }
}

/* Home hero spacing */
section[data-wzocx-hero] {
    padding-top: 5rem !important; /* 80px */
}
@media (min-width: 640px) {
    section[data-wzocx-hero] {
        padding-top: 6rem !important; /* 96px */
    }
}
body.admin-bar section[data-wzocx-hero] {
    padding-top: 7rem !important; /* 112px */
}
@media (min-width: 640px) {
    body.admin-bar section[data-wzocx-hero] {
        padding-top: 8rem !important; /* 128px */
    }
}

/* Single Product Page & Sticky Breadcrumb Offset */
.wzocx-product-page {
    padding-top: 5.5rem !important; /* 88px */
}
@media (min-width: 640px) {
    .wzocx-product-page {
        padding-top: 6.5rem !important; /* 104px */
    }
}
body.admin-bar .wzocx-product-page {
    padding-top: 7.5rem !important; /* 120px */
}
@media (min-width: 640px) {
    body.admin-bar .wzocx-product-page {
        padding-top: 8.5rem !important; /* 136px */
    }
}

.wzocx-sticky-breadcrumb {
    top: 70px !important;
}
@media (min-width: 640px) {
    .wzocx-sticky-breadcrumb {
        top: 76px !important;
    }
}
body.admin-bar .wzocx-sticky-breadcrumb {
    top: 102px !important;
}
@media (min-width: 640px) {
    body.admin-bar .wzocx-sticky-breadcrumb {
        top: 108px !important;
    }
}
@media screen and (max-width: 782px) {
    body.admin-bar .wzocx-sticky-breadcrumb {
        top: 116px !important;
    }
}


/* ==========================================================================
   Smooth Tab Switching Animation & Sliding Pill Indicators
   ========================================================================== */
[data-wzocx-nav] {
    position: relative !important;
}

[data-nav-active-pill] {
    position: absolute !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-radius: 9999px !important;
    background-color: #000000 !important;
    will-change: left, width, top, opacity;
}

.dark [data-nav-active-pill] {
    background-color: #ffffff !important;
}

[data-nav-hover-pill] {
    position: absolute !important;
    pointer-events: none !important;
    z-index: 2 !important;
    border-radius: 9999px !important;
    will-change: left, width, top, opacity;
}

[data-wzocx-nav] [data-nav-item] {
    position: relative !important;
    z-index: 10 !important;
    color: rgba(17, 17, 17, 0.75) !important;
    transition: color 0.18s cubic-bezier(0.2, 0.8, 0.3, 1) !important;
    background-color: transparent !important;
    text-decoration: none !important;
    user-select: none;
}

[data-wzocx-nav] [data-nav-item] span {
    color: inherit !important;
    pointer-events: none;
}

/* Light mode inactive hover */
[data-wzocx-nav] [data-nav-item]:not(.is-active):not([data-active="true"]):hover,
[data-wzocx-nav] [data-nav-item]:not(.is-active):not([data-active="true"]):hover span {
    color: #000000 !important;
}

/* Light mode: Active pill is black (#000), text MUST be pure crisp white (#fff) EVEN WHEN HOVERED OR FOCUSED */
[data-wzocx-nav] [data-nav-item].is-active,
[data-wzocx-nav] [data-nav-item][data-active="true"],
[data-wzocx-nav] [data-nav-item].is-active:hover,
[data-wzocx-nav] [data-nav-item][data-active="true"]:hover,
[data-wzocx-nav] [data-nav-item].is-active:focus,
[data-wzocx-nav] [data-nav-item][data-active="true"]:focus,
[data-wzocx-nav] [data-nav-item].is-active span,
[data-wzocx-nav] [data-nav-item][data-active="true"] span,
[data-wzocx-nav] [data-nav-item].is-active:hover span,
[data-wzocx-nav] [data-nav-item][data-active="true"]:hover span {
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* Dark mode inactive base */
.dark [data-wzocx-nav] [data-nav-item] {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Dark mode inactive hover */
.dark [data-wzocx-nav] [data-nav-item]:not(.is-active):not([data-active="true"]):hover,
.dark [data-wzocx-nav] [data-nav-item]:not(.is-active):not([data-active="true"]):hover span {
    color: #ffffff !important;
}

/* Dark mode: Active pill is white (#fff), text MUST be jet black (#000) EVEN WHEN HOVERED OR FOCUSED */
.dark [data-wzocx-nav] [data-nav-item].is-active,
.dark [data-wzocx-nav] [data-nav-item][data-active="true"],
.dark [data-wzocx-nav] [data-nav-item].is-active:hover,
.dark [data-wzocx-nav] [data-nav-item][data-active="true"]:hover,
.dark [data-wzocx-nav] [data-nav-item].is-active:focus,
.dark [data-wzocx-nav] [data-nav-item][data-active="true"]:focus,
.dark [data-wzocx-nav] [data-nav-item].is-active span,
.dark [data-wzocx-nav] [data-nav-item][data-active="true"] span,
.dark [data-wzocx-nav] [data-nav-item].is-active:hover span,
.dark [data-wzocx-nav] [data-nav-item][data-active="true"]:hover span {
    color: #000000 !important;
    font-weight: 800 !important;
}

/* Fallback active background if JS hasn't initialized position */
[data-wzocx-nav]:not([data-nav-ready]) [data-nav-item][data-active="true"] {
    background-color: #000000 !important;
    color: #ffffff !important;
}
.dark [data-wzocx-nav]:not([data-nav-ready]) [data-nav-item][data-active="true"] {
    background-color: #ffffff !important;
    color: #000000 !important;
}

[data-wzocx-nav][data-nav-ready] [data-nav-item] {
    background-color: transparent !important;
}

/* ==========================================================================
   Smooth Page Transitions & Neat Clean Top Progress Loader
   ========================================================================== */
#wzocx-top-loader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 2.5px !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    will-change: width, opacity;
    background-color: #000000 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    transition: width 0.22s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 0.2s ease;
}

.dark #wzocx-top-loader {
    background-color: #ffffff !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.85);
}

body.admin-bar #wzocx-top-loader {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar #wzocx-top-loader {
        top: 46px !important;
    }
}

@keyframes wzocxPageIn {
    0% {
        opacity: 0.92;
        transform: translateY(3px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

main {
    animation: wzocxPageIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: opacity, transform;
}

.wzocx-page-transitioning {
    opacity: 0.85 !important;
    transition: opacity 0.15s ease-out;
}

/* ==========================================================================
   Hero Main Headline Typography (Enhanced Visual Impact - Zero Truncation)
   ========================================================================== */
.wzocx-hero-subhead {
    font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.75rem) !important; /* ~18px-20px mobile -> 28px desktop */
    letter-spacing: 0.14em !important;
    line-height: 1.15 !important;
}

.wzocx-hero-mid {
    font-size: clamp(2.25rem, 1.7rem + 2.5vw, 4.25rem) !important; /* ~38px-42px mobile -> 68px desktop */
    line-height: 0.94 !important;
    letter-spacing: -0.03em !important;
}

.wzocx-hero-power {
    font-size: clamp(2.5rem, 1.9rem + 3.2vw, 4.75rem) !important; /* ~42px-46px mobile -> 76px desktop */
    line-height: 0.92 !important;
    letter-spacing: -0.03em !important;
    overflow: visible !important;
}

.wzocx-hero-power [data-hero-power-word] {
    display: inline-block;
    white-space: nowrap;
    overflow: visible !important;
}

@media (max-width: 400px) {
    .wzocx-hero-subhead {
        font-size: 1.05rem !important;
        letter-spacing: 0.1em !important;
    }
    .wzocx-hero-mid {
        font-size: 2.15rem !important;
    }
    .wzocx-hero-power {
        font-size: 2.45rem !important;
    }
}