/* ============================================================
   R31.20 — HOMEPAGE STRUCTURAL CLEANUP
   Fixes actual visual collision seen in screenshot:
   "صفحه اصلیدرباره ما..." etc.
   ============================================================ */

/* Main header: give brand, nav and tools real independent columns. */
body.r319-root-home .r21p5-header{
  display:grid!important;
  grid-template-columns:minmax(205px,245px) minmax(0,1fr) max-content!important;
  align-items:center!important;
  gap:12px!important;
  height:auto!important;
  min-height:66px!important;
  padding:8px 12px!important;
  overflow:visible!important;
}

body.r319-root-home .r21p5-brand{
  min-width:0!important;
  width:auto!important;
  max-width:245px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}

body.r319-root-home .r21p5-brand img{
  flex:0 0 auto!important;
}

body.r319-root-home .r21p5-brand span{
  min-width:0!important;
}

body.r319-root-home .r21p5-brand b,
body.r319-root-home .r21p5-brand small{
  display:block!important;
  white-space:normal!important;
}

/* Critical fix: every top navigation label gets its own visible space. */
body.r319-root-home .r21p5-header nav{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:6px 10px!important;
  margin:0!important;
  padding:0 4px!important;
}

body.r319-root-home .r21p5-header nav a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;

  margin:0!important;
  padding:7px 8px!important;

  min-height:34px!important;

  border-radius:9px!important;

  white-space:nowrap!important;

  font-size:10.5px!important;
  line-height:1.5!important;

  color:#dceaf4!important;
  text-decoration:none!important;
}

body.r319-root-home .r21p5-header nav a:hover{
  background:rgba(44,145,211,.13)!important;
  color:#fff!important;
}

body.r319-root-home .r21p5-header nav a.active{
  color:#f1cc73!important;
  background:rgba(227,187,97,.08)!important;
}

body.r319-root-home .r21p5-header-tools{
  min-width:0!important;
  width:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
}

body.r319-root-home .r21p5-header-tools .portal-pill{
  white-space:nowrap!important;
  padding:7px 9px!important;
  font-size:9.5px!important;
}

/* If an older r312 side navigation still exists, do NOT show the second generated nav. */
.r312-side-nav ~ .r319-home-nav{
  display:none!important;
}

/* Normalize the canonical rail nav if old r312 wrapper exists. */
.r312-side-nav{
  display:grid!important;
  gap:6px!important;
}

.r312-side-nav a{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:43px!important;
  padding:8px 10px!important;
  white-space:nowrap!important;
}

/* Registration: keep one status + one actionable route set; hide the duplicate verbose block. */
body.r319-root-home .registration-quick-links{
  margin:0 0 14px!important;
}

body.r319-root-home #temporaryRegistration{
  display:none!important;
}

/* Keep the registration status clear and visually meaningful. */
#r319RegistrationStatus{
  margin-top:0!important;
}
#r319RegistrationStatus[data-state="open"]{
  border-color:rgba(47,200,155,.38)!important;
}
#r319RegistrationStatus[data-state="closed"]{
  border-color:rgba(232,166,79,.38)!important;
}
#r319RegistrationStatus[data-state="error"]{
  border-color:rgba(239,111,114,.42)!important;
}

/* Reduce vertical bloat and establish a consistent rhythm. */
body.r319-root-home .r21p5-hero,
body.r319-root-home #r319RegistrationStatus,
body.r319-root-home .r21p5-role-wrap,
body.r319-root-home .registration-quick-links,
body.r319-root-home .r21p5-services,
body.r319-root-home .r21p15-home-grid,
body.r319-root-home .r21p5-why,
body.r319-root-home .r21p5-system-highlights{
  margin-bottom:16px!important;
}

/* Role cards: balanced desktop layout and less unnecessary vertical length. */
body.r319-root-home .r21p5-role-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}

body.r319-root-home .r21p5-role-card{
  min-height:198px!important;
}

/* Make services visible and uniform without excessive height. */
body.r319-root-home .r21p5-services{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:8px!important;
}

body.r319-root-home .r21p5-services a{
  min-width:0!important;
  min-height:98px!important;
  padding:11px!important;
  border-radius:15px!important;
}

/* News / about blocks remain dark and readable. */
body.r319-root-home .r21p15-news-table>header,
body.r319-root-home .r21p15-school-events-head,
body.r319-root-home .r21p15-news-row,
body.r319-root-home .r21p15-news-table .r21p5-news-list{
  color:#eef7fd!important;
}

/* Consistent footer link spacing so labels never appear concatenated. */
body.r319-root-home .footer-links>div{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px 14px!important;
}

body.r319-root-home .footer-links a{
  display:inline-flex!important;
  padding:4px 2px!important;
  white-space:nowrap!important;
}

/* Tablet */
@media(max-width:1180px){
  body.r319-root-home .r21p5-header{
    grid-template-columns:minmax(190px,230px) minmax(0,1fr) max-content!important;
  }

  body.r319-root-home .r21p5-header nav{
    gap:5px 7px!important;
  }

  body.r319-root-home .r21p5-header nav a{
    padding:6px!important;
    font-size:9.5px!important;
  }

  body.r319-root-home .r21p5-services{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Mobile: header becomes two-row and navigation scrolls rather than collides. */
@media(max-width:900px){
  body.r319-root-home .r21p5-header{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
  }

  body.r319-root-home .r21p5-brand{
    max-width:none!important;
  }

  body.r319-root-home .r21p5-header nav{
    grid-column:1/-1!important;
    order:3!important;

    display:flex!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;

    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;

    gap:8px!important;
    padding:4px 1px 2px!important;

    scrollbar-width:thin!important;
  }

  body.r319-root-home .r21p5-header nav a{
    flex:0 0 auto!important;
    padding:7px 10px!important;
    font-size:10px!important;
  }

  body.r319-root-home .r21p5-role-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.r319-root-home .r21p5-services{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:520px){
  body.r319-root-home .r21p5-role-grid{
    grid-template-columns:1fr!important;
  }

  body.r319-root-home .r21p5-services{
    grid-template-columns:1fr!important;
  }
}