/* فراب تدبیر — front-end component styles (animations, hover states,
   sliders, carousels). Layout/utility classes come from the locally built
   Tailwind stylesheet (assets/css/tailwind.css), enqueued in functions.php. */

:root{
    --brand:#f47b20;
    --navy:#071827;
  }

  *{ box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:#f5f7f9;
    color:#101c27;
    font-family:"IRANYekanWebFaNum","IRANYekanWeb",Tahoma,Arial,sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  body.no-scroll{ overflow:hidden; }

  ::selection{ background:rgba(244,123,32,.28); color:#071827; }

  a{ -webkit-tap-highlight-color:transparent; }

  :focus-visible{
    outline:2px solid var(--brand);
    outline-offset:3px;
    border-radius:4px;
  }

  /* ---------- layout helpers ---------- */
  .wrap{
    width:min(1360px, calc(100% - 40px));
    margin-inline:auto;
  }

  @media (max-width:640px){
    .wrap{ width:calc(100% - 32px); }
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.02em;
  }

  .eyebrow::before{
    content:"";
    width:26px; height:2px;
    background:var(--brand);
    border-radius:2px;
  }

.section-pad{ padding-block:24px; }

  /* ---------------------------------------------------------------
     Shared rhythm tokens — one spacing/type scale used by every
     section, on the homepage and on inner pages alike, so vertical
     rhythm and heading hierarchy stay consistent site-wide instead of
     each template picking its own py-14/16/20/24 and text-2xl/4xl at
     random. Minimal, tight values (mobile-first) per current brief;
     change the numbers here once to re-tune the whole site.
  --------------------------------------------------------------- */

  /* Dark banner atop every inner page (template-parts/page-header.php) —
     a little taller than a plain content section since it also carries
     the breadcrumb, but far less than the old 96/56px split. */
  .page-banner-pad{ padding-top:64px; padding-bottom:32px; }
  @media (min-width:768px){ .page-banner-pad{ padding-top:80px; padding-bottom:40px; } }

  /* Section h2 — one consistent, minimal scale for every section
     heading site-wide. Replaces the old text-2xl/text-4xl/text-[2rem]
     mix (which also had a non-monotonic bug on one section). */
  .h2-section{ font-size:1.25rem; line-height:1.4; font-weight:700; }
  @media (min-width:640px){ .h2-section{ font-size:1.375rem; } }
  @media (min-width:1024px){ .h2-section{ font-size:1.625rem; } }

  /* Inner-page h1 (page-header.php) — one notch above h2-section,
     clearly below the homepage hero h1. */
  .h1-page{ font-size:1.375rem; line-height:1.4; font-weight:700; }
  @media (min-width:640px){ .h1-page{ font-size:1.5rem; } }
  @media (min-width:1024px){ .h1-page{ font-size:1.75rem; } }

  /* Homepage hero h1 — trimmed down from the old 2.35rem/5xl/3.4rem
     scale, still the largest heading on the site by a clear margin. */
  .h1-hero{ font-size:1.75rem; line-height:1.3; font-weight:700; }
  @media (min-width:640px){ .h1-hero{ font-size:2.25rem; } }
  @media (min-width:1024px){ .h1-hero{ font-size:2.75rem; } }

  /* Shared "no image" placeholder — replaces the plain grey box with
     visible "بدون تصویر" text (used when a slide/CTA/article/project
     has no image assigned) with a neutral brand-tinted tile that never
     reads as a broken/placeholder asset to a visitor. */
  .img-fallback{
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(circle at 30% 20%, rgba(244,123,32,.16), transparent 55%),
      var(--navy);
  }
  .img-fallback::before{
    content:"";
    width:34px; height:34px;
    border-radius:9px;
    background:rgba(255,255,255,.14);
  }
  .img-fallback--light{ background: radial-gradient(circle at 30% 20%, rgba(244,123,32,.10), transparent 55%), #eef1f4; }
  .img-fallback--light::before{ background:rgba(7,24,39,.10); }

  /* ---------- header ---------- */
  #siteHeader{
    transition:background-color .4s ease, border-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
  }

  #siteHeader.is-scrolled{
    background:rgba(4,13,22,.88);
    border-color:rgba(255,255,255,.09);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 12px 34px -14px rgba(0,0,0,.4);
  }

  .nav-link{
    position:relative;
    padding-bottom:6px;
  }

  .nav-link::after{
    content:"";
    position:absolute;
    right:0; bottom:0;
    width:0; height:2px;
    background:var(--brand);
    transition:width .3s ease;
  }

  .nav-link:hover::after,
  .nav-link.is-active::after{ width:100%; }

  .nav-link.is-active{ color:#fff; }

  /* ---------- hero ---------- */
  .hero-slide{
    position:absolute; inset:0;
    opacity:0;
    transform:scale(1.06);
    transition:opacity 1.1s ease, transform 7s cubic-bezier(.2,.6,.2,1);
    pointer-events:none;
  }

  .hero-slide.is-active{
    opacity:1;
    transform:scale(1);
    pointer-events:auto;
  }

  .hero-slide::before{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(90deg, rgb(175 175 175 / 94%) 2%, rgb(62 63 63 / 62%) 6%, rgba(4, 10, 17, .3) 28%), 		linear-gradient(0deg, rgb(146 146 146 / 86%), rgba(4, 10, 17, .18) 25%)
  }

  .hero-copy{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .8s ease .2s, transform .8s ease .2s;
  }

  .hero-slide.is-active .hero-copy{
    opacity:1;
    transform:translateY(0);
  }

  .hero-step{
    position:relative;
    transition:background-color .35s ease, color .35s ease, border-color .35s ease;
  }

  .hero-step .step-bar{
    position:absolute; inset-inline-start:0; top:0; bottom:0;
    width:3px;
    background:var(--brand);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .35s ease;
  }

  .hero-step.is-active .step-bar{ transform:scaleY(1); }

  .hero-step .step-progress{
    position:absolute; inset-inline-start:0; top:0; bottom:0;
    width:3px;
    background:rgba(255,255,255,.9);
    transform-origin:top;
    transform:scaleY(0);
  }

  .hero-step.is-active .step-progress{
    animation:stepFill linear forwards;
    animation-duration:var(--hero-duration, 6.5s);
  }

  @keyframes stepFill{
    from{ transform:scaleY(0); }
    to{ transform:scaleY(1); }
  }

  .hero-dot{
    width:8px; height:8px; border-radius:9999px;
    background:rgba(255,255,255,.32);
    transition:.3s ease;
  }

  .hero-dot.is-active{
    width:26px;
    background:var(--brand);
  }

  /* ---------- scroll reveal ---------- */
  .reveal-up,
  .reveal-right,
  .reveal-left{
    opacity:0;
    transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
    will-change:transform,opacity;
  }

  .reveal-up{ transform:translateY(34px); }
  .reveal-right{ transform:translateX(-32px); }
  .reveal-left{ transform:translateX(32px); }

  .reveal-up.is-revealed,
  .reveal-right.is-revealed,
  .reveal-left.is-revealed{
    opacity:1;
    transform:translate(0,0);
  }

  /* ---------- info bar (overlap) ---------- */
  .info-bar-item{
    position:relative;
  }
  .info-bar-item + .info-bar-item::before{
    content:"";
    position:absolute; inset-inline-start:0; top:18%; bottom:18%;
    width:1px;
    background:rgba(255,255,255,.1);
  }

  .info-icon{
    transition:background-color .3s ease, color .3s ease, transform .3s ease;
  }
  .info-bar-item:hover .info-icon{
    background:var(--brand);
    color:#fff;
    transform:translateY(-2px);
  }

  /* ---------- generic cards ---------- */
  .lift{
    transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease;
  }
  .lift:hover{ transform:translateY(-8px); }

  .img-zoom{ overflow:hidden; }
  .img-zoom img{
    transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  }
  .img-zoom:hover img{ transform:scale(1.08); }

  /* ---------- service card ---------- */
  .service-card{ position:relative; }
  .service-card::after{
    content:"";
    position:absolute; inset-inline-start:0; top:0;
    height:3px; width:0;
    background:var(--brand);
    transition:width .45s ease;
  }
  .service-card:hover::after{ width:100%; }

  .service-icon{
    transition:background-color .35s ease, color .35s ease, transform .35s ease;
  }
  .service-card:hover .service-icon{
    background:var(--brand);
    color:#fff;
    transform:rotate(-8deg) scale(1.06);
  }

  /* ---------- partner / client logo slider ----------
     Movement is driven by theme.js (autoplay + prev/next + drag).
     Without JS the strip is simply scrollable. */
  .partners-viewport{
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    touch-action:pan-y;
  }
  .partners-viewport::-webkit-scrollbar{ display:none; }
  .partners-slider.is-js .partners-viewport{
    overflow:hidden;
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
  }
  .partners-slider.is-dragging .partners-viewport{ cursor:grabbing; }
  .partners-track{
    display:flex;
    width:max-content;
    will-change:transform;
  }

  /* ---------- projects filter / carousel ---------- */
  .filter-pill{
    transition:background-color .3s ease, color .3s ease, border-color .3s ease;
  }
  .filter-pill.is-active{
    background:var(--brand);
    color:#fff;
    border-color:var(--brand);
  }

  .project-track{
    scrollbar-width:none;
    -ms-overflow-style:none;
    cursor:grab;
  }
  .project-track::-webkit-scrollbar{ display:none; }
  .project-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }

  .project-overlay{
    opacity:0;
    transition:opacity .4s ease;
    background:linear-gradient(0deg, rgba(4,13,22,.82), rgba(4,13,22,0) 60%);
  }
  .project-card:hover .project-overlay{ opacity:1; }

  .project-card .project-cta{
    transform:translateY(10px);
    opacity:0;
    transition:transform .4s ease, opacity .4s ease;
  }
  .project-card:hover .project-cta{
    transform:translateY(0);
    opacity:1;
  }

  /* ---------- why-us rows ---------- */
  .why-row{
    transition:background-color .3s ease, border-color .3s ease, transform .3s ease;
  }
  .why-row:hover{
    background:#fff;
    border-color:rgba(244,123,32,.35);
    transform:translateX(-4px);
  }
  [dir="rtl"] .why-row:hover{ transform:translateX(4px); }

  .why-index{
    transition:background-color .3s ease, color .3s ease;
  }
  .why-row:hover .why-index{
    background:var(--brand);
    color:#fff;
  }

  /* ---------- client logos ---------- */
  .client-logo{
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    filter:grayscale(1);
    opacity:.7;
  }
  .client-logo:hover{
    filter:grayscale(0);
    opacity:1;
    transform:translateY(-4px);
    border-color:rgba(244,123,32,.35);
  }

  /* ---------- article rows ---------- */
  .article-row{
    transition:border-color .3s ease, box-shadow .3s ease;
  }
  .article-row:hover{
    border-color:rgba(244,123,32,.35);
    box-shadow:0 16px 40px -18px rgba(4,13,22,.18);
  }
  .article-row .arrow{
    transition:transform .3s ease;
  }
  .article-row:hover .arrow{ transform:translateX(-4px); }
  [dir="rtl"] .article-row:hover .arrow{ transform:translateX(4px); }

  .cat-item{
    transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
  }
  .cat-item:hover,
  .cat-item.is-active{
    background:var(--navy);
    color:#fff;
    border-color:var(--navy);
  }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-weight:700; white-space:nowrap;
    transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .btn-primary{
    background:var(--brand); color:#fff; box-shadow:0 8px 18px -8px rgba(244,123,32,.4);
  }
  .btn-primary:hover{ background:#ff9036; }
  .btn-outline{
    border:1px solid rgba(255,255,255,.28); color:#fff; background:transparent;
  }
  .btn-outline:hover{ border-color:var(--brand); background:rgba(255,255,255,.06); }
  .btn-outline-dark{
    border:1px solid #d8dee3; color:var(--navy); background:transparent;
  }
  .btn-outline-dark:hover{ border-color:var(--brand); color:var(--brand); }

  .btn .arrow-ic{ transition:transform .3s ease; }
  .btn:hover .arrow-ic{ transform:translateX(-4px); }
  [dir="rtl"] .btn:hover .arrow-ic{ transform:translateX(4px); }

  .magnetic{ transition:transform .18s ease; }

  /* ---------- circular icon buttons ---------- */
  .icon-btn{
    transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .2s ease;
  }
  .icon-btn:hover{
    background:var(--brand);
    border-color:var(--brand);
    color:#fff;
  }
  .icon-btn:active{ transform:scale(.94); }

  /* ---------- mobile menu ---------- */
  #mobileMenu{
    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.2,.7,.2,1);
  }
  [dir="rtl"] #mobileMenu{ transform:translateX(-100%); }
  #mobileMenu.is-open{ transform:translateX(0); }

  #menuBackdrop{
    opacity:0; pointer-events:none;
    transition:opacity .35s ease;
  }
  #menuBackdrop.is-open{
    opacity:1; pointer-events:auto;
  }

  .burger span{
    display:block; height:2px; border-radius:2px; background:#fff;
    transition:transform .3s ease, opacity .3s ease;
  }
  .burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.is-open span:nth-child(2){ opacity:0; }
  .burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ---------- cursor glow (desktop only) — kept subtle for a minimal, industrial feel ---------- */
  #cursorGlow{
    position:fixed; z-index:1; pointer-events:none;
    width:200px; height:200px; border-radius:9999px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(244,123,32,.06), transparent 70%);
    transition:opacity .3s ease;
    opacity:0;
  }

  /* ---------- misc ---------- */
  .stat-figure{ font-variant-numeric:tabular-nums; }

  .section-dark{
    background:
      radial-gradient(circle at 18% -10%, rgba(244,123,32,.10), transparent 32%),
      radial-gradient(circle at 88% 60%, rgba(30,110,160,.12), transparent 32%),
      var(--navy);
  }

  .diag-corner{
    clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  }

  input::placeholder{ color:rgba(255,255,255,.35); }

  @media (max-width:767px){
    #cursorGlow{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,
    *::before,
    *::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
  }

/* ---------------------------------------------------------------
   Inner pages: pagination, comments, prose fallback
   (added in the archive/single/search/404 phase)
--------------------------------------------------------------- */

/* WordPress core pagination markup (paginate_links / the_posts_pagination) */
.page-numbers{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:40px; height:40px; margin-inline-end:6px;
	border-radius:12px; color:#475569; font-size:13px; font-weight:700;
	transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
a.page-numbers:hover{ border-color:var(--brand); color:var(--brand); }
.page-numbers.current{ background:var(--brand); border-color:var(--brand); color:#fff; }
.page-numbers.dots{ border-color:transparent; }
ul.page-numbers{ list-style:none; display:flex; flex-wrap:wrap; padding:0; margin:0; }
ul.page-numbers li{ display:inline-flex; }

/* Comment form (comments.php) */
.comment-form input,
.comment-form textarea{ font-family:inherit; }
.comment-notes,
.comment-form-cookies-consent{ font-size:12px; color:#94a3b8; }
.comment-reply-title small a{ font-size:12px; color:var(--brand); margin-inline-start:8px; }

/* Fallback prose styling — keeps long-form content readable regardless
   of what the Tailwind Typography plugin (built into tailwind.css) emits. */
.prose{ color:#475569; }
.prose h2:where(:not(.not-prose *)){ margin-top:2em; margin-bottom:.75em; font-size:1.5em; font-weight:900; color:#0b2538; }
.prose h3:where(:not(.not-prose *)){ margin-top:1.6em; margin-bottom:.6em; font-size:1.25em; font-weight:800; color:#0b2538; }
.prose p:where(:not(.not-prose *)){ margin-top:1.1em; margin-bottom:1.1em; }
.prose ul:where(:not(.not-prose *)), .prose ol:where(:not(.not-prose *)){ margin-top:1.1em; margin-bottom:1.1em; padding-inline-start:1.4em; }
/* Tailwind's preflight list-reset (assets/css/tailwind.css) is enqueued
   after this stylesheet, so it can end up applied after these rules,
   silently dropping bullets/numbers from editor content. Set list-style
   explicitly, and with !important, the same defensive approach already
   used above for other plugin-generated markup (the [video] shortcode,
   WP Rocket). */
.prose ul:where(:not(.not-prose *)){ list-style:disc !important; list-style-position:outside !important; }
.prose ol:where(:not(.not-prose *)):not([type]){ list-style:decimal !important; list-style-position:outside !important; }
.prose ol:where(:not(.not-prose *))[type]{ list-style-position:outside !important; } /* keep native numbering for type="a|A|i|I" */
.prose ul:where(:not(.not-prose *)) ul:where(:not(.not-prose *)){ list-style-type:circle !important; }
.prose ul:where(:not(.not-prose *)) ul:where(:not(.not-prose *)) ul:where(:not(.not-prose *)){ list-style-type:square !important; }
.prose li:where(:not(.not-prose *)){ margin-top:.4em; display:list-item !important; }
.prose a:where(:not(.not-prose *)){ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.prose img:where(:not(.not-prose *)){ border-radius:16px; margin-top:1.6em; margin-bottom:1.6em; }
.prose blockquote:where(:not(.not-prose *)){ border-inline-start:3px solid var(--brand); padding-inline-start:1.2em; font-style:italic; color:#0b2538; }

/* Skip-to-content link — invisible until keyboard-focused */
.skip-link{
	position:fixed; z-index:9999; top:-100px; right:16px;
	background:var(--brand); color:#fff; padding:10px 18px; border-radius:10px;
	font-size:13px; font-weight:700; transition:top .25s ease;
}
.skip-link:focus{ top:16px; }

/* ---------------------------------------------------------------
   Fixes: logo sizing, header legibility, marquee loop, about-section
   contrast, hero controls (see functions.php / front-page.php too)
--------------------------------------------------------------- */

/* Custom logo (header + footer). WordPress wraps the logo in its own
   <a class="custom-logo-link"> before the <img>, and that anchor has
   no defined size of its own — so a plain "width:100%" on the image
   has nothing definite to resolve against and the browser falls back
   to the image's native (often huge) size, which is what was
   overflowing the frame. Absolutely positioning the image against a
   `relative` frame sidesteps that percentage-resolution issue
   entirely and guarantees an exact fit at any frame size, including
   on mobile where the header/footer frame sizes don't change but this
   still makes the fix bulletproof regardless. */
.site-logo-frame{ position:relative; overflow:hidden; }
.site-logo-frame .custom-logo-link{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
}
.site-logo-frame .custom-logo{
	position:absolute;
	inset:0;
	width:100% !important;
	height:100% !important;
	object-fit:contain;
	display:block;
}

/* Header: always legible regardless of what's behind it. Only the
   front page gets the dramatic transparent-over-hero-image treatment;
   every other page keeps a translucent dark backdrop from the start. */
#siteHeader{
	background:rgba(4,13,22,.55);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	border-color:rgba(255,255,255,.08);
}
.home #siteHeader{
	background:transparent;
	backdrop-filter:none;
	-webkit-backdrop-filter:none;
	border-color:rgba(255,255,255,0);
}
.home #siteHeader.is-scrolled{
	background:rgba(4,13,22,.88);
	backdrop-filter:blur(16px);
	-webkit-backdrop-filter:blur(16px);
	border-color:rgba(255,255,255,.09);
}

/* About section — stats rail (left-most column): the number
   figures need a stronger accent so they read clearly. */
#about .stat-figure{ text-shadow:0 1px 12px rgba(244,123,32,.35); }

/* ---------------------------------------------------------------
   Desktop dropdown menus — any depth. .nav-item is the <li> for
   every level; .sub-menu is the dropdown panel (top level opens
   below its parent, .sub-menu-flyout levels open sideways instead,
   .sub-menu-mega is a wide, multi-column panel used automatically
   when a top-level branch has more than 6 children).
--------------------------------------------------------------- */
.nav-item{ position:relative; }
.nav-item-row{ display:flex; align-items:center; }

.submenu-toggle{
	display:flex; align-items:center; justify-content:center;
	height:18px; color:currentColor; opacity:.6;
	transition:transform .25s ease, opacity .2s ease;
}
.submenu-toggle:hover{ opacity:1; }

.sub-menu{
	position:absolute;
	top:100%; right:0; margin-top:14px;
	min-width:230px;
	background:rgba(4,13,22,.97);
	border:1px solid rgba(255,255,255,.08);
	border-radius:16px;
	box-shadow:0 22px 50px -18px rgba(4,13,22,.5);
	padding:8px;
	display:flex; flex-direction:column; gap:2px;
	opacity:0; visibility:hidden; pointer-events:none;
	transform:translateY(8px);
	/* The 0s-duration, delayed switch on visibility/pointer-events
	   (rather than hiding the instant :hover is lost) is what lets the
	   cursor travel from the link, across the visual gap above, and
	   into the panel itself without it disappearing first. */
	transition:opacity .2s ease .3s, transform .2s ease .3s,
	           visibility 0s linear .5s, pointer-events 0s linear .5s;
	z-index:150;
}

/* Invisible "bridge" that fills the gap between a parent link and its
   dropdown. The cursor stays over the dropdown (a descendant of the
   nav item, so :hover never breaks) all the way from the link to the
   panel — the submenu stays open while the mouse travels to it and
   while it moves between its items. Flyouts sit flush against their
   parent panel, so they need no bridge. */
.sub-menu::before{
	content:"";
	position:absolute;
	left:0; right:0;
	top:-16px; height:16px;
}
.sub-menu-flyout::before{ display:none; }
.sub-menu-mega::before{ top:-40px; height:40px; }

/* Moving from one menu item straight to a sibling: hide the previous
   sibling's panel at once (the grace delay is only for leaving the menu). */
nav[aria-label="منوی اصلی"] > ul:hover > .nav-item:not(:hover) > .sub-menu,
.sub-menu:hover > .nav-item:not(:hover) > .sub-menu,
.sub-menu-column:hover > .nav-item:not(:hover) > .sub-menu{
	transition-delay:0s;
}
.sub-menu .nav-item-row{ padding:2px 4px; }
.sub-menu .nav-link{ display:block; width:100%; padding:8px 10px; border-radius:10px; font-size:13px; }
.sub-menu .nav-item:hover > .nav-item-row .nav-link,
.sub-menu .nav-item.is-open > .nav-item-row .nav-link{ background:rgba(255,255,255,.06); }
.sub-menu .nav-link::after{ display:none; } /* underline effect is a top-level-only affordance */

.sub-menu-flyout{
	top:0; right:100%; margin-top:0; margin-inline-end:8px;
}

/* Mega menu — wide, centered under the header rather than pinned to
   the triggering link (fixed, not absolute, so it never has to worry
   about which nav-item is nearest the viewport edge). */
.sub-menu-mega{
	position:fixed;
	top:90px; left:50%; margin-top:0;
	transform:translateX(-50%) translateY(8px);
	width:min(1360px, calc(100% - 40px));
	min-width:0;
	flex-direction:row;
	flex-wrap:wrap;
	gap:4px 8px;
	padding:16px;
}
.nav-item.has-children:hover > .sub-menu-mega,
.nav-item.has-children:focus-within > .sub-menu-mega,
.nav-item.has-children.is-open > .sub-menu-mega{
	transform:translateX(-50%) translateY(0);
}
.sub-menu-column{
	display:flex; flex-direction:column; gap:2px;
	flex:1 1 220px; min-width:200px;
}

.nav-item.has-children:hover > .sub-menu,
.nav-item.has-children:focus-within > .sub-menu,
.nav-item.has-children.is-open > .sub-menu{
	opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
	transition:opacity .2s ease, transform .2s ease,
	           visibility 0s linear 0s, pointer-events 0s linear 0s;
}

/* The left-most top-level item (last in RTL source order) would push
   its right-anchored dropdown off the left edge of the viewport on
   narrower "lg" widths — flip just that one to open inward instead.
   Mega panels are excluded: they're already centered under the header
   regardless of which item triggered them. */
nav[aria-label="منوی اصلی"] > ul > .nav-item:last-child > .sub-menu:not(.sub-menu-flyout):not(.sub-menu-mega){
	right:auto; left:0;
}

.nav-item.has-children:hover > .nav-item-row .submenu-toggle,
.nav-item.has-children:focus-within > .nav-item-row .submenu-toggle,
.nav-item.has-children.is-open > .nav-item-row .submenu-toggle{
	transform:rotate(180deg); opacity:1;
}

/* ---------------------------------------------------------------
   Mobile accordion menu — any depth, pure-CSS grid-rows animation
   so a nested accordion always resizes its parent correctly with
   no JS height calculation involved.
--------------------------------------------------------------- */
.mobile-nav-item{ position:relative; }

.mobile-submenu-toggle svg{ transition:transform .25s ease; }
.mobile-nav-item.is-open > span > .mobile-submenu-toggle svg{ transform:rotate(180deg); }

.mobile-sub-menu-wrap{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .3s ease;
}
.mobile-nav-item.is-open > .mobile-sub-menu-wrap{
	grid-template-rows:1fr;
}
.mobile-sub-menu-wrap > .mobile-sub-menu{
	overflow:hidden;
	min-height:0;
	padding-right:16px;
	border-right:1px solid rgba(255,255,255,.1);
	margin-right:12px;
}
.mobile-sub-menu .mobile-link{ font-size:14px; padding-top:10px; padding-bottom:10px; }

/* ---------------------------------------------------------------
   Scroll-to-top button
--------------------------------------------------------------- */
.scroll-top-btn{
	position:fixed;
	bottom:20px; left:20px; z-index:90;
	display:flex; align-items:center; justify-content:center;
	width:46px; height:46px;
	border-radius:9999px;
	background:var(--brand);
	color:#fff;
	box-shadow:0 8px 18px -8px rgba(244,123,32,.4);
	opacity:0; visibility:hidden; transform:translateY(12px);
	pointer-events:none;
	transition:opacity .3s ease, transform .3s ease, visibility .3s, background-color .3s ease;
}
.scroll-top-btn:hover{ background:#ff9036; }
.scroll-top-btn.is-visible{
	opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
@media (min-width:1024px){
	.scroll-top-btn{ bottom:28px; left:28px; width:50px; height:50px; }
}

/* ---------------------------------------------------------------
   Responsive hardening (mobile-first)
   1) No sideways page scroll, ever.
   2) Grid columns can shrink (wide content can no longer stretch them).
   3) Everything an editor can put into the_content() — images, captions,
      video, iframes/embeds, tables, code — stays inside its column.
--------------------------------------------------------------- */

/* 1) Sideways-scroll guard.
   "clip" (unlike "hidden") does not create a scroll container, so
   position:sticky (project / service sidebars) keeps working. Old
   browsers without "clip" fall back to the html/body "hidden" rule. */
html{ max-width:100%; }
body{ position:relative; max-width:100%; overflow-wrap:break-word; }
@supports (overflow:clip){
  html, body{ overflow-x:clip; }
}
@supports not (overflow:clip){
  html{ overflow-x:hidden; }
}

/* Directional reveal animations slide sideways by 32px before they show.
   On stacked (single-column) layouts that pushed the element past the
   screen edge and created the sideways scroll seen on first load, so
   below the two-column breakpoint they rise up instead. */
@media (max-width:1023px){
  .reveal-right,
  .reveal-left{ transform:translateY(28px); }
}

/* 2) Grid tracks that are not defined by a utility default to one
   *shrinkable* column. (:where() keeps specificity at zero, so every
   Tailwind grid-cols-* / sm: / lg: utility still wins as before.) */
:where(.grid){ grid-template-columns:minmax(0,1fr); }

/* Form controls never exceed their container. */
input, select, textarea{ max-width:100%; }

/* Headings and long unbroken words (URLs, part numbers) wrap. */
h1, h2, h3, h4{ overflow-wrap:break-word; }

/* 3) Editor content --------------------------------------------- */
.prose,
.comment-content{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
}

/* Images, video, canvas, svg */
.prose img,
.prose video,
.prose canvas,
.prose svg,
.comment-content img,
.comment-content video{
  max-width:100%;
  height:auto;
}
.prose video,
.comment-content video{ width:100%; }
.prose img.aligncenter,
.prose .aligncenter{ display:block; margin-inline:auto; }

/* Captions / figures / WordPress media wrappers often carry a fixed
   inline width (e.g. style="width:810px") from the old editor. */
.prose figure,
.prose .wp-caption,
.prose .wp-video,
.prose .wp-block-image,
.prose .wp-block-video,
.prose .wp-block-embed,
.prose .wp-block-gallery,
.prose [class*="wp-image-"],
.prose .mejs-container,
.prose .mejs-inner{
  max-width:100% !important;
}

/* WordPress gallery — the [gallery] shortcode (html5 mode, theme support
   declared in functions.php) and the block-editor gallery share these
   class names. The theme intentionally dequeues WordPress's own block
   library CSS (inc/classic-editor.php, since the block editor is off
   theme-wide) so the grid below is the only thing laying it out —
   without it a gallery is just a plain column of full-width images. */
.prose .gallery,
.prose .wp-block-gallery,
.prose .blocks-gallery-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:.85rem;
  margin:1.6em 0;
  list-style:none;
  padding:0;
}
.prose .gallery-columns-1{ grid-template-columns:repeat(1,1fr); }
.prose .gallery-columns-2{ grid-template-columns:repeat(2,1fr); }
.prose .gallery-columns-3{ grid-template-columns:repeat(3,1fr); }
.prose .gallery-columns-4{ grid-template-columns:repeat(4,1fr); }
.prose .gallery-columns-5{ grid-template-columns:repeat(5,1fr); }
.prose .gallery-columns-6{ grid-template-columns:repeat(6,1fr); }
.prose .gallery-columns-7{ grid-template-columns:repeat(7,1fr); }
.prose .gallery-columns-8{ grid-template-columns:repeat(8,1fr); }
.prose .gallery-columns-9{ grid-template-columns:repeat(9,1fr); }

.prose .gallery-item,
.prose .blocks-gallery-item{ margin:0 !important; min-width:0; }
.prose .gallery-item figure,
.prose .blocks-gallery-item figure{ margin:0; height:100%; }
.prose .gallery-icon,
.prose .blocks-gallery-item figure{ overflow:hidden; border-radius:14px; height:100%; }
.prose .gallery-icon a{ display:block; height:100%; }
.prose .gallery-icon img,
.prose .blocks-gallery-item img,
.prose .wp-block-gallery .wp-block-image img{
  width:100% !important; height:100% !important;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:14px;
  margin:0 !important;
}
.prose .gallery-caption,
.prose .blocks-gallery-item figcaption{
  margin-top:.5em;
  font-size:12px;
  line-height:1.7;
  color:#64748b;
  text-align:center;
}
/* Never more than 2 columns on tablets, 1 on phones — however many
   columns were chosen when the gallery was created. */
@media (max-width:768px){
  .prose .gallery,
  .prose .wp-block-gallery,
  .prose .blocks-gallery-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:420px){
  .prose .gallery,
  .prose .wp-block-gallery,
  .prose .blocks-gallery-grid{ grid-template-columns:repeat(1,1fr) !important; }
}
/* WordPress [video] shortcode: the wrapper carries style="width:1280px" and
   MediaElement.js then sizes the player to the same fixed pixels — that was
   the sideways scroll on pages with an embedded video. The wrapper and the
   player now follow the column width; the height comes from the video's own
   ratio (--video-ratio, set in inc/responsive-content.php; 16/9 fallback). */
.prose .wp-video{ width:100% !important; }
.prose .wp-video > video{ width:100%; height:auto; }
.prose .wp-video .mejs-container,
.prose .wp-video-shortcode.mejs-container{
  width:100% !important;
  height:auto !important;
  aspect-ratio:var(--video-ratio, 16 / 9);
}
.prose .mejs-container{ max-width:100% !important; }

/* Left/right floated images stack on phones instead of squeezing text */
@media (max-width:640px){
  .prose .alignleft,
  .prose .alignright{
    float:none; display:block; margin:1.25em auto;
  }
}

/* Wide / full-width block alignments must not escape the column */
.prose .alignwide,
.prose .alignfull{ width:auto; max-width:100%; margin-inline:0; }

/* Iframes / embeds. Video hosts keep a 16:9 frame at any width;
   other iframes (maps, forms) just never exceed the column. */
.prose iframe,
.prose embed,
.prose object,
.comment-content iframe{
  max-width:100%;
}
.prose iframe[src*="youtube"]:not([style*="position"]),
.prose iframe[src*="youtu.be"]:not([style*="position"]),
.prose iframe[src*="vimeo"]:not([style*="position"]),
.prose iframe[src*="dailymotion"]:not([style*="position"]),
.prose iframe[src*="wistia"]:not([style*="position"]),
.prose iframe[src*="aparat"]:not([style*="position"]){
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
}
/* Core "responsive embeds" wrapper */
.prose .wp-block-embed__wrapper{ position:relative; max-width:100%; }
.prose .wp-block-embed__wrapper iframe{ max-width:100%; }

/* Tables: wrapped in .table-scroll by inc/responsive-content.php so a
   wide table scrolls inside its own box rather than the whole page. */
.table-scroll{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-block:1.5em;
}
.table-scroll > table{ margin:0; min-width:100%; }

/* Code */
.prose pre{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.prose code{ overflow-wrap:anywhere; }
.prose pre code{ overflow-wrap:normal; }

/* ---------------------------------------------------------------
   Table of contents + FAQ accordion (inc/faq-toc.php) — shared by
   articles, services, projects and their categories.
--------------------------------------------------------------- */

/* Anchored headings must not end up hidden under the fixed 76px header
   when a table-of-contents link jumps to them. */
.prose h1, .prose h2, .prose h3{ scroll-margin-top:96px; }

.toc-box{
  margin-bottom:2rem;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#f8fafc;
  overflow:hidden;
}
.toc-toggle{
  display:flex; width:100%; align-items:center; justify-content:space-between;
  gap:10px; padding:16px 20px;
  font-size:14px; font-weight:800; color:#0b2538;
}
.toc-toggle svg{ transition:transform .25s ease; flex-shrink:0; opacity:.6; }
.toc-box.is-collapsed .toc-toggle svg{ transform:rotate(180deg); }

.toc-panel-wrap{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .3s ease;
}
.toc-box.is-collapsed .toc-panel-wrap{ grid-template-rows:0fr; }
.toc-box.is-collapsed .toc-panel{ padding-bottom:0; }
.toc-panel{
  overflow:hidden;
  min-height:0;
  list-style:none;
  margin:0;
  padding:0 20px 18px;
  display:flex; flex-direction:column; gap:2px;
}
.toc-panel a{
  display:block;
  padding:6px 0;
  font-size:13px; line-height:1.9;
  color:#475569;
  border-right:2px solid transparent;
  padding-right:12px;
  margin-right:-2px;
  transition:color .2s ease, border-color .2s ease;
}
.toc-panel a:hover{ color:#dd6710; }
.toc-panel li.is-active > a{ color:#dd6710; border-color:#f47b20; font-weight:700; }
.toc-panel .toc-level-2{ padding-right:16px; }
.toc-panel .toc-level-3{ padding-right:32px; }

/* FAQ */
.faq-box{ margin-top:3rem; }
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}
.faq-question{ margin:0; }
.faq-toggle{
  display:flex; width:100%; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 20px; text-align:right;
  font-size:14px; font-weight:800; color:#0b2538;
}
.faq-toggle svg{ transition:transform .25s ease; flex-shrink:0; opacity:.6; color:#f47b20; }
.faq-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }

.faq-answer-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s ease;
}
.faq-item.is-open .faq-answer-wrap{ grid-template-rows:1fr; }
.faq-answer{
  overflow:hidden;
  min-height:0;
  font-size:13px; line-height:2;
  color:#475569;
}
.faq-answer p{ margin:0 0 .8em; padding: 0px 20px 14px 20px; }
.faq-answer p:last-child{ margin-bottom:0; }

/* Dark (project description) variant of the TOC box */
.toc-box--dark{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
}
.toc-box--dark .toc-toggle{ color:#fff; }
.toc-box--dark .toc-panel a{ color:rgba(255,255,255,.6); }
.toc-box--dark .toc-panel a:hover{ color:#ffa353; }
img.custom-logo { width: 65px; }
.custom-logo-link {
    display: inline-block;
    padding: 6px 10px;
    background-color: #102030;
    border-radius: 8px;
}
.children li { margin-top: 10px; }