/* Load after the existing hero styles. Coordinates use the 1440px hero canvas.
   Header entrance opacity/transform/animation are owned by the hero timeline. */
:where(#page-hero) .header.wrap {
  position: absolute;
  z-index: 50;
  top: 24px;
  right: 80px;
  width: 1280px;
  height: 48px;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
  font-family: "Yekan Bakh FaNum", Tahoma, sans-serif;
  color: #fff;
}
:where(#page-hero) .header *, :where(#page-hero) .header *::before, :where(#page-hero) .header *::after { box-sizing: border-box; }
:where(#page-hero) .header button, :where(#page-hero) .header a { font-family: "Yekan Bakh FaNum", Tahoma, sans-serif; }
:where(#page-hero) .header a { text-decoration: none; }
:where(#page-hero) .header .brand {
  position: absolute;
  inset: 3px 0 auto auto;
  display: block;
  width: 263px;
  height: 42px;
  min-width: 0;
  margin: 0;
}
:where(#page-hero) .header .brand__logo { display: block; width: 263px; height: 42px; object-fit: contain; }
:where(#page-hero) .header .nav {
  position: absolute;
  right: 340px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 599px;
  height: 48px;
  margin: 0;
  padding: 0;
  gap: 0;
  white-space: nowrap;
}
:where(#page-hero) .header .nav__item { position: relative; display: flex; align-items: center; height: 48px; }
:where(#page-hero) .header .nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
  text-align: right;
  opacity: 1;
  cursor: pointer;
}
:where(#page-hero) .header .nav__link > span { margin: 0; font: inherit; }
:where(#page-hero) .header .nav__link::after,
:where(#page-hero) .header .nav > a.active::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 280ms cubic-bezier(.22,.72,.25,1);
}
:where(#page-hero) .header .nav__link:is(.active, :focus-visible)::after, :where(#page-hero) .header .nav > a.active::after, :where(#page-hero) .header .nav__item.is-open > .nav__trigger::after { transform: scaleX(1); }
:where(#page-hero) .header .nav__chevron { display: block; width: 11px; height: 6px; transform: none; transition: transform 250ms ease; }
:where(#page-hero) .header .nav__item:hover .nav__chevron { transform: none; }
:where(#page-hero) .header .nav__item.is-open .nav__chevron { transform: rotate(-180deg); }
:where(#page-hero) .header .nav__item > .dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 50%;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 550px;
  padding: 14px;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(50%, -8px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
:where(#page-hero) .header .nav__item.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(50%, 0);
  transition-delay: 0s;
}
:where(#page-hero) .header .dropdown::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
:where(#page-hero) .header .dropdown__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-height: 72px;
  padding: 13px 14px;
  border-radius: 14px;
  color: #292929;
  background: #F5F5F4;
  opacity: 1;
  transition: background-color 250ms ease, transform 250ms ease;
}
:where(#page-hero) .header .dropdown__card strong { font-size: 15px; font-weight: 500; line-height: 20px; }
:where(#page-hero) .header .dropdown__card span { margin: 0; font-size: 12px; font-weight: 400; line-height: 17px; color: #777; }
:where(#page-hero) .header .dropdown__card:focus-visible { background: #e8e8e8; }
:where(#page-hero) .header .header__actions {
  position: absolute;
  right: 1008px;
  top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 272px;
  height: 48px;
  margin: 0;
}
:where(#page-hero) .header .language {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 0 0 90px;
  align-items: center;
  gap: 2px;
  width: 90px;
  height: 48px;
  padding: 4px;
  border: 0;
  border-radius: 32px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  direction: ltr;
}
:where(#page-hero) .header .language::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(0);
  transition: transform 360ms cubic-bezier(.22,.72,.25,1);
}
:where(#page-hero) .header .language[data-active-lang="fa"]::before { transform: translateX(42px); }
:where(#page-hero) .header .language .language__btn {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  transition: color 280ms ease;
}
:where(#page-hero) .header .language .language__btn.is-active { color: #292929; }
:where(#page-hero) .header .pill--light {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 170px;
  width: 170px;
  min-width: 0;
  height: 48px;
  padding: 8px 24px 8px 8px;
  gap: 0;
  border: 0;
  border-radius: 40px;
  background: rgba(255,255,255,.12);
  color: #9f001a;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
  transition: color 280ms ease;
}
:where(#page-hero) .header .pill--light::before { content: ""; position: absolute; z-index: -1; inset: 4px; border-radius: inherit; background: #fff; transition: background-color 280ms ease; }
:where(#page-hero) .header .pill--light .pill__icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: #9f001a; color: #fff; transition: background-color 280ms ease; }
:where(#page-hero) .header .pill--light .pill__icon svg { display: block; width: 20px; height: 20px; transform: rotate(-90deg); transition: transform 280ms ease; }
:where(#page-hero) .header .pill--light .pill__icon svg path { fill: currentColor; }
:where(#page-hero) .header .pill--light:is(:hover, :focus-visible) { background: rgba(255,255,255,.12); color: #fff; }
:where(#page-hero) .header .pill--light:is(:hover, :focus-visible)::before { background: #9f001a; }
:where(#page-hero) .header .pill--light:is(:hover, :focus-visible) .pill__icon { background: #fff; color: #9f001a; }
:where(#page-hero) .header .pill--light:is(:hover, :focus-visible) .pill__icon svg { transform: rotate(-180deg); }
:where(#page-hero) .header .menu { display: none; }
:where(#page-hero) .header :is(a, button):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (hover: hover) {
  :where(#page-hero) .header .nav__link:hover::after { transform: scaleX(1); }
  :where(#page-hero) .header .dropdown__card:hover { background: #e8e8e8; transform: translateY(-1px); }
}
/* Native mobile dialog stays outside the desktop header layout. */
:where(#page-hero) .header .mobile-menu:not([open]){display:none}
:where(#page-hero) .header .mobile-menu__brand img{filter:brightness(0);object-fit:contain}
@media (max-width: 899px) {
  :where(#page-hero) .header.wrap{top:16px;right:16px;width:calc(100% - 32px);height:32px;display:flex;justify-content:space-between}
  :where(#page-hero) .header .brand{position:static;width:200px;height:32px}
  :where(#page-hero) .header .brand__logo{width:200px;height:32px}
  :where(#page-hero) .header .menu{position:relative;display:grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:.5px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer}
  :where(#page-hero) .header .menu img{display:block;width:16px;height:16px}
  :where(#page-hero) .header>.nav,:where(#page-hero) .header>.header__actions{display:none}
  :where(#page-hero) .header .mobile-menu{position:fixed;inset:0;margin:0;padding:0;border:0;width:auto;max-width:100%;height:100dvh;max-height:none;overflow:hidden;background:#FCFBFA;color:#46413A;isolation:isolate}
  :where(#page-hero) .header .mobile-menu[open]{display:flex;flex-direction:column}
  :where(#page-hero) .header .mobile-menu::backdrop{background:rgba(0,0,0,.25)}
  :where(#page-hero) .header .mobile-menu::before{content:"";position:absolute;z-index:-1;right:0;left:0;bottom:0;height:420px;background:url("/sections/hero/assets/mobile-menu-pattern.svg") center bottom / 100% 420px no-repeat;pointer-events:none}
  :where(#page-hero) .header .mobile-menu__header{display:flex;align-items:center;justify-content:space-between;flex:0 0 64px;padding:16px}
  :where(#page-hero) .header .mobile-menu__brand,:where(#page-hero) .header .mobile-menu__brand img{display:block;width:200px;height:32px}
  :where(#page-hero) .header .mobile-menu__close{display:block;width:32px;height:32px;padding:0;border:0;background:transparent;cursor:pointer}
  :where(#page-hero) .header .mobile-menu__close img{display:block;width:32px;height:32px}
  :where(#page-hero) .header .mobile-menu__content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:40px 16px 24px}
  :where(#page-hero) .header .nav{position:static;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;height:auto;margin:0;padding:0;gap:0;white-space:normal}
  :where(#page-hero) .header .nav__item{display:block;width:100%;height:auto}
  :where(#page-hero) .header .nav__link{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;padding:0 12px;border-bottom:1px solid #E8E5E3;color:#46413A;font-size:16px;line-height:24px;font-weight:400}
  :where(#page-hero) .header .nav__link.active{font-weight:600;border-color:#9F001A}
  :where(#page-hero) .header .nav__link::after,:where(#page-hero) .header .nav>a.active::after{display:none}
  :where(#page-hero) .header .nav__chevron{filter:brightness(0) saturate(100%);opacity:.55}
  :where(#page-hero) .header .nav__item>.dropdown{position:static;display:none;grid-template-columns:1fr;width:100%;margin:8px 0;padding:0;gap:8px;border:0;border-radius:16px;box-shadow:none;background:transparent;transform:none;transition:none;backdrop-filter:none}
  :where(#page-hero) .header .nav__item.is-open>.dropdown{display:grid;transform:none}
  :where(#page-hero) .header .dropdown::before{display:none}
  :where(#page-hero) .header .dropdown__card{min-height:84px;padding:16px 12px;gap:12px;border-radius:16px;background:#F5F5F4;color:#46413A}
  :where(#page-hero) .header .dropdown__card strong{font-size:14px;line-height:20px;font-weight:500}
  :where(#page-hero) .header .dropdown__card span{font-size:12px;line-height:16px;color:#6F6A63}
  :where(#page-hero) .header .header__actions{position:static;display:block;width:100%;height:48px;margin:36px 0 0;padding:0}
  :where(#page-hero) .header .pill--light{display:flex;width:100%;height:48px;padding:8px 28px 8px 8px;font-size:16px;line-height:24px;font-weight:600;color:white;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 .5px #2A252340}
  :where(#page-hero) .header .pill--light::before{background:#2A2523}
  :where(#page-hero) .header .pill--light .pill__icon{background:white;color:#2A2523}
  :where(#page-hero) .header .mobile-menu__language{display:flex;align-items:center;justify-content:space-between;flex:none;padding:0 16px 36px;gap:16px;font-size:16px;line-height:24px}
  :where(#page-hero) .header .language{flex:0 0 73px;width:73px;height:40px;padding:4px 4.5px;gap:0;background:#ffffff1f;box-shadow:inset 0 0 0 .5px #2A252340}
  :where(#page-hero) .header .language::before{left:4.5px;top:4px;width:32px;height:32px;background:#2A2523}
  :where(#page-hero) .header .language[data-active-lang="fa"]::before{transform:translateX(32px)}
  :where(#page-hero) .header .language .language__btn{flex:0 0 32px;width:32px;height:32px;font-size:12px;line-height:16px;color:#46413A}
  :where(#page-hero) .header .language .language__btn.is-active{color:white}
}
@media (prefers-reduced-motion: reduce) {
  :where(#page-hero) .header .nav__link::after,
  :where(#page-hero) .header .nav__chevron,
  :where(#page-hero) .header .dropdown,
  :where(#page-hero) .header .dropdown__card,
  :where(#page-hero) .header .language::before,
  :where(#page-hero) .header .language .language__btn,
  :where(#page-hero) .header .pill--light,
  :where(#page-hero) .header .pill--light::before,
  :where(#page-hero) .header .pill--light .pill__icon,
  :where(#page-hero) .header .pill--light .pill__icon svg,
  :where(#page-hero) .header .menu::before,
  :where(#page-hero) .header .menu::after { transition: none; }
}
@media(min-width:900px){:where(#page-hero) .header .nav{top:-3px}:where(#page-hero) .header .nav__link::after,:where(#page-hero) .header .nav>a.active::after{bottom:7px}:where(#page-hero) .header .nav>a.active{font-weight:600;line-height:20.2px}}
