/* Custom Modern Styling for Ahmed Amir's Portfolio */

/* White Background Theme */
body {
    background: #ffffff !important;
    color: #333333 !important;
}

/* Ensure all text is dark and visible */
h1, h2, h3, h4, h5, h6 {
    color: #333333 !important;
}

p, span, div {
    color: #333333 !important;
}

/* Update wrapper text colors */
.wrapper.style1,
.wrapper.style2,
.wrapper.style3,
.wrapper.style4 {
    color: #333333 !important;
}

.wrapper.style1 h1,
.wrapper.style1 h2,
.wrapper.style1 h3,
.wrapper.style1 h4,
.wrapper.style1 h5,
.wrapper.style1 h6,
.wrapper.style2 h1,
.wrapper.style2 h2,
.wrapper.style2 h3,
.wrapper.style2 h4,
.wrapper.style2 h5,
.wrapper.style2 h6,
.wrapper.style3 h1,
.wrapper.style3 h2,
.wrapper.style3 h3,
.wrapper.style3 h4,
.wrapper.style3 h5,
.wrapper.style3 h6,
.wrapper.style4 h1,
.wrapper.style4 h2,
.wrapper.style4 h3,
.wrapper.style4 h4,
.wrapper.style4 h5,
.wrapper.style4 h6 {
    color: #333333 !important;
}

.wrapper.style1 p,
.wrapper.style2 p,
.wrapper.style3 p,
.wrapper.style4 p {
    color: #555555 !important;
}

/* Update background image to show just a small cut */
body.landing #page-wrapper {
    background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url("../../images/banner.jpg");
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0;
}

/* Adjust banner background for better visibility */
#banner {
    background-image: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.7)), url("../../images/banner.jpg");
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Enhanced Hero Section */
#banner .subtitle {
    font-size: 1.2em;
    margin-bottom: 2em;
    line-height: 1.6;
}

#banner .highlight {
    color: #0066cc;
    font-weight: 600;
    display: block;
    margin-top: 0.5em;
}

#banner .actions.special {
    gap: 1em;
    margin-top: 2em;
}

#banner .actions.special li {
    margin: 0;
}

/* About Section Enhancements */
.about-content {
    margin-top: 3em;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2em;
    margin-top: 2em;
}

.about-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 2em;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.about-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.95);
    border-color: #0066cc;
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}

.about-card h3 {
    color: #0066cc;
    margin-bottom: 1em;
    font-size: 1.1em;
}

/* Experience Section Enhancements */
.experience-timeline {
    margin-top: 3em;
}

.experience-item {
    display: flex;
    gap: 2em;
    margin-bottom: 3em;
    padding: 2em;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.experience-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 102, 204, 0.3);
    box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
}

.experience-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
}

.experience-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.experience-content {
    flex: 1;
}

.experience-header {
    margin-bottom: 1em;
}

.experience-header h3 {
    color: #0066cc;
    margin-bottom: 0.5em;
    font-size: 1.3em;
}

.role, .duration, .location {
    display: inline-block;
    background: rgba(0, 102, 204, 0.1);
    color: #0066cc;
    padding: 0.3em 0.8em;
    border-radius: 20px;
    font-size: 0.8em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
}

.experience-description {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1em;
    font-style: italic;
}

.achievements {
    margin-bottom: 1.5em;
}

.achievements li {
    margin-bottom: 0.5em;
    position: relative;
    padding-left: 1.5em;
}

.achievements li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #0066cc;
    font-weight: bold;
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.tech-tag {
    background: rgba(0, 102, 204, 0.1);
    color: #0066cc;
    padding: 0.3em 0.8em;
    border-radius: 15px;
    font-size: 0.8em;
    border: 1px solid rgba(0, 102, 204, 0.3);
}

/* Projects Section Enhancements */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2em;
    margin-top: 3em;
}

.project-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 2em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.project-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.95);
    border-color: #0066cc;
    box-shadow: 0 10px 30px rgba(0, 102, 204, 0.15);
}

.project-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0066cc, #004499);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.project-card:hover:before {
    transform: scaleX(1);
}

.project-icon {
    font-size: 2.5em;
    color: #0066cc;
    margin-bottom: 1em;
    text-align: center;
}

.project-content h3 {
    color: #333333;
    margin-bottom: 1em;
    font-size: 1.2em;
}

.project-description {
    color: #555555;
    margin-bottom: 1.5em;
    line-height: 1.6;
}

.project-features {
    margin-bottom: 1.5em;
}

.project-features li {
    margin-bottom: 0.5em;
    position: relative;
    padding-left: 1.5em;
    color: #666666;
}

.project-features li:before {
    content: "▶";
    position: absolute;
    left: 0;
    color: #0066cc;
    font-size: 0.8em;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.tech-badge {
    background: rgba(0, 102, 204, 0.1);
    color: #0066cc;
    padding: 0.3em 0.8em;
    border-radius: 15px;
    font-size: 0.8em;
    border: 1px solid rgba(0, 102, 204, 0.3);
    transition: all 0.3s ease;
}

.tech-badge:hover {
    background: rgba(0, 102, 204, 0.2);
    transform: scale(1.05);
}

/* Skills Section Enhancements */
.skills-container {
    margin-top: 3em;
}

.skills-category {
    margin-bottom: 3em;
    background: rgba(255, 255, 255, 0.03);
    padding: 2em;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.skills-category h3 {
    color: #0066cc;
    margin-bottom: 1.5em;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.skills-grid {
    display: grid;
    gap: 1em;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 1em;
}

.skill-name {
    min-width: 100px;
    color: #333333;
    font-weight: 600;
}

.skill-level {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.skill-bar {
    height: 100%;
    background: linear-gradient(90deg, #0066cc, #004499);
    border-radius: 4px;
    transition: width 1s ease;
    animation: fillBar 2s ease-out;
}

@keyframes fillBar {
    from { width: 0; }
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
}

.language-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
}

.language-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.language-name {
    color: #333333;
    font-weight: 600;
}

.language-level {
    color: #0066cc;
    font-size: 0.9em;
    background: rgba(0, 102, 204, 0.1);
    padding: 0.3em 0.8em;
    border-radius: 15px;
}

/* Contact Section Enhancements */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    margin-top: 3em;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1.5em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: #0066cc;
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.15);
}

.contact-item i {
    font-size: 1.5em;
    color: #0066cc;
    min-width: 30px;
}

.contact-item h3 {
    color: #333333;
    margin-bottom: 0.5em;
    font-size: 1.1em;
}

.contact-item p {
    color: #555555;
    margin: 0;
}

.contact-item a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: #004499;
}

.contact-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-actions h3 {
    color: #333333;
    margin-bottom: 1.5em;
    text-align: center;
}

/* Footer Enhancements */
.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    margin-bottom: 2em;
}

.footer-social h3 {
    color: #0066cc;
    margin-bottom: 1em;
}

.footer-info p {
    color: #666666;
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.footer-info p:first-child {
    font-style: italic;
    color: #555555;
}

/* Enhanced Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Apply animations to elements */
.about-card {
    animation: fadeInUp 0.6s ease-out;
}

.experience-item {
    animation: fadeInLeft 0.6s ease-out;
}

.project-card {
    animation: fadeInUp 0.6s ease-out;
}

.contact-item {
    animation: fadeInRight 0.6s ease-out;
}

/* Responsive Design */
@media screen and (max-width: 980px) {
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2em;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2em;
        text-align: center;
    }
    
    .experience-item {
        flex-direction: column;
        text-align: center;
    }
    
    .experience-image {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 736px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .language-grid {
        grid-template-columns: 1fr;
    }
    
    .tech-tags {
        justify-content: center;
    }
    
    .skills-category {
        padding: 1.5em;
    }
    
    .project-card {
        padding: 1.5em;
    }
    
    .about-card {
        padding: 1.5em;
    }
}

/* Smooth scrolling enhancement */
html {
    scroll-behavior: smooth;
}

/* Enhanced button hover effects */
.button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.button:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.button:hover:before {
    left: 100%;
}

/* Enhanced focus states for accessibility */
.button:focus,
.contact-item a:focus {
    outline: 2px solid #00ffcc;
    outline-offset: 2px;
}

/* Loading animation for skill bars */
.skill-bar {
    animation: fillBar 2s ease-out;
}

/* Enhanced typography */
.intro-text {
    font-size: 1.1em;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

/* Improved spacing */
.wrapper {
    padding: 6em 0;
}

.wrapper .inner {
    max-width: 1200px;
}

/* Enhanced visual hierarchy */
header.major h2 {
    position: relative;
    margin-bottom: 1em;
}

header.major h2:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #0066cc, #004499);
    border-radius: 2px;
}

/* Additional visibility fixes for white background */
.wrapper.style1 strong,
.wrapper.style1 b,
.wrapper.style2 strong,
.wrapper.style2 b,
.wrapper.style3 strong,
.wrapper.style3 b,
.wrapper.style4 strong,
.wrapper.style4 b {
    color: #333333 !important;
}

.wrapper.style1 header p,
.wrapper.style2 header p,
.wrapper.style3 header p,
.wrapper.style4 header p {
    color: #555555 !important;
}

/* Fix experience section text */
.experience-description {
    color: #555555 !important;
}

.experience-header h3 {
    color: #0066cc !important;
}

/* Fix project section text */
.project-content h3 {
    color: #333333 !important;
}

.project-description {
    color: #555555 !important;
}

/* Fix skills section text */
.skill-name {
    color: #333333 !important;
}

.skills-category h3 {
    color: #0066cc !important;
}

/* Fix contact section text */
.contact-item h3 {
    color: #333333 !important;
}

.contact-item p {
    color: #555555 !important;
}

.contact-actions h3 {
    color: #333333 !important;
}

/* Fix footer text */
.footer-social h3 {
    color: #0066cc !important;
}

.footer-info p {
    color: #666666 !important;
}

/* Fix any remaining light text */
.intro-text {
    color: #555555 !important;
}

/* Ensure all list items are visible */
ul li, ol li {
    color: #333333 !important;
}

/* Fix any remaining wrapper text */
.wrapper p {
    color: #555555 !important;
}

.wrapper li {
    color: #333333 !important;
}

/* Fix hero button visibility */
#banner .button {
    background: #0066cc !important;
    color: #ffffff !important;
    border: 2px solid #0066cc !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

/* Update contact section buttons */
#contact .button {
    background: #0066cc !important;
    color: #ffffff !important;
    border: 2px solid #0066cc !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

#contact .button:hover {
    background: #004499 !important;
    border-color: #004499 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}

#contact .button.primary {
    background: #0066cc !important;
    color: #ffffff !important;
    border: 2px solid #0066cc !important;
}

#contact .button.primary:hover {
    background: #004499 !important;
    border-color: #004499 !important;
    color: #ffffff !important;
}

#banner .button:hover {
    background: #004499 !important;
    border-color: #004499 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}

#banner .button.primary {
    background: #0066cc !important;
    color: #ffffff !important;
    border: 2px solid #0066cc !important;
}

#banner .button.primary:hover {
    background: #004499 !important;
    border-color: #004499 !important;
    color: #ffffff !important;
}

/* Ensure hero text is visible */
#banner h1 {
    color: #333333 !important;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8) !important;
}

#banner p {
    color: #555555 !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
}

/* Hero button consistency improvements - copy contact button style */
#banner .button {
    background: #0066cc !important;
    color: #ffffff !important;
    border: 2px solid #0066cc !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

#banner .button:hover {
    background: #004499 !important;
    border-color: #004499 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}

#banner .button.primary {
    background: #0066cc !important;
    color: #ffffff !important;
    border: 2px solid #0066cc !important;
}

#banner .button.primary:hover {
    background: #004499 !important;
    border-color: #004499 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}

/* Tagline animation styles */
.hero-tagline {
    font-size: 1.2em;
    font-weight: 500;
    color: #555555;
    margin-bottom: 1.5em;
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.5s forwards;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.hero-tagline .highlight {
    color: #0066cc;
    font-weight: 600;
    position: relative;
    display: inline-block;
}

.hero-tagline .highlight::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #0066cc, #004499);
    animation: underlineDraw 2s ease-in-out 1.5s forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes underlineDraw {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

/* Make hamburger menu lines blue */
#menuToggle {
    color: #0066cc !important;
}

#menuToggle:before,
#menuToggle:after {
    background: #0066cc !important;
}

#menuToggle span {
    background: #0066cc !important;
}

/* Fix sticky header styling - transparent throughout */
#header {
    background: transparent !important;
    backdrop-filter: none;
    border-bottom: none;
}

#header.alt {
    background: transparent !important;
    backdrop-filter: none;
    border-bottom: none;
}

/* Fix header links color - white throughout */
#header nav ul li a {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

#header nav ul li a:hover {
    color: #0066cc !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

/* Fix header logo/title - white throughout */
#header h1 {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

#header h1 a {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}