/* Rass Baalbeck Municipality — civic service hub */

.rbsv-municipality-hub {
  --mh-ink: #082a58;
  --mh-navy: #07366d;
  --mh-blue: #1269cf;
  --mh-gold: #efbd45;
  --mh-slate: #60738b;
  --mh-line: #dbe5f0;
  --mh-mist: #f4f8fc;
}

.rbsv-municipality-hub [hidden] {
  display: none !important;
}

.rbsv-municipality-hub .rbsv-page-hero {
  padding-block: 38px 42px !important;
  background: #082d5d !important;
}

.rbsv-municipality-hub .rbsv-page-hero .rbsv-shell {
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) !important;
  grid-template-areas:
    "crumb crumb"
    "icon title"
    "icon copy" !important;
  gap: 4px 19px !important;
  align-items: center !important;
}

.rbsv-municipality-hub .rbsv-page-hero .rbsv-breadcrumb {
  grid-area: crumb !important;
  margin-bottom: 15px !important;
  color: #bfd8f3 !important;
}

.rbsv-municipality-hub .rbsv-page-hero .rbsv-page-icon {
  grid-area: icon !important;
  display: grid !important;
  width: 66px !important;
  height: 66px !important;
  margin: 0 !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.09) !important;
  color: var(--mh-gold) !important;
}

.rbsv-municipality-hub .rbsv-page-hero .rbsv-page-icon svg {
  width: 31px !important;
  height: 31px !important;
}

.rbsv-municipality-hub .rbsv-page-hero h1 {
  grid-area: title !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(40px, 4vw, 54px) !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

.rbsv-municipality-hub .rbsv-page-hero p {
  grid-area: copy !important;
  max-width: 700px !important;
  margin: 5px 0 0 !important;
  color: #c7daef !important;
  font-size: 14px !important;
}

.rbsv-municipality-hub .rbsv-section {
  padding-block: 44px 84px !important;
  background: var(--mh-mist) !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory-heading {
  display: flex !important;
  gap: 24px !important;
  align-items: end !important;
  justify-content: space-between !important;
  margin: 0 0 20px !important;
  padding: 0 2px 20px !important;
  border-bottom: 1px solid var(--mh-line) !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory-heading span {
  color: var(--mh-blue) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory-heading h2 {
  margin: 6px 0 8px !important;
  color: var(--mh-ink) !important;
  font-size: clamp(30px, 3.5vw, 45px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory-heading p {
  max-width: 720px !important;
  margin: 0 !important;
  color: var(--mh-slate) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory-heading > strong {
  flex: 0 0 auto !important;
  padding: 9px 12px !important;
  border: 1px solid #d5e2ef !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #53708d !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 13px !important;
  margin: 0 !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 30px !important;
  gap: 14px !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 142px !important;
  padding: 19px !important;
  overflow: hidden !important;
  border: 1px solid var(--mh-line) !important;
  border-radius: 17px !important;
  background: #fff !important;
  color: var(--mh-ink) !important;
  box-shadow: 0 8px 24px rgba(7,38,78,.05) !important;
  text-decoration: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a:hover {
  border-color: #a9c8e9 !important;
  box-shadow: 0 13px 30px rgba(7,38,78,.09) !important;
  transform: translateY(-2px) !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a > i {
  display: grid !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  place-items: center !important;
  border: 1px solid #d8e7f6 !important;
  border-radius: 14px !important;
  background: #eaf3fd !important;
  color: var(--mh-blue) !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a > i svg {
  width: 25px !important;
  height: 25px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a > div {
  min-width: 0 !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory h3 {
  margin: 0 0 7px !important;
  color: inherit !important;
  font-size: 17px !important;
  line-height: 1.22 !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory p {
  margin: 0 !important;
  color: var(--mh-slate) !important;
  font-size: 10.5px !important;
  line-height: 1.5 !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a > b {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border: 1px solid #d7e4f1 !important;
  border-radius: 50% !important;
  background: var(--mh-mist) !important;
  color: var(--mh-blue) !important;
  font-size: 14px !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a.is-municipal-services {
  order: -3 !important;
  grid-column: span 2 !important;
  min-height: 170px !important;
  border-color: var(--mh-navy) !important;
  background: var(--mh-navy) !important;
  color: #fff !important;
  box-shadow: 0 16px 36px rgba(7,54,109,.16) !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a.is-municipal-services::before {
  position: absolute !important;
  inset-block: 0 !important;
  inset-inline-start: 0 !important;
  width: 5px !important;
  background: var(--mh-gold) !important;
  content: "" !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a.is-municipal-services > i {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.1) !important;
  color: var(--mh-gold) !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a.is-municipal-services p {
  color: #c8daed !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a.is-municipal-services > b {
  border-color: rgba(255,255,255,.18) !important;
  background: #fff !important;
  color: var(--mh-navy) !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a.is-contact {
  order: -2 !important;
  min-height: 170px !important;
  border-color: #bad5ef !important;
  background: #eef6ff !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a.is-transparency {
  order: -1 !important;
  border-color: #ead9a8 !important;
  background: #fffaf0 !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a.is-transparency > i {
  border-color: #efdfb1 !important;
  background: #fff3cf !important;
  color: #9b6800 !important;
}

.rbsv-municipality-hub .rbsv-municipality-directory > a:focus-visible {
  outline: 3px solid var(--mh-gold) !important;
  outline-offset: 3px !important;
}

[dir="rtl"] .rbsv-municipality-hub .rbsv-municipality-directory > a > b {
  transform: scaleX(-1) !important;
}

@media (max-width: 1000px) {
  .rbsv-municipality-hub .rbsv-municipality-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .rbsv-municipality-hub .rbsv-municipality-directory > a.is-municipal-services {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 700px) {
  .rbsv-municipality-hub .rbsv-page-hero {
    padding-block: 24px 27px !important;
  }

  .rbsv-municipality-hub .rbsv-page-hero .rbsv-shell {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 3px 13px !important;
  }

  .rbsv-municipality-hub .rbsv-page-hero .rbsv-breadcrumb {
    margin-bottom: 9px !important;
    font-size: 9px !important;
  }

  .rbsv-municipality-hub .rbsv-page-hero .rbsv-page-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
  }

  .rbsv-municipality-hub .rbsv-page-hero .rbsv-page-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  .rbsv-municipality-hub .rbsv-page-hero h1 {
    font-size: 31px !important;
  }

  .rbsv-municipality-hub .rbsv-page-hero p {
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }

  .rbsv-municipality-hub .rbsv-section {
    padding: 26px 0 68px !important;
  }

  .rbsv-municipality-hub .rbsv-section > .rbsv-shell {
    padding-inline: 15px !important;
  }

  .rbsv-municipality-hub .rbsv-municipality-directory-heading {
    display: grid !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding-bottom: 15px !important;
  }

  .rbsv-municipality-hub .rbsv-municipality-directory-heading h2 {
    margin-top: 4px !important;
    font-size: 28px !important;
  }

  .rbsv-municipality-hub .rbsv-municipality-directory-heading p {
    font-size: 11px !important;
  }

  .rbsv-municipality-hub .rbsv-municipality-directory-heading > strong {
    width: max-content !important;
  }

  .rbsv-municipality-hub .rbsv-municipality-directory {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .rbsv-municipality-hub .rbsv-municipality-directory > a,
  .rbsv-municipality-hub .rbsv-municipality-directory > a.is-municipal-services,
  .rbsv-municipality-hub .rbsv-municipality-directory > a.is-contact {
    grid-column: auto !important;
    grid-template-columns: 46px minmax(0, 1fr) 28px !important;
    gap: 11px !important;
    min-height: 104px !important;
    padding: 14px !important;
    border-radius: 15px !important;
  }

  .rbsv-municipality-hub .rbsv-municipality-directory > a > i {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
  }

  .rbsv-municipality-hub .rbsv-municipality-directory h3 {
    margin-bottom: 4px !important;
    font-size: 15px !important;
  }

  .rbsv-municipality-hub .rbsv-municipality-directory p {
    font-size: 9.5px !important;
  }

  .rbsv-municipality-hub .rbsv-municipality-directory > a > b {
    width: 28px !important;
    height: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rbsv-municipality-hub * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}