/**
 * Site-wide chrome — header and footer, every page.
 *
 * The Figma frames label the header/footer as placeholders, but their
 * geometry is consistent across all three frames, so this matches it:
 *   desktop 1440 — 140px bar, logo right, nav + CTA on the second row
 *   tablet   744 — single 60px bar
 *   mobile   393 — single 60px bar: Farsi left, logo centred, burger right
 *
 * Loaded at wp_enqueue_scripts priority 100 so it lands after the theme
 * builder's own post-18/post-19 stylesheets.
 */

/* ---- Desktop header: 140px tall (measured from the frames) ------------ */

@media (min-width: 1024px) {
  header .elementor-element-7606721 {
    padding-top: 0 !important;
    padding-bottom: 6px !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
}

/* Between the tablet bar and the 1440 frame the nav runs out of room and
   wraps onto a second line; tighten the item spacing so it stays one row. */
@media (min-width: 1024px) and (max-width: 1319px) {
  /* the flex container is the ul, not the nav wrapper */
  .elementor-location-header
    nav.elementor-nav-menu--main
    ul.elementor-nav-menu {
    flex-wrap: nowrap !important;
    justify-content: center !important;
  }

  .elementor-location-header
    nav.elementor-nav-menu--main
    ul.elementor-nav-menu
    > li {
    flex: 0 0 auto !important;
  }

  .elementor-location-header
    nav.elementor-nav-menu--main
    ul.elementor-nav-menu
    a {
    padding-inline: 9px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  .elementor-location-header .elementor-element-98b0cf2 .beheshti-btn {
    font-size: 13px !important;
    padding: 10px 18px !important;
  }
}

/* ---- Tablet + mobile header: one 60px bar ----------------------------- */

/* Site Settings → Custom CSS already tries to lay this bar out as a grid, so
   every rule here carries the extra .e-con / .elementor-widget class it needs
   to out-specify post-5.css. The bar becomes a plain 60px block and the three
   pieces are pinned physically — unambiguous under RTL. */
@media (max-width: 1023px) {
  .elementor-location-header .elementor-element-7606721.e-con {
    position: relative !important;
    display: block !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* the two row wrappers stop generating boxes, so their children are
	   pinned to the 60px bar itself */
  .elementor-location-header .elementor-element-5461748.e-con,
  .elementor-location-header .elementor-element-5461748 > .e-con-inner,
  .elementor-location-header .elementor-element-c00b55e.e-con,
  .elementor-location-header .elementor-element-c00b55e > .e-con-inner {
    display: contents !important;
  }

  .elementor-location-header .elementor-element-0290474.elementor-widget {
    position: absolute !important;
    left: 20px !important;
    right: auto !important;
    top: 50% !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%);
  }

  .beheshti-lang__globe,
  .beheshti-lang__icon {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    background: url('/wp-content/uploads/figma-assets/lang-globe.svg') no-repeat
      center / contain !important;
    border: none !important;
    border-radius: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
  .beheshti-lang__globe::before,
  .beheshti-lang__globe::after {
    display: none !important;
  }
  .beheshti-lang svg,
  .beheshti-lang .beheshti-lang__globe-svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .elementor-location-header .elementor-element-1812792.elementor-widget {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%);
  }

  .elementor-location-header .elementor-element-1812792 img {
    width: 50px !important;
    height: auto !important;
    display: block !important;
  }

  .elementor-location-header .elementor-element-71de6ae.e-con {
    position: absolute !important;
    right: 20px !important;
    left: auto !important;
    top: 50% !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    /* column flex + stretch would blow the wrapper up to the full header
		   width; centring keeps it the size of the burger */
    align-items: center !important;
    transform: translateY(-50%);
  }

  /* the mobile frame has no CTA in the bar — it lives inside the burger */
  .elementor-location-header .elementor-element-2af79c5.e-con,
  .elementor-location-header .elementor-element-98b0cf2.e-con {
    display: none !important;
  }

  /* the nav widget keeps its desktop width, which would push the burger
	   off-screen once the wrapper is pinned to the right edge */
  .elementor-location-header .elementor-element-dfb27fa.elementor-widget {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  /* the collapsed flyout still contributes its full width to the widget, so
	   take it out of flow and hang it under the bar at viewport width */
  .elementor-location-header
    .elementor-element-dfb27fa
    .elementor-nav-menu__container {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    right: -20px !important;
    left: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .elementor-location-header
    .elementor-element-71de6ae
    .elementor-widget-container,
  .elementor-location-header
    .elementor-element-71de6ae
    nav.elementor-nav-menu--main {
    width: auto !important;
  }

  .elementor-location-header .elementor-menu-toggle {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The flyout inherits the desktop menu's horizontal flex, which squeezes
	   every item to ~30px. Stack it, and lift it over the page sections. */
  .elementor-location-header .elementor-nav-menu--dropdown {
    z-index: 900 !important;
  }

  .elementor-location-header
    .elementor-nav-menu--dropdown
    ul.elementor-nav-menu {
    display: block !important;
    width: 100% !important;
  }

  .elementor-location-header
    .elementor-nav-menu--dropdown
    ul.elementor-nav-menu
    > li {
    display: block !important;
    width: 100% !important;
  }

  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item {
    display: block !important;
    width: 100% !important;
    padding: 12px 0 !important;
    text-align: right !important;
    font-size: 16px !important;
  }

  .elementor-location-header {
    position: relative !important;
    z-index: 900 !important;
  }
}

/* ---- Footer -------------------------------------------------------- */

@media (max-width: 1219px) {
  footer .elementor-section > .elementor-container,
  footer .e-con > .e-con-inner {
    padding-inline: 20px !important;
  }
}

/* Ensure header does not leak star or elements into hero sections on any page */
@media (min-width: 1025px) {
  header.elementor-location-header,
  .elementor-location-header,
  .beheshti-site-header {
    overflow: hidden !important;
  }

  .elementor-location-header .elementor-element-0290474,
  .elementor-location-header .beheshti-lang,
  .beheshti-site-header .elementor-element-0290474,
  .beheshti-site-header .beheshti-lang {
    position: absolute !important;
    left: 60px !important;
    top: 68px !important;
    width: 180px !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    display: inline-flex !important;
    justify-content: start !important;
    align-items: center !important;
    text-align: center !important;
  }

  .beheshti-site-header .elementor-element-0290474 .beheshti-lang {
    position: static !important;
    width: 100% !important;
  }

  .beheshti-header-star {
    position: absolute !important;
    top: calc(50% - 111px) !important;
    right: -66px !important;
    width: 396px !important;
    height: 180px !important;
    max-height: 180px !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
    display: block !important;
  }
}