/* --- Experience Page Styles (Alternative - Minimalist & Elegant) --- */

.experience-section-alt {
    padding: 50px 0;
    /* background-color: #fff; */ /* Keep it clean or use a very subtle off-white */
}

/* body.dark-mode .experience-section-alt {
    background-color: #161b22; /* GitHub-like dark background */
*/

.experience-main-header {
    text-align: center;
    margin-bottom: 60px;
}

.experience-main-header h1 {
    font-size: 2.8rem;
    font-weight: 300; /* Lighter font weight for a more modern feel */
    color: #24292e; /* Dark grey, not quite black */
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}
.experience-main-header .lead-text {
    font-size: 1.1rem;
    color: #586069;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

body.dark-mode .experience-main-header h1 {
    color: #c9d1d9;
}
body.dark-mode .experience-main-header .lead-text {
    color: #8b949e;
}


.experience-entry {
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid #e1e4e8; /* Subtle separator */
}
.experience-entry:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

body.dark-mode .experience-entry {
    border-bottom-color: #30363d;
}


.entry-header {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    margin-bottom: 25px;
}

.entry-logo-placeholder {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background-color: #f6f8fa;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    border: 1px solid #e1e4e8;
}
.entry-logo-placeholder img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}
.entry-logo-placeholder i {
    font-size: 1.8rem;
    color: #8b949e;
}

body.dark-mode .entry-logo-placeholder {
    background-color: #22272e;
    border-color: #30363d;
}
body.dark-mode .entry-logo-placeholder i {
    color: #6a737d;
}

.company-name-title {
    font-size: 1.75rem; /* Larger company name */
    font-weight: 500;   /* Semi-bold */
    color: #1153a0; /* Accent color for company name */
    margin-bottom: 0; /* Reduced margin */
    line-height: 1.2;
    transition: color 0.2s ease-in-out;
}
.company-name-title:hover {
    color: #0a3b73; /* Darker shade on hover for fun */
}

body.dark-mode .company-name-title {
    color: #58a6ff;
}
body.dark-mode .company-name-title:hover {
    color: #80baff;
}


.job-role-block {
    margin-bottom: 25px;
    padding-left: 70px; /* Indent roles to align under company details, past the logo space */
}
.job-role-block:last-of-type {
    margin-bottom: 0;
}

.role-heading {
    margin-bottom: 8px;
}

.role-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #24292e;
    display: inline; /* Keep on same line as employment type if short */
}
body.dark-mode .role-title {
    color: #c9d1d9;
}

.employment-type-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2em 0.6em;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #ced4da;
}
body.dark-mode .employment-type-badge {
    background-color: #30363d;
    color: #adb5bd;
    border-color: #484f58;
}


.role-dates {
    font-size: 0.9rem;
    color: #6a737d;
    display: block; /* Ensure it's on its own line */
    margin-bottom: 15px;
}
body.dark-mode .role-dates {
    color: #8b949e;
}
.role-dates i {
    margin-right: 5px;
}

.role-description {
    font-size: 0.95rem;
    color: #424a51;
    line-height: 1.7;
}
body.dark-mode .role-description {
    color: #b1bac4;
}

.role-description strong { /* For sub-headings like "Training on Cyber Hygiene" */
    color: #24292e;
    font-weight: 600;
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
}
body.dark-mode .role-description strong {
    color: #c9d1d9;
}

.role-description ul {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}

.role-description ul li {
    margin-bottom: 8px;
    padding-left: 25px; /* Space for icon */
    position: relative;
}

.role-description ul li::before {
    /* Using a more subtle icon or character */
    content: "\2023"; /* Tri-bullet, or use Bootstrap Icons if preferred: "\F634" (dot) */
    /* font-family: 'bootstrap-icons'; */
    position: absolute;
    left: 5px;
    top: -1px;
    color: #0056b3; /* Accent color */
    font-size: 1.1em; /* Adjust size as needed */
    line-height: 1.5;
}
body.dark-mode .role-description ul li::before {
    color: #58a6ff;
}

/* Responsive adjustments for indentation */
@media (max-width: 767px) {
    .job-role-block {
        padding-left: 0; /* Remove indentation on smaller screens */
    }
    .entry-header {
        flex-direction: column; /* Stack logo and title on mobile */
        align-items: flex-start;
    }
    .entry-logo-placeholder {
        margin-bottom: 15px; /* Space between logo and title when stacked */
    }
    .experience-main-header h1 {
        font-size: 2.2rem;
    }
}

/* Fun call to action at the bottom */
.final-cta {
    text-align: center;
    margin-top: 40px;
    padding: 30px 15px;
    /* background-color: #f1f8ff; Light blueish tint */
    border-top: 1px solid #e1e4e8;
}
/* body.dark-mode .final-cta {
    background-color: #1c2128;
    border-top-color: #30363d;
} */
.final-cta p {
    font-size: 1.15rem;
    margin-bottom: 20px;
    color: #424a51;
}
body.dark-mode .final-cta p {
    color: #b1bac4;
}
.final-cta .btn {
    font-size: 1rem;
    padding: 10px 25px;
    border-radius: 6px;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.final-cta .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}