:root{
  --brand-dark:#141826; /* from logo dark navy */
  --brand-primary:#1e3a8a; /* deep blue */
  --brand-accent:#3b82f6; /* sky blue */
  --brand-accent-2:#60a5fa; /* lighter */
}

body{background:#f7f9fc;color:#111}
.navbar.bg-primary{background:linear-gradient(90deg,#162d66,#2b6fd8)}
.btn-accent{background:var(--brand-accent);color:#fff;border:0}
.btn-accent:hover{background:#2f76f0;color:#fff}
.bg-accent{background:var(--brand-accent)!important}
.brand-title{font-weight:700}
.bg-gradient-brand{background:linear-gradient(135deg,#1e3a8a,#3b82f6);}
.icon-circle{width:48px;height:48px;border-radius:50%;position:relative;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.icon-circle i{font-size:1.25rem;line-height:1}
.count-badge{position:absolute;bottom:-6px;inset-inline-start:-6px;background:#0b5ed7;color:#fff;border-radius:999px;padding:.1rem .4rem;font-size:.7rem;line-height:1;box-shadow:0 .25rem .5rem rgba(0,0,0,.15)}
.community-card{transition:transform .1s ease, box-shadow .1s ease}
.community-card:hover{transform:translateY(-2px);box-shadow:0 .5rem 1rem rgba(0,0,0,.1)}
.alerts-holder>.alert{margin-bottom:.5rem}

/* RTL tweaks */
html[dir='rtl'] .form-check{padding-right:1.5em}

footer .text-muted{color:rgba(255,255,255,.6)!important}

/* Footer logo sizing */
.footer .footer-logo{height:44px; width:auto}

@media (max-width: 576px){
  .footer .footer-logo{height:32px}
}

/* AvenirArabic font and global typography */
@font-face{
  font-family:'AvenirArabic';
  src:url('../fonts/AvenirArabic-Medium.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'AvenirArabic';
  src:url('../fonts/avenir-arabic-heavy.ttf') format('truetype');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
/* Override base typography to use AvenirArabic globally */
body{font-family:'AvenirArabic','Tahoma','Geeza Pro','Noto Kufi Arabic','Segoe UI',Arial,sans-serif;line-height:1.7;font-weight:500;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}


/* Make logos readable on dark header by turning dark artwork to white */
.logo-white{filter:brightness(0) invert(1);}
@media (prefers-contrast: more){
  .logo-white{filter:brightness(0) invert(1) drop-shadow(0 0 0.25rem rgba(255,255,255,.35));}
}


/* Avatar styles */
.avatar-img{width:120px;height:120px;border-radius:50%;object-fit:cover;box-shadow:0 .25rem .5rem rgba(0,0,0,.1)}
.avatar-fallback{width:120px;height:120px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-accent);color:#fff;box-shadow:0 .25rem .5rem rgba(0,0,0,.1)}
.avatar-fallback i{font-size:3rem;line-height:1}


/* Small avatar variants for lists */
.avatar-sm{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 .25rem .5rem rgba(0,0,0,.08)}
.avatar-fallback-sm{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-accent);color:#fff;box-shadow:0 .25rem .5rem rgba(0,0,0,.08)}
.avatar-fallback-sm i{font-size:1.4rem;line-height:1}

/* Medium avatar for member cards */
.avatar-md{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 .25rem .5rem rgba(0,0,0,.1)}
.avatar-fallback-md{width:72px;height:72px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-accent);color:#fff;box-shadow:0 .25rem .5rem rgba(0,0,0,.1)}
.avatar-fallback-md i{font-size:2rem;line-height:1}

/* Member card styling */
.member-card{transition:transform .1s ease, box-shadow .15s ease, border-color .15s ease}
.member-card:hover{transform:translateY(-2px);box-shadow:0 .75rem 1.5rem rgba(0,0,0,.08)}

/* Signup form labels: make titles bold with a light separator under each label */
#signupForm .form-label{
  font-weight:700; /* bold */
  display:block;
  padding-bottom:.25rem;
  margin-bottom:.5rem;
  border-bottom:1px solid var(--bs-border-color);
}


/* Label icons and required asterisks */
.form-label .bi{vertical-align:middle;margin-inline-start:.25rem;color:var(--brand-primary)}
.form-label .req-asterisk{color:#dc3545;font-weight:800;margin-inline-start:.25rem;vertical-align:middle}

/* Member page: bold labels with light separator between label and data */
.member-details .field-label{
  font-weight:700;
  display:block;
  padding-bottom:.25rem;
  margin-bottom:.5rem;
  border-bottom:1px solid var(--bs-border-color);
  color:#6c757d; /* muted label color */
}
.member-details .field-value{
  color:#111;
  overflow-wrap:anywhere;
}

/* Utility: force LTR for number strings when needed */
.text-ltr{ direction:ltr; unicode-bidi:plaintext; }

/* Text justification utility for RTL paragraphs */
.text-justify{ text-align:justify; text-justify:inter-word; }

/* Mobile tweaks */
@media (max-width: 576px){
  /* Navbar logos smaller and hide vertical rule */
  .navbar .navbar-brand img{ height:40px !important; }
  .navbar .vr{ display:none !important; }
  /* Increase touch targets */
  .btn, .nav-link, .dropdown-item{ min-height:44px; }
  /* Bigger community icon circle for easier tap */
  .icon-circle{ width:56px; height:56px; }
  .icon-circle i{ font-size:1.35rem; }
  /* Community-specific sizes on small screens */
  .community-card .icon-circle{ width:72px; height:72px; }
  .community-logo{ height:96px; }
  /* Adjust badge overlap slightly */
  .count-badge{ bottom:-4px; inset-inline-start:-4px; }
  /* Smaller hero image on phones */
  .hero img{ max-height:96px !important; }
  /* Member avatars a bit larger for clarity */
  .avatar-md{ width:84px; height:84px; }
  /* Member page avatar smaller to fit */
  .avatar-img{ width:96px; height:96px; }
}

/* Safer wrapping for long community names */
.community-card h3{ overflow-wrap:anywhere; }

/* Clamp member names to two lines in cards */
.member-card .fw-bold{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Community logos on home cards */
.community-card .card-body{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem}

.community-logo{
  width:auto;
  height:140px; /* larger logo height to better fill the card */
  max-width:90%;
  object-fit:contain;
  margin-bottom:0.5rem;
}

/* Fallback icon circle when no logo: make it larger inside community cards */
.community-card .icon-circle{width:88px;height:88px;border-radius:50%;font-size:1.5rem}
.community-card .icon-circle i{font-size:2.25rem}