/* =============================================================
   Wellness Mama – Drupal 11 Breadcrumb CSS
   Centered, serif font, teal linked crumbs, » separator
   ============================================================= */

/* ── CSS Custom Properties ────────────────────────────────── */
:root {
  --wm-color-primary:  #0f766e;   /* teal green – linked crumbs  */
  --wm-color-contrast: #0a0a0a;   /* near-black – current crumb  */
  --wm-color-base:     #ffffff;

  --wm-font-freight:   Oswald, sans-serif;
  --wm-font-outfit:    Oswald, sans-serif;

  --wm-font-size-tiny: 16px;

  --wm-fw-regular:     400;

  --wm-lh-medium:      1.5;

  --wm-spacing-xs:     20px;
}

/* ── Breadcrumb Block Wrapper ────────────────────────────── */
#block-slimglowdr-proj-theme-breadcrumbs,
.block-system-breadcrumb-block {
  width:      100%;
  text-align: center;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(15, 118, 110, 0.18);
  padding: 7px 7px 11px 7px;
  border-top: 1px solid rgba(15, 118, 110, 0.18);
  margin-top: 25px;
}

/* ── Hide h2 (visually-hidden already, but belt-and-braces) ── */
.breadcrumb #system-breadcrumb,
.breadcrumb h2.visually-hidden {
  border:     0;
  clip:       rect(0 0 0 0);
  height:     1px;
  margin:    -1px;
  overflow:   hidden;
  padding:    0;
  position:   absolute;
  width:      1px;
  white-space: nowrap;
}

/* ── Ordered List ─────────────────────────────────────────── */
.breadcrumb__list {
  display:         inline-flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  list-style:      none;
  margin:          0;
  padding:         0;
  gap:             0;
}

/* ── Each Crumb Item ──────────────────────────────────────── */
.breadcrumb__item {
  display:     inline-flex;
  align-items: center;
  font-family: var(--wm-font-freight);
  font-size:   var(--wm-font-size-tiny);   /* 16px */
  font-weight: var(--wm-fw-regular);
  color:       var(--wm-color-contrast);
  line-height: var(--wm-lh-medium);
}

/* ── » Separator between items ────────────────────────────── */
.breadcrumb__item + .breadcrumb__item::before {
  content:      " » ";
  color:        var(--wm-color-contrast);
  font-family:  var(--wm-font-freight);
  font-size:    var(--wm-font-size-tiny);
  margin:       0 4px;
  white-space:  pre;
  opacity:      0.75;
}

/* ── Linked Crumbs (not the current/last one) ─────────────── */
.breadcrumb__item .breadcrumb__link {
  font-family:           var(--wm-font-freight);
  font-size:             var(--wm-font-size-tiny);
  font-weight:           var(--wm-fw-regular);
  color:                 var(--wm-color-primary);    /* teal */
  text-decoration:       underline;
  text-decoration-color: var(--wm-color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  line-height:           var(--wm-lh-medium);
  transition:            color 0.2s ease, text-decoration-color 0.2s ease;
  white-space:           nowrap;
}

.breadcrumb__item .breadcrumb__link:hover,
.breadcrumb__item .breadcrumb__link:focus {
  color:                 var(--wm-color-contrast);
  text-decoration-color: var(--wm-color-contrast);
  outline:               none;
}

.breadcrumb__item .breadcrumb__link:focus-visible {
  outline:        2px solid var(--wm-color-primary);
  outline-offset: 2px;
  border-radius:  2px;
}

/* ── Current page crumb (last item – no link) ─────────────── */
.breadcrumb__item:last-child {
  color:       var(--wm-color-contrast);
  white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .breadcrumb__list {
    justify-content: flex-start;
    text-align:      left;
  }

  #block-slimglowdr-proj-theme-breadcrumbs,
  .block-system-breadcrumb-block {
    text-align: left;
  }

  .breadcrumb__item {
    font-size: 14px;
  }

  .breadcrumb__item .breadcrumb__link {
    font-size: 14px;
  }
}