/* ============================================================
   components.css
   Styles for the shared header/footer components and the inner
   "page banner" used on parenting.html, about.html, teacher.html
   and activities.html. Loaded after style.css / color style CSS
   so it can safely fine-tune things.
============================================================= */

/* ---------- Header / Nav active state ---------- */
.site-nav li a {
   position: relative;
}
.site-nav li.active a {
   font-weight: 800;
}
.site-nav li.active a:after {
   content: "";
   position: absolute;
   left: 20px;
   right: 20px;
   bottom: 8px;
   height: 3px;
   border-radius: 3px;
   background: currentColor;
   opacity: 0.85;
}
.navbar-custom.navbar-scrolled {
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* ---------- Inner page banner (for non-home pages) ---------- */
.inner-page-banner {
   position: relative;
   padding: 95px 0 0;
   text-align: center;
   background: none;
   overflow: hidden;
}
.inner-page-banner .container {
   position: relative;
   z-index: 2;
}
.inner-page-banner h1 {
   font-family: 'Alegreya Sans', sans-serif;
   font-weight: 900;
   font-size: 42px;
   margin: 0 0 15px;
}
.inner-page-banner .breadcrumb {
   background: rgba(0, 0, 0, 0.08);
   margin: 0 auto;
}
.inner-page-banner .breadcrumb li + li:before {
   content: "\203A";
   padding: 0 8px;
   color: inherit;
}
.inner-page-banner .breadcrumb a {
   color: inherit;
   font-weight: 700;
}
.inner-page-banner .breadcrumb .active {
   opacity: 0.7;
}

/* Small decorative floating image, reuses existing site art */
.inner-page-banner .bg-float {
   display: none;
}

@media (max-width: 767px) {
   .inner-page-banner {
      padding: 150px 0 50px;
   }
   .inner-page-banner h1 {
      font-size: 30px;
   }
   .inner-page-banner .bg-float {
      display: none;
   }
}

/* ---------- Placeholder skeleton while components load ---------- */
#site-header:empty {
   height: 90px;
}

@media (min-width: 768px) {
   .navbar-custom .site-nav {
      position: relative;
      left: -100px;
   }
}

/* Contact page - keep title clear of centered logo */
#contact {
    padding-top: 110px;
}

#contact .section-heading {
    margin-bottom: 90px;
}