@charset "utf-8";
/* ==========================================================================
   responsive.css
   Modernnomads.mn — Responsive давхарга

   ЗОРИЛГО:
   Одоогийн PHP/HTML код дотор олон газар шууд "style='width:1000px;'"
   маягийн fixed-pixel inline style ашигласан байдаг тул үүнийг бүх файл
   дээр гараар засахын оронд ганц энэ CSS файлаар "override" хийж,
   Responsive болгож байна.

   АРГАЧЛАЛ:
   [style*="width:1000px"] маягийн attribute selector нь HTML-ийн inline
   style="" утга дотроос тухайн текстийг шууд хайж олдог тул !important-тай
   хослуулбал fixed-width-ийг ямар ч PHP файл дээр гараар засалгүйгээр
   Responsive болгож чадна. Энэ бол хуучин сайтуудыг эрсдэлгүй,
   HTML/PHP-д хамгийн бага хөндлөгөө хийж Responsive болгох стандарт арга.

   Ачаалах дараалал: style.css → style-new.css → font.css → responsive.css
   (responsive.css СҮҮЛД ачаалагдана, ингэснээр давхардсан заалтуудыг дийлнэ)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Root variables & base reset
   -------------------------------------------------------------------------- */
:root{
    --nm-orange: #f58220;
    --nm-orange-dark: #e1690c;
    --nm-text: #474747;
    --nm-max-width: 1000px;
    --nm-gutter: 16px;
}

*, *::before, *::after{
    box-sizing: border-box;
}

html{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img{
    max-width: 100%;
    height: auto;
}

/* Зураг доторх height:XXpx гэсэн inline attribute-ийг эвдэхгүйн тулд
   зөвхөн layout container-үүдэд max-width хэрэглэнэ, лого/icon зурагт
   хэрэглэхгүй (доор тусад нь өргөтгөл өгсөн) */
a img[height]{
    max-width: 100%;
    width: auto;
}

/* --------------------------------------------------------------------------
   1. Үндсэн container-үүд (1000px цуврал) — бүх хуудсанд ашиглагддаг
   -------------------------------------------------------------------------- */
div[style*="width:1000px"]{
    width: 100% !important;
    max-width: var(--nm-max-width);
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Үндсэн 2 багана бүхий layout (агуулга 700-770px + баруун цэс 220-250px)
   Mobile дээр багануудыг доогуур нь дараалуулж (stack) харуулна.
   -------------------------------------------------------------------------- */
@media (max-width: 900px){

    div[style*="width:800px"],
    div[style*="width:770px"],
    div[style*="width:760px"],
    div[style*="width:750px"],
    div[style*="width:730px"],
    div[style*="width:700px"]{
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    div[style*="width:220px"],
    div[style*="width:222px"],
    div[style*="width:230px"],
    div[style*="width:240px"],
    div[style*="width:250px"]{
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
    }

    /* float:left/float:right general fallback — эдгээрийг эхэлж
       stack хийхийн тулд бүх ерөнхий давхар баганан хэсгүүдийг
       дараалуулна. Товч/жижиг элемент (лого, icon) -д нөлөөлөхгүй
       байхын тулд зөвхөн дээрх өргөнтэй хослуулсан. */
}

/* --------------------------------------------------------------------------
   3. HEADER / TOP NAV — desktop дээрх hover-dropdown цэсийг
   mobile дээр hamburger товч бүхий stacked цэс болгоно.
   -------------------------------------------------------------------------- */

#nm-mobile-toggle{
    display: none;
}

@media (max-width: 900px){

    /* Лого мөр */
    #nm-header-inner{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    /* Hamburger товч харуулна */
    #nm-mobile-toggle{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        cursor: pointer;
        margin-left: auto;
    }
    #nm-mobile-toggle span,
    #nm-mobile-toggle::before,
    #nm-mobile-toggle::after{
        content: "";
        display: block;
        width: 26px;
        height: 3px;
        background: var(--nm-orange);
        border-radius: 2px;
        position: relative;
    }
    #nm-mobile-toggle::before{ margin-bottom: 6px; }
    #nm-mobile-toggle::after{ margin-top: 6px; }

    /* Үндсэн цэсийг стандарт байдлаар нуусан, JS/checkbox toggle-оор нээгдэнэ */
    #headline{
        display: none !important;
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        text-align: left !important;
        order: 3;
    }
    #headline.nm-open{
        display: block !important;
    }
    #headline .menu{
        float: none !important;
        display: block !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    #headline .menu ul{
        position: static !important;
        height: auto !important;
        transform: none !important;
        display: block !important;
    }
    .menu:hover ul{
        height: auto !important;
    }
    #headline .menu ul li{
        margin-left: 0 !important;
        left: 0 !important;
        padding-left: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   4. Rightmenu / ourres (баруун талын жагсаалт) — mobile дээр card маягаар
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
    #rightmenu-link,
    #rightmenu-link-news{
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   5. Хоолны цэс/food-menu, restaurant grid — жижиг дэлгэцэнд нэг баганаар
   -------------------------------------------------------------------------- */
@media (max-width: 640px){
    div[style*="width:340px"],
    div[style*="width:300px"],
    div[style*="width:270px"]{
        width: 100% !important;
        float: none !important;
    }
}

/* --------------------------------------------------------------------------
   6. Table зурган карт, icon зэрэг жижиг элементүүд — маш нарийн дэлгэцэнд
   (утасны хэвтээ scroll гарахаас сэргийлнэ)
   -------------------------------------------------------------------------- */
@media (max-width: 420px){
    div[style*="width:160px"],
    div[style*="width:180px"],
    div[style*="width:188px"],
    div[style*="width:190px"],
    div[style*="width:200px"]{
        width: 100% !important;
        float: none !important;
    }
}

/* --------------------------------------------------------------------------
   7. Ерөнхий clear-fix — flex/stack болгосны дараа хуучин clear:both
   div-үүд асуудалгүй ажиллана, гэхдээ давхар зай гарахаас сэргийлж
   зарим тохиолдолд margin-ийг багасгана.
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
    body{
        overflow-x: hidden;
    }
}

/* --------------------------------------------------------------------------
   8. Форм элементүүд (input/textarea) — mobile дээр бүтэн өргөн эзэлнэ
   -------------------------------------------------------------------------- */
@media (max-width: 640px){
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select{
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   9. Typography — жижиг дэлгэцэнд уншихад тохиромжтой хэмжээ
   -------------------------------------------------------------------------- */
@media (max-width: 640px){
    body{
        font-size: 14px;
        line-height: 1.5;
    }
    #respage-res-name,
    #menupage-title{
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
}

/* --------------------------------------------------------------------------
   10. Хоолны цэсний хуудас (index.php?m=9) — card grid загвар
   -------------------------------------------------------------------------- */
.nm-page-wrap{
    max-width: var(--nm-max-width);
    margin: 0 auto;
    padding: 32px 20px 48px;
    background-color: #fff;
    box-sizing: border-box;
}

.nm-page-header{
    margin-bottom: 28px;
    text-align: center;
}

.nm-page-header h1{
    font-family: 'Lato-Bold', 'Lato', sans-serif;
    font-size: 26px;
    color: #333;
    margin: 0 0 6px;
    letter-spacing: 0.3px;
}

.nm-page-header p{
    color: #999;
    font-size: 13px;
    margin: 0;
}

.nm-section-title{
    font-family: 'Lato-SemiBold', 'Lato', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #f58220;
    border-bottom: 2px solid #f58220;
    display: inline-block;
    padding-bottom: 6px;
    margin: 0 0 20px;
}

.nm-menu-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
}

.nm-menu-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 176px;
    min-height: 150px;
    padding: 18px 12px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    text-decoration: none;
    color: #333;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-sizing: border-box;
}

.nm-menu-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
    border-color: #f58220;
}

.nm-menu-card img{
    max-width: 110px;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 12px;
}

.nm-menu-card-name{
    font-family: 'Lato-SemiBold', 'Lato', sans-serif;
    font-size: 14px;
    color: #f58220;
    line-height: 1.35;
}

@media (max-width: 640px){
    .nm-page-wrap{
        padding: 24px 16px 36px;
    }
    .nm-menu-grid{
        justify-content: center;
    }
    .nm-menu-card{
        width: calc(50% - 8px);
    }
}

@media (max-width: 380px){
    .nm-menu-card{
        width: 100%;
    }
}