/* General Page Styling */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #222; /* Dark grey background */
    color: #fff; /* White text */
}

/* Header with search bar and logo img */
header {
    position: sticky;
    top: 0;
    background-color: #a72c2c;
    padding: 10px 0;
    text-align: center;
    z-index: 1000;
}

/* Logo pinned to top-left */
header .logo {
    position: absolute;
    top: 10px;
    left: 5vw;      /* moves proportionally with viewport width */
    width: 7.5vw;     /* scales with viewport width */
    max-width: 200px;
    min-width: 100px;
    height: auto;    /* maintains aspect ratio */
}

/* Stack title + search bar */
.header-content {
    display: inline-block; /* keeps content centered */
}

/* Adjust title and search bar spacing */
header h1 {
    margin: 5px 0;
}

/* Search bar styling */
#searchBar {
    width: 60%;
    padding: 6px;        /* slimmer bar */
    font-size: 14px;     /* slightly smaller text */
    margin-top: 5px;     /* reduce gap below heading */
}

/* Search results dropdown */
#searchResults {
    list-style: none;
    margin: 5px auto;
    padding: 0;
    max-width: 20%;
    background: #555353;
    border-radius: 5px;
}
#searchResults li {
    padding: 10px;
    cursor: pointer;
}
#searchResults li:hover {
    background: #b4b2b2;
}

/* Hero / Parallax Section */
.hero {
    height: 400px; /* Adjust height to what looks good */
    background-image: url("Photos/HeroBanner.jpg"); /* Replace with your image */
    background-size: cover;        /* Cover full section */
    background-position: center;   /* Keep image centered */
    background-attachment: fixed;  /* Key for parallax effect */
}

/* Team Member Cards */
.team-member {
    display: flex;
    align-items: center;
    background: #333;
    margin: 25px auto;
    padding: 20px;
    border-radius: 10px;
    max-width: 1400px;
}

/* Team Member Photo */
.team-member img {
    width: 150px;
    height: 150px;
    border-radius: 50%;        /* Start cropped as a circle */
    object-fit: cover;         /* Fill the circle nicely */
    margin-right: 100px;
    margin-left: 30px;
    transition: all 0.4s ease; /* Smooth transition */
    cursor: pointer;
}

/* Hover effect: expand to rectangle */
.team-member img:hover {
    width: 200px;     /* Make it about twice as big */
    height: auto;     /* Keep natural aspect ratio */
    border-radius: 0; /* Remove circle crop */
    transform: scale(1.2); /* Extra zoom for dramatic effect */
    z-index: 10;      /* Keep image above text while hovered */
    padding-top: 20px;     /* Small padding for better look */
}

/* roster section separator */
.roster-heading {
    text-align: center;
    background: #444;       /* dark grey strip */
    color: #ffcc00;         /* gold text */
    padding: 15px;
    margin: 25px 0 20px;
    font-size: 2rem;
    border-radius: 5px;
    letter-spacing: 2px;
}

/* Info section */
.info h2 {
    font-size: 1.5rem;
    margin: 0 0 10px;
    color: #ffcc00; /* Gold accent color for names */
    transition: font-size 0.4s ease;
}

/* Info section (name, strengths, about) */
.info {
    transition: all 0.4s ease;   /* Smooth changes */
}

/* Info section extended for text section */
.info p {
    font-size: 1rem;   /* Default paragraph size */
    line-height: 1.4;
    transition: font-size 0.4s ease;
}

/* When the image is hovered, grow the text too */
.team-member img:hover ~ .info h2 {
    font-size: 1.8rem;   /* Bigger name */
    padding: 10px;     /* Small padding for better look */
}
.team-member img:hover ~ .info p {
    font-size: 1.2rem; /* Bigger paragraph text */
    padding-top: 5px; /* Small padding for better look */
}

/* ---------- Fullscreen Image Popup ---------- */
#imageModal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000; /* Above everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9); /* Dark overlay */
    justify-content: center;
    align-items: center;
}

#imageModal img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 20px #000;
}

#imageModal span {
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 40px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

/* ---------- Fullscreen Bar and about me section ---------- */
/* Bottom Red Bar */
.bottom-bar {
    width: 100%;
    height: 20px;           /* thickness of the bar */
    background-color: #a72c2c; /* same red as header */
}

/* About Me / Resume Section */
.about-section {
    background-color: #fff;
    color: #222;
    padding: 20px 50px;
    max-width: 100%;
}

.about-container {
    display: flex;
    flex-wrap: wrap;       /* allows stacking on smaller screens */
    align-items: center;
    gap: 60px;             /* space between image and text */
}

.about-photo img {
    width: 300px;          /* adjust size as needed */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.about-description {
    flex: 1;               /* take remaining width */
}

.about-description h2 {
    text-align: left;
    color: #a72c2c;        /* match header red */
    font-size: 2rem;
    margin-bottom: 20px;
}

.about-description p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* About Me Photo Modal */
#aboutModal {
    display: none; /* hidden by default */
    position: fixed;
    z-index: 3000; /* above everything else */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9); /* dark overlay */
    justify-content: center;
    align-items: center;
}

#aboutModal img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 20px #000;
}

#closeAboutModal {
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 40px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}