/* ===========================================================================
   Header / navigation overrides for the Blazor front-end.

   front/css/SchoolCMS.Web.style.css already carries the whole mega-menu design
   (.mega-*, .panel-*, .mobile-acc-*, .site-navbar, .brand-logo, .btn-cta,
   .nav-flag) copied over from the static build. Only three things stop it
   applying here, and this file is the delta for exactly those:

     1. The static build wraps the header in a <site-header> custom element and
        styles it BY ELEMENT NAME (style.css:30). The Blazor layout renders
        <header class="site-header"> instead, so those two rules never match.
        They are restated below as a class selector.
     2. The Blazor layout puts Bootstrap's own chrome on the nav
        (bg-white / border-bottom / shadow-sm), which paints over the dark
        .site-navbar background.
     3. The CMS emits every published page as a sibling <li>, so the raw
        server-rendered nav is a wall of ~110 links. It is hidden until
        SchoolCMS.Web.menu.js has swapped in the real header.

   Nothing else belongs in here — the design itself stays in style.css and
   responsive.css so this does not become a second copy of it.
   =========================================================================== */

/* --- 1. <site-header> element rules, restated for the Blazor markup -------- */
header.site-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: top 0.3s ease;
}

header.site-header.scrolled {
  top: 10px;
}

/* .sticky-top from the layout sets the same property; keep them from fighting. */
header.site-header.sticky-top {
  position: sticky;
  top: 0;
}

header.site-header.sticky-top.scrolled {
  top: 10px;
}

/* --- 2. Strip the Bootstrap chrome the layout adds to the navbar ----------- */
/* bg-white / border-bottom / shadow-sm are utility classes and therefore beat
   .site-navbar on specificity ties, so these need !important to win back. */
header.site-header .navbar.site-navbar {
  background: var(--nav-bg) !important;
  border-bottom: 0 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  padding: 10px;
}

header.site-header .navbar.site-navbar.scrolled {
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
  
}

/* --- 3. Suppress the flat server-rendered nav until the script runs -------- */
/* If the script never runs (JS error, blocked file) the keyframe reveals the
   original nav after 2s rather than leaving the site with no navigation. */
@keyframes schoolcms-menu-fallback-reveal {
  to {
    visibility: visible;
  }
}

header.site-header:not(.menu-ready) > nav,
header.st-header:not(.menu-ready) > * {
  visibility: hidden;
  animation: schoolcms-menu-fallback-reveal 0s linear 2s forwards;
}

/* The header layout page (SchoolHeader + SchoolNav blocks) renders
   <header class="st-header">; keep its unbuilt flat list from pushing the page
   down while it waits for the script. */
header.st-header:not(.menu-ready) {
  max-height: 80px;
  overflow: hidden;
  background: var(--nav-bg);
}

/* --- 4. Menu icons -------------------------------------------------------- */
/* The nav's labels and hrefs come from the CMS (MenuItems), so the script no
   longer knows which glyph belongs to a link — it emits no <i> at all. Icons
   are attached here instead, keyed by the href the CMS produced.

   Each rule only sets --mi; the two ::before rules below turn that into a
   glyph. An href with no rule falls back to the dot, so a link added in the
   admin panel shows a neutral icon rather than a blank slot or a broken box.

   Codes are Bootstrap Icons v1.11 (front/css/bootstrap-icons.css). To find one:
   grep -o '\.bi-NAME::before{content:"[^"]*"}' front/css/bootstrap-icons.css

   The declarations mirror .panel-link i / .mega-cat i in style.css — that is
   where the sizing was designed; changing it there means changing it here. */
.panel-link::before,
.mega-cat::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  content: var(--mi, "\f309");
  transition: color 0.18s ease;
}

.panel-link::before {
  flex: 0 0 22px;
  text-align: center;
  font-size: 1.3rem;
  color: #3d3d3d;
}

.mega-cat::before {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: #4a4a4a;
}

.panel-link:hover::before,
.panel-link.active::before,
.mega-cat:hover::before,
.mega-cat.active::before {
  color: var(--mega-blue);
}

/* --- 5. The href -> glyph map --------------------------------------------- */
.panel-link[href="/about"]{--mi:"\f431"}
.panel-link[href="/why-us"]{--mi:"\f4b6"}
.panel-link[href="/our-process"]{--mi:"\f2ee"}
.panel-link[href="/life-at-its"]{--mi:"\f4d0"}
.panel-link[href="/blog"]{--mi:"\f444"}
.panel-link[href="/faqs"]{--mi:"\f505"}
.panel-link[href="/news"]{--mi:"\f4a3"}
.panel-link[href="/contact"]{--mi:"\f24a"}
.panel-link[href="/partner-with-us"]{--mi:"\f1cc"}
.panel-link[href="/career"]{--mi:"\f4dd"}
.panel-link[href="/ecommerce-marketplace"]{--mi:"\f543"}
.panel-link[href="/fintech"]{--mi:"\f632"}
.panel-link[href="/healthcare"]{--mi:"\f76f"}
.panel-link[href="/logistics-transport"]{--mi:"\f5ea"}
.panel-link[href="/travel-hospitality"]{--mi:"\f7cd"}
.panel-link[href="/media-entertainment"]{--mi:"\f3c3"}
.panel-link[href="/education"]{--mi:"\f6fe"}
.panel-link[href="/legal"]{--mi:"\f62e"}
.panel-link[href="/real-estate"]{--mi:"\f1dd"}
.panel-link[href="/blockchain"]{--mi:"\f635"}
.panel-link[href="/broker"]{--mi:"\f673"}
.panel-link[href="/fitness"]{--mi:"\f66b"}
.panel-link[href="/sports"]{--mi:"\f5e7"}
.panel-link[href="/manufacturing"]{--mi:"\f3e5"}
.panel-link[href="/fashion-lifestyle"]{--mi:"\f409"}
.panel-link[href="/food-beverage"]{--mi:"\f7eb"}
.mega-cat[data-cat="forex"]{--mi:"\f673"}
.mega-cat[data-cat="blockchain"]{--mi:"\f685"}
.mega-cat[data-cat="nft"]{--mi:"\f41d"}
.mega-cat[data-cat="metaverse"]{--mi:"\f16d"}
.mega-cat[data-cat="app"]{--mi:"\f4e7"}
.mega-cat[data-cat="ai"]{--mi:"\f2d6"}
.mega-cat[data-cat="design"]{--mi:"\f4b1"}
.mega-cat[data-cat="marketing"]{--mi:"\f484"}
.mega-cat[data-cat="other"]{--mi:"\f3f9"}