:root {
  --mosque-green: #0b6848;
  --mosque-green-dark: #073f2e;
  --mosque-green-soft: #dfeee7;
  --mosque-gold: #a78635;
  --mosque-cream: #fbf7eb;
  --mosque-border: #ded4b8;
  --mosque-ink: #22332c;
}

body.public-site {
  background: var(--mosque-cream);
  color: var(--mosque-ink);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

body.public-site::before {
  background: url("../images/mosque-watermark.png") center bottom 4.5rem / min(92vw, 72rem) auto no-repeat;
  content: "";
  inset: 0;
  opacity: .14;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

.public-header,
.public-shell,
.public-footer {
  position: relative;
  z-index: 1;
}

.public-header {
  background: rgba(251, 247, 235, .96);
  border-bottom: 1px solid var(--mosque-border);
  z-index: 10;
}
.public-header-inner { position: relative; z-index: 2; }

.brand-link { color: var(--mosque-green-dark); min-width: 0; }
.brand-link:hover { color: var(--mosque-green); }
.brand-mark { flex: 0 0 auto; height: 3rem; width: 3rem; }
.brand-name { font-size: 1rem; line-height: 1.05; letter-spacing: .02em; }
.brand-name span { display: block; }
.brand-name span:last-child { font-weight: 400; }

.public-nav-link {
  color: var(--mosque-green-dark);
  font-weight: 600;
  text-decoration: none;
}
.public-nav-link:hover { color: var(--mosque-green); }
.language-button { border-color: var(--mosque-border); color: var(--mosque-green-dark); }
.language-button.active { background: var(--mosque-green-dark); color: #fff; }

.public-nav-mobile summary {
  border: 1px solid var(--mosque-border);
  border-radius: .5rem;
  color: var(--mosque-green-dark);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  padding: .5rem .75rem;
}
.public-nav-mobile summary::-webkit-details-marker { display: none; }
.public-nav-mobile[open] .mobile-menu { display: flex; }
.mobile-menu {
  background: #fffdf7;
  border: 1px solid var(--mosque-border);
  border-radius: .75rem;
  box-shadow: 0 .75rem 2rem rgba(7, 63, 46, .12);
  display: none;
  inset-inline-end: 0;
  min-width: 15rem;
  padding: 1rem;
  position: absolute;
  top: calc(100% + .4rem);
  z-index: 1;
}

/* The SVG artboards are fully framed at 1200×360; excess height came from the
   surrounding padding/margins, so keep approved viewBoxes intact and trim CSS. */
.quran-banner {
  color: #53645d;
  max-width: 58rem;
  padding-block: .35rem !important;
  position: relative;
}
.quran-banner::before {
  border: 1px solid rgba(167, 134, 53, .14);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  content: "";
  inset: .15rem 12% auto;
  height: 2.35rem;
  pointer-events: none;
  position: absolute;
}
.quran-calligraphy {
  display: block;
  height: auto;
  margin-block: 0 .25rem;
  max-width: 50rem;
  width: 100%;
}
.quran-verse { font-family: Georgia, "Times New Roman", serif; font-size: 1rem; }
[dir="rtl"] .quran-verse { font-family: Tahoma, Arial, sans-serif; font-size: 1.16rem; line-height: 1.9; }
.quran-reference { color: var(--mosque-gold); font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.quran-divider { background: var(--mosque-gold); height: 1px; opacity: .55; width: 4rem; }

.public-shell {
  isolation: isolate;
  padding-top: 1.5rem !important;
}
.public-watermark-layer {
  background: url("../images/mosque-watermark.png") center bottom 4.5rem / min(92vw, 72rem) auto no-repeat;
  inset: 0;
  opacity: .14;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.public-shell > .container { position: relative; z-index: 1; }
.public-shell::before,
.public-shell::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.public-shell::before {
  background:
    linear-gradient(135deg, rgba(167, 134, 53, .28) 0 1px, transparent 1px) top left / 3.5rem 3.5rem no-repeat,
    linear-gradient(225deg, rgba(167, 134, 53, .28) 0 1px, transparent 1px) top right / 3.5rem 3.5rem no-repeat,
    linear-gradient(45deg, rgba(167, 134, 53, .28) 0 1px, transparent 1px) bottom left / 3.5rem 3.5rem no-repeat,
    linear-gradient(315deg, rgba(167, 134, 53, .28) 0 1px, transparent 1px) bottom right / 3.5rem 3.5rem no-repeat;
  border: 1px solid rgba(167, 134, 53, .12);
  inset: 1rem max(.75rem, calc((100% - 84rem) / 2));
}
.public-shell::after {
  background:
    linear-gradient(45deg, transparent 44%, rgba(167, 134, 53, .32) 45% 55%, transparent 56%) 0 0 / 1.25rem 1.25rem,
    linear-gradient(-45deg, transparent 44%, rgba(167, 134, 53, .25) 45% 55%, transparent 56%) 0 0 / 1.25rem 1.25rem;
  height: .65rem;
  inset-inline: max(1rem, calc((100% - 82rem) / 2));
  opacity: .48;
  top: 1rem;
}

.public-panel,
.card {
  background-color: #fffefa;
  border-color: var(--mosque-border) !important;
}
.public-panel { background-color: rgba(255, 254, 250, .88); }
.hero-panel { background-color: rgba(255, 254, 250, .84); overflow: hidden; position: relative; }
.hero-kicker { color: var(--mosque-gold); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.hero-title { color: var(--mosque-green-dark); }
.hero-copy { max-width: 45rem; }
.action-card {
  color: var(--mosque-green-dark);
  min-height: 100%;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.action-card:hover { border-color: var(--mosque-gold) !important; color: var(--mosque-green); transform: translateY(-2px); }
.action-icon { color: var(--mosque-gold); font-size: 1.5rem; }

.btn-success { --bs-btn-bg: var(--mosque-green); --bs-btn-border-color: var(--mosque-green); --bs-btn-hover-bg: var(--mosque-green-dark); --bs-btn-hover-border-color: var(--mosque-green-dark); }
.btn-outline-success { --bs-btn-color: var(--mosque-green); --bs-btn-border-color: var(--mosque-green); --bs-btn-hover-bg: var(--mosque-green); --bs-btn-hover-border-color: var(--mosque-green); }
a { color: var(--mosque-green); }
:focus-visible { outline: 3px solid #c49a28 !important; outline-offset: 3px; }

.public-footer {
  background: rgba(251, 247, 235, .94);
  border-top: 1px solid var(--mosque-border);
  color: #59675f;
}
.leaflet-container { position: relative; z-index: 0; }

.mosque-detail-content,
.mosque-detail-location {
  min-width: 0;
  overflow-wrap: anywhere;
  position: relative;
  z-index: 0;
}

.field-invalid .form-control,
.field-invalid .form-select,
.field-invalid .form-check-input { border-color: var(--bs-danger); }
.field-help { margin-inline-start: .25rem; position: relative; vertical-align: middle; }
.field-help summary {
  align-items: center;
  border: 1px solid var(--mosque-green);
  border-radius: 50%;
  color: var(--mosque-green-dark);
  cursor: pointer;
  display: inline-flex;
  font-size: .75rem;
  font-weight: 700;
  height: 1.5rem;
  justify-content: center;
  list-style: none;
  width: 1.5rem;
}
.field-help summary::-webkit-details-marker { display: none; }
.field-help-text {
  background: #fffdf7;
  border: 1px solid var(--mosque-border);
  border-radius: .5rem;
  box-shadow: 0 .4rem 1rem rgba(7, 63, 46, .12);
  inset-inline-start: 0;
  margin-top: .3rem;
  max-width: min(19rem, calc(100vw - 3rem));
  padding: .65rem .75rem;
  position: absolute;
  text-align: start;
  width: max-content;
  z-index: 5;
}
.gallery-trigger { display: block; }
.gallery-trigger:focus-visible { outline: 3px solid #c49a28 !important; outline-offset: 4px; }
.photo-lightbox {
  background: rgba(34, 51, 44, .94);
  border: 0;
  color: #fff;
  max-height: 100vh;
  max-width: 100vw;
  padding: 0;
  width: min(92vw, 78rem);
}
.photo-lightbox::backdrop { background: rgba(7, 63, 46, .78); }
.photo-lightbox-inner {
  align-items: center;
  display: grid;
  gap: .75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 1rem;
  position: relative;
}
.photo-lightbox-close { filter: invert(1); position: absolute; inset-block-start: .75rem; inset-inline-end: .75rem; z-index: 1; }
.photo-lightbox-image { display: block; grid-column: 1 / -1; max-height: 78vh; max-width: 100%; object-fit: contain; justify-self: center; }
.photo-lightbox-caption { color: #fff; grid-column: 1 / -1; text-align: center; }
.photo-lightbox-previous { grid-column: 1; grid-row: 2; }
.photo-lightbox-next { grid-column: 3; grid-row: 2; }

@media (max-width: 575.98px) {
  .photo-lightbox { width: 100vw; }
  .photo-lightbox-inner { grid-template-columns: 1fr 1fr; padding: 3.25rem .75rem .75rem; }
  .photo-lightbox-image { max-height: 68vh; }
  .photo-lightbox-previous { grid-column: 1; }
  .photo-lightbox-next { grid-column: 2; }
}

@media (prefers-reduced-transparency: reduce) {
  .public-watermark-layer { opacity: 0; }
  .photo-lightbox { background: #22332c; }
}
.manual-coordinate-summary { color: var(--mosque-green); cursor: pointer; font-weight: 600; }
.location-assistant { background: var(--mosque-green-soft); border-radius: .75rem; padding: 1rem; }
.location-confirmation { background: #fff; }

[dir="rtl"] .public-site { text-align: right; }
[dir="rtl"] .brand-name { text-align: right; }
[dir="rtl"] .public-footer { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 575.98px) {
  body.public-site::before { background-position: center bottom 6rem; background-size: 120vw auto; }
  .brand-mark { height: 2.55rem; width: 2.55rem; }
  .public-shell::before { inset: .65rem .35rem; }
  .public-shell::after { inset-inline: .65rem; top: .65rem; }
  .quran-banner::before { inset-inline: 3%; }
  .quran-banner { padding-block: .15rem !important; }
  .quran-banner::before { height: 1.7rem; }
  .quran-calligraphy { margin-block: -.2rem 0; width: 94%; }
  .quran-divider { margin-top: .4rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .action-card { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .public-panel,
  .hero-panel { background-color: #fffefa; }
}