/* Reuse the practice emblem on the physical right in every language. */
:root {
  --banner-logo-size: clamp(64px, 11vw, 128px);
  --banner-logo-gap: clamp(18px, 3vw, 32px);
  --banner-logo-edge: clamp(18px, 3vw, 28px);
}

html body.site-design #main-content .herosub .hero-titles {
  box-sizing: border-box !important;
  min-height: calc(var(--banner-logo-size) + 48px) !important;
  padding-left: var(--banner-logo-edge) !important;
  padding-right: calc(var(--banner-logo-edge) + var(--banner-logo-size) + var(--banner-logo-gap)) !important;
}

html body.site-design #main-content .herosub .hero-titles::after,
html body > section.hero > .wrap > h1::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  right: var(--banner-logo-edge) !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--banner-logo-size) !important;
  height: var(--banner-logo-size) !important;
  transform: translateY(-50%) !important;
  background: #fff url("/assets/images/ahad-md-pc-emblem.svg") center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

html body.site-design #main-content .herosub .hero-titles-inner {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
}

html body.site-design #main-content .herosub .hero-titles h1 {
  text-align: start !important;
  overflow-wrap: anywhere;
}

/* Replace the old decorative arch with the emblem. */
html body.site-design #main-content .herosub::after {
  content: none !important;
  display: none !important;
}

/* The memory-care page has a standalone banner template. */
html body > section.hero > .wrap > h1 {
  position: relative;
  box-sizing: border-box;
  max-width: none;
  min-height: var(--banner-logo-size);
  padding-right: calc(var(--banner-logo-size) + var(--banner-logo-gap));
}

html body > section.hero > .wrap > h1::after {
  right: 0 !important;
}

@media print {
  html body.site-design #main-content .herosub .hero-titles::after,
  html body > section.hero > .wrap > h1::after { display: none !important; }
  html body.site-design #main-content .herosub .hero-titles,
  html body > section.hero > .wrap > h1 { padding-right: 0 !important; min-height: 0 !important; }
}