/* =============================================================
   Read more — egen fällning på <details>/<summary>
   -------------------------------------------------------------
   Byggs som Bricks-element (block med tagg details > block med
   tagg summary > två basic text-spans) så allt är redigerbart i
   byggaren. Ersätter BricksExtras Read More/Less, vars knapptext
   låg i ett JSON-attribut som TranslatePress aldrig såg — knappen
   stod på engelska på alla språk. Här är texten vanlig HTML.

   Inget JavaScript: <details> öppnar och stänger själv och är
   tillgängligt med tangentbord och skärmläsare som standard.

     .brk-more          <details>
     .brk-more__toggle  <summary>
     .brk-more__more    "Read more"  (syns när stängd)
     .brk-more__less    "Read less"  (syns när öppen)
     .brk-more__copy    brödtext med tätare styckeluft
   ============================================================= */

/* Båda är Bricks block-element, och .brxe-block (flex i kolumn, full
   bredd) har samma specificitet som en enkel klass — då hamnade chevronen
   under texten och knappen centrerades. Dubblerad klass vinner. */
.brk-more.brk-more {
    display:    block;
    /* SmartPower-sidans "Content"-div har text-align: center. Det ärvs,
       och en inline-flex-summary placeras då som inlineinnehåll — mitt i
       raden. BricksExtras-elementet som ersattes hade text-align: left
       inbyggt; här sätts det på komponenten. start i stället för left så
       att höger-till-vänster-språk (ar_AE finns i TRP) blir rätt. */
    text-align: start;
}
.brk-more > summary {
    list-style: none;
}
.brk-more > summary::-webkit-details-marker { display: none; }
.brk-more > summary::marker { content: ''; }

.brk-more__toggle.brk-more__toggle {
    display:        inline-flex;
    flex-direction: row;
    align-items:    center;
    justify-content: flex-start;
    inline-size:    auto;
    text-align:     left;
    gap:            0.8rem;
    padding-block:  0.4rem;
    cursor:         pointer;
    color:          var(--text-dark, #1a1a1a);
    font-size:      var(--text-s, 1.4rem);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height:    1.2;
    user-select:    none;
}

/* Ikonsetets Chevron (icons/brokk-chevron.svg), vänds när fällningen är öppen */
.brk-more__toggle::after {
    content:      '';
    flex:         none;
    inline-size:  1.6rem;
    block-size:   1.6rem;
    background-color: currentColor;
    -webkit-mask: url("/wp-content/themes/bricks-child/icons/brokk-chevron.svg") center / contain no-repeat;
            mask: url("/wp-content/themes/bricks-child/icons/brokk-chevron.svg") center / contain no-repeat;
    transition:   transform var(--dur-base) ease;
}
.brk-more[open] > .brk-more__toggle::after {
    transform: rotate(180deg);
}

.brk-more__toggle:hover .brk-more__more,
.brk-more__toggle:hover .brk-more__less {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}
.brk-more__toggle:focus-visible {
    outline:        2px solid var(--primary, #ffcd00);
    outline-offset: 3px;
}

.brk-more:not([open]) .brk-more__less,
.brk-more[open] .brk-more__more {
    display: none;
}

.brk-more[open] > .brk-more__toggle {
    margin-bottom: var(--space-xs, 0.8rem);
}

/* Mjuk öppning där webbläsaren klarar det (Chrome 131+). Övriga
   öppnar direkt — samma innehåll, bara utan animation. */
@supports (interpolate-size: allow-keywords) {
    .brk-more {
        interpolate-size: allow-keywords;
    }
    .brk-more::details-content {
        block-size: 0;
        overflow:   hidden;
        transition: block-size 260ms ease, content-visibility 260ms allow-discrete;
    }
    .brk-more[open]::details-content {
        block-size: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brk-more__toggle::after,
    .brk-more::details-content { transition: none; }
}

.brk-more__copy {
    text-align: start;
}
.brk-more__copy p {
    margin-bottom: var(--space-xs, 0.8rem);
}
/* Sista stycket bär ingen marginal: förälderns row-gap ger redan luften
   till knappen. Med båda blev det dubbelt och knappen lossnade från
   texten den hör till. */
.brk-more__copy p:last-child {
    margin-bottom: 0;
}

/* --- Produkttoppen (mall 6061) -------------------------------
   Ingen marginal ovanför: stapelns row-gap räcker, och knappen ska
   höra ihop med ingressen snarare än med specraden under.
   Beskrivningstexten inuti bär själv sin bottenmarginal i Bricks
   (--content-gap, mobil liggande --container-gap). När fällningen
   är stängd saknas den, så den läggs på här i stället. */
.brk-more--product:not([open]) {
    margin-bottom: var(--content-gap, 2.4rem);
}
@media (max-width: 767px) {
    .brk-more--product:not([open]) {
        margin-bottom: var(--container-gap, 3.2rem);
    }
}

/* --- Mobil: ingen fällning (Anders 2026-10-05) ----------------
   read-more.js öppnar varje fällning upp till 767px och sätter
   .brk-more--flow. Knappen göms och texten flödar som vanlig text,
   utan animation och utan knappens marginal. */
.brk-more--flow > .brk-more__toggle {
    display: none;
}
.brk-more--flow::details-content {
    transition: none;
}