/*
Theme Name: DJ Data Dark
Theme URI: https://djdata.se
Author: DJ Data i Skänninge
Author URI: https://djdata.se
Description: Mörk, cool och futuristisk WordPress-tema för DJ Data. Kraftfull landing page design med neonaccenter, perfekt för en modern Internetleverantör.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: djdata-dark
Tags: dark, modern, tech, internet, landing-page, responsive, neon
*/

/* ============================================
   DJ DATA DARK - KUNGlig Mörk Tema
   ============================================ */

:root {
    --accent-cyan: #22d3ee;
    --accent-teal: #14b8a6;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: #050507;
    color: #f1f5f9;
}

.font-display {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.025em;
}

/* Stabilisera layout innan Tailwind hunnit appliceras */
.max-w-screen-2xl,
.max-w-screen-xl,
.max-w-5xl,
.max-w-4xl,
.max-w-2xl,
.max-w-xl {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

/* Dramatic Dark Hero Background */
.dark-tech-bg {
    background-color: #050507;
    background-image: 
        radial-gradient(circle at 20% 25%, rgba(34, 211, 238, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 80% 75%, rgba(103, 232, 249, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, #050507 0%, #0a0a0f 100%);
}

/* High Clarity Glass Cards */
.glass {
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.glass:hover {
    border-color: rgba(34, 211, 238, 0.4);
    background: rgba(255, 255, 255, 0.04);
}

.cool-card {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #22d3ee, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cool-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px -15px rgb(0 0 0 / 0.5);
    border-color: #22d3ee;
}

.cool-card:hover::before {
    opacity: 1;
}

/* Navigation */
.nav-link {
    transition: all 0.2s ease;
}

.nav-link:hover {
    color: #22d3ee;
    text-shadow: 0 0 10px rgb(34 211 238 / 0.3);
}

/* Premium Buttons */
.premium-button {
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.premium-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.6s;
}

.premium-button:hover::after {
    left: 250%;
}

/* Section Headers */
.section-header {
    font-size: 3.5rem;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.04em;
}

/* Neon Glow */
.neon-cyan {
    text-shadow: 0 0 15px rgb(34 211 238 / 0.5);
}

/* Tech Grid */
.tech-grid {
    background-image: 
        linear-gradient(rgba(34, 211, 238, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.07) 1px, transparent 1px);
    background-size: 65px 65px;
}

/* Footer */
footer {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-header {
        font-size: 2.75rem;
    }
}

/* Extra High Impact Styles */
.section-header {
    font-size: 3.75rem;
    line-height: 1.0;
}

h2 {
    letter-spacing: -0.04em;
}

/* Stronger hover on premium buttons */
.premium-button:hover {
    box-shadow: 0 10px 30px -10px rgb(34 211 238 / 0.3);
}

/* ============================================
   RÖRLIG DATATRAFIK I HERO (Fiber / Nätverk)
   ============================================ */

.data-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(34, 211, 238, 0.25),
        rgba(34, 211, 238, 0.6),
        rgba(34, 211, 238, 0.25),
        transparent
    );
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
    z-index: 1;
    pointer-events: none;
}

/* Positionering av linjerna */
.line-1 { top: 22%; left: 5%; width: 38%; transform: rotate(-8deg); }
.line-2 { top: 38%; left: 12%; width: 55%; transform: rotate(6deg); }
.line-3 { top: 55%; right: 8%; width: 42%; transform: rotate(-4deg); }
.line-4 { top: 68%; left: 18%; width: 48%; transform: rotate(9deg); }
.line-5 { top: 82%; right: 15%; width: 35%; transform: rotate(-6deg); }

/* Data packets som rör sig längs linjerna */
.data-packet {
    position: absolute;
    top: -3px;
    left: 0;
    width: 6px;
    height: 6px;
    background: #67e8f9;
    border-radius: 9999px;
    box-shadow: 
        0 0 6px #67e8f9,
        0 0 12px #22d3ee;
    animation: data-flow 4.5s linear infinite;
    opacity: 0.9;
}

/* Olika hastigheter och delay för naturlig känsla */
.line-1 .data-packet { animation-duration: 3.8s; animation-delay: 0s; }
.line-2 .data-packet { animation-duration: 5.2s; animation-delay: 1.2s; }
.line-3 .data-packet { animation-duration: 4.1s; animation-delay: 0.6s; }
.line-4 .data-packet { animation-duration: 6.0s; animation-delay: 2.1s; }
.line-5 .data-packet { animation-duration: 3.5s; animation-delay: 1.8s; }

/* ============================================
   19" DATARACK MED BLINKANDE LEDS
   ============================================ */

.server-rack {
    width: 260px;
    background: #111114;
    border: 8px solid #1f2126;
    border-radius: 8px;
    padding: 16px 14px;
    box-shadow: 
        0 25px 50px -12px rgb(0 0 0 / 0.6),
        inset 0 0 0 1px #2a2d33;
}

.rack-frame {
    background: #0a0a0f;
    border: 2px solid #2a2d33;
    padding: 12px 10px;
    border-radius: 4px;
}

.rack-unit {
    background: #16181d;
    border: 1px solid #2a2d33;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 3px;
}

.rack-unit:last-child {
    margin-bottom: 0;
}

.unit-label {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.led-row {
    display: flex;
    gap: 6px;
}

.led {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    box-shadow: 0 0 5px currentColor;
    animation: led-blink-fast 1.1s infinite alternate;
}

.led-green { background: #22c55e; color: #22c55e; }
.led-amber { background: #f59e0b; color: #f59e0b; }
.led-blue  { background: #3b82f6; color: #3b82f6; }

/* Snabb blinkning som riktiga nätverksswitchar (0.8–1.2s) */
.fast-blink .led {
    animation: led-blink-fast 0.9s infinite alternate;
}

@keyframes led-blink-fast {
    0%   { opacity: 0.35; }
    100% { opacity: 1; }
}

.rack-label {
    text-align: center;
    font-size: 10px;
    color: #475569;
    margin-top: 10px;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Kompakt version för 10 rack i bakgrunden */
.server-rack-sm {
    width: 168px;
    background: #111114;
    border: 5px solid #1f2126;
    border-radius: 6px;
    padding: 8px 6px;
    box-shadow: 0 15px 30px -10px rgb(0 0 0 / 0.5);
}

.rack-frame-sm {
    background: #0a0a0f;
    border: 1px solid #2a2d33;
    padding: 6px 5px;
    border-radius: 3px;
}

.rack-unit-sm {
    background: #16181d;
    border: 1px solid #2a2d33;
    margin-bottom: 5px;
    padding: 4px 5px;
    border-radius: 2px;
}

.rack-unit-sm:last-child {
    margin-bottom: 0;
}

/* Varierad blinkning för naturlig känsla */
.fast-blink {
    animation: led-blink-fast 0.7s infinite alternate !important;
}

.occasional-blink {
    animation: led-blink-occasional 3.5s infinite !important;
}

@keyframes led-blink-fast {
    0%   { opacity: 0.3; }
    100% { opacity: 1; }
}

@keyframes led-blink-occasional {
    0%, 85% { opacity: 0.25; }
    88%, 92% { opacity: 1; }
    95%, 100% { opacity: 0.25; }
}

/* ============================================
   MYCKET DETALJERAD CSS RACK GRAFIK
   ============================================ */

.detailed-rack {
    width: 320px;
    background: #0f1115;
    border: 10px solid #1a1d23;
    border-radius: 8px;
    padding: 14px 12px;
    box-shadow: 0 30px 60px -15px rgb(0 0 0 / 0.7);
}

.rack-header {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #2a2d33;
}

.rack-device {
    background: #16181d;
    border: 1px solid #2a2d33;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 4px;
}

.rack-device:last-child {
    margin-bottom: 0;
}

.device-label {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

/* Port grid för switchar med ~20 portar */
.port-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.port-grid.small {
    gap: 2px;
}

.port-row {
    display: flex;
    gap: 3px;
}

.port {
    width: 11px;
    height: 11px;
    background: #111;
    border: 1px solid #333;
    border-radius: 1px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Server front */
.server-front {
    background: #1f2228;
    padding: 6px;
    border-radius: 2px;
}

.led-strip {
    display: flex;
    gap: 4px;
}

/* Rörliga datapaket på kartan över Östergötland */
.data-packet.map-packet {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #67e8f9;
    border-radius: 9999px;
    box-shadow: 0 0 12px #67e8f9, 0 0 24px #22d3ee;
    animation: map-data-flow 6s linear infinite;
    opacity: 0.85;
}

@keyframes map-data-flow {
    0% {
        transform: translate(0, 0) scale(0.6);
        opacity: 0;
    }
    10% {
        opacity: 0.85;
        transform: scale(1);
    }
    80% {
        opacity: 0.85;
    }
    100% {
        transform: translate(180px, -60px) scale(0.5);
        opacity: 0;
    }
}
/* ============================================
   SVG NETWORK MAP - ANIMATED LINES & PACKETS
   ============================================ */

.net-line {
    animation: dash-move 1.8s linear infinite;
}

@keyframes dash-move {
    to {
        stroke-dashoffset: -28;
    }
}

/* Softer pulse on city nodes */
header svg circle[filter] {
    animation: node-pulse 3s ease-in-out infinite alternate;
}

@keyframes node-pulse {
    0% { opacity: 0.85; }
    100% { opacity: 1; }
}

/* Ensure SVG text is crisp */
header svg text {
    pointer-events: none;
    user-select: none;
}

/* ============================================
   WORDPRESS MENU STYLING
   ============================================ */

/* Desktop primary menu */
.primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-menu > li {
    display: inline-block;
    position: relative;
}

.primary-menu > li > a {
    color: #d4d4d8;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0.25rem 0;
}

.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current_page_item > a {
    color: #ffffff;
    text-shadow: 0 0 10px rgb(34 211 238 / 0.3);
}

/* Sub-menu (dropdown) */
.primary-menu > li {
    /* Make the whole li a hover zone including space below the link */
    padding-bottom: 1rem;
    margin-bottom: -1rem;
}

.primary-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    background: #0f1117;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 1rem;
    padding: 0.5rem;
    margin-top: 0; /* no gap */
    box-shadow: 0 20px 40px -10px rgb(0 0 0 / 0.7);
    z-index: 60;
    list-style: none;
}

/* Invisible bridge so mouse can move into the dropdown without losing hover */
.primary-menu > li::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
}

.primary-menu > li:hover > .sub-menu,
.primary-menu > li:focus-within > .sub-menu {
    display: block;
}

.primary-menu .sub-menu a {
    display: block;
    padding: 0.7rem 1.1rem;
    color: #a1a1aa;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.primary-menu .sub-menu a:hover {
    background: rgba(34, 211, 238, 0.1);
    color: #22d3ee;
}

/* Mobile menu */
.mobile-primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-primary-menu li a {
    display: block;
    padding: 0.75rem 0.75rem;
    color: #d4d4d8;
    text-decoration: none;
    border-radius: 0.75rem;
    transition: all 0.15s ease;
}

.mobile-primary-menu li a:hover,
.mobile-primary-menu li.current-menu-item > a {
    background: rgba(255,255,255,0.05);
    color: #ffffff;
}

.mobile-primary-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding-left: 1rem;
}

.mobile-primary-menu .sub-menu a {
    font-size: 0.9rem;
    color: #a1a1aa;
}