/* MoPoCo Tabs - frontend styles (classic tab look) */

.mopoco-tabs {
  width: 100%;
  /* Local design tokens using WP presets with fallbacks */
  --mpt-gap: var(--wp--preset--spacing--20, 10px);
  --mpt-pad: var(--wp--preset--spacing--40, 30px);
  --mpt-pad-small: var(--wp--preset--spacing--30, 20px);
  --mpt-radius: 10px;
  --mpt-border-color: var(--wp--preset--color--accent-5, #DBDBDB);
  --mpt-border: 1px solid var(--mpt-border-color);
  --mpt-bg: var(--wp--preset--color--white, #ffffff);
  --mpt-text: var(--wp--preset--color--contrast, #3B3B3B);
  --mpt-accent: var(--wp--preset--color--accent-2, #650DD4);
  --mpt-accent-weak: var(--wp--preset--color--accent-1, #F5EDFF);
  --mpt-font-family: var(--wp--preset--font-family--manrope, Manrope, sans-serif);
  --mpt-font-size: var(--wp--preset--font-size--large, 1.25rem);
}

/* Tabs bar */
.mopoco-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mpt-gap);
  padding-bottom: 0; /* no gap to panel */
  margin-bottom: 0; /* no gap to panel */
  border-bottom: 0; /* classic seamless connection */
}

/* Tab buttons with rounded top corners */
.mopoco-tab-button {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  border: 1px solid var(--mpt-border-color);
  background: var(--mpt-accent-weak);
  color: var(--mpt-text);
  padding: calc(var(--mpt-pad-small) * 0.65) calc(var(--mpt-pad) * 0.9);
  font-size: var(--mpt-font-size);
  font-family: var(--mpt-font-family);
  font-weight: 700;
  line-height: 1.2;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
  border-bottom-color: var(--mpt-accent); /* let panel border show under inactive tabs */
}

.mopoco-tab-button:hover {
  border-color: var(--mpt-accent);
}

/* Active/selected tab */
.mopoco-tab-button[aria-selected="true"] {
  background: var(--mpt-bg); /* same as content */
  color: var(--mpt-text);
  border-color: var(--mpt-accent);
  box-shadow: none;
  z-index: 2; /* sit above panel border */
}

/* Remove the seam between active tab and panel */
.mopoco-tab-button[aria-selected="true"] {
  /* visually connect to panel by hiding bottom border against panel bg */
  border-bottom-color: var(--mpt-bg);
}

/* Improve focus visibility: simulate outline with box-shadow, no bottom side */
.mopoco-tab-button:focus, .mopoco-tab-button:focus-visible {
  outline: none;
  z-index: 3;
}
.mopoco-tab-button:focus-visible::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  bottom: 0;
  border: 2px solid var(--mpt-accent);
  border-bottom: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  pointer-events: none;
}

/* Panels wrapper should overlap the tabs by 1px to remove any gap */
.mopoco-tabs-panels {
  margin-top: -1px; /* overlap tabs */
}

.mopoco-tab-panel {
  margin: 0;
  padding: var(--mpt-pad);
  background: var(--mpt-bg);
  border: 1px solid var(--mpt-accent); /* same color as active tab border/hover */
  border-radius: 0px; /* slight rounding for container */
}

/* Hide data blocks when using Tabs */
.mopoco-tabs-data-hidden { display: none !important; }

/* Transcript typographic enhancements (frontend) */
.wp-block-mopoco-tabs-transcript.transcript,
.mopoco-tab-panel .wp-block-mopoco-tabs-transcript.transcript {
  color: var(--wp--preset--color--contrast, inherit);
}

/* vertical rhythm */
.wp-block-mopoco-tabs-transcript.transcript p {
  line-height: 1.7;
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--30, 1em);
}

/* Chapter headings inside transcript */
.wp-block-mopoco-tabs-transcript.transcript h3.chapter {
  margin: var(--wp--preset--spacing--50, 2em) 0 var(--wp--preset--spacing--20, .75em) 0;
  padding-top: var(--wp--preset--spacing--10, .25em);
  font-size: var(--wp--preset--font-size--x-large, 1.375rem);
  line-height: 1.2;
  border-bottom: 1px solid var(--wp--preset--color--neutral-300, rgba(0,0,0,.08));
  color: var(--wp--preset--color--foreground, currentColor);
}

/* Speaker label */
.wp-block-mopoco-tabs-transcript.transcript h4.speaker {
  margin: var(--wp--preset--spacing--20, .75em) 0 var(--wp--preset--spacing--10, .25em) 0;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--medium, 1rem);
  color: var(--wp--preset--color--primary, currentColor);
}

/* If a paragraph follows a speaker, keep them tight */
.wp-block-mopoco-tabs-transcript.transcript h4.speaker + p { margin-top: 0; }

/* Subtle panel-like look for transcript body when outside theme provides none */
.wp-block-mopoco-tabs-transcript.transcript {
  background: var(--wp--preset--color--background, transparent);
  border-radius: 8px;
}