/* ============================================================
   12D – Tabs Widget
   File: assets/css/tabs.css
   ============================================================

   Purpose
   -------
   Provides the base structural styling for the 12D Tabs widget.

   This file is responsible for the core layout and behavior-related
   presentation of the tabs interface, while leaving most visual design
   choices to Elementor controls and CSS custom properties.

   Scope
   -----
   This stylesheet covers:
   - the tabs wrapper
   - the tab list (navigation row)
   - individual tab buttons
   - the panels wrapper
   - individual tab panels
   - optional widget image output
   - mobile stacked-tab behavior

   Styling philosophy
   ------------------
   - Keep this file mostly structural and portable
   - Avoid hardcoded theme-specific design choices
   - Let Elementor Style controls and CSS variables define the final look
   - Use safe fallback values so the widget works before custom styling

   Responsive behavior
   -------------------
   On screens up to 880px, tabs stack vertically to avoid awkward
   wrapping patterns such as 2+1 tab layouts.

   Notes
   -----
   - Gap handling is intentionally authoritative so a configured gap of 0
     truly results in no spacing.
   - Panel visuals belong primarily to the shared panel wrapper rather than
     to individual panels.
   ============================================================ */

:root {
  /* ============================================================
     D12 Tabs structural defaults
     ------------------------------------------------------------
     Structural fallbacks that do not depend on Elementor Kit-scoped
     Global Color variables.
     ============================================================ */

  /* Surface */
  --d12-tabs-bg: #ffffff;

  /* Radius */
  --d12-tabs-radius: var(--site-radius-lg, 10px);

  /* Spacing */
  --d12-tabs-gap: 6px;
  --d12-tabs-tablist-margin-bottom: 12px;
}

/* Wrapper */
.d12-tabs {
  width: 100%;

  /*
   * Component color defaults.
   *
   * Elementor Global Colors are resolved here, inside the Elementor Kit
   * inheritance scope, rather than at :root.
   */
  --d12-tabs-border: var(--e-global-color-secondary, currentColor);

  /*
   * Semantic state palette.
   *
   * Accent Hover and White are provided by the framework-level semantic
   * color variables emitted within Elementor's Kit/body scope.
   */
  --d12-tabs-tab-text: var(--e-global-color-text, currentColor);
  --d12-tabs-tab-bg: transparent;

  /*
   * Border geometry is shared across states.
   * Only border color changes between Normal, Hover, Focus, and Selected.
   */
  --d12-tabs-tab-border-style: solid;
  --d12-tabs-tab-border-width: 1px;
  --d12-tabs-tab-border: transparent;

  /* Shadows are opt-in and independently configured for each state. */
  --d12-tabs-tab-shadow-normal: none;
  --d12-tabs-tab-shadow-hover: none;
  --d12-tabs-tab-shadow-focus: none;
  --d12-tabs-tab-shadow-active: none;

  /* Hover */
  --d12-tabs-tab-text-hover: var(--d12-white, #ffffff);
  --d12-tabs-tab-bg-hover: var(
    --d12-accent-hover,
    var(--e-global-color-accent, currentColor)
  );
  --d12-tabs-tab-border-hover: transparent;

  /* Focus */
  --d12-tabs-tab-text-focus: var(
    --d12-accent-hover,
    var(--e-global-color-accent, currentColor)
  );
  --d12-tabs-tab-bg-focus: transparent;
  --d12-tabs-tab-border-focus: transparent;
  --d12-tabs-focus-indicator-color: var(
    --d12-accent-hover,
    var(--e-global-color-accent, currentColor)
  );

  /* Selected — historical "active" variables are retained internally */
  --d12-tabs-tab-text-active: var(--d12-white, #ffffff);
  --d12-tabs-tab-bg-active: var(--e-global-color-accent, currentColor);
  --d12-tabs-tab-border-active: transparent;
}

/* =========================================================
   Tab list (the bar with tabs)
   ========================================================= */
.d12-tabs__tablist {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;

  /* IMPORTANT: gap must be authoritative so "0" is truly 0 */
  gap: var(--d12-tabs-gap, 6px);
  row-gap: var(--d12-tabs-gap, 6px);
  column-gap: var(--d12-tabs-gap, 6px);

  margin: 0 0 var(--d12-tabs-tablist-margin-bottom, 12px) 0;
  padding: 0;
  list-style: none;
}

/* =========================================================
   Spacing reset so gap can truly be 0
   (kills theme/browser margins and any adjacent-button spacing)
   ========================================================= */
.d12-tabs__tab {
  box-sizing: border-box;
  margin: 0 !important;
}

.d12-tabs__tab + .d12-tabs__tab {
  margin-left: 0 !important;
}

/* Individual tab button (base structural defaults) */
button.d12-tabs__tab {
  appearance: none;

  /*
   * Border geometry remains constant across all interaction and
   * semantic states. State selectors change border-color only.
   */
  border-style: var(--d12-tabs-tab-border-style, solid);
  border-width: var(--d12-tabs-tab-border-width, 1px);
  border-color: var(--d12-tabs-tab-border, transparent);

  background: var(--d12-tabs-tab-bg);
  color: var(--d12-tabs-tab-text);

  padding: 10px 14px;
  border-radius: 999px;

  cursor: pointer;
  box-shadow: var(--d12-tabs-tab-shadow-normal, none);
  font-weight: 600;
  line-height: 1.1;
}

/*
 * ------------------------------------------------------------
 * Tab interaction states
 * ------------------------------------------------------------
 *
 * Temporary interaction states and persistent semantic selection
 * are intentionally kept separate.
 */

/* Hover — unselected tabs only */
.elementor
  .elementor-widget-d12_tabs
  button.d12-tabs__tab:hover:not([aria-selected="true"]) {
  color: var(--d12-tabs-tab-text-hover);
  background: var(--d12-tabs-tab-bg-hover);
  border-color: var(--d12-tabs-tab-border-hover);
  box-shadow: var(--d12-tabs-tab-shadow-hover, none);
}

/* Focus — unselected tabs only */
.elementor
  .elementor-widget-d12_tabs
  button.d12-tabs__tab:focus-visible:not([aria-selected="true"]) {
  color: var(--d12-tabs-tab-text-focus);
  background: var(--d12-tabs-tab-bg-focus);
  border-color: var(--d12-tabs-tab-border-focus);
  box-shadow: var(--d12-tabs-tab-shadow-focus, none);
}

/* Selected — persistent semantic state */
.elementor
  .elementor-widget-d12_tabs
  button.d12-tabs__tab[aria-selected="true"],
.elementor
  .elementor-widget-d12_tabs
  button.d12-tabs__tab[aria-selected="true"]:hover {
  color: var(--d12-tabs-tab-text-active);
  background: var(--d12-tabs-tab-bg-active);
  border-color: var(--d12-tabs-tab-border-active);
  box-shadow: var(--d12-tabs-tab-shadow-active, none);
}

/*
 * Focus takes temporary visual precedence over Selected when the
 * selected tab itself owns keyboard-visible focus.
 */
.elementor
  .elementor-widget-d12_tabs
  button.d12-tabs__tab[aria-selected="true"]:focus-visible {
  color: var(--d12-tabs-tab-text-focus);
  background: var(--d12-tabs-tab-bg-focus);
  border-color: var(--d12-tabs-tab-border-focus);
  box-shadow: var(--d12-tabs-tab-shadow-focus, none);
}

/*
 * Keyboard Focus Indicator.
 *
 * This is deliberately separate from the Focus-state border.
 * It identifies the actual independently focusable tab button and
 * remains visible even when the Focus border color is transparent.
 */
.elementor .elementor-widget-d12_tabs button.d12-tabs__tab:focus-visible {
  outline: 2px solid var(--d12-tabs-focus-indicator-color, currentColor);
  outline-offset: 2px;
  position: relative;
  z-index: 2;
}

/*
 * A hovered inactive tab may extend beyond its normal box when using
 * shared effects such as Grow, Pop, or Pulse. Raise that tab above
 * adjacent siblings so stacking does not depend on DOM order.
 */
.d12-tabs__tab.d12-hover-target:hover:not(.is-active) {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Panels wrapper (THIS is the visible “frame”)
   ========================================================= */
.d12-tabs__panels {
  border: 1px solid var(--d12-tabs-border);
  border-radius: var(--d12-tabs-radius);
  background: var(--d12-tabs-bg);
  overflow: hidden;
}

/* Panels: keep them neutral; styling lives on the wrapper */
.d12-tabs__panel {
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.d12-tabs__panel[hidden] {
  display: none !important;
}

/* Optional: image inserted via the widget's Image control */
.d12-tabs__custom-image {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =========================================================
   Mobile layout: stack tabs vertically (prevents 2+1 wrap)
   Applies to:
   - Mobile Portrait (<= 767px)
   - Mobile Landscape (768–880px)  [optional but recommended]
   ========================================================= */

@media (max-width: 880px) {
  /* Make the tab bar a vertical stack */
  .d12-tabs__tablist {
    flex-direction: column;
    align-items: stretch;
  }

  /* Each tab becomes full-width */
  .d12-tabs__tab {
    width: 100%;
    flex: 0 0 auto;
  }

  /* If "Join Selected Tab With Panel" is enabled, the -1px overlap
   looks weird in stacked mode. Neutralize it on mobile. */
  .d12-tabs--join-yes .d12-tabs__tab {
    margin-bottom: 0 !important;
  }

  .d12-tabs--join-yes .d12-tabs__tab.is-active {
    border-bottom-color: var(--d12-tabs-border) !important;
  }
}

/* End of file tabs.css */