/*
 * Reference-informed type treatments.
 * Adapted for Sahand Logistics rather than copied from template demos.
 */

/* Hero: overlapping outlined and solid titles, adapted from the supplied demo. */

.hero-dual-title {
  width: 100%;
  overflow: visible;
}

.hero .hero-outline-kicker {
  width: 100%;
  max-width: 100%;
  margin: 0;
  line-height: 1;
}

.hero-outline-word {
  display: block;
}

.hero-outline-word {
  color: rgb(37 184 255 / 0.65);
  font-size: clamp(3.35rem, 4.5vw, 3.75rem);
  font-weight: 900;
  line-height: 1;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px currentColor;
  paint-order: stroke fill;
  text-shadow: none;
}

.hero-dual-title > #hero-title {
  position: relative;
  z-index: 1;
  margin-top: -1rem;
}

html[lang="en"] .hero .hero-outline-word {
  font-size: clamp(3.1rem, 4vw, 3.65rem);
  letter-spacing: 0.02em;
}

/* Sulfur route: semantic title box with a material-specific background label. */

.khorasan-section--title-box .khorasan-grid {
  row-gap: 0.5rem;
}

.khorasan-section--title-box .khorasan-media,
.khorasan-section--title-box .khorasan-copy {
  grid-row: 2;
}

.sulfur-section--title-box > .sulfur-mark {
  display: none;
}

.sulfur-section--title-box .sulfur-layout {
  row-gap: 0.5rem;
}

:is(.sulfur-title-box, .khorasan-title-box) {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  min-height: clamp(11rem, 16vw, 13rem);
  grid-column: 1 / -1;
  margin-bottom: 0.5rem;
  padding: clamp(2.25rem, 3.5vw, 3.25rem) clamp(1rem, 3vw, 2.5rem);
  place-items: center;
  text-align: center;
}

:is(.sulfur-title-box, .khorasan-title-box)::after {
  content: attr(data-name);
  position: absolute;
  z-index: -1;
  inset: 50% auto auto 50%;
  color: #6f6f6f;
  font-family: "IRANYekanX", "IRANSansX", sans-serif;
  font-size: clamp(5.75rem, 9vw, 9.375rem);
  font-weight: 900;
  line-height: 0.8;
  opacity: 0.055;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

:is(.sulfur-title-box, .khorasan-title-box) .kicker,
:is(.sulfur-title-box, .khorasan-title-box) .section-title,
:is(.sulfur-title-box, .khorasan-title-box) .section-title-separator {
  margin-inline: auto;
}

:is(.sulfur-title-box, .khorasan-title-box) .kicker {
  order: 2;
  margin-top: 0.85rem;
  color: #886a12;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

html[lang="fa"] :is(.sulfur-title-box, .khorasan-title-box) .kicker {
  letter-spacing: 0;
}

:is(.sulfur-title-box, .khorasan-title-box) .section-title,
html[lang="fa"] :is(.sulfur-title-box, .khorasan-title-box) .section-title {
  order: 1;
  max-width: none;
  margin: 0;
  font-size: clamp(2.35rem, 3.125vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
  white-space: nowrap;
}

:is(.sulfur-title-box, .khorasan-title-box) .section-title-separator {
  order: 3;
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: 1rem;
  background: var(--sulfur, #d6ad33);
  box-shadow: 0 6px 18px rgb(214 173 51 / 0.24);
}

@media (max-width: 47.99rem) {
  .hero-outline-word,
  html[lang="en"] .hero .hero-outline-word {
    font-size: clamp(2.35rem, 10vw, 3rem);
  }

  .hero-dual-title > #hero-title {
    margin-top: -0.65rem;
  }

  :is(.sulfur-title-box, .khorasan-title-box) {
    min-height: 0;
    margin-bottom: 1rem;
    padding: 2.5rem 0.25rem 2rem;
  }

  :is(.sulfur-title-box, .khorasan-title-box) .section-title,
  html[lang="fa"] :is(.sulfur-title-box, .khorasan-title-box) .section-title {
    max-width: 17ch;
    font-size: clamp(2.15rem, 9vw, 3rem);
    white-space: normal;
  }

  :is(.sulfur-title-box, .khorasan-title-box)::after {
    font-size: clamp(4rem, 22vw, 6.5rem);
    opacity: 0.065;
  }

  .khorasan-section--title-box .khorasan-title-box {
    grid-row: 1;
  }

  .khorasan-section--title-box .khorasan-media,
  [dir="rtl"] .khorasan-section--title-box .khorasan-media {
    grid-row: 2;
  }

  .khorasan-section--title-box .khorasan-copy,
  [dir="rtl"] .khorasan-section--title-box .khorasan-copy {
    grid-row: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-outline-kicker {
    transform: none !important;
  }
}