/*==================================================
        MobarakShahrNews Pro
        Header Styles
        Version: 1.0
==================================================*/


/*=====================================
Variables
======================================*/

:root{

    --primary:#b30000;
    --primary-dark:#8b0000;
    --secondary:#202020;

    --white:#ffffff;
    --black:#000000;

    --text:#333333;
    --text-light:#666666;

    --border:#e8e8e8;
    --bg:#f8f8f8;

    --radius:10px;
    --radius-lg:14px;

    --transition:.3s ease;

    --shadow-sm:0 2px 10px rgba(0,0,0,.05);
    --shadow-md:0 8px 20px rgba(0,0,0,.08);
    --shadow-lg:0 18px 40px rgba(0,0,0,.12);

}


/*=====================================
Header
======================================*/

.site-header{

    position:relative;

    z-index:999;

    background:#fff;

}


/*=====================================
Container
======================================*/

.site-header .container{

    width:100%;

    max-width:1320px;

    margin:auto;

    padding:0 15px;

}


/*=====================================
Top Bar
======================================*/

.top-bar{

    background:#202020;

    color:#fff;

    font-size:13px;

}

.top-inner{

    height:42px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.top-right{

    display:flex;

    align-items:center;

    gap:25px;

}

.top-date,
.top-weather{

    display:flex;

    align-items:center;

    gap:8px;

}

.top-social{

    display:flex;

    align-items:center;

    gap:18px;

}

.top-social a{

    color:#fff;

    font-size:18px;

    transition:var(--transition);

}

.top-social a:hover{

    color:#ffd200;

}


/*=====================================
Header Main
======================================*/

.header-main{

    background:#fff;

    padding:18px 0;

    border-bottom:1px solid #eee;

}

.header-inner{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:10px 0;

}



/*=====================================
Logo
======================================*/

.logo-area{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    width:100%;

}


.logo-image{

    margin-bottom:12px;

}

.custom-logo{

    max-height:85px;

    width:auto;

    transition:.3s;

}

.site-title{

    margin:10px 0 0;

    font-size:38px;

    font-weight:900;

    line-height:1.2;

}

.site-title a{

    text-decoration:none;

    color:var(--primary);

}

.site-tagline{

    margin-top:6px;

    font-size:14px;

    color:#777;

}

/*=====================================
Header Right
======================================*/

.header-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:12px;

}

.header-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:46px;

    padding:0 20px;

    border-radius:30px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:var(--transition);

}

.header-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

.header-btn.outline{

    background:#fff;

    color:var(--primary);

    border:2px solid var(--primary);

}

.header-btn.outline:hover{

    background:var(--primary);

    color:#fff;

}


/*=====================================
Navigation
======================================*/

.main-nav{

    position:relative;

    background:var(--primary);

    box-shadow:var(--shadow-sm);

}

.nav-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:60px;

}


/*=====================================
Sticky Logo
======================================*/

.nav-logo{

    width:70px;

    min-width:70px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.nav-logo a{

    display:flex;

    align-items:center;

}

.nav-logo-img{

    width:56px;

    height:56px;

    object-fit:contain;

    transition:var(--transition);

}

.site-header.sticky .nav-logo-img{

    width:44px;

    height:44px;

}


/*=====================================
Main Menu
======================================*/

.menu{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:1;

    list-style:none;

    margin:0;

    padding:0;

}

.menu>li{

    position:relative;

}

.menu>li>a{

    display:flex;

    align-items:center;

    justify-content:center;

    height:60px;

    padding:0 22px;

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:var(--transition);

}

.menu>li:hover>a{

    background:rgba(255,255,255,.08);

}

.menu>.current-menu-item>a{

    background:rgba(255,255,255,.12);

}


/*=====================================
Dropdown
======================================*/

.menu li ul{

    position:absolute;

    top:100%;

    right:0;

    min-width:240px;

    background:#fff;

    list-style:none;

    padding:8px 0;

    margin:0;

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:var(--transition);

    box-shadow:var(--shadow-md);

    border-radius:0 0 10px 10px;

    z-index:999;

}

.menu li:hover>ul{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.menu li ul li{

    width:100%;

}

.menu li ul a{

    display:block;

    padding:12px 18px;

    color:var(--text);

    text-decoration:none;

    transition:var(--transition);

}

.menu li ul a:hover{

    background:#f5f5f5;

    color:var(--primary);

}


/*=====================================
Mobile Menu Button
======================================*/

.mobile-menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    border-radius:8px;

    background:transparent;

    color:#fff;

    font-size:28px;

    cursor:pointer;

    transition:var(--transition);

}

.mobile-menu-toggle:hover{

    background:rgba(255,255,255,.12);

}

/*=====================================
Breaking News
======================================*/

.breaking-news{

    background:#d61f26;

    color:#fff;

    overflow:hidden;

}

.breaking-inner{

    display:flex;

    align-items:center;

    height:50px;

}

.breaking-label{

    background:#111;

    color:#fff;

    height:50px;

    padding:0 20px;

    display:flex;

    align-items:center;

    gap:10px;

    white-space:nowrap;

    font-weight:700;

    flex-shrink:0;

}


/*=====================================
Live Dot
======================================*/

.live-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#ff2d2d;

    animation:liveBlink 1s infinite;

}

@keyframes liveBlink{

    0%{

        opacity:1;

        transform:scale(1);

    }

    50%{

        opacity:.35;

        transform:scale(1.3);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}


/*=====================================
Welcome
======================================*/

.breaking-welcome{

    background:var(--primary);

    height:50px;

    padding:0 18px;

    display:flex;

    align-items:center;

    gap:8px;

    white-space:nowrap;

    flex-shrink:0;

    font-size:14px;

    font-weight:600;

}


/*=====================================
Ticker
======================================*/

.breaking-content{

    flex:1;

    min-width:0;

    height:50px;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:0 15px;

}

.news-ticker{

    position:relative;

    width:100%;

    overflow:hidden;

}

.news-track{

    display:flex;

    align-items:center;

    white-space:nowrap;

    gap:40px;

    will-change:transform;

}

.ticker-item{

    flex:none;

}

.ticker-item a{

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:var(--transition);

}

.ticker-item a:hover{

    color:#ffd200;

}

.ticker-separator{

    color:#ffd200;

    font-size:12px;

}


/*=====================================
Sticky Header
======================================*/

.site-header.sticky .top-bar{

    display:none;

}

.site-header.sticky .header-main{

    padding:12px 0;

}

.site-header.sticky .site-title{

    font-size:28px;

}

.site-header.sticky .site-tagline{

    display:none;

}

.site-header.sticky .main-nav{

    position:fixed;

    top:0;

    right:0;

    left:0;

    z-index:9999;

    box-shadow:var(--shadow-md);

}

body.admin-bar .site-header.sticky .main-nav{

    top:32px;

}


/*=====================================
Sticky Animation
======================================*/

.site-header.sticky{

    animation:headerDown .35s ease;

}

@keyframes headerDown{

    from{

        opacity:0;

        transform:translateY(-15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=====================================
Responsive - Tablet
======================================*/

@media (max-width:992px){

    .header-inner{

        grid-template-columns:1fr;

        gap:25px;

        text-align:center;

    }

    .nav-search{

        display:none;

    }

}
   

    .logo-area{

        order:1;

    }

    .header-right{

        justify-content:center;

        order:2;

        flex-wrap:wrap;

    }

    .site-title{

        font-size:34px;

    }

}


/*=====================================
Responsive - Mobile
======================================*/

@media (max-width:768px){

    .top-inner{

        height:auto;

        padding:10px 0;

        flex-direction:column;

        gap:12px;

    }

    .top-right{

        gap:18px;

        flex-wrap:wrap;

        justify-content:center;

    }

    .header-main{

        padding:22px 0;

    }

    .site-title{

        font-size:28px;

    }

    .site-tagline{

        font-size:13px;

    }

    .custom-logo{

        max-height:80px;

    }

    .nav-inner{

        min-height:60px;

    }

    .mobile-menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .menu{

        display:none;

        position:absolute;

        top:100%;

        right:0;

        left:0;

        background:#ffffff;

        flex-direction:column;

        align-items:stretch;

        box-shadow:var(--shadow-lg);

        z-index:9999;

    }

    .menu.active{

        display:flex;

    }

    .menu>li{

        width:100%;

        border-bottom:1px solid var(--border);

    }

    .menu>li>a{

        height:auto;

        padding:16px 20px;

        color:var(--text);

        justify-content:flex-start;

    }

    .menu>li:hover>a{

        background:#f5f5f5;

        color:var(--primary);

    }

    .menu li ul{

        position:static;

        opacity:1;

        visibility:visible;

        transform:none;

        box-shadow:none;

        border-radius:0;

        display:none;

        background:#f8f8f8;

    }

    .menu li.menu-item-has-children.open>ul{

        display:block;

    }

    .nav-logo{

        width:56px;

        min-width:56px;

    }

    .nav-logo-img{

        width:42px;

        height:42px;

    }

    .breaking-inner{

        height:46px;

    }

    .breaking-label{

        padding:0 14px;

        height:46px;

        font-size:13px;

    }

    .breaking-welcome{

        display:none;

    }

    .breaking-content{

        height:46px;

        padding:0 10px;

    }

}


/*=====================================
Small Mobile
======================================*/

@media (max-width:576px){

    .site-title{

        font-size:24px;

    }


    .header-btn{

        width:100%;

    }

    .top-social{

        gap:14px;

    }

}


/*=====================================
End Header CSS
======================================*/

/*=====================================
Navigation Search
======================================*/

.nav-search-toggle{

    width:46px;

    height:46px;

    border:none;

    background:transparent;

    color:#fff;

    cursor:pointer;

    font-size:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}

.nav-search-toggle:hover{

    color:#ffd200;

    transform:scale(1.08);

}

/*=====================================
Navigation Search
======================================*/

.nav-search{

    margin-right:auto;

    margin-left:0;

}

.nav-search-form{

    display:flex;

    align-items:center;

    width:260px;

    height:42px;

    background:#ffffff;

    border-radius:30px;

    overflow:hidden;

}

.nav-search-input{

    flex:1;

    height:42px;

    border:none;

    padding:0 16px;

    font-family:inherit;

    font-size:14px;

    outline:none;

}

.nav-search-btn{

    width:48px;

    height:42px;

    border:none;

    background:#ffd200;

    color:#222;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

.nav-search-btn:hover{

    background:#ffffff;

}