/* ============================================================
   VERSION: 3.12
   LAST UPDATED: 2026-03-18
   RELEASE NOTES:
   - Added: Live widget background set to black.
   - Added: Join button styled white with black text.
   ============================================================ */
/* 1. LIGHT MODE ONLY - COLOR SYSTEM */
html:not(.dark) {
  --color-text-dark: #000000 !important;
  --color-text-default: #454545 !important;
  --color-text-light: #6D6D6D !important;
  --color-background-secondary: #F4F3F1 !important;
}

/* 2. SITE BUILDER (THEME ENGINE) */
:root {
  --theme-website-h1-font-family: var(--brand-font) !important;
  --theme-website-h2-font-family: var(--brand-font) !important;
  --theme-website-h3-font-family: var(--brand-font) !important;
  --theme-website-h4-font-family: var(--brand-font) !important;
  --theme-website-h5-font-family: var(--brand-font) !important;
  --theme-website-h6-font-family: var(--brand-font) !important;
  --theme-website-primary-button-default-font-family: var(--brand-font) !important;
  --theme-website-primary-button-hover-font-family: var(--brand-font) !important;
  --theme-website-primary-button-active-font-family: var(--brand-font) !important;
  --theme-website-primary-button-focus-font-family: var(--brand-font) !important;
  --theme-website-secondary-button-default-font-family: var(--brand-font) !important;
  --theme-website-secondary-button-hover-font-family: var(--brand-font) !important;
  --theme-website-secondary-button-active-font-family: var(--brand-font) !important;
  --theme-website-secondary-button-focus-font-family: var(--brand-font) !important;
}

/* 3. GENERAL UI (APPLICATION & COMPONENTS) */
[data-testid="welcome-banner-title"],
[data-testid="space-title-name"],
[data-testid="space-group-name"],
[data-testid="space-sidebar-item-name"],
[data-testid="post-title"],
[data-testid="event-title"],
[data-testid="card-title"],
[data-testid="member-name"],
[data-testid="modal-title"],
.p-post-card__title,
.p-event-card__title,
.p-course-card__title,
#sidebar--right__btn-quick-post,
h2.text-xl.font-bold,
h5.text-lg.font-semibold,
h4.text-lg.font-bold,
a.text-dark.text-xl.font-bold,
a.\!text-darkest.overflow-anywhere,
[data-testid="button"],
.circular-button {
  font-family: var(--brand-font) !important;
  font-weight: var(--brand-font-weight) !important;
  letter-spacing: var(--brand-letter-spacing) !important;
}

/* 4. MOBILE & TABLET UI CLEANUP */
@media only screen and (max-width: 1024px) {

  .header__user,
  [data-testid="user-profile-button"],
  [data-testid="notifications-menu"],
  [data-testid="chat-menu"],
  [data-testid="bookmarks-menu"],
  button[aria-labelledby="Search"],
  [data-testid="profile-section"],
  a[href="/messages"],
  button:has(svg.icon-bell),
  button:has(svg.icon-search),
  .community__brand {
    display: none !important;
  }
}

/* 5. DESKTOP IFRAME EMBED FIXES 
   Strict isolation to prevent clipping and alignment issues.
   ============================================================ */
@media only screen and (min-width: 1025px) {

  /* STANDARD MODALS (Events, Profiles) 
     Targeting floating modals that are not full-screen.
  */
  [data-testid="modal-content"]:not(:has(.self-end)):not(:has(.w-screen)) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: 100vh !important;
    /* 20px visible buffer + 64px offset */
    padding-top: 84px !important;
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
  }

  [data-testid="modal"]:not(.self-end):not(.h-full):not(.w-screen) {
    margin: 0 !important;
    max-height: 100% !important;
    width: auto !important;
    min-width: 650px;
    max-width: 90% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  /* ADMINISTRATIVE MODALS (Checklist, Editor)
     Ensuring full height starting from the very top (0px) of the iframe.
  */
  [data-testid="modal-content"]:has(.self-end),
  [data-testid="modal-content"]:has(.w-screen) {
    justify-content: flex-end !important;
    padding: 0 !important;
    /* Move whole content down slightly ONLY for admin modals to show 'X' button */
    margin-top: 64px !important;
    height: calc(100vh - 64px) !important;
  }

  /* Resetting the Modal box for Admin Views */
  [data-testid="modal"].self-end,
  [data-testid="modal"].w-screen {
    height: 100% !important;
    max-height: 100% !important;
    margin-top: 0 !important;
    border-radius: 12px 12px 0 0 !important;
  }

  /* Targeting the Standalone Admin Close (X) button specifically */
  button.fixed.right-5.top-6,
  button.fixed.lg\:top-1 {
    top: 74px !important;
    /* Moves it into the visible area below app header */
    z-index: 9999 !important;
  }

  /* Side Navigation Arrows */
  button:has(.icon-20-chevron-left),
  button:has(.icon-20-chevron-right) {
    top: calc(50% + 32px) !important;
  }
}

/* 6. GENERAL ACCESSIBILITY */
[data-testid="modal-body"],
#fullscreen-modal-body {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  max-height: 100% !important;
  -webkit-overflow-scrolling: touch;
}

/* 7. LIVE WIDGET CUSTOMIZATION */
.bg-sidebar-footer-live-indicator {
  background-color: #000000 !important;
}

.bg-sidebar-footer-live-indicator button[type="submit"] {
  background-color: #ffffff !important;
  color: #000000 !important;
}