/* High Tech / Spy HUD Futuristic Theme */

body.theme-hitech {
    --hitech-bg: #030712;
    --hitech-panel-bg: rgba(10, 20, 38, 0.75);
    --hitech-panel-border: rgba(0, 229, 255, 0.2);
    --hitech-glow: #00e5ff;
    --hitech-accent: #00ff66;
    --hitech-text: #e0f2fe;
    --hitech-text-muted: #64748b;
    --hitech-grid-color: rgba(0, 229, 255, 0.03);

    /* Theme Overrides */
    --background: var(--hitech-bg) !important;
    --primary: var(--hitech-glow) !important;
    --secondary: var(--hitech-accent) !important;
    --image-bg: #020617 !important;
    --grey-light: rgba(0, 229, 255, 0.1) !important;
    --grey-lightest: rgba(0, 229, 255, 0.05) !important;

    /* Typography Overrides */
    --font-serif: 'Orbitron', 'Share Tech Mono', sans-serif !important;
    --font-body: 'Share Tech Mono', monospace !important;
    --font-sans: 'Share Tech Mono', monospace !important;
    --font-mono: 'Share Tech Mono', monospace !important;

    background-color: var(--hitech-bg) !important;
    color: var(--hitech-text) !important;
    font-family: var(--font-body) !important;
    overflow-x: hidden;
    position: relative;
    letter-spacing: 0.05em;

    /* Glitch turn-on animation */
    animation: hitech-boot 0.8s cubic-bezier(0.15, 0.85, 0.45, 1);
}

/* Force text colors globally to be tech-glowing or readable grey */
body.theme-hitech,
body.theme-hitech p,
body.theme-hitech li,
body.theme-hitech span,
body.theme-hitech time,
body.theme-hitech div,
body.theme-hitech strong,
body.theme-hitech label,
body.theme-hitech select,
body.theme-hitech option,
body.theme-hitech cite,
body.theme-hitech a {
    color: var(--hitech-text);
}

body.theme-hitech a {
    text-decoration: none;
    position: relative;
    transition: all 0.2s ease;
    color: var(--hitech-glow);
    text-shadow: 0 0 4px rgba(0, 229, 255, 0.4);
}

body.theme-hitech a:hover {
    color: var(--hitech-accent);
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.6);
}

/* Add custom tech decoration to links on hover (excluding the logo link) */
body.theme-hitech a:not(:has(.logo)) {
    transition: padding 0.2s ease, color 0.2s ease, text-shadow 0.2s ease !important;
}
body.theme-hitech a:not(:has(.logo)):hover {
    padding-left: 0.55em !important;
    padding-right: 0.55em !important;
}
body.theme-hitech a:not(:has(.logo))::before {
    content: '[';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.6);
    opacity: 0;
    font-size: 1.4em;
    line-height: 1;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
body.theme-hitech a:not(:has(.logo))::after {
    content: ']';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.6);
    opacity: 0;
    font-size: 1.4em;
    line-height: 1;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
body.theme-hitech a:not(:has(.logo)):hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    color: var(--hitech-glow);ß
}
body.theme-hitech a:not(:has(.logo)):hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    color: var(--hitech-glow);
}

/* Glowing border around main logo on hover */
body.theme-hitech .logo {
    width: 3em !important;
    height: 3em !important;
    aspect-ratio: 1 / 1 !important;
    border: 2px solid transparent;
    border-radius: 50% !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}
@media (min-width: 530px) {
    body.theme-hitech .logo {
        width: 5em !important;
        height: 5em !important;
    }
}
body.theme-hitech .site-navigation-wrapper.is-sticky .logo {
    width: 2.2rem !important;
    height: 2.2rem !important;
}
body.theme-hitech a:hover .logo {
    border-color: var(--hitech-accent) !important;
    box-shadow: 0 0 12px var(--hitech-accent) !important;
}

/* Typography styles */
body.theme-hitech h1,
body.theme-hitech h2,
body.theme-hitech h3,
body.theme-hitech h4,
body.theme-hitech h5,
body.theme-hitech h6 {
    font-family: var(--font-serif) !important;
    text-transform: uppercase;
    color: var(--hitech-glow) !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.3) !important;
    letter-spacing: 0.15em !important;
    border-bottom: 1px dashed rgba(0, 229, 255, 0.2);
    padding-bottom: 0.3em;
}

/* Layout blocks - Dark Panels */
body.theme-hitech .site-header,
body.theme-hitech .main-content,
body.theme-hitech .single-post__body,
body.theme-hitech .subhero,
body.theme-hitech .search-header,
body.theme-hitech .section,
body.theme-hitech .wp-block-quote,
body.theme-hitech .wp-block-list,
body.theme-hitech ol,
body.theme-hitech ul,
body.theme-hitech footer.site-footer,
body.theme-hitech .section--now-stack,
body.theme-hitech .section--newsletter-global,
body.theme-hitech .testimonial,
body.theme-hitech .wp-block-cover,
body.theme-hitech .tile {
    background-color: #080f1d !important; /* solid color instead of backdrop-filter blur */
    background: #080f1d !important;
    border: 1px solid var(--hitech-panel-border) !important;
    box-shadow: 0 2px 8px rgba(0, 229, 255, 0.05) !important;
    position: relative;
    border-radius: 2px !important;
}

/* Custom spacing for widgets and blocks */
body.theme-hitech .tile {
    margin-bottom: 1.5rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
body.theme-hitech .tile.is-dark:has(h2 a:hover),
body.theme-hitech .tile.is-light:has(h2 a:hover) {
    background-color: #080f1d !important;
    background: #080f1d !important;
}
body.theme-hitech .tile:hover {
    border-color: var(--hitech-glow) !important;
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.15), inset 0 0 15px rgba(0, 229, 255, 0.05) !important;
    transform: translateY(-2px);
    background-color: #0c1529 !important; /* Slightly lighter futuristic blue on hover */
    background: #0c1529 !important;
}

/* Ensure all text inside tiles remains highly legible in cyan/white and does not turn dark */
body.theme-hitech .tile .tile__text,
body.theme-hitech .tile .tile__text :is(h1, h2, h2 a, h3, h4, h5, h6, p, span, time, .tag, .tag a) {
    color: var(--hitech-text) !important;
    text-shadow: 0 0 4px rgba(0, 229, 255, 0.2) !important;
}
body.theme-hitech .tile .tile__text h2 a:hover {
    color: var(--hitech-accent) !important;
    text-shadow: 0 0 8px rgba(0, 255, 102, 0.4) !important;
}

/* Corner decorators injected by JavaScript */
.hitech-corners-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}
.hitech-corner {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid var(--hitech-glow);
}
.hitech-corner.tl {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}
.hitech-corner.tr {
    top: -2px;
    right: -2px;
    border-left: none;
    border-bottom: none;
}
.hitech-corner.bl {
    bottom: -2px;
    left: -2px;
    border-right: none;
    border-top: none;
}
.hitech-corner.br {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

body.theme-hitech .tile:hover .hitech-corner {
    border-color: var(--hitech-accent);
}


/* Forms & Select Dropdown Styling */
body.theme-hitech select,
body.theme-hitech input,
body.theme-hitech textarea,
body.theme-hitech button {
    background: rgba(10, 20, 38, 0.9) !important;
    border: 1px solid var(--hitech-glow) !important;
    color: var(--hitech-glow) !important;
    font-family: var(--font-body) !important;
    border-radius: 0 !important;
    padding: 0.5rem 1rem !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.1) !important;
}
body.theme-hitech select:focus,
body.theme-hitech input:focus,
body.theme-hitech textarea:focus {
    outline: none;
    border-color: var(--hitech-accent) !important;
    box-shadow: 0 0 12px rgba(0, 255, 102, 0.3) !important;
    color: var(--hitech-accent) !important;
}

/* HUD Overlay Container Styles */
.hitech-hud-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
}

/* Background Cyber Grid overlay */
.hitech-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 40px 40px;
    background-image: linear-gradient(to right, var(--hitech-grid-color) 1px, transparent 1px),
                      linear-gradient(to bottom, var(--hitech-grid-color) 1px, transparent 1px);
    z-index: -10;
}



/* Radar Display widgets in corners */
.hitech-radar {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(0, 229, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
}
.hitech-radar-tr {
    top: 40px;
    right: 40px;
}
.hitech-radar-bl {
    bottom: 40px;
    left: 40px;
}

/* Responsive Radar Hiding */
@media (max-width: 768px) {
    .hitech-radar {
        display: none !important;
    }
}

.radar-sweep {
    position: absolute;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0deg, rgba(0, 229, 255, 0.15) 0deg, transparent 90deg, transparent 360deg);
    border-radius: 50%;
    animation: hitech-radar-spin 6s linear infinite;
}
.radar-circle {
    position: absolute;
    border: 1px dashed rgba(0, 229, 255, 0.2);
    border-radius: 50%;
}
.radar-circle.circle-1 { width: 30%; height: 30%; }
.radar-circle.circle-2 { width: 60%; height: 60%; }
.radar-circle.circle-3 { width: 90%; height: 90%; }
.radar-crosshair {
    position: absolute;
    width: 100%;
    height: 100%;
}
.radar-crosshair::before, .radar-crosshair::after {
    content: '';
    position: absolute;
    background: rgba(0, 229, 255, 0.2);
}
.radar-crosshair::before {
    top: 0; left: 50%; width: 1px; height: 100%;
}
.radar-crosshair::after {
    top: 50%; left: 0; width: 100%; height: 1px;
}

/* System Readouts Overlay */
.hitech-system-status {
    position: absolute;
    bottom: 40px;
    right: 40px;
    text-align: right;
    font-size: 11px;
    line-height: 1.6;
    color: var(--hitech-text-muted);
}
.hitech-system-status .accent-color {
    color: var(--hitech-glow);
}


/* Custom Scrollbar for HUD theme */
body.theme-hitech::-webkit-scrollbar {
    width: 8px;
}
body.theme-hitech::-webkit-scrollbar-track {
    background: var(--hitech-bg);
    border-left: 1px solid rgba(0, 229, 255, 0.1);
}
body.theme-hitech::-webkit-scrollbar-thumb {
    background: var(--hitech-glow);
    border-radius: 4px;
    box-shadow: inset 0 0 6px rgba(0, 229, 255, 0.5);
}
body.theme-hitech::-webkit-scrollbar-thumb:hover {
    background: var(--hitech-accent);
}

/* Blinking cursor for typewriter effect */
.hitech-typing::after {
    content: '_';
    color: var(--hitech-accent);
    animation: hitech-blink 0.8s infinite steps(2);
    display: inline-block;
    margin-left: 3px;
}

/* Animations */
@keyframes hitech-boot {
    0% {
        filter: brightness(0.2) contrast(1.2);
        opacity: 0.6;
    }
    50% {
        filter: brightness(1.5) contrast(0.9);
        opacity: 0.95;
    }
    100% {
        filter: none;
        opacity: 1;
    }
}


@keyframes hitech-radar-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes hitech-blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Image Blue Tint and Scanline Overlay (Performant GPU composited) */
body.theme-hitech .tile__image,
body.theme-hitech .wp-block-image,
body.theme-hitech .mFullStickyimage,
body.theme-hitech .image-grid li {
    position: relative;
    overflow: hidden;
}

body.theme-hitech .tile__image::after,
body.theme-hitech .wp-block-image::after,
body.theme-hitech .mFullStickyimage::after,
body.theme-hitech .image-grid li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 229, 255, 0.25) !important;
    mix-blend-mode: overlay;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* On hover, fade out the overlay to reveal the original image colors */
body.theme-hitech .tile__image:hover::after,
body.theme-hitech .wp-block-image:hover::after,
body.theme-hitech .mFullStickyimage:hover::after,
body.theme-hitech .image-grid li:hover::after {
    opacity: 0;
}

body.theme-hitech img {
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    filter: brightness(0.8) contrast(1.2) sepia(0.3) saturate(1.5) hue-rotate(150deg) !important;
    will-change: filter;
    transform: translateZ(0); /* Force GPU layer caching */
    transition: all 0.2s ease !important;
}

body.theme-hitech img:hover {
    border-color: var(--hitech-accent) !important;
    filter: brightness(1) contrast(1) sepia(0) saturate(1) hue-rotate(0deg) !important;
}

/* Custom High Tech Halftone Image Masks */
body.theme-hitech .image-grid-mask {
 
}

body.theme-hitech .tile__image {
   
}

/* Ensure the card images stretch to fill their containers to avoid top/bottom blank gaps */
body.theme-hitech .tile__image img {
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Disable card image pseudo elements to remove spacing */
body.theme-hitech .tile__image::before,
body.theme-hitech .tile__image::after {
    display: none !important;
    content: none !important;
}

body.theme-hitech .tile__image img,
body.theme-hitech .wp-block-image img {
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

body.theme-hitech .site-footer__clients .client-logo img {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    /* Tint them blue/cyan (#00e5ff) instead of white, with some opacity */
    filter: brightness(0) saturate(100%) invert(80%) sepia(100%) saturate(2000%) hue-rotate(150deg) !important;
    opacity: 0.6 !important;
    transition: all 0.3s ease !important;
}

body.theme-hitech .site-footer__clients .client-logo img:hover {
    filter: brightness(0) invert(1) !important; /* turns white on hover */
    opacity: 1 !important;
}

body.theme-hitech .tool-tag:not(.tool-tag--category) {
    color: #030712 !important;
}

body.theme-hitech .tool-tag--category {
    color: black !important;
}

body.theme-hitech .site-navigation-wrapper.is-sticky {
    background-color: #000000 !important;
    background: #000000 !important;
    border-bottom: 1px solid var(--hitech-panel-border) !important;
}

/* Hide dark mode switch */
body.theme-hitech .theme-toggle-wrapper,
body.theme-hitech #theme-toggle {
    display: none !important;
}