/*
Theme Name:        Kerjaya Nexus v12
Theme URI:         https://kerjaya-nexus.com
Author:            Zeo
Author URI:        https://kerjaya-nexus.com
Description:       Dari idea custom lahirnya theme ini. Gaya brutalist cara budak 80an.
Version:           12.0.0
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.1
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       kerjaya-nexus
Tags:              custom-theme, brutalist, tailwindcss, job-board, saas, portfolio
*/

/* ==========================================================================
   KERJAYA NEXUS v12 — TACTICAL SaaS INTELLIGENCE
   Custom CSS Layer (Brutalist Design System)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DISPLAY FONT UTILITY
   -------------------------------------------------------------------------- */

.font-display {
    font-family: 'Archivo Black', sans-serif;
}

/* --------------------------------------------------------------------------
   2. BRUTALIST BOX — Border + Drop Shadow Component
   Hover state: shifts element into shadow (tactile press effect)
   -------------------------------------------------------------------------- */

.brutal-box {
    border: 3px solid #0f172a;
    box-shadow: 6px 6px 0px 0px #0f172a;
    transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.brutal-box:hover {
    transform: translate(3px, 3px);
    box-shadow: 0px 0px 0px 0px #0f172a;
}

/* --------------------------------------------------------------------------
   3. HALFTONE BACKGROUND PATTERN
   Radial dot grid — signature Brutalist texture
   -------------------------------------------------------------------------- */

.bg-halftone {
    background-image: radial-gradient(#0f172a 1.5px, transparent 1.5px);
    background-size: 10px 10px;
}

/* --------------------------------------------------------------------------
   4. BRUTALIST BUTTON VARIANT
   Extends .brutal-box for interactive CTA elements
   -------------------------------------------------------------------------- */

.brutal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    border: 3px solid #0f172a;
    box-shadow: 4px 4px 0px 0px #0f172a;
    transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
    text-decoration: none;
}

.brutal-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px 0px #0f172a;
}

/* --------------------------------------------------------------------------
   5. BRUTAL CARD — Job Listing Card Component
   -------------------------------------------------------------------------- */

.brutal-card {
    background-color: #ffffff;
    border: 3px solid #0f172a;
    box-shadow: 5px 5px 0px 0px #0f172a;
    transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.brutal-card:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px 0px #0f172a;
}

/* --------------------------------------------------------------------------
   6. BADGE / TAG — Sector / Category Labels
   -------------------------------------------------------------------------- */

.brutal-badge {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 2px solid #0f172a;
}

/* --------------------------------------------------------------------------
   7. NOISE / GRAIN TEXTURE OVERLAY
   Adds raw, editorial texture over sections
   -------------------------------------------------------------------------- */

.bg-noise {
    position: relative;
}

.bg-noise::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   8. SCROLLBAR — Custom Brutalist Scrollbar (Webkit)
   -------------------------------------------------------------------------- */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f8fafc;
    border-left: 2px solid #0f172a;
}

::-webkit-scrollbar-thumb {
    background-color: #0f172a;
}

/* --------------------------------------------------------------------------
   9. SELECTION COLOUR
   -------------------------------------------------------------------------- */

::selection {
    background-color: #0f172a;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   10. FOCUS RING — Accessible Keyboard Focus Indicator
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 3px solid #0f172a;
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   11. MOBILE COMMAND OVERLAY — Slide-in Animation
   Digunakan oleh main.js: tambah .animate-menu apabila overlay dibuka.
   -------------------------------------------------------------------------- */

@keyframes slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0);    }
}

/* --------------------------------------------------------------------------
   MARQUEE TICKER ANIMATION
   Fallback CSS — pastikan marquee bergerak walaupun Tailwind CDN lambat load.
   Duplikat item dalam PHP (array_merge x2) memastikan loop seamless.
   -------------------------------------------------------------------------- */

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: inline-block;
    animation: marquee 25s linear infinite;
    white-space: nowrap;
    will-change: transform;
}

.animate-menu {
    animation: slide-in 0.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Menu links dalam overlay — hover shift + underline effect */
.menu-link {
    transition: all 0.3s ease;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
}

.menu-link:hover {
    padding-left: 1.5rem;
    color: #ccff00;
    border-bottom-color: #4f46e5;
}

/* --------------------------------------------------------------------------
   12. DOT GRID BACKGROUND
   Digunakan pada aside dan main panel (index.php)
   -------------------------------------------------------------------------- */

.bg-dot-grid {
    background-image: radial-gradient(#0f172a 1.5px, transparent 1.5px);
    background-size: 24px 24px;
}

/* --------------------------------------------------------------------------
   13. COMMAND NODE — Floating Command Center Button Base
   -------------------------------------------------------------------------- */

.command-node {
    transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.command-node:hover {
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   14. GLOBAL MOBILE — Word Break & Overflow Prevention
   Prevents long words/titles from causing horizontal scroll on narrow screens
   -------------------------------------------------------------------------- */

/* Break-word for all display headings and font-display elements */
.font-display,
h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Hard overflow shield — no horizontal scroll at any viewport */
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Constrain images within their containers on mobile */
img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   15. WRITING MODE — Vertical Sidebar Text
   Used on left HUD sidebars in archive.php / category.php / single.php
   -------------------------------------------------------------------------- */

.writing-mode-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* --------------------------------------------------------------------------
   16. PROSE-NEXUS — Article Body Typography (single.php)
   Full component definition — desktop base + mobile overrides
   -------------------------------------------------------------------------- */

.prose-nexus p {
    font-size: 1.2rem;
    line-height: 2;
    margin-bottom: 2rem;
    color: #1e293b;
}

.prose-nexus h2 {
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.5rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    color: #0f172a;
    line-height: 1;
}

.prose-nexus h3 {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.75rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-top: 3rem;
    margin-bottom: 1rem;
    color: #0f172a;
}

.prose-nexus blockquote {
    border-left: none;
    background: #0f172a;
    color: #f5f0e8;
    padding: 2rem 2.5rem;
    margin: 3rem 0;
    font-style: italic;
    box-shadow: 8px 8px 0 0 #4f46e5;
    font-size: 1.1rem;
    line-height: 1.8;
}

.prose-nexus ul {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.prose-nexus ul li {
    padding-left: 1.5rem;
    position: relative;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    color: #1e293b;
}

.prose-nexus ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #4f46e5;
    font-weight: 900;
}

.prose-nexus ol {
    padding-left: 1.5rem;
    margin: 2rem 0;
}

.prose-nexus ol li {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    color: #1e293b;
}

.prose-nexus a {
    color: #4f46e5;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose-nexus a:hover {
    color: #ccff00;
    background: #0f172a;
    padding: 0 2px;
}

.prose-nexus strong {
    font-weight: 900;
    color: #0f172a;
}

.prose-nexus code {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 0.125rem 0.375rem;
    color: #4f46e5;
}

.prose-nexus pre {
    background: #0f172a;
    color: #f5f0e8;
    padding: 1.5rem 2rem;
    overflow-x: auto;
    margin: 2rem 0;
    border: 3px solid #0f172a;
    box-shadow: 6px 6px 0 0 #4f46e5;
    font-size: 0.9rem;
    line-height: 1.7;
}

.prose-nexus hr {
    border: none;
    border-top: 4px solid #0f172a;
    margin: 3rem 0;
}

.prose-nexus table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    overflow-x: auto;
    display: block;
}

.prose-nexus table th,
.prose-nexus table td {
    border: 2px solid #0f172a;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.9rem;
}

.prose-nexus table th {
    background: #0f172a;
    color: #f5f0e8;
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    font-style: italic;
}

/* ── Mobile overrides: ≤ 640px ─────────────────────────────────────────── */

@media (max-width: 640px) {
    .prose-nexus p {
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }

    .prose-nexus h2 {
        font-size: 1.75rem;
        margin-top: 3rem;
        margin-bottom: 1.25rem;
    }

    .prose-nexus h3 {
        font-size: 1.3rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .prose-nexus blockquote {
        padding: 1.25rem 1.5rem;
        margin: 1.75rem 0;
        box-shadow: 6px 6px 0 0 #4f46e5;
        font-size: 1rem;
    }

    .prose-nexus ul li,
    .prose-nexus ol li {
        font-size: 1rem;
    }

    .prose-nexus pre {
        padding: 1rem 1.25rem;
        font-size: 0.8rem;
    }

    .prose-nexus table th,
    .prose-nexus table td {
        padding: 0.5rem 0.625rem;
        font-size: 0.8rem;
    }
}

/* --------------------------------------------------------------------------
   17. SCAN LINE ANIMATION
   CRT scan-line effect used across hero sections and dark panels
   -------------------------------------------------------------------------- */

@keyframes scan {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(204, 255, 0, 0.15),
        transparent
    );
    animation: scan 6s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   18. L-BRACKET CORNER DECORATORS
   Used on .nexus-packet, archive cards, and hero sections
   -------------------------------------------------------------------------- */

.bracket,
.nexus-bracket {
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 20;
}

/* Top-left */
.b-tl, .nb-tl {
    top: -2px;
    left: -2px;
    border-top: 4px solid #4f46e5;
    border-left: 4px solid #4f46e5;
}

/* Top-right */
.b-tr, .nb-tr {
    top: -2px;
    right: -2px;
    border-top: 4px solid #4f46e5;
    border-right: 4px solid #4f46e5;
}

/* Bottom-left */
.b-bl, .nb-bl {
    bottom: -2px;
    left: -2px;
    border-bottom: 4px solid #4f46e5;
    border-left: 4px solid #4f46e5;
}

/* Bottom-right */
.b-br, .nb-br {
    bottom: -2px;
    right: -2px;
    border-bottom: 4px solid #4f46e5;
    border-right: 4px solid #4f46e5;
}

/* --------------------------------------------------------------------------
   19. RADAR BACKGROUND
   Rotating conic gradient overlay used on hero sections
   -------------------------------------------------------------------------- */

.bg-radar {
    background-image: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(79, 70, 229, 0.08) 10deg,
        transparent 20deg
    );
    background-size: cover;
}

/* --------------------------------------------------------------------------
   20. SHADOW UTILITIES — Brutalist Drop Shadows
   Complement Tailwind config for use in non-JIT contexts
   -------------------------------------------------------------------------- */

.shadow-brutal {
    box-shadow: 8px 8px 0px 0px #0f172a;
}

.shadow-brutal-sm {
    box-shadow: 5px 5px 0px 0px #0f172a;
}

@media (max-width: 640px) {
    .shadow-brutal {
        box-shadow: 5px 5px 0px 0px #0f172a;
    }

    .shadow-brutal-sm {
        box-shadow: 3px 3px 0px 0px #0f172a;
    }
}