/* ============================================
   Custom Styles for Neon Resume / Cyberpunk CV
   ============================================ */

/* CSS Variables for Theme Colors */
:root {
    --cyberpink: #ff2a6d;
    --cyberblue: #05d9e8;
    --cyberpurple: #d300c5;
    --cyberdark: #0d0221;
    --transition-base: all 0.3s ease;
}

/* Base Styles */
* {
    box-sizing: border-box;
}

/* Prevent horizontal overflow globally - consolidated */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', 'Monaco', monospace;
    background-color: var(--cyberdark);
    color: #ffffff;
    line-height: 1.6;
}

/* Headings: the neon glow bleeds between glyphs, so give them room to breathe */
h1 {
    letter-spacing: 0.05em;
}

h2,
h3 {
    letter-spacing: 0.035em;
}

/* Text Shadow Neon Effects */
.text-shadow-neon {
    text-shadow:
        0 0 10px rgba(255, 42, 109, 0.68),
        0 0 20px rgba(255, 42, 109, 0.52),
        0 0 30px rgba(255, 42, 109, 0.36);
}

.text-shadow-neon-strong {
    text-shadow:
        0 0 5px rgba(255, 42, 109, 0.45),
        0 0 10px rgba(255, 42, 109, 0.38),
        0 0 15px rgba(255, 42, 109, 0.3),
        0 0 20px rgba(255, 42, 109, 0.22);
}

.navbar-title {
    text-shadow: 
        0 0 3px rgba(255, 42, 109, 0.5),
        0 0 6px rgba(255, 42, 109, 0.4),
        0 0 9px rgba(255, 42, 109, 0.3);
    letter-spacing: 0.5px;
}

.navbar-title .text-cyberblue {
    text-shadow: 
        0 0 3px rgba(5, 217, 232, 0.5),
        0 0 6px rgba(5, 217, 232, 0.4),
        0 0 9px rgba(5, 217, 232, 0.3);
}

/* Navigation Links Styling */
.nav-link {
    position: relative;
}

/* Underline effect - only for desktop (2xl and above, 1536px+) */
@media (min-width: 1536px) {
    .nav-link::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--cyberblue);
        transform: translateX(-50%);
        transition: width 0.3s ease;
        border-radius: 2px;
    }

    .nav-link:hover::before {
        width: 80%;
    }

    .nav-link:hover {
        transform: translateY(-1px);
    }

    .nav-link.active::before {
        width: 80%;
    }
}

/* Mobile - no underline, just color change */
@media (max-width: 1535px) {
    .nav-link::before {
        display: none !important;
        content: none !important;
    }
    
    .nav-link:hover {
        transform: none;
    }
}

/* Active state for mobile menu links - only border and color, no underline */
#mobile-menu .nav-link.active {
    border-left-color: var(--cyberblue);
    color: var(--cyberblue);
}

.nav-link:active {
    transform: translateY(0);
}

.text-shadow-neon-alt {
    text-shadow:
        0 0 10px rgba(5, 217, 232, 0.68),
        0 0 20px rgba(5, 217, 232, 0.52),
        0 0 30px rgba(5, 217, 232, 0.36);
}

/* Glow Effects */
.glow-pink {
    box-shadow: 
        0 0 6px rgba(255, 42, 109, 0.6),
        0 0 12px rgba(255, 42, 109, 0.4),
        inset 0 0 8px rgba(255, 42, 109, 0.2);
}

.glow-blue {
    box-shadow: 
        0 0 6px rgba(5, 217, 232, 0.6),
        0 0 12px rgba(5, 217, 232, 0.4),
        inset 0 0 8px rgba(5, 217, 232, 0.2);
}

/* Improved text readability on colored backgrounds for pills and buttons */
span.bg-cyberblue,
a.bg-cyberblue,
button.bg-cyberblue,
span.bg-cyberpink,
a.bg-cyberpink,
button.bg-cyberpink {
    color: #ffffff !important;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.95),
        0 0 6px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(0, 0, 0, 0.6);
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Shadow Neon Effects */
.shadow-neon {
    box-shadow: 
        0 0 20px rgba(255, 42, 109, 0.5),
        0 0 40px rgba(5, 217, 232, 0.3);
}

.shadow-neon-blue {
    box-shadow: 
        0 0 15px rgba(5, 217, 232, 0.5),
        0 0 30px rgba(5, 217, 232, 0.3);
}

.shadow-neon-pink {
    box-shadow: 
        0 0 15px rgba(255, 42, 109, 0.5),
        0 0 30px rgba(255, 42, 109, 0.3);
}

.shadow-neon-purple {
    box-shadow:
        0 0 15px rgba(211, 0, 197, 0.5),
        0 0 30px rgba(211, 0, 197, 0.3);
}

/* Hover variants (Tailwind config nedefinuje boxShadow utility,
   tak hover:shadow-neon-* doplňujeme ako vlastné triedy) */
.hover\:shadow-neon-blue:hover {
    box-shadow:
        0 0 15px rgba(5, 217, 232, 0.5),
        0 0 30px rgba(5, 217, 232, 0.3);
}

.hover\:shadow-neon-pink:hover {
    box-shadow:
        0 0 15px rgba(255, 42, 109, 0.5),
        0 0 30px rgba(255, 42, 109, 0.3);
}

.hover\:shadow-neon-purple:hover {
    box-shadow:
        0 0 15px rgba(211, 0, 197, 0.5),
        0 0 30px rgba(211, 0, 197, 0.3);
}

/* Timeline Styles */
.right-timeline {
    position: relative;
}

.left-timeline {
    position: relative;
}

/* Timeline vertical line - unified gradient */
#experience .relative::before {
    content: '';
    position: absolute;
    left: 2rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom,
        var(--cyberblue) 0%,
        var(--cyberpink) 100%);
    border-radius: 1px;
    z-index: 0;
}

@media (min-width: 768px) {
    #experience .relative::before {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .right-timeline::before,
    .left-timeline::before {
        display: none;
    }
}

/* Hero background: static circuit board (no canvas, no JS, no repaint cost) */
.hero-circuit,
.hero-circuit-traces {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Base glow so the board sits in a lit space rather than on flat black */
.hero-circuit {
    background:
        radial-gradient(ellipse 70% 55% at 50% 45%, rgba(5, 217, 232, 0.10) 0%, transparent 70%),
        linear-gradient(to bottom, #0d0221, #100430 60%, #0d0221);
}

/* Data traces and solder points, tiled SVG; faded out towards the edges */
.hero-circuit-traces {
    opacity: 0.75;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill='none' stroke='%2305d9e8' stroke-width='1.1' opacity='0.5'><path d='M0 40 H70 L100 70 H180 L210 40 H260'/><path d='M0 150 H40 L70 120 H130 L160 150 H260'/><path d='M40 0 V60 L70 90 V180 L40 210 V260'/><path d='M200 0 V90 L170 120 V200 L200 230 V260'/><path d='M100 260 V200 L130 170 H190'/></g><g fill='none' stroke='%23ff2a6d' stroke-width='1.1' opacity='0.42'><path d='M0 220 H90 L120 190 H260'/><path d='M130 0 V40 L160 70 H260'/></g><g fill='%2305d9e8'><circle cx='70' cy='120' r='2.6'/><circle cx='160' cy='150' r='2.6'/><circle cx='100' cy='70' r='2.6'/><circle cx='170' cy='120' r='2.6'/></g><g fill='%23ff2a6d'><circle cx='120' cy='190' r='2.6'/><circle cx='160' cy='70' r='2.6'/></g></svg>");
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 25%, transparent 85%);
    mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 25%, transparent 85%);
}

/* Contrast overlay behind hero content - keeps text/badges readable (WCAG AA) */
.hero-overlay {
    background:
        radial-gradient(ellipse 80% 60% at 50% 45%, rgba(13, 2, 33, 0.35) 0%, rgba(13, 2, 33, 0.78) 100%),
        linear-gradient(to bottom, rgba(13, 2, 33, 0.55) 0%, rgba(13, 2, 33, 0.15) 30%, rgba(13, 2, 33, 0.55) 100%);
}

/* Full width background container for hero section */
.hero-background-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    right: auto !important;
}

/* Ensure it works even after page load - highest specificity */
section#home > .hero-background-container {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    right: auto !important;
    position: absolute !important;
}

/* Desktop specific - ensure full width background */
@media (min-width: 641px) {
    section#home > .hero-background-container,
    section#home .hero-background-container,
    .hero-background-container {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100vw !important;
        right: auto !important;
        position: absolute !important;
    }
    
    /* Circuit background should fill the entire parent container on desktop */
    section#home .hero-circuit,
    section#home .hero-circuit-traces {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
    }
}

/* Form Error States */
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .animate-bounce {
        animation: none !important;
    }
    /* Particle network animation is stopped in JS when reduced motion is set;
       a single static frame is rendered instead. */
}

/* Smooth Transitions */
.transition-all {
    transition: var(--transition-base);
}

/* Focus Styles for Accessibility */
*:focus-visible {
    outline: 2px solid var(--cyberblue);
    outline-offset: 2px;
}

/* Skip to Main Content Link (Accessibility) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--cyberblue);
    color: var(--cyberdark);
    padding: 12px 16px;
    text-decoration: none;
    z-index: 1000;
    font-weight: bold;
    border-radius: 0 0 4px 0;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--cyberpink);
    outline-offset: 2px;
}

/* Image Styles */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Button Hover Effects */
button:hover,
a[role="button"]:hover {
    transform: translateY(-2px);
}

/* Form Input Focus States */
input:focus,
textarea:focus {
    outline: none;
    border-color: var(--cyberblue);
    box-shadow: 0 0 0 2px rgba(5, 217, 232, 0.2);
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Fix for bullet points in skills list - prevent deformation */
li[role="listitem"].flex {
    align-items: flex-start;
}

li[role="listitem"] > span[class*="rounded-full"] {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    min-width: 0.5rem;
    min-height: 0.5rem;
    align-self: flex-start;
    margin-top: 0.375rem;
}

li[role="listitem"] > span:not([class*="rounded-full"]):not([class*="ml-auto"]) {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
}

/* Tablet and Medium Screen Responsive Fixes (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Container padding for tablets */
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        max-width: 100%;
    }
    
    /* Section padding adjustments */
    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    /* Grid gaps for tablets */
    .grid {
        gap: 1.5rem;
    }
    
    /* Skills grid - 2 columns on tablets instead of 3 */
    #skills .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Center the third skill card on tablets */
    #skills .grid > article:nth-child(3) {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: calc(50% - 0.75rem); /* Same width as other cards */
    }
    
    /* About section grid gap */
    #about .grid {
        gap: 2rem;
    }
    
    /* Contact section adjustments */
    #contact .grid {
        gap: 2rem;
    }
    
    /* Navbar adjustments for tablets */
    .navbar-title {
        font-size: 0.875rem;
    }
    
    /* Hero section adjustments */
    #home h1 {
        font-size: 3rem;
        line-height: 1.1;
    }
    
    /* Cards padding for tablets */
    article {
        padding: 1.25rem;
    }
    
    /* Footer text adjustments */
    footer .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* Prevent overflow on tablets */
    * {
        max-width: 100%;
    }
    
    /* Copy buttons positioning for tablets */
    [data-copy-email],
    [data-copy-phone] {
        right: 0.75rem !important; /* 12px on tablet - matches right-3 */
        top: 0.75rem !important; /* 12px on tablet - matches top-3 */
        left: auto !important;
        max-width: none !important;
        width: auto !important;
        display: inline-flex !important;
    }
}

/* iPad Landscape and Small Laptop Optimizations (1024px - 1441px) */
/* This covers 13" screens where Safari/Firefox report 1440px viewport width */
/* Simplified CSS to improve performance */
@media (min-width: 1024px) and (max-width: 1441px) {
    /* Slightly reduced padding for smaller laptops */
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    /* Section padding for smaller laptops */
    section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    /* Hero section for smaller laptops */
    #home h1 {
        font-size: 3.5rem;
    }
    
    /* Grid gaps for smaller laptops */
    .grid {
        gap: 1.75rem;
    }
    
    /* Force mobile menu display for 13" screens - simplified selectors */
    custom-navbar #mobile-menu-button {
        display: flex !important;
    }
    
    custom-navbar #desktop-menu {
        display: none !important;
    }
    
    /* Force mobile footer layout for 13" screens - simplified */
    custom-footer footer .relative {
        flex-direction: column !important;
    }
    
    /* Hide desktop footer text on 13" screens */
    custom-footer footer [class*="absolute"][class*="left-1/2"] {
        display: none !important;
    }
    
    /* Show mobile footer text on 13" screens - simplified selector */
    custom-footer footer .text-center[class*="w-full"] {
        display: block !important;
    }
}

/* Mobile Responsive Fixes */
@media (max-width: 640px) {
    /* max-width/overflow-x sú riešené globálne vyššie; tu len positioning kontext */
    html, body {
        position: relative;
    }
    
    /* Container fixes */
    .container {
        max-width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Navbar title fix - larger on mobile */
    .navbar-title {
        font-size: 0.875rem; /* 14px - larger than before */
        line-height: 1.3;
    }
    
    /* Navbar height fix - larger on mobile */
    custom-navbar nav .container > div:first-child {
        min-height: 5rem !important; /* 80px - matches h-20 */
        height: 5rem !important;
    }
    
    /* Ensure mobile menu is not constrained by parent height */
    custom-navbar nav .container {
        overflow: visible !important;
    }
    
    /* Mobile menu width fix */
    #mobile-menu {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background-color: rgba(13, 2, 33, 0.98) !important; /* cyberdark with high opacity */
        padding-bottom: 1rem !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Ensure mobile menu items are visible */
    #mobile-menu ul {
        background-color: transparent !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    #mobile-menu li {
        background-color: transparent !important;
    }
    
    #mobile-menu a {
        background-color: transparent !important;
    }
    
    /* Force mobile menu to cover all items */
    #mobile-menu:not(.hidden) {
        display: block !important;
        min-height: fit-content !important;
    }
    
    /* Ensure parent container doesn't clip mobile menu */
    custom-navbar nav {
        overflow: visible !important;
    }
    
    custom-navbar nav .container {
        overflow: visible !important;
    }
    
    /* Circuit background fills its (already full-width) container on mobile */
    .hero-circuit,
    .hero-circuit-traces {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
    }
    
    /* Bullet point alignment fix - align with first line of text */
    ul[role="list"] li span[class*="bg-cyberblue"][class*="rounded-full"],
    ul[role="list"] li span[class*="bg-cyberpurple"][class*="rounded-full"],
    ul[role="list"] li span[class*="bg-cyberpink"][class*="rounded-full"] {
        margin-top: 0.4375rem !important; /* 7px - aligns with first line of text for text-base */
    }
    
    /* Adjust for smaller text sizes */
    ul[role="list"] li.text-sm span[class*="bg-cyberblue"][class*="rounded-full"],
    ul[role="list"] li.text-sm span[class*="bg-cyberpurple"][class*="rounded-full"],
    ul[role="list"] li.text-sm span[class*="bg-cyberpink"][class*="rounded-full"] {
        margin-top: 0.5rem !important; /* 8px - aligns with first line of text for text-sm */
    }
    
    
    /* Prevent text overflow */
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Section padding fix */
    section {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Absolute positioned elements fix */
    [class*="absolute"]:not([data-copy-email]):not([data-copy-phone]):not([class*="left-1/2"]):not([class*="-translate-x-1/2"]),
    [class*="fixed"] {
        max-width: 100vw;
        left: 0;
        right: 0;
    }
    
    /* Copy buttons - hide on mobile */
    button[data-copy-email],
    button[data-copy-phone] {
        display: none !important;
    }
}

/* Desktop - ensure copy buttons are visible (override mobile rule) */
@media (min-width: 641px) {
    button[data-copy-email],
    button[data-copy-phone] {
        display: flex !important;
    }
}

/* About section image sizing */
#about img {
    max-width: 85%;
    margin: 0 auto;
    display: block;
}

/* Mobile - smaller image */
@media (max-width: 640px) {
    #about img {
        max-width: 75%;
    }
}

/* Desktop - smaller image */
@media (min-width: 641px) {
    #about img {
        max-width: 90%;
    }
}

/* Tablet - vertically center the image container */
@media (min-width: 768px) and (max-width: 1023px) {
    #about .grid > div:first-child {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Print Styles */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .shadow-neon,
    .shadow-neon-blue,
    .shadow-neon-pink,
    .shadow-neon-purple,
    .glow-pink,
    .glow-blue {
        box-shadow: none;
    }
    
    .skip-link,
    nav,
    footer {
        display: none;
    }
}