body {
  font-family: 'Raleway', 'sans-serif';
  background-color: #fff;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

p {
  font-size: 14px;
  color: #7a7a7a;
  line-height: 24px;
  left: 0.25px;
}

section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.section-heading {
  text-align: center;
  margin-bottom: 60px;
}

.section-heading span {
  font-size: 17px;
  display: block;
  margin: 0px;
  color: #4883ff;
}

.section-heading h2 {
  margin-bottom: 0px;
  margin-top: 14px;
  font-size: 23px;
  font-weight: 600;
  color: #232323;
  letter-spacing: 0.5px;
}

.blue-button a {
  display: inline-block;
  background-color: #4883ff;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 16px;
  text-decoration: none;
  border: 2px solid #4883ff;
  transition: all 0.5s;
}

.blue-button a:hover {
  background-color: transparent;
  color: #4883ff;
}

/* Header */
#header {
  overflow: visible;
  position: relative;
  background-color: #fff;
}

#primary-nav li a {
  color: #121212;
  font-weight: bold;
  line-height: 50px;
  padding: 0px 15px;
  font-size: 15px;
  transition: all 0.5s;
}

#primary-nav .active > a,
#primary-nav li > a:hover {
  color: #4883ff;
}

/* Banner */
section.banner {
  padding: 0px;
}

.banner {
  width: 100%;
  min-height: 300px;          /* default banner height */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Secondary banners should not collapse when title is empty */
.banner.banner-secondary {
  min-height: 260px;
}

/* OLD banner rule – removed because height:100% caused collapse
.banner {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
*/

.banner .banner-caption {
  padding: 200px 0px;
}

/* *** NEW: Smaller secondary banners (e.g. membership/register) *** */
.banner.banner-secondary .banner-caption {
  padding: 80px 0px;
}

.banner .banner-caption h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 42px;
  letter-spacing: 0.5px;
  color: #fff;
}

.banner .banner-caption span {
  font-size: 22px;
  color: #fff;
  letter-spacing: 0.5px;
}

/* Buttons */
.modal-btn {
  display: inline-block;
  background-color: #4883ff;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 16px;
  text-decoration: none;
  border: 2px solid #4883ff;
  transition: all 0.5s;
}
.modal-btn:hover {
  background-color: transparent;
  color: #4883ff;
}

/* Footer */
footer {
  padding: 80px 0px 70px 0px;
  border-top: 1px solid #ddd;
}

footer .footer-heading h4 {
  font-size: 21px;
  color: #232323;
  letter-spacing: 0.5px;
  margin-top: 15px;
  margin-bottom: 40px;
}

.sub-footer p {
  text-align: center;
  display: inline-block;
  background-color: #f4f4f4;
  width: 100%;
  margin-bottom: 0px;
  padding: 30px 0px;
  font-size: 15px;
  color: #aaaaaa;
}

/* Member Directory (legacy parts) */
.biography-preview {
  font-size: 0.9em;
  color: #444;
  margin-top: 0.5em;
}

.pjMlMemberInner {
  transition: transform 0.1s ease-in-out, box-shadow 0.2s;
}

.pjMlMemberInner:hover {
  transform: scale(1.02);
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.intro-text {
  text-align: left;
  margin: 0 0 40px 0;
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

.edit-record-btn {
  text-align: left;
  margin-bottom: 30px;
}

.edit-record-btn .edit-btn {
  background-color: #4883ff;
  color: #fff;
  border: 2px solid #4883ff;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.edit-record-btn .edit-btn:hover {
  background-color: transparent;
  color: #4883ff;
}

/* ============================================================
   FINAL Member Directory and Admin Banner fixes
   ============================================================ */

/* Filmstrip scaling */
header#header .filmstrip-container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Admin banner */
.admin-banner {
  margin-bottom: 25px;
  background: #e9f3ff;
  border: 1px solid #b6d4fe;
  color: #004085;
  padding: 12px 20px;
  border-radius: 6px;
  text-align: center;
  font-weight: 600;
}

/* Directory grid layout */
.member-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.member-grid > div {
  flex: 1 1 45%;
  min-width: 280px;
}

/* Member card */
.member-card {
  display: block;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  padding: 15px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  transition: transform 0.1s ease-in-out, box-shadow 0.2s;
}
.member-card:hover {
  transform: scale(1.01);
  box-shadow: 0 0 8px rgba(0,0,0,0.15);
}

/* Inner layout */
.member-card-inner {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Avatar */
.member-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
}
.member-avatar img {
  max-width: 100%;
  height: auto;
  border-radius: 50%;
}

/* Info */
.member-info p {
  margin: 0 0 5px 0;
  line-height: 1.4;
}
.member-info .badge {
  display: inline-block;
  background: #6c757d;
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  margin-right: 4px;
  margin-bottom: 3px;
}

/* Wrapper */
.wrap {
  font-family: 'Raleway', sans-serif;
  color: #333;
}

/* Responsive cards */
@media (max-width: 768px) {
  .member-grid > div {
    flex: 1 1 100%;
  }
}

/* --- Restore main navigation horizontal layout --- */
#primary-nav ul.menu,
#primary-nav ul.dropdown,
#primary-nav ul.menu > li {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

#primary-nav ul.menu {
  text-align: center;
  padding: 0;
  margin: 0 auto;
}

#primary-nav ul.menu > li a {
  display: inline-block;
  line-height: 50px;
  padding: 0 15px;
  font-weight: 500;
  color: #121212;
}

#primary-nav ul.menu > li a:hover,
#primary-nav ul.menu > li.active > a {
  color: #4883ff;
}

header#header nav#primary-nav {
  text-align: center;
}

header#header nav#primary-nav .filmstrip-container {
  margin-top: 10px;
}

/* === Member Directory cleanup === */

/* Remove unwanted panel/border nesting */
.pjMlMemberInner,
.pjMlMemberInner .panel,
.pjMlMemberInner .panel-body,
.pjMlMemberInner .pjMlMemberInfo,
.pjMlMemberInner .pjMlMemberName,
.pjMlMemberInner .pjMlMemberEmail {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Keep just one visible outer border box */
.pjMlMember {
  padding: 10px;
}

.pjMlMemberInner {
  display: block;
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-bottom: 25px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.1s ease-in-out, box-shadow 0.2s;
}

.pjMlMemberInner:hover {
  transform: scale(1.01);
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* Make sure only the card has background, not inner content */
.pjMlMemberInner .pjMlMemberAvatar,
.pjMlMemberInner .pjMlMemberInfo {
  background: none !important;
}

/* Remove background from text fields that might look like boxes */
.pjMlMemberInner p {
  background: none !important;
  border: none !important;
  margin: 0.3em 0;
}

/* === HARD RESET for Member Directory cards === */

/* Wipe any Bootstrap or inline panel borders */
.pjMlMemberInner,
.pjMlMemberInner * {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Single clean card border */
.pjMlMemberInner {
  display: block !important;
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  padding: 15px !important;
  margin-bottom: 25px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.1s ease-in-out, box-shadow 0.2s ease;
}

.pjMlMemberInner:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Avatar, name, email: no separate boxes */
.pjMlMemberInner img,
.pjMlMemberInner .pjMlMemberAvatar,
.pjMlMemberInner .pjMlMemberInfo,
.pjMlMemberInner .pjMlMemberName,
.pjMlMemberInner .pjMlMemberEmail {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Compact spacing */
.pjMlMemberInner p,
.pjMlMemberInner h4,
.pjMlMemberInner span {
  margin: 4px 0 !important;
}

/* Prevent Bootstrap .panel styles from leaking */
.panel,
.panel-default,
.panel-body {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* === FINAL OVERRIDE — remove inner boxes, keep single border === */

/* Disable any bootstrap/panel/card residuals */
.member-card * {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Reinstate the outer card only */
.member-card {
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
  padding: 15px !important;
  margin-bottom: 25px !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.1s ease-in-out, box-shadow 0.2s ease;
}

/* Hover effect */
.member-card:hover {
  transform: scale(1.01);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
}

/* Avatar & text layout remain */
.member-avatar {
  flex: 0 0 80px !important;
  height: 80px !important;
  margin-right: 15px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #eaeaea !important;
}
.member-avatar img {
  width: 100% !important;
  height: auto !important;
  border-radius: 50% !important;
}
.member-info {
  flex: 1 1 auto !important;
}
.member-info p {
  margin: 3px 0 !important;
}

/* =========================================================
   MEMBER DIRECTORY — UNIFORM CARD HEIGHT FIX
   ========================================================= */

/* Make all cards equal height within each row */
/* .row {*/
/*   display: flex;*/
/*   flex-wrap: wrap;*/
/*   align-items: stretch;*/
/* }*/

/* ONLY apply flex to member directory rows */
.member-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Force equal height for each member-card */
.member-card {
  flex: 1 1 calc(50% - 20px);
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 200px; /* baseline height */
  max-height: 280px; /* prevents extreme growth */
  overflow: hidden;
}

/* Reserve space for three lines of biography text */
.biography-preview {
  font-size: 0.9em !important;
  color: #555 !important;
  margin-top: 6px !important;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* limit to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make sure text and images stay inside bounds */
.member-avatar,
.member-info {
  flex-shrink: 0;
}

/* Adjust for smaller screens */
@media (max-width: 768px) {
  .row {
    display: block;
  }
  .member-card {
    max-height: none;
    flex: none;
    width: 100%;
    margin-bottom: 20px;
  }
}

/* Committee title styling */
.committee-title {
  font-size: 0.9em;
  font-weight: 500;
  color: #777;
  margin-top: -2px;
  margin-bottom: 4px;
}

/* Fix for Member Directory skill badges */
.pjMlMemberSkills .badge.bg-secondary {
  background-color: #555 !important;
  color: #fff !important;
  font-weight: 500;
}

#primary-nav-button {
  display: none !important;
}

/* --- Navigation dropdown fix --- */
#primary-nav ul ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  padding: 0;
  margin: 0;
  list-style: none;
  min-width: 180px;
  border: 1px solid #ddd;
  z-index: 999;
}

#primary-nav ul ul li {
  display: block;
  width: 100%;
}

#primary-nav ul ul a {
  display: block;
  padding: 10px 15px;
  color: #333 !important;
  background: #fff;
}

#primary-nav ul ul a:hover {
  background: #eee;
  color: #000 !important;
}

/* show submenu on hover */
#primary-nav li.dropdown:hover > ul.sub-menu {
  display: block;
}

/* keep parent link styling consistent */
#primary-nav li a {
  color: #000;
  text-decoration: none;
}

/* --- Force dropdown submenu spacing override --- */
#primary-nav ul.sub-menu,
#primary-nav ul.sub-menu li,
#primary-nav ul.sub-menu a {
  line-height: 1.1 !important;   /* tighter vertical spacing */
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

#primary-nav ul.sub-menu a {
  display: block;
  padding-left: 12px !important;
  padding-right: 12px !important;
  font-size: 14px !important;
  color: #000 !important;
  text-decoration: none;
}

#primary-nav ul.sub-menu a:hover {
  background: #f8f8f8 !important;
  color: #007bff !important;
}

/* =========================================================
   GLOBAL COMPACT VIEW RESET — SDFM classic layout
   ========================================================= */

/* --- Global typography & spacing --- */
body, p, li, td, th {
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 8px;
}

/* --- Headings compact --- */
h1, h2, h3, h4, h5, h6 {
  margin-top: 10px;
  margin-bottom: 6px;
  line-height: 1.2;
}

/* --- Buttons & inputs --- */
button, input, select, textarea {
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1.2;
}

/* --- Bootstrap override for compact grid spacing --- */
/*.container, .row, [class*="col-"] {*/
 /* margin-bottom: 8px;*/
/*}*/

/* --- Navigation compactness --- */
#primary-nav ul.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding: 4px 0 4px 16px;
}

#primary-nav ul.menu > li > a {
  display: block;
  padding: 3px 8px;
  line-height: 1.1;
  font-size: 15px;
  color: #000;
  text-decoration: none;
}

#primary-nav ul.menu > li > a:hover {
  color: #007bff;
}

/* --- Dropdowns tighter --- */
#primary-nav ul.sub-menu {
  border: 1px solid #ccc;
  background: #fff;
  padding: 2px 0;
  margin: 0;
  list-style: none;
}

#primary-nav ul.sub-menu a {
  display: block;
  line-height: 1.1;
  padding: 4px 10px;
  font-size: 14px;
  color: #000;
}

#primary-nav ul.sub-menu a:hover {
  background: #f8f8f8;
  color: #007bff;
}

/* --- Compact cards & panels --- */
.panel-body, .card-body {
  padding: 10px 12px;
  line-height: 1.3;
}

/* --- Compact footer --- */
footer, .sub-footer {
  font-size: 14px;
  line-height: 1.3;
  padding: 6px 0;
}

/* --- Responsive tweak for mobile (still usable) --- */
@media (max-width: 768px) {
  body, p, li {
    line-height: 1.4;
  }
  #primary-nav ul.sub-menu a {
    padding: 8px 12px;
    line-height: 1.3;
  }
}

#primary-nav ul.sub-menu li a {
  line-height: 1.1 !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

/* =========================================================
   SDFM MOBILE RESPONSIVE FIX  — 2025-11 update
   ========================================================= */
@media (max-width: 768px) {

  /* --- Banner smaller --- */
  .banner {
    height: 33vh !important;                /* one-third height */
    background-size: cover;
    background-position: center;
  }
  .banner .banner-caption {
    padding: 60px 0 !important;             /* reduced vertical space */
  }
  .banner .banner-caption h2 {
    font-size: 22px !important;             /* ~half size */
    line-height: 1.2 !important;
  }
  .banner .banner-caption span {
    font-size: 12px !important;
  }

  /* --- Compact header/menu --- */
  #header {
    padding: 4px 0;
  }

  /* Make "Menu" button visible and usable */
  #primary-nav-button {
    display: block !important;
    background: #4883ff;
    color: #fff;
    border: none;
    padding: 6px 12px;
    margin: 6px 12px;
    font-size: 16px;
    border-radius: 4px;
  }

  /* Hide menu by default */
  #primary-nav ul.menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ccc;
    padding: 10px;
  }

  /* Show menu when "menu-open" class is added */
  #header.menu-open #primary-nav ul.menu {
    display: flex;
  }

  /* Nested dropdowns expand inline */
  #primary-nav ul.sub-menu {
    position: static;
    border: none;
    width: 100%;
    padding: 0;
    margin: 0;
    background: #f9f9f9;
  }
  #primary-nav ul.sub-menu a {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.2;
  }

  /* Filmstrip hidden for compact view */
  .filmstrip-container img {
    display: none !important;
  }
}



/* =========================================================
   KnowledgeBase – definitive iOS Safari image fix
   ========================================================= */

.kb-article img {
    display: block;

    /* Kill Safari’s forced sizing */
    max-width: none !important;
    width: 100%;

    height: auto !important;
    aspect-ratio: auto !important;

    /* Defensive: undo any inherited behaviour */
    object-fit: contain !important;
}

/* =========================================================
   KnowledgeBase filter bar – FINAL FIX
   ========================================================= */

form.kb-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap; /* force single line */
}

/* Kill Bootstrap form-control behaviour */
.kb-category-select {
    width: auto !important;
    min-width: 220px;

    height: 34px;              /* EXACT Bootstrap btn height */
    padding: 6px 12px;

    display: inline-block;
    vertical-align: middle;

    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
}

/* Buttons stay aligned */
form.kb-filters .btn {
    height: 34px;
    line-height: 20px;
    padding: 6px 12px;
    white-space: nowrap;
}



/* =========================================================
   CLEAN BANNER SYSTEM (AUDITED FIX)
   ========================================================= */

/* Banner container sizing */
section.banner {
  padding: 0;
}

.banner {
  width: 100%;
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  position: relative;
}

/* Secondary banners */
.banner.banner-secondary {
  height: 260px;
}

/* Caption positioning – no layout influence */
.banner .banner-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .banner {
    height: 200px;
  }
  .banner.banner-secondary {
    height: 160px;
  }
  .banner .banner-caption h2 {
    font-size: 22px;
  }
}
/* =========================================================
   YouTube Uploads
   ========================================================= */
.action-buttons .youtube-awaiting {
    border: 2px solid #dc3545;
    background: transparent;
}

.action-buttons .youtube-awaiting:hover {
    background: #dc3545;
}

/* =========================================================
   YouTube Videos buttons
   ========================================================= */
   
table select.form-control-sm {
    width: auto;
    min-width: 120px;
    display: inline-block;
}

table input[type="checkbox"] {
    transform: scale(1.1);
}
/* =========================================================
   Movies pages
   ========================================================= */

.movies-list {
    margin-top: 20px;
}

.movie-item {
    display: flex;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #e5e5e5;
}

.movie-item:last-child {
    border-bottom: none;
}

.movie-thumb img {
    width: 180px;
    height: auto;
    border-radius: 4px;
}

.movie-meta h2 {
    margin-top: 0;
    font-size: 22px;
}

.movie-meta h2 a {
    color: #333;
    text-decoration: none;
}

.movie-meta h2 a:hover {
    text-decoration: underline;
}

.movie-meta .movie-byline {
    color: #777;
    font-size: 14px;
}

/* =========================================================
   Movie view page
   ========================================================= */

.movie-back {
    margin-bottom: 15px;
}

.movie-player {
    margin: 20px 0;
}

.movie-player iframe {
    width: 100%;
    height: 520px;
}

.movie-description {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 15px;
}

.movie-credits {
    margin-top: 25px;
}

.movie-credits h3 {
    margin-top: 0;
}

.movie-credits ul {
    list-style: none;
    padding-left: 0;
}

.movie-credits li {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}

.movie-credits strong {
    display: inline-block;
    min-width: 140px;
}

/* Members-only badge */
.members-badge {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
background: #007bff; /* Bootstrap blue */
    border-radius: 50%;
    margin-right: 8px;
}
/* =========================================================
   Responsive tweaks
   ========================================================= */

@media (max-width: 768px) {

    .movie-item {
        flex-direction: column;
    }

    .movie-thumb img {
        width: 100%;
        max-width: 320px;
    }

    .movie-player iframe {
        height: 280px;
    }

    .movie-credits strong {
        min-width: auto;
        display: block;
    }
    
    
}

/* =========================================================
   FINAL HEADER/BANNER GAP FIX
========================================================= */

section.banner,
section.banner.banner-secondary {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#header .container,
#header .row,
#header .col-md-12 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.filmstrip-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 0;
}







/* =========================================================
   REMOVE GAP ABOVE PAGE BANNER
========================================================= */

.wrap {
    padding-top: 10px !important;
    margin-top: 0 !important;
}

.page-banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 0;
}

#header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#header + .page-banner {
    margin-top: 0 !important;
}

/* =========================================================
   MEMBER HEADER TOP GAP
========================================================= */

.header2dev #header {
    margin-top: 5px !important;
}