/* Justify running text in page content */
main.content p,
main.content li,
main.content dd {
  text-align: justify;
  text-justify: inter-word;   /* legacy fallback */
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Keep titles, nav, code, tables unaltered */
.quarto-title-block,
h1, h2, h3, h4, h5, h6,
.navbar, .breadcrumb {
  text-align: unset;
}
pre, code, kbd, samp, .sourceCode, .code-with-copy {
  text-align: left !important;
  hyphens: none !important;
}
table, .table, .table caption, figcaption {
  text-align: left;
}
/* === Team List Layout === */

.postdoc-heading {
  display: block;
  margin: 3rem auto 1.5rem auto; /* Centered with spacing */
  max-width: 900px;              /* Align with the grid width */
  font-size: 1.75rem;            /* Bigger font */
  font-weight: 800;              /* Bold */
  color: #0b1f3a;                /* Dark Blue */
  text-decoration: underline;
  text-align: left;
  padding-left: 0.5rem;          /* Slight alignment tweak */
}

/* The container for the list of cards */
.team-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

/* The individual card */
.team-card {
  display: flex;
  flex-direction: row;
  align-items: center;    
  background: #fff;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 1rem;
  padding: 1.5rem;
  gap: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* The Image */
.team-photo {
  width: 140px;          /* Fixed width */
  height: 140px;         /* Fixed height */
  min-width: 140px;      /* FORCE width so it never squeezes */
  
  /* Use 50% for Circle, or 12px for Rounded Square */
  border-radius: 12px;   
  
  object-fit: cover;     /* Ensures the image fills the box without stretching */
  object-position: top;  /* Focus on the face (top of image) */
  margin: 0;
}

/* The Text Container */
.team-info {
  flex-grow: 1;
  text-align: left;
}

.team-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
}

.team-role {
  margin: 0.25rem 0 0.75rem;
  font-style: italic;
  font-size: 0.95rem;
  color: #555;
}

.team-bio {
  margin: 0;
  text-align: justify;
  hyphens: auto;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .team-card {
    flex-direction: column;
    text-align: center;
  }
  
  .team-info {
    text-align: center;
  }
  
  .team-bio {
    text-align: left;
  }
}
/* === Dark, sticky navbar === */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;               /* above content */
  background-color: #0b1f3a !important;   /* dark navy */
  --bs-navbar-color: #e6edf3;
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-brand-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-toggler-border-color: rgba(255,255,255,.25);
}
.navbar .nav-link { color: var(--bs-navbar-color) !important; }
.navbar .nav-link:hover { color: var(--bs-navbar-hover-color) !important; }
.navbar .navbar-brand { color: var(--bs-navbar-brand-color) !important; }
.navbar .navbar-brand:hover { color: var(--bs-navbar-brand-hover-color) !important; }
/* make the hamburger icon visible on dark bg */
.navbar .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }


/* === Dark, fixed navbar (always visible) === */
.navbar {
  /* Quarto 'pinned: true' takes effect; this enforces your dark blue tone */
  background-color: #1e4272 !important;  /* dark navy above the blue title banner */
  --bs-navbar-color: #e6edf3;
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-brand-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-toggler-border-color: rgba(255,255,255,.25);
}
.navbar .nav-link { color: var(--bs-navbar-color) !important; }
.navbar .nav-link:hover { color: var(--bs-navbar-hover-color) !important; }
.navbar .navbar-brand { color: var(--bs-navbar-brand-color) !important; }
.navbar .navbar-brand:hover { color: var(--bs-navbar-brand-hover-color) !important; }
/* make the hamburger icon visible on dark bg */
.navbar .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }

/* Spacing compensation so fixed navbar doesn't cover content */
:root { --nav-height: 64px; }
body { scroll-padding-top: var(--nav-height); }
body > main, main.content, .page-columns {
  padding-top: .2rem;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* === Force Header Text to be White === */
.quarto-title-banner {
  color: #ffffff !important;
}

.quarto-title-banner h1.title,
.quarto-title-banner p.subtitle {
  color: #ffffff !important;
}

/* === Make Navbar Tabs Brighter/Clearer === */
.navbar {
  /* Override the previous color to be Pure White */
  --bs-navbar-color: #ffffff !important; 
  --bs-navbar-brand-color: #ffffff !important;
  font-weight: 500; /* Makes the text slightly thicker/clearer */
}

/* Ensure links stay white even when not hovering */
.navbar-nav .nav-link {
  color: #ffffff !important;
}

/* Optional: Add a subtle underline when hovering over a tab */
.navbar-nav .nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
/* === Hero/Intro Section Background === */
.hero-section {
  position: relative;
  padding: 3rem;       
  min-height: 600px;   /* Essential: Gives the box height so the image can expand */
  overflow: hidden;    
  border-radius: 12px; 
  z-index: 1;          
  isolation: isolate; 
  background-color: rgba(255, 255, 255, 0.7); 
  font-weight: 500;
  
  /* Vertical alignment for the text */
  display: flex;
  flex-direction: column;
  justify-content: center; 
}

.hero-section::before {
  content: "";
  background-image: url('images/Running-background.png');
  
  /* CHANGED: 'contain' ensures the whole image is visible with correct proportions */
  background-size: contain; 
  background-position: center; /* Centers the image in the available space */
  background-repeat: no-repeat;
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  opacity: 0.50;
  z-index: -1;
}
/* === Increase Navbar Logo Size === */
.navbar-brand img {
  height: 80px !important;  /* Adjust this value as needed (e.g., 50px to 80px) */
  max-height: unset !important; /* Removes the default limit */
  width: auto; /* Keeps the aspect ratio correct */
}
/* === Increase Navbar Tab Font Size === */
.navbar-nav .nav-link {
  font-size: 1.3rem !important;  /* Adjust this value (e.g., 1.2rem, 1.5rem, or 20px) */
  font-weight: 600;              /* Optional: Makes text slightly bolder */
}
/* === Disclaimer Banner Updated === */
.disclaimer-banner {
  background-color: #1e4272;     /* Dark Navy */
  color: #ffffff;                /* White text */
  
  padding: 1.5rem 2rem;
  margin-top: 3rem;              /* Space above the banner */
  margin-bottom: -5rem !important;
  /*  Make the banner full-width across the page */
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  text-align: justify;
  font-size: 0.9rem;
  line-height: 1.5;
  }

@media (max-width: 768px) {
  .disclaimer-banner {
    padding: 1.5rem 1rem;  /* Slightly smaller padding on phones */
  }
}


.disclaimer-banner strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* FIX 3: Force main container to have no bottom padding */
main.content, .page-columns {
  padding-bottom: 0 !important;
}

/* 1. Hide the default Quarto generated title block */
#title-block-header {
  display: none !important;
}

/* 2. Create the container for the new banner */
/* 2. Create the container for the new banner */
.custom-banner {
  background-color: #0d6efd; /* Match your original blue */
  color: white;
  padding: 3rem 1rem;
  margin-bottom: 2rem;
  
  /* REMOVED: width, position, left/right, and negative margins. 
     Quarto's .column-screen now handles the width automatically. */
}

/* 3. Layout: Image Left, Text Right */
.banner-content {
  max-width: 1100px; /* Standardize width */
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center; /* Vertically center image with text */
  gap: 2rem;           /* Space between image and text */
}

/* 4. The Image Style */
.banner-logo {
  width: 180px;        /* Adjust size as preferred */
  height: auto;
  object-fit: contain;
  flex-shrink: 0;      /* Prevent image from squishing */
}

/* 5. The Text Style */
.banner-text h1 {
  color: white !important;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 2.2rem;
  line-height: 1.2;
}

.banner-text p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.2rem;
  margin-bottom: 0;
  font-weight: 400;
}

/* 6. Mobile Responsiveness */
@media (max-width: 768px) {
  .banner-content {
    flex-direction: column; /* Stack vertically on phones */
    text-align: center;
  }
  
  .banner-logo {
    width: 120px;
    margin-bottom: 1rem;
  }
}
/* === Contact Page Styles === */
.contact-block {
  font-size: 1.5rem;   /* Adjust this number to make it bigger/smaller (default is 1rem) */
  line-height: 1.8;    /* Adds a little more space between the lines */
  margin-top: 2rem;    /* Adds some space between the title and the text */
  margin-bottom: 2rem; /* Adds space before the disclaimer */
}

/* Optional: Ensure the link color stands out */
.contact-block a {
  font-weight: bold;
  text-decoration: none;
  color: #0d6efd;      /* Matches your blue theme */
}

.contact-block a:hover {
  text-decoration: underline;
}
/* === Navbar Separators (Desktop Only) === */
@media (min-width: 992px) {
  /* Aligns the separator vertically with the text */
  .navbar-nav .nav-item {
    display: flex;
    align-items: center;
  }

  /* Creates the pipe symbol after each item */
  .navbar-nav .nav-item::after {
    content: "|";
    color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    margin: 0 10px;                  /* Spacing on left and right */
    font-weight: 400;                /* Thinner than the bold links */
    font-size: 1.2rem;
  }

  /* Removes the pipe from the very last item */
  .navbar-nav .nav-item:last-child::after {
    display: none;
  }
}
/* === Footer Styling (The Bottom Bar) === */
footer.footer {
  margin-top: 0 !important;                    /* Removes the gap above */
  margin-bottom: 0rem !important;                 /* Removes gap below */
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #0b1f3a;                   /* Dark Navy Background */
  color: #ffffff;                              /* White text */
  border-top: 2px solid #ffffff; /* The Narrow White Line */
}
/* === Poster thumbnail (click to magnify) === */
.poster-thumb {
  max-width: 140px; /* Reduced from 260px to fit better with text */
  height: auto;
  border-radius: 8px; /* Slightly tighter radius for a smaller image */
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  cursor: zoom-in;
  transition: transform 0.15s ease;
  margin-top: 0.5rem; /* Adds a small gap between the title text and the image */
  display: block;      /* Ensures it sits on its own line below the text */
}

.poster-thumb:hover {
  transform: scale(1.05); /* Slightly more noticeable hover on a smaller target */
}
/* === Early News: BHS header (logo left of title) === */
.bhs-header {
  display: flex;            /* force logo + title on one line */
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.25rem;
  align-items: center;
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Mobile: allow stacking if needed */
@media (max-width: 768px) {
  .bhs-header {
    flex-wrap: wrap;
  }
}


/* Remove default figure spacing inside the logo column */
.bhs-header figure,
.bhs-header p {
  margin: 0;
}

.bhs-header .column {
  display: flex;
  align-items: center;
}

/* Keep the BHS logo small (no poster-style magnification) */
.bhs-logo {
  width: 90px;
  max-width: 90px;
  height: auto;
  margin: 0;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}

.bhs-header h3 {
  margin: 0;
}