/*
 * bulma-overrides.css
 *
 * Remap Bulma 1.x CSS variables to GP global color vars.
 * Bulma 1.x is fully CSS-variable driven — no Sass needed.
 *
 * Note: Bulma uses HSL channels for its color system.
 * For primary/accent we reference our semantic token aliases,
 * which already point to GP's vars.
 */

:root {
    /* Typography */
    --bulma-family-primary:   var(--font-body);
    --bulma-family-secondary: var(--font-heading);
    --bulma-family-code:      var(--font-mono);

    /* Text */
    --bulma-text:        var(--color-text);
    --bulma-text-strong: var(--color-text);
    --bulma-text-light:  var(--color-text-muted);

    /* Backgrounds */
    --bulma-background:  var(--color-bg-alt);
    --bulma-white:       var(--color-surface);
    --bulma-light:       var(--color-bg-alt);

    /* Border */
    --bulma-border:       var(--color-border);
    --bulma-border-hover: var(--color-text-muted);

    /* Card */
    --bulma-card-shadow:             var(--shadow-property-card);
    --bulma-card-radius:             var(--radius-md);
    --bulma-card-header-weight:      600;
    --bulma-card-background-color:   var(--color-surface);

    /* Radius */
    --bulma-radius:        var(--radius-md);
    --bulma-radius-small:  var(--radius-sm);
    --bulma-radius-large:  var(--radius-lg);

    /* Tags (used for status badges) */
    --bulma-tag-radius: var(--radius-sm);
}

/*
 * Prevent Bulma's .container from fighting GP's container system.
 *
 * GP uses its own container classes (.grid-container, .inside-article) for
 * the outer shell. Bulma's .container is only needed inside .gpre-scope
 * for inner content (property grids, forms, etc.).
 *
 * Bulma's responsive container selectors use 4-class specificity:
 *   .container:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen)
 *
 * We match that specificity with :root to neutralize outside .gpre-scope.
 * Inside .gpre-scope, Bulma's container works normally.
 */

/* Neutralize Bulma container globally — GP handles the outer layout.
   Specificity (0,0,4,0) matches Bulma's strongest container selector.
   Since our CSS loads after Bulma, equal specificity = we win. */
:root .container:not(.gpre-scope .container) {
    flex-grow: initial;
    margin: initial;
    max-width: none;
    width: auto;
    padding: 0;
    position: static;
}

/* Scope Bulma's box-sizing reset inside our content wrapper.
   GP renders header/nav/footer outside this — Bulma's reset never touches them. */
.gpre-scope,
.gpre-scope * {
    box-sizing: border-box;
}


strong{
    color: inherit !important;
}

.wpcf7 .column {
    padding: 5px;
}

.myList{
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 0 !important;
}

.myList li {
    position: relative;
    list-style: none;
    padding-left: 2rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.myList li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #22d3ee;
    color: #ffffff;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 700;
}


/* ── Read More toggler ───────────────────────── */

.myFeatures {
    max-height: 220px; /* Adjust visible height */
    overflow: hidden;
    transition: max-height .35s ease;
}

.myFeatures.expanded {
    max-height: 2000px; /* Large enough for your content */
}
.myFeaturesToggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.myFeaturesToggle .gb-shape {
    transition: transform .3s ease;
}

.myFeaturesToggle.expanded .gb-shape {
    transform: rotate(180deg);
}

/* Hide button if list isn't long enough */
.myFeatures:not(.is-overflowing) + .myFeaturesToggle {
    display: none;
}