/* ==================================================
   KIAPIC THEME - HEADER
   Header Size: 1200 x 200
   ================================================== */


/* ==================================================
   1. قاب اصلی هدر
   ================================================== */

.site-header {
    width: 1200px;
    max-width: 100%;
    height: 200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    z-index: 1000;
}


/* ==================================================
   2. ردیف اول هدر
   ارتفاع: 133px
   ================================================== */

.header-top {
    width: 100%;
    height: 133px;
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ==================================================
   3. بخش لوگو - سمت راست
   عرض: 450px
   ================================================== */

.header-logo {
    width: 450px;
    height: 133px;
    flex: 0 0 450px;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    direction: rtl;

    margin: 0;
    padding: 0 20px 0 0;

    box-sizing: border-box;
    overflow: hidden;
}

.header-logo a {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    width: 100%;
    height: 100%;
}

.header-logo img {
    display: block;

    width: 250px;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: right center;
}


/* عنوان و توضیحات سایت */

.header-logo .site-title {
    color: #ffffff;
    font-size: 24px;
    text-decoration: none;
}

.header-logo .site-description {
    color: #ffffff;
    margin: 5px 0 0;
}


/* ==================================================
   4. بخش آبی نفتی - سمت چپ
   عرض: 750px
   ================================================== */

.header-left {
    width: 750px;
    height: 133px;
    flex: 0 0 750px;

    position: relative;

    box-sizing: border-box;
}


/* محدوده تاریخ، ساعت و جستجو */




/* ==================================================
   5. تاریخ و ساعت
   ================================================== */

#datetime {
    width: 190px;
    height: 22px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    direction: rtl;
    gap: 4px;
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    white-space: nowrap;
    margin-left: 0;
    padding-left: 0;
}


/* کادر تاریخ */

#datetime #date {
    background-color: #164e63;
    color: #ffffff;

    padding: 4px 6px;
    border-radius: 3px;

    white-space: nowrap;
}


/* کادر ساعت */

#datetime #time {
    background-color: #a52a2a;
    color: #ffffff;

    padding: 4px 6px;
    border-radius: 3px;

    white-space: nowrap;
}


/* ==================================================
   6. جستجو
   ================================================== */

.header-search {
    width: 170px;
    height: 22px;

    display: flex;
    flex-direction: row;

    margin: 0;
    padding: 0;

    background: #ffffff;
    border: 1px solid #000000;

    box-sizing: border-box;
    overflow: hidden;
}


/* فیلد جستجو */

.header-search input[type="search"] {
    flex: 1;

    width: 0;
    height: 20px;

    border: none;
    outline: none;

    padding: 0 5px;

    font-family: Tahoma, sans-serif;
    font-size: 11px;

    box-sizing: border-box;
}


/* دکمه جستجو */

.header-search button {
    width: 24px;
    height: 20px;

    flex: 0 0 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: none;

    background: #6b1200;
    color: #ffffff;

    cursor: pointer;
}

.header-search button:hover {
    background: #8b1a08;
}

.header-search button svg {
    display: block;
    width: 16px;
    height: 16px;
}


/* ==================================================
   7. منوی اصلی
   ارتفاع: 28px
   ================================================== */

.header-menu {
    width: 100%;
    max-width: 100%;
    height: 28px;

    background: #ee1c25;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
    overflow: visible;

    position: relative;
    z-index: 1001;
}


/* محدوده منو */

.main-navigation {
    width: 100%;
    height: 28px;

    display: flex;
    align-items: center;

    direction: rtl;

    margin: 0;

    box-sizing: border-box;
}


/* لیست منو */

.kiapic-menu {
    width: 100%;
    height: 28px;

    display: flex;
    flex-direction: row;
    align-items: center;

    list-style: none;

    padding: 0;
    margin: 0;

    gap: 0;
}


/* آیتم‌های منو */

.kiapic-menu>li {
    height: 28px;

    display: flex;
    align-items: center;

    position: relative;

    margin: 0;
    padding: 0;
}


/* لینک‌های منو */

.kiapic-menu>li>a {
    height: 28px;

    display: flex;
    align-items: center;

    padding: 0 12px;

    color: #ffffff;

    font-family: Tahoma, sans-serif;
    font-size: 13px;

    text-decoration: none;

    box-sizing: border-box;
}


/* هاور منو */

.kiapic-menu>li>a:hover {
    background: #333333;
    color: #ffffff;
}


/* ==================================================
   8. زیرمنوها
   ================================================== */

.kiapic-menu .sub-menu {
    display: none;

    position: absolute;

    top: 28px;
    right: 0;

    min-width: 160px;

    padding: 0;
    margin: 0;

    list-style: none;

    background: #ffffff;
    border: 1px solid #cccccc;

    z-index: 9999;
}


/* نمایش زیرمنو */

.kiapic-menu li:hover>.sub-menu {
    display: block;
}


/* لینک‌های زیرمنو */

.kiapic-menu .sub-menu li a {
    display: block;

    padding: 10px;

    color: #222222;

    text-decoration: none;
    font-family: Tahoma, sans-serif;
    font-size: 12px;
}

/* =====================================
   زیرمنوی سطح سوم
   ===================================== */

.kiapic-menu .sub-menu li {
    position: relative;
}

/* محل نمایش سطح سوم */
.kiapic-menu .sub-menu .sub-menu {
    display: none;

    position: absolute;

    top: 0;
    right: 100%;
    left: auto;

    min-width: 160px;

    z-index: 10000;
}

/* نمایش سطح سوم با رفتن ماوس روی سطح دوم */
.kiapic-menu .sub-menu li:hover > .sub-menu {
    display: block;
}
/* هاور زیرمنو */

.kiapic-menu .sub-menu li a:hover {
    background: #eeeeee;
    color: #000000;
}

/* قاب ساعت و جستجو */
.header-left {
    position: relative;
    width: 750px;
    height: 133px;
    box-sizing: border-box;
}

/* چسباندن مجموعه به لبه فیزیکی چپ */
.header-logo-bars {
    position: absolute;
    left: 0;
    right: auto;
    bottom: 2px;

    width: 190px;
    height: 56px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 5px;

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* قرارگیری مجموعه در لبه چپ نوار آبی */
.header-left {
    position: relative;
    direction: ltr;
}

.header-logo-bars {
    position: absolute;
    left: 0;
    right: auto;
    bottom: 2px;

    width: 190px;
    height: 56px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 5px;

    direction: ltr;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ساعت و تاریخ */
#datetime {
    direction: rtl;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
}

/* جستجو */
.header-search {
    align-self: flex-start;
    margin: 0;
}
/* لایه اصلی منو */
.site-header {
    position: relative;
    z-index: 1000;
}

/* جایگاه منوی اصلی */
.main-navigation {
    position: relative;
    z-index: 1002;
}

/* زیرمنو */
.main-navigation ul ul {
    position: absolute;
    z-index: 9999;
}