/* ===========================================
   RESPONSIVE & DYNAMIC ENHANCEMENTS
   Add this file AFTER main_1.css in your HTML
   <link rel="stylesheet" href="assets/css/responsive.css"/>
   =========================================== */

/* -------- SMOOTH SCROLLING -------- */
html {
    scroll-behavior: smooth;
}

/* -------- RESPONSIVE IMAGES -------- */
img {
    max-width: 100%;
    height: auto;
}

figure img {
    max-width: 100%;
    height: auto;
}

/* -------- RESPONSIVE TYPOGRAPHY -------- */
@media screen and (max-width: 768px) {
    /* Header title */
    #header .inner h1,
    #header .inner h1 a {
        font-size: 2rem !important;
    }
    
    /* Header subtitle */
    #header .inner p {
        font-size: 1.1rem !important;
        line-height: 1.5;
    }
    
    /* Section titles */
    h2[style*="font-size:30px"],
    h2[style*="font-size: 30px"] {
        font-size: 1.5rem !important;
    }
    
    h2[style*="font-size:25px"],
    h2[style*="font-size: 25px"] {
        font-size: 1.25rem !important;
    }
    
    h2[style*="font-size:20px"],
    h2[style*="font-size: 20px"] {
        font-size: 1.1rem !important;
    }
    
    h2[style*="font-size:18px"],
    h2[style*="font-size: 18px"] {
        font-size: 1rem !important;
    }
    
    /* Nav links */
    #nav a {
        font-size: 1rem !important;
    }
}

/* -------- RESPONSIVE NAVIGATION -------- */
@media screen and (max-width: 840px) {
    #nav ul {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    
    #nav ul li a {
        font-size: 1.1rem !important;
        padding: 0.5rem 1rem;
    }
    
    #nav ul ul {
        position: relative;
        background: rgba(0,0,0,0.3);
        border-radius: 8px;
        margin-top: 0.5rem;
    }
}

/* -------- RESPONSIVE BANNER/CONTENT SECTIONS -------- */
#banner,
section[id="banner"] {
    padding: 2rem;
}

@media screen and (max-width: 768px) {
    #banner,
    section[id="banner"] {
        padding: 1rem;
    }
    
    /* Fix margin on lists */
    ul[style*="margin-left:50px"],
    ul[style*="margin-left: 50px"] {
        margin-left: 1rem !important;
        padding-left: 1rem;
    }
    
    /* Fix paragraph margins */
    p[style*="margin: 0px 30px"] {
        margin: 0 1rem !important;
    }
}

/* -------- RESPONSIVE IMAGES WITH FLOAT -------- */
/* Make floated images stack on mobile */
@media screen and (max-width: 768px) {
    img[align="left"],
    figure img[align="left"] {
        float: none !important;
        display: block;
        margin: 0 auto 1.5rem auto !important;
        max-width: 280px;
    }
    
    figure {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    
    figcaption {
        text-align: center;
        font-size: 0.9rem;
        color: #666;
        margin-top: 0.5rem;
    }
    
    /* Award/Experience section images */
    img[style*="margin: 0px 30px"],
    img[style*="margin: 30px 30px"] {
        float: none !important;
        display: block;
        margin: 0 auto 1rem auto !important;
    }
}

/* -------- CLEARFIX FOR FLOATED CONTENT -------- */
section::after,
header::after {
    content: "";
    display: table;
    clear: both;
}

/* -------- RESPONSIVE LISTS -------- */
ul[style*="font-size:18px"] li,
ol[style*="font-size:18px"] li {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

@media screen and (max-width: 768px) {
    ul[style*="font-size:18px"],
    ol[style*="font-size:18px"] {
        font-size: 1rem !important;
    }
    
    ul[style*="font-size:18px"] li,
    ol[style*="font-size:18px"] li {
        margin-bottom: 1rem;
    }
}

/* -------- DYNAMIC HOVER EFFECTS -------- */
/* Links */
a {
    transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
    opacity: 0.85;
}

/* Images */
figure img,
section img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

figure:hover img,
section img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Section hover effect */
section[id="banner"] > section {
    transition: transform 0.3s ease;
}

/* -------- FADE-IN ANIMATION -------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.6s ease forwards;
}

/* Apply to sections on load */
#about,
#education,
#awards,
#research,
#industry,
#teaching,
#outreach {
    animation: fadeInUp 0.6s ease forwards;
}

/* Stagger effect */
#education { animation-delay: 0.1s; }
#awards { animation-delay: 0.15s; }
#research { animation-delay: 0.2s; }
#industry { animation-delay: 0.25s; }
#teaching { animation-delay: 0.3s; }
#outreach { animation-delay: 0.35s; }

/* -------- HEADER ENHANCEMENTS -------- */
#header {
    transition: background 0.3s ease;
}

#header .inner {
    padding: 2rem;
}

@media screen and (max-width: 768px) {
    #header .inner {
        padding: 1rem;
    }
    
    #header hr {
        margin: 1rem 0;
    }
}

/* -------- FOOTER RESPONSIVE -------- */
#footer {
    padding: 2rem 1rem;
}

#footer .copyright {
    text-align: center;
}

@media screen and (max-width: 768px) {
    #footer .menu li {
        display: block;
        padding: 0.25rem 0;
        border: none;
    }
}

/* -------- EXPERIENCE/AWARD ITEM LAYOUT -------- */
.experience-item,
.award-item,
.edu-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    clear: both;
}

.experience-item img,
.award-item img,
.edu-item img {
    max-width: 130px;
    height: auto;
    flex-shrink: 0;
}

.exp-content,
.award-content {
    flex: 1;
    min-width: 0;
}

.exp-logo,
.award-logo,
.edu-logo {
    max-width: 130px;
    height: auto;
}

/* Profile figures */
.profile-figure {
    max-width: 400px;
    margin: 0 auto 2rem auto;
    text-align: center;
}

.profile-figure img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 4px;
}

.profile-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

@media screen and (min-width: 769px) {
    .profile-figure {
        float: left;
        margin: 0 2rem 1rem 0;
    }
}

@media screen and (max-width: 768px) {
    .experience-item,
    .award-item,
    .edu-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .experience-item img,
    .award-item img,
    .edu-item img,
    .exp-logo,
    .award-logo,
    .edu-logo {
        margin: 0 auto 1rem auto;
        max-width: 100px;
    }
    
    .exp-content,
    .award-content {
        text-align: left;
    }
    
    .profile-figure {
        max-width: 280px;
    }
}

/* -------- BETTER TOUCH TARGETS FOR MOBILE -------- */
@media screen and (max-width: 768px) {
    a {
        padding: 0.25rem 0;
        display: inline-block;
    }
    
    #nav a {
        padding: 0.75rem 1rem;
        display: block;
    }
}

/* -------- PREVENT HORIZONTAL SCROLL -------- */
body,
html {
    overflow-x: hidden;
}

#page-wrapper {
    overflow-x: hidden;
    width: 100%;
}

/* -------- RESPONSIVE BREAKPOINTS FOR CONTENT WIDTH -------- */
@media screen and (max-width: 1200px) {
    .container {
        padding: 0 2rem;
    }
}

@media screen and (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    section[id="banner"] {
        margin: 0;
    }
}

@media screen and (max-width: 480px) {
    /* Extra small screens */
    #header .inner h1 a {
        font-size: 1.75rem !important;
    }
    
    #header .inner p {
        font-size: 1rem !important;
    }
    
    h2[style*="font-size:30px"] {
        font-size: 1.25rem !important;
    }
    
    body {
        font-size: 14px;
    }
}

/* -------- SUBTLE SCROLL INDICATOR -------- */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* -------- BETTER LINE HEIGHT FOR READABILITY -------- */
p, li, h2 {
    line-height: 1.7;
}

/* -------- PRINT STYLES -------- */
@media print {
    #nav,
    #header {
        position: relative;
    }
    
    img {
        max-width: 200px;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}