/**
 * Component: Clinic Navigation
 * クリニック詳細ページのタブナビゲーション
 */

/* Navigation Container */
.c-clinic-nav-001 {
  border-top: var(--wp--custom--border--width--1) solid
    var(--wp--preset--color--gray-lighter);
  border-bottom: var(--wp--custom--border--width--1) solid
    var(--wp--preset--color--gray-lighter);
}

.c-clinic-nav-001__inner {
  padding: 0 var(--wp--preset--spacing--base);
}

@media (min-width: 768px) {
  .c-clinic-nav-001__inner {
    padding: 0 var(--wp--preset--spacing--lg);
  }
}

/* Navigation List */
.c-clinic-nav-001__list {
  display: flex;
  gap: var(--wp--preset--spacing--base);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .c-clinic-nav-001__list {
    gap: var(--wp--preset--spacing--xl);
  }
}

/* Navigation Item */
.c-clinic-nav-001__item {
  margin: 0;
}

/* Navigation Link */
.c-clinic-nav-001__link {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--base) 0;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--font-weight--medium);
  color: var(--wp--preset--color--gray-dark);
  text-decoration: none;
  border-bottom: var(--wp--custom--border--width--2) solid transparent;
  transition: color var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease),
    border-color var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease),
    opacity var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease);
}

@media (min-width: 768px) {
  .c-clinic-nav-001__link {
    font-size: var(--wp--preset--font-size--base);
    gap: var(--wp--preset--spacing--sm);
  }
}

.c-clinic-nav-001__link:hover {
  color: var(--wp--preset--color--tertiary-dark);
  opacity: 0.8;
}

/* Active State */
.c-clinic-nav-001__link.is-active {
  color: var(--wp--preset--color--tertiary-dark);
  border-bottom-color: var(--wp--preset--color--tertiary);
}

/* Icon */
.c-clinic-nav-001__icon {
  font-size: 2rem;
}

@media (min-width: 768px) {
  .c-clinic-nav-001__icon {
    font-size: 2.4rem;
  }
}

/* Label */
.c-clinic-nav-001__label {
  white-space: nowrap;
}

/* Badge */
.c-clinic-nav-001__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--wp--preset--spacing--xs);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--white);
  background: var(--wp--preset--color--tertiary);
  border-radius: var(--wp--custom--border--radius--full);
  line-height: 1;
}

@media (min-width: 768px) {
  .c-clinic-nav-001__badge {
    min-width: 2.4rem;
    height: 2.4rem;
    font-size: var(--wp--preset--font-size--base);
  }
}

/* Active State - Badge */
.c-clinic-nav-001__link.is-active .c-clinic-nav-001__badge {
  background: var(--wp--preset--color--tertiary-dark);
}