/* ========================================================================
   Canonical breadcrumb component — the floating white-pill design.
   Markup contract:
     <div class="breadcrumb-modern">
       <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
           <li class="breadcrumb-item"><a href="...">Label</a></li>
           <li class="breadcrumb-item active"><span>Current Page</span></li>
         </ol>
       </nav>
     </div>

   Loaded sitewide (inc/head.php + inc/home_head.php) so every page using
   this markup renders identically, regardless of what other stylesheets
   it does or doesn't load. Consolidated from what used to be three
   independent copies: css/department-theme.css, a page-local override in
   circulars-notices.php, and an orphaned duplicate baked into
   css/dist/main.min.css (a flat gray bar — superseded by this file since
   this loads after main.min.css in the cascade).

   The `.breadcrumb-modern .breadcrumb` rule below uses !important on the
   properties that collide with a legacy rule in css/style.css
   (`.breadcrumb{color:#aaa;padding:19px 0;border-radius:5px !important}`),
   which is still linked directly by a handful of *_/clubs-societies-detail.php
   pages. Two-class specificity beats that rule's one-class selector even
   though both carry !important, so this wins regardless of load order.
   ======================================================================== */

.breadcrumb-modern {
  margin-top: -25px;
  margin-bottom: 40px;
  position: relative;
  z-index: 10;
  text-align: left;
}

.breadcrumb-modern nav {
  background: white;
  display: inline-block;
  padding: 10px 30px;
  border-radius: 50px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.breadcrumb-modern .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  border-radius: 0 !important;
}

.breadcrumb-modern .breadcrumb-item a {
  color: #1E4D8C;
  font-weight: 600;
  text-decoration: none;
}

.breadcrumb-modern .breadcrumb-item.active {
  color: #910029;
  font-weight: 600;
}

.breadcrumb-modern .breadcrumb-item.active span {
  color: #910029;
}

@media (max-width: 768px) {
  nav[aria-label="breadcrumb"] {
    padding: 8px 20px !important;
    font-size: 0.9rem;
  }

  .breadcrumb-modern {
    margin-top: 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  .breadcrumb-modern nav {
    padding: 8px 15px;
    font-size: 0.9rem;
    width: 100%;
    text-align: center;
  }

  .breadcrumb-modern .breadcrumb {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
}

@media (max-width: 576px) {
  nav[aria-label="breadcrumb"] {
    padding: 6px 15px !important;
    font-size: 0.85rem;
  }

  .breadcrumb-modern .breadcrumb-item {
    font-size: 0.85rem;
  }

  .breadcrumb-modern {
    margin-top: -30px;
  }

  .breadcrumb-modern nav {
    padding: 6px 10px;
    font-size: 0.8rem;
    border-radius: 10px;
  }
}

@media (max-width: 400px) {
  nav[aria-label="breadcrumb"] {
    padding: 5px 10px !important;
    font-size: 0.8rem;
  }
}