/* =====================================================================
   DocClix — reusable frontend breadcrumb
   Used on listing/detail pages (doctors, hospitals, clinics, etc.)
   ===================================================================== */
.dc-crumb {
    width: 100%;
    background: transparent;
}
.dc-crumb-inner {
    max-width: 1200px;
    margin: 0 auto;
    /* top offset clears the fixed navbar (68px) */
    padding: 88px 20px 0;
}
.dc-crumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #64748b;
    font-family: 'Lexend', sans-serif;
}
.dc-crumb-item { display: inline-flex; align-items: center; }
.dc-crumb-item a {
    color: #64748b;
    text-decoration: none;
    transition: color .15s ease;
}
.dc-crumb-item a:hover { color: #23939e; text-decoration: underline; }
.dc-crumb-item.is-current { color: #0f172a; font-weight: 600; }
.dc-crumb-sep { color: #cbd5e1; user-select: none; }

/* When a page section follows the breadcrumb, drop its large top offset
   (the breadcrumb already clears the fixed navbar). Scoped to the adjacent
   sibling only, so no other page layout is affected. */
.dc-crumb + .background { padding-top: 16px; }
.dc-crumb + .hero-section { padding-top: 16px; }

@media (max-width: 768px) {
    .dc-crumb-inner { padding: 80px 16px 0; }
    .dc-crumb-list { font-size: 13px; gap: 6px; }
    .dc-crumb + .background { padding-top: 8px; }
    .dc-crumb + .hero-section { padding-top: 8px; }
}