.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;
}

/* הגישה של מרכז הניג - 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: bottom 333px right -490px, top left;
}

/* הגישה של מרכז הניג -היכן שהמדע, הטבע והאדם נפגשים 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-0781d1f.e-con.e-atomic-element.e-flexbox-base.e-0781d1f-6d16b8f>div {
    background-position: top 21px right 21px;
}

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

/* 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;
}


/* הצוות המקצועי והמטפלים שלנו - 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: bottom 333px right -490px, top left;
}

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

/* ביקורות והמלצות - 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;
    }

    .elementor .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;
    }

}


/* ===== 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 {
    width: 278px;
    height: 278px;
    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;
    }
}


/* ===== 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;
}

.atr-henig-hacc__item {
    position: relative;
    overflow: hidden;
    background-color: var(--secondary-grey, #DDE3E3);
    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;
}

.atr-henig-hacc__label {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px;
    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. */
.atr-henig-hacc__item:nth-child(1) { background-color: var(--secondary-brown,  #E7C9BC); }
.atr-henig-hacc__item:nth-child(2) { background-color: var(--secondary-grey,   #DDE3E3); }
.atr-henig-hacc__item:nth-child(3) { background-color: var(--secondary-green,  #8BC8A7); }
.atr-henig-hacc__item:nth-child(4) { background-color: var(--secondary-blue,   #BAD9D6); }
.atr-henig-hacc__item:nth-child(5) { background-color: var(--secondary-lilac,  #D2C6D4); }
.atr-henig-hacc__item:nth-child(6) { background-color: var(--secondary-mauve,  #C996AA); }
.atr-henig-hacc__item:nth-child(7) { background-color: var(--secondary-coral,  #FCA4A7); }
.atr-henig-hacc__item:nth-child(8) { background-color: var(--secondary-cyan,   #60CDD8); }
.atr-henig-hacc__item:nth-child(9) { background-color: 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;
        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. Path is
           relative to this file (assets/css/ -> theme root). */
        background-color: rgba( 255, 255, 255, 0.62 );
        background-image: url( "../../images/leaf-brown.webp" );
        background-repeat: no-repeat;
        background-position: left top;
        background-size: auto 40%;
    }

    /* Compressed siblings (only once something is open): rotate the label so it
       stays readable in the narrow strip. */
    .atr-henig-hacc--engaged .atr-henig-hacc__item:not(.is-open) .atr-henig-hacc__label {
        writing-mode: vertical-rl;
        padding: 8px 4px;
    }
}

/* 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;
}

/* Category chip — floats over the card image. 24px from the inline-start
   edge (right in RTL), 22px from the top, per Figma. */
.atr-henig-blog-chip {
    position: absolute;
    top: 22px;
    inset-inline-start: 24px;
}

/* Chip text is an <a> from get_the_term_list() — keep the chip's own colors. */
.atr-henig-blog-chip a {
    color: inherit;
    text-decoration: none;
}

/* 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 widget carries atr-henig-post-body. Typography for
   the editor-rendered content lives HERE because V4 global classes cannot reach
   inside the Post Content widget. Mobile-first: base = mobile values. */

/* --- Post body: paragraphs (mobile/body-16 -> desktop/body-35) --- */
.atr-henig-post-body p {
    margin-block: 0 24px;
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--primary-dark-green, #001F1C);
}

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

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

.atr-henig-post-body img {
    display: block;
    width: 100%;
    height: 220px;
    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;
}

@media (min-width: 768px) {

    /* Sidebar order — DOM follows the MOBILE order (chip, title, excerpt,
       featured image, author); desktop rearranges per Figma. */
    .atr-henig-sp-featured { order: 1; }
    .atr-henig-sp-title    { order: 2; }
    .atr-henig-sp-chip     { order: 3; }
    .atr-henig-sp-excerpt  { order: 4; }
    .atr-henig-sp-author   { order: 5; }

    .atr-henig-post-body p {
        font-size: 35px;
    }

    .atr-henig-post-body h2 {
        margin-block: 56px 24px;
        font-weight: 400;
        font-size: 60px;
        line-height: 1.04;
        letter-spacing: 0;
    }

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

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