/* ============================================================
   Celeste Tabbed Container — sc-tabbed-container.css
   ============================================================ */

/* --- CSS Custom Property Defaults --------------------------------- */
.celeste_tabbed_container-wrapper {
  --tab-min-width:            120px;
  --tab-nav-gap:              20px;
  --tab-border-width:         1px;
  --tab-color-text-active:    inherit;
  --tab-color-border:         currentColor;
  --tab-color-content-border: currentColor;
  --tab-color-content-bg:     transparent;
  --tab-content-padding:      0px;
  --tab-t-line-height:        normal;
  --tab-t-transform:          none;
  --tab-t-color:              currentColor;
  --tab-t-font:               var(--h3-font-family);
  --tab-t-weight:             var(--h3-font-weight, 700);
  --tab-t-size:               var(--h3-size-fluid, clamp(1.25rem, -4.14px + 4.31vw, 2.5rem));
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* --- Nav ------------------------------------------------------- */
.ctc-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tab-min-width), 1fr));
  gap: var(--tab-nav-gap);
}

/* Nav alignment — data-attr driven */
.celeste_tabbed_container-wrapper[data-nav-align="center"] .ctc-nav { justify-content: center; }
.celeste_tabbed_container-wrapper[data-nav-align="right"]  .ctc-nav { justify-content: end; }
/* stretch: auto-fit grid handles this natively */

/* Labels mode — tab appearance driven by CSS vars (not button mode <a class="btn">) */
.celeste_tabbed_container-wrapper[data-nav-style="labels"] .ctc-nav [role="tab"] {
  font-family: var(--tab-t-font);
  font-weight: var(--tab-t-weight);
  font-size: var(--tab-t-size);
  line-height: var(--tab-t-line-height);
  text-transform: var(--tab-t-transform);
  color: var(--tab-t-color);
  border-color: var(--tab-color-border);
  cursor: pointer;
  background: transparent;
}
.celeste_tabbed_container-wrapper[data-nav-style="labels"] .ctc-nav [role="tab"].is-active,
.celeste_tabbed_container-wrapper[data-nav-style="labels"] .ctc-nav [role="tab"][aria-selected="true"] {
  color: var(--tab-color-text-active);
}

/* Border rules apply to labels mode only */
.celeste_tabbed_container-wrapper:not([data-nav-style="buttons"])[data-border-layout="bottom"] .ctc-nav [role="tab"] {
  border-bottom: var(--tab-border-width) solid var(--tab-color-border);
}
.celeste_tabbed_container-wrapper:not([data-nav-style="buttons"])[data-border-layout="top"] .ctc-nav [role="tab"] {
  border-top: var(--tab-border-width) solid var(--tab-color-border);
}
.celeste_tabbed_container-wrapper:not([data-nav-style="buttons"])[data-border-layout="all"] .ctc-nav [role="tab"] {
  border: var(--tab-border-width) solid var(--tab-color-border);
}
.celeste_tabbed_container-wrapper:not([data-nav-style="buttons"])[data-border-layout="separators"] .ctc-nav [role="tab"] + [role="tab"] {
  border-left: var(--tab-border-width) solid var(--tab-color-border);
}

/* --- Content area ---------------------------------------------- */
.ctc-content {
  background: var(--tab-color-content-bg);
  border: 1px solid var(--tab-color-content-border);
  padding: var(--tab-content-padding);
}

/* --- Desktop Pane Stack (Zero CLS) ----------------------------- */
@media (min-width: 768px) {
  .ctc-content {
    display: grid;
  }
  .ctc-pane {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .ctc-pane.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    pointer-events: auto;
  }
  .ctc-mob-toggle {
    display: none;
  }
}

/* --- Mobile Accordion (<= 767px) ------------------------------- */
@media (max-width: 767px) {
  .ctc-nav {
    display: none;
  }
  .ctc-content {
    display: flex;
    flex-direction: column;
  }
  .ctc-pane {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.3s ease;
  }
  .ctc-pane.is-active {
    grid-template-rows: 1fr;
  }
  .ctc-pane-inner {
    min-height: 0;
    display: grid;
  }

  /* Mobile label borders — mirror desktop data-border-layout rules for .ctc-mob-toggle */
  .celeste_tabbed_container-wrapper:not([data-nav-style="buttons"])[data-border-layout="bottom"] .ctc-mob-toggle {
    border-bottom: var(--tab-border-width) solid var(--tab-color-border);
  }
  .celeste_tabbed_container-wrapper:not([data-nav-style="buttons"])[data-border-layout="top"] .ctc-mob-toggle {
    border-top: var(--tab-border-width) solid var(--tab-color-border);
  }
  .celeste_tabbed_container-wrapper:not([data-nav-style="buttons"])[data-border-layout="all"] .ctc-mob-toggle {
    border: var(--tab-border-width) solid var(--tab-color-border);
  }
  .celeste_tabbed_container-wrapper:not([data-nav-style="buttons"])[data-border-layout="separators"] .ctc-mob-toggle + .ctc-mob-toggle {
    border-top: var(--tab-border-width) solid var(--tab-color-border);
  }

  /* Labels mode only — reset styles for plain toggle button */
  .celeste_tabbed_container-wrapper[data-nav-style="labels"] .ctc-mob-toggle {
    font-family: var(--tab-t-font);
    font-weight: var(--tab-t-weight);
    font-size: var(--tab-t-size);
    line-height: var(--tab-t-line-height);
    text-transform: var(--tab-t-transform);
    color: var(--tab-t-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-left: none;
    border-right: none;
    padding: 10px 0;
    text-align: left;
    margin-bottom: 10px;
  }
  .celeste_tabbed_container-wrapper[data-nav-style="labels"] .ctc-mob-toggle[aria-expanded="true"] {
    color: var(--tab-color-text-active);
  }

  /* Button mode: layout for full-width theme button toggle (width set inline in PHP) */
  .celeste_tabbed_container-wrapper[data-nav-style="buttons"] .ctc-mob-toggle.btn {
    display: flex;
    align-items: center;
    margin-bottom:10px;
  }
}