/**
 * Beekom — JOOOL Comparison Table
 * Frontend styles.
 *
 * Desktop: semantic <table> with optional highlighted column (navy bg + accent
 *          text on header, subtle bg on body cells, rounded corners).
 * Mobile : one card per comparison column, each listing all features with their
 *          value for that column. Switch happens via container queries so the
 *          widget responds to its own container width, not the viewport.
 */

.bk-jct {
    container-type: inline-size;
    --bk-jct-hl-radius: 10px;
    --bk-jct-card-radius: 12px;
    --bk-jct-card-row-gap: 18px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.bk-jct *,
.bk-jct *::before,
.bk-jct *::after {
    box-sizing: border-box;
}

/* Desktop ON / mobile OFF by default */
.bk-jct__desktop { display: block; }
.bk-jct__mobile  { display: none; }

/* =========================================================================
   DESKTOP TABLE
   ========================================================================= */

/* Defensive display values — some WP themes and CSS frameworks override
   <table> / <tr> / <td> with display: block for their own responsive
   handling, which would silently break this widget. Force the correct
   display values so we always render as an actual table. */
.bk-jct__table         { display: table; width: 100%; }
.bk-jct__table thead   { display: table-header-group; }
.bk-jct__table tbody   { display: table-row-group; }
.bk-jct__table tr      { display: table-row; }
.bk-jct__table th,
.bk-jct__table td      { display: table-cell; }

.bk-jct__table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background-color: transparent;
}

/* --- Header row --- */

.bk-jct__th {
    padding: 24px 32px;
    font-weight: 400;
    text-align: left;
    vertical-align: middle;
    background-color: transparent;
    color: #B8BCC2;
    border-bottom: 1px solid #E5E7EB;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-style: solid;
    word-break: break-word;
}

/* --- Body cells --- */

.bk-jct__td {
    padding: 22px 32px;
    font-weight: 400;
    text-align: left;
    vertical-align: middle;
    color: #B8BCC2;
    background-color: var(--row-bg, transparent);
    border-top: 1px solid #E5E7EB;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-style: solid;
    word-break: break-word;
}

/* First body row: no top border (header already has bottom border) */
.bk-jct__table tbody tr:first-child .bk-jct__td {
    border-top: 0;
}

/* --- Feature column (first column, contains icon + label) --- */

.bk-jct__td--feature,
.bk-jct__th--feature {
    width: 28%;
}

.bk-jct__td--feature {
    color: #0C1E3E;
    font-weight: 600;
    text-align: left;
}

/* Wrapper INSIDE the cell — NEVER put display:flex directly on <td>/<th>,
   it pulls the cell out of table layout and breaks the whole table. */
.bk-jct__feature-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* --- Icon slot --- */

.bk-jct__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #0C1E3E;
    line-height: 0;
}

.bk-jct__icon i,
.bk-jct__icon svg {
    width: 100%;
    height: 100%;
    color: inherit;
    display: block;
}

/* Only force fill for SVGs that explicitly opt in via fill="currentColor".
   Outline SVGs (fill="none" + stroke="currentColor") stay outline. */
.bk-jct__icon svg [fill="currentColor"],
.bk-jct__icon svg[fill="currentColor"] {
    fill: currentColor;
}

/* Reserve the same space when no icon is present so feature names stay aligned */
.bk-jct__icon--empty {
    visibility: hidden;
}

.bk-jct__feature-name {
    display: inline-block;
    line-height: 1.35;
}

/* --- Highlighted column (desktop) --- */

.bk-jct__th.is-highlighted {
    background-color: #0C1E3E;
    color: #E91E63;
    border-bottom: 0;
    border-radius: var(--bk-jct-hl-radius) var(--bk-jct-hl-radius) 0 0;
}

.bk-jct__td.is-highlighted {
    background-color: #F5F6F8;
    color: #0C1E3E;
    border-top-color: transparent;
}

/* Last row of the highlighted column: round the bottom corners */
.bk-jct__table tbody tr:last-child .bk-jct__td.is-highlighted {
    border-bottom-left-radius: var(--bk-jct-hl-radius);
    border-bottom-right-radius: var(--bk-jct-hl-radius);
}

/* =========================================================================
   MOBILE CARDS
   ========================================================================= */

.bk-jct__mobile {
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.bk-jct__card {
    width: 100%;
    border-radius: var(--bk-jct-card-radius);
    overflow: hidden;
}

.bk-jct__card-header {
    padding: 20px 24px;
    font-weight: 600;
    background-color: #F5F6F8;
    color: #B8BCC2;
}

.bk-jct__card-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: var(--bk-jct-card-row-gap, 18px);
    background-color: #FFFFFF;
}

.bk-jct__card-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bk-jct__card-feature {
    color: #0C1E3E;
    font-weight: 600;
}

.bk-jct__card-value {
    color: #B8BCC2;
    line-height: 1.4;
}

/* Highlighted card */

.bk-jct__card.is-highlighted .bk-jct__card-header {
    background-color: #0C1E3E;
    color: #E91E63;
}

.bk-jct__card.is-highlighted .bk-jct__card-body {
    background-color: #F5F6F8;
}

.bk-jct__card.is-highlighted .bk-jct__card-value {
    color: #0C1E3E;
}

/* =========================================================================
   MOBILE LAYOUT VARIANTS
   ---------------------------------------------------------------------------
   Three toggles driven by classes on .bk-jct:
     .bk-jct--align-center     — centers feature and value text within the card
     .bk-jct--feature-bold     — makes feature names visually dominant
     .bk-jct--layout-inline    — collapses each row to a single line:
                                 "[icon] Feature : value"
   ========================================================================= */

/* --- Stacked, centered --- */

.bk-jct--align-center .bk-jct__card-feature,
.bk-jct--align-center .bk-jct__card-value {
    text-align: center;
}

.bk-jct--align-center .bk-jct__feature-wrap {
    justify-content: center;
}

/* --- Stacked, emphasised feature name --- */
/* Bold rules moved below (see "bold feature fix") for correct specificity. */

/* --- Inline layout ("Feature : value" on one line) --- */

.bk-jct--layout-inline .bk-jct__card-row {
    display: block;
    line-height: 1.5;
}

.bk-jct--layout-inline .bk-jct__card-feature {
    display: inline;
}

.bk-jct--layout-inline .bk-jct__card-feature::after {
    content: ' :';
    color: inherit;
}

.bk-jct--layout-inline .bk-jct__feature-wrap {
    display: inline-flex;
    align-items: baseline;
    vertical-align: baseline;
    gap: 8px;
}

.bk-jct--layout-inline .bk-jct__card-value {
    display: inline;
    margin-left: 0.4em;
}

/* Inline + centered: center the line as a whole */
.bk-jct--layout-inline.bk-jct--align-center .bk-jct__card-row {
    text-align: center;
}

/* =========================================================================
   NO-ICON MODE
   ---------------------------------------------------------------------------
   When a table has no icons in any row, the icon slot is not rendered at all
   (PHP-side). The feature-wrap still keeps its flex layout but its single
   child (the name) sits flush against the cell's left padding, so first-
   column content aligns with the column header.
   ========================================================================= */

/* Nothing to do — the absent markup is the fix. The rule below is kept as
   documentation / safety net in case a future change re-introduces the slot
   for no-icon tables. */
.bk-jct--no-icons .bk-jct__icon { display: none; }

/* =========================================================================
   COLUMN IMAGES
   ---------------------------------------------------------------------------
   Shown in a dedicated bottom row on desktop (one image per column,
   feature column empty) and at the bottom of each card body on mobile.
   ========================================================================= */

.bk-jct__column-image {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Desktop: kill the inherited top border on image row cells so the
   images row doesn't show the value-row separator. */
.bk-jct__images-row .bk-jct__td {
    border-top: 0;
}

/* Mobile card image — sits after the last value row, spans full card width. */
.bk-jct__card-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    padding-top: 8px;
    width: 100%;
}

.bk-jct__card-image-wrap .bk-jct__column-image {
    max-width: 100%;
}

/* =========================================================================
   DEFENSIVE RESETS
   ---------------------------------------------------------------------------
   v1.0.6: a handful of WP themes and Elementor containers add vertical
   margins to block children. Force sane defaults so the widget never
   contributes phantom space below itself.

   v1.0.7: the real phantom-height culprit turned out to be the PARENT
   Elementor container inheriting a `min-height` from an ancestor or from
   Elementor's own base rules. Since `.e-con.e-flex` resolves its
   min-height from `var(--min-height)`, and custom properties inherit by
   default in CSS, a large `--min-height` set on a grandparent container
   propagates down to any descendant `.e-con` that doesn't override it.

   v1.0.8: v1.0.7 only clamped the container when the widget was the
   ONLY child, to stay conservative. In practice, on real-world pages
   the widget is very often a sibling of other widgets (headings,
   buttons, other widgets) and the phantom space still appears.
   We now clamp min-height globally on any container that is a direct
   ancestor of the widget, and we also clamp the inherited `--min-height`
   custom property on the widget itself so the bug is fully neutralized
   from inside the widget out, with zero manual work per page.
   ========================================================================= */

.bk-jct,
.bk-jct__desktop,
.bk-jct__mobile,
.bk-jct__table {
    margin-block-end: 0;
    margin-bottom: 0;
}

/* Some themes inject bottom padding on flex children — cancel it at the
   end of the mobile stack. */
.bk-jct__mobile > :last-child {
    margin-bottom: 0;
}

/*
 * Reset the inherited `--min-height` custom property inside the widget.
 *
 * Elementor declares `min-height: var(--min-height)` on every `.e-con`,
 * and the custom property inherits from ancestor to descendant. If any
 * ancestor container has a non-zero `--min-height` (which happens when
 * the user sets "Hauteur mini" anywhere up the tree, or when Elementor
 * caches a stale value), that value propagates down and causes the
 * widget's wrapper to reserve phantom vertical space.
 *
 * Resetting `--min-height: 0` on the widget wrapper itself breaks the
 * inheritance chain at the right spot: the widget renders at its
 * natural height, while any ancestor container that wanted a min-height
 * for its own layout keeps its value unaffected.
 *
 * v1.0.9: the min-height clamp alone wasn't enough. Elementor also
 * applies `height: 100%` to `.elementor-widget-container` when the
 * widget sits inside a flex container. This means the widget-container
 * stretches to fill whatever vertical space its parent has — and if
 * the parent's height is inflated for any reason (cached layout,
 * stale CSS variable, grid row stretch), the widget wrapper grows with
 * it and reserves the phantom space even when its content is short.
 * We override `height: auto` on our widget's container so its height
 * is driven by the actual rendered content, not by the parent's box.
 */
.elementor-widget-beekom_jooul_comparison_table {
    --min-height: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

.elementor-widget-beekom_jooul_comparison_table > .elementor-widget-container {
    height: auto !important;
    min-height: 0 !important;
}

/*
 * :has() fix — works in all modern browsers (Safari 15.4+, Chrome 105+,
 * Firefox 121+) which covers ~95% of users. Older browsers fall back to
 * the behaviour they had before this rule — same as v1.0.6.
 *
 * We clamp `min-height`, `--min-height` AND `height` on any Elementor
 * flex container that contains our widget, at any depth.
 *
 * v1.0.10: clamping height is required because some pages end up with
 * a concrete `height: XXXXpx` computed on an ancestor container — not
 * a min-height or a CSS variable, but an explicit height. We've seen
 * this come from stale Elementor layout caches and from CSS variables
 * written by other plugins. `height: auto` only removes a floor; it
 * can never shrink a container below its actual content — so forcing
 * it on ancestors of our widget is safe for other widgets sitting
 * inside the same container: they keep their height, the container
 * just shrinks to fit everyone.
 */
@supports selector(:has(*)) {
    .e-con.e-flex:has(.elementor-widget-beekom_jooul_comparison_table) {
        --min-height: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }
}

/* =========================================================================
   INLINE LAYOUT · bold feature fix (v1.0.6)
   ---------------------------------------------------------------------------
   On the inline layout, `.bk-jct__card-feature` is `display: inline`, so
   font-weight on that container applies to the text but NOT to the nested
   `.bk-jct__feature-name` (which had its own font-weight inherited from
   `--e-global-typography-...-font-weight`). Target the name directly to
   make the bold toggle work in inline mode.

   !important is intentional: the toggle is an explicit user-facing choice
   and needs to override the typography control's font-weight, which has
   higher specificity via the `{{WRAPPER}}` prefix (.elementor-element
   + .elementor-element-XXX).
   ========================================================================= */

.bk-jct--feature-bold .bk-jct__feature-name {
    font-weight: 700 !important;
}

.bk-jct--feature-bold .bk-jct__card-value {
    font-weight: 400 !important;
}

/* =========================================================================
   BREAKPOINT SWAPS
   ---------------------------------------------------------------------------
   Two layers, both based on the breakpoint class emitted by the widget:

   1) Viewport media queries (primary, universally supported): switch on
      viewport width. Works even if container queries misfire for any reason.
   2) Container queries (enhancement): switch when the widget's OWN container
      is narrow (useful if the widget sits in a sidebar or narrow column).

   Whichever condition hits first wins.
   ========================================================================= */

/* --- 1) Viewport media queries --- */

@media (max-width: 640px) {
    .bk-jct.bk-bp-640 .bk-jct__desktop { display: none; }
    .bk-jct.bk-bp-640 .bk-jct__mobile  { display: flex; }
}

@media (max-width: 768px) {
    .bk-jct.bk-bp-768 .bk-jct__desktop { display: none; }
    .bk-jct.bk-bp-768 .bk-jct__mobile  { display: flex; }
}

@media (max-width: 900px) {
    .bk-jct.bk-bp-900 .bk-jct__desktop { display: none; }
    .bk-jct.bk-bp-900 .bk-jct__mobile  { display: flex; }
}

@media (max-width: 1100px) {
    .bk-jct.bk-bp-1100 .bk-jct__desktop { display: none; }
    .bk-jct.bk-bp-1100 .bk-jct__mobile  { display: flex; }
}

/* --- 2) Container queries --- */

@container (max-width: 640px) {
    .bk-jct.bk-bp-640 .bk-jct__desktop { display: none; }
    .bk-jct.bk-bp-640 .bk-jct__mobile  { display: flex; }
}

@container (max-width: 768px) {
    .bk-jct.bk-bp-768 .bk-jct__desktop { display: none; }
    .bk-jct.bk-bp-768 .bk-jct__mobile  { display: flex; }
}

@container (max-width: 900px) {
    .bk-jct.bk-bp-900 .bk-jct__desktop { display: none; }
    .bk-jct.bk-bp-900 .bk-jct__mobile  { display: flex; }
}

@container (max-width: 1100px) {
    .bk-jct.bk-bp-1100 .bk-jct__desktop { display: none; }
    .bk-jct.bk-bp-1100 .bk-jct__mobile  { display: flex; }
}