/**
 * @file
 * Local tasks (tabs) styling for Aotearoa theme.
 */

/* ==========================================================================
   Tabs Container
   ========================================================================== */

.tabs {
  margin-block: var(--sp4);
}

.tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid var(--neutral-200);
}

/* ==========================================================================
   Tab Item
   ========================================================================== */

.tabs li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp1-5) var(--sp3);
  font-family: var(--font-sans);
  font-size: var(--body-m-size);
  font-weight: 500;
  color: var(--neutral-600);
  text-decoration: none;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.tabs li a:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tabs li a:focus-visible {
  outline: var(--focus-ring-style) var(--focus-ring-width) var(--primary);
  outline-offset: -2px;
}

/* ==========================================================================
   Active Tab
   ========================================================================== */

.tabs li a.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* ==========================================================================
   Local Tasks Block (wrapper)
   ========================================================================== */

#block-aotearoa-local-tasks {
  margin-block: var(--sp4);
}

#block-aotearoa-local-tasks > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid var(--neutral-200);
}

#block-aotearoa-local-tasks > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp1-5) var(--sp3);
  font-family: var(--font-sans);
  font-size: var(--body-m-size);
  font-weight: 500;
  color: var(--neutral-600);
  text-decoration: none;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

#block-aotearoa-local-tasks > ul > li > a:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

#block-aotearoa-local-tasks > ul > li > a.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (width < 768px) {
  .tabs ul,
  #block-aotearoa-local-tasks > ul {
    gap: 0;
  }

  .tabs li a,
  #block-aotearoa-local-tasks > ul > li > a {
    padding: var(--sp1) var(--sp2);
    font-size: var(--body-s-size);
  }
}