/* ======================================================================
   EMKAN v152 — final geometry / alignment fixes
   Loaded after v151. Scope: shared layout geometry + requested page fixes.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1) Global desktop geometry
      Header/menu = narrower line
      Context/subnav rows = wider line
   ---------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root {
    
    --emkan-v152-header-width: min(1440px, calc(100vw - 96px));
  }

  html body .site-header {
    width: var(--emkan-v152-header-width) !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
  }

  

  /* Architecture inner-project title/back strip must follow the wide lower line. */
  
}

@media (min-width: 901px) and (max-width: 1279px) {
  

  html body .site-header {
    width: min(1120px, calc(100% - 80px)) !important;
    max-width: 1120px !important;
    margin-inline: auto !important;
  }

  

  
}

/* ----------------------------------------------------------------------
   2) ABOUT — vertical axis must pass through diamond centres
   Explicit physical sides avoid RTL/LTR logical-property cascade conflicts.
   ---------------------------------------------------------------------- */
@media (min-width: 721px) {
  html[lang="fa"] body .company-axis,
  html[lang="ar"] body .company-axis {
    direction: rtl !important;
    padding: 4px 18px 4px 0 !important;
  }

  html[lang="fa"] body .company-axis::before,
  html[lang="ar"] body .company-axis::before {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    left: auto !important;
    right: 5px !important;
    width: 1px !important;
  }

  html[lang="fa"] body .company-axis button::before,
  html[lang="ar"] body .company-axis button::before {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    left: auto !important;
    right: -16px !important;
    width: 7px !important;
    height: 7px !important;
    box-sizing: border-box !important;
  }

  html[lang="en"] body .company-axis {
    direction: ltr !important;
    padding: 4px 0 4px 18px !important;
  }

  html[lang="en"] body .company-axis::before {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    right: auto !important;
    left: 5px !important;
    width: 1px !important;
  }

  html[lang="en"] body .company-axis button::before {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    right: auto !important;
    left: -16px !important;
    width: 7px !important;
    height: 7px !important;
    box-sizing: border-box !important;
  }
}

/* ----------------------------------------------------------------------
   3) CONTACT — restore deliberately compact composition width
   ---------------------------------------------------------------------- */
@media (min-width: 761px) {
  html body main.contact-main.contact-main--compact {
    width: min(840px, calc(100% - 48px)) !important;
    max-width: 840px !important;
    margin-inline: auto !important;
    padding-top: 42px !important;
  }

  html body .contact-main--compact .contact-composition {
    width: 100% !important;
    max-width: 840px !important;
    grid-template-columns: minmax(0, 1.03fr) minmax(300px, 0.97fr) !important;
    gap: 30px !important;
  }
}

/* ----------------------------------------------------------------------
   4) EDUCATIONAL CONTENT — line / diamonds exact centre alignment
   ---------------------------------------------------------------------- */
@media (min-width: 721px) {
  html[lang="fa"] body.emkan-v149-learning-resource #contentApp .learning-tree,
  html[lang="ar"] body.emkan-v149-learning-resource #contentApp .learning-tree {
    direction: rtl !important;
    padding: 0 24px 0 0 !important;
  }

  html[lang="fa"] body.emkan-v149-learning-resource #contentApp .learning-tree::before,
  html[lang="ar"] body.emkan-v149-learning-resource #contentApp .learning-tree::before {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    left: auto !important;
    right: 4px !important;
    width: 1px !important;
  }

  html[lang="fa"] body.emkan-v149-learning-resource #contentApp .learning-branch::before,
  html[lang="ar"] body.emkan-v149-learning-resource #contentApp .learning-branch::before {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    left: auto !important;
    right: -23px !important;
    width: 7px !important;
    height: 7px !important;
    box-sizing: border-box !important;
  }

  html[lang="en"] body.emkan-v149-learning-resource #contentApp .learning-tree {
    direction: ltr !important;
    padding: 0 0 0 24px !important;
  }

  html[lang="en"] body.emkan-v149-learning-resource #contentApp .learning-tree::before {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    right: auto !important;
    left: 4px !important;
    width: 1px !important;
  }

  html[lang="en"] body.emkan-v149-learning-resource #contentApp .learning-branch::before {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    right: auto !important;
    left: -23px !important;
    width: 7px !important;
    height: 7px !important;
    box-sizing: border-box !important;
  }
}

/* ----------------------------------------------------------------------
   5) CIVIL / SERVICES — architecture-equivalent 3-card grid + clean search
   ---------------------------------------------------------------------- */
@media (min-width: 901px) {
  html body.emkan-v147-civil-services .emkan-v147-services-view,
  html body.emkan-v149-civil-service-page .emkan-v149-civil-detail-layout,
  html body.emkan-v149-civil-sample-page .emkan-v149-civil-detail-layout {
    width: 952px !important;
    max-width: 952px !important;
    margin-inline: auto !important;
  }

  html[lang="fa"] body.emkan-v149-civil-service-page .emkan-v149-civil-internal-layout,
  html[lang="ar"] body.emkan-v149-civil-service-page .emkan-v149-civil-internal-layout,
  html[lang="fa"] body.emkan-v149-civil-sample-page .emkan-v149-civil-internal-layout,
  html[lang="ar"] body.emkan-v149-civil-sample-page .emkan-v149-civil-internal-layout {
    width: 952px !important;
    max-width: 952px !important;
    grid-template-columns: 648px 176px !important;
    grid-template-areas: "content rail" !important;
    column-gap: 128px !important;
    direction: ltr !important;
  }

  html[lang="en"] body.emkan-v149-civil-service-page .emkan-v149-civil-internal-layout,
  html[lang="en"] body.emkan-v149-civil-sample-page .emkan-v149-civil-internal-layout {
    width: 952px !important;
    max-width: 952px !important;
    grid-template-columns: 176px 648px !important;
    grid-template-areas: "rail content" !important;
    column-gap: 128px !important;
    direction: ltr !important;
  }

  html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-search-rail {
    width: 176px !important;
    max-width: 176px !important;
  }

  html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-internal-content {
    width: 648px !important;
    max-width: 648px !important;
  }

  html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-samples-grid {
    width: 648px !important;
    max-width: 648px !important;
    grid-template-columns: repeat(3, 192px) !important;
    column-gap: 36px !important;
    row-gap: 32px !important;
    justify-content: start !important;
    margin: 0 !important;
  }

  html[lang="fa"] body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-samples-grid,
  html[lang="ar"] body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-samples-grid {
    direction: rtl !important;
  }

  html[lang="en"] body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-samples-grid {
    direction: ltr !important;
  }
}

/* Search field: reserve icon space and pin icon to the physical opposite side. */
html body.emkan-v147-civil-services .v70-canonical-search,
html body.emkan-v149-civil-service-page .emkan-v149-civil-search,
html body.emkan-v149-civil-sample-page .emkan-v149-civil-search {
  position: relative !important;
}

html[lang="fa"] body.emkan-v147-civil-services .v70-canonical-search input,
html[lang="ar"] body.emkan-v147-civil-services .v70-canonical-search input,
html[lang="fa"] body.emkan-v149-civil-service-page .emkan-v149-civil-search input,
html[lang="ar"] body.emkan-v149-civil-service-page .emkan-v149-civil-search input,
html[lang="fa"] body.emkan-v149-civil-sample-page .emkan-v149-civil-search input,
html[lang="ar"] body.emkan-v149-civil-sample-page .emkan-v149-civil-search input {
  direction: rtl !important;
  text-align: right !important;
  padding-left: 32px !important;
  padding-right: 2px !important;
}

html[lang="fa"] body.emkan-v147-civil-services .v70-canonical-search svg,
html[lang="ar"] body.emkan-v147-civil-services .v70-canonical-search svg,
html[lang="fa"] body.emkan-v149-civil-service-page .emkan-v149-civil-search svg,
html[lang="ar"] body.emkan-v149-civil-service-page .emkan-v149-civil-search svg,
html[lang="fa"] body.emkan-v149-civil-sample-page .emkan-v149-civil-search svg,
html[lang="ar"] body.emkan-v149-civil-sample-page .emkan-v149-civil-search svg {
  left: 8px !important;
  right: auto !important;
}

html[lang="en"] body.emkan-v147-civil-services .v70-canonical-search input,
html[lang="en"] body.emkan-v149-civil-service-page .emkan-v149-civil-search input,
html[lang="en"] body.emkan-v149-civil-sample-page .emkan-v149-civil-search input {
  direction: ltr !important;
  text-align: left !important;
  padding-left: 2px !important;
  padding-right: 32px !important;
}

html[lang="en"] body.emkan-v147-civil-services .v70-canonical-search svg,
html[lang="en"] body.emkan-v149-civil-service-page .emkan-v149-civil-search svg,
html[lang="en"] body.emkan-v149-civil-sample-page .emkan-v149-civil-search svg {
  right: 8px !important;
  left: auto !important;
}

/* ----------------------------------------------------------------------
   6) STORE — category has NO divider; single product HAS one clean divider
   ---------------------------------------------------------------------- */
html body .store-category-layout::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  background: transparent !important;
}

@media (min-width: 901px) {
  html body .product-stage {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 1px minmax(320px, 0.9fr) !important;
    grid-template-areas: "media divider info" !important;
    column-gap: 14px !important;
    align-items: stretch !important;
  }

  html body .product-stage::after {
    content: "" !important;
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 100% !important;
    align-self: stretch !important;
    justify-self: center !important;
    background: var(--line, #d7d9dc) !important;
    pointer-events: none !important;
  }

  html body .product-gallery-panel {
    grid-area: media !important;
    border-inline-end: 0 !important;
  }

  html body .product-info {
    grid-area: info !important;
  }
}

@media (max-width: 900px) {
  html body .product-stage::after {
    content: none !important;
    display: none !important;
  }
}

/* ----------------------------------------------------------------------
   7) Landing pages — remove small desktop viewport overflow without hiding content
   ---------------------------------------------------------------------- */
@media (min-width: 901px) {
  /* Architecture: keep card proportions; reclaim only excessive white spacing. */
  html body .architecture-main .projects-layout {
    margin-top: clamp(24px, 3.2vh, 32px) !important;
  }

  html body .architecture-main .gallery-items-container {
    row-gap: 18px !important;
  }

  /* Content creation had a repeatable ~5px overflow caused by bottom padding. */
  html body.emkan-v142-content-landing .module-main {
    padding-bottom: 14px !important;
  }
}

/* Short desktop viewports: responsive compaction instead of page clipping. */
@media (min-width: 901px) and (max-height: 840px) {
  html body .architecture-main .projects-layout {
    margin-top: 18px !important;
  }

  html body .architecture-main .gallery-items-container {
    grid-template-columns: repeat(3, 156px) !important;
    row-gap: 12px !important;
    justify-content: center !important;
  }
}

/* ======================================================================
   v152.1 — specificity/centering hardening after full cascade validation
   ====================================================================== */

/* Center header against the viewport even when the shared page-shell has
   horizontal padding and the requested header width is wider than its content box. */
@media (min-width: 901px) {
  html body .page-shell > .site-header {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  
}

/* About: match the high-specificity v151 selector and cancel its logical inset. */
@media (min-width: 721px) {
  html[lang="fa"] body .about-main .company-axis .practice-button::before,
  html[lang="ar"] body .about-main .company-axis .practice-button::before {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    left: auto !important;
    right: -16px !important;
    width: 7px !important;
    height: 7px !important;
  }

  html[lang="en"] body .about-main .company-axis .practice-button::before {
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    right: auto !important;
    left: -16px !important;
    width: 7px !important;
    height: 7px !important;
  }
}

/* Contact: override the global page-shell > main geometry selector, not just the
   page's own max-width declaration. */
@media (min-width: 761px) {
  html body:not(.welcome-page):not(.menu-page) .page-shell > main.contact-main.contact-main--compact {
    width: min(840px, calc(100% - 48px)) !important;
    max-width: 840px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 42px !important;
  }
}

/* Landing pages: content itself already fits; remove only surplus flow height. */
@media (min-width: 901px) {
  html body .architecture-main {
    margin-bottom: -16px !important;
  }

  html body.emkan-v142-content-landing .module-main {
    margin-bottom: -8px !important;
  }
}

/* v152.2 — symmetrical explicit margins keep wide lines truly viewport-centred
   even when they are wider than the padded page-shell content box. */
@media (min-width: 901px) {
  html body .page-shell > .site-header {
    left: auto !important;
    transform: none !important;
    margin-left: calc((100% - var(--emkan-v152-header-width, min(1120px, calc(100vw - 80px)))) / 2) !important;
    margin-right: calc((100% - var(--emkan-v152-header-width, min(1120px, calc(100vw - 80px)))) / 2) !important;
  }

  
}

@media (min-width: 901px) and (max-width: 1279px) {
  :root {
    --emkan-v152-header-width: min(1120px, calc(100vw - 80px));
  }
}

/* Civil search icon hardening: prevent any inherited/static SVG rule from
   pulling the magnifier back onto the placeholder text. */
html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v149-civil-search > svg.search-icon {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  width: 12px !important;
  height: 12px !important;
  transform: translateY(-58%) !important;
  pointer-events: none !important;
}

/* Very short laptop viewport: one more proportional step so the Architecture
   landing still fits without a stray desktop scrollbar. */
@media (min-width: 901px) and (max-height: 760px) {
  html body .architecture-main .projects-layout {
    margin-top: 12px !important;
  }
  html body .architecture-main .gallery-items-container {
    grid-template-columns: repeat(3, 142px) !important;
    row-gap: 10px !important;
    justify-content: center !important;
  }
}