/* ==========================================================================
   kara_responsive.css — mobile/tablet overlay for the legacy karaoke.co.il
   fixed-960px theme (kara_style.css). Loaded AFTER kara_style.css + glue_css.

   RULE: desktop (min-width:1000px) must stay pixel-identical — every layout
   override below lives inside @media (max-width:999px) blocks. The only
   base rule is hiding the mobile nav toggle button, which does not exist in
   the legacy design at all.
   ========================================================================== */

/* Mobile nav toggle button — hidden wherever the desktop menu shows. */
.kara_nav_toggle {
    display: none;
}

/* Mobile-only chrome (sticky petite header + social/hamburger row): hidden on
   desktop entirely. */
.kara_sticky,
.kara_nav_row {
    display: none;
}

/* ==========================================================================
   TABLET + MOBILE (< 1000px): fluid shell, stacked columns
   ========================================================================== */
@media (max-width: 999px) {

    /* ---- shell ------------------------------------------------------- */
    div.container {
        width: 100%;
        max-width: 100%;
    }

    div.header {
        width: auto;
        height: auto;
        padding-bottom: 12px;
        background-position: center bottom;
    }

    div.main,
    div.footer {
        float: none;
        width: 100%;
    }

    /* Stack: content first, sidebar below (DOM order is sidebar-first). */
    div.main {
        display: flex;
        flex-direction: column;
        background: none;
    }
    div.main > div.side_index   { order: 2; }
    div.main > div.content_index { order: 1; }

    div.content_index,
    div.side_index {
        float: none;
        width: auto;
    }

    /* Column backgrounds come from main_bg(.inner).gif strips on desktop;
       stacked columns get the sampled flat colours instead. */
    div.main div.content_index              { background: #161616; }
    div.main div.side_index                 { background: #404040; }
    div.main.main_inner div.content_index   { background: #f1f1f1; }
    div.main.main_inner div.side_index      { background: #b9b9b9; }

    .main_inner .content_index {
        display: block;
        margin: 0;
        width: auto;
        padding: 15px 10px;
    }
    .main_inner .side_index { padding-bottom: 6px; }

    /* generic guards */
    div.container img { max-width: 100%; }
    input, select, textarea { max-width: 100%; }

    /* neutral glue pages (login/account) share the karaoke body class */
    body.karaoke .nk-main {
        width: auto;
        max-width: 100%;
    }

    /* ---- header: logo / search / phone / social ----------------------- */
    div.header .line {
        float: none;
        width: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    div.header a.logo {
        float: none;
        margin: 12px auto 0;
    }

    div.header div.block {
        float: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* the empty partner placeholder just eats space on small screens */
    div.header .partner_logo { display: none; }

    /* search: the 227px background sprite becomes a real full-width bar */
    div.header div.search {
        float: none;
        width: calc(100% - 32px);
        max-width: 430px;
        height: auto;
        margin: 12px auto 0;
        padding: 5px 6px;
        background: #ffffff;
        border: 2px solid #d1dc00;
        border-radius: 6px;
        box-sizing: border-box;
    }
    div.header div.search form {
        display: flex;
        align-items: center;
        direction: ltr; /* button left, field right — same visual order as legacy */
    }
    div.header div.search form > div {
        float: none;
    }
    div.header div.search form > div + div {
        flex: 1;
        min-width: 0;
    }
    div.header div.search input.field {
        width: 100%;
        height: 24px;
        box-sizing: border-box;
        direction: rtl;
        font-size: 14px;
    }
    div.header div.search input.search_button,
    .search_button {
        width: 38px;
        height: 26px;
        margin: 0 6px 0 0;
        border-radius: 4px;
        background-color: #d1dc00;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 16px;
    }

    div.header a.phone {
        float: none;
        margin: 10px auto 0;
    }

    /* the standalone social row merges into the hamburger row (below) so the
       header stacks one row less */
    div.header div.block .iconsSocial { display: none; }

    /* ---- header: social icons + hamburger on ONE row ------------------- */
    div.header div.menu {
        float: none;
        display: block;
        width: auto;
        height: auto;
        margin: 12px 12px 0;
        position: relative;
    }

    .kara_nav_row {
        display: flex;
        direction: ltr; /* icons LEFT of the hamburger, per design */
        align-items: center;
        justify-content: center;
        gap: 14px;
    }
    .kara_social_inline {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .kara_social_inline a { display: block; line-height: 0; }
    .kara_social_inline img {
        width: 34px;
        height: auto;
        border-radius: 6px;
    }

    .kara_nav_toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 48px;
        height: 42px;
        padding: 10px 11px;
        margin: 0;
        background: #1d1d1d;
        border: 1px solid #3d3d3d;
        border-radius: 6px;
        cursor: pointer;
        box-sizing: border-box;
    }
    .kara_nav_toggle span {
        display: block;
        width: 100%;
        height: 3px;
        border-radius: 2px;
        background: #d1dc00;
        transition: transform .25s ease, opacity .2s ease;
    }
    .kara_nav_open .kara_nav_toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .kara_nav_open .kara_nav_toggle span:nth-child(2) { opacity: 0; }
    .kara_nav_open .kara_nav_toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* slide-down list (same ul markup as desktop) */
    div.header div.menu ul {
        display: block;
        overflow: hidden;
        max-height: 0;
        margin: 6px 0 0;
        padding: 0;
        background: #171717;
        border-radius: 6px;
        box-shadow: 0 0 0 1px #303030;
        transition: max-height .3s ease;
    }
    div.header div.menu.kara_nav_open ul {
        max-height: 560px;
    }
    div.header div.menu li {
        display: block;
    }
    div.header div.menu li a {
        float: none;
        display: block;
        width: auto;
        height: auto;
        padding: 12px 16px;
        border-bottom: 1px solid #2a2a2a;
        text-align: right;
    }
    div.header div.menu li:last-child a { border-bottom: 0; }
    div.header div.menu li a:hover,
    div.header div.menu li a.current {
        background: #101010; /* replaces the bottom-arrow sprite */
    }

    /* ---- camera slider ------------------------------------------------ */
    /* #camera_container is fixed 644x216 via an ID rule in kara_style.css
       (line 5695) — the ID selector here is required to out-rank it. The
       camera plugin gets height:'33.54%' (216/644) from home.php, so once
       the container is fluid it recomputes a proportional height itself. */
    #camera_container,
    div.flash {
        width: 100%;
        height: auto;
        /* .camera_wrap is position:absolute (camera.css), so the container
           must own its height: same 644:216 ratio the plugin computes. */
        aspect-ratio: 644 / 216;
    }
    div.flash object,
    div.flash embed,
    div.flash img {
        width: 100%;
        height: auto;
    }

    /* ---- home: songs grid --------------------------------------------- */
    div.songs {
        width: auto;
        height: auto;
        padding: 12px;
    }
    div.songs .line,
    div.wanted .line {
        float: none;
        width: auto;
        min-height: 0;
        display: flex;
        flex-wrap: wrap;
        column-gap: 10px;
        row-gap: 14px;
    }
    .song_box {
        float: none;
        width: calc((100% - 22px) / 3); /* 2px slack vs the 2x10px gaps: sub-pixel rounding must not wrap the row */
        height: auto;
        min-height: 0;
    }
    .song_box_separator { display: none; }
    .songs_separator_horizontal { float: none; width: auto; clear: both; }

    a.song_image {
        position: relative;
        float: none;
        display: block;
        width: 100%;
        height: auto;
    }
    a.song_image img {
        float: none;
        display: block;
        width: 100%;
        height: auto;
    }
    .watermark_song_img,
    .watermark_song_img_sec,
    .watermark_song_img_orig,
    .watermark_song_img_sec_orig {
        float: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        background-size: 100% 100%;
    }
    .song_box_text {
        float: none;
        display: block;
        margin-right: 0;
        width: auto;
        height: auto;
        min-height: 70px;
    }

    /* ---- home: most-wanted grid --------------------------------------- */
    div.wanted {
        width: auto;
        height: auto;
        padding: 15px;
    }
    div.wanted h2 { width: auto; }
    .wanted_box {
        float: none;
        display: flex;
        align-items: flex-start;
        column-gap: 6px;
        padding: 0;
        width: calc((100% - 22px) / 3); /* 2px slack vs the 2x10px flex gaps (rounding guard) */
        height: auto;
        min-height: 68px;
    }
    .wanted_image_box {
        float: none;
        flex: 0 0 85px;
    }
    a.wanted_title {
        float: none;
        flex: 1;
        width: auto;
        min-width: 0;
    }
    .wanted_box_separator { display: none; }
    .wanted_box_separator_horizontal { float: none; width: auto; clear: both; }

    /* ---- sidebar boxes ------------------------------------------------ */
    div.about,
    div.dvd_recent,
    div.login_box,
    div.dvd_month,
    div.categories,
    div.newsletter,
    div.new_songs {
        width: auto;
        height: auto;
    }
    div.about       { min-height: 0; }
    div.login_box   { min-height: 0; }
    div.dvd_month   { min-height: 205px; }
    div.newsletter  { min-height: 0; }

    div.about h1,
    div.login_box h2,
    div.dvd_recent h2,
    div.dvd_month h2,
    div.categories h2,
    div.newsletter h2,
    div.new_songs h2 {
        width: auto;
    }

    img.my_banner {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }

    .item_one, .item_two { width: calc(50% - 8px); }

    div.newsletter form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .newsletter .field { float: none; }
    .newsletter .send  { float: none; }

    /* ---- listing chrome ----------------------------------------------- */
    .main_title, .subtitle {
        width: auto;
        height: auto;
        min-height: 24px;
        background-size: 100% 100%;
    }

    .content {
        float: none;
        display: block;
        margin: 0;
        width: auto;
    }
    .content img    { max-width: 100%; height: auto; }
    .content iframe { max-width: 100%; }
    .content table  { max-width: 100%; }

    .prevnext {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 18px;
        width: auto;
        height: auto;
        margin: 3px 0 16px;
    }
    .prevnext .showing,
    .prevnext .filtering,
    .prevnext .turning {
        float: none;
        margin: 0;
        height: auto;
    }

    .result_box {
        float: right;
        margin: 12px;
        width: calc(50% - 24px);
        min-height: 66px;
    }
    a.result_text {
        width: calc(100% - 85px);
    }
    .result_box_song {
        width: calc(33.33% - 24px);
    }
    .result_box_song a.result_text {
        width: calc(100% - 85px);
    }

    .prevnext_links {
        float: none;
        clear: both; /* must drop below the floated result rows */
        display: flex;
        justify-content: center;
        gap: 24px;
        width: auto;
        min-height: 0;
        padding: 8px 0 14px;
    }
    a.prev_page, a.next_page { flex: 0 0 auto; }
    a.prev_page { float: none; margin-right: 0; }
    a.next_page { float: none; margin-left: 0; }

    /* ---- song page ---------------------------------------------------- */
    .big_song {
        float: none;
        display: flow-root; /* contain the floated img/border/like children */
        margin: 18px auto 0;
    }
    .song_details {
        float: none;
        display: block;
        width: auto;
        margin: 14px 0 0;
    }
    /* Un-floated .song_clip rows must still contain their floated
       name/download/play children — flow-root keeps them self-clearing. */
    .song_clip {
        float: none;
        display: flow-root;
        width: auto;
        background-size: 100% 2px;
    }
    .song_clip.song_pitch {
        display: flex; /* the pitch widget keeps its legacy flex layout */
    }
    .song_rdetails {
        float: none;
        display: flow-root;
        width: auto;
        margin: 0 11px;
    }
    .song_ldetails {
        float: none;
        display: flow-root;
        width: auto;
        margin: 10px 11px 0;
    }
    .song_titles h2 {
        width: auto;
        max-width: calc(100% - 140px);
    }

    /* ---- artists index ------------------------------------------------ */
    .content .artists_grid a { width: 48%; }

    /* ---- footer ------------------------------------------------------- */
    div.footer {
        width: auto;
        height: auto;
        padding: 15px 10px 18px;
    }
    div.footer ul.menu li {
        display: inline-block;
        padding: 2px 0;
    }
    div.footer div.credit {
        padding: 10px 6px 0;
        line-height: 1.8;
    }
}

/* ==========================================================================
   PHABLET (< 768px): grids 3 → 2 columns
   ========================================================================== */
@media (max-width: 767px) {
    .song_box   { width: calc((100% - 12px) / 2); }
    .wanted_box { width: calc((100% - 12px) / 2); }
    .result_box_song { width: calc(50% - 24px); }
}

/* ==========================================================================
   SMALL (< 600px): listing rows stack
   ========================================================================== */
@media (max-width: 599px) {
    .result_box      { width: calc(100% - 24px); }
    .result_box_song { width: calc(100% - 24px); }
    .song_titles h2  { max-width: 100%; }
}

/* ==========================================================================
   MOBILE STICKY PETITE HEADER (< 1000px): appears after scrolling past the
   full header — logo symbol on the LEFT, hamburger on the RIGHT.
   ========================================================================== */
@media (max-width: 999px) {
    .kara_sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 960;
        display: flex;
        direction: ltr; /* symbol left, menu right, per design */
        align-items: center;
        justify-content: space-between;
        height: 54px;
        padding: 0 10px 0 12px;
        box-sizing: border-box;
        background: rgba(16, 17, 19, .97);
        box-shadow: 0 2px 16px rgba(0, 0, 0, .55);
        transform: translateY(-100%);
        transition: transform .28s ease;
    }
    body.kara_stuck .kara_sticky { transform: none; }

    /* the K symbol sits top-center of the 211x99 lockup — crop it out */
    .kara_sticky_logo {
        position: relative;
        display: block;
        width: 46px;
        height: 46px;
        overflow: hidden;
        border-radius: 10px;
    }
    .kara_sticky_logo img {
        position: absolute;
        top: -1px;
        left: 50%;
        width: 211px;
        height: 99px;
        max-width: none;
        margin-left: -105px;
    }

    .kara_sticky .kara_nav_toggle {
        width: 46px;
        height: 40px;
        margin: 0;
    }

    /* menu panel opened from the sticky bar drops fixed beneath it */
    body.kara_stuck div.header div.menu.kara_nav_open ul {
        position: fixed;
        top: 58px;
        left: 10px;
        right: 10px;
        z-index: 955;
        max-height: min(70vh, 560px);
        overflow: auto;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
    }
}

/* ==========================================================================
   PHONE (< 480px): grids 1 column, hide phone banner
   ========================================================================== */
@media (max-width: 479px) {
    div.header a.phone { display: none; }

    .song_box {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    .wanted_box { width: 100%; }

    .content .artists_grid a { width: 100%; }

    a.prev_page, a.next_page { margin: 0; }
    .prevnext_links { gap: 12px; }
}