/* Shared public-facing identity across authenticated and anonymous ICC shells. */
:root {
  --branding-header-logo-size: 74px;
  --branding-mobile-logo-size: 62px;
  --branding-footer-logo-size: 82px;
}
.logo-image {
  width: var(--branding-header-logo-size);
  height: var(--branding-header-logo-size);
  max-width: var(--branding-header-logo-size);
  max-height: var(--branding-header-logo-size);
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
}
.logo-image[hidden],
.footer-logo-image[hidden] { display: none !important; }
.footer-logo-image {
  width: var(--branding-footer-logo-size);
  height: var(--branding-footer-logo-size);
  max-width: var(--branding-footer-logo-size);
  max-height: var(--branding-footer-logo-size);
  object-fit: contain;
  object-position: center;
}
/* Fixed two-line organization identity, independent of logo presence. */
.logo-container .icc-brand-name {
  display: grid;
  grid-template-rows: auto auto;
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  line-height: 1.05;
}
.logo-container .icc-brand-name span {
  display: block;
  white-space: nowrap;
  overflow-wrap: normal;
}
@media (max-width:650px) {
  .logo-image {
    width: var(--branding-mobile-logo-size);
    height: var(--branding-mobile-logo-size);
    max-width: var(--branding-mobile-logo-size);
    max-height: var(--branding-mobile-logo-size);
  }
  .logo-container {
    flex: 0 0 auto;
    gap: 6px;
  }
  .logo-container .icc-brand-name {
    font-size: clamp(.58rem, 2.1vw, .72rem);
    letter-spacing: .015em;
  }
  .header-container { gap: 7px; }
  .mobile-header-donation {
    position: static;
    transform: none;
    margin-left: auto;
    margin-right: 4px;
    flex: 0 0 auto;
  }
  .mobile-menu-button { flex: 0 0 40px; width: 40px; }
}
@media (max-width:365px) {
  .logo-container { gap: 4px; }
  .logo-container .icc-brand-name { font-size: .54rem; letter-spacing: 0; }
  .mobile-header-donation { padding-left: 7px; padding-right: 7px; }
  .header-container { gap: 4px; }
  .mobile-menu-button { flex-basis: 36px; width: 36px; }
}

/* Header keeps its full two-line ICC identity independent of navigation length.
   The previous flex layout could shrink the brand container to 0px and paint
   the title over Main Page, even at common desktop widths. */
.logo-container { flex: 0 0 auto; }
@media (min-width: 1200px) {
  .header-container { width: min(calc(100% - 40px), 1340px); gap: 16px; }
  .desktop-navigation { gap: 8px; flex: 0 1 auto; }
}
@media (min-width: 1200px) and (max-width: 1320px) {
  .desktop-navigation { gap: 6px; }
  .navigation-tab, .dropdown-trigger { font-size: .83rem; gap: 5px; }
}
/* Use the existing mobile navigation when the full desktop menu cannot fit.
   Scope these overrides to the formerly-overlapping 981–1199px range; do not
   switch other page grids to mobile layouts at these widths. */
@media (min-width: 981px) and (max-width: 1199px) {
  .header-container { gap: 10px; }
  .desktop-navigation { display: none; }
  .mobile-header-donation { display: inline-flex; position: static; transform: none; margin-left: auto; margin-right: 4px; flex: 0 0 auto; }
  .mobile-menu-button { display: inline-flex; flex: 0 0 44px; }
}
/* Staff sign-in uses only a user icon; authenticated state shows Sign out.
   Labels remain available to assistive technology, keyboard and touch users. */
.icc-staff-entry { display: inline-flex; align-items: center; justify-content: center; align-self: center; font-weight: 600; font-size: 11px; line-height: 1.25; color: inherit; background: transparent; text-decoration: none; padding: 8px 10px; border: 1px solid currentColor; border-radius: 9px; white-space: nowrap; cursor: pointer; }
.icc-staff-sign-in { width: 36px; height: 36px; min-width: 36px; padding: 0; }
.icc-staff-sign-in svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icc-staff-entry:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.icc-staff-mobile { display: inline-flex; width: max-content; margin: 12px 16px; }
.icc-staff-entry[hidden] { display: none !important; }

/* Stage 5.7.72: separate public/admin page visibility and additional covers. */
[data-icc-page-disabled]{display:none!important}
#page-what-is-islam .islam-cinematic-intro[style*="--islam-cover-image"] .islam-cinematic-intro-media{background-image:var(--islam-cover-image);background-size:cover;background-position:var(--islam-cover-x,50%) var(--islam-cover-y,50%)}
#page-what-is-islam .islam-cinematic-intro[style*="--islam-cover-image"] .islam-cinematic-intro-media>img{display:none!important}
#page-membership .membership-top-hero[style*="--membership-cover-image"]{background-image:linear-gradient(rgba(12,30,23,var(--membership-overlay,.65)),rgba(12,30,23,var(--membership-overlay,.65))),var(--membership-cover-image);background-size:cover;background-position:var(--membership-cover-x,50%) var(--membership-cover-y,50%)}
#page-certificate-request .certificate-top-hero[style*="--certificate-cover-image"]{background-image:linear-gradient(rgba(12,30,23,var(--certificate-overlay,.65)),rgba(12,30,23,var(--certificate-overlay,.65))),var(--certificate-cover-image);background-size:cover;background-position:var(--certificate-cover-x,50%) var(--certificate-cover-y,50%)}