/* EMKAN v151 — final precision tuning
   Only the nine requested final adjustments are touched here. This sheet is
   loaded after v150 so established module/admin behavior remains intact. */

/* ========================================================================== 
   1) GLOBAL HORIZONTAL GEOMETRY
   Desktop reference: nav rail 1200px, context/breadcrumb rule 1320px.
   Both are centred, so left/right outer breathing room is always equal.
   ========================================================================== */
@media (min-width:1280px){
  html body .site-header{
    width:min(1200px,calc(100% - 132px))!important;
    max-width:1200px!important;
    margin-inline:auto!important;
  }
  :root{--emkan-v150-context-width:min(1320px,calc(100vw - 72px))}
  html body .site-header .primary-nav{padding-inline:96px!important}
  html body .site-header .nav-list{
    width:max-content!important;
    max-width:100%!important;
    gap:clamp(18px,1.35vw,27px)!important;
    margin-inline:auto!important;
  }
  html body .site-header .language-button{left:26px!important;right:auto!important}
  html body .site-header .theme-button,
  html body .site-header .nav-frame>#themeButton.theme-button{right:26px!important;left:auto!important}
}
@media (min-width:901px) and (max-width:1279px){
  html body .site-header{
    width:calc(100% - 80px)!important;
    max-width:1120px!important;
    margin-inline:auto!important;
  }
  :root{--emkan-v150-context-width:min(1200px,calc(100vw - 40px))}
  html body .site-header .primary-nav{padding-inline:82px!important}
  html body .site-header .nav-list{gap:clamp(13px,1.25vw,21px)!important}
}
/* Keep responsive/mobile geometry from v150; only guarantee exact centring. */
html body :is(
  main>.emkan-context-bar,
  .article-page>.emkan-context-bar,
  .store-category-main>.store-context-bar,
  .podcast-main>.podcast-context-bar,
  .product-main>.product-toolbar
){
  left:auto!important;right:auto!important;inset-inline:auto!important;transform:none!important;
  margin-left:auto!important;margin-right:auto!important;margin-inline:auto!important;
}

/* ========================================================================== 
   2) BREADCRUMBS
   DOM cleanup is performed by v151 JS. Keep surviving ancestors compact.
   ========================================================================== */
.emkan-context-path,.emkan-v150-civil-path,#storeCategoryPath,#podcastPath,#productPath,.product-context-path{
  min-width:0!important;
}

/* ========================================================================== 
   3) CIVIL > SERVICES — same 192px cover system as the approved grids.
   ========================================================================== */
@media (min-width:901px){
  html body.emkan-v149-civil-service-page .emkan-v149-civil-internal-layout,
  html body.emkan-v149-civil-sample-page .emkan-v149-civil-internal-layout{
    width:100%!important;max-width:1040px!important;margin-inline:auto!important;
  }
  html body.emkan-v149-civil-service-page .emkan-v147-samples-grid,
  html body.emkan-v149-civil-sample-page .emkan-v147-samples-grid{
    display:grid!important;
    grid-template-columns:repeat(3,192px)!important;
    column-gap:28px!important;row-gap:28px!important;
    justify-content:center!important;align-items:start!important;
    width:100%!important;max-width:100%!important;margin:0 auto!important;padding:0!important;
  }
  html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-sample-card{
    width:192px!important;max-width:192px!important;min-width:192px!important;margin:0!important;
  }
  html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-sample-media,
  html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-sample-card :is(img,.emkan-v147-media){
    width:192px!important;height:192px!important;aspect-ratio:1/1!important;object-fit:cover!important;
  }
}
@media (max-width:900px){
  html body:is(.emkan-v149-civil-service-page,.emkan-v149-civil-sample-page) .emkan-v147-sample-card{max-width:192px!important}
}

/* ========================================================================== 
   4) EDUCATION > LEARNING RESOURCE TREE
   The spine and diamond centres share the exact same x coordinate.
   ========================================================================== */
body.emkan-v149-learning-resource #contentApp .learning-tree{
  position:relative!important;
  padding-inline-start:24px!important;
}
body.emkan-v149-learning-resource #contentApp .learning-tree::before{
  content:""!important;display:block!important;position:absolute!important;
  inset-inline-start:4px!important;width:1px!important;
  top:19px!important;bottom:19px!important;
  background:var(--line)!important;
}
body.emkan-v149-learning-resource #contentApp .learning-branch{
  position:relative!important;min-height:38px!important;padding:8px 0!important;
}
body.emkan-v149-learning-resource #contentApp .learning-branch::before{
  content:""!important;display:block!important;position:absolute!important;
  inset-inline-start:-23px!important;top:50%!important;
  width:7px!important;height:7px!important;box-sizing:border-box!important;
  border:1px solid var(--line)!important;background:var(--bg)!important;
  transform:translateY(-50%) rotate(45deg)!important;
}
body.emkan-v149-learning-resource #contentApp .learning-branch:is(:hover,:focus-visible,.is-active)::before{
  background:var(--hover-accent)!important;border-color:var(--hover-accent)!important;
}
@media(max-width:480px){
  body.emkan-v149-learning-resource #contentApp .learning-side>.learning-tree{padding-inline-start:0!important}
  body.emkan-v149-learning-resource #contentApp .learning-side>.learning-tree::before{display:none!important}
  body.emkan-v149-learning-resource #contentApp .learning-side .learning-branch::before{display:none!important}
}

/* ========================================================================== 
   5) EDUCATION REGISTRATION CHECKBOX — one tick only.
   v120 used a pseudo tick while v136 added a background SVG; suppress the
   older pseudo mark and keep the canonical v136 background check.
   ========================================================================== */
body.v115-course-detail #registrationApp input[type="checkbox"]::before,
body.v115-course-detail #registrationApp input[type="checkbox"]::after{
  content:none!important;display:none!important;border:0!important;
}
body.v115-course-detail #registrationApp input[type="checkbox"]{
  -webkit-appearance:none!important;appearance:none!important;
  width:14px!important;height:14px!important;min-width:14px!important;min-height:14px!important;
  border:1px solid var(--line-strong,var(--line))!important;border-radius:0!important;
  background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:100% 100%!important;
  box-shadow:none!important;
}
body.v115-course-detail #registrationApp input[type="checkbox"]:checked{
  border-color:var(--hover-accent)!important;background-color:var(--hover-accent)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.1 8.2 6.35 11.25 12.9 4.8' fill='none' stroke='%23fff' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}

/* ========================================================================== 
   6) REGISTRATION STEPS = STORE PRODUCT TAB VISUAL GRAMMAR
   ========================================================================== */
body.v115-course-detail #contentApp #registration{
  border-bottom:1px solid var(--line)!important;
  padding-bottom:30px!important;
}
body.v115-course-detail #contentApp .v49-progress{
  display:flex!important;align-items:flex-end!important;justify-content:flex-start!important;
  width:100%!important;max-width:100%!important;
  gap:26px!important;margin:0 0 24px!important;padding:0!important;
  border:0!important;border-bottom:1px solid var(--line)!important;
  list-style:none!important;overflow:visible!important;
}
body.v115-course-detail #contentApp .v49-progress li{
  position:relative!important;flex:0 0 auto!important;min-width:0!important;
  margin:0!important;padding:0 0 10px!important;border:0!important;
  color:var(--category-muted)!important;font-size:8.8px!important;font-weight:400!important;
  line-height:1.6!important;text-align:start!important;white-space:nowrap!important;
}
body.v115-course-detail #contentApp .v49-progress li::after{
  content:""!important;display:block!important;position:absolute!important;
  left:0!important;right:0!important;bottom:-1px!important;width:auto!important;height:1px!important;
  background:var(--hover-accent)!important;transform:scaleX(0)!important;transform-origin:center!important;
  transition:transform .22s ease!important;
}
body.v115-course-detail #contentApp .v49-progress li[aria-current="step"]{
  color:var(--fg)!important;font-weight:400!important;
}
body.v115-course-detail #contentApp .v49-progress li[aria-current="step"]::after{transform:scaleX(1)!important}
:is(html[lang="fa"],html[lang="ar"]) body.v115-course-detail #contentApp .v49-progress{direction:rtl!important}
html[lang="en"] body.v115-course-detail #contentApp .v49-progress{direction:ltr!important}
@media(max-width:520px){
  body.v115-course-detail #contentApp .v49-progress{gap:20px!important;overflow-x:auto!important;scrollbar-width:none!important}
  body.v115-course-detail #contentApp .v49-progress::-webkit-scrollbar{display:none!important}
}

/* ========================================================================== 
   7) STORE CATEGORY — one quiet vertical divider between rail and products.
   JS measures the two real columns and places the hairline at the exact middle
   of their gap, so RTL/LTR and future rail widths cannot put it on the wrong side.
   ========================================================================== */
@media(min-width:761px){
  html body .store-category-layout{position:relative!important}
  html body .store-category-layout::after{
    content:""!important;display:block!important;position:absolute!important;z-index:1!important;
    top:0!important;bottom:0!important;left:var(--emkan-v151-store-divider-x,50%)!important;
    width:1px!important;background:var(--line)!important;pointer-events:none!important;
  }
}
@media(max-width:760px){html body .store-category-layout::after{display:none!important;content:none!important}}

/* ========================================================================== 
   8) ABOUT — vertical spine passes exactly through 7px diamond centres.
   Desktop only; mobile/horizontal variants remain untouched.
   ========================================================================== */
@media(min-width:901px){
  html body .about-main .company-axis{
    position:relative!important;padding-inline-start:22px!important;
  }
  html body .about-main .company-axis::before{
    inset-inline-start:5px!important;width:1px!important;
  }
  html body .about-main .company-axis .practice-button::before{
    inset-inline-start:-20px!important;width:7px!important;height:7px!important;box-sizing:border-box!important;
  }
}

/* ========================================================================== 
   9) ONLY THE THREE APPROVED FOUR-COVER LANDINGS — lower the row slightly.
   Content Creation and every internal page are intentionally excluded.
   ========================================================================== */
@media(min-width:921px){
  html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .category-grid,
  html body:is(.emkan-v142-civil-landing,.emkan-v142-research-landing) .category-grid.category-grid--five,
  html body.emkan-v142-store-landing .store-grid{
    margin-top:16px!important;
  }
}