/* ==========================================================================
   kstyle1.css — KungFu (Hong Gar) responsive stylesheet
   Structure: default rules = widescreen; one @media (max-width: 900px) block
   for mobile, matching the parent stylen.css pattern.
   ========================================================================== */


/* ------------------ Reset & base ------------------ */
* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}
html, body { height: 100%; }

/* Root 62.5% => 1rem = 10px throughout the widescreen block, matching
   the parent stylen.css convention. All rem/em values in this file were
   authored assuming this. The mobile @media block below overrides html
   back to 100% so its 16px-based rem sizing keeps working unchanged. */
html { font-size: 62.5%; }

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    background: #fff url(../images/kungfu/kfbg1.jpeg) no-repeat fixed;
    background-size: cover;
    direction: rtl;
    text-align: right;
}


/* ------------------ Typography ------------------ */
h1, h2, h3, h4 { font-weight: normal; }

h1 {
    font-size: 2.2em;
    font-weight: bold;
    border-bottom: 0.2rem dotted #666;
    padding: 1rem 0 0.2rem;
    margin-bottom: 1rem;
    text-align: center;
    direction: rtl;
}
h2 {
    font-size: 1.8em;
    text-align: right;
    border-bottom: 0.1rem dotted #666;
    padding: 0.3rem 0;
    margin-bottom: 1rem;
}
h3 {
    font-size: 1.6em;
    color: #d4af37;
    text-align: center;
    padding: 0.3rem 0 0 0;
    margin-bottom: 0.5rem;
    direction: rtl;
    display: block;
}
p {
    font-size: 1.4em;
    line-height: 1.5em;
    padding-bottom: 0.8rem;
    text-align: right;
    direction: rtl;
}
.intro {
    font-size: 1.5em;
    line-height: normal;
    font-weight: normal;
}


/* ------------------ Links & lists ------------------ */
a { outline: none; text-decoration: none; }
a:link, a:visited { color: #930; }
a:hover { color: #c60; }
ul, li { list-style-type: none; }


/* ------------------ Utility classes ------------------ */
.col-1-2 { width: 45%; }
.fl { float: left; }
.fr { float: right; }
.txt-ctr { text-align: center; }
.clearer { clear: both; width: 100%; display: block; height: 0; line-height: normal; }

div.hr { clear: both; width: 100%; height: 2rem; }
div.hr hr { display: none; }

.remark {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: medium;
    color: #CC0000;
    line-height: normal;
}


/* ------------------ Action buttons ------------------ */
.act { text-align: center; }
.act a.btn {
    display: inline-block;
    min-width: 12rem;
    margin: 0.5rem auto;
    padding: 0.4rem 1.4rem;
    background: #111;
    color: #fff;
    border: 0.2rem solid #ccc;
    border-radius: 1rem;
    text-decoration: none;
}
.act a.btn:hover { background: #444; }

.actr { text-align: right; }
.actr a.btn {
    display: inline-block;
    min-width: 12rem;
    margin: 0.5rem auto;
    padding: 0.6rem 1.4rem;
    background: #111;
    color: #fff;
    border: 0.2rem solid #ccc;
    border-radius: 1rem;
    text-decoration: none;
}
.actr a.btn:hover { background: #444; }

.btn-language {
    font-size: 1.3em;
    font-weight: bold;
    padding: 0.4rem 1rem;
    margin-top: 1rem;
    background: #000;
    color: #fff !important;
    display: inline-block;
    border-radius: 0.5rem;
    text-decoration: none;
}


/* ==========================================================================
   Widescreen layout (default)
   ========================================================================== */

#container {
    max-width: 95rem;
    width: 100%;
    margin: 0 auto;
    padding-top: 1rem;
    position: relative;
}


/* ------------------ Header + logo (right sidebar) ------------------ */
#header {
    width: 16.5rem;
    float: right;
    position: relative;
    z-index: 10;
    padding-top: 3rem;
}
#header a#logo {
    display: block;
    width: 16.5rem;
    height: 31.2rem;
    background: transparent url(../images/kungfu/KungfuLogo.png) no-repeat;
    background-size: contain;
}
#header a#logo span { position: absolute; top: -40rem; }


/* ------------------ Content wrap ------------------ */
#content-wrap {
    width: calc(100% - 17rem);
    float: left;
}


/* ------------------ Top navigation ------------------ */
#navigation {
    height: 12rem;
    position: relative;
    background: transparent url(images/bg-content-top.png) no-repeat bottom;
    background-size: 100% auto;
}
#navigation ul {
    position: absolute;
    right: 6rem;
    bottom: 1.2rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.3rem;
}
#navigation ul li { display: inline-block; }
#navigation ul li a:link,
#navigation ul li a:visited {
    color: #fff;
    display: block;
    width: 9.7rem;
    height: 4rem;
    font-size: 1.3em;
    text-align: center;
    line-height: 2.6em;
    text-decoration: none;
    background: transparent url(images/bg-nav-link.png) no-repeat 0 0;
}
#navigation ul li a:hover {
    background-position: 0 -4.9rem;
    color: #000;
}
#navigation ul li.home a:link,
#navigation ul li.home a:visited {
    width: 3.5rem;
    position: relative;
    overflow: hidden;
    background: transparent url(images/bg-nav-link.png) no-repeat -3.2rem -10.8rem;
}
#navigation ul li.home a span { position: absolute; top: -10rem; }


/* ------------------ Content area ------------------ */
#content {
    text-align: center;
    min-height: 30rem;
    position: relative;
    padding: 1rem 5rem 20rem 5rem;
    background: transparent url(images/bg-content.png) repeat-y;
    background-size: 100% auto;
}
.img-stl { border: 0.3rem solid #333; margin: 3rem auto 1rem auto; }


/* ------------------ Breadcrumbs ------------------ */
.breadcrumbs {
    font-size: 1.2em;
    padding-bottom: 1.5rem;
    text-align: right;
}
.breadcrumbs a:link,
.breadcrumbs a:visited { color: #d4af37; }
.breadcrumbs a:hover { color: #b8860b; }
.breadcrumbs span { color: #666; }
.breadcrumb-category { display: none; }
.breadcrumb-category.active { display: inline; }


/* ------------------ Tab-box content wrapper ------------------ */
.tab-box-content {
    padding: 0.5rem 0 0 0;
}
.tab-box-content ul {
    direction: rtl;
    padding: 0 2rem 2rem 0;
    font-size: 100%;
    list-style-type: square;
    text-align: right;
}
.tab-box-content ul li { font-size: 1.3em; line-height: 1.5em; }
.tab-box-content li li { font-size: 100%; list-style-type: square; margin-right: 1rem; }
.tab-box-content p.intro,
.tab-box-content span.intro,
.seperator {
    text-align: center;
    padding-bottom: 3.5rem;
    margin-bottom: 1rem;
    background: transparent url(../images/bg-intro.gif) no-repeat bottom center;
}


/* ------------------ Gallery ------------------ */
.gallery { padding-bottom: 2rem; overflow: hidden; }
.gallery-title { font-size: 1.4em; text-align: right; padding: 1rem 0; direction: rtl; }
.gallery a { margin: 0.4rem; display: block; float: right; }
.gallery a img {
    border: 0.2rem solid #930;
    padding: 0.1rem;
    max-width: 100%;
    height: auto;
}
.gallery a:hover img { border-color: #FFB27F; }
.gallery br { clear: both; display: block; height: 2rem; }


/* ------------------ Articles ------------------ */
.article { width: 60%; margin: 0 auto; }
.img-article { border: 0.3rem solid #c60; }
.img-left { float: left; margin: 0.5rem 2rem 1rem -9rem; }
.img-right { float: right; margin: 0.5rem -9rem 1rem 2rem; }

.nav-articles {
    font-size: 1.5em;
    background: #faece8;
    padding: 1rem;
    width: 60%;
    margin: 1rem auto;
    border-radius: 1rem;
}
.nav-articles a { white-space: nowrap; line-height: 1.6em; padding: 0.3rem; }


/* ------------------ Footer ------------------
   Compact horizontal strip mirroring the parent stylen.css pattern:
   - short height (4em) so it reads as a footer bar, not a body section
   - bg-content-bottom.png anchored at top so the paper's ragged edge
     visually connects the content paper texture to the footer strip
   - nav links: small inline black pills, centered
   - phone: absolute-positioned black pill on the right
   The Shaolin `.imgg` silhouette from the original design is not
   restored because ../images/kungfu/shaulin.png is missing from the
   filesystem; the `<div class="imgg">` in the HTML stays empty. */
#footer {
    clear: both;
    height: 4em;
    position: relative;
    background: transparent url(images/bg-content-bottom.png) no-repeat top;
    background-size: 100% auto;
    direction: rtl;
    text-align: center;
}
/* Flex row with space-between spreads the nav pills evenly.
   In RTL, the first DOM item (דף הבית) lands at the start (right),
   the last item (צור קשר) lands at the end (left). Right-padding
   reserves ~22rem for the absolutely-positioned .phone box so it
   doesn't overlap דף הבית on the right; left-padding gives צור קשר
   breathing room from the pagoda decoration in the bottom-left. */
#footer ul {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 1.4em 20rem 0 17rem;
    list-style: none;
}
#footer ul li { display: inline-block; }
#footer ul li a:link,
#footer ul li a:visited {
    display: inline-block;
    background: #000;
    color: #eee;
    margin: 0 0.4rem;
    padding: 0.2rem 0.6rem;
    text-decoration: none;
    font-size: 1.1em;
    border-radius: 0.3rem;
}
#footer ul li a:hover { background: #333; color: #d4af37; }

#footer .phone {
    position: absolute;
    right: 1rem;
    bottom: 0.5rem;
    color: #fff;
    font-size: 1.3em;
    background: #000;
    padding: 0.2rem 0.6rem;
    border-radius: 0.3rem;
}

/* Decorative Shaolin pagoda silhouette in the bottom-left of the page.
   Positioned absolutely against #footer (which is position: relative),
   with a small negative left offset so it slightly overhangs the paper
   frame - matching Kungfuteacher.html's visual reference (~170x130).
   Mobile keeps this hidden via the override inside the @media block. */
.imgg {
    position: absolute;
    left: -3rem;
    bottom: 0;
    width: 17rem;
    height: 13rem;
    background: url(../images/kungfu/shaulin.png) no-repeat left bottom;
    background-size: contain;
    display: block;
    z-index: 1;
    pointer-events: none;
}


/* ------------------ Contact form (widescreen defaults) ------------------ */
#content-a { width: 24%; float: right; padding-top: 1.4rem; }
#content-b { width: 68%; float: right; margin-right: 3rem; }
#content-a p { font-weight: bold; letter-spacing: 0.1rem; }
#content-a p.tel {
    padding: 0.2rem 0;
    text-align: center;
    margin-bottom: 0.5rem;
    background: #333;
    color: #fff;
}

#contactForm { direction: rtl; }
#contactForm fieldset { padding-bottom: 4rem; }
#contactForm p { font-size: 1.2em; padding: 0.5rem 0; }
#contactForm label { display: block; width: 8em; float: right; }
#contactForm em { color: red; font-style: normal; font-family: Verdana; }
#contactForm input,
#contactForm textarea {
    background-color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #930;
    border: 0.3rem double #930;
}
#contactForm input { padding: 0.4rem; width: 20em; }
#contactForm textarea { width: 27em; overflow: auto; padding: 0.2rem 0.4rem; direction: rtl; }
#contactForm input[type=text]:focus,
#contactForm textarea:focus {
    background-color: #930;
    border-color: #930;
    color: yellow;
}
#contactForm p.formButtons { padding-right: 8em; clear: both; }
#contactForm p.formButtons input {
    width: auto;
    float: right;
    cursor: pointer;
    font-weight: bold;
    margin-left: 0.4rem;
    display: block;
    border: 0.1rem solid #333;
    background: #333;
    color: #eee;
}
#contactForm p.formButtons input:hover {
    border-color: #930;
    background: #930;
}
#contactForm legend { display: none; }
#contactForm span.cursor { cursor: pointer; }
#contactForm #Error_msg {
    margin-right: 8em;
    padding: 0.3rem 1rem;
    background-color: yellow;
    color: #666;
    display: block;
    float: right;
    margin-bottom: 1rem;
}


/* ------------------ English overrides ------------------ */
#en p { direction: ltr; text-align: left; }
#en h1, #en h2, #en h3 { direction: ltr; text-align: center; }
#en #navigation ul li a:link,
#en #navigation ul li a:visited {
    font-size: 1.1em;
    line-height: 3.1em;
}
#fb { text-align: right; }


/* ------------------ Mobile-only widgets: hidden on widescreen ------------------ */
.mobile-toggle,
.mobile-nav,
.mobile-contact-container,
.mobile-contact-wrapper,
.water-btn,
.floating-actions,
img.show-on-mobile,
#whatsapp-btn {
    display: none;
}


/* ------------------ Image slider (widescreen) ------------------
   Sits at the top of #content, above the h1/breadcrumbs. Uses the same
   .slider-container/.slider/.slide/.slider-nav markup as mobile, and
   the same slider JS drives it (auto-advance every 5s). Sized to fit
   comfortably inside the ~780px content column with a 3:2 frame.

   Selectors here mirror the specificity of the mobile @media block so
   the mobile block (which is later in source order) cleanly overrides
   these rules on ≤900px viewports without any specificity fight. */
.slider-container.show-on-mobile {
    display: block;
    width: 100%;
    max-width: 60rem;                                              /* 600px */
    aspect-ratio: 3 / 2;
    margin: 0 auto 2rem;
    position: relative;
    padding: 0;
    overflow: visible;
    font-size: 0;
    line-height: 0;
}
.slider-container.show-on-mobile > .slider {
    width: 100%;
    height: 100%;
    position: relative;
}
.slide {
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0.3rem solid #333;
    box-sizing: border-box;
    overflow: hidden;
}
.slide:first-child { display: block; }
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}
/* Slide caption: translucent bar at the bottom of the active slide.
   Uses rem (not em) because the container above sets font-size:0 to
   collapse inline whitespace, which would otherwise nuke an em value. */
.slide-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6rem 1rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.6rem;                                             /* 16px */
    line-height: 1.3;
    text-align: center;
    direction: rtl;
    z-index: 102;
}
/* Nav overlay + arrows */
.slider-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 103;
    pointer-events: none;
}
.slider-nav .prev,
.slider-nav .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4rem;
    height: 4rem;
    padding: 0;
    margin: 0;
    pointer-events: auto;
    cursor: pointer;
    z-index: 104;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 0;
    outline: 0;
    opacity: 0.85;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.slider-nav .prev {
    left: -1rem;
    background-image: url('../images/nextlabel.gif');
}
.slider-nav .next {
    right: -1rem;
    background-image: url('../images/prevlabel.gif');
}
.slider-nav .prev:hover,
.slider-nav .next:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}


/* ==========================================================================
   Mobile block — single query, matches parent stylen.css breakpoint (900px)
   Overrides everything above for phone + tablet + small-laptop viewports.
   ========================================================================== */

@media only screen and (max-width: 900px) {

    /* Restore html root to browser default (16px) inside the mobile block.
       Every rem-based mobile rule below (mobile-toggle, logo, WhatsApp FAB,
       water button, etc.) was designed against a 16px root, so this reset
       neutralises the widescreen 62.5% root and keeps mobile unchanged. */
    html { font-size: 100%; }

    /* ---- Base ----
       80% of browser default (~12.8px) — bumped up from 70% so paragraph
       text clears the 16px WCAG readability threshold and tab-box list
       items don't feel cramped in Hebrew. All em-based sizes above scale
       proportionally from this root. */
    body {
        font-size: 80%;
        background: #fff url(images/kfbg1m.png) no-repeat fixed;
        background-size: 100% auto;
        text-align: center;
    }

    /* Flex column so the paper (#content) always stretches to the footer strip */
    #container {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        padding: 0;
        margin: 0 auto;
    }
    #content-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        float: none;
    }
    #content { flex: 1; }

    /* ---- Typography centered on mobile ---- */
    h1, h2, h3, .intro { text-align: center; }
    h1 { position: relative; z-index: 101; }
    h2 {
        text-align: center;
        width: 100%;
        margin: 1rem auto;
    }
    p {
        width: 100%;
        max-width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    /* ---- Header: logo sits fixed *below* the hamburger toggle ---- */
    /* IMPORTANT: reset z-index to auto here. The widescreen rule sets
       #header { z-index: 10 } and per the CSS Flexbox spec, z-index other
       than auto on a flex item creates a stacking context *even when
       position is static*. That would trap the logo inside #header's
       stacking context (z=10) which is below #navigation (z=999), so no
       matter how huge the logo's z-index is, the nav would paint on top
       of it. Setting z-index: auto here dissolves that stacking context
       and lets the logo compete for painting order in the root. */
    #header {
        position: static;
        z-index: auto;
        height: auto;
        width: 100%;
        float: none;
        padding: 0;
    }
    /* Logo sits on top of the paper-edge navigation strip, below the hamburger,
       right-aligned. Just the raw PNG with a soft drop-shadow - drop-shadow
       (unlike box-shadow) follows the actual silhouette of the PNG rather than
       its rectangular bounding box, so the shadow traces the logo's real edges.
       Sized in rem for a consistent physical size at any viewport. */
    #header a#logo {
        position: fixed;
        top: 5.5rem;                                               /* pushed further down onto the nav strip */
        right: 0.5rem;
        left: auto;
        z-index: 2147483000;                                       /* max-out: above every other layer, always */
        width: 5.5rem;
        height: 5.5rem;                                            /* square: KungfuLogo.png is 165x165 (1:1) */
        margin: 0;
        background: url(../images/kungfu/KungfuLogo.png) no-repeat center / contain;
        filter: drop-shadow(0 0.25rem 0.4rem rgba(0, 0, 0, 0.6));
    }

    /* ---- Hamburger toggle (small, top-right) ---- */
    .mobile-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 1000001;
        width: 3rem;
        height: 3rem;
        min-width: 3rem;
        padding: 0;
        margin: 0;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        border: 0.15rem solid rgba(255, 255, 255, 0.85);
        border-radius: 0.7rem;
        cursor: pointer;
        box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }
    .mobile-toggle:hover {
        background: rgba(0, 0, 0, 0.95);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    }
    .mobile-toggle::before {
        content: "☰";
        font-size: 2rem;
        line-height: 1;
        transition: all 0.3s ease;
    }
    .mobile-toggle.active::before {
        content: "×";
        font-size: 2.4rem;
        transform: rotate(180deg);
    }

    /* ---- Hamburger nav ----
       Slides down from below the logo (which sits below the hamburger).
       Uses transform: translateY(-100%) instead of top: -100% so the menu is
       hidden by *its own* height (not the viewport's). Prevents the bottom of
       a tall menu from leaking into view on short viewports. */
    .mobile-nav {
        display: block;
        position: fixed;
        top: 11.5rem;                                              /* below logo (top:5.5rem + 5.5rem) + 0.5rem gap */
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 11.5rem);
        overflow-y: auto;
        padding: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1000000;
        transform: translateY(calc(-100% - 11.5rem));
        transition: transform 0.3s ease-in-out, padding 0.3s ease-in-out;
    }
    .mobile-nav.active {
        transform: translateY(0);
        padding: 1.5rem;
    }
    .mobile-nav a {
        display: block;
        padding: 1.5rem 0;
        margin: 0.5rem 0;
        color: #fff;
        text-align: center;
        text-decoration: none;
        font-size: 1.6rem;
        width: 100%;
        opacity: 0;
        transform: translateY(-2rem);
        transition: all 0.3s ease;
    }
    .mobile-nav.active a {
        opacity: 1;
        transform: translateY(0);
    }
    .mobile-nav a:nth-child(1) { transition-delay: 0.1s; }
    .mobile-nav a:nth-child(2) { transition-delay: 0.2s; }
    .mobile-nav a:nth-child(3) { transition-delay: 0.3s; }
    .mobile-nav a:nth-child(4) { transition-delay: 0.4s; }
    .mobile-nav a:nth-child(5) { transition-delay: 0.5s; }
    .mobile-nav a:nth-child(6) { transition-delay: 0.6s; }
    .mobile-nav a:nth-child(7) { transition-delay: 0.7s; }
    .mobile-nav a:hover { color: rgba(153, 51, 0, 1); background: transparent; }

    /* ---- Frozen top header: temple image + paper's top edge, always visible.
           #navigation spans the top of the viewport as a fixed layer with two
           stacked backgrounds. With nav_height = 34.5vw, the paper edge
           occupies y≈22.96vw-34.5vw and its rope line (lower ~70% of the 90px
           image) lands at approximately 34.5vw - 0.3*11.54vw ≈ 31vw.

           Solid white fallback prevents any transparent pixels in the paper-edge
           png from letting scrolled content bleed through the header. */
    #navigation {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw;
        height: 34.5vw;
        margin: 0;
        padding: 0;
        background:
            url(images/bg-content-top.png) no-repeat bottom / 100vw 11.54vw,
            url(images/kfbg1m.png)         no-repeat top    / 100vw 33.36vw,
            #fff;
        z-index: 999;
    }
    #navigation ul { display: none; }

    /* ---- Content area ----
           padding-top: 34.5vw pushes readable content clear of the frozen header.
           The paper texture is sized to 100vw wide (matching the header strip
           above it) so their jagged black side edges line up perfectly.
           background-position: center 34.5vw anchors the first paper tile to
           the header's bottom edge, so the paper-top-edge in the header and
           the paper texture below meet at a clean seam. */
    #content {
        text-align: center;
        padding: 34.5vw 2rem 2rem 2rem;
        background: transparent url(images/bg-content.png) repeat-y center 34.5vw / 100vw auto;
        margin-bottom: 0;
    }

    /* ---- Image handling ---- */
    img { max-width: 100%; height: auto; }
    img:not(.show-on-mobile) { display: none; }
    img.show-on-mobile {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 1rem auto;
        padding: 1rem 0;
    }

    /* ---- Hide desktop-only chrome ---- */
    .gallery,
    .gallery-title,
    .breadcrumbs { display: none; }

    /* Slider now lives inside .tab-box-content right after <h1>. Both
       widescreen and mobile follow DOM order, so the slider renders
       below the h1 on every viewport - no flex reordering needed. */

    /* ---- Mobile image slider ----
           aspect-ratio: 3/2 keeps the frame proportional at every viewport size
           and eliminates the empty space that appeared with the old fixed
           28.8rem height (the images never filled the tall box).
           The intermediate .slider wrapper needs height: 100% - without it the
           height chain (.slider-container → .slider → .slide → img) breaks,
           because .slide { height: 100% } would resolve against an auto-height
           .slider and collapse to 0. */
    .slider-container.show-on-mobile {
        display: block;
        width: 100%;
        max-width: 46rem;
        aspect-ratio: 3 / 2;
        margin: 0.5rem auto 2rem;
        position: relative;
        z-index: 100;
        padding: 0;
        overflow: visible;
        font-size: 0;
        line-height: 0;
    }
    .slider-container.show-on-mobile > .slider {
        width: 100%;
        height: 100%;
    }
    .slide {
        display: none;
        width: 100%;
        height: 100%;
        position: relative;
        margin: 0;
        padding: 0;
        border: 0.2rem solid #333;
        box-sizing: border-box;
        overflow: hidden;
    }
    .slide:first-child { display: block; }
    .slide img,
    #content-wrap #content img.show-on-mobile {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        margin: 0;
        padding: 0;
        vertical-align: bottom;
    }
    .slider-nav {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 103;
        pointer-events: none;
    }
    /* Arrow gifs are 40x77 (tall). Match the old kstyle sizing so they render
       as thin vertical chevrons, not chunky squares.
       Explicit background-color/border/padding/outline resets are required
       because these are <button> elements - without them the user-agent's
       default button chrome (light 'buttonface' fill + 2px outset border)
       leaks through around the arrow gifs, which is why the adults page
       looked pale/washed-out compared to the kids page. */
    .slider-nav .prev,
    .slider-nav .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 5rem;
        height: 5rem;
        padding: 0;
        margin: 0;
        pointer-events: auto;
        cursor: pointer;
        z-index: 104;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: 0;
        outline: 0;
        opacity: 0.7;
        transition: opacity 0.3s ease;
    }
    .slider-nav .prev {
        left: -1.2rem;                                              /* slightly overhanging the slider frame */
        background-image: url('../images/nextlabel.gif');
    }
    .slider-nav .next {
        right: -1.2rem;                                             /* symmetric outward push on the right */
        background-image: url('../images/prevlabel.gif');
    }
    .slider-nav .prev:hover,
    .slider-nav .next:hover,
    .slider-nav .prev:active,
    .slider-nav .next:active {
        background-color: transparent;
        opacity: 1;
    }
    .title-wrapper,
    .slide-title { display: none; }

    /* ---- Mobile contact iframe ---- */
    .mobile-contact-container {
        display: block;
        margin: 2rem auto;
        z-index: 99999;
    }
    .mobile-contact-container iframe {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 45rem;
        border: none;
        margin: 0 auto;
    }

    /* WhatsApp click-to-call button intentionally hidden on mobile.
       The widescreen default (#whatsapp-btn { display: none }) cascades here
       because no override is present in this @media block. */

    /* ---- Animated water CTA ----
       Selector uses a.water-btn:link/:visited (specificity 0,2,1) so it beats
       the generic a:link { color: #930 } rule that was making the label
       invisible on the brown gradient. */
    a.water-btn,
    a.water-btn:link,
    a.water-btn:visited {
        display: block;
        width: 78%;
        max-width: 32rem;
        margin: 1.5rem auto;
        padding: 1.1rem 1.6rem;
        background: linear-gradient(45deg,
            rgba(0, 0, 0, 0.92),
            rgba(105, 105, 105, 0.92),
            rgba(0, 0, 0, 0.92)
        );
        background-size: 200% 200%;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.5rem;
        font-weight: 900;
        letter-spacing: 0.05rem;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        text-shadow: 0 0.1rem 0.15rem rgba(0, 0, 0, 0.6);
        border-radius: 3.5rem;
        border: none;
        box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(0.3rem);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        animation: kf-wave 3s infinite linear;
        transition: all 0.3s ease-in-out;
    }
    a.water-btn::before {
        content: "";
        position: absolute;
        top: 50%; left: 50%;
        width: 10rem;
        height: 10rem;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
        pointer-events: none;
    }
    a.water-btn:active::before { animation: kf-ripple 0.6s ease-out; }
    a.water-btn:hover {
        background: linear-gradient(45deg,
            rgba(105, 105, 105, 0.95),
            rgba(0, 0, 0, 0.95),
            rgba(105, 105, 105, 0.95)
        );
        background-size: 200% 200%;
        animation: kf-wave 2s infinite alternate;
        transform: translateY(-0.2rem) scale(1.03);
        box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.6);
        text-shadow:
            0 0.15rem 0.3rem rgba(0, 0, 0, 0.6),
            0 0 0.15rem rgba(255, 255, 255, 0.3);
        letter-spacing: 0.1rem;
    }

    /* ---- Buttons on mobile ---- */
    .act a.btn {
        display: inline-block;
        width: auto;
        min-width: 8rem;
        margin: 1rem auto;
        padding: 0.4rem 1.4rem;
        font-size: 1.2rem;
        line-height: 1.2em;
    }
    .act a.btn:hover { background: #444; }

    /* ---- Objects / text blocks ---- */
    .object,
    .text-block {
        width: 100%;
        max-width: 100%;
        word-wrap: break-word;
    }

    /* ---- Footer strip on mobile.
           bg-content-bottom.png is 780x38 - match the strip's aspect with
           padding-top so the paper's bottom edge sits flush against #content. */
    #footer {
        display: block;
        position: relative;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 0;
        margin: 0 auto;
        padding: 0;
        padding-top: 4.87%;
        background: transparent url(images/bg-content-bottom.png) no-repeat top / 100% auto;
        z-index: 1;
    }
    #footer ul,
    #footer .phone,
    #footer .imgg,
    .imgg { display: none; }

    /* ---- Contact form on mobile ---- */
    #content-a,
    #content-b {
        width: 100%;
        float: none;
        margin: 0;
        padding-top: 1rem;
    }
    #contactForm label { width: auto; float: none; text-align: center; }
    #contactForm input,
    #contactForm textarea { width: 90%; max-width: 40rem; }
    #contactForm p.formButtons { padding-right: 0; text-align: center; }
    #contactForm p.formButtons input { float: none; display: inline-block; }

    /* ---- Floating WhatsApp action button (bottom-left on mobile).
           Mirrors the pattern used on drumming.html so the visual language
           is consistent across pages. ---- */
    .floating-actions {
        display: flex;
        position: fixed;
        bottom: 1.5rem;
        left: 1rem;                 /* left side; hamburger is top-right, WhatsApp bottom-left */
        right: auto;
        flex-direction: column;
        gap: 0.8rem;
        z-index: 1000001;           /* above mobile-nav overlay (which is 1000000) */
    }
    .floating-actions .fab-whatsapp {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 3.5rem;
        background: #25d366;        /* official WhatsApp brand green */
        color: #fff;
        border-radius: 50%;
        text-decoration: none;
        font-size: 1.8rem;
        box-shadow:
            0 0.4rem 1rem rgba(0, 0, 0, 0.35),
            0 0 0 0 rgba(37, 211, 102, 0.6);
        transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out, background 0.25s ease-in-out;
        animation: kf-wa-pulse 2.2s infinite ease-out;
    }
    .floating-actions .fab-whatsapp:hover,
    .floating-actions .fab-whatsapp:focus {
        background: #20ba5a;
        transform: scale(1.08);
        box-shadow:
            0 0.6rem 1.4rem rgba(0, 0, 0, 0.45),
            0 0 0 0.6rem rgba(37, 211, 102, 0);
    }
    .floating-actions .fab-whatsapp i { line-height: 1; }

    /* Hide the FAB while the mobile menu overlay is open so it doesn't
       poke through the dark backdrop. */
    body:has(.mobile-nav.active) .floating-actions {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    }
}


/* ------------------ Pulse animation for the WhatsApp FAB ------------------ */
@keyframes kf-wa-pulse {
    0%   { box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.35), 0 0 0 0    rgba(37, 211, 102, 0.55); }
    70%  { box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.35), 0 0 0 1rem rgba(37, 211, 102, 0);    }
    100% { box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.35), 0 0 0 0    rgba(37, 211, 102, 0);    }
}


/* ------------------ Animations used by .water-btn ------------------ */
@keyframes kf-wave {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes kf-ripple {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}


/* ==========================================================================
   English (LTR) overrides
   --------------------------------------------------------------------------
   Scoped under `body#en` so they only kick in on the English twin pages
   (`Kungfuforadultseng.html` etc.). Hebrew pages are unaffected.

   Strategy: keep decorative chrome (hamburger, WhatsApp FAB, footer pagoda)
   anchored in the same physical spots as the Hebrew pages — matching how the
   drumming (parent) site behaves. Only flip the *text-flow* direction and
   the layout floats/paddings that visibly depend on RTL.
   ========================================================================== */
body#en {
    direction: ltr;
    text-align: center;                     /* widescreen: center-align by default */
}

/* Header floats to the opposite side of the paper frame in LTR. */
body#en #header { float: left; }

/* Widescreen: center headings, gallery titles, and content paragraphs so
   the whole English page reads down the middle. Mobile already handles
   h1-h4/p centering in its own @media block; this rule makes the
   widescreen view match. Breadcrumbs are excluded and handled below. */
body#en h1,
body#en h2,
body#en h3,
body#en h4,
body#en p,
body#en .gallery-title,
body#en .actr,
body#en #fb { text-align: center; }

/* Breadcrumbs stay left-aligned in LTR — a "you are here" reading path
   flows more naturally from the start edge of the paper than centered. */
body#en .breadcrumbs { text-align: left; }

/* Anything that explicitly set `direction: rtl` needs to be neutralised. */
body#en .gallery-title,
body#en #contactForm,
body#en #contactForm textarea,
body#en #footer { direction: ltr; }

/* Footer navigation: the widescreen Hebrew rule uses padding-right: 20rem;
   padding-left: 17rem to leave room for the Shaolin pagoda in the bottom-left
   and to push "צור קשר" toward the pagoda side. In LTR we mirror the paddings
   so "Contact" ends up near the pagoda instead of overlapping the phone box. */
body#en #footer ul {
    padding-right: 17rem;
    padding-left: 20rem;
}

/* Phone box in the footer was pinned to the right in RTL — pin to the left
   in LTR so it swaps corners with the pagoda. */
body#en #footer .phone {
    right: auto;
    left: 1rem;
}

/* Widescreen navigation strip — reuse the mirrored bg-content-top-en.png
   we already ship for mobile, so the paper-torn edge and any silhouettes
   flip to match.
   NOTE: the full-viewport body backdrop kfbg1.jpeg is intentionally NOT
   mirrored — its composition is symmetric (mirroring pagodas + central
   gate + mountains on both sides), so an X-flip produces a visually
   identical image and is not worth the extra HTTP request. */
body#en #navigation {
    background-image: url(images/bg-content-top-en.png);
}

/* Shaolin pagoda silhouette (.imgg) — Hebrew anchors it to the bottom-left
   of the footer; mirror it to the bottom-right for English. Also enable
   pointer-events so the element is selectable/inspectable (Hebrew keeps
   pointer-events: none so hover states don't fire on the decorative image;
   English lifts that so you can right-click / DevTools it as needed). */
body#en .imgg {
    left: auto;
    right: -3rem;
    background-position: right bottom;
    pointer-events: auto;
}

/* Nav <ul> anchored to the LEFT of the strip so the home/house icon lands
   in the left corner. In Hebrew it lives on `right: 6rem`; we mirror to
   `left: 6rem`. Also widen the inter-link gap for breathing room. */
body#en #navigation ul {
    right: auto;
    left: 6rem;
    justify-content: flex-start;             /* pack items from the left in LTR */
    gap: 1rem;                               /* was 0.3rem — more breathing room */
}

/* Center the language toggle button horizontally over the logo, and give
   it a bottom margin so it doesn't sit flush against the yin-yang PNG. */
body#en #header {
    text-align: center;
}
body#en #header .btn-language {
    margin-top: 0;
    margin-bottom: 1.5rem;
}


/* Content-list bullets: yin-yang symbol on the left with a subtle gold tint.
   Scoped to .tab-box-content ul so the header nav and footer nav (which use
   <ul> too) don't get bulleted. Overrides the RTL square-bullet defaults from
   the .tab-box-content ul rule earlier in the file. */
body#en .tab-box-content ul {
    direction: ltr;
    text-align: left;
    padding: 0 0 2rem 2rem;                /* flip padding to the left in LTR */
    list-style: none;                       /* we'll draw our own bullets */
}
body#en .tab-box-content ul li {
    position: relative;
    padding-left: 2.4rem;
    text-align: left;
    margin-bottom: 0.6rem;
    line-height: 1.5em;
}
body#en .tab-box-content ul li::before {
    content: "\262F";                       /* ☯ Yin-Yang (U+262F) */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.4em;
    line-height: 1;
    color: #d4af37;                         /* site gold accent */
    text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.35);
}


/* --------------------------------------------------------------------------
   English mobile overrides (≤ 900px)
   Mirrors the media-query breakpoint used higher up in the file so the
   English mobile view diverges from Hebrew only where the user asked for.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

    /* Center headings and body copy on mobile — the LTR text feels off
       when left-aligned inside the narrow paper-scroll column, whereas
       RTL Hebrew is naturally aligned right by the browser. */
    body#en h1,
    body#en h2,
    body#en h3,
    body#en h4,
    body#en p { text-align: center; }

    /* Swap the WhatsApp FAB to the right side on English pages so it
       mirrors the RTL Hebrew layout (where visually the WhatsApp button
       sits on the "start" edge of the mobile viewport). Hebrew keeps it
       on the left because that's the "start" for RTL. */
    body#en .floating-actions {
        left: auto;
        right: 1rem;
    }

    /* Mirror the frozen mobile nav-bar background art. Uses horizontally
       flipped PNG copies (bg-content-top-en.png, kfbg1m-en.png) generated
       once via System.Drawing RotateNoneFlipX. Widescreen isn't touched. */
    body#en #navigation {
        background:
            url(images/bg-content-top-en.png) no-repeat bottom / 100vw 11.54vw,
            url(images/kfbg1m-en.png)         no-repeat top    / 100vw 33.36vw,
            #fff;
    }

    /* Move the hamburger toggle to the top-left corner on English mobile
       so it visually mirrors the Hebrew top-right placement. */
    body#en .mobile-toggle {
        right: auto;
        left: 1rem;
    }

    /* Move the logo to the top-left, tucked under the hamburger, so the
       whole top-of-viewport chrome is a mirror of the Hebrew layout. */
    body#en #header a#logo {
        right: auto;
        left: 0.5rem;
    }
}