/* hiimor.com top page safe polish
   This file intentionally does NOT change the main page layout.
   Load after /css/style.css and /css/blog.css. */

@font-face {
    font-family: "MyFont";
    src: url("../fonts/mnglwhiteotf.eot");
    src: url("../fonts/mnglwhiteotf.eot?#iefix") format("embedded-opentype"),
         url("../fonts/mnglwhiteotf.ttf") format("truetype"),
         url("../fonts/mnglwhiteotf.woff") format("woff"),
         url("../fonts/mnglwhiteotf.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --hm-green: #286044;
    --hm-green-deep: #173a2a;
    --hm-gold: #b88a42;
    --hm-paper: #fbf7ed;
    --hm-line: #d8c8aa;
    --hm-shadow: 0 8px 20px rgba(23, 58, 42, 0.14);
}

html,
body {
    font-family: "MyFont", "Mongolian Baiti", "Noto Sans Mongolian", "Segoe UI", sans-serif;
}

/* Keep the original horizontal-scroll layout intact. */
#M_main,
#main-contents,
#contents,
.news-contents,
.wrapper,
.top-flex-wrap,
.blog-list,
.blog-list ul,
.blog-list li,
.blog-list .cfx,
header,
.icon {
    max-width: initial;
}

/* Search: small visual polish only, no layout rewrite. */
#search {
    overflow: hidden;
    background: linear-gradient(90deg, var(--hm-green-deep), #1f7b5b);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    box-shadow: var(--hm-shadow);
}

#search input[type="text"] {
    font-family: "MyFont", "Mongolian Baiti", "Noto Sans Mongolian", sans-serif;
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

#search input[type="image"] {
    border-radius: 8px;
    filter: drop-shadow(0 4px 8px rgba(23, 58, 42, 0.22));
}

/* Category photo polish. Works with /images/aimaglal_nav/acat_*.png. */
.category .a-article {
    transition: transform 0.18s ease;
}

.category .a-article:hover {
    transform: translateY(-2px);
}

.category .a-hairqag {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.92), transparent 36%),
        linear-gradient(145deg, #f2d8a6, #c99f45);
    border: 1px solid rgba(216, 200, 170, 0.88);
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(23, 58, 42, 0.10);
}

.category .a-hairqag::before {
    content: none;
}

.category .a-hairqag::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    height: 42%;
    background: linear-gradient(180deg, transparent, rgba(23, 58, 42, 0.16));
    pointer-events: none;
}

.category .a-hairqag figure {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: calc(100% - 4px);
    aspect-ratio: 1 / 1;
    margin: 2px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 6px;
}

.category .a-hairqag img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    padding: 0;
    filter: drop-shadow(0 8px 10px rgba(23, 58, 42, 0.18));
    transition: transform 0.2s ease;
}

.category .a-article:hover .a-hairqag img {
    transform: translateY(-2px) scale(1.04);
}

.category .a-article:nth-child(6n+1) .a-hairqag {
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.92), transparent 36%),
        linear-gradient(145deg, #f2d8a6, #c99f45);
}

.category .a-article:nth-child(6n+2) .a-hairqag {
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.9), transparent 36%),
        linear-gradient(145deg, #cfe5d5, #5f9d75);
}

.category .a-article:nth-child(6n+3) .a-hairqag {
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.9), transparent 36%),
        linear-gradient(145deg, #d8e1f0, #6d86ad);
}

.category .a-article:nth-child(6n+4) .a-hairqag {
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.9), transparent 36%),
        linear-gradient(145deg, #ead2c8, #b56f58);
}

.category .a-article:nth-child(6n+5) .a-hairqag {
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.9), transparent 36%),
        linear-gradient(145deg, #e5dbef, #8a70aa);
}

.category .a-article:nth-child(6n) .a-hairqag {
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.9), transparent 36%),
        linear-gradient(145deg, #d8ece9, #5e9c98);
}

.category .catn p {
    font-family: "MyFont", "Mongolian Baiti", "Noto Sans Mongolian", sans-serif;
}

/* Keep labels readable without forcing the whole page into a new grid. */
.category .catn p {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    white-space: nowrap;
}