/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* ---- Responsive embed (YouTube / Vimeo) ---- */
/* Universal: alla YouTube/Vimeo-iframes blir 100% breda + 16:9 utan wrapper */
iframe[src*="youtube.com"],
iframe[src*="youtu.be"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="vimeo.com"],
iframe[src*="player.vimeo.com"],
.embed-responsive iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* ---- Button: pill-icon modifier --------------------------------
 * Adds a darker "pill" on the right side of any .bricks-button that
 * contains an SVG icon. Works on top of all ACSS button variants
 * (primary / secondary / base / neutral, light / dark, outline, etc.)
 *
 * Usage: add `btn--pill` as a CSS class on the button in Bricks.
 *   <a class="bricks-button btn--primary btn--pill">Read more <svg>...</svg></a>
 * ------------------------------------------------------------ */
.btn--pill {
    display: inline-flex !important;
    align-items: center;
    overflow: hidden;
    padding-right: 0 !important;
    transition:
        background-color 0.35s ease,
        color            0.35s ease,
        border-color     0.35s ease,
        box-shadow       0.35s ease !important;
}

/* Solid pill buttons: drop the ACSS border entirely. It reads as an ugly frame —
 * a primary-colored ring peeking around the darker icon area (and around the whole
 * button on hover, when the background changes but the border color doesn't).
 * Outline pills keep theirs — the border IS that variant. */
.btn--pill:not(.outline) {
    border: 0 !important;
}

.btn--pill > svg {
    flex-shrink: 0;
    align-self: stretch;
    width: 3em;
    height: auto;    /* override HTML attribute height="16" */
    /* Negativa margins drar SVG:n ut i knappens padding så pill-ytan
       fyller knappen kloss top→bottom. Klipps av overflow:hidden. */
    margin-block: -100px;
    margin-left: var(--btn-medium-inline, 1.5rem);
    padding: 1.05em;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.18);   /* darken any underlying color */
    color: inherit;
    transition: background-color 0.35s ease;
}

/* For outline / light-background buttons the dark overlay would look harsh
 * — invert to a soft light overlay instead. */
.btn--pill.outline > svg,
.btn--pill[class*="light"]:not([class*="background-"]) > svg {
    background-color: rgba(0, 0, 0, 0.08);
}

.btn--pill:hover > svg {
    background-color: var(--base);
    color: var(--base-light, #fff);
}

/* Fixed min-width so the button doesn't resize when the label toggles
   between "Expand all" / "Collapse all". */
.tech-specs-open-all,
.tech-specs-open-all.btn--pill,
.tech-specs-open-all.is-open {
    min-width: 185px;
    justify-content: center;
}

/* "Expand all" specs toggle: NO hover effect at all (still uses .btn--pill markup). */
.tech-specs-open-all.btn--pill,
.tech-specs-open-all.btn--pill > svg {
    transition: none !important;
}
.tech-specs-open-all.btn--pill:hover {
    box-shadow: none;
}
/* Icon is a masked currentColor glyph — keep it unchanged on hover. */
.tech-specs-open-all.btn--pill:hover > svg {
    background-color: currentColor;
    transform: none;
}

/* Expand/collapse icon: render the button's <svg> as a masked icon that swaps
   with state and inherits the text colour. (Replaces the btn--pill arrow.) */
.tech-specs-open-all > svg {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
    margin: 0 0 0 0.5em;
    padding: 0;
    background-color: currentColor;
    -webkit-mask: url("/wp-content/uploads/2026/06/proicons-text-expand.svg") center / contain no-repeat;
            mask: url("/wp-content/uploads/2026/06/proicons-text-expand.svg") center / contain no-repeat;
}
.tech-specs-open-all.is-open > svg {
    -webkit-mask-image: url("/wp-content/uploads/2026/06/proicons-text-collapse.svg");
            mask-image: url("/wp-content/uploads/2026/06/proicons-text-collapse.svg");
}

/* ---- Hero hover reveal --------------------------------------
 * Add the class `hero-reveal` to the hero <section>.
 * Targets the existing `.overlay::before` pseudo (which already
 * provides the dark tint via var(--black-trans-50)).
 * On hover, the overlay lightens so the bg image shines through.
 * Text inside gets a subtle shadow so it stays legible.
 * ------------------------------------------------------------ */
/* Works whether `hero-reveal` is on the <section> OR on the overlay <figure> itself */
.hero-reveal .overlay::before,
.hero-reveal.overlay::before,
.hero-reveal :where(.overlay)::before {
    transition: background-color 0.4s ease !important;
}

.hero-reveal:hover .overlay::before,
.hero-reveal.overlay:hover::before,
.hero-reveal:hover :where(.overlay)::before {
    background-color: rgba(10, 10, 10, 0.25) !important;
}

.hero-reveal :is(h1, h2, h3, .brxe-heading) {
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

/* Body text needs more help against bright bg on hover.
 * Stacked shadows create a soft localised dark patch behind the
 * text without needing extra markup or z-index tricks. */
.hero-reveal :is(p, .brxe-text-basic) {
    font-weight: 500;
    text-shadow:
        0 0 2px  rgba(0, 0, 0, 0.95),
        0 0 10px rgba(0, 0, 0, 0.85),
        0 0 28px rgba(0, 0, 0, 0.7),
        0 0 56px rgba(0, 0, 0, 0.55);
}

/* ---- News/post body: tidy image alignments -----------------
 * Articles use WP's alignleft/alignright/aligncenter on inline
 * <img>/<figure>. Left/right are kept as a polished ~50% float so
 * text wraps nicely beside the image (50/50 feel); centre/none
 * become full-width blocks. On small screens floats stack to 100%.
 * Scoped to the single-post wrapper so the rest of the site is
 * untouched. Fixes every article at once. (Master plan 1.4)
 * ------------------------------------------------------------ */
.brokk-single-post__content :is(img, figure) { max-width: 100%; height: auto; }

/* Aligned images → clean full-width centred blocks.
 * Floating the (tall) imported article images leaves awkward whitespace
 * next to short paragraphs, so every article image is presented as a
 * consistent full-width block regardless of the editor's align choice.
 * To make images intentionally smaller, change `width: 100%` to e.g. 75%. */
.brokk-single-post__content :is(img, figure):is(.alignleft, .alignright, .aligncenter, .alignnone) {
    float: none;
    display: block;
    width: 100%;
    margin: var(--space-m, 2rem) auto;
}
.brokk-single-post__content figure img { width: 100%; height: auto; }