/* Preview stylesheet for the homepage layout and visual refinements. */
body.r319-root-home {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
  padding: 18px !important;
}

body.r319-root-home > .r20-themebar {
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: min(1250px, 100%) !important;
  margin: 0 auto !important;
}

body.r319-root-home > .r312-home-shell {
  display: grid !important;
  grid-row: 2 !important;
  grid-column: 1 !important;
  grid-template-columns: 250px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  width: min(1250px, 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}

body.r319-root-home > .r312-home-shell > .r312-home-side {
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.r319-root-home > .r312-home-shell > .r312-home-main {
  grid-row: 1 !important;
  grid-column: 2 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.r319-root-home > .mnp-support-footer {
  grid-row: 3 !important;
  grid-column: 1 !important;
  width: min(1250px, 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}

@media (max-width: 760px) {
  body.r319-root-home {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 8px !important;
  }

  body.r319-root-home > .r312-home-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  body.r319-root-home > .r312-home-shell > .r312-home-side,
  body.r319-root-home > .r312-home-shell > .r312-home-main {
    grid-row: auto !important;
    grid-column: 1 !important;
  }

  /* The main header repeats this navigation; keep the useful quick links. */
  body.r319-root-home .r303-brand-lockup,
  body.r319-root-home .r312-side-nav {
    display: none !important;
  }

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

  body.r319-root-home .r319-home-nav a {
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 7px !important;
    white-space: normal !important;
    justify-content: center !important;
  }

  body.r319-root-home > .r20-themebar,
  body.r319-root-home > .mnp-support-footer {
    width: 100% !important;
  }
}

@media (min-width: 361px) and (max-width: 760px) {
  body.r319-root-home .r319-home-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Increase the homepage focal image without cropping or changing its source. */
body.r319-root-home .r312-hero,
body.r319-root-home .r312-hero-media {
  height: auto !important;
  min-height: 0 !important;
}

body.r319-root-home .r312-hero-media img {
  display: block !important;
  width: 92% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
  margin-inline: auto !important;
}

/* Replace the muted event ribbon with the site's existing navy and gold. */
body.r319-root-home > .r20-themebar {
  min-height: 54px !important;
  border: 1px solid rgba(226, 193, 126, .62) !important;
  border-radius: 16px !important;
  background: linear-gradient(112deg, #0a3452 0%, #12556c 55%, #123d56 100%) !important;
  box-shadow: 0 12px 26px rgba(5, 27, 44, .24), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  color: #fff !important;
}

body.r319-root-home > .r20-themebar > b {
  border: 1px solid rgba(226, 193, 126, .34) !important;
  border-radius: 999px !important;
  background: rgba(238, 213, 159, .15) !important;
  color: #fff !important;
}

/* Taller photos and a clearer raised edge for school role cards. */
body.r319-root-home .r21p5-role-card {
  min-height: 222px !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 9px 0 #031a2a, 0 23px 36px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

body.r319-root-home .r21p5-role-card img,
body.r319-root-home .r21p5-role-card.family .family-card-visual {
  height: 132px !important;
  max-height: 132px !important;
}

body.r319-root-home .r21p5-role-card h3 {
  color: #fff !important;
}

body.r319-root-home .r21p5-role-card p {
  color: #b8cddd !important;
}

/* Carry the raised-card treatment into portal menus and dashboard shortcuts. */
.portal-card,
.quick-access-grid button,
.dashboard-grid > *,
.stats-grid > *,
.account-quick-grid button,
.kpi-grid .kpi {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 rgba(10, 45, 73, .20), 0 22px 36px rgba(8, 34, 56, .16), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.side-nav button,
.nav-cluster-items button {
  box-shadow: 0 3px 0 rgba(4, 24, 40, .14), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

@media (hover: hover) {
  body.r319-root-home .r21p5-role-card:hover,
  .portal-card:hover,
  .quick-access-grid button:hover,
  .dashboard-grid > *:hover,
  .stats-grid > *:hover,
  .account-quick-grid button:hover,
  .kpi-grid .kpi:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 12px 0 rgba(10, 45, 73, .18), 0 31px 46px rgba(8, 34, 56, .23), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  }

  .side-nav button:hover,
  .nav-cluster-items button:hover {
    transform: translateX(-3px) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .15) !important;
  }
}

@media (max-width: 760px) {
  body.r319-root-home .r21p5-role-card {
    min-height: 214px !important;
  }

  body.r319-root-home .r21p5-role-card img,
  body.r319-root-home .r21p5-role-card.family .family-card-visual {
    height: 120px !important;
    max-height: 120px !important;
  }

  .portal-card,
  .quick-access-grid button,
  .dashboard-grid > *,
  .stats-grid > *,
  .account-quick-grid button,
  .kpi-grid .kpi {
    transform: translateY(-1px);
    box-shadow: 0 5px 0 rgba(10, 45, 73, .16), 0 14px 24px rgba(8, 34, 56, .14) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.r319-root-home .r21p5-role-card,
  .portal-card,
  .quick-access-grid button,
  .dashboard-grid > *,
  .stats-grid > *,
  .account-quick-grid button,
  .kpi-grid .kpi,
  .side-nav button,
  .nav-cluster-items button {
    transition: none !important;
  }
}

/* R32.5: consistent rounded frames and a structured hero motto. */
body.r319-root-home .r312-hero,
body.r319-root-home .r312-hero-media {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}

body.r319-root-home .r312-hero-media {
  background: #061a2b !important;
}

body.r319-root-home .r312-hero {
  border: 1px solid rgba(77, 171, 229, .28) !important;
  box-shadow: 0 20px 44px rgba(5, 23, 38, .20) !important;
}

body.r319-root-home .r312-hero-media img {
  border-radius: 20px !important;
}

body.r319-root-home .r312-hero-media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(6, 26, 43, .42) 0%, rgba(6, 26, 43, .22) 48%, transparent 82%);
  pointer-events: none;
}

body.r319-root-home .r321-hero-tagline {
  position: absolute;
  z-index: 2;
  left: clamp(22px, 4vw, 42px);
  top: 50%;
  display: grid;
  gap: 3px;
  width: 36%;
  box-sizing: border-box;
  padding: 10px 12px 48px;
  border: 1px solid rgba(226, 193, 126, .24);
  border-radius: 16px;
  background: rgba(4, 22, 35, .95);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(5px);
  direction: rtl;
  text-align: right;
  transform: translateY(-50%);
  text-shadow: 0 3px 16px rgba(0, 0, 0, .45);
  pointer-events: none;
}

body.r319-root-home .r321-hero-tagline span:first-child {
  color: #f6f9fc;
  font-size: clamp(20px, 2.35vw, 30px);
  font-weight: 800;
  line-height: 1.45;
}

body.r319-root-home .r321-hero-tagline span:last-child {
  color: #efd184;
  font-size: clamp(24px, 3.1vw, 39px);
  font-weight: 900;
  line-height: 1.35;
}

body.r319-root-home .r321-hero-tagline::after {
  content: "";
  width: 42px;
  height: 3px;
  margin-top: 9px;
  border-radius: 99px;
  background: #e9c36e;
}

body.r319-root-home .hero-copy {
  padding: clamp(14px, 1.8vw, 22px) !important;
  border: 1px solid rgba(226, 193, 126, .32) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(5, 24, 40, .94), rgba(8, 35, 55, .88)) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  backdrop-filter: blur(10px);
}

body.r319-root-home .hero-copy h1 {
  font-size: clamp(20px, 1.9vw, 27px) !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}

body.r319-root-home .hero-copy h2 {
  font-size: clamp(15px, 1.45vw, 20px) !important;
  line-height: 1.5 !important;
}

body.r319-root-home .hero-copy p {
  font-size: clamp(10px, .9vw, 12px) !important;
  line-height: 1.8 !important;
}

body.r319-root-home .r312-info-card,
body.r319-root-home .r21p5-news,
body.r319-root-home .r31-selected-gallery,
body.r319-root-home #r319RegistrationStatus,
body.r319-root-home .r21p5-services,
body.r319-root-home .r21p15-psych-card,
body.r319-root-home .r21p5-school-story,
body.r319-root-home .r21p5-why,
body.r319-root-home .r21p5-system-highlights article {
  border-radius: 20px !important;
}

body.r319-root-home .r21p5-role-card,
body.r319-root-home .r312-info-card,
body.r319-root-home .r21p5-news,
body.r319-root-home .r31-selected-gallery,
body.r319-root-home .r21p5-services,
body.r319-root-home .r21p15-psych-card,
body.r319-root-home .r21p5-school-story,
body.r319-root-home .r21p5-why,
body.r319-root-home .r21p5-system-highlights article {
  overflow: hidden !important;
}

body.r319-root-home #dailyOccasionBar,
body.r319-root-home .registration-quick-links > a,
body.r319-root-home .r21p5-services a {
  border-radius: 16px !important;
}

body.r319-root-home img:not([src*="icon-192"]):not(.mnp-support-logo) {
  border-radius: 14px !important;
}

body.r319-root-home img[src*="icon-192"] {
  border-radius: 12px !important;
}

body.r319-root-home .r312-hero-media img {
  border-radius: 20px !important;
}

/* Shared dashboard, parent, and portal frames use one comfortable radius. */
.panel,
.page-toolbar,
.archive-panel,
.quick-access-panel,
.account-launcher,
.portal-card,
.dashboard-grid > *,
.stats-grid > *,
.page .card,
.student-grid2 > section,
.assessment-card,
.exam-card-ready,
.exam-card-locked,
.parent-link-grid > div,
.security-cards > * {
  border-radius: 20px !important;
}

.portal-card img,
.panel img:not([src*="icon"]):not([class*="logo"]),
.student-card img:not([src*="icon"]),
.assessment-card img:not([src*="icon"]),
.student-grid2 img:not([src*="icon"]),
.role-login img:not([src*="icon"]),
.auth-shell img:not([src*="icon"]) {
  border-radius: 14px !important;
}

.portal-card h2,
.panel h2,
.panel h3,
.page-toolbar h2,
.page-toolbar h3 {
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.quick-access-grid button b,
.quick-access-grid button small,
.account-quick-grid button b,
.side-nav button b,
.nav-cluster-items button b {
  overflow-wrap: anywhere;
  line-height: 1.55;
}

@media (max-width: 760px) {
  body.r319-root-home .r312-hero {
    display: flex !important;
    flex-direction: column !important;
  }

  body.r319-root-home .r312-hero-copy-host {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 10px !important;
  }

  body.r319-root-home .hero-copy {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.r319-root-home .r312-hero,
  body.r319-root-home .r312-hero-media {
    border-radius: 18px !important;
  }

  body.r319-root-home .r312-hero-media::after {
    background: linear-gradient(90deg, rgba(6, 26, 43, .44) 0%, rgba(6, 26, 43, .25) 50%, transparent 86%);
  }

  body.r319-root-home .r321-hero-tagline {
    left: 15px;
    width: 48%;
    padding: 8px 10px 40px;
    border-radius: 14px;
  }

  body.r319-root-home .r321-hero-tagline span:first-child {
    font-size: clamp(15px, 4.2vw, 18px);
  }

  body.r319-root-home .r321-hero-tagline span:last-child {
    font-size: clamp(18px, 5vw, 22px);
  }

  body.r319-root-home .hero-copy {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  body.r319-root-home .hero-copy h1 {
    font-size: clamp(19px, 5.5vw, 24px) !important;
  }

  body.r319-root-home .hero-copy h2 {
    font-size: clamp(14px, 4vw, 17px) !important;
  }
}