/* ==========================================================================
 * EKY — logo-image overlay (v2.3.77)
 * ==========================================================================
 * v2.3.77 (F11): version header realigned to theme version (was stuck at
 * v2.3.60+). No behavioral change; current WebP + PNG image-set logic was
 * landed in v2.3.69 and is unchanged.
 *
 * ==========================================================================
 * Activated when body has class "ekynew-logo-image" (set by functions.php
 * when the theme option `ekynew_use_image_logo` is truthy). Hides the
 * text-based .logo-text children and replaces them with a centred
 * background-image of the branded EKY logo. No template edits required —
 * this lets us A/B the image vs. the original text logo just by flipping
 * Settings → EKY Theme Options → "Use image logo".
 *
 * Aspect of the trimmed source image is ~7.35 : 1 (width : height).
 * Width values below are derived from the heights (width ≈ 7.35 × height).
 * -------------------------------------------------------------------------- */

body.ekynew-logo-image .logo-text {
    /* v2.3.69 — WebP with PNG fallback. Browsers that don't understand
     * image-set() will ignore the second declaration and use the PNG.
     * Browsers that do will pick WebP (31% smaller here). */
    background-image: url('../images/eky-logo-navy2.png');  /* v2.3.64 — lighter navy #466085 */
    background-image: image-set(
        url('../images/eky-logo-navy2.webp') type('image/webp'),
        url('../images/eky-logo-navy2.png') type('image/png')
    );
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 303px;        /* 44 × 6.875 — aspect of Yaniv's uploaded logo file */
    height: 44px;
    max-width: 62vw;     /* never let the logo eat the whole header on small desktop */
    display: block !important;
    gap: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    font-size: 0 !important;
}

/* Visually hide the inner text while keeping it in the accessibility tree.
 * This preserves screen-reader output ("EKY — קנולר ישינובסקי קינן...") so
 * the logo still has meaningful alt-text-equivalent content. */
body.ekynew-logo-image .logo-text > * {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* The outer .logo container's flex gap puts a blank 12-14px between the
 * (hidden) logo-main column and the (now unused) logo-names column; zero
 * that out so the image sits flush. */
body.ekynew-logo-image .logo {
    gap: 0 !important;
}

/* ---------------- Mobile (≤ 768px) ---------------- */
@media (max-width: 768px) {
    body.ekynew-logo-image .logo-text {
        width: 234px;    /* 34 × 6.875 — fits alongside hamburger on iPhone */
        height: 34px;
        max-width: 64vw;
    }
}

/* ---------------- Tiny phones (≤ 380px) ---------------- */
@media (max-width: 380px) {
    body.ekynew-logo-image .logo-text {
        width: 193px;    /* 28 × 6.875 */
        height: 28px;
    }
}

/* WP admin bar adds 32px / 46px at the top — does not affect header logo
 * sizing directly, but if the admin is previewing we give them a tiny bit
 * extra vertical breathing room so the image is perfectly vertically
 * centred inside the 75px .main-header .container. */
.main-header .container { align-items: center; }

/* ==========================================================================
 * English version of the logo
 * ==========================================================================
 * When body has lang-en class (set by ekynew_current_lang() in functions.php),
 * swap to the English-text variant of the branded PNG. Same ink colour
 * (#466085) and same VISUAL HEIGHT as the Hebrew version so the two variants
 * feel equivalent in presence. The English text is longer, so the source
 * aspect is ~10.06 : 1 (vs. 6.875 : 1 for Hebrew); widths below are recomputed
 * so the image sits correctly centred with background-size: contain.
 * ------------------------------------------------------------------------ */
body.lang-en.ekynew-logo-image .logo-text {
    /* v2.3.69 — WebP with PNG fallback (41% smaller on this asset). */
    background-image: url('../images/eky-logo-navy2-en.png');
    background-image: image-set(
        url('../images/eky-logo-navy2-en.webp') type('image/webp'),
        url('../images/eky-logo-navy2-en.png') type('image/png')
    );
    /* English text is longer (aspect 10.06:1 vs. 6.875:1 for Hebrew), so at the
     * same height the whole logo looks heavier. Knock the height down ~14% so
     * the two language variants feel visually equivalent in the header. */
    width: 382px;        /* 38 × 10.06 */
    height: 38px;
    max-width: 64vw;
}

@media (max-width: 768px) {
    body.lang-en.ekynew-logo-image .logo-text {
        width: 302px;    /* 30 × 10.06 */
        height: 30px;
        max-width: 72vw;
    }
}

@media (max-width: 380px) {
    body.lang-en.ekynew-logo-image .logo-text {
        width: 242px;    /* 24 × 10.06 */
        height: 24px;
        max-width: 75vw;
    }
}