/**
 * Page Designer — Tab (working) Block Runtime Styles
 * v1.0.0
 *
 * Fully isolated clone of the Tabs runtime CSS. Selectors live under
 * `[data-pd-tabw-uid]` and use the dedicated `pd-blk-tabw-*`
 * namespace so this block never collides with the legacy Tabs block
 * (`pd-blk-tabs-*`) or any other tool. No selector overlap with
 * `pd-blk-tabs`, `pd-tbs-pnl-`, or any vendor `grapesjs-tabs` rule.
 */

[data-pd-tabw-uid].pd-blk-tabw {
    box-sizing: border-box;
    width: 100%;
    padding: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--pd-label-color, inherit);
}

/* ── Tab strip (the row of clickable buttons) ───────────────── */
[data-pd-tabw-uid] > .pd-blk-tabw-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pd-tabw-gap, 6px);
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: stretch;
}

/* Tab buttons */
[data-pd-tabw-uid] .pd-blk-tabw-tab {
    /* v2.9.214 — Default to `inline-block` so text-align (set by the
     * Text-panel alignment buttons) works natively on the tab title.
     * `inline-flex` is only needed when the tab has child elements to
     * align (icon / label wrapper / badge); the :has() rule below
     * switches back to flex in that case. This makes alignment durable
     * across GrapesJS view re-renders (e.g. when tabw.js mirrors the
     * active class on tab click) — no inline-style mirroring needed. */
    display: inline-block;
    gap: 6px;
    padding: var(--pd-tabw-tab-pad-y, 8px) var(--pd-tabw-tab-pad-x, 16px);
    background: var(--pd-tabw-inactive-bg, #f3f4f6); /* v3.7.18 — Tabs > Inactive picker */
    color: var(--pd-tabw-inactive-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Inactive Text Colour */
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
    user-select: none;
    text-decoration: none;
    outline: none;
    font-family: inherit;
}
/* v2.9.214 — Tabs with icon / label-wrapper / badge children need flex
 * to position those siblings; bare-text tabs (the common case) stay
 * inline-block so text-align works without flex-justify gymnastics. */
[data-pd-tabw-uid] .pd-blk-tabw-tab:has(> .pd-blk-tabw-icon),
[data-pd-tabw-uid] .pd-blk-tabw-tab:has(> .pd-blk-tabw-label),
[data-pd-tabw-uid] .pd-blk-tabw-tab:has(> .pd-blk-tabw-badge) {
    display: inline-flex;
    align-items: center;
}
[data-pd-tabw-uid] .pd-blk-tabw-tab:focus-visible {
    box-shadow: 0 0 0 2px var(--pd-tabw-active-bg, #89b4fa);
}
[data-pd-tabw-uid] .pd-blk-tabw-tab:hover {
    background: var(--pd-tabw-hover-bg, #e5e7eb); /* v3.7.18 — Tabs > Hover picker */
    color: var(--pd-tabw-hover-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Hover Text Colour */
}
[data-pd-tabw-uid] .pd-blk-tabw-tab.pd-blk-tabw-tab-active {
    background: var(--pd-tabw-active-bg, #89b4fa);
    color: var(--pd-tabw-active-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Active Text Colour */
}

[data-pd-tabw-uid] .pd-blk-tabw-tab .pd-blk-tabw-icon {
    font-size: 0.95em;
    line-height: 1;
}
[data-pd-tabw-uid] .pd-blk-tabw-tab .pd-blk-tabw-label {
    line-height: 1.25;
    /* v2.9.194 — Multi-line tab labels (mirrors Accordion <summary>):
       Enter inside the editable label inserts a new line that stacks
       vertically inside the pill. The strip's align-items:stretch
       (above) keeps sibling tabs aligned to the tallest pill. */
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    /* v2.9.211 — Let the label fill the tab's main-axis space so
       `text-align` set via the Text-panel alignment buttons actually
       shifts the title text when the user widens a tab beyond its
       content. flex:1 1 auto stays content-sized inside an inline-flex
       (content-width) tab, and grows when the tab is wider (explicit
       width or "full" alignment mode). min-width:0 lets long titles
       wrap rather than block tab from shrinking. */
    flex: 1 1 auto;
    min-width: 0;
}
/* v2.9.211 — Preserve the centered visual that "full" alignment used
 * to give via justify-content. Inline text-align on inner <p>/<div>
 * (set by execCommand) overrides this via higher specificity, so the
 * user can still left/right/justify per-tab. */
[data-pd-tabw-uid][data-pd-tabw-align="full"] .pd-blk-tabw-tab .pd-blk-tabw-label {
    text-align: center;
}
/* v2.9.197 — Allow RTE-inserted block elements (the tab is inline-
   flex, so without flex-wrap children would stay on one row regardless
   of their display value). flex-wrap lets a full-width child break to
   a new row. */
[data-pd-tabw-uid] .pd-blk-tabw-tab {
    flex-wrap: wrap;
}
/* v2.9.212 — When the Text-panel alignment buttons set inline
 * `text-align` on the tab pill (the pill is the editable element for
 * vendor `text` components), the pill is `display: flex` and ignores
 * `text-align` for child positioning. Mirror the inline value into
 * `justify-content` so the visual matches what the user picked. Works
 * for both the canvas AND the published HTML (the pill carries the
 * inline style in both, after the rich-text v2.9.212 sync fix). */
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align: left"],
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align:left"]    { justify-content: flex-start; }
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align: center"],
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align:center"]  { justify-content: center; }
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align: right"],
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align:right"]   { justify-content: flex-end; }
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align: justify"],
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align:justify"] { justify-content: space-between; }
/* RTE may insert <div> or <p> on Enter — render them as full-width
   block rows so each new line stacks vertically inside the pill.
   Covers both editable surfaces: the bare tab (no icon/badge) and
   the inner label span (icon/badge wrapped case). */
[data-pd-tabw-uid] .pd-blk-tabw-tab > div,
[data-pd-tabw-uid] .pd-blk-tabw-tab > p {
    display: block;
    margin: 0;
    padding: 0;
    flex: 0 0 100%;
    max-width: 100%;
}
[data-pd-tabw-uid] .pd-blk-tabw-tab .pd-blk-tabw-label > div,
[data-pd-tabw-uid] .pd-blk-tabw-tab .pd-blk-tabw-label > p {
    display: block;
    margin: 0;
    padding: 0;
}
[data-pd-tabw-uid] .pd-blk-tabw-tab .pd-blk-tabw-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent); /* v3.7.18 — neutral badge surface */
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
[data-pd-tabw-uid] .pd-blk-tabw-tab.pd-blk-tabw-tab-active .pd-blk-tabw-badge {
    background: color-mix(in srgb, currentColor 12%, transparent); /* v3.7.18 — neutral badge surface */
}

/* ── Tab content panels ──────────────────────────────────────── */
[data-pd-tabw-uid] > .pd-blk-tabw-panel {
    padding: var(--pd-tabw-panel-pad, 16px);
    min-height: var(--pd-tabw-panel-min, 120px);
    text-align: var(--pd-tabw-panel-align, left);
    animation: pdBlkTabwFadeIn 0.32s ease both;
}
@keyframes pdBlkTabwFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Slide transition ────────────────────────────────────────── */
[data-pd-tabw-uid][data-pd-tabw-trans="slide"] .pd-blk-tabw-panel {
    animation: pdBlkTabwSlideIn 0.32s ease both;
}
@keyframes pdBlkTabwSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-pd-tabw-uid][data-pd-tabw-trans="none"] .pd-blk-tabw-panel { animation: none; }

/* ── Alignment ───────────────────────────────────────────────── */
[data-pd-tabw-uid][data-pd-tabw-align="left"]   > .pd-blk-tabw-strip { justify-content: flex-start; }
[data-pd-tabw-uid][data-pd-tabw-align="center"] > .pd-blk-tabw-strip { justify-content: center; }
[data-pd-tabw-uid][data-pd-tabw-align="right"]  > .pd-blk-tabw-strip { justify-content: flex-end; }
[data-pd-tabw-uid][data-pd-tabw-align="full"]   > .pd-blk-tabw-strip .pd-blk-tabw-tab { flex: 1 1 0; justify-content: center; }

/* ── Orientation: vertical ───────────────────────────────────── */
[data-pd-tabw-uid][data-pd-tabw-orient="vertical"] {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: stretch;
    gap: 0;
}
[data-pd-tabw-uid][data-pd-tabw-orient="vertical"] > .pd-blk-tabw-strip {
    flex-direction: column;
    align-items: stretch;
    border-right: 1px solid var(--pd-tabw-border-color, color-mix(in srgb, currentColor 15%, transparent));
    padding-right: 8px;
    margin-right: 8px;
}
[data-pd-tabw-uid][data-pd-tabw-orient="vertical"][data-pd-tabw-align="full"] > .pd-blk-tabw-strip .pd-blk-tabw-tab {
    flex: 0 0 auto;
}

/* ── Style presets ───────────────────────────────────────────── */

/* Underline */
[data-pd-tabw-uid][data-pd-tabw-preset="underline"] > .pd-blk-tabw-strip {
    border-bottom: 1px solid var(--pd-tabw-border-color, color-mix(in srgb, currentColor 15%, transparent));
    gap: 0;
}
[data-pd-tabw-uid][data-pd-tabw-preset="underline"] .pd-blk-tabw-tab {
    background: transparent;
    color: var(--pd-tabw-inactive-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Inactive Text Colour */
    border: none;
    border-radius: 0;
    border-bottom: var(--pd-tabw-border-thick, 2px) solid transparent;
    margin-bottom: -1px;
}
[data-pd-tabw-uid][data-pd-tabw-preset="underline"] .pd-blk-tabw-tab:hover {
    background: transparent;
    color: var(--pd-tabw-hover-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Hover Text Colour */
}
[data-pd-tabw-uid][data-pd-tabw-preset="underline"] .pd-blk-tabw-tab.pd-blk-tabw-tab-active {
    background: transparent;
    color: var(--pd-tabw-active-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Active Text Colour */
    border-bottom-color: var(--pd-tabw-border-color, color-mix(in srgb, currentColor 15%, transparent));
}

/* Boxed */
[data-pd-tabw-uid][data-pd-tabw-preset="boxed"] > .pd-blk-tabw-strip {
    gap: 0;
    border-bottom: 1px solid var(--pd-tabw-border-color, color-mix(in srgb, currentColor 15%, transparent));
}
[data-pd-tabw-uid][data-pd-tabw-preset="boxed"] .pd-blk-tabw-tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
}
[data-pd-tabw-uid][data-pd-tabw-preset="boxed"] .pd-blk-tabw-tab.pd-blk-tabw-tab-active {
    background: var(--pd-tabw-active-bg, #89b4fa); /* v3.7.18 — Tabs > Active picker */
    color: var(--pd-tabw-active-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Active Text Colour */
    border-color: var(--pd-tabw-border-color, color-mix(in srgb, currentColor 15%, transparent)); /* v3.7.18 */
    border-bottom-color: transparent;
}

/* Minimal */
[data-pd-tabw-uid][data-pd-tabw-preset="minimal"] .pd-blk-tabw-tab {
    background: transparent;
    border: none;
    padding: 6px 10px;
}
[data-pd-tabw-uid][data-pd-tabw-preset="minimal"] .pd-blk-tabw-tab:hover {
    background: transparent;
    text-decoration: underline;
}
[data-pd-tabw-uid][data-pd-tabw-preset="minimal"] .pd-blk-tabw-tab.pd-blk-tabw-tab-active {
    background: transparent;
    color: var(--pd-tabw-active-bg, var(--pd-link-color, currentColor)); /* v3.7.18 — minimal active accent = Tabs Active colour */
}

/* Vertical-line */
[data-pd-tabw-uid][data-pd-tabw-preset="vertical-line"] .pd-blk-tabw-tab {
    background: transparent;
    border-radius: 0;
    border-left: var(--pd-tabw-border-thick, 2px) solid transparent;
    padding-left: 12px;
    text-align: left;
}
[data-pd-tabw-uid][data-pd-tabw-preset="vertical-line"] .pd-blk-tabw-tab.pd-blk-tabw-tab-active {
    background: transparent;
    color: var(--pd-tabw-active-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Active Text Colour */
    border-left-color: var(--pd-tabw-border-color, color-mix(in srgb, currentColor 15%, transparent));
}

/* Hide non-active panels in editor + runtime */
[data-pd-tabw-uid] .pd-blk-tabw-panel[hidden] { display: none; }

/* ── Persistent block container outline in the editor ─────────────
 * Keep the green block outline visible on the tabw root even when
 * the user has clicked a descendant (a tab, panel body, etc.), so
 * the block boundary is always apparent while editing its content.
 * Solid when any descendant is selected, dashed when only hovered.
 * These supplement the generic `[data-pd-block].gjs-selected/.gjs-hovered`
 * rules in editor.js (which only fire when the root itself has the
 * class) — no `!important` needed since there's no conflict.
 */
[data-pd-block="tabw"]:has(.gjs-selected) {
    outline: 4px solid var(--at-color-border);
    outline-offset: -2px;
}
[data-pd-block="tabw"]:has(.gjs-hovered):not(:has(.gjs-selected)) {
    outline: 4px dashed var(--at-color-border);
    outline-offset: -2px;
}

/* ── Mobile accordion ────────────────────────────────────────── */
@media (max-width: 768px) {
    [data-pd-tabw-uid][data-pd-tabw-mobaccord="1"] {
        display: block;
    }
    [data-pd-tabw-uid][data-pd-tabw-mobaccord="1"] > .pd-blk-tabw-strip {
        display: contents;
    }
    [data-pd-tabw-uid][data-pd-tabw-mobaccord="1"] .pd-blk-tabw-tab {
        display: flex;
        width: 100%;
        border-radius: 6px;
        margin-top: 6px;
        justify-content: space-between;
    }
    [data-pd-tabw-uid][data-pd-tabw-mobaccord="1"] > .pd-blk-tabw-panel[hidden] {
        display: none;
    }
}

/* ── Vertical tabs on small screens ───────────────────────────────
   A vertical (label-column + panel) layout squashes on a phone. When the author
   hasn't opted into the mobile accordion above, drop the vertical grid to a single
   column with the tab strip as a wrapping row on top and the panel below, so it
   reads cleanly. Scoped to vertical + non-accordion only; specificity beats the
   base vertical rules, so no !important. */
@media (max-width: 768px) {
    [data-pd-tabw-uid][data-pd-tabw-orient="vertical"]:not([data-pd-tabw-mobaccord="1"]) {
        display: block;
    }
    [data-pd-tabw-uid][data-pd-tabw-orient="vertical"]:not([data-pd-tabw-mobaccord="1"]) > .pd-blk-tabw-strip {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ── Tabs on a phone: one full-width tab a row ─────────────────────
   Owner, 7 Oct 2026. The strip wraps, but each tab kept its own width, so a
   phone showed two tabs on one row and a short one alone on the next. On a
   small screen every tab now takes the whole row, stacked. The mobile
   accordion above already does this its own way and is left alone. Only the
   tab's share of the row changes: its colours, padding, radius and the text
   alignment set in its panel are untouched. Same specificity as the "full"
   alignment rule and later in the file, so no !important. Phones only (up to
   767px): a tablet held upright is 768px wide and keeps its row of tabs —
   stacked there, each tab measured 716px wide. */
@media (max-width: 767px) {
    [data-pd-tabw-uid]:not([data-pd-tabw-mobaccord="1"]) > .pd-blk-tabw-strip .pd-blk-tabw-tab {
        flex: 1 1 100%;
    }
}

/* ── Tab and panel text that reads on every theme ──────────────────
   Owner, 8 Oct 2026: on a dark site the tab labels and the words under them
   were dark on a dark page. The whole block took its colour from
   --pd-label-color, which the theme sets to the ink that reads ON the active
   tab's fill. That ink is right there and nowhere else:
     - the PANEL has no fill of its own, so it takes the page's text colour;
     - an unselected or hovered tab that IS filled takes the ink the theme
       worked out for that fill (--pd-tabw-inactive-ink / --pd-tabw-hover-ink,
       from pd_wizard_theme_ink_for); a site built before those existed falls
       back to the label ink, exactly as before;
     - a tab with NO fill (the underline, boxed, minimal and vertical-line
       styles when unselected) sits on the page, so it takes the page's text
       colour, and when selected with no fill, the heading colour.
   A filled active tab keeps the label ink, and any colour an owner has picked
   in the Tabs panel (--pd-tabw-*-text) still wins. Same specificity as the
   rules above and later in the file, in an order that matters: no !important. */
[data-pd-tabw-uid].pd-blk-tabw {
    color: var(--pd-general-color, inherit);
}
[data-pd-tabw-uid] .pd-blk-tabw-tab {
    color: var(--pd-tabw-inactive-text, var(--pd-tabw-inactive-ink, var(--pd-label-color, inherit)));
}
[data-pd-tabw-uid][data-pd-tabw-preset="underline"] .pd-blk-tabw-tab,
[data-pd-tabw-uid][data-pd-tabw-preset="vertical-line"] .pd-blk-tabw-tab,
[data-pd-tabw-uid][data-pd-tabw-preset="boxed"] .pd-blk-tabw-tab,
[data-pd-tabw-uid][data-pd-tabw-preset="minimal"] .pd-blk-tabw-tab {
    color: var(--pd-tabw-inactive-text, var(--pd-general-color, inherit));
}
[data-pd-tabw-uid] .pd-blk-tabw-tab:hover {
    color: var(--pd-tabw-hover-text, var(--pd-tabw-hover-ink, var(--pd-label-color, inherit)));
}
/* A hovered tab with NO fill (underline, minimal, boxed) sits on the page, so
   it takes the site's PRIMARY colour, its heading colour — never the label
   ink meant for a filled tab (owner, 21 Oct 2026: Brokora's boxed tabs went
   Volt Lime on the pale page when hovered, unreadable). */
[data-pd-tabw-uid][data-pd-tabw-preset="underline"] .pd-blk-tabw-tab:hover,
[data-pd-tabw-uid][data-pd-tabw-preset="minimal"] .pd-blk-tabw-tab:hover,
[data-pd-tabw-uid][data-pd-tabw-preset="boxed"] .pd-blk-tabw-tab:not(.pd-blk-tabw-tab-active):hover {
    color: var(--pd-tabw-hover-text, var(--pd-header-color, var(--pd-general-color, inherit)));
}
[data-pd-tabw-uid] .pd-blk-tabw-tab.pd-blk-tabw-tab-active,
[data-pd-tabw-uid][data-pd-tabw-preset="boxed"] .pd-blk-tabw-tab.pd-blk-tabw-tab-active {
    color: var(--pd-tabw-active-text, var(--pd-label-color, inherit));
}
[data-pd-tabw-uid][data-pd-tabw-preset="underline"] .pd-blk-tabw-tab.pd-blk-tabw-tab-active,
[data-pd-tabw-uid][data-pd-tabw-preset="vertical-line"] .pd-blk-tabw-tab.pd-blk-tabw-tab-active {
    color: var(--pd-tabw-active-text, var(--pd-header-color, var(--pd-general-color, inherit)));
}
[data-pd-tabw-uid][data-pd-tabw-preset="minimal"] .pd-blk-tabw-tab.pd-blk-tabw-tab-active {
    color: var(--pd-tabw-active-bg, var(--pd-link-color, currentColor));
}

/* ── Theme tab colours never land on a tab with no fill ─────────────
   Owner, 14 Oct 2026: on a light site the selected "underline" tab was
   white on the pale page. The global Settings write the Tabs colours to
   :root as the INK FOR EACH STATE'S FILL (white on a dark active fill). A
   tab state with no fill sits on the page, so for those states the theme's
   value is dropped here and the rules above fall back to the page's own
   colours (heading colour when selected, text colour otherwise).
   Set on the block itself at (0,2,0): a colour picked for THIS block in the
   Tabs panel is written to the block's own id rule (1,0,0) and still wins.
     underline      no fill in any state
     vertical-line  selected and unselected have no fill (hover is filled)
     minimal        unselected and hover have no fill (selected uses its own)
     boxed          unselected and hover have no fill                         */
[data-pd-tabw-uid][data-pd-tabw-preset="underline"] {
    --pd-tabw-active-text: initial;
    --pd-tabw-hover-text: initial;
    --pd-tabw-inactive-text: initial;
}
[data-pd-tabw-uid][data-pd-tabw-preset="vertical-line"] {
    --pd-tabw-active-text: initial;
    --pd-tabw-inactive-text: initial;
}
[data-pd-tabw-uid][data-pd-tabw-preset="minimal"] {
    --pd-tabw-hover-text: initial;
    --pd-tabw-inactive-text: initial;
}
[data-pd-tabw-uid][data-pd-tabw-preset="boxed"] {
    --pd-tabw-inactive-text: initial;
    --pd-tabw-hover-text: initial;   /* boxed has no hover fill either (21 Oct 2026) */
}