/*
Platform overrides. Loaded AFTER style.css and styleN.css.
The theme's own files are never edited — anything we change lives here.

Currently: slider dots. slick-theme.css renders them at font-size 6px with
opacity .25, which is close to invisible on a light background.
*/

/* ---------- slider dots ---------- */

.slick-dots {
    bottom: -34px;
}

.slick-dots li {
    width: 26px;
    height: 26px;
    margin: 0 6px;
}

.slick-dots li button {
    width: 26px;
    height: 26px;
    padding: 0;
}

.slick-dots li button:before {
    font-size: 15px;
    line-height: 26px;
    width: 26px;
    height: 26px;
    opacity: .45;
    color: var(--global-color2);
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: .75;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--global-color1);
}

/* the dots sit below the slide, so the section needs room for them */
.last5posts .latest-posts-slider {
    margin-bottom: 44px;
}

.subversiondark .slick-dots li button:before {
    color: #ffffff;
}

.subversiondark .slick-dots li.slick-active button:before {
    color: var(--global-color1);
}

@media (max-width: 880px) {
    .slick-dots li,
    .slick-dots li button,
    .slick-dots li button:before {
        width: 30px;
        height: 30px;
    }
    .slick-dots li button:before {
        font-size: 17px;
        line-height: 30px;
    }
}

/* ---------- YouTube hero ---------- */

/*
 * style.css gives .wrapperallfix z-index: 2 (line 198) but leaves
 * .youtubebgall .video-background with no z-index at all (line 1576), so the
 * iframe lands below the overlay's own background and never shows.
 *
 * The video goes above the page, and the overlay is lifted past it so the
 * title, divider and CTA stay readable on top of the video.
 */

.youtubebgall .video-background {
    z-index: 200;
}

.youtubebgall .wrapperallfix {
    z-index: 201;
}

/*
 * The hero CTA over a YouTube background.
 *
 * home_top_youtube_section() is called with no attributes by every template,
 * so its wrapper is .maintitleelse. style.css sizes that button only for the
 * other variant:
 *
 *     style.css:2168  .maintitlewhite .button1 {
 *                         max-width: 180px; font-size: 16px;
 *                         padding: 11px 5px; text-align: center; border: none; }
 *
 * There is no matching .maintitleelse rule — the only one that mentions it is
 * a display:none inside .boxgrid0 — so over the video the button has no width
 * cap and no font size, and the label wraps across the hero.
 *
 * Scoped to the video hero so nothing else on the site changes. Colours stay
 * on the palette rather than white, because .maintitleelse is the
 * light-background variant.
 *
 * No max-width: a Hebrew call to action like "חקור שירותים" does not fit the
 * 180px the white variant uses, so the button sizes to its label and
 * line-height keeps a two-line label tight.
 */

.youtubebgall .maintitleelse .button1 {
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.2;
    padding: 11px 5px;
    border: 1px solid var(--global-color2);
    color: var(--global-color2);
}

.youtubebgall .maintitleelse .maintitlestitle {
    margin-bottom: 15px;
}

/* ---------- video embeds ---------- */

/*
 * WordPress emits the iframe at width="500" height="281" and leaves the
 * sizing to the theme. This theme has no rule for .wp-block-embed, so the
 * video sat at 500px in the middle of a full-width column.
 *
 * aspect-ratio keeps 16:9 without the old padding-bottom trick.
 */

.wp-block-embed {
    margin: 24px 0;
}

.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
}

.wp-block-embed iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

/*! compiled 20233515 */