/* ------------------------------------------------------------------- */
/* CV Créatif de Yassine Maroufi                                     */
/* Thème: Glassmorphism / Dark Mode                                  */
/* Approche: Mobile-First Responsive                                 */
/* Version: 3.0 (Fully Optimized & Responsive)                       */
/* ------------------------------------------------------------------- */

/* ===== Variables & Global Styles ===== */
:root {
    --primary-color: #00c6ff; /* Electric Blue */
    --secondary-color: #0072ff; /* Deeper Blue */
    --accent-color: #f72585; /* Magenta/Pink for contrast */
    --background-start: #141e30;
    --background-end: #243b55;
    --card-bg: rgba(255, 255, 255, 0.08); /* Increased opacity for readability */
    --text-color: #e0e0e0;
    --heading-color: #ffffff;
    --light-text-color: #cccccc;
    --heading-font: 'Montserrat', sans-serif;
    --body-font: 'Poppins', sans-serif;
    --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --border-radius: 16px;
    --border-color: rgba(255, 255, 255, 0.18);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* ===== Custom Selection Style ===== */
::selection {
    background-color: var(--primary-color);
    color: var(--background-start);
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--background-start);
}
::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}


/* ===== Animated Background ===== */
@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body {
    font-family: var(--body-font);
    background: linear-gradient(-45deg, #0f2027, #203a43, #2c5364, #12223b);
    background-size: 400% 400%;
    animation: gradient-animation 25s ease infinite;
    color: var(--text-color);
    line-height: 1.7;
    font-weight: 300;
    overflow-x: hidden;
    min-width: 320px; /* Prevents issues on very small screens */
    overflow-wrap: break-word; /* Prevents long words from breaking layout */
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--heading-color);
}
ul { list-style: none; }

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

/* ===== Layout (Mobile First) ===== */
.container {
    display: grid;
    grid-template-columns: 1fr; /* Single column for mobile */
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem; /* Optimized padding for mobile */
    gap: 1.5rem; /* Optimized gap for mobile */
    animation: fadeIn 1s ease-out forwards;
}

/* ===== Glassmorphism Card Style ===== */
.card {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    padding: 1.25rem; /* Mobile-friendly padding */
    transition: transform 0.3s ease, background 0.3s ease;
}
.card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.12);
}

/* ===== Sidebar (Left Column) ===== */
.sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.profile-header {
    text-align: center;
    padding: 1.5rem 1rem;
}

.profile-pic {
    width: 90px;
    height: 90px;
    font-size: 2.2rem;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: var(--heading-color);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--heading-font);
    box-shadow: 0 0 20px rgba(0, 198, 255, 0.5);
}

.profile-header .name {
    font-family: var(--heading-font);
    font-size: 1.5rem; /* Adjusted for mobile */
    color: var(--heading-color);
    margin-bottom: 0.5rem;
}

.profile-header .title {
    font-size: 0.9rem; /* Adjusted for mobile */
    font-weight: 300;
    color: var(--primary-color);
}

.section-title {
    font-family: var(--heading-font);
    font-size: 1.1rem; /* Adjusted for mobile */
    color: var(--heading-color);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.icon { margin-right: 0.75rem; color: var(--primary-color); }
.icon-sm { margin-right: 1rem; width: 20px; text-align: center; flex-shrink: 0; }

.contact-section ul li {
    display: flex;
    align-items: flex-start; /* Better for wrapped text */
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
}

/* Skills Section */
.skills-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.skill-item {
    background: rgba(0, 198, 255, 0.1);
    color: var(--primary-color);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
}

/* Languages Section */
.language-item { margin-bottom: 1rem; }
.language-item p { display: flex; justify-content: space-between; margin-bottom: 0.3rem; font-weight: 400; font-size: 0.9rem; }
.language-item span { color: var(--light-text-color); font-size: 0.8em; }
.progress-bar { background: rgba(0,0,0,0.2); border-radius: 10px; height: 6px; overflow: hidden; }
.progress { height: 100%; background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); border-radius: 10px; }

/* ===== Main Content (Right Column) ===== */
.main-content { display: flex; flex-direction: column; gap: 1.5rem; }

.section-title-main {
    font-family: var(--heading-font);
    font-size: 1.3rem; /* Adjusted for mobile */
    color: var(--heading-color);
    margin-bottom: 1.5rem;
}

/* Experience & Education Timelines */
.experience-item, .timeline-item { position: relative; padding-bottom: 1.5rem; }
.experience-item { padding-left: 1.5rem; border-left: 2px solid var(--primary-color); }
.timeline-item { padding-left: 1.5rem; border-left: 2px solid var(--border-color); }
.experience-item:last-child, .timeline-item:last-child { padding-bottom: 0; }

.experience-item::before, .timeline-item::before {
    content: '';
    position: absolute;
    left: -9px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--primary-color);
}
.experience-item::before { top: 0.25em; border: 3px solid var(--background-end); }
.timeline-item::before { top: 0.4em; /* Align with text better */ }

.experience-item h4 { font-size: 1.05rem; font-weight: 600; color: var(--primary-color); }
.company-date, .date { font-size: 0.85rem; color: var(--light-text-color); margin-bottom: 0.75rem; }
.experience-item ul { padding-left: 1rem; }
.experience-item li { margin-bottom: 0.25rem; list-style-type: disc; }
.timeline-content h5 { font-size: 1.05rem; font-weight: 600; color: var(--heading-color); }
.institution { font-style: italic; }

/* Certifications Section */
.grid-container { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.grid-item h4 { color: var(--primary-color); margin-bottom: 1rem; font-weight: 600; font-size: 1rem;}
.cert-list li {
    display: flex;
    align-items: flex-start; /* Better alignment for wrapping text */
    justify-content: space-between;
    margin-bottom: 0.8rem;
    gap: 1rem; /* Increased gap for better spacing on wrap */
    font-size: 0.9rem;
}
.cert-list i { color: var(--primary-color); margin-right: 0.75rem; width: 20px; text-align: center; margin-top: 4px; flex-shrink: 0; }
/* FIX: Removed 'white-space: nowrap' to prevent horizontal overflow on mobile */
.cert-list span { 
    color: var(--light-text-color); 
    font-size: 0.85em; 
    text-align: right; 
    flex-shrink: 0; /* Prevents date from being squished */
}

/* ===== Tablet Styles ===== */
@media (min-width: 768px) {
    .container {
        padding: 2rem 1.5rem;
        gap: 2rem;
    }
    .card { padding: 1.5rem; }
    .profile-header .name { font-size: 1.6rem; }
    .section-title-main { font-size: 1.4rem; }
    .grid-container { grid-template-columns: 1fr 1fr; }
    .skill-item { font-size: 0.85rem; }
}

/* ===== Desktop Styles ===== */
@media (min-width: 992px) {
    .container {
        grid-template-columns: 350px 1fr; /* Two columns for desktop */
        padding: 2.5rem 2rem;
    }
    .sidebar {
        position: sticky; /* Enable sticky sidebar on desktop */
        top: 2.5rem;
        height: fit-content;
    }
    .profile-pic { width: 100px; height: 100px; font-size: 2.5rem; }
    .profile-header .name { font-size: 1.8rem; }
    .profile-header .title { font-size: 0.95rem; }
}


/* ===== Print Stylesheet ===== */
@media print {
    :root {
        --primary-color: #000;
        --background-start: #fff;
        --card-bg: #fff;
        --text-color: #000;
        --heading-color: #000;
        --shadow: none;
        --border-color: #ddd;
    }
    html {
        scroll-behavior: auto;
    }
    body { background: #fff; animation: none; }
    .container { display: block; }
    .sidebar, .main-content { width: 100%; position: static; }
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
        padding: 1rem;
        margin-bottom: 1rem;
        page-break-inside: avoid;
        backdrop-filter: none;
    }
    .profile-header { text-align: left; }
    .profile-pic { background: #eee; color: #000; box-shadow: none;}
    .icon, .progress-bar, .timeline-item::before, .experience-item::before, ::-webkit-scrollbar { display: none; }
    .experience-item, .timeline-item { border-left: none; padding-left: 0; }
    a { color: #000; text-decoration: none; }
    @page { size: A4; margin: 1.5cm; }
}