/* Home hero «نور» (v3-pages/home.php): warm light in a brick vault + IRANYekanX. Enqueued on the home
   template only (inc/theme-enqueues.php). Site breakpoints: desktop header from 1200px (fixed; main starts
   100px down, the logo notch dips to 104px); below it the 65px mobile header; the fixed call bar
   (62px + safe area) up to 767px. */

@font-face { font-family: "UttaHeroYekanX"; src: url("../../fonts/iranyekanx/IRANYekanX-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "UttaHeroYekanX"; src: url("../../fonts/iranyekanx/IRANYekanX-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- shared ---------- */
.uh {
  --uh-amber: var(--color-uttaYellow-950, #FAB62F);
  --uh-amber-hi: var(--color-uttaYellow-900, #FFC300);
  --uh-amber-soft: #FCD993;
  --uh-ink: #262626;
  --uh-ink-2: #4C4C4C;
  --uh-ground: #FBF6EC;
  --uh-cw: 1200px;
  --uh-gutter: max(20px, calc((100vw - var(--uh-cw)) / 2 + 16px));
  --uh-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--uh-ink);
  background: var(--uh-ground);
  height: clamp(560px, calc(100svh - 100px), 1400px);
}
@media (min-width: 1450px) { .uh { --uh-cw: 1450px; } }
/* Desktop: the hero starts at the very top, behind the fixed header, so the art also fills the transparent
   part of the header's logo notch (below the amber curve) instead of white page background. The padding
   keeps the content under the header; the opaque header bars hide the rest of the top 100px. */
@media (min-width: 1200px) {
  .uh { margin-top: -100px; padding-top: 100px; height: clamp(660px, 100svh, 1500px); }
}
/* Under the desktop header breakpoint the header is 65px, not 100px: start right under it. */
@media (max-width: 1199px) {
  .uh { margin-top: -35px; height: auto; min-height: calc(100svh - 65px); }
}
.uh ::selection { background: var(--uh-amber-soft); color: var(--uh-ink); }
#second_section { scroll-margin-top: 110px; }

.uh-title {
  margin: 0;
  color: var(--uh-ink);
  text-wrap: balance;
}
.uh-title > span { display: block; }
.uh-lede { margin: 0; color: var(--uh-ink-2); text-wrap: pretty; }
.uh-hl {
  color: var(--uh-ink);
  background: linear-gradient(transparent 60%, rgba(250, 182, 47, .5) 60%, rgba(250, 182, 47, .5) 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.uh-slogan { display: block; width: auto; opacity: .86; }

.uh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.uh-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px 0 30px;
  border: 0;
  border-radius: 26px 26px 8px 26px;
  background: var(--uh-amber);
  color: var(--uh-ink);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 30px -16px rgba(150, 94, 0, .8);
  transition: background-color .25s ease, transform .35s var(--uh-ease), box-shadow .35s var(--uh-ease);
  -webkit-tap-highlight-color: transparent;
}
.uh-cta__icon { flex: none; }
.uh-cta:hover { background: var(--uh-amber-hi); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 20px 36px -18px rgba(150, 94, 0, .85); }
.uh-cta:active { transform: translateY(0); }
.uh-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 20px;
  border: 1.5px solid rgba(38, 38, 38, .18);
  border-radius: 20px;
  color: var(--uh-ink);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease;
}
.uh-link:hover { background: rgba(38, 38, 38, .05); border-color: rgba(38, 38, 38, .34); }
.uh-link .uh-arrow { transition: transform .35s var(--uh-ease); }
.uh-link:hover .uh-arrow { transform: translateY(2px); }

.uh-short { display: flex; flex-wrap: wrap; align-items: center; column-gap: 26px; }
.uh-short a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--uh-ink-2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(250, 182, 47, 0);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.uh-short a:hover { color: var(--uh-ink); text-decoration-color: var(--uh-amber); }
.uh-short .uh-arrow { width: 16px; height: 16px; transition: transform .35s var(--uh-ease); }
.uh-short a:hover .uh-arrow { transform: translateX(-3px); }

.uh-cta:focus-visible,
.uh-link:focus-visible,
.uh-short a:focus-visible,
.uh a:focus-visible { outline: 3px solid var(--uh-ink); outline-offset: 3px; }

.uh img { max-width: none; }

/* ---------- C «نور» — vault light + IRANYekanX ---------- */
.uh-c {
  font-family: "UttaHeroYekanX", IRANSansX, sans-serif;
  display: flex;
  align-items: center;
  background: #EFE0C4;
}
.uh-c__art { position: absolute; inset: 0; z-index: -2; }
.uh-c__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The desktop files carry a blurred colour band on top (170/2528 of the width) that belongs behind the
     header; pull it up so the photograph itself starts at the header's bottom edge (104px). */
  object-position: 30% min(0px, calc(104px - 6.72vw));
  animation: uh-settle 2.2s var(--uh-ease) both;
}
.uh-c::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to left, rgba(251, 246, 236, .92) 0%, rgba(251, 246, 236, .85) 42%, rgba(251, 246, 236, .3) 63%, rgba(251, 246, 236, 0) 76%);
}
@media (min-width: 1800px) {
  .uh-c::before { background: linear-gradient(to left, rgba(251, 246, 236, .92) 0%, rgba(251, 246, 236, .84) 46%, rgba(251, 246, 236, .3) 66%, rgba(251, 246, 236, 0) 80%); }
}
.uh-c__text {
  width: min(clamp(600px, 36vw, 860px), 52vw);
  container-type: inline-size;
  padding-inline-start: var(--uh-gutter);
  padding-block: 40px;
  box-sizing: content-box;
}
.uh-c .uh-slogan { height: clamp(60px, 6.5svh, 92px); margin-bottom: 10px; margin-inline-start: -6px; }
.uh-c .uh-title {
  font-weight: 900;
  font-size: clamp(34px, min(2.6vw + 22px, 10.6cqi), 90px);
  line-height: 1.24;
}
.uh-c .uh-lede {
  margin-top: clamp(16px, 1.6svh, 26px);
  max-width: 32em;
  font-weight: 500;
  font-size: clamp(18px, .42vw + 12px, 22px);
  line-height: 1.95;
  color: #3E3A34;
}
.uh-c .uh-actions { margin-top: clamp(26px, 3.2svh, 44px); }
.uh-c .uh-cta, .uh-c .uh-link { font-family: "UttaHeroYekanX", IRANSansX, sans-serif; }
.uh-c .uh-link { background: rgba(255, 253, 248, .86); border-color: rgba(38, 38, 38, .12); }
.uh-c .uh-link:hover { background: #FFFDF8; }
@media (min-width: 940px) { .uh-c .uh-lede > span:first-child { display: block; } }
.uh-c .uh-short { margin-top: 18px; font-family: "UttaHeroYekanX", IRANSansX, sans-serif; }

@media (max-width: 939px) {
  .uh-c { align-items: flex-end; }
  .uh-c::before { background: linear-gradient(to top, rgba(251, 246, 236, .97) 0%, rgba(251, 246, 236, .92) 50%, rgba(251, 246, 236, .5) 66%, rgba(251, 246, 236, 0) 80%); }
  .uh-c__art img { object-position: 50% 0%; }
  .uh-c__text { width: 100%; box-sizing: border-box; padding: 0 20px 30px; }
  .uh-c .uh-slogan { height: 50px; margin-bottom: 4px; }
  .uh-c .uh-title { font-size: clamp(33px, 6vw + 10px, 54px); line-height: 1.3; }
  .uh-c .uh-lede { font-size: 17px; line-height: 1.85; margin-top: 12px; }
  .uh-c .uh-actions { margin-top: 22px; }
  .uh-c .uh-short { margin-top: 8px; }
}
/* 768–939: the site's fixed consult bubble sits bottom-right, over this column's last row. */
@media (min-width: 768px) and (max-width: 939px) {
  .uh-c__text { padding-bottom: 120px; }
}
@media (max-width: 767px) {
  .uh-c__text { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .uh-c .uh-slogan { height: 40px; }
}

/* ---------- phones: both actions in one row, the main one wider ---------- */
@media (max-width: 767px) {
  .uh-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; }
  .uh-cta, .uh-link { justify-content: center; min-height: 52px; padding: 0 14px; font-size: 15.5px; gap: 7px; white-space: nowrap; }
  .uh-cta__icon { width: 21px; height: 21px; }
  .uh-link { border-radius: 18px; }
}
@media (max-width: 380px) {
  .uh-cta, .uh-link { font-size: 14.5px; padding: 0 11px; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .uh-c__art img { animation: none; }
  .uh-cta, .uh-cta:hover, .uh-link .uh-arrow, .uh-short .uh-arrow { transition: none; transform: none; }
}