@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Nunito:wght@400;600;700&display=swap');
:root {
    --primary-dark: #011a27;
    --primary-light: #e9c673;
    --text-on-dark: #fff;
    --text-on-light: #222;
    --secondary-dark-green: #184d47;   /* deep, dark green (best color EVER) */
    --secondary-light-blue: #b3e5fc;   /* soft, light blue */
    --accent-green: #4caf50;           /* vibrant green accent */
    --accent-blue: #aee2fd;            /* strong blue accent */
    --background-light: #f5faff;       /* very light blue background */
    --border-light: #dbeafe;           /* pale blue border */
    --border-dark: #2e3c43;            /* muted dark border */
    --nav-height: 5vh;
    --accordion-transition: 240ms cubic-bezier(.4,0,.2,1);
}
html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

svg {
  background-color: transparent !important;
  isolation: isolate;
}

body.home {
  position: relative;
  margin: 0;
  overflow-x: hidden;
}

body.home::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/homePage/WebsiteBG1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}


body.salmon {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* Adjust this: more height = more gradual darkening */
  background-color: #001220; /* Deep navy instead of pure black */
}

body.salmon::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  
  /* STRETCHED GRADIENT: We pushed the darkness much further down */
  background-image: 
    linear-gradient(
      to bottom, 
      rgba(0, 212, 255, 0.3) 0%,    /* Surface: Bright & Transparent */
      rgba(0, 100, 200, 0.5) 40%,   /* Mid-depth: Still very blue/visible */
      rgba(0, 30, 70, 0.8) 85%,     /* Deep: Finally starts getting dark */
      rgba(0, 5, 15, 1) 100%        /* Bottom: Dark Navy transition */
    ),
    url('assets/StacysPage/wildSalmon2.jpg');

    filter: blur(8px);
    transform: scale(1.1);
    
  background-size: 100% 100%, cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}



body.standard{
    margin: 0;
    background: linear-gradient(to bottom, var(--primary-dark), #000000);
    min-height: 100vh;
}

body.news{
  margin: 0;
  background: linear-gradient(to bottom, var(--secondary-dark-green), #000000);
  min-height: 100vh;
}

header {
    background: var(--primary-dark);
    color: var(--text-on-dark);
    padding: 1.0rem 3.0rem;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Spread logo left, nav right */
    position: sticky;
    top: 0;
    z-index: 1000;
}





/* new */

.nav{
  display:flex;
  align-items:center;
  gap:0.5rem;
  flex: 1 1 auto;
  min-width: 0; /* enables child truncation/overflow detection */
}

.nav-primary{
  display:flex;
  gap: 1rem;
  align-items:center;
  white-space:nowrap; /* keep each button as single unit for proper measurement */
  overflow: visible;  /* measurement uses scrollWidth/clientWidth */
  min-width: 0; /* important so clientWidth shrinks on small screens */
  padding-left: 3rem;
  flex: 1 1 auto;
}

.nav-link {
  display: inline-flex;            
  align-items: center;             
  justify-content: center;         
  text-align: center;              
  color: var(--text-on-light);
  background: var(--text-on-dark);
  text-decoration: none;
  font-family: 'Lora', serif;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 1px;
  padding: 0.3rem 1rem;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

.nav-link:hover,
.nav-link:focus {
    background: var(--primary-light);
    color: var(--primary-dark);
    outline: none;
}






/* Nav toggle (hamburger) */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  font-size:3rem;
  height:5vh;
  width:5vw;
  border-radius:8px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  color: var(--text-on-dark);
}

/* Dropdown / accordion panel — default collapsed and visually hidden.
   It stays detached from the header (position:fixed) so it won't be clipped.
   The panel will only expand when the .open class is added in JS. */
.nav-overflow,
.nav-accordion {
  position: fixed;                 /* detach from header's containing block */
  top: calc(var(--nav-height) + 3rem); /* just below header */
  right: 1rem;
  left: 1rem;
  z-index: 9999;
  background: white;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: 8px;
  padding: 0.25rem;
  overflow: hidden;                /* keep collapsed when closed */
  max-height: 0;                   /* collapsed */
  opacity: 0;
  pointer-events: none;
  transition:
    max-height var(--accordion-transition),
    opacity 160ms linear;
}

/* Open state: expand (acts like an accordion). We use a large max-height so the
   panel can grow to fit content. If content is extremely long, internal elements
   can still scroll (see .nav-overflow-list). */
.nav-overflow.open,
.nav-accordion.open {
  max-height: 1000px; /* large enough to fit typical nav lists */
  opacity: 1;
  pointer-events: auto;
}

/* Storage list (used by balancing code). This is the VISIBLE menu:
   it contains the overflowed/missing items and is scrollable if very tall. */
.nav-overflow-list{
  background: white;
  border-radius: 8px;
  padding: 0.5rem;
  display:flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 160px;

  max-height: calc(100vh - var(--nav-height) - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Display menu (unused duplicate) kept hidden to avoid double menus */
.nav-overflow-menu{
  display: none;
}

/* Overflowed items are presented like nav links */
.nav-overflow-list .nav-link{
  display:block;
  padding:0.6rem 0.75rem;
  border-radius:6px;
}

/* Small screen aesthetics: group overflow/menu */
@media (max-width: 520px){
  .nav-overflow{
    right: 0.5rem;
    left: 0.5rem;
  }
}

/* Desktop: hide hamburger as an aesthetic fallback (JS controls real visibility) */
@media (min-width: 900px){
  .nav-toggle{ display:none; }
}








.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.logo-container:hover {
    opacity: 0.9;
}

.logo-container:visited {
    color: inherit;
}

.logo {
    width: clamp(100px, 20vw, 100px);
    height: auto;
    margin-right: 1rem;
}


.site-title {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(#fff);
}

main {
    /* display: flex; */
    justify-content: center;
    align-items: flex-start;
    min-height: 80vh;
    padding-top: 0;
}


.slideshow-section {
  width: 100vw;
  position: relative;
}

.slideshow {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  background: var(--primary-dark);
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

/* Each slide occupies full space but centers its content */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: black;
  opacity: 0;
  transition: scale(1.1) opacity 1s ease;
}

.slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

@keyframes zoomEffect {
  0% {
    transform: scale(1);
  }
  100% {
    /* Scale to 1.1 (10% zoom) - keep it subtle for elegance */
    transform: scale(1.1); /* don't forget to change the transition above if you zoom in more.*/
  }
}

.slide img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1);
  transition: transform 6s ease-out;
}

.slide.active img {
  animation: zoomEffect 6s ease-out forwards;
}

/* Overlay sits absolutely over the image, centered */
.mission-overlay-Home {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  padding: 1rem 2rem;
  border-radius: 8px;
  z-index: 3;
}

.mission-overlay-Home h1 {
    margin: 0 0 1rem 0;
    font-size: clamp(1.25rem, 3vw + 0.5rem, 2rem);
    font-family: 'Lora', serif;
    letter-spacing: 1px;
    color: var(--text-on-dark, #fff);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

.mission-overlay-Home p {
    font-size: clamp(0.8rem, 2vw + 0.2rem, 1rem);
    font-family: 'Lora', serif;
    font-weight: 800;
    color: var(--text-on-dark);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    margin: 0 auto;
    box-sizing: border-box;
    padding-bottom: 5%;
    padding-left: 5%;
    padding-right: 5%;

}


/* Navigation buttons */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: white;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 50%;
  z-index: 3;
  transition: background 0.3s;
}

.prev:hover, .next:hover {
  background: rgba(0,0,0,0.7);
}

.prev { left: 10px; }
.next { right: 10px; }




.landing {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
}

.mission-overlay {
  position: absolute;
  font-size:  2rem;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: rgba(0,0,0,0.4);
}

.mission-overlay h1 {
    margin: 0 0 1rem 0;
    font-size: 4 rem;
    font-family: 'Lora', serif;
    letter-spacing: 1px;
    color: var(--text-on-dark, #fff);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

.mission-overlay p {
    font-size: 1.5rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    color: var(--text-on-dark);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 5%;
    padding-right: 5%;

}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff00;
    color: var(--primary-light);
    border: none;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(6,70,117,0.15);
}

.prev:hover, .next:hover {
    background: var(--primary-dark);
    color: var(--text-on-dark);
}

.prev { left: 10px; }
.next { right: 10px; }

/* Ditching accordion menus, let's see how Emma's idea works here... 
.. Long story short, it looks amazing! Thanks Emma! :) */


.feature-section1,
.feature-section2 {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  width: 100%;
  box-sizing: border-box;
  margin: auto;
}

.feature-section1 {
  background: var(--primary-dark);
}

.feature-section2 {
  background: linear-gradient(
    to left,
    var(--primary-light) 0%,
    var(--primary-light) 5%,
    rgba(0,112,243,0.0) 100%
  );
}

.container1,
.container2 {
  max-width: 100vw;  
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem 0;
  margin-inline: auto;
}

/* Feature image */
.feature-image img {
  max-width: 500px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: var(--text-on-dark) 4px solid;
  box-shadow: 10px 20px 80px rgba(0,0,0,0.12);
}

/* image resizing */
.feature-content {
  flex: 1;
}

.feature-content h2 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: 'Lora', serif;
  font-size: 3.5rem;
  color: var(--text-on-dark);
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

.feature-content .subheading {
  font-family: 'Nunito', sans-serif;
  font-size: 1.5rem;
  color: var(--text-on-dark);
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

/* CTA button */
.cta-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--accent-blue);
  color: var(--text-on-light);
  text-decoration: none;
  font-family: 'Lora', serif;
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: bold;
  transition: background 0.2s;
}

.cta-button:hover {
  background: var(--text-on-dark);
}

/* Responsive layout */
@media (max-width: 768px) {
  .feature-section1,
  .feature-section2 {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1rem;
  }

  .container1,
  .container2 {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
  }

  .feature-content h2 {
    font-size: 2.2rem;
  }

  .feature-content .subheading {
    font-size: 1.2rem;
  }

  .feature-image img {
    max-width: 90%;
    margin: 0 auto;
  }

  .cta-button {
    font-size: 1.2rem;
    padding: 0.6rem 1.2rem;
  }
}


.news-feed-section {
    max-width: 80vw;
    margin: 2rem auto;
    background: linear-gradient(
    to right,
    #fff 0%,
    #fff 20%,
    rgba(0,112,243,0.0) 100%
  );
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(6,70,117,0.12);
    padding: 2rem;
}

.news-feed-section h2 {
    color: var(--primary-dark);
    margin-bottom: 1.5rem;
    font-size: 2rem;
    letter-spacing: 1px;
}

.news-feed {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.news-item {
    border-left: 5px solid var(--primary-light);
    padding-left: 1rem;
}

.news-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    color: var(--primary-dark);
}

.news-title a {
    color: var(--primary-dark);
    font-family: 'Lora', serif;
    text-decoration: none;
    transition: color 0.2s;
}

.news-title a:hover {
    color: var(--primary-light);
}

.news-summary {
    margin: 0;
    color: #222;
    font-size: 1rem;
    font-family: 'Nunito', sans-serif;
}








/* research styles /*
/* This prevents padding from expanding element width */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Background Layer */
#ascii-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    font-family: monospace;
    font-size: 16px;
    white-space: pre;
    color: var(--text-on-dark);
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    line-height: 1;
}

/* Main Card Container */
.research-projects {
  /* Glassmorphism Effect */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  /* Sizing - using min() ensures it never overflows desktop either */
  width: min(100% - 2rem, 1000px); 
  margin: 3rem auto;
  padding: 2.5rem;
  
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Hover Effect for the whole card */
.research-projects:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  border-color: var(--accent-blue);
  background: rgba(255, 255, 255, 0.95);
}

/* The Grid System for Content */
.project-details {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Split 50/50 on Desktop */
  gap: 2.5rem;
  align-items: center;
  width: 100%;
}

/* --- The Zig-Zag Pattern (Desktop Only) --- */
section:nth-of-type(even) .project-details .image-container {
  order: 2; 
}
section:nth-of-type(even) .project-details .text-content {
  order: 1; 
}

/* --- Image Styling --- */
.image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.image-container img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border: 4px solid var(--primary-dark); 
}

.image-container:hover img {
  transform: scale(1.02);
}

/* --- Text Area Styling --- */
.text-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Ensure text doesn't overflow horizontally */
  min-width: 0; 
}

.project-title h2 {
  font-family: 'Lora', serif;
  font-size: 2rem;
  margin: 0;
  color: var(--primary-dark);
  line-height: 1.2;
  text-align: left;
}

.project-description p {
  font-family: 'Nunito', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  margin: 0;
  text-align: left;
}

/* --- Contributors --- */
.contributors {
  display: flex;
  gap: 10px;
  margin: 0.5rem 0;
  justify-content: flex-start;
  flex-wrap: wrap; /* Safety for small screens */
}

.contributors .author-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.contributors a:hover .author-image {
  transform: scale(1.1);
  z-index: 2;
}

/* =========================================
   MOBILE RESPONSIVENESS
   ========================================= */

/* Tablet & Standard Mobile (max-width: 768px) */
@media (max-width: 768px) {
  .research-projects {
    width: 92%; 
    margin: 2rem auto;
    padding: 1.5rem; /* Reduced padding */
    max-width: none;
  }

  .project-details {
    grid-template-columns: 1fr; /* Stack vertically */
    gap: 1.5rem;
  }

  /* DISABLE ZIG-ZAG: Ensure consistent order on mobile */
  section:nth-of-type(even) .project-details .image-container {
    order: unset; 
  }
  section:nth-of-type(even) .project-details .text-content {
    order: unset; 
  }
}


































/* --- Join Us Section Container --- */
.joinus-section {
    max-width: 1100px;
    margin: 3rem auto;
    padding: 2.5rem;
    background: var(--secondary-dark-green);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(6,70,117,0.12);
    text-align: center;
}

/* --- Top Menu / Categories --- */
.opportunity-menus {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.opportunity-menu {
    flex: 1 1 300px; /* Flexible width */
    background: var(--primary-dark);
    padding: 2rem 1.5rem;
    border-radius: 20px;
    color: var(--text-on-dark);
    box-shadow: 0 2px 8px rgba(6,70,117,0.10);
    min-width: 275px;
    text-align: left;
}

.opportunity-menu h2 {
    color: var(--primary-light);
    font-family: 'Lora', serif;
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
    padding-top: 0; /* Adjusted */
    text-align: center;
}

.opportunity-menu p {
    color: var(--primary-light);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    margin-bottom: 1.2rem;
}

.opportunity-menu ul {
    list-style: disc inside;
    padding-left: 0;
    margin: 0;
}

.opportunity-menu li {
    margin-bottom: 0.75rem;
    font-size: 1.08rem;
}

/* --- Opportunity Boxes (Grid Layout) --- */
.opportunity-boxes {
    display: grid;
    /* Smart grid that fits as many columns as possible */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1.6rem;
    position: relative; /* Context for z-index */
}

/* Individual Card Styling */
.opportunity-box {
    position: relative; /* Default state */
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(6,70,117,0.09);
    padding: 1.5rem 1.25rem;
    transition: all 0.2s ease;
    cursor: pointer;
    color: var(--text-on-light);
    
    /* Ensure height is determined by content */
    height: fit-content; 
    transform-origin: top center;
}

/* Hover State (Only applies when NOT open) */
.opportunity-box:not(.is-open):hover {
    box-shadow: 0 4px 16px rgba(6,70,117,0.19);
    transform: translateY(-2px) scale(1.02);
    background: var(--primary-light);
}

/* Image & Text Styling */
.opportunity-box img {
    display: block;
    margin: 0 auto 1rem auto;
    width: 100%;
    max-width: 85%;
    height: auto;
    object-fit: contain;
}

/* Using your custom tags span1/span2 */
.opportunity-box span1 {
    font-family: 'Lora', serif;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    display: block;
    padding-bottom: 0.4rem;
    line-height: 1.2;
    color: var(--text-on-light);
}

.opportunity-box span2 {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    display: block;
    padding-bottom: 0.8rem;
    color: #666;
}

/* Target the actual link wrapper */
.box-main-link {
    text-decoration: none !important; /* Force removal of underline */
    color: inherit;       /* Inherit the dark color from parent, not blue */
    display: block;       /* Ensures the link fills the width */
}

/* --- The Dropdown Logic --- */

/* 1. Hide details by default */
.opportunity-box ul {
    display: none; /* Hidden initially */
    font-family: 'Nunito', sans-serif;
    list-style: disc inside;
    padding-left: 0;
    text-align: left;
    margin: 1rem auto 0;
    width: 90%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.opportunity-box li {
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}

/* --- THE EXPANDED STATE (Triggered via JS) --- */
/* This handles the "Overlap" requirement */

.opportunity-box.is-open {
    position: absolute; /* Pops out of the grid flow */
    top: 0; left: 0;
    width: 100%; /* Match original width */
    z-index: 100; /* Float above other items */
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    background: #fff;
    border: 1px solid var(--primary-light);
    transform: scale(1.05); /* Slight pop effect */
}

/* Show the details when open */
.opportunity-box.is-open ul {
    display: block;
    opacity: 1;
}

/* 1. Make the button span the full width of the card */
.expand-btn {
    width: 100%;             /* Forces the button to be as wide as the box */
    background: transparent; /* No background color by default */
    border: none;            /* Removes default gray button border */
    cursor: pointer;         /* Shows hand icon on hover */
    padding: 15px 0;         /* Adds vertical height (easy to tap) */
    margin-top: 10px;        /* Adds space between text and arrow */
    
    /* Centers the arrow inside the wide button */
    display: flex;
    justify-content: center; 
    align-items: center;
    
    /* Smooth transition for hover effects */
    transition: background-color 0.2s ease;
}

/* Optional: Add a subtle hover color so users know it's clickable */
.expand-btn:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Light gray hover effect */
    border-radius: 0 0 12px 12px;          /* Rounds the bottom corners to match the card */
}

/* 2. Make the arrow icon itself bigger */
.arrow-icon {
    font-size: 2.5rem;       /* Significantly increases the size of the ▼ */
    line-height: 1;          /* Keeps the height tight to the icon */
    color: var(--primary-dark);
    display: block;          /* Ensures transforms work smoothly */
    transition: transform 0.3s ease; /* Smooth rotation animation */
}

/* Ensure the arrow rotates when the box is open */
.opportunity-box.is-open .arrow-icon {
    transform: rotate(180deg);
}

/* --- Media Queries --- */

/* Desktop (3 columns) handled by auto-fill grid above */

/* Tablet Adjustments */
@media (max-width: 900px) {
    .joinus-section {
        padding: 2rem 1.5rem;
        margin: 2rem auto;
    }
    
    .opportunity-menus {
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* Mobile (Single Column) */
@media (max-width: 700px) {
    .opportunity-boxes {
        grid-template-columns: 1fr; /* Force stack */
        gap: 1rem;
    }

    /* DISABLE Absolute Overlap on Mobile */
    /* On phones, it is better to push content down (Accordion style) */
    .opportunity-box.is-open {
        position: relative; 
        transform: none;
        z-index: 1;
        box-shadow: 0 2px 8px rgba(6,70,117,0.15);
    }
    
    .opportunity-box span1 {
        font-size: 1.4rem;
    }
}

/* Tiny Screens */
@media (max-width: 480px) {
    .joinus-section, .opportunity-menu, .opportunity-box {
        padding: 1rem;
    }
    
    .opportunity-menu h2 {
        font-size: 1.2rem;
    }
    
    .opportunity-box span1 {
        font-size: 1.25rem;
    }
}

/* --- Student Inquiry Panel (Distinct Style) --- */

.student-inquiry-panel {
    /* distinct from .opportunity-menu */
    background: #ffffff; /* Clean white background */
    border-radius: 20px; /* Matches the curvature of your other menus */
    padding: 2.5rem 2rem;
    margin-top: 3rem;    /* Spacing between Jobs and this section */
    
    /* Subtle shadow to lift it off the green page background */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    
    /* Center alignment for a "Call to Action" feel */
    text-align: center;
    max-width: 800px;    /* Keeps text from getting too wide/unreadable */
    margin-left: auto;
    margin-right: auto;
}

.student-inquiry-panel h2 {
    font-family: 'Lora', serif;
    font-size: 2rem;
    color: var(--primary-dark); /* Dark text on light background */
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--secondary-dark-green); /* Optional accent line */
    display: inline-block;
    padding-bottom: 0.5rem;
}

.student-inquiry-panel p {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333; /* Dark gray for readability */
    margin-bottom: 1rem;
}

/* --- The Call-to-Action Button --- */
.inquiry-btn {
    display: inline-block;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 14px 35px;
    
    /* Inverted colors: Dark button on Light card */
    background-color: var(--primary-dark); 
    color: var(--text-on-dark);
    
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: 50px; /* Pill shape stands out from square job boxes */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.inquiry-btn:hover {
    background-color: var(--secondary-dark-green); /* Hover change */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* --- Mobile Tweaks for this section --- */
@media (max-width: 700px) {
    .student-inquiry-panel {
        padding: 2rem 1rem;
        margin-top: 2rem;
    }
    
    .student-inquiry-panel h2 {
        font-size: 1.6rem;
    }
}

/* --- No Listings Notice --- */

.no-listings-message {
    /* Layout: Span the full width of the grid */
    grid-column: 1 / -1; 
    
    /* Styling to match the Dark Menu theme */
    text-align: center;
    padding: 3rem 1rem;
    color: rgba(255, 255, 255, 0.6); /* Muted white text */
    font-family: 'Lora', serif;      /* Matches your headers */
    font-style: italic;
    font-size: 1.2rem;
    
    /* Optional: A subtle dashed border to fill the space visually */
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    margin-top: 1rem;
}

/* --- THE LOGIC --- */
/* The '~' symbol selects the message ONLY if it comes after a .box-wrapper.
   1. If .box-wrapper exists (job is active), the message gets display: none.
   2. If .box-wrapper is commented out (no jobs), this rule fails, and the message stays visible.
*/
.box-wrapper ~ .no-listings-message {
    display: none;
}













































/* Contact Page Styles */
.contact-section {
  max-width: 80vw;
  margin: 1rem auto;
  padding: 2.5rem;
  background: transparent;
  border-radius: 0;
  box-shadow: 0 2px 10px rgba(6,70,117,0.12);
  text-align: center;
  box-sizing: border-box;
}

.contact-section h1 {
  color: var(--primary-light);
  font-size: 2.4rem;
  margin-bottom: 0.8rem;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
font-family: 'Lora', serif;
}

.contact-section p {
  color: var(--background-light);
  font-size: 1.13rem;
  margin-bottom: 2.5rem;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  font-family: 'Nunito', sans-serif;
}

.contact-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.social-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 20vw;
  box-sizing: border-box;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: var(--background-light);
  color: var(--text-on-light);
  text-decoration: none;
  padding: 0.8rem 1.4rem;
  border-radius: 8px;
  font-size: 1.12rem;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(6,70,117,0.07);
  transition: background 0.2s, color 0.2s, transform 0.15s;
  box-sizing: border-box;
  width: 100%;
}

.social-btn i {
  font-size: 1.3rem;
}

.social-btn.facebook:hover, .social-btn.facebook:focus {
  background: #1877f3;
  color: #fff;
  transform: scale(1.04);
}

.social-btn.instagram:hover, .social-btn.instagram:focus {
  background: #e1306c;
  color: #fff;
  transform: scale(1.04);
}

.social-btn.linkedin:hover, .social-btn.linkedin:focus {
  background: #0077b5;
  color: #fff;
  transform: scale(1.04);
}

.social-btn.website:hover, .social-btn.website:focus {
  background: var(--secondary-dark-green);
  color: #fff;
  transform: scale(1.04);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 40vw;
  flex: 1 1 330px;
  background: var(--primary-dark);
  padding: 2rem 1.5rem;
  border-radius: 12px;
  color: var(--text-on-dark);
  box-shadow: 0 1px 5px rgba(6,70,117,0.09);
  box-sizing: border-box;
}

.contact-form label {
  font-size: 1.08rem;
  margin-bottom: 0.2rem;
  text-align: left;
  color: var(--primary-light);
}

.contact-form input[id="userEmail"],
.contact-form input[id="userName"],
.contact-form textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 6px;
  border: 1.5px solid var(--primary-light);
  font-size: 1.07rem;
  background: #fff;
  color: var(--primary-dark);
  resize: vertical;
  margin-bottom: 0.3rem;
  box-sizing: border-box;
}

.contact-form textarea {
  min-height: 10vh;
  max-height: 30vh;
}

.contact-form button {
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 0.8rem 1.3rem;
  border: none;
  border-radius: 6px;
  font-size: 1.13rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.12s;
  margin-top: 0.3rem;
  box-shadow: 0 2px 8px rgba(6,70,117,0.11);
}

#submissionsLeft {
    font-weight: bold;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #e7f3ff;
    border-left: 4px solid #2196F3;
    display: none;
}

#status {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
}

#status.success {
    background-color: #d4edda;
    color: #155724;
}

#status.error {
    background-color: #f8d7da;
    color: #721c24;
}

#status.info {
    background-color: #d1ecf1;
    color: #0c5460;
}

.contact-form button:hover, .contact-form button:focus {
  background: #ffe19b;
  color: var(--primary-dark);
  transform: scale(1.03);
}










































/*about section */
/* Lab Info Section Styles */
.lab-info-section {
    width: 80%;
    box-sizing: border-box;
    margin: 60px auto;
    padding: 40px 50px;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.3);
    border-left: 4px solid var(--accent-green);
}

.lab-info-section h2 {
    font-family: 'Lora', serif;
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--border-light);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.lab-subtitle {
    font-family: 'Lora', serif;
    font-size: 1.1rem;
    font-style: italic;
    margin-bottom: 30px;
    color: var(--accent-green);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.lab-info-section h3 {
    font-family: 'Lora', serif;
    font-size: 1.5rem;
    margin-bottom: 15px;
    margin-top: 25px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.mission-text {
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #fff;
    text-align: justify;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .lab-info-section {
        width: 95%;
        padding: 30px 25px;
        margin: 40px auto;
    }
    
    .lab-info-section h2 {
        font-size: 1.6rem;
    }
    
    .lab-subtitle {
        font-size: 1rem;
    }
    
    .lab-info-section h3 {
        font-size: 1.3rem;
    }
    
    .mission-text {
        font-size: 1rem;
        text-align: left;
    }
}

/* Organization Section Styles */
.organization-section {
    max-width: 80vw;
    margin: 3rem auto;
    padding: 0 2rem;
}

.organization-header {
    color: var(--background-light);
  font-family: 'Lora', serif;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    font-size: 1.8rem;
    margin-bottom: 2rem;
    text-align: center;
    letter-spacing: 0.5px;
    border-bottom: 3px solid var(--accent-green);
    padding-bottom: 1rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem 2.5rem;
    justify-items: center;
    margin-bottom: 1.5rem;
}

.team-profile {
    background: var(--secondary-light-blue);
    border: 12px solid var(--secondary-dark-green);
    border-radius: 40px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    padding: 1.6rem 1.1rem 1.3rem 1.1rem;
    max-width: 20vw;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.team-profile:hover, .team-profile:focus-within {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 6px 20px rgba(6,70,117,0.17);
}

.team-profile img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--text-on-light);
    margin-bottom: 1rem;
    background: #eef6ff;
}

.team-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-name {
    font-family: 'Lora', serif;
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--text-on-light);
    margin-bottom: 0.35rem;
    text-align: center;
}

.team-role {
    font-family: 'Lora', serif;
    font-size: 1.02rem;
    color: var(--border-dark);
    margin-bottom: 0.6rem;
    text-align: center;
}

.bio-link {
    display: inline-block;
    background: var(--primary-dark);
    color: var(--primary-light);
    font-family: 'Lora', serif;
    font-size: 1.01rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
    transition: background 0.18s, color 0.18s;
}

.bio-link:hover, .bio-link:focus {
    background: #ffe19b;
    color: var(--primary-dark);
}

/* Show More Button */
.show-more-container {
    text-align: center;
    margin: 2rem 0;
}

.show-more-btn {
    background: var(--primary-dark);
    color: var(--primary-light);
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    padding: 0.8rem 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.show-more-btn:hover {
    background: #ffe19b;
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.show-more-btn i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.show-more-btn.expanded i {
    transform: rotate(180deg);
}

/* Hidden profiles */
.hidden-profiles {
    display: none;
}

.hidden-profiles.visible {
    display: contents;
}

/* Tablet/Medium screens */
@media (max-width: 1000px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1.5rem;
    }
    
    .team-profile {
        max-width: 35vw;
    }

    .organization-header {
        font-size: 1.6rem;
    }
}

/* Mobile portrait */
@media (max-width: 700px) {
    .organization-section {
        max-width: 95vw;
        padding: 0 0.5rem;
        margin: 2rem auto;
    }

    .organization-header {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .team-profile {
        max-width: 100%;
        border-width: 8px;
        border-radius: 30px;
        padding: 1.5rem 1.2rem 1.2rem 1.2rem;
    }
    
    .team-profile img {
        width: 100px;
        height: 100px;
    }
    
    .team-name {
        font-size: 1.1rem;
    }
    
    .team-role {
        font-size: 0.98rem;
    }

    .show-more-btn {
        font-size: 1rem;
        padding: 0.7rem 1.5rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .organization-header {
        font-size: 1.3rem;
    }

    .team-profile {
        border-width: 6px;
        border-radius: 25px;
        padding: 1.25rem 1rem 1rem 1rem;
    }
    
    .team-profile img {
        width: 90px;
        height: 90px;
    }
    
    .bio-link {
        font-size: 0.95rem;
        padding: 0.45rem 1rem;
    }
}

/* Search Section Styles */
.search-section {
    max-width: 80vw;
    margin: 3rem auto 2rem auto;
    padding: 0 2rem;
}

.search-container {
    max-width: 80vw;
    margin: 0 auto;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--secondary-light-blue);
    border: 3px solid var(--secondary-dark-green);
    border-radius: 20px;
    padding: 0.8rem 1.2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: all 0.3s ease;
}

.search-input-wrapper:focus-within {
    border-color: var(--accent-green);
    box-shadow: 0 4px 12px rgba(6,70,117,0.2);
}

.search-icon {
    color: var(--border-dark);
    font-size: 1.1rem;
    margin-right: 0.8rem;
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.05rem;
    color: var(--text-on-light);
    outline: none;
    font-family: inherit;
}

.search-input::placeholder {
    color: var(--border-dark);
    opacity: 0.7;
}

.clear-btn {
    background: transparent;
    border: none;
    color: var(--border-dark);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.3rem;
    margin-left: 0.5rem;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clear-btn:hover {
    color: var(--text-on-light);
}

.search-results {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 2rem;
    justify-items: center;
    margin-top: 2rem;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    border: 2px solid var(--accent-green);
}

.search-results .team-profile {
    max-width: 100%;
}

.no-results {
    text-align: center;
    color: var(--background-light);
    font-size: 1.1rem;
    padding: 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Tablet/Medium screens */
@media (max-width: 1000px) {
    .search-results {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Mobile portrait */
@media (max-width: 700px) {
    .search-section {
        max-width: 95vw;
        padding: 0 0.5rem;
        margin: 2rem auto 1.5rem auto;
    }

    .search-container {
        max-width: 100%;
    }

    .search-input-wrapper {
        padding: 0.7rem 1rem;
        border-radius: 15px;
    }

    .search-input {
        font-size: 1rem;
    }

    .search-results {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
        margin-top: 1.5rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .search-input-wrapper {
        padding: 0.6rem 0.9rem;
    }

    .search-icon {
        font-size: 1rem;
        margin-right: 0.6rem;
    }

    .search-input {
        font-size: 0.95rem;
    }

    .search-results {
        padding: 1rem;
    }
}

/* Tablet/Medium screens */
@media (max-width: 1000px) {
    .contact-section {
        max-width: 90vw;
        padding: 2rem 1.5rem;
    }
    
    .contact-section h1 {
        font-size: 2rem;
    }
    
    .contact-section p {
        font-size: 1.05rem;
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1.5rem;
    }
    
    .team-profile {
        max-width: 35vw;
    }
}

/* Mobile landscape/Small tablets */
@media (max-width: 900px) {
    .contact-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
    }
    
    .contact-form {
        min-width: 0;
        width: 100%;
    }
    
    .social-buttons {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
        min-width: 0;
        align-items: stretch;
    }
    
    .social-btn {
        flex: 1 1 auto;
        min-width: 140px;
    }
}

/* Mobile portrait */
@media (max-width: 700px) {
    .contact-section {
        max-width: 95vw;
        padding: 1.5rem 1rem;
        margin: 2rem auto;
    }
    
    .contact-section h1 {
        font-size: 1.8rem;
        margin-bottom: 0.6rem;
    }
    
    .contact-section p {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    .contact-flex {
        gap: 1.5rem;
    }
    
    .social-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .social-btn {
        width: 100%;
        justify-content: center;
    }
    
    .contact-form {
        padding: 1.5rem 1rem;
    }
    
    .contact-form input[type="email"],
    .contact-form textarea {
        width: 100%;
    }
    
    .team-section {
        max-width: 95vw;
        padding: 1rem 0.5rem;
        margin: 2rem auto 3rem auto;
    }
    
    .team-section h2 {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .team-profile {
        max-width: 100%;
        border-width: 8px;
        border-radius: 30px;
        padding: 1.2rem 0.8rem 1rem 0.8rem;
    }
    
    .team-profile img {
        width: 100px;
        height: 100px;
    }
    
    .team-name {
        font-size: 1.1rem;
    }
    
    .team-role {
        font-size: 0.98rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .contact-section {
        padding: 1.25rem 0.75rem;
    }
    
    .contact-section h1 {
        font-size: 1.6rem;
    }
    
    .contact-section p {
        font-size: 0.95rem;
    }
    
    .contact-form {
        padding: 1.25rem 0.75rem;
    }
    
    .contact-form label {
        font-size: 1rem;
    }
    
    .contact-form input[type="email"],
    .contact-form textarea {
        font-size: 1rem;
        padding: 0.6rem 0.8rem;
    }
    
    .contact-form button {
        font-size: 1.05rem;
        padding: 0.75rem 1.1rem;
    }
    
    .social-btn {
        font-size: 1.05rem;
        padding: 0.7rem 1.2rem;
    }
    
    .team-section h2 {
        font-size: 1.6rem;
    }
    
    .team-profile {
        border-width: 6px;
        border-radius: 25px;
    }
    
    .team-profile img {
        width: 90px;
        height: 90px;
    }
    
    .bio-link {
        font-size: 0.95rem;
        padding: 0.45rem 1rem;
    }
}

@media screen and (max-width: 900px) {
  .contact-flex {
    flex-direction: column;
    align-items: center; /* Forces everything to center */
    gap: 2rem;
  }
  
  .social-buttons {
    flex-direction: column; 
    align-items: center;
    width: 100%;
    max-width: 100% !important; /* The magic fix to kill the 20vw bug */
    gap: 1.2rem;
  }
  
  .social-btn {
    width: 100%;
    max-width: 300px; /* Keeps them looking like neat pill buttons */
    justify-content: center;
  }
  
  .contact-form {
    width: 100%;
    min-width: unset;
    max-width: 600px; /* Keeps the form from getting overly wide on tablets */
  }
}















 /*news page stuff */
/* --- Main Wrapper --- */
/* This holds everything. It limits width but allows height to grow. */
.news-container {
    max-width: 1000px;
    margin: 40px auto;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    position: relative; /* Context for the arrows */
    min-height: 600px; /* Minimum height to prevent layout jumpiness */
    border-radius: 5%;
}

/* --- Navigation Arrows --- */
/* Positioned absolute relative to the container, sitting on top of the hero image */
.nav-arrow {
    cursor: pointer;
    position: absolute;
    top: 200px; /* Roughly middle of the 400px hero section */
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,0.6);
    color: white;
    border: none;
    font-size: 24px;
    border-radius: 50%;
    z-index: 100;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-arrow:hover {
    background-color: rgba(0,0,0,0.9);
}

.prev-btn { left: 20px; }
.next-btn { right: 20px; }


/* --- The Article Item --- */
/* By default, hide the entire article (header + body) */
.news-article {
    display: none;
    animation: fadeIn 0.8s; /* Smooth fade in when it appears */
}

/* The class that makes it show up */
.news-article.active {
    display: block;
}

/* Animation Keyframes */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* --- PART 1: The "Hero" Section (Top Split) --- */
.hero-section {
    display: flex;
    height: 400px; /* Fixed height for the header area */
    border-bottom: 1px solid #eee;
}

.hero-image {
    width: 50%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 5%;
}

.hero-content {
    width: 50%;
    padding: 40px;
    box-sizing: border-box;
    background-color: #222; /* Dark header background */
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top-right-radius: 5%;
}

.hero-content h1 {
    font-family: 'Lora', serif;
    font-size: 2.5rem;
    margin-top: 0;
    line-height: 1.2;
}

.hero-meta {
    color: #ccc;
    font-style: italic;
    margin-bottom: 20px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
}


/* --- PART 2: The Article Body (Bottom Text) --- */
.article-body {
    padding: 60px 80px; /* Generous whitespace for reading */
    font-size: 1.15rem;
}

.article-body p {
    margin-bottom: 1.5em;
    font-family: 'Nunito', sans-serif;
}

.article-body h3 {
    font-family: 'Lora', serif;
    margin-top: 2em;
    font-size: 1.5rem;
    color: #222;
}

.article-body img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 40px 0;
  text-align: center;
}

.article-footer-text {
    font-style: italic;
    color: #555;
}


/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .hero-section {
        flex-direction: column;
        height: auto;
    }
    .hero-image, .hero-content {
        width: 100%;
    }
    .hero-image {
        height: 250px;
    }
    .article-body {
        padding: 30px 20px;
    }
    .nav-arrow {
        top: 125px; /* Adjust arrow position for stacked mobile layout */
    }
}