/* =====================================================================
   City Pride School, Moshi — additions on top of the shared City Pride
   theme (style.css + nigdi-theme.css).
   1. Moshi-specific touches
   2. Content compatibility: pages imported from the old website were
      written with Bootstrap classes (rows, columns, tabs, accordions,
      carousels). These rules make that markup look right inside .rich
      without loading Bootstrap.
   ===================================================================== */

/* ------------------------------------------------------ 1. site touches */
.footer-brand.is-auto-light img { filter:brightness(0) invert(1); }
.brand-logo { object-fit:contain; }

.hero-slide { position:relative; }
.moshi-hero-copy { position:absolute; left:0; right:0; bottom:12%; z-index:3; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.45); }
.moshi-hero-copy .hero-title { color:#fff; font-size:clamp(1.6rem, 3.4vw, 3rem); margin:0 0 .4rem; }
.moshi-hero-copy .hero-text { max-width:640px; font-size:1.1rem; margin:0 0 1rem; }
.hero-link-cover { position:absolute; inset:0; z-index:3; }

.award-item { position:relative; }
.award-caption { position:absolute; left:0; right:0; bottom:0; padding:1.6rem .8rem .7rem; font-size:.86rem; font-weight:700;
  color:#fff; background:linear-gradient(transparent, rgba(14,39,69,.82)); text-align:center; line-height:1.3; }
a.leader-card { color:inherit; display:block; }
a.leader-card:hover h3 { text-decoration:underline; text-decoration-color:var(--sun); }

.hub-grid-compact { margin-top:2rem; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.gallery-year { margin:2.2rem 0 1rem; }
.gallery-year:first-of-type { margin-top:.5rem; }
.detail-image { border-radius:var(--r); box-shadow:var(--sh-sm); max-height:520px; width:auto; }
.contact-map { margin-top:1.6rem; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm); }
.contact-map iframe { display:block; width:100%; height:300px; border:0; }
.career-form { margin-top:2.4rem; }
.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.blog-card { background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; display:flex; flex-direction:column; transition:all var(--t); }
.blog-card:hover { transform:translateY(-6px); box-shadow:var(--sh); }
.blog-media img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.blog-body { padding:1.3rem 1.4rem 1.5rem; }
.blog-body h2 { font-size:1.2rem; margin:.4rem 0 .6rem; }
.blog-body h2 a { color:var(--navy); }
.blog-author { display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--ink-faint); }
.avatar.sm { width:28px; height:28px; font-size:.8rem; display:inline-grid; place-items:center; border-radius:50%; background:var(--sky); color:#fff; font-weight:700; }

.search-results { list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:1rem; }
.search-result { background:#fff; border-radius:var(--r); padding:1.1rem 1.4rem; box-shadow:var(--sh-sm); }
.search-result h2 { font-size:1.15rem; margin:.45rem 0 .3rem; }
.search-result p { margin:0 0 .3rem; color:var(--ink-soft); }

.error-box { padding:1rem 0 2rem; }
.error-code { font-family:var(--font-head); font-size:clamp(4rem, 12vw, 8rem); line-height:1; margin:0; color:var(--sky); font-weight:800; }
.error-box .search-page-form { max-width:560px; margin:1.6rem auto; }

.video-embed { position:relative; aspect-ratio:16/9; margin:1.3rem 0; }
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; margin:0; }
.alert > div > ul { margin:.35rem 0 0; }
.alert { flex-direction:row; align-items:flex-start; gap:.7rem; }
.alert > i { margin-top:.2rem; }

/* ------------------------------------------- 2. content compatibility */
.rich .container, .rich .container-fluid { width:auto; max-width:none; padding:0; margin:0; }
.rich .row { display:flex; flex-wrap:wrap; margin:0 -.75rem; }
.rich .row > * { padding:0 .75rem; flex:1 0 0%; min-width:0; max-width:100%; }
.rich .row.g-3 { row-gap:1rem; }
.rich [class*="col-12"] { flex:0 0 100%; }
@media (min-width:768px) {
  .rich .col-md-3 { flex:0 0 25%; max-width:25%; }
  .rich .col-md-4 { flex:0 0 33.333%; max-width:33.333%; }
  .rich .col-md-5 { flex:0 0 41.666%; max-width:41.666%; }
  .rich .col-md-6 { flex:0 0 50%; max-width:50%; }
  .rich .col-md-7 { flex:0 0 58.333%; max-width:58.333%; }
  .rich .col-md-8 { flex:0 0 66.666%; max-width:66.666%; }
  .rich .col-md-9 { flex:0 0 75%; max-width:75%; }
}
@media (min-width:992px) {
  .rich .col-lg-4 { flex:0 0 33.333%; max-width:33.333%; }
  .rich .col-lg-5 { flex:0 0 41.666%; max-width:41.666%; }
  .rich .col-lg-6 { flex:0 0 50%; max-width:50%; }
  .rich .col-lg-7 { flex:0 0 58.333%; max-width:58.333%; }
  .rich .col-lg-8 { flex:0 0 66.666%; max-width:66.666%; }
  .rich .col-lg-12 { flex:0 0 100%; max-width:100%; }
}
@media (max-width:767px) { .rich .row > [class*="col-md"], .rich .row > [class*="col-lg"] { flex:0 0 100%; max-width:100%; } }

.rich img { max-width:100%; height:auto; }
.rich .img-fluid { max-width:100%; height:auto; }
.rich .d-block { display:block; }
.rich .w-100 { width:100%; }
.rich .d-flex { display:flex; flex-wrap:wrap; gap:1rem; }
.rich .flex-column { flex-direction:column; }
.rich .align-items-center { align-items:center; }
.rich .justify-content-center { justify-content:center; }
.rich .text-center { text-align:center; }
.rich .text-justify { text-align:justify; }
.rich .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.rich .mt-3, .rich .my-3 { margin-top:1rem; } .rich .mt-4 { margin-top:1.5rem; } .rich .mt-5 { margin-top:2.2rem; }
.rich .mb-3, .rich .my-3 { margin-bottom:1rem; } .rich .my-2 { margin:.5rem 0; }
.rich .table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.5rem 0; }
.rich .table-responsive table { margin:0; }
.rich table { display:table; }
.rich table td p { margin:0 0 .4em; }
.rich .table-borderless td, .rich .table-borderless th { border:0; }
.rich .table-bordered td, .rich .table-bordered th { border:1px solid var(--line); }
.rich .btn { display:inline-flex; text-decoration:none; }
.rich .btn-warning { background:var(--sun); color:var(--navy); }
.rich .btn-success { background:var(--grass); color:#fff; }
.rich hr { border:0; border-top:2px dashed var(--line); margin:1.6rem 0; }

/* tabs & pills */
.rich .nav { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0 0 1.2rem; }
.rich .nav.flex-column { flex-direction:column; flex-wrap:nowrap; }
.rich .nav li, .rich .nav-item { padding:0; margin:0; }
.rich .nav li::before { display:none; }
.rich .nav-link { display:block; padding:.65rem 1.1rem; border-radius:14px; background:var(--tint); color:var(--navy);
  font-weight:700; text-decoration:none; font-size:.95rem; cursor:pointer; transition:background .2s, color .2s; }
.rich .nav-link:hover { background:var(--sky-soft); }
.rich .nav-link.active { background:var(--sky); color:#fff; box-shadow:0 4px 0 var(--sky-dark); }
.rich .tab-content > .tab-pane { display:none; }
.rich .tab-content > .tab-pane.active { display:block; animation:cpsFade .35s ease; }
@keyframes cpsFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* accordion */
.rich .accordion { display:grid; gap:.7rem; margin:1.2rem 0; }
.rich .accordion-item { background:#fff; border-radius:var(--r); box-shadow:var(--sh-sm); overflow:hidden; }
.rich .accordion-header { margin:0; font-size:1rem; }
.rich .accordion-button { width:100%; text-align:left; border:0; background:var(--tint); padding:1rem 1.2rem; font:inherit;
  font-weight:700; color:var(--navy); cursor:pointer; display:flex; justify-content:space-between; gap:1rem; }
.rich .accordion-button::after { content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900; transition:transform .25s; }
.rich .accordion-button:not(.collapsed)::after { transform:rotate(180deg); }
.rich .accordion-body { padding:1rem 1.2rem; }
.rich .collapse:not(.show) { display:none; }

/* carousel */
.rich .carousel { position:relative; margin:1.2rem 0; border-radius:var(--r); overflow:hidden; }
.rich .carousel-item { display:none; }
.rich .carousel-item.active { display:block; }
.rich .carousel-item img { margin:0; width:100%; border-radius:0; box-shadow:none; }
.rich .carousel-indicators { display:none; }
.rich .carousel-control-prev, .rich .carousel-control-next { position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.9); color:var(--navy); cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--sh-sm); text-decoration:none; }
.rich .carousel-control-prev { left:12px; } .rich .carousel-control-next { right:12px; }
.rich .carousel-control-prev::before { content:"\f053"; font-family:"Font Awesome 6 Free"; font-weight:900; }
.rich .carousel-control-next::before { content:"\f054"; font-family:"Font Awesome 6 Free"; font-weight:900; }
.rich .carousel-control-prev span, .rich .carousel-control-next span { display:none; }

@media (max-width:767px) {
  .rich .ac-tab1, .rich .left-tabs { flex:0 0 100%; max-width:100%; }
  .rich .nav.flex-column { flex-direction:row; flex-wrap:wrap; }
}

.page-layout.is-full { grid-template-columns:minmax(0,1fr); }

/* Phones: give the logo lock-up a little air and keep the affiliation line compact. */
@media (max-width:600px) {
  .site-header .header-inner { padding-top:.5rem; padding-bottom:.45rem; }
  .brand-affiliation { font-size:.72rem; line-height:1.3; margin-top:.15rem; }
}