/* ========================================================
   RESPONSIVE GLOBAL FIXES - Mobile/Tablet/Desktop
   ======================================================== */

:root {
  --ft-primary-900: #5c0000;
  --ft-primary-700: #8b0000;
  --ft-primary-600: #a11a1a;
  --ft-accent-600: #c9a227;
  --ft-accent-500: #d4af37;
  --ft-accent-100: #f5e6b3;
}

/* 1. Prevent horizontal overflow globally */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* 2. All images are responsive by default */
img {
  max-width: 100%;
  height: auto;
}

.ft-genealogy-card-cover-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ct-member-avatar-wrap {
  display: block;
  flex: 0 0 auto;
}

.ct-member-avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 3. Wrap tables to enable horizontal scroll on small screens */
.ft-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 4. aspect-video utility for responsive iframes/maps */
.aspect-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.aspect-video iframe,
.aspect-video > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 5. Member card responsive */
.member-card {
  display: flex;
  flex-direction: column;
}

.ft-container {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .ft-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .ft-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.ft-btn-primary {
  background-image: linear-gradient(
    135deg,
    var(--ft-primary-700) 0%,
    var(--ft-primary-900) 100%
  );
  color: var(--ft-accent-100);
}

.ft-btn-primary:hover {
  filter: brightness(1.06);
}

.ft-card-border {
  border: 1px solid rgba(201, 162, 39, 0.3);
}

.ft-member-card {
  min-width: 0;
}

/* Keep only safe mobile width fallback rules. */
@media (max-width: 639px) {
  [style*="width: 1200px"],
  [style*="min-width: 1200px"] {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Shared admin layout responsiveness */
.ft-admin-shell {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.ft-admin-content {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.ft-admin-main {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.ft-admin-main > * {
  max-width: 100%;
}

.ft-admin-main img,
.ft-admin-main video,
.ft-admin-main canvas,
.ft-admin-main svg {
  max-width: 100%;
}

@media (max-width: 1024px) {
  .ft-admin-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 0.75rem 1rem !important;
  }

  .ft-admin-main .overflow-x-auto {
    max-width: 100%;
  }
}

/* Circular avatars across the system */
img[class*="avatar"],
img[src*="default-male.svg"],
img[src*="default-female.svg"],
#user-nav-btn img,
#user-nav-wrap img,
#user-menu-btn img,
.ft-admin-topbar img,
.member-avatar,
.ct-member-avatar,
#formAvatarPreview,
.ft-avatar {
  aspect-ratio: 1 / 1;
  border-radius: 9999px !important;
  object-fit: cover;
  object-position: center;
}

.ct-member-avatar-wrap {
  overflow: hidden;
  border-radius: 9999px;
}