@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/IRANSansXFaNum-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/IRANSansXFaNum-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "IRANYekanX";
  src: url("../fonts/IRANYekanXFaNum-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

.bekon-theme {
  font-family: "IRANSansX", Tahoma, Arial, sans-serif;
}

.bekon-theme h1,
.bekon-theme h2,
.bekon-theme h3,
.bekon-theme h4,
.bekon-theme .font-heading {
  font-family: "IRANYekanX", "IRANSansX", Tahoma, sans-serif;
}

.bekon-nav-link {
  position: relative;
  padding-block: 0.75rem;
  transition: color 180ms ease;
}

.bekon-nav-link::after {
  position: absolute;
  inset-inline: 0;
  bottom: 0.25rem;
  height: 2px;
  content: "";
  background: #0047ff;
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.bekon-nav-link:hover {
  color: #0047ff;
}

.bekon-nav-link:hover::after {
  transform: scaleX(1);
}

.bekon-button {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 9999px;
  background: #0047ff;
  padding: 0.8rem 1.35rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 14px 30px rgb(0 71 255 / 0.2);
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.bekon-button:hover {
  background: #01022e;
  box-shadow: 0 14px 30px rgb(1 2 46 / 0.2);
  transform: translateY(-2px);
}

.bekon-grid-pattern {
  background-image:
    linear-gradient(rgb(255 255 255 / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.055) 1px, transparent 1px);
  background-size: 38px 38px;
}

.bekon-blue-grid {
  background-image:
    linear-gradient(rgb(0 71 255 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 71 255 / 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
}

.bekon-card {
  border: 1px solid rgb(1 2 46 / 0.09);
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 20px 55px rgb(1 2 46 / 0.07);
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.bekon-card:hover {
  border-color: rgb(0 71 255 / 0.3);
  box-shadow: 0 24px 60px rgb(0 71 255 / 0.12);
  transform: translateY(-0.45rem);
}

.bekon-rich-content {
  color: #4b5568;
  font-size: 1.05rem;
  line-height: 2.15;
}

.bekon-rich-content h2,
.bekon-rich-content h3,
.bekon-rich-content h4,
.bekon-rich-content h5 {
  margin-block: 2rem 0.8rem;
  color: #01022e;
  font-weight: 900;
  line-height: 1.55;
}

.bekon-rich-content h2 { font-size: 1.75rem; }
.bekon-rich-content h3 { font-size: 1.4rem; }
.bekon-rich-content h4,
.bekon-rich-content h5 { font-size: 1.15rem; }
.bekon-rich-content strong,
.bekon-rich-content b { font-weight: 800; }
.bekon-rich-content em,
.bekon-rich-content i { font-style: italic; }
.bekon-rich-content u { text-decoration: underline; text-underline-offset: 0.18em; }
.bekon-rich-content p,
.bekon-rich-content ul,
.bekon-rich-content ol,
.bekon-rich-content blockquote,
.bekon-rich-content pre,
.bekon-rich-content table { margin-block: 1.1rem; }
.bekon-rich-content ul { list-style: disc; padding-inline-start: 1.6rem; }
.bekon-rich-content ol { list-style: decimal; padding-inline-start: 1.6rem; }
.bekon-rich-content a { color: #0047ff; text-decoration: underline; }
.bekon-rich-content blockquote { border-inline-start: 4px solid #0047ff; background: #f5f6fc; padding: 1rem 1.25rem; }
.bekon-rich-content pre { overflow-x: auto; border-radius: 1rem; background: #01022e; padding: 1.1rem; color: #f8fafc; direction: ltr; text-align: left; white-space: pre-wrap; }
.bekon-rich-content code { border-radius: 0.35rem; background: #eef1f8; padding: 0.12rem 0.35rem; color: #01022e; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; direction: ltr; }
.bekon-rich-content pre code { border-radius: 0; background: transparent; padding: 0; color: inherit; }
.bekon-rich-content table { width: 100%; border-collapse: collapse; }
.bekon-rich-content th,
.bekon-rich-content td { border: 1px solid rgb(1 2 46 / 0.16); padding: 0.7rem; text-align: start; }
.bekon-rich-content th { background: #f5f6fc; color: #01022e; font-weight: 800; }
.bekon-rich-content img,
.bekon-rich-content video,
.bekon-rich-content audio { max-width: 100%; border-radius: 1.25rem; }
.bekon-rich-content figure { margin-block: 1.25rem; }
.bekon-rich-content figcaption { margin-top: 0.5rem; color: #667594; font-size: 0.875rem; text-align: center; }
.bekon-rich-content hr { margin-block: 1.5rem; border: 0; border-top: 1px solid rgb(1 2 46 / 0.14); }

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1), transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes bekon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.bekon-float { animation: bekon-float 4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .bekon-float { animation: none; }
  .bekon-card,
  .bekon-button { transition: none; }
}

/* ── Mega menu ──────────────────────────────────────────────────────────────
   The panel is absolutely positioned and never affects the header's own box,
   so opening it cannot shift the layout. */
.bekon-mega { position: relative; }

.bekon-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.bekon-nav-trigger svg { transition: transform .2s ease; }
.bekon-mega[data-open] .bekon-nav-trigger svg { transform: rotate(180deg); }

.bekon-mega__panel {
  --mega-gap: .9rem;
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(50%);
  top: calc(100% + var(--mega-gap));
  z-index: 60;
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  min-width: 16rem;
  max-width: min(72rem, calc(100vw - 3rem));
  border: 1px solid rgba(1, 2, 46, .08);
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 1.75rem 3.5rem rgba(1, 2, 46, .18);
  padding: 1.5rem;
}

/* The gap between the trigger and the panel is a dead zone the pointer has to cross. Covering it with a
   transparent strip that belongs to the panel keeps the pointer inside the group the whole way, so the
   menu no longer closes out from under the mouse on its way down. */
.bekon-mega__panel::before {
  content: "";
  position: absolute;
  inset-inline: -1rem;
  bottom: 100%;
  height: calc(var(--mega-gap) + .25rem);
}

.bekon-mega__panel[hidden] { display: none; }

.bekon-mega__inner {
  display: grid;
  grid-template-columns: repeat(var(--mega-columns, 3), minmax(11rem, 1fr));
  gap: 1.5rem;
  width: max-content;
  max-width: 100%;
}

/* ── Panel layouts ─────────────────────────────────────────────────────────
   Chosen per item in the panel; the column count comes from the number of
   children, so nothing here depends on a hand-kept number. */
.bekon-mega__panel--vertical,
.bekon-mega__panel--flyout { min-width: 15rem; padding: .85rem; }

.bekon-mega__panel--vertical .bekon-mega__inner,
.bekon-mega__panel--flyout .bekon-mega__inner { display: block; width: 15rem; }

.bekon-mega__panel--horizontal .bekon-mega__inner {
  grid-template-columns: repeat(var(--mega-columns, 3), minmax(9rem, 1fr));
  align-items: start;
  gap: 1rem 2rem;
}

.bekon-mega__panel--grid .bekon-mega__inner { gap: .85rem; }

/* The tile is only a frame; the link inside fills it, so the highlighted area and the clickable area
   are the same rectangle. Leaf links keep their own targets underneath. */
.bekon-mega__tile {
  border: 1px solid rgba(1, 2, 46, .07);
  border-radius: 1.15rem;
  padding: .4rem;
  background: #fbfbfe;
  transition: border-color .18s ease;
}

.bekon-mega__tile-link {
  display: grid;
  gap: .25rem;
  border-radius: .85rem;
  padding: .6rem .65rem;
  color: #01022e;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.bekon-mega__tile-link i { color: #0047ff; font-size: 1.1rem; }
.bekon-mega__tile-link strong { font-weight: 800; }
.bekon-mega__tile-link span { color: #667594; font-size: .8rem; line-height: 1.85; }
.bekon-mega__tile:has(.bekon-mega__tile-link:hover) { border-color: rgba(0, 71, 255, .35); }

.bekon-mega__tile-link:hover,
.bekon-mega__tile-link:focus-visible { background: #eef2ff; color: #0047ff; }
.bekon-mega__tile-link:hover span,
.bekon-mega__tile-link:focus-visible span { color: #0047ff; }

.bekon-mega__links--nested { margin-inline-start: .9rem; border-inline-start: 1px solid rgba(1, 2, 46, .08); }

/* ── Nested fly-out: a mega menu inside a mega menu ───────────────────────── */
.bekon-mega__branch { position: relative; }

.bekon-mega__branch-trigger {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
  border: 0;
  border-radius: .75rem;
  padding: .5rem .65rem;
  background: none;
  color: #343c4d;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.bekon-mega__branch-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.bekon-mega__branch-label { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
.bekon-mega__branch-trigger small { color: #98a2b8; font-size: .76rem; }
.bekon-mega__branch-caret { flex: 0 0 auto; margin-inline-start: auto; }
.bekon-mega__branch[data-open] .bekon-mega__branch-trigger,
.bekon-mega__branch-trigger:hover { background: #f5f6fc; color: #0047ff; }

/* The gap clears the parent panel's own padding, so the two panels sit apart instead of touching. */
.bekon-mega__panel--sub {
  --mega-gap: 1.35rem;
  top: -.85rem;
  inset-inline-start: auto;
  inset-inline-end: calc(100% + var(--mega-gap));
  transform: none;
  display: block;
  min-width: 14rem;
  padding: .85rem;
}

/* Bridge the side gap the same way the top gap is bridged. */
.bekon-mega__panel--sub::before {
  inset-inline: auto;
  inset-block: 0;
  inset-inline-start: 100%;
  width: calc(var(--mega-gap) + .35rem);
  height: auto;
}

/* The whole block is one target. A caption makes an item taller, and the hit area has to grow with it —
   a hover highlight that is bigger than what a click accepts is a trap. Padding matches the leaf links
   below so every line of text in a column starts on the same edge. */
.bekon-mega__heading {
  display: grid;
  gap: .25rem;
  border-radius: .75rem;
  padding: .5rem .65rem;
  color: #01022e;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.bekon-mega__heading-label { display: flex; align-items: center; gap: .5rem; font-weight: 800; }
.bekon-mega__heading-caption { color: #667594; font-size: .82rem; line-height: 1.9; }

.bekon-mega__heading:hover,
.bekon-mega__heading:focus-visible { background: #f5f6fc; color: #0047ff; }
.bekon-mega__heading:hover .bekon-mega__heading-caption,
.bekon-mega__heading:focus-visible .bekon-mega__heading-caption { color: #0047ff; }

.bekon-mega__links { display: flex; flex-direction: column; gap: .15rem; margin: .35rem 0 0; padding: 0; list-style: none; }

.bekon-mega__links a {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  border-radius: .75rem;
  padding: .5rem .65rem;
  color: #343c4d;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.bekon-mega__links a:hover,
.bekon-mega__links a:focus-visible { background: #f5f6fc; color: #0047ff; }
.bekon-mega__links small { color: #98a2b8; font-size: .76rem; }

.bekon-mega__promo { flex: 0 0 16rem; align-self: start; border-radius: 1.25rem; overflow: hidden; background: #f5f6fc; }
.bekon-mega__promo img { display: block; width: 100%; height: 9rem; object-fit: cover; }
.bekon-mega__promo p { margin: 0; padding: .85rem 1rem; color: #667594; font-size: .82rem; line-height: 1.9; }

@media (prefers-reduced-motion: reduce) {
  .bekon-nav-trigger svg,
  .bekon-mega__branch-trigger,
  .bekon-mega__links a { transition: none; }
}

@media (max-width: 60rem) {
  .bekon-mega__panel { max-width: calc(100vw - 2rem); }
  .bekon-mega__inner { width: auto; grid-template-columns: 1fr; }
  .bekon-mega__promo { display: none; }
}

/* Hero banner caption. The editor writes it in the rich-text field, so it can contain paragraphs and
   emphasis; these rules stop that markup from inheriting the page's article spacing. */
.bekon-hero__caption > :first-child { margin-top: 0; }
.bekon-hero__caption > :last-child { margin-bottom: 0; }
.bekon-hero__caption p { margin: 0 0 .6rem; }
.bekon-hero__caption a { color: #0047ff; text-decoration: underline; }