/**
 * Copyright © IDWholesaler. All rights reserved.
 * https://www.idwholesaler.com
 */

/**
 * Minimum base styling for legacy PageBuilder-authored category widgets that
 * Idwholesaler_Content's LinkCategoryWidgetLayoutUpdatesToHyvaThemes data patch already makes
 * render under Hyvä, but unstyled.
 *
 * This markup is PageBuilder's own structural output (column-group/column-line grid,
 * `.pagebuilder-collapsible` accordion, responsive `figure`/`.pagebuilder-mobile-hidden`/`-only`
 * images), which Magento core ships CSS for as part of its Luma-targeted stylesheet - Hyvä does
 * not compile or include that stylesheet, so this markup renders with zero layout. Per-instance
 * row layout (flex direction, background, padding/margin) is already baked into stored CMS HTML
 * as inline <style data-pb-style="..."> and needs no porting; what's missing is the base
 * behavior PageBuilder's own stylesheet provides but instances never inline.
 *
 * Scoped to the PageBuilder class names themselves (not a single widget mount point) since these
 * widgets can render into content.top/content.bottom/page.bottom on any category page, and the
 * exact container varies per instance.
 */

.pagebuilder-column-group {
    display: flex;
    flex-wrap: wrap;
}

.pagebuilder-column-line {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.pagebuilder-column-line > .pagebuilder-column {
    flex-basis: 100%;
}

@media only screen and (min-width: 768px) {
    .pagebuilder-column-line {
        flex-wrap: nowrap;
    }

    .pagebuilder-column-line > [data-pb-style] {
        flex-basis: 0;
        flex-grow: 1;
    }
}

.pagebuilder-mobile-hidden {
    display: none;
}

.pagebuilder-mobile-only {
    display: inline-block;
}

@media only screen and (min-width: 768px) {
    .pagebuilder-mobile-hidden {
        display: inline-block;
    }

    .pagebuilder-mobile-only {
        display: none;
    }
}

figure[data-content-type="image"] {
    margin: 0;
}

figure[data-content-type="image"] img {
    max-width: 100%;
    height: auto;
}

.pagebuilder-button-link {
    display: inline-block;
    color: #1773b0;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}

.pagebuilder-button-link:hover {
    text-decoration: underline;
}

/**
 * "Shop by Category" icon-grid section wrapper (admin-authored class, not a PageBuilder
 * built-in) - top divider separating it from the block above.
 */
.shop-category {
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 20px;
}

/**
 * FAQ / "Have Questions" accordion. Open/close is driven via Magento core PageBuilder's own
 * jQuery collapsible widget (data-active-default="true|false" on `.pagebuilder-collapsible`),
 * which Hyvä does not ship - see the companion Alpine.js component
 * (pagebuilderCollapsibleInit(), wired in
 * Idwholesaler_Content::pagebuilder/content-head.phtml) for the interactive
 * behavior this CSS assumes (aria-expanded reflecting open state, `.tabs-content` collapsed via
 * [hidden] rather than display:none, so no specificity fight with the inline style above).
 */
.pagebuilder-collapsible .coll-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 14px 20px;
    margin: 0 0 1px;
    background-color: #ebebeb;
    font-size: 15px;
    font-weight: 600;
    color: #092f46;
}

.pagebuilder-collapsible .coll-header::after {
    content: "+";
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    margin-inline-start: 12px;
}

.pagebuilder-collapsible .coll-header[aria-expanded="true"]::after {
    content: "\2212";
}

.pagebuilder-collapsible .tabs-content {
    padding: 16px 20px;
    border: 1px solid #ebebeb;
    border-top: none;
}

.pagebuilder-collapsible .tabs-content[hidden] {
    display: none;
}