/* Hero Breadcrumb Block Frontend Styles - Following Design System */

.hero-breadcrumb {
  /* Background and layout - Figma specs */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align content to the left */
  justify-content: flex-end; /* Align content to the bottom */
  padding: 5rem;
  width: 100%;
  min-height: 250px; /* Reduced height for breadcrumb focus */
  position: relative;
}

.hero-breadcrumb .breadcrumb-content-wrapper {
  background-color: var(--color-green-950);
  padding: 1.5rem 1.75rem; /* Equivalent to py-6 px-7 */
  display: inline-flex;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.hero-breadcrumb .breadcrumb-nav {
  /* Wrapper for the breadcrumb elements */
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* Equivalent to gap-1 */
  align-items: flex-start;
}

.hero-breadcrumb .breadcrumb-trail {
  /* Breadcrumb trail (Home / Parent /) */
  font-family: var(--font-body, "Azo Sans");
  font-weight: 400;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem; /* leading-tight */
  text-transform: uppercase;
  color: var(--color-yellow-200, #FBEB8F);
}

.hero-breadcrumb .breadcrumb-trail a {
  color: inherit;
  text-decoration: none;
  transition: text-decoration 0.2s ease;
}

.hero-breadcrumb .breadcrumb-trail a:hover {
  text-decoration: underline;
}

.hero-breadcrumb .current-page-heading {
  /* Current page title (H1) */
  font-family: var(--font-heading, "Sora");
  font-weight: var(--font-weight-extrabold, 800);
  font-size: 1.5rem; /* text-2xl */
  line-height: 2rem; /* leading-normal */
  text-transform: uppercase;
  color: var(--color-yellow-200, #FBEB8F);
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-breadcrumb {
    padding: 3rem 1.5rem;
    min-height: 200px;
  }
}

@media (max-width: 480px) {
  .hero-breadcrumb {
    padding: 2rem 1rem;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-breadcrumb * {
    transition: none !important;
    animation: none !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .hero-breadcrumb .content-container {
    border-width: 2px;
  }
  
  .hero-breadcrumb .breadcrumb-text,
  .hero-breadcrumb .main-heading {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }
}

/* Focus states for accessibility */
.hero-breadcrumb .main-heading:focus {
  outline: 2px solid var(--color-blue-focus, #4F85FD);
  outline-offset: 2px;
  border-radius: 2px;
}