@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* Jordan Hospital — strict brand palette: #00A651, #ED1C24, white */
:root {
  --jh-green: #00A651;
  --jh-red: #ED1C24;
  --jh-white: #FFFFFF
}

html {
  scroll-behavior: smooth
}

body {
  min-width: 320px;
  background: var(--jh-white) !important;
  color: var(--jh-green) !important
}

a,
button,
select,
input {
  -webkit-tap-highlight-color: transparent
}

.material-symbols-outlined,
span.material-symbols-outlined,
i.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' 1 !important;
  -webkit-font-feature-settings: 'liga' 1 !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 24;
}

.jh-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.jh-logo {
  object-fit: contain
}

.jh-mobile-menu {
  display: none
}

.jh-mobile-menu.open {
  display: flex
}

.jh-modal {
  display: none
}

.jh-modal.open {
  display: flex
}

.jh-section-anchor {
  scroll-margin-top: 140px
}

/* Force every design token used by the supplied Stitch files to one of the approved colors. */
.text-on-surface,
.text-on-surface-variant,
.text-slate-text-main,
.text-slate-text-muted,
.text-primary,
.text-primary-container,
.text-primary-fixed,
.text-primary-fixed-dim,
.text-secondary,
.text-on-secondary-container,
.text-outline,
.text-brand-accent-gold {
  color: var(--jh-green) !important
}

.text-emergency-red,
.text-emergency-red-subtle,
.text-error,
.text-tertiary {
  color: var(--jh-red) !important
}

.text-on-primary,
.text-on-secondary,
.text-on-error,
.text-clinical-white {
  color: var(--jh-white) !important
}

.bg-surface,
.bg-background,
.bg-surface-container,
.bg-surface-container-low,
.bg-surface-container-high,
.bg-surface-container-highest,
.bg-surface-container-lowest,
.bg-surface-bright,
.bg-surface-slate,
.bg-teal-subtle,
.bg-emerald-subtle,
.bg-emergency-red-subtle {
  background-color: var(--jh-white) !important
}

.bg-primary,
.bg-primary-container,
.bg-secondary,
.bg-secondary-container {
  background-color: var(--jh-green) !important;
  color: var(--jh-white) !important
}

.bg-emergency-red,
.bg-error,
.bg-tertiary {
  background-color: var(--jh-red) !important;
  color: var(--jh-white) !important
}

.border-slate-border-subtle,
.border-outline-variant,
.border-surface-container-highest {
  border-color: var(--jh-green) !important
}

.from-primary-container\/10,
.via-teal-subtle,
.to-surface {
  --tw-gradient-from: var(--jh-white) !important;
  --tw-gradient-via: var(--jh-white) !important;
  --tw-gradient-to: var(--jh-white) !important
}

.shadow-sm,
.shadow-md,
.shadow-lg {
  box-shadow: 0 4px 16px rgba(0, 166, 81, .12) !important
}

/* Keep all doctor portraits fully visible in equal image areas. */
.jh-card-img,
.jh-doctor-photo {
  object-fit: contain !important;
  object-position: center bottom !important;
  background: var(--jh-white) !important;
  padding: 8px !important
}

.doctor-card>div:first-child {
  height: 310px !important;
  background: var(--jh-white) !important;
  border-bottom: 2px solid var(--jh-green)
}

.doctor-card {
  border: 1px solid var(--jh-green) !important;
  background: var(--jh-white) !important
}

.doctor-card img {
  max-width: 100%;
  max-height: 100%
}

.doctor-card .hover\:scale-105:hover {
  transform: none !important
}

.jh-time-btn.active,
.jh-date-btn.active {
  background: var(--jh-green) !important;
  color: var(--jh-white) !important;
  border-color: var(--jh-green) !important
}

/* Navigation and department dropdown */
header {
  border-bottom: 1px solid var(--jh-green)
}

header nav {
  overflow: visible !important
}

.jh-nav-dropdown {
  position: relative;
  display: flex;
  align-items: center
}

.jh-nav-departments {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: .5rem .75rem;
  border-radius: .5rem;
  color: #000000 !important;
  font-weight: 700;
  white-space: nowrap
}

.jh-nav-departments .material-symbols-outlined {
  font-size: 18px;
  color: #000000 !important
}

.jh-nav-dropdown:hover .jh-nav-departments,
.jh-nav-active .jh-nav-departments {
  background: var(--jh-green) !important;
  color: var(--jh-white) !important
}

.jh-nav-dropdown:hover .jh-nav-departments .material-symbols-outlined,
.jh-nav-active .jh-nav-departments .material-symbols-outlined {
  color: var(--jh-white) !important
}

.jh-nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 260px;
  background: var(--jh-white);
  border: 1px solid var(--jh-green);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 10px 28px rgba(0, 166, 81, .16);
  z-index: 100
}

.jh-nav-dropdown:hover .jh-nav-dropdown-menu {
  display: grid
}

.jh-menu-drop-link {
  padding: 10px 12px;
  border-radius: 8px;
  color: #000000 !important;
  font-weight: 700
}

.jh-menu-drop-link:hover,
.jh-menu-current {
  background: var(--jh-green) !important;
  color: var(--jh-white) !important
}

/* Homepage real-doctor section */
.jh-featured-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 48px;
  background: var(--jh-white)
}

.jh-featured-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px
}

.jh-featured-head h2,
.jh-page-hero h1,
.jh-section-title h2 {
  font-size: 36px;
  line-height: 1.3;
  margin: 8px 0;
  color: var(--jh-green);
  font-weight: 800
}

.jh-featured-head p,
.jh-page-hero p,
.jh-section-title p {
  color: var(--jh-green);
  margin: 0;
  line-height: 1.9
}

.jh-kicker {
  display: inline-flex;
  border-right: 4px solid var(--jh-red);
  padding-right: 10px;
  color: var(--jh-green);
  font-weight: 800
}

html[dir="ltr"] .jh-kicker {
  border-right: 0;
  border-left: 4px solid var(--jh-red);
  padding-right: 0;
  padding-left: 10px;
}

html[dir="ltr"] .jh-related-doctor-body .material-symbols-outlined {
  transform: scaleX(-1);
}

.jh-outline-button,
.jh-brand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  padding: 11px 16px;
  font-weight: 800;
  text-decoration: none
}

.jh-outline-button {
  border: 2px solid var(--jh-green);
  color: var(--jh-green) !important;
  background: var(--jh-white)
}

.jh-outline-button:hover {
  background: var(--jh-green);
  color: var(--jh-white) !important
}

.jh-brand-button {
  background: var(--jh-green);
  color: var(--jh-white) !important;
  border: 2px solid var(--jh-green)
}

.jh-brand-button:hover {
  background: var(--jh-red);
  border-color: var(--jh-red)
}

/* Doctors Carousel — 4 cards per view, strictly unified dimensions */
.jh-doctors-carousel-wrapper {
  position: relative;
  width: 100%
}

.jh-home-doctors-grid {
  display: flex !important;
  align-items: stretch !important;
  gap: 20px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  padding: 10px 4px 20px 4px !important;
  margin: 0 !important;
}

.jh-home-doctors-grid::-webkit-scrollbar {
  display: none !important
}

.jh-home-doctor-card {
  flex: 0 0 calc((100% - 60px) / 4) !important;
  min-width: calc((100% - 60px) / 4) !important;
  max-width: calc((100% - 60px) / 4) !important;
  scroll-snap-align: start !important;
  border: 1px solid var(--jh-green) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: var(--jh-white) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  box-shadow: 0 8px 24px rgba(0, 166, 81, 0.08) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}

.jh-home-doctor-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(0, 166, 81, 0.16) !important;
}

.jh-home-doctor-photo {
  width: 100% !important;
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  background: var(--jh-white) !important;
  border-bottom: 1px solid var(--jh-green) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.jh-home-doctor-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  padding: 12px 12px 0 12px !important;
  display: block !important;
  box-sizing: border-box !important;
  background: var(--jh-white) !important;
}

.jh-home-doctor-body {
  padding: 16px 18px 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  gap: 8px !important;
  background: var(--jh-white) !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
}

.jh-home-doctor-tag {
  align-self: flex-start !important;
  background: var(--jh-green) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--jh-green) !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  margin-bottom: 2px !important;
}

.jh-home-doctor-body h3 {
  color: #000000 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.jh-home-doctor-body p {
  color: #000000 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 0 8px 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.jh-home-doctor-body .jh-brand-button {
  margin-top: auto !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  background: var(--jh-green) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--jh-green) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  cursor: pointer !important;
  transition: background .2s ease, border-color .2s ease !important;
}

.jh-home-doctor-body .jh-brand-button * {
  color: #FFFFFF !important;
}

.jh-home-doctor-body .jh-brand-button .material-symbols-outlined {
  font-size: 20px !important;
  color: #FFFFFF !important;
}

.jh-home-doctor-body .jh-brand-button:hover {
  background: var(--jh-red) !important;
  border-color: var(--jh-red) !important;
}

/* Carousel Buttons & Controls */
.jh-carousel-header-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px
}

.jh-carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--jh-green) !important;
  background: var(--jh-white) !important;
  color: var(--jh-green) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease
}

.jh-carousel-btn .material-symbols-outlined {
  font-size: 22px !important;
  color: var(--jh-green) !important;
  transition: all .2s ease
}

.jh-carousel-btn:hover {
  background: var(--jh-green) !important;
  color: var(--jh-white) !important;
  transform: scale(1.05)
}

.jh-carousel-btn:hover .material-symbols-outlined {
  color: var(--jh-white) !important
}

html[dir="ltr"] #doctors-carousel-prev .material-symbols-outlined,
html[dir="ltr"] #doctors-carousel-next .material-symbols-outlined {
  transform: rotate(180deg)
}

/* Pagination Dots */
.jh-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px
}

.jh-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #D1D5DB;
  border: none;
  cursor: pointer;
  transition: all .25s ease;
  padding: 0
}

.jh-carousel-dot.active {
  width: 32px;
  background: var(--jh-green) !important
}

/* Department/category hierarchy pages */
.jh-page-main {
  padding-top: 120px;
  background: var(--jh-white);
  min-height: 70vh
}

.jh-page-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px
}

.jh-page-hero {
  background: var(--jh-white);
  padding: 56px 0;
  border-bottom: 4px solid var(--jh-red)
}

.jh-page-hero h1 {
  font-size: 42px
}

.jh-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 700
}

.jh-breadcrumb a {
  color: var(--jh-green) !important
}

.jh-breadcrumb span {
  color: var(--jh-red)
}

.jh-hero-actions {
  margin-top: 20px
}

.jh-section-space {
  padding-top: 54px;
  padding-bottom: 72px
}

.jh-section-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 28px
}

.jh-count-badge {
  background: var(--jh-red);
  color: var(--jh-white);
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap
}

.jh-dept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}

.jh-dept-card,
.jh-subcat-card,
.jh-subdoctor-card {
  background: var(--jh-white);
  border: 1px solid var(--jh-green);
  border-radius: 16px;
  overflow: hidden
}

.jh-dept-main-link {
  display: flex;
  gap: 15px;
  padding: 22px;
  text-decoration: none
}

.jh-dept-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--jh-green);
  color: var(--jh-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.jh-dept-card h2,
.jh-subcat-card h2,
.jh-subdoctor-card h3 {
  color: var(--jh-green);
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 800
}

.jh-dept-card p,
.jh-subcat-card p,
.jh-subdoctor-card p {
  color: var(--jh-green);
  margin: 0;
  line-height: 1.75
}

.jh-dept-meta {
  display: flex;
  gap: 8px;
  padding: 0 22px 16px
}

.jh-dept-meta span {
  border: 1px solid var(--jh-green);
  color: var(--jh-green);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800
}

.jh-dept-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--jh-green)
}

.jh-dept-actions a {
  padding: 12px;
  text-align: center;
  color: var(--jh-green) !important;
  font-weight: 800
}

.jh-dept-actions a+a {
  border-right: 1px solid var(--jh-green)
}

.jh-dept-actions a:hover {
  background: var(--jh-green);
  color: var(--jh-white) !important
}

.jh-category-subnav {
  position: sticky;
  top: 120px;
  z-index: 30;
  background: var(--jh-white);
  border-bottom: 1px solid var(--jh-green)
}

.jh-category-subnav .jh-page-wrap {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding-top: 12px;
  padding-bottom: 12px
}

.jh-category-subnav a {
  white-space: nowrap;
  border: 1px solid var(--jh-green);
  color: var(--jh-green) !important;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 800
}

.jh-category-subnav a:hover,
.jh-category-subnav .jh-subnav-current {
  background: var(--jh-green);
  color: var(--jh-white) !important
}

.jh-subcat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}

.jh-subcat-card>a {
  display: block;
  padding: 22px
}

.jh-subcat-card>a>.material-symbols-outlined {
  color: var(--jh-red);
  font-size: 32px;
  margin-bottom: 10px
}

.jh-subcat-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--jh-green);
  padding: 12px 18px
}

.jh-subcat-bottom span {
  color: var(--jh-red);
  font-weight: 800
}

.jh-subcat-bottom a {
  color: var(--jh-green) !important;
  font-weight: 800
}

.jh-subcat-bottom a:hover {
  color: var(--jh-red) !important
}

.jh-subdoctor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px
}

.jh-subdoctor-photo {
  height: 280px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 3px solid var(--jh-red);
  background: var(--jh-white)
}

.jh-subdoctor-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center bottom !important;
  padding: 8px
}

.jh-subdoctor-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.jh-subdoctor-body>span {
  color: var(--jh-red);
  font-weight: 800;
  font-size: 12px
}

.jh-empty-subcats>h2 {
  color: var(--jh-green);
  font-size: 28px
}

.jh-empty-subcats>p {
  color: var(--jh-green);
  margin-bottom: 22px
}

@media(max-width:1100px) {
  .jh-home-doctor-card {
    flex: 0 0 calc((100% - 40px) / 3) !important;
    min-width: calc((100% - 40px) / 3) !important;
    max-width: calc((100% - 40px) / 3) !important
  }

  .jh-dept-grid,
  .jh-subcat-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .jh-subdoctor-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:767px) {
  header .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important
  }

  .jh-detail-hero {
    padding-top: 1rem
  }

  .jh-featured-section,
  .jh-page-wrap {
    padding-left: 20px;
    padding-right: 20px
  }

  .jh-featured-head,
  .jh-section-title {
    align-items: flex-start;
    flex-direction: column
  }

  .jh-home-doctor-card {
    flex: 0 0 85% !important;
    min-width: 85% !important;
    max-width: 85% !important
  }

  .jh-dept-grid,
  .jh-subcat-grid,
  .jh-subdoctor-grid {
    grid-template-columns: 1fr
  }

  .jh-page-hero h1 {
    font-size: 32px
  }

  .jh-featured-head h2 {
    font-size: 30px
  }

  .jh-home-doctor-photo,
  .jh-subdoctor-photo {
    height: 340px
  }

  .jh-category-subnav {
    top: 120px
  }
}

@media print {

  header,
  footer,
  .no-print {
    display: none !important
  }

  main {
    padding-top: 0 !important
  }
}


/* ==========================================================
   Readability + contrast pass (strict #00A651 / #ED1C24 / white)
   ========================================================== */
body,
button,
input,
select,
textarea {
  font-family: Tahoma, Arial, sans-serif !important;
}

body {
  font-size: 16px !important;
  line-height: 1.8 !important;
  font-weight: 500 !important;
}

.text-body-sm {
  font-size: 15px !important;
  line-height: 1.85 !important;
  font-weight: 600 !important;
}

.text-body-md {
  font-size: 16px !important;
  line-height: 1.85 !important;
  font-weight: 600 !important;
}

.text-body-lg {
  font-size: 18px !important;
  line-height: 1.85 !important;
  font-weight: 600 !important;
}

.text-label-sm {
  font-size: 12px !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
}

.text-label-md {
  font-size: 13px !important;
  line-height: 1.65 !important;
  font-weight: 700 !important;
}

.text-label-lg {
  font-size: 15px !important;
  line-height: 1.65 !important;
  font-weight: 700 !important;
}

p {
  line-height: 1.85 !important;
}

/* Never allow green text to disappear on a green surface. */
.bg-primary,
.bg-primary-container,
.bg-secondary,
.bg-secondary-container,
.inverse-surface {
  color: var(--jh-white) !important;
}

.bg-primary *,
.bg-primary-container *,
.bg-secondary *,
.bg-secondary-container *,
.inverse-surface * {
  color: var(--jh-white) !important;
}

.bg-emergency-red,
.bg-error,
.bg-tertiary {
  color: var(--jh-white) !important;
}

.bg-emergency-red *,
.bg-error *,
.bg-tertiary * {
  color: var(--jh-white) !important;
}

/* Keep red strip / green calls-to-action high contrast. */
header .bg-primary a,
header .bg-primary span,
aside.bg-emergency-red a,
aside.bg-emergency-red span {
  color: var(--jh-white) !important;
}

/* Priority service cards: unified colors, no links, no click/hover behavior. */
.jh-priority-section {
  background: var(--jh-white) !important;
}

.jh-priority-kicker {
  display: inline-flex;
  align-items: center;
  border-right: 4px solid var(--jh-red) !important;
  border-inline-start: 4px solid var(--jh-red) !important;
  padding-right: 10px !important;
  padding-inline-start: 10px !important;
  color: var(--jh-green) !important;
  font-size: 14px;
  font-weight: 800;
}

html[dir="ltr"] .jh-priority-kicker {
  border-right: none !important;
  border-left: 4px solid var(--jh-red) !important;
  padding-right: 0 !important;
  padding-left: 10px !important;
}

.jh-priority-heading {
  color: var(--jh-green) !important;
  font-size: 32px;
  line-height: 1.4;
  font-weight: 900;
  margin: 0;
}

.jh-priority-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.jh-priority-card {
  background: var(--jh-green) !important;
  color: var(--jh-white) !important;
  border: 2px solid var(--jh-green) !important;
  border-radius: 18px;
  padding: 28px 24px;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: default !important;
  user-select: text;
  box-shadow: none !important;
  transform: none !important;
}

.jh-priority-card:hover {
  box-shadow: none !important;
  transform: none !important;
}

.jh-priority-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--jh-white) !important;
  color: var(--jh-green) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.jh-priority-icon .material-symbols-outlined {
  color: var(--jh-green) !important;
  font-size: 32px !important;
}

.jh-priority-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.jh-priority-card h3 {
  color: var(--jh-white) !important;
  font-size: 22px !important;
  line-height: 1.5 !important;
  font-weight: 900 !important;
  margin: 0 !important;
}

.jh-priority-card p {
  color: var(--jh-white) !important;
  font-size: 16px !important;
  line-height: 2 !important;
  font-weight: 700 !important;
  margin: 0 !important;
  opacity: 1 !important;
}

.jh-priority-meta {
  margin-top: auto;
  display: inline-flex;
  width: fit-content;
  border: 2px solid var(--jh-white);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--jh-white) !important;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 800;
  pointer-events: none !important;
}

.jh-priority-card a,
.jh-priority-card button {
  pointer-events: none !important;
  cursor: default !important;
}

/* Doctor portraits: equal image boxes, full image visible, reliable local assets. */
.jh-home-doctor-photo,
.jh-subdoctor-photo,
.doctor-card>div:first-child {
  background: var(--jh-white) !important;
  overflow: hidden !important;
}

.jh-home-doctor-photo img,
.jh-subdoctor-photo img,
.jh-card-img,
.jh-doctor-photo,
.doctor-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  padding: 0 !important;
  background: var(--jh-white) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.jh-home-doctor-photo {
  aspect-ratio: 280/350 !important;
  height: auto !important;
}

.jh-subdoctor-photo {
  aspect-ratio: 280/350 !important;
  height: auto !important;
}

.doctor-card>div:first-child {
  aspect-ratio: 280/350 !important;
  height: auto !important;
}

/* Keep common card copy comfortably readable. */
.jh-home-doctor-body p,
.jh-dept-card p,
.jh-subcat-card p,
.jh-subdoctor-card p {
  font-size: 15px !important;
  line-height: 1.9 !important;
  font-weight: 600 !important;
}

@media (max-width: 1100px) {
  .jh-priority-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .jh-priority-grid {
    grid-template-columns: 1fr;
  }

  .jh-priority-heading {
    font-size: 28px;
  }

  .jh-priority-card {
    min-height: 0;
    padding: 24px 20px;
  }

  .jh-home-doctor-photo,
  .jh-subdoctor-photo,
  .doctor-card>div:first-child {
    aspect-ratio: 280/350 !important;
    height: auto !important;
  }
}


/* ==========================================================
   V3 polish — readability, softer cards, equal sizing
   ========================================================== */
:root {
  --jh-deep-green: #007A3D
}

body {
  color: var(--jh-deep-green) !important;
  font-weight: 400 !important;
  line-height: 1.75 !important
}

.text-on-surface,
.text-on-surface-variant,
.text-slate-text-main,
.text-slate-text-muted,
.text-primary,
.text-primary-container,
.text-primary-fixed,
.text-primary-fixed-dim,
.text-secondary,
.text-on-secondary-container,
.text-outline {
  color: var(--jh-deep-green) !important
}

p {
  font-weight: 500 !important
}

/* The earlier global green-surface rule made nested white cards unreadable. */
.bg-primary .bg-surface-container-lowest,
.bg-primary .bg-surface-container-low,
.bg-primary .bg-surface,
.bg-primary-container .bg-surface-container-lowest,
.bg-primary-container .bg-surface-container-low,
.bg-primary-container .bg-surface {
  color: var(--jh-deep-green) !important
}

.bg-primary .bg-surface-container-lowest *,
.bg-primary .bg-surface-container-low *,
.bg-primary .bg-surface *,
.bg-primary-container .bg-surface-container-lowest *,
.bg-primary-container .bg-surface-container-low *,
.bg-primary-container .bg-surface * {
  color: var(--jh-deep-green) !important
}

/* Softer quick-service cards: white first, green/red only as accents. */
.jh-priority-grid {
  align-items: stretch !important;
  grid-auto-rows: 1fr
}

.jh-priority-card {
  background: var(--jh-white) !important;
  color: var(--jh-deep-green) !important;
  border: 1px solid var(--jh-green) !important;
  border-top: 5px solid var(--jh-green) !important;
  min-height: 300px !important;
  padding: 26px 24px !important;
  box-shadow: 0 10px 28px rgba(0, 166, 81, .08) !important
}

.jh-priority-card h3,
.jh-priority-card p {
  color: var(--jh-deep-green) !important
}

.jh-priority-card p {
  font-weight: 500 !important;
  line-height: 1.85 !important
}

.jh-priority-icon {
  background: var(--jh-white) !important;
  color: var(--jh-green) !important;
  border: 2px solid var(--jh-green) !important
}

.jh-priority-meta {
  color: var(--jh-deep-green) !important;
  border: 1px solid var(--jh-green) !important;
  background: var(--jh-white) !important
}

/* Page introductions are now contained, readable cards instead of loose text. */
.jh-page-hero {
  padding: 36px 0 !important;
  border-bottom: 0 !important
}

.jh-page-hero>.jh-page-wrap {
  border: 1px solid var(--jh-green);
  border-right: 6px solid var(--jh-red);
  border-radius: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 166, 81, .07)
}

.jh-page-hero h1,
.jh-featured-head h2,
.jh-section-title h2 {
  color: var(--jh-deep-green) !important
}

.jh-page-hero p,
.jh-featured-head p,
.jh-section-title p {
  color: var(--jh-deep-green) !important;
  font-weight: 500 !important
}

.jh-kicker {
  color: var(--jh-deep-green) !important
}

/* Equal cards for departments/subspecialties. */
.jh-dept-grid,
.jh-subcat-grid,
.jh-subdoctor-grid {
  grid-auto-rows: 1fr !important;
  align-items: stretch !important
}

.jh-dept-card,
.jh-subcat-card,
.jh-subdoctor-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid var(--jh-green) !important;
  box-shadow: 0 8px 24px rgba(0, 166, 81, .06) !important
}

.jh-dept-main-link,
.jh-subcat-card>a {
  flex: 1 !important
}

.jh-dept-card h2,
.jh-subcat-card h2,
.jh-subdoctor-card h3 {
  color: var(--jh-deep-green) !important
}

.jh-dept-card p,
.jh-subcat-card p,
.jh-subdoctor-card p {
  color: var(--jh-deep-green) !important;
  font-weight: 500 !important
}

.jh-dept-actions,
.jh-subcat-bottom {
  margin-top: auto !important
}

/* Doctor cards: image uses 280x350 portrait ratio and fills card width cleanly. */
.jh-subdoctor-photo,
.doctor-card>div:first-child {
  width: 100% !important;
  height: 350px !important;
  min-height: 350px !important;
  max-height: 350px !important;
  aspect-ratio: 280/350 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  background: var(--jh-white) !important;
  border-bottom: 1px solid var(--jh-green) !important;
  overflow: hidden !important
}

.jh-subdoctor-photo img,
.doctor-card>div:first-child>img.jh-card-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 280px !important;
  max-height: 350px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  padding: 0 !important;
  margin: 0 auto !important
}

.doctor-card {
  height: 100% !important
}

.doctor-card {
  border: 1px solid var(--jh-green) !important;
  box-shadow: 0 8px 24px rgba(0, 166, 81, .06) !important
}

.doctor-card>div:nth-child(2) {
  flex: 1 !important
}

/* Same-specialty doctor cards: vertical, full-width image, readable text area. */
.jh-related-doctors-grid {
  grid-auto-rows: 1fr !important;
  align-items: stretch !important
}

.jh-related-doctor-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
  border: 1px solid var(--jh-green) !important;
  background: var(--jh-white) !important;
  border-radius: 16px !important;
  text-decoration: none !important
}

.jh-related-doctor-photo {
  width: 100% !important;
  height: 350px !important;
  min-height: 350px !important;
  max-height: 350px !important;
  aspect-ratio: 280/350 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  background: var(--jh-white) !important
}

.jh-related-doctor-body {
  width: 100% !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important
}

.jh-related-doctor-body h3 {
  font-size: 20px !important;
  line-height: 1.45 !important;
  color: var(--jh-deep-green) !important
}

.jh-related-doctor-body p,
.jh-related-doctor-body span {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--jh-deep-green) !important
}

/* Main doctor-profile portrait remains fully visible; do not let generic rules stretch it. */
.jh-detail-hero img.jh-doctor-photo,
main>section:first-of-type img.jh-doctor-photo:not(.jh-related-doctor-photo) {
  object-fit: contain !important
}

/* Consultation request: darker green panel with white copy and clean white controls. */
#appointmentForm {
  background: var(--jh-deep-green) !important;
  color: var(--jh-white) !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 28px !important;
  box-shadow: 0 16px 34px rgba(0, 122, 61, .20) !important
}

#appointmentForm h2,
#appointmentForm p,
#appointmentForm label,
#appointmentForm>div>.material-symbols-outlined {
  color: var(--jh-white) !important
}

#appointmentForm select {
  background: var(--jh-white) !important;
  color: var(--jh-deep-green) !important;
  border: 2px solid var(--jh-white) !important;
  font-weight: 700 !important
}

#appointmentForm .jh-date-btn,
#appointmentForm .jh-time-btn {
  background: var(--jh-white) !important;
  color: var(--jh-deep-green) !important;
  border: 2px solid var(--jh-white) !important;
  font-weight: 700 !important
}

#appointmentForm .jh-date-btn.active,
#appointmentForm .jh-time-btn.active {
  background: var(--jh-red) !important;
  color: var(--jh-white) !important;
  border-color: var(--jh-red) !important
}

#appointmentForm button[type="submit"] {
  background: var(--jh-red) !important;
  color: var(--jh-white) !important;
  border: 2px solid var(--jh-red) !important
}

#appointmentForm a[href^="tel:"] {
  background: var(--jh-white) !important;
  color: var(--jh-deep-green) !important;
  border: 2px solid var(--jh-white) !important
}

/* General content sections: keep prose in visible white cards. */
main .rounded-xl.border.border-slate-border-subtle {
  border-color: var(--jh-green) !important
}

/* Simple English pages */
.jh-en-main {
  padding-top: 120px;
  background: var(--jh-white);
  min-height: 70vh
}

.jh-en-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px
}

.jh-en-card {
  border: 1px solid var(--jh-green);
  border-radius: 18px;
  background: var(--jh-white);
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 166, 81, .06)
}

.jh-en-card h2,
.jh-en-card h3 {
  color: var(--jh-deep-green);
  font-weight: 800
}

.jh-en-card p,
.jh-en-card li {
  color: var(--jh-deep-green);
  line-height: 1.8
}

.jh-en-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch
}

.jh-en-grid>* {
  height: 100%
}

@media(max-width:1100px) {
  .jh-en-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:767px) {
  .jh-page-hero>.jh-page-wrap {
    border-right-width: 4px;
    border-radius: 14px;
    padding-top: 22px;
    padding-bottom: 22px
  }

  .jh-en-section {
    padding: 28px 20px
  }

  .jh-en-grid {
    grid-template-columns: 1fr
  }

  .jh-home-doctor-photo,
  .jh-subdoctor-photo,
  .doctor-card>div:first-child,
  .jh-related-doctor-photo {
    aspect-ratio: 280/350 !important;
    height: auto !important
  }
}

/* V3.1: 280x350 photos fill the card frame cleanly edge-to-edge. */
.jh-home-doctor-photo img,
.jh-subdoctor-photo img,
.doctor-card>div:first-child>img.jh-card-img,
.jh-related-doctor-photo {
  object-fit: cover !important;
  object-position: center top !important;
  background: transparent !important
}

/* White/translucent information cards inside the green hero must use dark readable text. */
.bg-primary [class*="bg-surface/"],
.bg-primary [class*="bg-surface/"] *,
.bg-primary-container [class*="bg-surface/"],
.bg-primary-container [class*="bg-surface/"] * {
  color: var(--jh-deep-green) !important
}


/* ==========================================================
   V4 — contrast, spacing, five-column doctors, unified tags
   Brand palette only: #00A651, #ED1C24, #FFFFFF
   ========================================================== */
:root {
  --jh-green: #00A651;
  --jh-red: #ED1C24;
  --jh-white: #FFFFFF;
  --jh-deep-green: #006B37
}

body {
  color: var(--jh-deep-green) !important;
  background: var(--jh-white) !important;
  font-weight: 400 !important
}

main p {
  color: var(--jh-deep-green);
  line-height: 1.9 !important
}

/* Home hero: clean white surface with black text and crisp contrast */
.jh-home-hero {
  background: #FFFFFF !important;
  color: #000000 !important
}

.jh-home-hero h1,
.jh-home-hero h1 *,
.jh-home-hero h1 span {
  color: #000000 !important
}

.jh-home-hero p,
.jh-home-hero>div.relative>div.flex>div:first-child>p {
  color: #000000 !important
}

.jh-home-hero .jh-hero-pill {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  padding: 9px 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important
}

.jh-home-hero .jh-hero-pill span {
  color: #000000 !important
}

.jh-home-hero .jh-hero-pill .material-symbols-outlined {
  color: var(--jh-green) !important
}

.jh-home-hero .jh-trust-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important
}

.jh-home-hero .jh-trust-card span {
  color: #000000 !important
}

.jh-home-hero .jh-trust-card .material-symbols-outlined {
  color: var(--jh-green) !important
}

.jh-home-hero .jh-hero-info-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important
}

.jh-home-hero .jh-hero-info-card span,
.jh-home-hero .jh-hero-info-card p,
.jh-home-hero .jh-hero-info-card div {
  color: #000000 !important
}

.jh-home-hero .jh-hero-info-card .material-symbols-outlined {
  color: var(--jh-green) !important
}

.jh-home-hero .jh-hero-info-card span.text-secondary {
  color: var(--jh-green) !important
}

.jh-home-hero .jh-consultant-card .bg-teal-subtle,
.jh-home-hero .jh-operation-card .bg-secondary-subtle,
.jh-home-hero .jh-operation-card .bg-emerald-subtle {
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important
}

.jh-home-hero .jh-hero-primary-btn {
  background: var(--jh-green) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--jh-green) !important
}

.jh-home-hero .jh-hero-primary-btn * {
  color: #FFFFFF !important
}

.jh-home-hero .jh-hero-primary-btn:hover {
  background: #008A43 !important;
  border-color: #008A43 !important
}

.jh-home-hero .jh-hero-secondary-btn {
  background: transparent !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  transition: all .2s ease !important
}

.jh-home-hero .jh-hero-secondary-btn * {
  color: #000000 !important;
  transition: all .2s ease !important
}

.jh-home-hero .jh-hero-secondary-btn:hover {
  background: var(--jh-green) !important;
  border-color: var(--jh-green) !important;
  color: #FFFFFF !important
}

.jh-home-hero .jh-hero-secondary-btn:hover * {
  color: #FFFFFF !important
}

/* Green metric / conversion surfaces need white copy, never green-on-green. */
.jh-stats-section,
.jh-final-cta {
  background: var(--jh-green) !important;
  color: var(--jh-white) !important
}

.jh-stats-section *,
.jh-final-cta * {
  color: var(--jh-white) !important
}

.jh-final-cta a {
  background: var(--jh-white) !important;
  color: var(--jh-deep-green) !important;
  border: 2px solid var(--jh-white) !important
}

.jh-final-cta a * {
  color: var(--jh-deep-green) !important
}

/* Quick-service cards: new calmer layout, more internal padding and equal heights. */
.jh-priority-section {
  padding-top: 64px !important;
  padding-bottom: 72px !important
}

.jh-priority-section>div:first-child {
  margin-bottom: 28px !important
}

.jh-priority-heading {
  font-size: 34px !important;
  color: var(--jh-deep-green) !important
}

.jh-priority-grid {
  gap: 18px !important;
  align-items: stretch !important
}

.jh-priority-card {
  position: relative;
  background: var(--jh-white) !important;
  color: var(--jh-deep-green) !important;
  border: 1px solid var(--jh-green) !important;
  border-top: 1px solid var(--jh-green) !important;
  border-radius: 20px !important;
  min-height: 310px !important;
  padding: 30px 26px 26px !important;
  gap: 18px !important;
  box-shadow: 0 12px 30px rgba(0, 166, 81, .07) !important
}

.jh-priority-card:before {
  content: "";
  position: absolute;
  top: 0;
  right: 24px;
  width: 58px;
  height: 5px;
  background: var(--jh-red);
  border-radius: 0 0 6px 6px
}

.jh-priority-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--jh-green) !important;
  border: 2px solid var(--jh-green) !important;
  color: var(--jh-white) !important
}

.jh-priority-icon .material-symbols-outlined {
  color: var(--jh-white) !important;
  font-size: 29px !important
}

.jh-priority-card h3 {
  color: var(--jh-deep-green) !important;
  font-size: 21px !important;
  line-height: 1.55 !important
}

.jh-priority-card p {
  color: var(--jh-deep-green) !important;
  font-size: 15px !important;
  line-height: 1.95 !important;
  font-weight: 500 !important
}

.jh-priority-meta {
  background: var(--jh-green) !important;
  color: var(--jh-white) !important;
  border: 1px solid var(--jh-green) !important;
  padding: 7px 12px !important
}

/* Unified specialty/category tags throughout the site. Red is reserved for emergency/accent lines. */
.jh-home-doctor-tag,
.jh-unified-tag,
.jh-directory-tag,
.jh-count-badge,
.jh-detail-hero .absolute.bottom-3,
.jh-home-centers article .absolute.top-4,
.jh-home-news article .absolute.top-4 {
  background: var(--jh-green) !important;
  color: var(--jh-white) !important;
  border: 1px solid var(--jh-green) !important
}

.jh-home-centers article .absolute.top-4 *,
.jh-home-news article .absolute.top-4 *,
.jh-detail-hero .absolute.bottom-3 * {
  color: var(--jh-white) !important
}

.jh-dept-meta span {
  background: var(--jh-green) !important;
  color: var(--jh-white) !important;
  border-color: var(--jh-green) !important
}

.jh-subcat-bottom span {
  color: var(--jh-green) !important
}

/* Home department/news cards: more breathing room and consistent text. */
.jh-home-centers article,
.jh-home-news article {
  border: 1px solid var(--jh-green) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(0, 166, 81, .06) !important
}

.jh-home-centers article>div:last-child,
.jh-home-news article>div:last-child {
  padding: 24px !important
}

.jh-home-centers article h3,
.jh-home-news article h3 {
  color: var(--jh-deep-green) !important;
  line-height: 1.55 !important
}

.jh-home-centers article p,
.jh-home-news article p {
  color: var(--jh-deep-green) !important;
  line-height: 1.9 !important
}

/* Home doctors carousel: strictly unified 4-card layout, equal dimensions & button alignment */
.jh-home-doctors-grid {
  gap: 20px !important;
  align-items: stretch !important
}

.jh-home-doctor-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid var(--jh-green) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(0, 166, 81, 0.08) !important;
}

.jh-home-doctor-photo {
  width: 100% !important;
  aspect-ratio: 280/350 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  position: relative !important;
  border-bottom: 1px solid var(--jh-green) !important;
  overflow: hidden !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.jh-home-doctor-photo img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  background: transparent !important;
}

.jh-home-doctor-body {
  padding: 16px 18px 20px 18px !important;
  gap: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.jh-home-doctor-body h3 {
  font-size: 18px !important;
  color: #000000 !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.jh-home-doctor-body p {
  font-size: 13.5px !important;
  color: #000000 !important;
  line-height: 1.5 !important;
  margin: 0 0 8px 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.jh-home-doctor-tag {
  align-self: flex-start !important;
  background: var(--jh-green) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--jh-green) !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.jh-home-doctor-body .jh-brand-button {
  margin-top: auto !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}

/* Doctors directory: four cards per row on wide screens; compact, readable card design. */
.jh-doctors-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  grid-auto-rows: 1fr
}

.jh-directory-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--jh-white) !important;
  border: 1px solid var(--jh-green) !important;
  border-radius: 18px !important;
  box-shadow: 0 9px 24px rgba(0, 166, 81, .06) !important
}

.jh-directory-photo {
  position: relative;
  display: block !important;
  width: 100%;
  aspect-ratio: 280/350 !important;
  height: auto !important;
  border-bottom: 1px solid var(--jh-green) !important;
  overflow: hidden !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important
}

.jh-directory-photo img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  background: transparent !important
}

.jh-directory-tag {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

html[dir="ltr"] .jh-directory-tag {
  right: auto;
  left: 10px
}

.jh-directory-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px !important;
  flex: 1
}

.jh-directory-copy {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1
}

.jh-directory-copy h2 {
  margin: 0;
  color: var(--jh-deep-green) !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important
}

.jh-directory-specialty {
  margin: 0 !important;
  color: var(--jh-green) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  font-weight: 800 !important
}

.jh-directory-desc {
  margin: 0 !important;
  color: var(--jh-deep-green) !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  font-weight: 500 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.jh-directory-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--jh-deep-green) !important;
  font-size: 11px;
  font-weight: 700;
  border-top: 1px solid var(--jh-green);
  padding-top: 10px
}

.jh-directory-status .material-symbols-outlined {
  font-size: 16px;
  color: var(--jh-green) !important
}

.jh-directory-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px
}

.jh-directory-actions a {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 6px;
  text-align: center
}

.jh-directory-actions .material-symbols-outlined {
  font-size: 15px
}

.jh-directory-profile {
  background: var(--jh-white) !important;
  color: var(--jh-green) !important;
  border: 1px solid var(--jh-green) !important
}

.jh-directory-book {
  background: var(--jh-green) !important;
  color: var(--jh-white) !important;
  border: 1px solid var(--jh-green) !important
}

.jh-directory-book * {
  color: var(--jh-white) !important
}

/* Doctor-detail content and related cards: text stays inside padded card bodies. */
.jh-detail-hero .rounded-2xl,
.jh-detail-hero .rounded-xl {
  border: 1px solid var(--jh-green) !important;
  box-shadow: 0 8px 24px rgba(0, 166, 81, .06) !important
}

.jh-related-doctors-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important
}

.jh-related-doctor-card {
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(0, 166, 81, .06) !important
}

.jh-related-doctor-photo {
  width: 100% !important;
  aspect-ratio: 280/350 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-bottom: 1px solid var(--jh-green) !important;
  background: transparent !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important
}

.jh-related-doctor-body {
  padding: 20px !important;
  gap: 9px !important
}

.jh-related-doctor-body h3 {
  margin: 0 !important;
  color: var(--jh-deep-green) !important
}

.jh-related-doctor-body p,
.jh-related-doctor-body span {
  color: var(--jh-deep-green) !important
}

/* Appointment form: darker green, deliberate spacing, white controls. */
#appointmentForm {
  background: var(--jh-deep-green) !important;
  padding: 30px !important;
  gap: 16px !important;
  border-radius: 22px !important
}

#appointmentForm h2,
#appointmentForm p,
#appointmentForm label,
#appointmentForm>div>.material-symbols-outlined {
  color: var(--jh-white) !important
}

#appointmentForm select,
#appointmentForm .jh-date-btn,
#appointmentForm .jh-time-btn {
  padding: 11px 12px !important;
  border-radius: 10px !important
}

/* Page hero and hierarchy cards get comfortable padding and consistent copy color. */
.jh-page-hero>.jh-page-wrap {
  padding: 32px 34px !important;
  border: 1px solid var(--jh-green) !important;
  border-right: 5px solid var(--jh-red) !important;
  background: var(--jh-white) !important
}

html[dir="ltr"] .jh-page-hero>.jh-page-wrap {
  border-right: 1px solid var(--jh-green) !important;
  border-left: 5px solid var(--jh-red) !important
}

.jh-page-hero h1 {
  color: var(--jh-deep-green) !important;
  line-height: 1.35 !important
}

.jh-page-hero p {
  color: var(--jh-deep-green) !important;
  max-width: 900px
}

.jh-dept-card,
.jh-subcat-card {
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(0, 166, 81, .05) !important
}

.jh-dept-main-link,
.jh-subcat-card>a {
  padding: 26px !important
}

/* Contact pages */
.jh-contact-layout {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 24px;
  align-items: start
}

.jh-contact-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px
}

.jh-contact-card {
  background: var(--jh-white);
  border: 1px solid var(--jh-green);
  border-radius: 18px;
  padding: 26px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  text-align: center !important;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 166, 81, .05)
}

.jh-contact-icon,
.jh-contact-card>.material-symbols-outlined {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--jh-green) !important;
  color: #FFFFFF !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.jh-contact-icon .material-symbols-outlined,
.jh-contact-card>.material-symbols-outlined {
  font-size: 26px !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.jh-contact-emergency .jh-contact-icon,
.jh-contact-emergency>.material-symbols-outlined {
  background: var(--jh-red) !important
}

.jh-contact-card h2 {
  margin: 0;
  color: var(--jh-deep-green);
  font-size: 21px;
  font-weight: 800;
  text-align: center !important
}

.jh-contact-card p {
  margin: 0;
  flex: 1;
  text-align: center !important
}

.jh-contact-card a,
.jh-contact-card>span:last-child {
  color: var(--jh-green) !important;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-align: center !important
}

.jh-contact-emergency {
  border-top: 5px solid var(--jh-red) !important
}

.jh-contact-emergency a {
  color: var(--jh-red) !important
}

.jh-contact-message-card {
  background: var(--jh-deep-green);
  color: var(--jh-white);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 150px
}

.jh-contact-message-card h2,
.jh-contact-message-card p {
  color: var(--jh-white) !important
}

.jh-contact-message-card .jh-kicker {
  color: var(--jh-white) !important;
  border-color: var(--jh-red) !important
}

.jh-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px
}

.jh-contact-message-card .jh-brand-button {
  background: var(--jh-white) !important;
  color: var(--jh-deep-green) !important;
  border-color: var(--jh-white) !important
}

.jh-contact-message-card .jh-brand-button * {
  color: var(--jh-deep-green) !important
}

.jh-contact-message-card .jh-outline-button {
  background: transparent !important;
  color: var(--jh-white) !important;
  border-color: var(--jh-white) !important
}

.jh-contact-message-card .jh-outline-button * {
  color: var(--jh-white) !important
}

/* News listing + single article pages, same exact geometry for Arabic and English. */
.jh-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch
}

.jh-news-card {
  background: var(--jh-white);
  border: 1px solid var(--jh-green);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 9px 25px rgba(0, 166, 81, .06)
}

.jh-news-image {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-bottom: 1px solid var(--jh-green)
}

.jh-news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.jh-unified-tag {
  display: inline-flex;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800
}

.jh-news-image .jh-unified-tag {
  position: absolute;
  top: 14px;
  right: 14px
}

html[dir="ltr"] .jh-news-image .jh-unified-tag {
  right: auto;
  left: 14px
}

.jh-news-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1
}

.jh-news-date {
  font-size: 12px;
  color: var(--jh-green);
  font-weight: 800
}

.jh-news-body h2 {
  font-size: 21px;
  line-height: 1.5;
  margin: 0
}

.jh-news-body h2 a {
  color: var(--jh-deep-green) !important
}

.jh-news-body p {
  font-size: 15px;
  line-height: 1.9;
  margin: 0;
  flex: 1
}

.jh-news-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--jh-green) !important;
  font-weight: 800;
  margin-top: 8px
}

.jh-news-read .material-symbols-outlined {
  font-size: 17px
}

.jh-article-tag {
  position: static !important;
  margin-bottom: 10px
}

.jh-article-card {
  max-width: 980px;
  margin: 0 auto;
  background: var(--jh-white);
  border: 1px solid var(--jh-green);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 166, 81, .06)
}

.jh-article-image {
  width: 100%;
  aspect-ratio: 16/8;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--jh-green)
}

.jh-article-copy {
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 18px
}

.jh-article-copy p {
  font-size: 17px;
  line-height: 2;
  margin: 0
}

.jh-article-lead {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--jh-deep-green) !important
}

.jh-article-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-right: 5px solid var(--jh-red);
  padding: 16px 18px;
  background: var(--jh-white);
  border-top: 1px solid var(--jh-green);
  border-bottom: 1px solid var(--jh-green);
  border-left: 1px solid var(--jh-green);
  border-radius: 12px
}

.jh-article-note .material-symbols-outlined {
  color: var(--jh-red) !important
}

html[dir="ltr"] .jh-article-note {
  border-right: 1px solid var(--jh-green);
  border-left: 5px solid var(--jh-red)
}

/* English mirrors Arabic: only direction changes. */
html[dir="ltr"] body {
  font-family: Arial, Tahoma, sans-serif !important
}

html[dir="ltr"] .jh-featured-head,
html[dir="ltr"] .jh-section-title {
  text-align: left
}

html[dir="rtl"] .jh-featured-head,
html[dir="rtl"] .jh-section-title {
  text-align: right
}

@media(max-width:1100px) {
  .jh-doctors-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(max-width:860px) {
  .jh-doctors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
  }
}

@media(max-width:1024px) {
  .jh-contact-layout {
    grid-template-columns: 1fr
  }

  .jh-contact-message-card {
    position: static
  }

  .jh-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:767px) {
  .jh-doctors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
  }

  .jh-directory-body {
    padding: 13px !important
  }

  .jh-directory-copy h2 {
    font-size: 15px !important
  }

  .jh-directory-desc {
    font-size: 12px !important
  }

  .jh-directory-actions {
    grid-template-columns: 1fr
  }

  .jh-priority-card {
    min-height: 0 !important
  }

  .jh-contact-info-grid,
  .jh-news-grid {
    grid-template-columns: 1fr
  }

  .jh-page-hero>.jh-page-wrap {
    padding: 24px 20px !important
  }

  .jh-article-copy {
    padding: 22px
  }

  .jh-related-doctors-grid {
    grid-template-columns: 1fr !important
  }
}

@media(max-width:460px) {
  .jh-doctors-grid {
    grid-template-columns: 1fr
  }

  .jh-directory-photo {
    aspect-ratio: 280/350 !important;
    height: auto !important
  }
}


/* ==========================================================
   V5 — booking field borders, 4 related doctors, hero overlap,
   white active-nav text, and single-page JSON i18n.
   ========================================================== */
/* Current page in the main nav must always be legible on the green active pill. */
header nav a[aria-current="page"],
header nav a[aria-current="page"] *,
header nav a.bg-primary-container,
header nav a.bg-primary-container *,
header nav .jh-nav-active>.jh-nav-departments,
header nav .jh-nav-active>.jh-nav-departments * {
  color: #FFFFFF !important;
}

header nav a[aria-current="page"],
header nav a.bg-primary-container {
  background: #00A651 !important
}

/* ==========================================================
   Hero Visual Floating Cards — Glassmorphic Design & Crisp Borders
   ========================================================== */
.jh-home-hero .jh-hero-info-card {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 166, 81, 0.16) !important;
  border-radius: 16px !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.jh-home-hero .jh-hero-info-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 42px -8px rgba(0, 0, 0, 0.18), 0 0 0 1.5px rgba(0, 166, 81, 0.25) !important;
}

/* Top Consultant Metric Card */
.jh-home-hero .jh-consultant-card {
  top: 18px !important;
  bottom: auto !important;
  max-width: 250px !important;
  margin: 0 !important;
  z-index: 8 !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

html[dir="ltr"] .jh-home-hero .jh-consultant-card {
  left: 18px !important;
  right: auto !important;
}

html[dir="rtl"] .jh-home-hero .jh-consultant-card {
  right: 18px !important;
  left: auto !important;
}

.jh-home-hero .jh-consultant-card>div:first-child {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 12px !important;
  background: rgba(0, 166, 81, 0.08) !important;
  border: 1px solid rgba(0, 166, 81, 0.20) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.jh-home-hero .jh-consultant-card .material-symbols-outlined {
  font-size: 24px !important;
  color: var(--jh-green) !important;
}

.jh-home-hero .jh-consultant-card .font-headline-sm {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #000000 !important;
  line-height: 1.2 !important;
}

.jh-home-hero .jh-consultant-card p {
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #374151 !important;
  margin-top: 3px !important;
  font-weight: 500 !important;
}

/* Bottom Operation Card */
.jh-home-hero .jh-operation-card {
  bottom: 16px !important;
  left: 16px !important;
  right: 16px !important;
  top: auto !important;
  z-index: 7 !important;
  padding: 11px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.jh-home-hero .jh-operation-card>div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.jh-home-hero .jh-operation-card>div:first-child>div:first-child {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  background: rgba(0, 166, 81, 0.08) !important;
  border: 1px solid rgba(0, 166, 81, 0.20) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.jh-home-hero .jh-operation-card .material-symbols-outlined {
  font-size: 22px !important;
  color: var(--jh-green) !important;
}

.jh-home-hero .jh-operation-card .font-label-md {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #000000 !important;
  line-height: 1.25 !important;
}

.jh-home-hero .jh-operation-card .font-label-sm {
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #374151 !important;
  font-weight: 500 !important;
}

/* "Available 24/7" / "نشط 24/7" Badge Tag */
.jh-home-hero .jh-operation-card>span:last-child {
  background: rgba(0, 166, 81, 0.10) !important;
  color: var(--jh-green) !important;
  border: 1px solid rgba(0, 166, 81, 0.25) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.01em !important;
}

/* Smart booking: white background, crisp black text, and green hover states */
#appointment-box {
  background: transparent !important
}

#appointment-box>div {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06) !important
}

#appointment-box h2,
#appointment-box h2 *,
#appointment-box span,
#appointment-box span * {
  color: #000000 !important
}

#booking-form {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important
}

#booking-form>.jh-booking-field {
  min-width: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 14px !important;
  padding: 13px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  transition: all .2s ease !important;
}

#booking-form>.jh-booking-field:hover {
  border-color: var(--jh-green) !important
}

#booking-form label,
#booking-form label * {
  color: #000000 !important
}

#booking-form select,
#booking-form input {
  width: 100% !important;
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 10px !important;
  min-height: 48px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
  transition: all .2s ease !important;
}

#booking-form select:hover,
#booking-form input:hover {
  border-color: var(--jh-green) !important
}

#booking-form select:focus,
#booking-form input:focus {
  outline: 2px solid var(--jh-green) !important;
  border-color: var(--jh-green) !important;
  outline-offset: 1px !important;
  box-shadow: none !important
}

#booking-form .jh-booking-action button,
#booking-form button[type="submit"] {
  background: var(--jh-green) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--jh-green) !important;
  border-radius: 10px !important;
  min-height: 48px !important;
  margin-top: auto !important;
  transition: all .2s ease !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#booking-form .jh-booking-action button *,
#booking-form button[type="submit"] * {
  background: transparent !important;
  color: #FFFFFF !important;
  border: none !important;
  fill: #FFFFFF !important;
  transition: all .2s ease !important;
}

#booking-form .jh-booking-action button:hover,
#booking-form button[type="submit"]:hover {
  background: var(--jh-red) !important;
  border-color: var(--jh-red) !important;
  color: #FFFFFF !important;
}

#booking-form .jh-booking-action button:hover *,
#booking-form button[type="submit"]:hover * {
  background: transparent !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Doctor profile: four equal same-specialty cards across desktop. */
.jh-related-doctors-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  grid-auto-rows: 1fr !important
}

.jh-related-doctor-card {
  height: 100% !important;
  min-width: 0 !important
}

.jh-related-doctor-photo {
  width: 100% !important;
  aspect-ratio: 4/5 !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: #FFFFFF !important
}

.jh-related-doctor-body {
  padding: 16px !important
}

.jh-related-doctor-body h3 {
  font-size: 17px !important
}

.jh-related-doctor-body p {
  font-size: 13px !important
}

/* Single-page language switch keeps the same DOM/design; only direction and copy change. */
.jh-language-toggle {
  cursor: pointer;
  font-weight: 800 !important
}

html[dir="ltr"] body {
  direction: ltr;
  text-align: left
}

html[dir="rtl"] body {
  direction: rtl;
  text-align: right
}

html[dir="ltr"] .jh-breadcrumb,
html[dir="ltr"] .jh-related-doctor-body,
html[dir="ltr"] .jh-directory-body {
  text-align: left
}

html[dir="rtl"] .jh-breadcrumb,
html[dir="rtl"] .jh-related-doctor-body,
html[dir="rtl"] .jh-directory-body {
  text-align: right
}

@media(max-width:1024px) {
  #booking-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .jh-related-doctors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }
}

@media(max-width:640px) {
  #booking-form {
    grid-template-columns: 1fr !important
  }

  .jh-related-doctors-grid {
    grid-template-columns: 1fr !important
  }

  .jh-home-hero .jh-consultant-card {
    top: 12px !important;
    left: 12px !important;
    max-width: 190px !important;
    padding: 10px !important
  }
}

/* ==========================================================
   Home Page Typography & Navigation Rules
   - All text to black
   - Tags remain green with white text
   - Doctor buttons stay the same (green brand button)
   - Active menu item keeps old design (green pill with white text)
   - Inactive menu items have black text
   ========================================================== */

/* Menu Inactive Items: Black text */
header nav>a:not([aria-current="page"]):not(.bg-primary-container),
header nav>a:not([aria-current="page"]):not(.bg-primary-container) *,
header nav .jh-nav-departments,
header nav .jh-nav-departments * {
  color: #000000 !important;
}

header nav>a:not([aria-current="page"]):not(.bg-primary-container):hover,
header nav>a:not([aria-current="page"]):not(.bg-primary-container):hover * {
  color: var(--jh-green) !important;
}

/* Dropdown Menu Items: Default black, on hover green pill with white text */
.jh-nav-dropdown-menu {
  background: #FFFFFF !important;
  border: 1px solid var(--jh-green) !important;
}

.jh-nav-dropdown-menu a.jh-menu-drop-link,
.jh-nav-dropdown-menu a.jh-menu-drop-link * {
  color: #000000 !important;
  background: transparent !important;
}

.jh-nav-dropdown-menu a.jh-menu-drop-link:hover,
.jh-nav-dropdown-menu a.jh-menu-drop-link:hover *,
.jh-nav-dropdown-menu a.jh-menu-current,
.jh-nav-dropdown-menu a.jh-menu-current *,
header nav .jh-nav-dropdown-menu a:hover,
header nav .jh-nav-dropdown-menu a:hover * {
  background: var(--jh-green) !important;
  background-color: var(--jh-green) !important;
  color: #FFFFFF !important;
}

/* Dropdown Trigger on Hover */
header nav .jh-nav-dropdown:hover>.jh-nav-departments,
header nav .jh-nav-dropdown:hover>.jh-nav-departments *,
header nav .jh-nav-active>.jh-nav-departments,
header nav .jh-nav-active>.jh-nav-departments * {
  background: var(--jh-green) !important;
  color: #FFFFFF !important;
}

header a span.text-on-surface-variant {
  color: #000000 !important;
}

/* ==========================================================
   Global High Contrast Typography:
   All page text is black (#000000) across all pages.
   Buttons and tags stay green (#00A651) with white text.
   ========================================================== */
body,
main {
  color: #000000 !important;
}

/* All headings across all pages (home, doctors, departments, categories, specialties, news, contact) */
h1:not(.text-white):not([class*="text-on-primary"]):not(.jh-brand-button):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-final-cta *):not(.jh-stats-section *):not(.jh-hotline-banner *):not(.jh-hotline-banner),
h1:not(.text-white):not([class*="text-on-primary"]):not(.jh-brand-button):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-final-cta *):not(.jh-stats-section *):not(.jh-hotline-banner *):not(.jh-hotline-banner) *,
h2:not(.text-white):not([class*="text-on-primary"]):not(.jh-brand-button):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-final-cta *):not(.jh-stats-section *):not(.jh-hotline-banner *):not(.jh-hotline-banner),
h2:not(.text-white):not([class*="text-on-primary"]):not(.jh-brand-button):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-final-cta *):not(.jh-stats-section *):not(.jh-hotline-banner *):not(.jh-hotline-banner) *,
h3:not(.text-white):not([class*="text-on-primary"]):not(.jh-brand-button):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-final-cta *):not(.jh-stats-section *):not(.jh-hotline-banner *):not(.jh-hotline-banner),
h3:not(.text-white):not([class*="text-on-primary"]):not(.jh-brand-button):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-final-cta *):not(.jh-stats-section *):not(.jh-hotline-banner *):not(.jh-hotline-banner) *,
h4:not(.text-white):not([class*="text-on-primary"]):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-hotline-banner *):not(.jh-hotline-banner),
h4:not(.text-white):not([class*="text-on-primary"]):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-hotline-banner *):not(.jh-hotline-banner) *,
h5:not(.text-white):not([class*="from-primary"] *):not(.jh-hotline-banner *):not(.jh-hotline-banner),
h5:not(.text-white):not([class*="from-primary"] *):not(.jh-hotline-banner *):not(.jh-hotline-banner) *,
h6:not(.text-white):not([class*="from-primary"] *):not(.jh-hotline-banner *):not(.jh-hotline-banner),
h6:not(.text-white):not([class*="from-primary"] *):not(.jh-hotline-banner *):not(.jh-hotline-banner) * {
  color: #000000 !important;
}

/* Paragraphs, descriptions, lists, labels, inputs, strong tags across all pages */
p:not(.text-white):not([class*="text-on-primary"]):not(.jh-brand-button):not([class*="tag"]):not([class*="badge"]):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-final-cta *):not(.jh-stats-section *):not(.jh-hotline-banner *):not(.jh-hotline-banner),
p:not(.text-white):not([class*="text-on-primary"]):not(.jh-brand-button):not([class*="tag"]):not([class*="badge"]):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-final-cta *):not(.jh-stats-section *):not(.jh-hotline-banner *):not(.jh-hotline-banner) *,
main p:not(.text-white):not([class*="text-on-primary"]):not(.jh-brand-button):not([class*="tag"]):not([class*="badge"]):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-final-cta *):not(.jh-stats-section *):not(.jh-hotline-banner *):not(.jh-hotline-banner),
li:not(.text-white):not([class*="text-on-primary"]):not([class*="tag"]):not([class*="badge"]):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-final-cta *):not(.jh-stats-section *):not(.jh-hotline-banner *):not(.jh-hotline-banner),
strong:not(.text-white):not([class*="text-on-primary"]):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-final-cta *):not(.jh-stats-section *):not(.jh-hotline-banner *):not(.jh-hotline-banner),
b:not(.text-white):not([class*="text-on-primary"]):not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-final-cta *):not(.jh-stats-section *):not(.jh-hotline-banner *):not(.jh-hotline-banner),
label:not([class*="from-primary"] *):not(.jh-contact-message-card *):not(.jh-hotline-banner *):not(.jh-hotline-banner),
input,
select,
textarea {
  color: #000000 !important;
}

/* Specific content and card selectors across all pages */
.jh-priority-kicker,
.jh-kicker:not(.jh-contact-message-card *),
.jh-priority-heading,
.jh-priority-card h3,
.jh-priority-card p,
.jh-home-centers h2,
.jh-home-centers h3,
.jh-home-centers p,
.jh-home-centers a,
.jh-featured-head h2,
.jh-featured-head p,
.jh-featured-head .jh-kicker,
.jh-home-doctor-body h3,
.jh-home-doctor-body p,
.jh-home-news h2,
.jh-home-news h3,
.jh-home-news p,
.jh-home-news a,
section[aria-label*="ابن سينا"] h3,
section[aria-label*="ابن سينا"] p,
section[aria-label*="ابن سينا"] a,
section[aria-label*="ابن سينا"] span:not(.material-symbols-outlined),
footer h3,
footer p,
footer a,
footer span:not(.material-symbols-outlined):not([class*="tag"]):not([class*="badge"]):not(.text-white):not([class*="subtle"]):not([class*="subtle"] *):not([class*="emerald"]):not([class*="emerald"] *):not([class*="teal"]):not([class*="teal"] *),
.jh-page-hero h1,
.jh-page-hero h1 *,
.jh-page-hero p,
.jh-page-hero p *,
.jh-section-title h2,
.jh-section-title p,
.jh-breadcrumb,
.jh-breadcrumb a,
.jh-breadcrumb span:not([class*="tag"]):not([class*="badge"]),
.jh-directory-copy h2,
.jh-directory-copy h2 *,
.jh-directory-specialty,
.jh-directory-desc,
.jh-directory-status,
.jh-directory-status span,
.jh-dept-card h2,
.jh-dept-card p,
.jh-subcat-card h2,
.jh-subcat-card p,
.jh-subcat-bottom span,
.jh-subcat-bottom span *,
.jh-subdoctor-card h3,
.jh-subdoctor-card p,
.jh-subdoctor-body h3,
.jh-subdoctor-body p,
.jh-detail-hero h1,
.jh-detail-hero p,
.jh-detail-hero strong,
.jh-detail-hero span.text-slate-text-muted,
.jh-detail-hero span.text-label-sm,
.jh-detail-hero span.text-primary:not([class*="tag"]):not([class*="badge"]):not([class*="rounded-full"]),
.jh-detail-hero div.text-slate-text-muted,
.jh-related-doctor-body h3,
.jh-related-doctor-body p,
.jh-related-doctor-body span,
.jh-news-card h2,
.jh-news-card h2 a,
.jh-news-card p,
.jh-news-date,
.jh-article-copy p,
.jh-article-lead,
.jh-article-note,
.jh-contact-card h2,
.jh-contact-card p,
.jh-contact-card strong,
.jh-contact-info-grid h3,
.jh-contact-info-grid p,
.jh-contact-info-grid span:not(.material-symbols-outlined),
.jh-contact-info-grid p,
.jh-contact-card p,
.jh-contact-layout p:not(.jh-contact-message-card):not(.jh-contact-message-card *),
.jh-contact-layout span:not(.material-symbols-outlined):not([class*="tag"]):not([class*="badge"]):not(.text-white):not(.jh-contact-message-card):not(.jh-contact-message-card *),
.jh-empty-subcats h2,
.jh-empty-subcats p,
#visibleDoctorCount,
.text-slate-text-muted,
.text-slate-text-main,
.text-on-surface,
.text-on-surface-variant,
p.text-primary,
span.text-primary:not([class*="tag"]):not([class*="badge"]):not([class*="rounded-full"]):not(.material-symbols-outlined):not([class*="subtle"]):not([class*="subtle"] *):not([class*="emerald"]):not([class*="emerald"] *):not([class*="teal"]):not([class*="teal"] *),
strong.text-primary {
  color: #000000 !important;
}

/* Hover transitions on content links */
.jh-home-centers a:hover,
.jh-home-news a:hover,
section[aria-label*="ابن سينا"] a:hover,
footer a:hover,
.jh-news-card h2 a:hover,
.jh-breadcrumb a:hover,
.jh-detail-hero a:hover,
.jh-related-doctor-card:hover h3,
.jh-dept-card:hover h2 {
  color: var(--jh-green) !important;
}

/* ==========================================================
   KEEP ALL TAGS GREEN WITH CRISP WHITE TEXT (ALL PAGES)
   ========================================================== */
.jh-home-doctor-tag,
.jh-home-doctor-tag *,
span.jh-home-doctor-tag,
span.jh-home-doctor-tag *,
.jh-home-news-tag,
.jh-home-news-tag *,
span.jh-home-news-tag,
span.jh-home-news-tag *,
.jh-priority-meta,
.jh-priority-meta *,
span.jh-priority-meta,
span.jh-priority-meta *,
.jh-unified-tag,
.jh-unified-tag *,
[class*="jh-unified-tag"],
[class*="jh-unified-tag"] *,
.jh-directory-tag,
.jh-directory-tag *,
.jh-count-badge,
.jh-count-badge *,
.jh-dept-meta span,
.jh-dept-meta span *,
.jh-subdoctor-body>span,
.jh-subdoctor-body>span *,
.jh-article-tag,
.jh-article-tag *,
.jh-detail-hero span[class*="rounded-full"],
.jh-detail-hero span[class*="rounded-full"] *,
.jh-detail-hero div[class*="rounded-full"],
.jh-detail-hero div[class*="rounded-full"] *,
span.rounded-full:not([class*="w-"]):not([class*="h-"]),
span.rounded-full:not([class*="w-"]):not([class*="h-"]) *,
div.rounded-full:not([class*="w-"]):not([class*="h-"]):not(.jh-logo *):not(header *):not(.w-10):not(.w-12):not(.w-14):not(.w-16):not(.w-8),
div.rounded-full:not([class*="w-"]):not([class*="h-"]):not(.jh-logo *):not(header *):not(.w-10):not(.w-12):not(.w-14):not(.w-16):not(.w-8) *,
footer .jh-unified-tag,
footer .jh-unified-tag *,
footer .bg-emerald-subtle,
footer .bg-emerald-subtle *,
footer .bg-teal-subtle,
footer .bg-teal-subtle *,
footer span.bg-emerald-subtle,
footer span.bg-emerald-subtle *,
footer span.bg-teal-subtle,
footer span.bg-teal-subtle *,
.bg-emerald-subtle,
.bg-emerald-subtle *,
.bg-teal-subtle,
.bg-teal-subtle *,
span.bg-emerald-subtle,
span.bg-emerald-subtle *,
span.bg-teal-subtle,
span.bg-teal-subtle *,
[class*="bg-emerald"],
[class*="bg-emerald"] *,
[class*="bg-teal"],
[class*="bg-teal"] *,
article div.absolute,
article div.absolute *,
article span.absolute,
article span.absolute *,
article .absolute,
article .absolute * {
  background-color: var(--jh-green) !important;
  color: #FFFFFF !important;
  border-color: var(--jh-green) !important;
  fill: #FFFFFF !important;
}

/* Subdoctor body pill tag styling */
.jh-subdoctor-body>span {
  display: inline-flex !important;
  align-self: flex-start !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* ==========================================================
   BUTTONS STAY GREEN & UNIFIED ACROSS ALL PAGES
   ========================================================== */
/* Primary buttons */
.jh-brand-button,
.jh-directory-book,
.jh-home-doctor-card .jh-brand-button,
header a[data-path="book-appointment"],
#appointmentForm button[type="submit"],
button[type="submit"],
.jh-hero-primary-btn {
  background: var(--jh-green) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--jh-green) !important;
}

.jh-brand-button *,
.jh-directory-book *,
.jh-home-doctor-card .jh-brand-button *,
header a[data-path="book-appointment"] *,
#appointmentForm button[type="submit"] *,
button[type="submit"] *,
.jh-hero-primary-btn * {
  background: transparent !important;
  color: #FFFFFF !important;
  border: none !important;
  fill: #FFFFFF !important;
}

.jh-brand-button:hover,
.jh-directory-book:hover,
.jh-home-doctor-card .jh-brand-button:hover,
#appointmentForm button[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--jh-red) !important;
  border-color: var(--jh-red) !important;
  color: #FFFFFF !important;
}

.jh-brand-button:hover *,
.jh-directory-book:hover *,
.jh-home-doctor-card .jh-brand-button:hover *,
#appointmentForm button[type="submit"]:hover *,
button[type="submit"]:hover * {
  background: transparent !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Outline buttons */
.jh-outline-button,
.jh-directory-profile,
.jh-featured-head .jh-outline-button {
  background: #FFFFFF !important;
  border: 2px solid var(--jh-green) !important;
  color: var(--jh-green) !important;
  transition: all .2s ease !important;
}

.jh-outline-button *,
.jh-directory-profile *,
.jh-featured-head .jh-outline-button * {
  color: var(--jh-green) !important;
}

.jh-outline-button:hover,
.jh-directory-profile:hover,
.jh-featured-head .jh-outline-button:hover {
  background: var(--jh-green) !important;
  border-color: var(--jh-green) !important;
  color: #FFFFFF !important;
}

.jh-outline-button:hover *,
.jh-directory-profile:hover *,
.jh-featured-head .jh-outline-button:hover * {
  color: #FFFFFF !important;
}

/* Action links */
.jh-news-read,
.jh-news-read *,
.jh-subcat-bottom a,
.jh-dept-actions a,
.jh-category-subnav a {
  color: var(--jh-green) !important;
  font-weight: 800 !important;
}

.jh-dept-actions a:hover {
  background: var(--jh-green) !important;
  color: #FFFFFF !important;
}

.jh-news-read:hover,
.jh-subcat-bottom a:hover {
  color: var(--jh-red) !important;
}

.jh-category-subnav a:hover,
.jh-category-subnav .jh-subnav-current {
  background: var(--jh-green) !important;
  color: #FFFFFF !important;
}

/* Date / Time buttons */
#appointmentForm .jh-date-btn.active,
#appointmentForm .jh-time-btn.active {
  background: var(--jh-green) !important;
  color: #FFFFFF !important;
  border-color: var(--jh-green) !important;
}

#appointmentForm .jh-date-btn:hover,
#appointmentForm .jh-time-btn:hover {
  border-color: var(--jh-green) !important;
}

/* Active pagination button */
#pagination button.bg-primary {
  background: var(--jh-green) !important;
  color: #FFFFFF !important;
}

/* ==========================================================
   White text preserved on green & dark surfaces
   ========================================================== */
.jh-stats-section,
.jh-stats-section *,
.jh-final-cta,
.jh-final-cta *:not(.bg-white):not(.bg-white *):not([href="#appointment-box"]):not([href="#appointment-box"] *),
.jh-contact-message-card,
.jh-contact-message-card p,
.jh-contact-message-card h2,
.jh-contact-message-card span,
.jh-contact-message-card *,
.jh-contact-layout .jh-contact-message-card,
.jh-contact-layout .jh-contact-message-card p,
.jh-contact-layout .jh-contact-message-card h2,
.jh-contact-layout .jh-contact-message-card span,
.jh-contact-layout .jh-contact-message-card *,
[class*="from-primary"]:not(.jh-hotline-card):not(.jh-hotline-card *),
[class*="from-primary"] *:not(.bg-clinical-white):not(.bg-clinical-white *):not(.bg-white):not(.bg-white *):not([href="#appointment-box"]):not([href="#appointment-box"] *):not(.jh-hotline-card):not(.jh-hotline-card *),
.bg-gradient-to-r.from-primary:not(.jh-hotline-card):not(.jh-hotline-card *),
.bg-gradient-to-r.from-primary *:not(.bg-clinical-white):not(.bg-clinical-white *):not(.bg-white):not(.bg-white *):not([href="#appointment-box"]):not([href="#appointment-box"] *):not(.jh-hotline-card):not(.jh-hotline-card *) {
  color: #FFFFFF !important;
}

.jh-contact-message-card .jh-brand-button {
  background: #FFFFFF !important;
  color: var(--jh-deep-green) !important;
  border-color: #FFFFFF !important;
}

.jh-contact-message-card .jh-brand-button * {
  background: transparent !important;
  color: var(--jh-deep-green) !important;
}

.jh-contact-message-card .jh-outline-button {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
}

.jh-contact-message-card .jh-outline-button * {
  background: transparent !important;
  color: #FFFFFF !important;
}

.jh-contact-message-card .jh-outline-button:hover {
  background: #FFFFFF !important;
  color: var(--jh-deep-green) !important;
  border-color: #FFFFFF !important;
}

.jh-contact-message-card .jh-outline-button:hover * {
  color: var(--jh-deep-green) !important;
}

/* CTA Primary White Button (Book Appointment) */
.jh-final-cta a.bg-white,
.jh-final-cta a[href="#appointment-box"],
.jh-final-cta a.text-primary,
[class*="from-primary"] a.bg-white,
[class*="from-primary"] a[href="#appointment-box"],
html .jh-final-cta a.bg-white,
html .jh-final-cta a[href="#appointment-box"] {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  color: var(--jh-green) !important;
  border: 2px solid #FFFFFF !important;
}

.jh-final-cta a.bg-white *,
.jh-final-cta a[href="#appointment-box"] *,
.jh-final-cta a.text-primary *,
[class*="from-primary"] a.bg-white *,
[class*="from-primary"] a[href="#appointment-box"] *,
html .jh-final-cta a.bg-white *,
html .jh-final-cta a[href="#appointment-box"] * {
  background: transparent !important;
  color: var(--jh-green) !important;
  fill: var(--jh-green) !important;
}

.jh-final-cta a.bg-white:hover,
.jh-final-cta a[href="#appointment-box"]:hover,
[class*="from-primary"] a.bg-white:hover,
[class*="from-primary"] a[href="#appointment-box"]:hover,
html .jh-final-cta a.bg-white:hover,
html .jh-final-cta a[href="#appointment-box"]:hover {
  background-color: var(--jh-red) !important;
  background: var(--jh-red) !important;
  border-color: var(--jh-red) !important;
  color: #FFFFFF !important;
}

.jh-final-cta a.bg-white:hover *,
.jh-final-cta a[href="#appointment-box"]:hover *,
[class*="from-primary"] a.bg-white:hover *,
[class*="from-primary"] a[href="#appointment-box"]:hover *,
html .jh-final-cta a.bg-white:hover *,
html .jh-final-cta a[href="#appointment-box"]:hover * {
  background: transparent !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* CTA Secondary Outlined Button (Phone Call) */
.jh-final-cta a[href^="tel:"]:not(.jh-hotline-phone-link):not(.jh-hotline-call-btn),
html .jh-final-cta a[href^="tel:"]:not(.jh-hotline-phone-link):not(.jh-hotline-call-btn) {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
}

.jh-final-cta a[href^="tel:"]:not(.jh-hotline-phone-link):not(.jh-hotline-call-btn) *,
html .jh-final-cta a[href^="tel:"]:not(.jh-hotline-phone-link):not(.jh-hotline-call-btn) * {
  background: transparent !important;
  color: #FFFFFF !important;
}

.jh-final-cta a[href^="tel:"]:not(.jh-hotline-phone-link):not(.jh-hotline-call-btn):hover,
html .jh-final-cta a[href^="tel:"]:not(.jh-hotline-phone-link):not(.jh-hotline-call-btn):hover {
  background: #FFFFFF !important;
  color: var(--jh-green) !important;
  border-color: #FFFFFF !important;
}

.jh-final-cta a[href^="tel:"]:not(.jh-hotline-phone-link):not(.jh-hotline-call-btn):hover *,
html .jh-final-cta a[href^="tel:"]:not(.jh-hotline-phone-link):not(.jh-hotline-call-btn):hover * {
  background: transparent !important;
  color: var(--jh-green) !important;
}

/* ==========================================================
   Header & Footer Brand Logo Sizing
   ========================================================== */
header .jh-logo {
  height: 54px !important;
  width: auto !important;
  max-height: 56px !important;
  object-fit: contain !important;
  display: block !important;
  transition: transform .2s ease !important;
}

header a:hover .jh-logo {
  transform: scale(1.03);
}

/* In Arabic (RTL), in the brand header, just show 'مستشفى الأردن' */
html[dir="rtl"] header a[data-path="home"] div.flex-col>span:last-child,
html[dir="rtl"] header a[href="index.html"] div.flex-col>span:last-child,
html[dir="rtl"] header .jh-brand-name-en {
  display: none !important;
}

html[dir="rtl"] header a[href="index.html"] span.font-headline-sm,
html[dir="rtl"] header a[data-path="home"] span.font-headline-sm,
html[dir="rtl"] header .jh-brand-name-ar {
  display: block !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

/* In English (LTR), show 'Jordan Hospital' */
html[dir="ltr"] header a[data-path="home"] div.flex-col>span:first-child,
html[dir="ltr"] header a[href="index.html"] div.flex-col>span:first-child,
html[dir="ltr"] header .jh-brand-name-ar {
  display: none !important;
}

html[dir="ltr"] header a[data-path="home"] div.flex-col>span:last-child,
html[dir="ltr"] header a[href="index.html"] div.flex-col>span:last-child,
html[dir="ltr"] header .jh-brand-name-en {
  display: block !important;
  font-size: 20px !important;
  color: var(--jh-green) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

footer .jh-logo {
  height: 44px !important;
  width: auto !important;
  max-height: 46px !important;
  object-fit: contain !important;
}

/* ==========================================================
   English Header Navigation & Typography Fixes
   - Clean Sans-Serif font ('Plus Jakarta Sans' / 'Segoe UI')
   - Absolute protection for Material Symbols icon glyphs
   - No wrapping or overlapping across logo, menu items, or buttons
   - Optimized spacing for English text
   ========================================================== */
html,
body,
header,
nav,
button,
input,
select,
textarea,
a,
span:not(.material-symbols-outlined),
p,
h1,
h2,
h3,
h4,
div {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html[dir="ltr"],
html[dir="ltr"] body,
html[dir="ltr"] header,
html[dir="ltr"] nav,
html[dir="ltr"] a,
html[dir="ltr"] span:not(.material-symbols-outlined),
html[dir="ltr"] button,
html[dir="ltr"] div {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Strict enforcement for all Material Symbols icons */
.material-symbols-outlined,
span.material-symbols-outlined,
i.material-symbols-outlined,
header .material-symbols-outlined,
nav .material-symbols-outlined,
aside .material-symbols-outlined,
div .material-symbols-outlined,
a .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' 1 !important;
  -webkit-font-feature-settings: 'liga' 1 !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* Header container alignment */
header .h-20 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Brand container must never compress, squish or overlap */
header .h-20>div:first-child,
header a[data-path="home"],
header a[data-path="home"] div.flex-col,
html[dir="ltr"] header a[data-path="home"] div.flex-col>span:last-child {
  flex-shrink: 0 !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

header a[data-path="home"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-inline-end: 12px !important;
}

html[dir="ltr"] header .jh-brand-name-en {
  font-size: 19px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: var(--jh-green) !important;
  white-space: nowrap !important;
  display: block !important;
}

header nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

header nav a,
header nav span:not(.material-symbols-outlined),
header nav .jh-nav-departments,
header a[data-path="book-appointment"] {
  white-space: nowrap !important;
}

html[dir="ltr"] header nav {
  gap: 8px !important;
  flex-shrink: 1 !important;
}

html[dir="ltr"] header nav>a,
html[dir="ltr"] header nav .jh-nav-departments {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 6px 9px !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

html[dir="ltr"] header nav a[aria-current="page"],
html[dir="ltr"] header nav a.bg-primary-container {
  padding: 6px 14px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

html[dir="ltr"] header a[data-path="book-appointment"] {
  font-size: 13px !important;
  padding: 8px 14px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1.2 !important;
  border-radius: 8px !important;
}

html[dir="ltr"] header a[data-path="book-appointment"] .material-symbols-outlined {
  font-size: 17px !important;
}

@media (min-width: 1024px) and (max-width: 1280px) {
  html[dir="ltr"] header .h-20 {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 6px !important;
  }

  html[dir="ltr"] header a[data-path="home"] {
    margin-inline-end: 6px !important;
    gap: 6px !important;
  }

  header .jh-logo {
    height: 44px !important;
    max-height: 46px !important;
  }

  html[dir="ltr"] header .jh-brand-name-en {
    font-size: 16.5px !important;
  }

  html[dir="ltr"] header nav {
    gap: 4px !important;
  }

  html[dir="ltr"] header nav>a,
  html[dir="ltr"] header nav .jh-nav-departments {
    padding: 5px 6px !important;
    font-size: 12px !important;
  }

  html[dir="ltr"] header nav a[aria-current="page"],
  html[dir="ltr"] header nav a.bg-primary-container {
    padding: 5px 10px !important;
    font-size: 12px !important;
  }

  html[dir="ltr"] header a[data-path="book-appointment"] {
    padding: 7px 10px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
  }

  html[dir="ltr"] header a[data-path="book-appointment"] .material-symbols-outlined {
    font-size: 15px !important;
  }
}

/* ==========================================================
   Universal Card Images: Exact 280x350 Ratio & Edge-to-Edge Fill
   All doctor images are 280x350 and must fill the card container
   completely edge-to-edge without white borders or letterboxing.
   ========================================================== */
.jh-home-doctor-photo,
.jh-directory-photo,
.jh-subdoctor-photo,
.jh-related-doctor-photo,
.doctor-card>div:first-child,
.jh-home-doctor-card>a:first-child,
.jh-subdoctor-card>a:first-child {
  width: 100% !important;
  aspect-ratio: 280 / 350 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--jh-green) !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.jh-home-doctor-photo img,
.jh-directory-photo img,
.jh-subdoctor-photo img,
.jh-related-doctor-photo,
.jh-related-doctor-photo img,
.doctor-card>div:first-child>img,
.doctor-card img.jh-card-img,
.doctor-card img.jh-doctor-photo,
.jh-home-doctor-card img,
.jh-subdoctor-card img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
}

/* Detail Doctor Hero Profile Card Image */
.jh-detail-hero .jh-doctor-photo,
.jh-detail-hero img.jh-doctor-photo {
  width: 100% !important;
  max-width: 280px !important;
  aspect-ratio: 280 / 350 !important;
  height: auto !important;
  max-height: 350px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

/* ==========================================================
   Hotline Bento Card & Consultation Banner (Doctors Directory)
   State-of-the-Art Luxury Healthcare Aesthetics
   ========================================================== */
.jh-hotline-banner {
  background: linear-gradient(135deg, #007A3D 0%, #00A651 55%, #006030 100%) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 45px -10px rgba(0, 166, 81, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Force all headings, paragraphs, and spans in the banner to crisp pure white */
.jh-hotline-banner,
.jh-hotline-banner *:not(.jh-hotline-card):not(.jh-hotline-card *):not(.material-symbols-outlined) {
  color: #FFFFFF !important;
}

.jh-hotline-banner h2,
.jh-hotline-banner h2 *,
.jh-hotline-banner p,
.jh-hotline-banner p *,
.jh-hotline-banner span:not(.jh-hotline-card *):not(.text-emerald-300) {
  color: #FFFFFF !important;
}

.jh-hotline-card {
  background: #FFFFFF !important;
  border-radius: 24px !important;
  padding: 30px 24px 26px 24px !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.9) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 380px !important;
  border: none !important;
  position: relative !important;
  z-index: 2 !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  box-sizing: border-box !important;
}

.jh-hotline-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 30px 56px -12px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.95) !important;
}

/* Status indicator badge */
.jh-hotline-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #065F46 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
}

.jh-hotline-badge span,
.jh-hotline-badge * {
  color: #065F46 !important;
}

.jh-hotline-ping-circle {
  background-color: #10B981 !important;
}

.jh-hotline-dot {
  background-color: #059669 !important;
}

/* Interactive phone number container & link */
.jh-hotline-phone-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  border-radius: 16px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.jh-hotline-phone-link:hover {
  background: #ECFDF5 !important;
  border-color: #10B981 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 166, 81, 0.12) !important;
}

.jh-hotline-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background: #E8F7EE !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
  border: none !important;
}

.jh-hotline-icon-wrap .material-symbols-outlined {
  font-size: 22px !important;
  color: #00A651 !important;
  transition: all 0.25s ease !important;
  line-height: 1 !important;
}

.jh-hotline-phone-link:hover .jh-hotline-icon-wrap {
  background: #00A651 !important;
}

.jh-hotline-phone-link:hover .jh-hotline-icon-wrap .material-symbols-outlined {
  color: #FFFFFF !important;
}

.jh-hotline-number {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #0F172A !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  direction: ltr !important;
  unicode-bidi: embed !important;
  transition: color 0.25s ease !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

.jh-hotline-phone-link:hover .jh-hotline-number {
  color: #00A651 !important;
}

/* Location text */
.jh-hotline-location {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: #64748B !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.jh-hotline-location span,
.jh-hotline-location * {
  color: #64748B !important;
}

.jh-hotline-location .material-symbols-outlined {
  font-size: 17px !important;
  color: #94A3B8 !important;
}

/* Main CTA action button */
.jh-hotline-call-btn {
  width: 100% !important;
  min-height: 50px !important;
  padding: 13px 20px !important;
  border-radius: 14px !important;
  background: #00A651 !important;
  color: #FFFFFF !important;
  border: 2px solid #00A651 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(0, 166, 81, 0.28) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.jh-hotline-call-btn span,
.jh-hotline-call-btn * {
  color: #FFFFFF !important;
  background: transparent !important;
}

.jh-hotline-call-btn .material-symbols-outlined {
  font-size: 21px !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
}

.jh-hotline-call-btn:hover {
  background: #ED1C24 !important;
  border-color: #ED1C24 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(237, 28, 36, 0.32) !important;
}

.jh-hotline-call-btn:active {
  transform: translateY(0) !important;
}

/* ==========================================================
   Responsive foundation and accessible mobile navigation
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
a,
button,
label,
span {
  overflow-wrap: anywhere;
}

a,
button,
select,
input,
textarea {
  touch-action: manipulation;
}

.jh-mobile-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--jh-green);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--jh-green);
  cursor: pointer;
}

.jh-mobile-menu-button .material-symbols-outlined {
  color: var(--jh-green) !important;
  font-size: 26px !important;
}

.jh-mobile-menu {
  display: none !important;
}

@media (max-width: 1023px) {
  header nav:not(.jh-mobile-menu) {
    display: none !important;
  }

  header .h-20 > .flex.items-center.gap-space-sm > a[data-path="book-appointment"] {
    display: none !important;
  }

  .jh-mobile-menu-button {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .jh-mobile-menu {
    position: fixed !important;
    inset-inline: 12px;
    top: 112px;
    bottom: 12px;
    z-index: 120;
    max-height: none;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    white-space: normal !important;
    background: #FFFFFF !important;
    border: 1px solid var(--jh-green);
    border-radius: 14px;
    box-shadow: 0 18px 46px rgba(0, 80, 40, .2) !important;
  }

  .jh-mobile-menu.open {
    display: flex !important;
  }

  .jh-mobile-menu > a,
  .jh-mobile-menu .jh-nav-departments,
  .jh-mobile-menu .jh-menu-drop-link {
    display: flex !important;
    width: 100%;
    min-height: 44px;
    align-items: center;
    padding: 10px 12px !important;
    border-radius: 9px;
    color: #000000 !important;
    white-space: normal !important;
    line-height: 1.45 !important;
  }

  .jh-mobile-menu .jh-nav-dropdown {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .jh-mobile-menu .jh-nav-departments .material-symbols-outlined {
    display: none !important;
  }

  .jh-mobile-menu .jh-nav-dropdown-menu,
  .jh-mobile-menu .jh-nav-dropdown:hover .jh-nav-dropdown-menu {
    display: none !important;
    position: static !important;
    width: 100%;
    min-width: 0;
    padding: 4px 8px 8px !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .jh-mobile-menu .jh-nav-dropdown.submenu-open .jh-nav-dropdown-menu,
  .jh-mobile-menu .jh-nav-dropdown.submenu-open:hover .jh-nav-dropdown-menu {
    display: grid !important;
  }

  .jh-mobile-menu .jh-nav-dropdown > .jh-nav-departments {
    padding-inline-end: 50px !important;
  }

  .jh-mobile-submenu-button {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    z-index: 2;
    display: inline-flex;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-inline-start: 1px solid rgba(0, 166, 81, .22);
    background: transparent !important;
    color: var(--jh-green) !important;
    cursor: pointer;
  }

  .jh-mobile-submenu-button .material-symbols-outlined {
    display: inline-block !important;
    color: var(--jh-green) !important;
    font-size: 22px !important;
  }

  .jh-mobile-menu .jh-nav-active > .jh-mobile-submenu-button .material-symbols-outlined,
  .jh-mobile-menu .jh-nav-dropdown:has(.jh-nav-departments[aria-current="page"]) > .jh-mobile-submenu-button .material-symbols-outlined {
    color: #FFFFFF !important;
  }

  .jh-mobile-menu .jh-menu-drop-link {
    min-height: 40px;
    padding-inline-start: 22px !important;
    font-size: 14px !important;
    border-inline-start: 2px solid rgba(0, 166, 81, .25);
    border-radius: 0 8px 8px 0;
  }

  html[dir="ltr"] .jh-mobile-menu .jh-menu-drop-link {
    border-radius: 8px 0 0 8px;
  }

  .jh-mobile-menu a[aria-current="page"],
  .jh-mobile-menu .jh-nav-active > .jh-nav-departments {
    background: var(--jh-green) !important;
    color: #FFFFFF !important;
  }

  body.jh-menu-open {
    overflow: hidden;
  }

  header .h-20 {
    height: 72px !important;
    min-height: 72px;
  }

  header a[data-path="home"] {
    min-width: 0 !important;
    margin-inline-end: 0 !important;
  }

  header a[data-path="home"] div.flex-col {
    min-width: 0 !important;
  }

  header a[data-path="home"] div.flex-col > span {
    white-space: nowrap !important;
  }

  main.pt-\[120px\],
  .jh-page-main,
  .jh-en-main {
    padding-top: 112px !important;
  }

  .jh-category-subnav {
    top: 112px !important;
  }

  .jh-page-wrap,
  .jh-featured-section,
  main > section,
  footer .max-w-7xl {
    max-width: 100%;
  }

  .jh-detail-hero .grid,
  .jh-contact-layout {
    min-width: 0;
  }

  .jh-hotline-banner {
    padding: 28px 22px !important;
  }
}

@media (max-width: 767px) {
  header > .bg-primary .max-w-7xl {
    height: 40px !important;
    gap: 8px !important;
  }

  header > .bg-primary a[href^="tel:"] {
    min-width: 0;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  header > .bg-primary a[href^="tel:"] > span:last-child {
    display: block;
    max-width: 210px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  header .h-20 {
    padding-inline: 16px !important;
  }

  header .h-20 > div:first-child,
  header .h-20 > div:first-child a[data-path="home"] {
    min-width: 0 !important;
    max-width: calc(100vw - 92px);
  }

  header .jh-logo {
    height: 38px !important;
    max-height: 38px !important;
  }

  header a[data-path="home"] div.flex-col > span:first-child,
  html[dir="ltr"] header .jh-brand-name-en {
    font-size: 16px !important;
  }

  header a[data-path="home"] div.flex-col > span:last-child {
    font-size: 10px !important;
  }

  .jh-page-wrap,
  .jh-featured-section,
  .jh-en-section {
    padding-inline: 16px !important;
  }

  .jh-home-hero > .relative,
  .jh-home-hero > .relative > div,
  .jh-home-hero .max-w-2xl {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .jh-home-hero > .relative {
    padding: 40px 16px 64px !important;
  }

  .jh-home-hero .jh-hero-pill {
    max-width: 100%;
  }

  .jh-home-hero .jh-hero-pill span:last-child {
    white-space: normal !important;
  }

  .jh-home-hero h1 {
    font-size: clamp(34px, 11vw, 46px) !important;
    line-height: 1.3 !important;
  }

  .jh-page-hero,
  .jh-section-space {
    padding-block: 28px !important;
  }

  .jh-page-hero > .jh-page-wrap {
    padding: 22px 18px !important;
  }

  .jh-page-hero h1,
  .jh-featured-head h2,
  .jh-section-title h2 {
    font-size: clamp(26px, 8vw, 32px) !important;
    line-height: 1.3 !important;
  }

  .jh-dept-main-link,
  .jh-subcat-card > a,
  .jh-news-body,
  .jh-article-copy,
  #appointmentForm {
    padding: 20px !important;
  }

  .jh-dept-actions,
  .jh-directory-actions {
    grid-template-columns: 1fr !important;
  }

  .jh-dept-actions a + a {
    border-right: 0;
    border-top: 1px solid var(--jh-green);
  }

  .jh-final-cta .flex-wrap,
  .jh-contact-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch !important;
  }

  .jh-final-cta a,
  .jh-contact-actions a,
  .jh-hero-actions a {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    text-align: center;
  }

  .jh-related-doctors-grid {
    grid-template-columns: 1fr !important;
  }

  .jh-hotline-banner {
    padding: 24px 16px !important;
    border-radius: 18px !important;
  }

  .jh-hotline-card {
    max-width: 100% !important;
    padding: 24px 16px !important;
  }
}

@media (max-width: 479px) {
  body {
    min-width: 0;
  }

  header > .bg-primary a[href^="tel:"] .material-symbols-outlined,
  header > .bg-primary a[href^="tel:"] .relative {
    display: none !important;
  }

  header > .bg-primary a[href^="tel:"] > span:last-child {
    max-width: 170px;
  }

  header .jh-logo {
    height: 34px !important;
  }

  header a[data-path="home"] {
    gap: 6px !important;
  }

  .jh-home-hero .flex.flex-wrap.items-center.gap-space-md,
  .jh-home-hero .grid.grid-cols-3 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  .jh-home-hero .jh-hero-primary-btn,
  .jh-home-hero .jh-hero-secondary-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }

  .jh-home-hero .jh-trust-card {
    width: 100%;
  }

  header a[data-path="home"] div.flex-col > span:first-child,
  html[dir="ltr"] header .jh-brand-name-en {
    font-size: 14px !important;
  }

  .jh-mobile-menu {
    inset-inline: 8px;
  }

  .jh-doctors-grid,
  .jh-contact-info-grid,
  .jh-news-grid,
  .jh-dept-grid,
  .jh-subcat-grid,
  .jh-subdoctor-grid {
    grid-template-columns: 1fr !important;
  }

  #dateChoices,
  #timeChoices {
    grid-template-columns: 1fr 1fr !important;
  }

  .jh-hotline-number {
    font-size: 21px !important;
  }
}

/* ==========================================================
   Mobile homepage composition — compact, swipeable, intentional
   ========================================================== */
@media (max-width: 640px) {
  .jh-home-page header > .bg-primary .max-w-7xl {
    height: 34px !important;
    padding-inline: 14px !important;
  }

  .jh-home-page header > .bg-primary a[href^="tel:"] {
    font-size: 10px !important;
  }

  .jh-home-page header > .bg-primary a[href^="tel:"] > span:not(:last-child) {
    display: none !important;
  }

  .jh-home-page header .h-20 {
    height: 66px !important;
    min-height: 66px !important;
  }

  .jh-home-page main.pt-\[120px\] {
    padding-top: 100px !important;
  }

  .jh-home-page .jh-mobile-menu {
    top: 102px;
    bottom: 10px;
    max-height: none;
  }

  .jh-emergency-ticker {
    padding: 7px 14px !important;
  }

  .jh-emergency-ticker > div {
    min-height: 34px;
    flex-direction: row !important;
    justify-content: center !important;
  }

  .jh-emergency-ticker > div > div:first-child {
    display: none !important;
  }

  .jh-emergency-ticker > div > div:last-child {
    width: 100%;
    justify-content: space-between;
    gap: 12px !important;
    font-size: 12px !important;
  }

  .jh-emergency-ticker a {
    min-height: 32px;
    align-items: center;
  }

  .jh-home-hero > .relative {
    gap: 30px !important;
    padding: 30px 16px 58px !important;
  }

  .jh-home-hero .max-w-2xl {
    gap: 14px !important;
  }

  html[dir="ltr"] .jh-home-hero h1 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: clamp(32px, 10.5vw, 42px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
  }

  html[dir="rtl"] .jh-home-hero h1 {
    font-size: clamp(34px, 10.5vw, 44px) !important;
    line-height: 1.25 !important;
  }

  .jh-home-hero h1 span {
    margin-top: 8px !important;
  }

  .jh-home-hero p {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  .jh-home-hero .jh-hero-pill {
    padding: 7px 11px !important;
    font-size: 11px !important;
  }

  .jh-home-hero .flex.flex-wrap.items-center.gap-space-md {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100%;
  }

  .jh-home-hero .jh-hero-primary-btn,
  .jh-home-hero .jh-hero-secondary-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    padding: 11px 16px !important;
  }

  .jh-home-hero .grid.grid-cols-3 {
    display: flex !important;
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    margin-inline-end: -16px;
    padding-inline-end: 16px;
    gap: 10px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .jh-home-hero .grid.grid-cols-3::-webkit-scrollbar,
  .jh-priority-grid::-webkit-scrollbar,
  .jh-home-centers .grid::-webkit-scrollbar,
  .jh-home-news .grid::-webkit-scrollbar {
    display: none;
  }

  .jh-home-hero .jh-trust-card {
    flex: 0 0 164px;
    min-height: 78px;
    scroll-snap-align: start;
    padding: 11px !important;
  }

  .jh-home-hero .jh-trust-card .material-symbols-outlined {
    font-size: 21px !important;
  }

  .jh-home-hero .jh-trust-card .font-label-sm,
  .jh-home-hero .jh-trust-card .font-label-md {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .jh-home-hero > .relative > div:last-child .aspect-\[4\/3\] {
    aspect-ratio: 16 / 11 !important;
    border-radius: 18px !important;
  }

  .jh-home-hero .jh-operation-card {
    inset-inline: 10px !important;
    bottom: 10px !important;
    padding: 10px !important;
  }

  .jh-home-hero .jh-operation-card > span:last-child {
    display: none !important;
  }

  .jh-home-hero .jh-consultant-card {
    top: 10px !important;
    inset-inline-start: 10px !important;
    left: auto !important;
    right: auto !important;
    max-width: 190px !important;
  }

  #appointment-box {
    margin-top: -34px !important;
    padding-inline: 16px !important;
  }

  #appointment-box > div {
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }

  #appointment-box h2 {
    font-size: 22px !important;
    line-height: 1.35 !important;
  }

  #booking-form {
    gap: 10px !important;
  }

  #booking-form > .jh-booking-field {
    padding: 11px !important;
  }

  .jh-priority-section,
  .jh-home-centers,
  .jh-featured-section,
  .jh-stats-section,
  .jh-home-news {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .jh-priority-section,
  .jh-home-news {
    padding-inline: 16px !important;
  }

  .jh-priority-heading,
  .jh-home-centers h2,
  .jh-featured-section h2,
  .jh-home-news h2 {
    font-size: 27px !important;
    line-height: 1.25 !important;
  }

  .jh-priority-section > div:first-child,
  .jh-home-news > div:first-child {
    margin-bottom: 22px !important;
  }

  .jh-priority-grid {
    display: flex !important;
    width: calc(100vw - 16px);
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline-end: 16px;
  }

  .jh-priority-card {
    flex: 0 0 min(82vw, 310px);
    min-height: 230px !important;
    padding: 20px !important;
    scroll-snap-align: start;
  }

  .jh-priority-card h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  .jh-priority-card p {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .jh-home-centers > div {
    padding-inline: 16px !important;
    gap: 24px !important;
  }

  .jh-home-centers > div > div:first-child > a,
  .jh-home-news > div:first-child > a {
    min-height: 44px;
    align-items: center;
  }

  .jh-home-centers .grid {
    display: flex !important;
    width: calc(100vw - 16px);
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline-end: 16px;
  }

  .jh-home-centers .grid > article {
    flex: 0 0 min(86vw, 340px);
    scroll-snap-align: start;
  }

  .jh-home-centers article > .relative.h-48 {
    height: 170px !important;
  }

  .jh-home-centers article > .p-space-lg {
    padding: 18px !important;
  }

  .jh-featured-section {
    padding-inline: 16px !important;
  }

  .jh-carousel-header-controls {
    display: none !important;
  }

  .jh-home-doctor-card {
    flex-basis: min(82vw, 300px) !important;
    min-width: min(82vw, 300px) !important;
    max-width: min(82vw, 300px) !important;
  }

  .jh-stats-section > div {
    padding-inline: 16px !important;
  }

  .jh-stats-section .grid {
    gap: 10px !important;
  }

  .jh-stats-section .grid > div {
    padding: 14px 8px !important;
  }

  .jh-stats-section .text-display-hero {
    font-size: 32px !important;
  }

  .jh-stats-section .text-headline-sm {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .jh-home-news .grid {
    display: flex !important;
    width: calc(100vw - 16px);
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline-end: 16px;
  }

  .jh-home-news .grid > article {
    flex: 0 0 min(86vw, 340px);
    scroll-snap-align: start;
  }

  .jh-home-news article .p-space-lg {
    padding: 18px !important;
  }

  .jh-final-cta {
    padding: 38px 16px !important;
  }

  .jh-final-cta h2 {
    font-size: 25px !important;
    line-height: 1.3 !important;
  }
}

/* Tailwind's generated font token uses an unavailable family name on some
   mobile browsers; keep English typography consistently sans-serif. */
html[dir="ltr"] body,
html[dir="ltr"] body *:not(.material-symbols-outlined) {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
}

/* Phone doctor directory: two concise cards per row dramatically reduce
   scrolling while preserving direct profile and booking actions. */
@media (max-width: 640px) {
  .jh-doctors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .jh-directory-card {
    min-width: 0;
    border-radius: 13px !important;
  }

  .jh-directory-photo {
    aspect-ratio: 4 / 5 !important;
  }

  .jh-directory-body {
    gap: 7px !important;
    padding: 10px !important;
  }

  .jh-directory-copy {
    gap: 4px !important;
  }

  .jh-directory-copy h2 {
    min-height: 40px;
    font-size: 14px !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .jh-directory-specialty {
    min-height: 35px;
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .jh-directory-desc,
  .jh-directory-status {
    display: none !important;
  }

  .jh-directory-tag {
    inset-inline: 7px !important;
    right: 7px;
    bottom: 7px;
    max-width: calc(100% - 14px);
    padding: 3px 7px !important;
    font-size: 8.5px !important;
  }

  .jh-directory-actions {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  .jh-directory-actions a {
    min-height: 34px;
    padding: 5px 4px;
    font-size: 10px;
    line-height: 1.25;
  }

  .jh-directory-actions .material-symbols-outlined {
    font-size: 13px !important;
  }

  #doctor-grid {
    scroll-margin-top: 112px;
  }
}

@media (max-width: 350px) {
  .jh-doctors-grid {
    gap: 7px !important;
  }

  .jh-directory-body {
    padding: 8px !important;
  }
}

/* Phone navigation sheet */
.jh-mobile-menu-backdrop {
  display: none;
}

@media (max-width: 1023px) {
  .jh-mobile-menu-backdrop {
    position: fixed;
    inset: 112px 0 0;
    z-index: 990;
    background: rgba(8, 31, 20, .46);
    opacity: 0;
    backdrop-filter: blur(2px);
    transition: opacity .2s ease;
  }

  .jh-mobile-menu-backdrop.open {
    display: block;
    opacity: 1;
  }

  .jh-mobile-menu {
    z-index: 1000 !important;
    inset-inline: auto 12px !important;
    width: min(420px, calc(100vw - 24px));
    bottom: auto !important;
    max-height: calc(100dvh - 124px) !important;
    padding: 14px !important;
    gap: 5px !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(0, 45, 24, .28) !important;
    transform-origin: top right;
    animation: jh-menu-enter .2s ease-out;
  }

  .jh-mobile-menu.open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html[dir="ltr"] .jh-mobile-menu {
    inset-inline: 12px auto !important;
    transform-origin: top left;
  }

  @keyframes jh-menu-enter {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .jh-mobile-menu-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 8px 13px;
    margin-bottom: 3px;
    border-bottom: 1px solid #DDEBE3;
  }

  .jh-mobile-menu-head strong {
    color: #102A1D !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
  }

  .jh-mobile-menu-head span {
    color: #5C7065 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  .jh-mobile-menu > a,
  .jh-mobile-menu .jh-nav-departments {
    min-height: 48px !important;
    gap: 11px !important;
    padding: 10px 12px !important;
    color: #173B2A !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: 1px solid transparent;
    border-radius: 11px !important;
  }

  .jh-mobile-menu > a:hover,
  .jh-mobile-menu .jh-nav-departments:hover {
    background: #F0FAF4 !important;
    border-color: #BFE8D1;
    color: #007A3D !important;
  }

  .jh-mobile-menu > a[aria-current="page"],
  .jh-mobile-menu > a.bg-primary-container,
  .jh-mobile-menu .jh-nav-active > .jh-nav-departments {
    background: #E8F8EF !important;
    border-color: #A8DFC0 !important;
    color: #007A3D !important;
  }

  .jh-mobile-menu > a[aria-current="page"] *,
  .jh-mobile-menu > a.bg-primary-container *,
  .jh-mobile-menu .jh-nav-active > .jh-nav-departments * {
    color: #007A3D !important;
  }

  .jh-mobile-link-icon {
    display: inline-flex !important;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #E8F8EF !important;
    color: #008A46 !important;
    font-size: 18px !important;
  }

  .jh-mobile-menu .jh-nav-departments .jh-mobile-link-icon {
    display: inline-flex !important;
  }

  .jh-mobile-menu .jh-nav-dropdown > .jh-nav-departments {
    padding-inline-end: 52px !important;
  }

  .jh-mobile-submenu-button {
    top: 2px;
    inset-inline-end: 3px;
    width: 43px;
    height: 44px;
    border-inline-start: 0;
    border-radius: 9px;
  }

  .jh-mobile-submenu-button:hover {
    background: #E8F8EF !important;
  }

  .jh-mobile-menu .jh-nav-dropdown-menu {
    margin: 4px 0 7px;
    padding: 7px !important;
    background: #F6FAF8 !important;
    border: 1px solid #DDEBE3 !important;
    border-radius: 12px !important;
  }

  .jh-mobile-menu .jh-menu-drop-link {
    min-height: 39px;
    padding: 8px 10px !important;
    color: #344C3F !important;
    font-size: 12.5px !important;
    border-inline-start: 0;
    border-radius: 8px !important;
  }

  .jh-mobile-menu .jh-menu-drop-link:hover {
    background: #FFFFFF !important;
    color: #007A3D !important;
  }

  .jh-mobile-book {
    display: flex !important;
    min-height: 50px !important;
    margin-top: 8px;
    justify-content: center;
    background: var(--jh-green) !important;
    border-color: var(--jh-green) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 20px rgba(0, 166, 81, .22);
  }

  .jh-mobile-book *,
  .jh-mobile-book:hover * {
    color: #FFFFFF !important;
  }

  .jh-mobile-book:hover {
    background: #008A46 !important;
    border-color: #008A46 !important;
    color: #FFFFFF !important;
  }

  .jh-mobile-menu-button.open {
    background: #E8F8EF;
  }

  .jh-home-page .jh-mobile-menu-backdrop {
    inset-block-start: 100px;
  }
}

@media (max-width: 640px) {
  .jh-mobile-menu {
    top: 104px;
    bottom: auto !important;
    max-height: calc(100dvh - 114px) !important;
    inset-inline-end: 8px !important;
    width: calc(100vw - 16px);
  }

  html[dir="ltr"] .jh-mobile-menu {
    inset-inline-start: 8px !important;
    inset-inline-end: auto !important;
  }

  .jh-home-page .jh-mobile-menu {
    top: 102px;
  }
}

/* Compact doctor filters on phones */
.jh-mobile-filter-toggle,
.jh-mobile-filter-apply {
  display: none;
}

.jh-doctor-filter-panel {
  display: contents;
}

@media (max-width: 767px) {
  .jh-doctor-filter-section {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    padding: 12px 16px !important;
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    box-shadow: 0 5px 18px rgba(0, 90, 45, .08) !important;
  }

  .jh-mobile-filter-toggle {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    color: #173B2A;
    background: #FFFFFF;
    border: 1px solid #A8DFC0;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(0, 166, 81, .1);
  }

  .jh-mobile-filter-toggle > .material-symbols-outlined:first-child {
    color: var(--jh-green) !important;
  }

  .jh-mobile-filter-label {
    flex: 1;
    text-align: start;
  }

  .jh-mobile-filter-count {
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 7px;
    color: #FFFFFF !important;
    background: var(--jh-green);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
  }

  .jh-mobile-filter-chevron {
    color: #557064 !important;
    transition: transform .2s ease;
  }

  .jh-doctor-filter-panel {
    display: none;
    padding-top: 12px;
    flex-direction: column;
    gap: 12px;
  }

  .jh-doctor-filter-panel.open {
    display: flex;
  }

  .jh-doctor-filter-panel > .grid {
    gap: 10px !important;
  }

  .jh-doctor-filter-panel input,
  .jh-doctor-filter-panel select {
    height: 48px !important;
  }

  .jh-doctor-filter-panel > .flex {
    padding: 2px 2px 0 !important;
  }

  .jh-mobile-filter-apply {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    color: #FFFFFF !important;
    background: var(--jh-green);
    border: 0;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 7px 18px rgba(0, 166, 81, .18);
  }

  .jh-mobile-filter-apply * {
    color: #FFFFFF !important;
  }
}

.jh-legal-main {
  padding: 152px 20px 64px;
  min-height: 100vh;
}

.jh-legal-shell {
  width: min(900px, 100%);
  margin: 0 auto;
}

.jh-legal-card {
  margin-top: 24px;
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid var(--jh-green);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 166, 81, .08);
}

.jh-legal-card h1 {
  margin: 0 0 12px;
  color: #006B37;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.25;
}

.jh-legal-card h2 {
  margin: 28px 0 8px;
  color: #006B37;
  font-size: 21px;
  font-weight: 800;
}

.jh-legal-card p,
.jh-legal-card li {
  color: #173B2A;
  line-height: 1.9;
}

.jh-legal-card ul {
  padding-inline-start: 24px;
}

.jh-legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

@media (max-width: 1023px) {
  .jh-legal-main {
    padding-top: 136px;
  }
}

@media (max-width: 479px) {
  .jh-legal-main {
    padding-inline: 16px;
  }

  .jh-legal-actions {
    flex-direction: column;
  }

  .jh-legal-actions a {
    width: 100%;
    justify-content: center;
  }
}