/* =========================
ROOT
========================= */

:root{

   --color-primary:#0f172a;
   --color-secondary:#1e293b;
   --color-accent:#2563eb;
   
   --color-bg:#f4f6fb;
   --color-card:#ffffff;
   
   --color-text:#111827;
   --color-muted:#6b7280;
   
   --radius:12px;
   
   --shadow-sm:0 3px 8px rgba(0,0,0,0.06);
   --shadow-md:0 8px 20px rgba(0,0,0,0.08);
   --shadow-lg:0 15px 35px rgba(0,0,0,0.12);
   
   --max-width:1250px;
   
   }
   
   /* =========================
   RESET
   ========================= */
   
   *{
   margin:0;
   padding:0;
   box-sizing:border-box;
   }
   
   body{
   
   font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
   
   background:var(--color-bg);
   
   color:var(--color-text);
   
   line-height:1.65;
   
   }

   .nav-wrapper{

      max-width:1250px;
      margin:auto;
      
      }
      
      .news-inner{
      
      max-width:1250px;
      margin:auto;
      
      display:flex;
      align-items:center;
      
      padding:8px 20px;
      
      }
   
   /* =========================
   CONTAINER
   ========================= */
   
   .container{
   
   max-width:var(--max-width);
   
   margin:auto;
   
   padding:25px;
   
   }
   
   section{
   margin-top:40px;
   }
   
   /* =========================
   TYPOGRAPHY
   ========================= */
   
   h1{
   font-size:34px;
   margin-bottom:15px;
   }
   
   h2{
   font-size:26px;
   margin-bottom:18px;
   }
   
   h3{
   font-size:18px;
   line-height:1.4;
   }
   
   p{
   margin-top:10px;
   }
   
   a{
   text-decoration:none;
   color:var(--color-accent);
   }
   
   /* =========================
   BREAKING NEWS
   ========================= */
   
   .news-ticker{
   
   background:var(--color-accent);
   
   color:white;
   
   overflow:hidden;
   
   }
   
   .news-inner{
   
   max-width:var(--max-width);
   
   margin:auto;
   
   display:flex;
   
   align-items:center;
   
   padding:8px 20px;
   
   }
   
   .ticker-label{
   
   font-weight:700;
   
   margin-right:20px;
   
   }
   
   .ticker{
   
   overflow:hidden;
   
   flex:1;
   
   }
   
   .ticker-track{
   
   display:flex;
   
   gap:60px;
   
   white-space:nowrap;
   
   animation:ticker 30s linear infinite;
   
   }
   
   .ticker a{
   color:white;
   font-size:14px;
   }
   
   @keyframes ticker{
   
   0%{transform:translateX(0)}
   100%{transform:translateX(-50%)}
   
   }
   
/* =========================
HEADER
========================= */

#site-header{

   position:sticky;
   
   top:0;
   
   background:var(--color-primary);
   
   z-index:1000;
   
   transition:all .3s ease;
   
   box-shadow:0 2px 10px rgba(0,0,0,0.08);
   
   }
   
   /* shrink header */
   
   #site-header.shrink{
   
   padding-top:4px;
   
   padding-bottom:4px;
   
   }
   
   /* =========================
   HEADER INNER
   ========================= */
   
   .header-inner{
   
   max-width:1250px;
   
   margin:auto;
   
   display:flex;
   
   align-items:center;
   
   justify-content:space-between;
   
   padding:18px 20px;
   
   }
   
   /* logo */
   
   .logo{
   
   color:white;
   
   font-size:22px;
   
   font-weight:700;
   
   }
   
   /* =========================
   NAVIGATION
   ========================= */
   
   .main-nav{
   
   display:flex;
   
   }
   
   .menu{
   
   display:flex;
   
   gap:28px;
   
   list-style:none;
   
   align-items:center;
   
   }
   
   .menu li{
   
   position:relative;
   
   }
   
   .menu a{
   
   color:white;
   
   font-size:15px;
   
   font-weight:500;
   
   }
   
   /* =========================
   DROPDOWN
   ========================= */
   
   .submenu{
   
   position:absolute;
   
   top:36px;
   
   left:0;
   
   background:white;
   
   min-width:200px;
   
   border-radius:10px;
   
   box-shadow:0 10px 25px rgba(0,0,0,0.15);
   
   list-style:none;
   
   padding:10px 0;
   
   opacity:0;
   
   visibility:hidden;
   
   transform:translateY(10px);
   
   transition:all .2s ease;
   
   }
   
   .submenu li{
   
   padding:8px 18px;
   
   }
   
   .submenu a{
   
   color: black;
   
   font-size:14px;
   
   }
   
   .menu li:hover .submenu{
   
   opacity:1;
   
   visibility:visible;
   
   transform:translateY(0);
   
   }
   
   /* =========================
   BURGER
   ========================= */
   
   .burger{
   
   display:none;
   
   flex-direction:column;
   
   gap:5px;
   
   cursor:pointer;
   
   }
   
   .burger span{
   
   width:26px;
   
   height:3px;
   
   background:white;
   
   display:block;
   
   }
   
   /* =========================
   BREAKING NEWS
   ========================= */
   
   .breaking-news{
   
   background:var(--color-accent);
   
   color:white;
   
   overflow:hidden;
   
   }
   
   .breaking-inner{
   
   max-width:1250px;
   
   margin:auto;
   
   display:flex;
   
   align-items:center;
   
   padding:8px 20px;
   
   gap:20px;
   
   }
   
   .breaking-label{
   
   font-weight:700;
   
   text-transform:uppercase;
   
   }
   
   .breaking-ticker{
   
   overflow:hidden;
   
   flex:1;
   
   }
   
   .breaking-track{
   
   display:flex;
   
   gap:60px;
   
   white-space:nowrap;
   
   animation:breaking 30s linear infinite;
   
   }
   
   .breaking-track a{
   
   color:white;
   
   font-size:14px;
   
   }
   
   /* animation */
   
   @keyframes breaking{
   
   0%{transform:translateX(0)}
   
   100%{transform:translateX(-50%)}
   
   }
   
   /* =========================
   MOBILE MENU
   ========================= */
   
   @media (max-width:900px){
   
   .burger{
   display:flex;
   }
   
   .main-nav{
   
   position:fixed;
   
   top:0;
   
   right:-320px;
   
   width:300px;
   
   height:100%;
   
   background:white;
   
   padding:30px;
   
   transition:.3s;
   
   box-shadow:-5px 0 25px rgba(0,0,0,0.15);
   
   }
   
   .main-nav.active{
   
   right:0;
   
   }
   
   .menu{
   
   flex-direction:column;
   
   gap:18px;
   
   }
   
   .main-nav a{
   
   color:var(--color-primary);
   
   font-size:18px;
   
   }
   
   .submenu{
   
   position:static;
   
   opacity:1;
   
   visibility:visible;
   
   transform:none;
   
   box-shadow:none;
   
   padding-left:15px;
   
   }
   
   }
   
   /* =========================
   BURGER MENU
   ========================= */
   
   .burger{
   
   display:none;
   
   flex-direction:column;
   
   gap:5px;
   
   cursor:pointer;
   
   }
   
   .burger span{
   
   width:26px;
   height:3px;
   
   background:white;
   
   display:block;
   
   }
   
   /* =========================
   LAYOUT
   ========================= */
   
   .layout{
   
   display:grid;
   
   grid-template-columns:3fr 1fr;
   
   gap:30px;
   
   align-items:start;
   
   }
   
   /* =========================
   SIDEBAR
   ========================= */
   
   .sidebar{
   
   display:flex;
   
   flex-direction:column;
   
   gap:25px;
   
   }
   
   .sidebar-card{
   
   background:var(--color-card);
   
   border-radius:var(--radius);
   
   padding:20px;
   
   box-shadow:var(--shadow-sm);
   
   }
   
   .sidebar-card h3{
   margin-bottom:12px;
   }
   
   .sidebar-card ul{
   list-style:none;
   }
   
   .sidebar-card li{
   
   padding:8px 0;
   
   border-bottom:1px solid #eee;
   
   }
   
   /* =========================
   FEATURED
   ========================= */
   
   .featured{
   
   background:var(--color-card);
   
   padding:30px;
   
   border-radius:var(--radius);
   
   box-shadow:var(--shadow-lg);
   
   }
   
   .meta{
   
   margin-top:10px;
   
   font-size:13px;
   
   color:var(--color-muted);
   
   }
   
   /* =========================
   CARDS
   ========================= */
   
   .news-grid{
   
   display:grid;
   
   grid-template-columns:
   repeat(auto-fit,minmax(260px,1fr));
   
   gap:22px;
   
   }
   
   .card{
   
   background:var(--color-card);
   
   padding:20px;
   
   border-radius:var(--radius);
   
   box-shadow:var(--shadow-sm);
   
   transition:.25s;
   
   }
   
   .card:hover{
   
   transform:translateY(-4px);
   
   box-shadow:var(--shadow-md);
   
   }
   
   .card p{
   
   font-size:14px;
   
   color:var(--color-muted);
   
   }
   
   /* =========================
   CATEGORY GRID
   ========================= */
   
   .category-grid{
   
   display:grid;
   
   grid-template-columns:
   repeat(auto-fit,minmax(280px,1fr));
   
   gap:24px;
   
   }
   
   /* =========================
   POST PAGE
   ========================= */
   
   .post-card{
   
   background:var(--color-card);
   
   border-radius:var(--radius);
   
   box-shadow:var(--shadow-md);
   
   padding:40px;
   
   margin-bottom:40px;
   
   }
   
   .post-meta{
   
   font-size:14px;
   
   color:var(--color-muted);
   
   margin-bottom:20px;
   
   }
   
   .post-content{
   
   font-size:17px;
   
   line-height:1.75;
   
   }
   
   .post-content p{
   
   margin-bottom:18px;
   
   }
   
   /* =========================
   RECOMMENDED
   ========================= */
   
   .recommend-grid{
   
   display:grid;
   
   grid-template-columns:
   repeat(auto-fit,minmax(260px,1fr));
   
   gap:22px;
   
   }
   
   /* =========================
   PAGINATION
   ========================= */
   
   .pagination{
   
   display:flex;
   
   gap:10px;
   
   margin-top:30px;
   
   }
   
   .pagination a{
   
   padding:8px 14px;
   
   background:white;
   
   border-radius:6px;
   
   box-shadow:var(--shadow-sm);
   
   }
   
   /* =========================
   FOOTER
   ========================= */
   
   footer{
   
   background:var(--color-secondary);
   
   color:white;
   
   margin-top:60px;
   
   }
   
   .footer-inner{
   
   max-width:var(--max-width);
   
   margin:auto;
   
   padding:35px 25px;
   
   font-size:14px;
   
   }
   
   footer a{
   color:#cbd5f5;
   }
   
   /* =========================
   RESPONSIVE
   ========================= */
   
   @media (max-width:900px){
   
   .layout{
   grid-template-columns:1fr;
   }
   
   .burger{
   display:flex;
   }
   
   .main-nav{
   
   position:fixed;
   
   top:0;
   
   right:-320px;
   
   width:300px;
   
   height:100%;
   
   background:white;
   
   padding:30px;
   
   transition:.3s;
   
   box-shadow:-5px 0 25px rgba(0,0,0,0.15);
   
   z-index:2000;
   
   }
   
   .main-nav.active{
   right:0;
   }
   
   .menu{
   
   flex-direction:column;
   
   gap:18px;
   
   }
   
   .main-nav a{
   
   color:var(--color-primary);
   
   font-size:18px;
   
   }
   
   .submenu{
   
   position:static;
   
   opacity:1;
   
   visibility:visible;
   
   transform:none;
   
   box-shadow:none;
   
   padding-left:15px;
   
   }
   
   }
   
   @media (max-width:700px){
   
   h1{font-size:28px}
   h2{font-size:22px}
   
   }
   
   @media (max-width:500px){
   
   .container{
   padding:18px;
   }
   
   .featured{
   padding:22px;
   }
   
   .card{
   padding:16px;
   }
   
   .post-card{
   padding:25px;
   }
   
   .post-card h1{
   font-size:26px;
   }
   
   }

   /* Cookies*/
   #cookie-banner{

      position:fixed;
      
      bottom:0;
      
      left:0;
      
      width:100%;
      
      background:#111;
      
      color:white;
      
      padding:15px;
      
      display:flex;
      
      justify-content:center;
      
      gap:15px;
      
      z-index:9999;
      
      }
      
      #cookie-banner button{
      
      padding:8px 14px;
      
      border:none;
      
      cursor:pointer;
      
      }