body {
  padding-top: 56px;
  background-color: #FFFFFF; /* White background for clean look */
  color: #000000; /* Black for main text */
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.left-aligned {
  margin-left: auto;
}

/* Header + Hero */
.bg-dark {
  background-color: #0A1F44 !important; /* Deep Navy */
}

.bg-hero {
  background-color: #1470AF !important; /* Primary Blue */
  color: #FFFFFF; /* White text over hero */
}

/* Headings */
h1, h2, h3, h4 {
  color: #0A1F44; /* Deep Navy */
  font-weight: 600;
}

/* Links */
a {
  color: #1470AF; /* Primary Blue */
  text-decoration: none;
}
a:hover {
  color: #8EB6DC; /* Accent Blue on hover */
  text-decoration: underline;
}

/* Callouts */
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #EAEAEE; /* Light Gray border */
  border-left-width: .25rem;
  border-radius: .25rem;
  background-color: #F8F9FA;
}
.bd-callout h4 { margin-bottom: 1.25rem; }
.bd-callout p:last-child { margin-bottom: 0; }
.bd-callout-info { border-left-color: #1470AF; } /* Primary Blue */
.bd-callout-warning { border-left-color: #f0ad4e; }
.bd-callout-danger { border-left-color: #d9534f; }


/* Cards */
.card {
  border-radius: .75rem;
  border: 1px solid #EAEAEE; /* Light Gray */
  background-color: #FFFFFF; /* White cards */
}
.card-header {
  background-color: #1470AF; /* Primary Blue header */
  color: #FFFFFF;
  font-weight: 500;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
}
.card-body{
  background-color: #FFFFFF; /* White cards */
  color: #000000; /* Black for main text */
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* Headers for Sections */ 
.header{
  background-color: #1470AF;
  color: white;
  font-weight: bold;
  border-radius: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}




/* Placeholders for diagrams/images */
.placeholder-box {
  background: #EAEAEE; /* Light Gray background */
  border: 1px dashed #8EB6DC; /* Accent Blue dashed border */
  border-radius: .75rem;
  display: block;
  position: relative;
}
.placeholder-inner {
  font-size: .9rem;
  color: #1470AF; /* Primary Blue text */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/*Images to insert (same code as placeholder)*/
.image-box{
  display: block;
  display: block;
  position: relative;
  }
.images-inner{
  font-size: .9rem;
  color: #1470AF; /* Primary Blue text */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}



/* Buttons (optional) */
.btn-primary {
  background-color: #1470AF;
  border-color: #1470AF;
}
.btn-primary:hover {
  background-color: #0A1F44; /* Deep Navy hover */
  border-color: #0A1F44;
}
/* ===== Team page (add this) ===== */

/* Card container so the bio panel can slide over it */
.member-card {
  position: relative;
  overflow: hidden; /* keeps the sliding bio clipped to the card */
}

/* Avatar */
.member-avatar-wrap { width: 132px; height: 132px; }
.member-avatar {
  width: 132px; height: 132px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #FFFFFF;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.member-avatar.placeholder {
  width: 132px; height: 132px;
  border-radius: 50%;
  background: #EAEAEE;          /* matches your light gray */
  color: #1470AF;               /* primary blue text */
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Name styling */
.member-name { color: #0A1F44; }      /* deep navy */
.member-name:hover { text-decoration: underline; }

/* Hover bio panel (JU Krakow style) */
.member-bio {
  position: absolute; inset: 0;
  background: #6C45C8;          /* purple like JU; change to #1470AF to use your blue */
  color: #FFFFFF;
  transform: translateY(100%);  /* start hidden below card */
  transition: transform .35s ease;
  display: flex; align-items: center;
}
.member-bio-inner { padding: 1.25rem; font-size: 1rem; line-height: 1.6; }

/* Reveal on hover or keyboard focus inside the card */
.member-card:hover .member-bio,
.member-card:focus-within .member-bio { transform: translateY(0%); }

/* Smaller avatars on mobile */
@media (max-width: 575.98px) {
  .member-avatar-wrap,
  .member-avatar,
  .member-avatar.placeholder { width: 96px; height: 96px; }
}
/* === Navbar Logo Positioning === */
.navbar-brand {
  position: relative;
  padding-left: 90px; /* give room so text/menus don’t overlap the logo */
}

.navbar-brand .navbar-logo {
  position: absolute;
  top: -45px;    /* more negative = less overhang */
  left: 0;
  height: 140px; /* bigger logo */
  width: auto;
  z-index: 10;
  display: block;
}

.math{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  text-align:center;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .navbar-brand { padding-left: 70px; }
  .navbar-brand .navbar-logo { height: 72px; top: -8px; }
}

@media (max-width: 575.98px) {
  .navbar-brand { padding-left: 60px; }
  .navbar-brand .navbar-logo { height: 64px; top: -6px; }
}
/* Add spacing between navbar dropdowns */
.navbar-nav .nav-item {
  margin-left: 35px;   /* increase for more space, e.g. 20px–30px */
}

/* Make the text inside links breathe a little */
.navbar-nav .nav-link {
  padding-left: 6px;
  padding-right: 6px;
}
/* =========================
   FOOTER — locked to ~275px
   ========================= */

/* Footer */
footer {
  background-color: #0A1F44; /* Deep Navy */
  color: #FFFFFF;
  padding: 1rem;
}
footer a {
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
}
footer a:hover {
  color: #8EB6DC; /* Accent Blue hover */
  text-decoration: underline;
}

.site-footer{
  --row-h: 220px;              /* top row height; tweak 210–230 to taste */
  --maxw: 1080px;              /* total content width inside the footer */
  background:#0A1F44;
  color:#FFF;
  padding:0;                   /* no extra top/bottom padding */
}


/* Top row: fixed height, 3 columns */
/* Entire footer row */
.site-footer .footer-inner{
  height: var(--row-h);
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr 300px;  /* big left / schools / contact */
  column-gap: 18px;
  align-items: center;                     /* vertical centering */
  overflow: hidden;                        /* children can’t force taller */
}


/* Left: Lactolock sticker fills the lane but stays within the row height */
.team-sticker{
  height: calc(var(--row-h) - 18px);       /* fills the row with a bit of room */
  width: auto;
  display:flex;                           /* removes inline-img baseline gap */
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.30));
  transition:transform .12s ease,.12s ease;
}

/* Middle: schools (tight) */
.footer-mid{ display:flex; flex-direction:column; gap:10px; }
.affil{ display:flex; align-items:center; gap:10px; }
.affil-logo{
  width:42px; height:42px; object-fit:contain;
  background:#FFF; border-radius:8px; padding:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.affil-name{ 
  font-size:1.15rem; 
  font-weight:700;
}

.sponsor{display:flex; align-items:center;}
.sponsor-logo{
  height: calc(var(--row-h) - 18px);  
  width:auto;
  margin:0;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  border-radius:20px;
}
.sponsor-text{
  background-color:#FFFFFF;
  font-size:1rem;
  font-weight: 900;
  text-align: center;
  text-transform:uppercase;
}


/* Right: centered follow/contact + icons */
.footer-right{ text-align:center; }
.footer-right .follow{
  margin:0 0 4px 0;
  font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:#8EB6DC;
}
.footer-right .email{ font-size:1rem; font-weight:700; margin-bottom:2px; display:inline-block; }
.footer-right .addr{ font-size:.95rem; opacity:.9; margin-bottom:8px; }

/* Socials: compact pills */
.socials{ display:flex; justify-content:center; gap:10px; }
.social{
  width:36px; height:36px; border-radius:999px;
  background:#1470AF; display:inline-flex; align-items:center; justify-content:center;
  transition:transform .12s ease, background .12s ease;
}
.social:hover{ transform:translateY(-1px); background:#0A1F44; outline:2px solid #8EB6DC; }
.social img{ width:18px; height:18px; }


/* Bottom legal block – exact text stays; height kept tight */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.22);
  margin-top:0;
  padding:10px 0 16px;                    /* keep this slim */
  text-align:center;
}
.footer-bottom p{
  margin:2px 0;                            /* prevent big vertical gaps */
  font-size:.95rem;
  line-height:1.25;
}
.footer-bottom a{ font-weight:700; }

/* Progress Bar Indicator */
.progress-container {
  position:fixed;
  left:0;
  top:0;
  z-index:10000; /*added new*/
  /*width:100%;*/
  height: /*10px;*/ 100%;
  width:8px;
  /*background: #FFFFFF;*/
}
.progress-bar{
  width:100%;
  background: #1470AF;
  height:0%;
  transition: height 0.25s ease;
  /*height:10px;
  background: #1470AF;
  width:0%;
  transition: height 0.25s ease; /*for smooth animation*/*/
}

/* Responsive: keep proportions on smaller screens */
@media (max-width: 1100px){
  .site-footer .footer-inner{
    grid-template-columns: 300px 1fr 280px;
    column-gap:14px;
  }
}
@media (max-width: 900px){
  .site-footer{ --row-h: 210px; }
  .site-footer .footer-inner{
    max-width: 92%;
    grid-template-columns: 1fr;            /* stack cleanly */
    row-gap: 12px;
    text-align:center;
  }
  .team-sticker{ height: 140px; margin: 0 auto; }
  .footer-mid{ align-items:center; }
}
/* ============================
   Resize Home Page Section Images
   ============================ */

/* Applies to all main images in cards */
.img-frame,
.card img.img-fluid {
  width: 85%;                   /* shrink image width */
  max-width: 950px;             /* keep it comfortably wide */
  height: auto;
  margin: 0 auto 1.25rem auto;  /* center align + space below */
  display: block;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(10, 31, 68, 0.1);
}

/* On larger monitors, cap width slightly tighter for visual rhythm */
@media (min-width: 1400px) {
  .img-frame,
  .card img.img-fluid {
    width: 70%;
  }
}

/* On mobile, make sure images stay clean and readable */
@media (max-width: 768px) {
  .img-frame,
  .card img.img-fluid {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
  }
}
.bio-text {
  font-size: 0.85rem;   /* smaller text */
  line-height: 1.4;
  max-height: 200px;    /* limit hover box height */
  overflow-y: auto;     /* allow scrolling if text is long */
  padding-right: 8px;   /* space for scrollbar */
  animation: fadeIn 0.25s ease forwards;
}
/* Compact sponsors strip (bottom of footer) */
.footer-sponsors{
  text-align:center;
  margin: 6px 0 10px;           /* tiny bump; keeps footer slim */
}
.footer-sponsors__title{
  font-size: .95rem;
  font-weight: 700;
  color:#8EB6DC;
  letter-spacing:.3px;
  margin-bottom: 6px;
}
.footer-sponsors__logos{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}
.footer-sponsors__logos img{
  height: 32px;                 /* compact logos */
  width:auto;
  object-fit:contain;
  filter: brightness(0) invert(1);  /* makes logos read well on navy */
  opacity:.9;
  transition: opacity .2s ease, filter .2s ease;
}
.footer-sponsors__logos img:hover{
  opacity:1;
  /* want color-on-hover instead of white? comment out next line */
  /* filter:none; */
}

/* small screens: keep tidy */
@media (max-width: 575.98px){
  .footer-sponsors__logos{ gap:12px; }
  .footer-sponsors__logos img{ height: 28px; }
}
.footer-sponsors__logos {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
}
.footer-sponsors__logos img {
  display: block;
  max-height: 48px; /* or whatever you want */
  width: auto;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
/* ===== Scroll→Navbar collapse + progress bar ===== */
:root{
  --nav-h: 56px;              /* your bootstrap navbar height */
  --nav-bg: #0A1F44;          /* Deep Navy (your .bg-dark) */
  --grad-a: #0A1F44;          /* Deep Blue */
  --grad-b: #8EB6DC;          /* Light Blue */
}

/* animate the navbar out of view when collapsed */
.navbar {
  transform: translateY(0);
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  will-change: transform;
}

/* when page is scrolled, we lift the navbar up by its height */
body.nav-collapsed .navbar {
  transform: translateY(calc(-1 * var(--nav-h)));
  box-shadow: none;
}

/* the progress bar lives at the very top of the viewport */
#scroll-progress{
  position: fixed;
  left: 0;
  top: 0;                     /* always at the top; we control visibility by z-index */
  height: 4px;
  width: 0%;
  /* Start as the SAME color as navbar so it looks like the nav "became" the bar */
  background: var(--nav-bg);
  z-index: 999;               /* under the navbar at first */
  transition: width .18s ease-out, background .18s ease-out;
}

/* When the navbar is collapsed, bring the bar above content */
body.nav-collapsed #scroll-progress{
  z-index: 10000;
  /* As soon as it's visible, let it use your gradient while filling */
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
}

/* (nice-to-have) slightly darken navbar once you start scrolling */
.navbar.scrolled {
  background-color: rgba(10,31,68,.97) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
/* When navbar collapses, move logo up with it */
body.nav-collapsed .navbar-brand .navbar-logo {
  transform: translateY(-120%);
  opacity: 0;
  transition: transform .3s ease, opacity .25s ease;
}

/* Reset when navbar visible */
.navbar-brand .navbar-logo {
  transition: transform .3s ease, opacity .25s ease;
}
/* ===== Always-on Back to Top (corner pinned) ===== */
#back-to-top{
  position: fixed;
  right: 0;                  /* pin to the very corner */
  bottom: 0;                 /* no gap */
  z-index: 10000;
  cursor: pointer;
  line-height: 0;            /* kill inline spacing */
  transform: translate(0,0); /* ensure no inherited transforms */
}

#back-to-top img{
  display: block;            /* removes inline-image whitespace */
  width: 180px;              /* slightly bigger */
  height: auto;
  pointer-events: none;      /* img ignores clicks, anchor gets them */
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.22));
}

/* If the artwork has a tiny built-in transparent edge, tuck it in */
@media (min-width: 0px){
  #back-to-top{ right: -2px; bottom: -2px; }
}

/* Responsive tweak for phones */
@media (max-width: 768px){
  #back-to-top img{ width: 130px; }
}