/* ===== Theme tokens ===== */
:root {
  --bg: #000;
  --fg: #fff;
  --fg-muted: rgba(255, 255, 255, 0.6);
  --fg-subtle: rgba(255, 255, 255, 0.92);
  --border: rgba(255, 255, 255, 0.15);
  --hero-min: 60vh;
  --nav-h: 70px;
  /* fallback; JS updates this dynamically */
}

/* ===== Base ===== */
html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  /* adjust if your navbar is taller/shorter */
}


/* any in-page anchor target with an id will keep this margin when scrolled into view */
main[id],
section[id],
header[id],
footer[id] {
  scroll-margin-top: var(--nav-h);
}

a,
.nav-link,
.navbar-brand {
  color: var(--fg);
}

a:hover,
.nav-link:hover {
  color: #ddd;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Optional: make Bootstrap's .text-muted readable on black */
.text-muted {
  color: var(--fg-muted) !important;
}

/* ===== Navbar ===== */
.navbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.navbar .nav-link:focus,
.navbar .nav-link:hover {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Brand logo (single definition) */
.brand-logo {
  width: 61px;
  height: 36px;
  object-fit: contain;
}

/* ===== Main / Hero ===== */
main {
  background: var(--bg);
  color: var(--fg);
  min-height: var(--hero-min);
}

#home {
  min-height: calc(100vh - var(--nav-h, 70px));
  /* fill full screen below navbar */
  display: flex;
  align-items: center;
  /* vertical center */
  justify-content: center;
  /* horizontal center */
  text-align: center;
}

#home .container {
  padding-top: 0;
  /* remove vertical padding */
  padding-bottom: 0;
}

.hero-logo {
  max-width: 75%;
  /* adjust to your logo dimensions */
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}

/* ===== Footer (sticky handled by body flex in HTML) ===== */
.footer-texture {
  background: var(--bg);
  color: var(--fg);
  border-top: 1px solid var(--border);
  position: relative;
}

/* --- Optional: enable subtle texture on the footer ---
.footer-texture {
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.06) 0,
      rgba(255,255,255,0.06) 2px,
      rgba(255,255,255,0.03) 2px,
      rgba(255,255,255,0.03) 6px
    );
}
*/

/* Utility tints for light-on-dark */
.text-light-override,
.link-light-override {
  color: var(--fg-subtle);
}

.link-light-override:hover {
  color: var(--fg);
}

/* Small-print readability over dark */
.small-opaque {
  color: rgba(255, 255, 255, 0.8);
}


/* Members gallery */
.member-card {
  background: var(--bg);
  /* pure black from your tokens */
  color: var(--fg);
  /* white text */
  border: 1px solid var(--border);
  /* subtle light border */
  border-radius: .75rem;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.member-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.08);
}

/* Square images that crop nicely */
.member-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* keeps all cards same height */
  object-fit: cover;
  /* fills without distortion */
  display: block;
}

/* ==== Flip Cards (Members) =========================================== */
/* The JS sets:
   - --img-box-h (px) so .member-photo and .member-portrait always match
   - adds/removes .is-flipped and .is-animating on .flip-card
*/

.flip-card {
  perspective: 1200px;
  /* enable 3D depth */
  cursor: pointer;
  outline: none;
  /* we'll give our own focus style */
}

/* stack both faces in the same grid cell; GPU-accelerated 3D rotate */
.flip-inner {
  display: grid;
  /* lets content define height on first paint */
  position: relative;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .6, .2, 1);
  will-change: transform;
}

.flip-card.is-flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-face {
  grid-area: 1 / 1;
  /* overlay faces in one cell */
  backface-visibility: hidden;
  border-radius: .75rem;
  overflow: hidden;
}

/* rotate the back so it reads correctly after the parent rotates */
.flip-back {
  transform: rotateY(180deg);
}

/* Make both faces share the same internal layout (image + body) */
.flip-front .member-card,
.flip-back .member-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Unified image box: both images get the same pixel height via --img-box-h */
.member-photo,
.member-portrait {
  width: 100%;
  height: var(--img-box-h, auto);
  /* set per card by JS */
  object-fit: cover;
  display: block;
}


.member-portrait-small,
.flip-back .member-portrait-small {
  display: block;
  margin: 1rem auto 0.5rem auto;
  /* margin to the parent card */
  width: calc(100% - 2rem);
  /* use almost full card width */
  max-width: 320px;
  /* don’t get too huge on large screens */
  aspect-ratio: 1 / 1;
  /* perfect square -> perfect circle */
  height: auto;
  /* auto height; aspect-ratio keeps it square */
  border-radius: 50%;
  /* circle */
  object-fit: cover;
  /* crop to circle nicely */
}

/* Back text scrolls if longer, without changing the card's outer size */
.flip-back .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* start titles/texts at the same top position */
  text-align: left;
  margin-bottom: 0;
  overflow: visible;
  /* no inner scrolling */
  max-height: none;
}

.flip-back .card-title { margin-top: .25rem; }

.flip-back .card-body::-webkit-scrollbar {
  /* Chrome/Safari/Edge */
  width: 0;
  height: 0;
}

/* Optional: subtle hover micro-tilt on desktop, disabled while animating */
@media (hover:hover) and (pointer:fine) {
  .flip-card:not(.is-flipped):not(.is-animating):hover .flip-inner {
    transform: rotateY(8deg);
  }
}

/* Accessibility: clear keyboard focus ring */
.flip-card:focus {
  outline: 2px solid var(--fg, #fff);
  outline-offset: 2px;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .flip-inner {
    transition: transform .2s linear;
  }
}


/* Dark accordion style */
.accordion-item {
  background-color: #212529;
  /* same as .bg-dark */
  color: #f8f9fa;
  /* Bootstrap light text */
  border: 1px solid #444;
}

.accordion-button {
  background-color: #212529;
  color: #f8f9fa;
}

.accordion-button:not(.collapsed) {
  background-color: #343a40;
  /* slightly lighter when opened */
  color: #fff;
}

.accordion-body {
  background-color: #2b2f33;
  color: #f8f9fa;
}

.accordion-button:focus {
  box-shadow: none;
}

/* Highlight today */
.accordion-item.today-highlight .accordion-button {
  background-color: #ffffff;
  /* Bootstrap warning */
  color: #000;
  /* contrast text */
  font-weight: bold;
}

/* ===== Gallery ===== */
#gallery .folder-card {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#gallery .folder-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}

#gallery .folder-name {
  font-weight: 600;
  letter-spacing: 0.3px;
}

#gallery .folder-meta {
  color: var(--fg-muted);
}

.gallery-viewer {
  min-height: 60vh;
  background: #0b0b0b;
}

.gallery-viewer img {
  max-height: 80vh;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.5);
  color: var(--fg);
  font-size: 2.25rem;
  line-height: 1;
  width: 48px;
  height: 64px;
  border-radius: .5rem;
  display: grid;
  place-items: center;
  opacity: .9;
}

.gallery-prev {
  left: 1rem;
}

.gallery-next {
  right: 1rem;
}

.gallery-arrow:hover {
  background: rgba(255, 255, 255, 0.12);
}

.gallery-thumbs {
  background: #121212;
  padding: .5rem;
}

.thumb-strip-inner {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .25rem;
}

.thumb-strip-inner::-webkit-scrollbar {
  height: 8px;
}

.thumb-strip-inner::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

.thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 72px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: .35rem;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}

.thumb:hover {
  transform: translateY(-2px);
}

.thumb.active {
  border-color: #fff;
}

@media (max-width: 576px) {
  .gallery-viewer img {
    max-height: 60vh;
  }
}