*,
*::before,
*::after { box-sizing: border-box; }

/* Sticky footer + prevent sideways scroll hacks */
html, body { min-height: 100%; }
body {
  margin: 0 !important;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: visible !important;
}
main {
  flex: 1 0 auto;
  padding-top: var(--navbar-height, 80px) !important;
}
footer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100%;
  margin-top: 5vh auto;
}

/* Images/media never overflow */
img, video, iframe { max-width: 100%; height: auto; display: block; }

/* Banner height sane across sizes */
.banner { height: 30vh; }
@media (min-width: 768px)  { .banner { height: 35vh; } }
@media (min-width: 1024px) { .banner { height: 40vh; } }


/* Font explosion on tablets (768–1200), restore normal sizes */
@media (min-width: 768px) and (max-width: 1200px) {
  html { font-size: 16px !important; }
  h1   { font-size: 200% !important; }
  h2   { font-size: 150% !important; }
  h3   { font-size: 120% !important; }
  h4, h5, h6, p, span, a { font-size: inherit !important; }
}

/* 2) Nav stacking up to 1200px, only stack on phones, not iPad+ */
@media (max-width: 767.98px) {
  .navbar-nav { flex-direction: column !important; }
}
@media (min-width: 768px) {
  .navbar-expand-md .navbar-nav { flex-direction: row !important; gap: .25rem .75rem; }
}

/* Flex sections flow into columns */
.flexContainer { display: flex; flex-wrap: wrap; gap: 1rem; }
.flexContainer > * { flex: 1 1 300px; min-width: 0; }

/* Keep long code/tables from causing sideways scroll */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* Only use hover-to-open dropdowns on devices that actually have a mouse */
@media (hover: hover) and (pointer: fine) {
  .nav-item.dropdown:hover .dropdown-menu { display: block; margin-top: 0; }
}

/* Carousel fix (attempt)*/
@media (max-width: 768px) {
  .fixed-background { background-attachment: scroll !important; }
}

h1 { font-size: clamp(1.6rem, 4vw, 2rem); }
h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); }

.committee-card,
.admin-card {
  display: flex;
  align-items: left;
  gap: 12px;
}

.committee-card img.card-logo,
.admin-card img.card-logo,
.card-logo {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain;
  display: inline-block;
  flex: 0 0 60px;
}

/* In case something over-constrained images elsewhere */
.committee-card img,
.admin-card img {
  max-width: none;
}