/* NOTE (2026-08-04): the rules below target GENERATED Elementor ids, against
   the project's own selector rule — they already misfired twice when content
   changed (the about heroes, A11). Verified today: every remaining selector
   still matches a live element. Migration debt: move each to a manual atr-
   class on its element, then delete from here. Do not add new id-based rules. */

.elementor-element.elementor-element-c030128.e-con.e-atomic-element.e-div-block-base.e-c030128-2ba35a8.atr-odot-about-section {
    background-position: center left -430px, top -190px left 30px;
}

/* (removed 2026-08-04) the hero right-bg offset rule for this page — it
   positioned the OLD hero photo; A11's fixed girl photo is placed by the
   element's own atomic style (top left / contain). */

/* הגישה של מרכז הניג -היכן שהמדע, הטבע והאדם נפגשים bg DT */
.elementor-element.elementor-element-f9cd45e.e-con.e-atomic-element.e-div-block-base.e-f9cd45e-d0e9b1c.atr-odot-about-section {
    background-position: top 140px left, 0% 0%;
}

/* הגישה של מרכז הניג -למה לבחור במרכז הניג bg DT */
.elementor-element.elementor-element-7afc774.e-con.e-atomic-element.e-flexbox-base.e-1446178 {
    background-position: bottom -280px left -410px;
}

/* blog bg DT */
.elementor-element.elementor-element-ec5231e.e-con.e-atomic-element.e-flexbox-base.e-ec5231e-7b263f2.atr-henig-odot-hero-wrapper-100 {
    background-position: bottom 333px right -490px, top left;
}

/* accordion in */
.elementor-element.elementor-element-ba5bfb2.elementor-widget.elementor-widget-n-accordion .elementor-element.e-con-full.e-flex.e-con.e-child {
    border: none;
}


/* (removed 2026-08-04) the hero right-bg offset rule for this page — it
   positioned the OLD hero photo; A11's fixed girl photo is placed by the
   element's own atomic style (top left / contain). */

/* (removed 2026-08-04) the hero right-bg offset rule for this page — it
   positioned the OLD hero photo; A11's fixed girl photo is placed by the
   element's own atomic style (top left / contain). */

/* ביקורות והמלצות - bottom container right bg DT */
.elementor-element.elementor-element-93f35c0.e-con.e-atomic-element.e-flexbox-base.e-93f35c0-62e0905 {
    background-position: bottom -70px right -60px;
}

/* Form submit button — hover background */
.atr-henig-hp-submit:hover,
.atr-henig-hp-submit:focus-visible {
    background-color: var(--primary-dark-green, #001F1C);
}

/* Tag — background */
button.atr-henig-tag.e-button-base:hover,
button.atr-henig-tag.e-button-base:focus-visible {
    background-color: #E91E63;
}

/* Accordion about the team */


@media (max-width:767px) {

    /* Override elementor's --site-content-width on mobile */
    :root,
    body.elementor-default {
        --site-content-width: 100%;
    }

    .elementor .elementor-element.atr-henig-fg-odot-merkaz-movil {
        background-image: url(/wp-content/uploads/2026/07/odot-frame-559-0.webp);
        background-position: 0 0;
    }

    /* Scoped to the About page (15) only — the kit class is also carried by
       the Yair quote band on page 3258, where this rule silently overrode
       the band's own mobile background (T10: data, generated CSS and asset
       were all correct, yet the old art kept rendering; specificity
       (0,3,0) beats Elementor's (0,2,0) class rule). */
    .elementor.elementor-15 .elementor-element.atr-henig-fg-odot-alfe-metupalim {
        background-image: url(/wp-content/uploads/2026/07/bg-2-generic.webp);
        background-position: 40% -450px;
    }

    /* Team image דף אודות */
    .elementor.elementor-15 .elementor-element.elementor-element-8e8d035 .elementor-testimonial__image img {
        /*height: 110px;*/
    }

    /*  דף אודות על מכון הניג */
    .elementor-element.elementor-element-c030128.e-con.e-atomic-element.e-div-block-base.e-c030128-2ba35a8.atr-odot-about-section {
        background-position: top -100px left -10%, top -190px left 30px;
    }


    .elementor-element.elementor-element-a63c7df.e-con.e-atomic-element.e-flexbox-base.e-9c0af93 {
        background-position: bottom -1260px left -10%, top -80px left 200px;
    }

    /*  דף אודות team swiper */
    .elementor-element.elementor-element-8e8d035.elementor-testimonial--layout-image_stacked.elementor-testimonial--mobile-align-center.odot-our-team-swiper.elementor-testimonial--skin-default.elementor-testimonial--align-center.elementor-pagination-type-bullets.elementor-widget.elementor-widget-testimonial-carousel.e-widget-swiper img {
        height: 75px;
    }

    /*  דף אודות team swiper set image height on mobile */
    .elementor-element.elementor-element-8e8d035.elementor-testimonial--layout-image_stacked.elementor-testimonial--mobile-align-center.odot-our-team-swiper.elementor-testimonial--skin-default.elementor-testimonial--align-center.elementor-pagination-type-bullets.elementor-widget.elementor-widget-testimonial-carousel.e-widget-swiper img {
        height: auto;
    }

    /*  דף אודות accordion faq */
    .elementor .elementor-widget-n-accordion .e-n-accordion-item-title {
        padding: 16px;
    }

    /*  דף אודות hide title bg */
    .elementor-element.elementor-element-4b93acf.e-con.e-atomic-element.e-flexbox-base.e-4b93acf-2a39c3f.atr-henig-odot-hero-wrapper-boxed {
        background-image: none;
    }

    /* הגישה של מרכז הניג - hero right bg DT */
    .elementor-element.elementor-element-d173a75.e-con.e-atomic-element.e-flexbox-base.e-d173a75-6944ba0.atr-henig-odot-hero-wrapper-100 {
        background-position: top left, top left;
        background-size: cover;
    }

    /* הגישה של מרכז הניג -היכן שהמדע, הטבע והאדם נפגשים bg DT */
    .elementor-element.elementor-element-f9cd45e.e-con.e-atomic-element.e-div-block-base.e-f9cd45e-d0e9b1c.atr-odot-about-section {
        background-position: bottom -319px left -40px, 0% 0%;
    }

    /* הגישה של מרכז הניג -למה לבחור במרכז הניג bg mobile */

    .elementor-element.elementor-element-7afc774.e-con.e-atomic-element.e-flexbox-base.e-1446178 {
        background-position: bottom -450px left -620px;
    }

    /* הגישה של מרכז הניג - hero right bg DT */
    .elementor-element.elementor-element-9d4a807.e-con.e-atomic-element.e-flexbox-base.e-9d4a807-2593a0e.atr-henig-odot-hero-wrapper-100 {
        background-position: top left 1000px, top left;
        background-size: cover;
    }

    /* ביקורות והמלצות - hero right bg mobile */
    .elementor-element.elementor-element-4d7a641.e-con.e-atomic-element.e-flexbox-base.e-4d7a641-05e656c.atr-henig-odot-hero-wrapper-100 {
        background-position: top left, top left;
        background-size: cover;
    }

    /*  דף אודות team remove bg from second container */
    .elementor-element.elementor-element-5d71381.e-con.e-atomic-element.e-div-block-base.e-5d71381-070449e.atr-odot-about-section {
        background-image: none;
    }

    /* ביקורות והמלצות - bottom container Bg mobile */
    .elementor-element.elementor-element-fd67a6f.e-con.e-atomic-element.e-flexbox-base.e-fd67a6f-5d64df5 {
        background-position: -210px 29px;
    }

    /* ביקורות והמלצות - hero right bg mobile */
    .elementor-element.elementor-element-20ceccb.e-con.e-atomic-element.e-flexbox-base.e-20ceccb-f1845c1.atr-henig-odot-hero-wrapper-100 {
        background-size: cover;
    }

    /*  blog- hero right bg mobile */
    .elementor-element.elementor-element-ec5231e.e-con.e-atomic-element.e-flexbox-base.e-ec5231e-7b263f2.atr-henig-odot-hero-wrapper-100 {
        background-position: top left;
    }

}


/* ===== Therapist accordion — rich header (photo + name + role) injected by JS (Figma-exact) =====
   Scoped to .atr-henig-tp-ready (added by the JS only to therapist items), so other
   Nested Accordions on the site (e.g. FAQ) are untouched. */
.atr-henig-tp-ready>.e-n-accordion-item-title {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* CLOSED item: two elements (head + chevron) — space them to opposite ends
   (head to the RTL-start = right, chevron to the RTL-end = left). */
.atr-henig-tp-ready:not([open])>.e-n-accordion-item-title {
    justify-content: space-between;
}

/* OPEN item: the head is hidden, so only the chevron remains — space-between would leave
   it stuck at the start. Pin it to the logical-end (LEFT in RTL) instead. */
.atr-henig-tp-ready[open]>.e-n-accordion-item-title .e-n-accordion-item-title-icon {
    margin-inline-start: auto;
}

.atr-henig-tp-ready>.e-n-accordion-item-title>.e-n-accordion-item-title-header {
    display: none;
}

/* When an item is OPEN, the content already shows the full card — hide the injected header. */
.atr-henig-tp-ready[open]>.e-n-accordion-item-title .atr-henig-tp-head {
    display: none;
}

.atr-henig-tp-head {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 0 1 auto;
}

.atr-henig-tp-head__photo {
    /* T9 (review 1608, slide 11): the review's arrow marks Yifat Weinreb's
       photo (150x150, the atomic e-image widget with no override) as the
       TEMPLATE — these 13 other card photos were the ones oversized at 278,
       not the other way round. */
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.atr-henig-tp-head__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: start;
}

.atr-henig-tp-head__name {
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1.8px;
    color: var(--primary-green, #0A5950);
    white-space: nowrap;
}

.atr-henig-tp-head__role {
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-weight: 400;
    font-size: 45px;
    line-height: 1.2;
    color: var(--primary-dark-green, #001F1C);
}

/* Header portrait — force a full circle (beats Elementor's default image border-radius). */
.elementor-widget-n-accordion .e-n-accordion-item-title img.atr-henig-tp-head__photo {
    border-radius: 50%;
}

/* ===== Therapist accordion closed head — mobile (Figma node 3:375) ===== */
@media (max-width: 767px) {

    .atr-henig-tp-ready>.e-n-accordion-item-title,
    .atr-henig-tp-head {
        gap: 16px;
    }

    .atr-henig-tp-head__photo {
        width: 118px;
        height: 118px;
    }

    .atr-henig-tp-head__name {
        font-size: 22px;
        letter-spacing: normal;
        white-space: normal;
        /* allow long Hebrew names to wrap on narrow screens */
    }

    .atr-henig-tp-head__role {
        font-size: 16px;
    }

    /* Single-post sidebar order — the template DOM follows the DESKTOP order;
       on mobile reorder to: chip, title, excerpt, featured image, author
       (Figma 3:7926). */
    .atr-henig-sp-chip {
        order: 1;
    }

    .atr-henig-sp-title {
        order: 2;
    }

    .atr-henig-sp-excerpt {
        order: 3;
    }

    .atr-henig-sp-featured {
        order: 4;
    }

    .atr-henig-sp-author {
        order: 5;
    }
}


/* ===== Conditions horizontal accordion (Figma node 2:590) =====
   Fixed-width band of tiles. Resting = all equal (matches Figma). Click a head
   -> that item grows, siblings compress aside (single-open). JS adds `is-open`
   to the item, `atr-henig-hacc--engaged` to the group, and normalises each item
   wrapper with the `atr-henig-hacc__item` class.
   Structure as Elementor V4 atomic renders it (panel nested INSIDE the head):
     .atr-henig-hacc               outer flexbox
       .atr-henig-hacc__item       one condition (wrapper; class added by JS)
         .atr-henig-hacc__head       clickable face (flex): photo + label + panel
           .atr-henig-hacc__photo      <img>
           .atr-henig-hacc__label      heading / paragraph
           .atr-henig-hacc__panel      content (hidden until open) */

.atr-henig-hacc {
    /* Tunables: band height, photo-block width when open, and open title size. */
    --atr-henig-hacc-h: 500px;
    --atr-henig-hacc-photo-col: 38%;
    /* photo block width in the open tile */
    --atr-henig-hacc-title: 44px;
    display: flex;
    flex-direction: column;
    /* mobile-first: vertical stack */
    gap: 8px;
}

/* Each tile paints from --atr-henig-hacc-tile (set per item below). The open
   panel's leaf reads the SAME property, so leaf colour always equals the
   tile colour (designer, Slider-1 PDF 17.08). */
.atr-henig-hacc__item {
    position: relative;
    overflow: hidden;
    --atr-henig-hacc-tile: var(--secondary-grey, #DDE3E3);
    background-color: var(--atr-henig-hacc-tile);
    border-radius: 16px;
}

.atr-henig-hacc__head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* photo spans the full tile width */
    height: 100%;
    cursor: pointer;
}

/* Photo is the <img> itself (atomic e-image-base). `!important` on width beats
   Elementor's atomic image sizing; flex-grow makes it fill the head height so
   object-fit can crop it to the tile. */
.atr-henig-hacc__photo {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    width: 100% !important;
    height: auto;
    object-fit: cover;
    object-position: center top;
}

/* One uniform label band on every tile. Labels differ in length ("גזים" = one
   line, "דלקת מעיים" = two), and a content-sized band made each tile's label
   strip — and therefore the photo above it — a different height. Reserve two
   lines' worth on all of them and centre the text inside, so single-line
   labels sit in the same band instead of shrinking it. */
.atr-henig-hacc__label {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(2.08em + 24px);
    /* 2 lines at line-height 1.04 + the 12px block padding (border-box) */
    text-align: center;
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.04;
    color: var(--primary-dark-green, #001F1C);
}

/* Panel: hidden until its item is open (mobile reveals it below the head).
   `!important` beats Elementor's atomic `display: flex` on the flexbox element. */
.atr-henig-hacc__panel {
    display: none !important;
    padding: 16px;
}

.atr-henig-hacc__item.is-open .atr-henig-hacc__panel {
    display: block !important;
}

/* Open-panel content (Figma node 2:845): large title + body text. Both live
   inside the panel, so they only show when the tile is open. */
.atr-henig-hacc__title {
    margin: 0 0 16px;
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-weight: 700;
    font-size: var(--atr-henig-hacc-title, 44px);
    line-height: 1.1;
    color: var(--primary-dark-green, #001F1C);
}

.atr-henig-hacc__body {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--primary-dark-green, #001F1C);
}

/* Per-tile colours — fixed Figma order (left -> right = tile 1 -> 9).
   Colours are the Kit secondary globals; if a tile looks wrong, swap its hex
   here (nth-child), no markup change needed. Set via --atr-henig-hacc-tile
   so the open panel's leaf inherits the same colour. */
.atr-henig-hacc__item:nth-child(1) {
    --atr-henig-hacc-tile: var(--secondary-brown, #E7C9BC);
}

.atr-henig-hacc__item:nth-child(2) {
    --atr-henig-hacc-tile: var(--secondary-grey, #DDE3E3);
}

.atr-henig-hacc__item:nth-child(3) {
    --atr-henig-hacc-tile: var(--secondary-green, #8BC8A7);
}

.atr-henig-hacc__item:nth-child(4) {
    --atr-henig-hacc-tile: var(--secondary-blue, #BAD9D6);
}

.atr-henig-hacc__item:nth-child(5) {
    --atr-henig-hacc-tile: var(--secondary-lilac, #D2C6D4);
}

.atr-henig-hacc__item:nth-child(6) {
    --atr-henig-hacc-tile: var(--secondary-mauve, #C996AA);
}

.atr-henig-hacc__item:nth-child(7) {
    --atr-henig-hacc-tile: var(--secondary-coral, #FCA4A7);
}

.atr-henig-hacc__item:nth-child(8) {
    --atr-henig-hacc-tile: var(--secondary-cyan, #60CDD8);
}

.atr-henig-hacc__item:nth-child(9) {
    --atr-henig-hacc-tile: var(--secondary-yellow, #DDBE86);
}

/* ---- Horizontal accordion: desktop / tablet-landscape and up ---- */
@media (min-width: 1024px) {

    .atr-henig-hacc {
        flex-direction: row;
        gap: 0;
        align-items: stretch;
    }

    .atr-henig-hacc__item {
        flex: 1 1 0;
        /* resting: all equal (Figma look) */
        min-width: 0;
        /* Force a uniform band height; `!important` beats Elementor's
           content-driven atomic sizing so every tile is exactly equal. */
        height: var(--atr-henig-hacc-h) !important;
        min-height: 0 !important;
        display: flex;
        /* so the head fills the tile height */
        flex-direction: column;
        border-radius: 0;
        transition: flex-grow 0.45s ease;
    }

    .atr-henig-hacc__item.is-open {
        flex-grow: 10;
        /* ~55% of the band */
    }

    /* Open: the head switches to a row -> photo column + content panel;
       the label is hidden (the panel carries its own title). */
    .atr-henig-hacc__item.is-open .atr-henig-hacc__head {
        flex-direction: row;
    }

    .atr-henig-hacc__item.is-open .atr-henig-hacc__photo {
        flex: 0 0 var(--atr-henig-hacc-photo-col);
        width: auto !important;
        /* override the base 100% !important */
        height: 100%;
        align-self: stretch;
    }

    .atr-henig-hacc__item.is-open .atr-henig-hacc__label {
        display: none;
    }

    .atr-henig-hacc__item.is-open .atr-henig-hacc__panel {
        display: flex !important;
        /* column-centred content, like the Figma */
        flex-direction: column;
        justify-content: center;
        flex: 1 1 auto;
        min-width: 0;
        overflow: auto;
        position: relative;
        /* anchor for the leaf pseudo — without this it would span the item */
        padding: 48px;
        text-align: start;
        /* Translucent white over the tile colour = a pale tint of that same
           colour; the leaf sits on top as the Figma corner accent. */
        background-color: rgba(255, 255, 255, 0.62);
    }

    /* Corner leaf, tinted per category (designer, Slider-1 PDF 17.08): the
       leaf must be the SAME colour as the item's tile, not a fixed brown for
       all nine. The webp (full alpha channel) becomes a mask over a layer
       painted with the inherited tile property. Same placement as the old
       background-image: left top, auto 40%. Path is relative to this file
       (assets/css/ -> theme root). */
    .atr-henig-hacc__item.is-open .atr-henig-hacc__panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--atr-henig-hacc-tile, #DDBE86);
        -webkit-mask: url("../../images/leaf-brown.webp") no-repeat left top / auto 40%;
        mask: url("../../images/leaf-brown.webp") no-repeat left top / auto 40%;
        pointer-events: none;
    }

    /* the Figma keeps the text ABOVE the leaf where they overlap */
    .atr-henig-hacc__item.is-open .atr-henig-hacc__panel > * {
        position: relative;
        z-index: 1;
    }

    /* Compressed siblings (only once something is open): rotate the label so it
       stays readable in the narrow strip. Rotated, the label's height follows
       the TEXT length, so short and long titles started at different heights.
       Fix the band to a share of the tile height (45% of 500px = 225px, more
       than the longest title needs) and centre the text in it — every strip
       then breaks at the same line. min-height is cleared because the
       two-line reserve above belongs to the horizontal state only. */
    .atr-henig-hacc--engaged .atr-henig-hacc__item:not(.is-open) .atr-henig-hacc__label {
        writing-mode: vertical-rl;
        padding: 8px 4px;
        flex: 0 0 45%;
        min-height: 0;
    }

}

/* Blog page */
/* ===== Blog archive (Figma node 3:6991) =====
   Loop Grid ("Blog Card" loop item) + search + pagination.
   Card/chip classes are V4 global classes; grid/search hooks are
   widget-level classes on the classic Pro widgets. */

/* Card is the positioning context for the floating category chip. */
.atr-henig-blog-card {
    position: relative;
}

/* Square, cropped card image. */
.atr-henig-blog-card__img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

/* --- Search row: reuses the header's .atr-henig-search pattern (HTML widget,
   snippet: html-snippets/atr-blog-search.html). Base styles live in style.css;
   this modifier only carries the blog-size differences. --- */
.atr-henig-search--blog {
    width: min(409px, 100%);
    margin-inline-start: 0;
    /* cancel the utilbar's push-to-end */
    padding-block: 16px;
}

/* Element+double-class specificity — beats the default form-field styles
   (same fight the utilbar already won in style.css with its scoped rule). */
.atr-henig-search--blog input.atr-henig-search__input {
    font-size: 30px;
    line-height: 1.2;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

/* --- Loop Grid numeric pagination --- */
.atr-henig-blog-grid .elementor-pagination {
    margin-block-start: 60px;
    text-align: center;
    font-size: 26px;
}

.atr-henig-blog-grid .elementor-pagination .page-numbers {
    color: var(--primary-green, #0A5950);
    margin-inline: 8px;
}

.atr-henig-blog-grid .elementor-pagination .page-numbers.current {
    color: var(--primary-dark-green, #001F1C);
    font-weight: 700;
}

/* ===== Single blog post (Figma desktop 3:6754, mobile 3:7926) =====
   Template: Theme Builder "Single Post". Sidebar elements carry atr-henig-sp-*
   classes; the Post Content flexbox carries atr-henig-post-body. Typography for
   the editor-rendered content lives HERE because V4 global classes cannot reach
   inside the Post Content widget. DESKTOP-FIRST (matches Elementor's generated
   CSS): base = desktop, mobile overrides in the max-width block at the end of
   this section. */

/* --- Post body: paragraph + list typography (desktop/body-35) --- */
.atr-henig-post-body p,
.atr-henig-post-body li {
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-weight: 400;
    font-size: 35px;
    line-height: 1.2;
    color: var(--primary-dark-green, #001F1C);
}

.atr-henig-post-body p {
    margin-block: 0 24px;
}

/* --- Post body: subheadings (desktop 60 regular -> mobile 26 BOLD, per design) --- */
.atr-henig-post-body h2 {
    margin-block: 56px 24px;
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-weight: 400;
    font-size: 60px;
    line-height: 1.04;
    color: var(--primary-dark-green, #001F1C);
}

/* --- Post body: content images (fixed-crop band, no radius) --- */
.atr-henig-post-body figure {
    margin-block: 24px 56px;
    margin-inline: 0;
}

.atr-henig-post-body img {
    display: block;
    width: 100%;
    height: 550px;
    object-fit: cover;
}

/* --- Author photo: full circle (beats Elementor's default image radius) --- */
.atr-henig-sp-author-photo img,
img.atr-henig-sp-author-photo {
    border-radius: 50%;
    object-fit: cover;
}

.elementor-author-box {
    flex-direction: column;
}

.elementor-author-box__avatar {
    align-self: center;
}

/* Breadcrumb chevron — 24px on all breakpoints (Figma); vertical centering
   via flex align instead of a padding hack, so it tracks any text size. */
.atr-breadcrumbs-chevron {
    align-self: center;
}

.atr-breadcrumbs-chevron .elementor-icon svg {
    height: 24px;
    display: block;
}

/* blog post */
.elementor-author-box__avatar,
.elementor-author-box__text {
    width: 100%;
}

/* Chip — shrink to its text (a flex child stretches by default) */
.atr-henig-sp-chip {
    width: fit-content;
}

/* --- Post body: mobile overrides (Figma 3:7926) --- */
@media (max-width: 767px) {

    .atr-henig-post-body p,
    .atr-henig-post-body li {
        font-size: 16px;
    }

    .atr-henig-post-body h2 {
        margin-block: 24px 16px;
        font-weight: 700;
        font-size: 26px;
        line-height: 1;
        letter-spacing: -0.78px;
    }

    .atr-henig-post-body figure {
        margin-block: 16px 24px;
    }

    .atr-henig-post-body img {
        height: 220px;
    }

    .atr-breadcrumbs-chevron .elementor-icon svg {
        height: 14px;
    }
}

/* ===== FAQ accordion — site-wide skin, scoped to .atr-henig-faq =====
   Add the class to every FAQ Nested Accordion (Advanced -> CSS Classes); the
   therapist accordion (.atr-henig-tp-ready) is untouched. Closed head =
   Primary Blue 01, open head = Primary Blue 02, +/- icon pinned to the LEFT
   (logical end in RTL). The element-type selectors add the specificity needed
   to beat the widget-level background controls. */
/* 7 classes — outranks the widget-level background rule (6 classes), so the
   skin wins even on copies whose widget controls still set a background. */
.elementor .elementor-widget-n-accordion.atr-henig-faq .e-n-accordion>details.e-n-accordion-item>summary.e-n-accordion-item-title {
    background-color: var(--primary-blue-01, #F4F8F8);
}

.elementor .elementor-widget-n-accordion.atr-henig-faq .e-n-accordion>details.e-n-accordion-item[open]>summary.e-n-accordion-item-title {
    background-color: var(--primary-blue-02, #E7F0F0);
}

/* No color "blink" on mousedown/click: pin the SAME background in EVERY state
   (hover/focus/focus-visible/active) with !important — the skin is the final
   word against any widget/kit/browser state style — and drop transitions so
   no intermediate frame ever paints. */
.atr-henig-faq details.e-n-accordion-item>summary.e-n-accordion-item-title,
.atr-henig-faq details.e-n-accordion-item>summary.e-n-accordion-item-title:hover,
.atr-henig-faq details.e-n-accordion-item>summary.e-n-accordion-item-title:focus,
.atr-henig-faq details.e-n-accordion-item>summary.e-n-accordion-item-title:focus-visible,
.atr-henig-faq details.e-n-accordion-item>summary.e-n-accordion-item-title:active {
    background: var(--primary-blue-01, #F4F8F8) !important;
    transition: none;
    -webkit-tap-highlight-color: transparent;
}

.atr-henig-faq details.e-n-accordion-item[open]>summary.e-n-accordion-item-title,
.atr-henig-faq details.e-n-accordion-item[open]>summary.e-n-accordion-item-title:hover,
.atr-henig-faq details.e-n-accordion-item[open]>summary.e-n-accordion-item-title:focus,
.atr-henig-faq details.e-n-accordion-item[open]>summary.e-n-accordion-item-title:focus-visible,
.atr-henig-faq details.e-n-accordion-item[open]>summary.e-n-accordion-item-title:active {
    background: var(--primary-blue-02, #E7F0F0) !important;
}

/* Head layout: question at the RIGHT, ONLY the +/- icon at the LEFT edge.
   Root cause (from widget-nested-accordion.min.css): the icon's position is
   driven by `order: var(--n-accordion-title-icon-order)` — the widget sets -1
   (icon first => right in RTL) and pushes the text left. Force the icon AFTER
   the header; with space-between that pins it to the far left. */
.atr-henig-faq summary.e-n-accordion-item-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    direction: rtl;
}

.elementor-widget-n-accordion.atr-henig-faq .e-n-accordion-item-title-icon {
    order: 2;
}

.atr-henig-faq .e-n-accordion-item-title .e-n-accordion-item-title-header {
    text-align: start;
}

/* ===== Video section panel (category pages, Figma 80:4593) =====
   Rounded full-bleed-ish panel inset from the screen edges, token color +
   two decorative arc layers (top-right, bottom-left). Same responsive layer
   technique as the Yair section below. */
.atr-henig-subj-video {
    border-radius: 40px;
    background-color: var(--primary-blue-01, #F4F8F8);
    background-image: url("../../images/video-arc-right.webp"), url("../../images/video-arc-left.webp");
    background-repeat: no-repeat, no-repeat;
    background-position: right top, left bottom;
    background-size: auto, auto 85%;
}

@media (max-width: 767px) {
    .atr-henig-subj-video {
        border-radius: 24px;
        background-size: 55% auto, auto 45%;
    }
}

/* ===== Video testimonial cards (category pages) =====
   Rounded corners applied DIRECTLY on every painted element (overlay div,
   its img, the iframe/player). Radius on the wrapper alone fails inside the
   transformed swiper slides — clipping via overflow is unreliable there. */
.atr-henig-subj-testi__video .elementor-wrapper,
.atr-henig-subj-testi__video .elementor-custom-embed-image-overlay,
.atr-henig-subj-testi__video .elementor-custom-embed-image-overlay img,
.atr-henig-subj-testi__video .elementor-video,
.atr-henig-subj-testi__video iframe {
    border-radius: 16px;
    overflow: hidden;
}

/* ===== Section body rich content (category pages) =====
   .atr-henig-subj-body marks the text-editor of every generated content
   section. Production content may carry inline h3 subheadings, images and
   h4 captions (migrated as-is by the page generator) — style them here so
   they sit inside the 60px-titled sections without competing with them. */
.atr-henig-subj-body h3 {
    color: var(--primary-green, #0A5950);
    font-size: 35px;
    font-weight: 700;
    line-height: 120%;
    margin-block: 0 16px;
}

.atr-henig-subj-body img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    margin-block: 32px 16px;
}

.atr-henig-subj-body h4 {
    /* image caption (production keeps it as a small heading under the photo) */
    color: var(--primary-dark-green, #001F1C);
    font-size: 20px;
    font-weight: 400;
    line-height: 130%;
    opacity: 0.85;
    margin-block: 0 32px;
}

@media (max-width: 767px) {
    .atr-henig-subj-body h3 {
        font-size: 22px;
    }

    .atr-henig-subj-body img {
        margin-block: 24px 12px;
    }

    .atr-henig-subj-body h4 {
        font-size: 16px;
        margin-block-end: 24px;
    }
}

/* ===== Loop-item cards inside a classic container =====
   A classic Elementor container sets inheritable layout custom properties
   (--display, --flex-direction, --gap...) that leak INTO the atomic (V4)
   containers of loop-item cards and force them into flex-row, crushing the
   card. Reset them at the loop-item boundary so cards render identically
   everywhere (blog archive, related-posts on single post). */
.atr-henig-blog-grid .e-loop-item {
    --display: initial;
    --flex-direction: initial;
    --flex-wrap: initial;
    --justify-content: initial;
    --align-items: initial;
    --align-content: initial;
    --gap: initial;
    --row-gap: initial;
    --column-gap: initial;
}

/* ===== Yair section background (category pages, Figma 3:3167) =====
   Two decorative arc layers anchored to the edges + the token color with a
   guaranteed hex fallback. Layer sizes follow the section height (left arc)
   or stay natural (top-right arc), so resizing never distorts them.
   Paths are relative to this file (assets/css/ -> theme root). */
.atr-henig-subj-yair {
    background-color: var(--primary-blue-01, #F4F8F8);
    background-image: url("../../images/yair-arc-right.webp"), url("../../images/yair-arc-left.webp");
    background-repeat: no-repeat, no-repeat;
    background-position: right top, left top;
    background-size: auto, auto 100%;
}

@media (max-width: 767px) {
    .atr-henig-subj-yair {
        /* mobile design (Figma): small arc at top-right, arc at bottom-left */
        background-position: right top, left bottom;
        background-size: 55% auto, auto 45%;
    }
}

/* ===== Leaf-mask image (category pages) — mask RETIRED 2026-08-04 =====
   The class originally clipped a rectangular photo to the leaf shape
   (aspect 724/879 + cover + mask-image: leaf-mask.svg). Review H7 (slide
   108) exposed the flaw: the photos in use already carry their shape, and
   the second mask plus the cover-crop cut the subject's head. The source is
   now a transparent full-figure PNG (attachment 4806) that needs no mask —
   the declarations were removed rather than fed a third asset format. The
   class stays on the widgets as a harmless hook (only widget 875c7b2 across
   the category pages uses it; verified 2026-08-04). */
.atr-henig-leaf-mask img,
img.atr-henig-leaf-mask {
    width: 100%;
    height: auto;
}