/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Skill Tag Hover Effect */
.skill-tag {
    @apply px-3 py-1 rounded-full text-xs font-semibold transition-all duration-200;
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #f1f5f9; /* Slate 100 */
    border: 1px solid transparent; /* Cleaner look without border by default */
    border-radius: 9999px; /* Pill shape */
    font-size: 0.75rem; /* Smaller text */
    font-weight: 600;
    color: #475569; /* Slate 600 */
    transition: all 0.2s;
    cursor: default;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Subtle shadow */
}

.skill-tag:hover {
    background-color: #e0e7ff; /* Indigo 50 */
    color: #4338ca; /* Indigo 700 */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Timeline connector line fix for mobile */
@media (max-width: 768px) {
    .timeline-line::before {
        left: 1.25rem;
    }
}

/* Print Styles - Optimized for A4 Single Page */
@media print {
    @page {
        margin: 1.5cm 1cm; /* Top/Bottom 1.5cm, Left/Right 1cm */
        size: A4;
    }

    /* Global Reset */
    body {
        margin: 0 !important; /* Use page margin instead */
        font-size: 10pt;
        line-height: 1.3;
        color: #334155 !important; /* Slate 700 */
        background: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Hide UI Elements */
    nav,
    #theme-toggle,
    #lang-toggle,
    button,
    footer,
    .absolute.-inset-1, /* Hide photo glow */
    #about,
    #interests
    {
        display: none !important;
    }

    /* Hide Skills section completely from its original position */
    #skills {
        display: none !important;
    }

    /* Layout Containers */
    .max-w-5xl, .max-w-4xl {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Header */
    header {
        padding: 0 !important;
        margin-bottom: 0.4rem !important;
        border-bottom: 1px solid #ccc;
        padding-bottom: 0.3rem !important;
    }

    header > div {
        flex-direction: row-reverse !important; /* Photo left, Text right */
        align-items: center !important;
        gap: 1rem !important;
    }

    header h1 { font-size: 18pt !important; margin-bottom: 0.1rem !important; color: #64748b !important; line-height: 1 !important; }
    header h2 {
        font-size: 10pt !important;
        color: #64748b !important;
        margin-bottom: 0.1rem !important;
        margin-top: 0.1rem !important;
    }

    header p { font-size: 9pt !important; margin-bottom: 0.1rem !important; color: #334155 !important; line-height: 1.2 !important; }

    /* Contact Info & Stack Lines */
    header div.flex-wrap {
        display: inline-flex !important;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
        margin-bottom: 0.25rem !important;
        align-items: center !important;
    }

    /* Hide stack badges (PHP, Symfony, API Platform) in print */
    header div.flex-wrap:last-of-type {
        display: none !important;
    }

    /* Add spacing between address group and contact info */
    header div.flex-wrap:nth-of-type(1) {
        margin-right: 0 !important;
    }

    /* Hide LinkedIn */
    header a[href*="linkedin"] { display: none !important; }

    header a, header span { color: #334155 !important; font-size: 9pt !important; }

    /* Photo */
    header .relative.w-48 {
        width: 90px !important;
        height: 90px !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Header Tags */
    header .px-3 {
        padding: 0.1rem 0.5rem !important;
        font-size: 8pt !important;
        border: 1px solid #eee !important;
    }
    /* Sections */
    section {
        padding: 0.25rem 0 !important;
        page-break-inside: auto;
        background: #ffffff !important;
    }

    h3 {
        font-size: 14pt !important;
        margin-bottom: 0.5rem !important;
        border-bottom: 2px solid #cbd5e1 !important;
        padding-bottom: 0.25rem;
        text-align: left !important;
        color: #64748b !important;
        border-left: none !important;
        padding-left: 0 !important;
        page-break-after: avoid;
    }

    /* About */
    #about p { margin-bottom: 0.5rem !important; }

    /* Skills */
    #skills .grid {
        display: flex !important;
        flex-wrap: wrap;
        gap: 1rem !important;
    }
    #skills .bg-slate-50 {
        padding: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        flex: 1;
        min-width: 30%;
    }
    #skills .w-12 { display: none !important; } /* Hide icons */
    #skills h4 {
        font-size: 11pt !important;
        margin-bottom: 0.25rem !important;
        font-weight: bold;
        color: #1e293b !important;
    }
    #skills .flex-wrap { gap: 0.25rem !important; }
    .skill-tag {
        border: 1px solid #e2e8f0 !important;
        padding: 0.1rem 0.4rem !important;
        font-size: 8pt !important;
        color: #475569 !important;
        background: #f8fafc !important;
    }

    /* Experience */
    #experience .space-y-12 { margin: 0 !important; }
    #experience .space-y-12::before { display: none !important; } /* Hide timeline line */

    #experience .group {
        display: block !important;
        margin-bottom: 0.25rem !important;
        page-break-inside: auto; /* Allow breaking to fill page */
        padding-bottom: 0.25rem !important;
    }

    /* Prevent titles from being orphaned at bottom of page */
    #experience h4,
    #experience .text-sm.text-slate-500,
    #experience .js-stack-container {
        page-break-after: avoid;
    }

    /* Hide timeline dots/icons */
    #experience .w-10 { display: none !important; }

    /* Job Card Reset */
    #experience .bg-white {
        width: 100% !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Job Header Line */
    #experience .flex.justify-between {
        margin-bottom: 0.1rem !important;
        align-items: baseline !important;
    }
    #experience h4 { font-size: 11pt !important; color: #1e293b !important; }
    #experience .text-xs.font-semibold {
        font-size: 8pt !important;
        background: #f8fafc !important; /* Light background */
        color: #475569 !important;
        padding: 0.15rem 0.4rem !important;
        border-radius: 0.25rem !important;
        border: 1px solid #e2e8f0 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    /* Force expand details for print */
    details {
        display: block !important;
    }

    details > summary {
        display: none !important; /* Hide "View details" button */
    }

    details > div {
        display: block !important; /* Show content */
        padding-left: 0 !important;
        border-left: none !important;
        margin-top: 0.25rem !important;
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
    }

    /* Hide short summary when printing full details to avoid duplication if needed,
       but user asked for description to show. Usually short summary is outside details.
       Let's keep short summary as intro and details as elaboration. */

    #experience .text-sm.text-slate-500 {
        color: #64748b !important;
        margin-bottom: 0.25rem !important;
        font-style: italic;
    }

    #experience .font-mono {
        display: block !important;
        font-size: 8pt !important;
        color: #64748b !important;
        margin-bottom: 0.25rem !important;
    }

    /* Force white background for experience items in print */
    #experience .bg-white,
    #experience .dark\:bg-slate-800 {
        background: #ffffff !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Indent details content in print */
    details > div {
        margin-left: 1rem !important;
        padding-left: 0.5rem !important;
        border-left: 2px solid #e2e8f0 !important;
    }

    /* Show all hidden badges in print */
    .js-stack-container .hidden {
        display: inline-flex !important;
    }

    /* Hide the "+X" button in print */
    .js-stack-container button {
        display: none !important;
    }

    #experience ul { margin-top: 0 !important; }
    #experience li { margin-bottom: 0 !important; font-size: 9pt !important; }

    /* Education */
    #education {
        page-break-inside: avoid;
    }

    #education .grid {
        display: flex !important;
        gap: 1rem !important;
    }
    #education .border {
        border: none !important;
        padding: 0 !important;
        text-align: left !important;
        flex: 1;
    }
    #education .text-3xl { display: none !important; }
    #education h4 { font-size: 10pt !important; margin-bottom: 0 !important; color: #1e293b !important; }
    #education p { font-size: 9pt !important; margin-top: 0 !important; color: #475569 !important; }

    /* Style for printed Soft Skills */
    .soft-skills-print-container {
        page-break-inside: avoid;
    }

    .soft-skills-print-container .skill-tag {
        font-size: 8pt !important;
        padding: 0.15rem 0.5rem !important;
    }




    /* Preserve badge colors in print */
    .bg-indigo-50, .bg-teal-50, .bg-cyan-50, .bg-orange-50, .bg-purple-50 {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ensure badges are visible in print */
    [class*="bg-"][class*="-50"] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Preserve text colors in print */
    [class*="text-indigo-"], [class*="text-teal-"], [class*="text-cyan-"],
    [class*="text-orange-"], [class*="text-purple-"] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Preserve border colors in print */
    [class*="border-indigo-"], [class*="border-teal-"], [class*="border-cyan-"],
    [class*="border-orange-"], [class*="border-purple-"] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* Fix for Details Summary Icon Rotation */
details[open] summary i {
    transform: rotate(180deg);
}

/* Tooltip Styles */
.tooltip-trigger {
    position: relative;
}

.tooltip-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1e293b; /* Slate 800 */
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    white-space: normal;
    min-width: 150px;
    max-width: 250px;
    text-align: center;
    z-index: 50;
    margin-bottom: 0.5rem;
    transition: opacity 0.2s, visibility 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    pointer-events: none;
}

.tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

.tooltip-trigger:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}