/**
 * @file
 * Visual styles for tabs with mobile dropdown support.
 */

/* CSS Custom Properties for tabs */
:root {
  --tabs-height: 2.75rem;
  --tabs-padding-inline: 1rem;
  --tabs-active-border-size: 4px;
  --tabs-highlight-color: var(--em3-primary-color, #007bff);
  --tabs-text-color: var(--em3-text-color, #495057);
  --tabs-text-color-active: var(--em3-heading-color, #212529);
  --tabs-font-size: 0.875rem;
  --tabs-background-color: var(--em3-background-secondary, #f8f9fa);
  --tabs-background-color-hover: var(--em3-background-color, #e9ecef);
  --tabs-border-width: 1px;
  --tabs-border-color: var(--em3-border-color, #dee2e6);
  --tabs-transition-duration: 0.2s;
}

/* Tabs wrapper */
.tabs-wrapper {
  margin-bottom: 1.5rem;
}

/* Tabs container */
.tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .tabs {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Individual tab item */
.tabs__tab {
  display: none;
  margin: 0;
  margin-bottom: calc(-1 * var(--tabs-border-width));
}

.tabs__tab.is-active {
  display: flex;
}

/* Show tabs when JavaScript disabled */
html:not(.js) .tabs__tab {
  display: flex;
}

/* Show tabs when expanded */
.tabs.is-expanded .tabs__tab {
  display: flex;
}

/* Secondary tabs always expanded */
.tabs--secondary .tabs__tab {
  display: block;
}

@media (min-width: 768px) {
  .tabs--secondary .tabs__tab {
    display: flex;
  }
}

/* Show all tabs on desktop */
@media (min-width: 768px) {
  .tabs__tab {
    display: flex;
    margin-bottom: 0;
    margin-left: calc(-1 * var(--tabs-border-width));
  }
}

/* Tab links */
.tabs__tab a,
.tabs a {
  display: flex;
  flex-grow: 1;
  align-items: center;
  height: var(--tabs-height);
  padding: 0 var(--tabs-padding-inline);
  transition: background-color var(--tabs-transition-duration);
  text-decoration: none;
  color: var(--tabs-text-color);
  border: var(--tabs-border-width) solid var(--tabs-border-color);
  background-color: var(--tabs-background-color);
  font-size: var(--tabs-font-size);
}

.tabs__tab a:hover,
.tabs a:hover {
  color: var(--tabs-text-color-active);
  background-color: var(--tabs-background-color-hover);
}

.tabs__tab a:focus,
.tabs a:focus {
  position: relative;
  outline: solid 3px var(--tabs-highlight-color);
  outline-offset: -3px;
}

.tabs__tab a.is-active,
.tabs a.is-active {
  position: relative;
  color: var(--tabs-text-color-active);
  font-weight: 600;
}

/* Active indicator - vertical line on left for mobile */
.tabs__tab a.is-active::after,
.tabs a.is-active::after {
  position: absolute;
  top: calc(-1 * var(--tabs-border-width));
  left: calc(-1 * var(--tabs-border-width));
  height: calc(100% + var(--tabs-border-width) * 2);
  content: "";
  border-left: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
}

/* Active indicator - horizontal line on bottom for desktop */
@media (min-width: 768px) {
  .tabs__tab a.is-active::after,
  .tabs a.is-active::after {
    top: auto;
    bottom: calc(-1 * var(--tabs-border-width));
    left: calc(-1 * var(--tabs-border-width));
    width: calc(100% + 2 * var(--tabs-border-width));
    height: 0;
    border-top: var(--tabs-active-border-size) solid var(--tabs-highlight-color);
    border-left: 0;
  }
}

/* Secondary tab links - no background on desktop */
@media (min-width: 768px) {
  .tabs--secondary .tabs__tab a,
  .tabs--secondary a {
    border-color: transparent;
    background-color: transparent;
  }
}

/* Trigger button (hamburger menu for mobile) */
.tabs__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tabs-height);
  margin: 0;
  margin-left: calc(-1 * var(--tabs-border-width));
  padding: 0;
  cursor: pointer;
  border: solid var(--tabs-border-width) var(--tabs-border-color);
  background-color: var(--tabs-background-color);
}

.tabs__trigger:hover {
  background-color: var(--tabs-background-color-hover);
}

.tabs__trigger:focus {
  position: relative;
  border-color: var(--tabs-highlight-color);
  outline: none;
}

/* Hide trigger when JavaScript is disabled */
html:not(.js) .tabs__trigger {
  display: none;
}

/* Hide trigger on desktop */
@media (min-width: 768px) {
  .tabs__trigger {
    display: none;
  }
}

/* Trigger icon (three lines / hamburger) */
.tabs__trigger-icon {
  position: relative;
  display: block;
  width: 1rem;
  height: 10px;
  margin-top: -2px;
}

.tabs__trigger-icon > span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration);
  border-top: solid 2px var(--tabs-highlight-color);
}

.tabs__trigger-icon > span:nth-child(1) {
  top: 0;
}

.tabs__trigger-icon > span:nth-child(2) {
  top: calc(50% + 1px);
}

.tabs__trigger-icon > span:nth-child(3) {
  top: calc(100% + 2px);
}

/* Animated X when expanded */
.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(1) {
  top: calc(50% + 1px);
  transform: rotate(45deg);
}

.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(2) {
  opacity: 0;
}

.tabs__trigger[aria-expanded="true"] .tabs__trigger-icon > span:nth-child(3) {
  top: calc(50% + 1px);
  transform: rotate(-45deg);
}

/* Hide contextual links on mobile to avoid conflict with tabs trigger */
@media (max-width: 767px) {
  .contextual-region > .contextual,
  [data-contextual-id],
  .contextual {
    display: none !important;
  }
}

/* Larger tap target for mobile */
@media (max-width: 767px) {
  .tabs__trigger {
    width: 3rem;
    min-height: var(--tabs-height);
  }

  .tabs__trigger-icon {
    width: 1.25rem;
    height: 12px;
  }

  /* Make the active tab take full width with trigger */
  .tabs__tab.is-active {
    display: flex;
    width: 100%;
  }

  .tabs__tab.is-active a {
    flex: 1;
  }
}