/*
Theme Name: bbcnews.ge Press (On.ge style)
Theme URI: https://bbcnews.ge/
Author: ChatGPT
Description: Clean press/news theme inspired by On.ge style. Responsive, category fallback menu, hero slider, Top-5 views widget, mobile-friendly.
Version: 1.0.3
License: GPLv2 or later
Text Domain: bbcnews-press-onge
*/

:root{
  --page-bg:#e9eaec;
  --wrap:#ffffff;
  --text:#1b1f2a;
  --muted:#6b7280;
  --line:#dde1e7;
  --line-2:#cfd5de;
  --accent:#e53935;
  --accent-2:#2f6dff;
  --max: 980px;
  --shadow: 0 10px 28px rgba(16,24,40,.10);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background: var(--page-bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}

/* basic reset for WP-like markup */
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
button,input{font-family:inherit}

/* container */
.wrap{
  max-width: var(--max);
  margin: 62px auto 32px;
  background: var(--wrap);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* top mini bar */
.mini-top{
  position: fixed;
  left:0; right:0; top:0;
  background: #f3f4f6;
  border-bottom: 1px solid var(--line);
  z-index: 50;
}
.mini-top .inner{
  max-width: calc(var(--max) + 360px);
  margin:0 auto;
  padding: 10px 16px;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:flex-start;
  color:#111827;
  font-size:13px;
}
.mini-top .brand-mini{font-weight:900}
.mini-top a{color:#111827}
.mini-top a.active{color: var(--accent)}
.mini-top .menu{
  display:flex;
  gap:16px;
  align-items:center;
}

/* header */
header{
  background: var(--wrap);
  border-bottom: 1px solid var(--line);
}
.head{
  padding: 18px 18px 10px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 12px;
}

.logo{
  text-align:center;
  line-height:1;
}

/* logo */
.logo .logo-main{
  display:inline-flex;
  align-items:baseline;
  gap:0;
  font-weight: 950;
  letter-spacing:.6px;
  font-size: 34px;
  color:#111827;
  position:relative;
  padding: 2px 0 6px;
}
.logo .logo-main::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:2px;
  background: linear-gradient(90deg, var(--accent), rgba(229,57,53,0));
  opacity:.9;
}
.logo .mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-right:10px;
  border-radius: 8px;
  background: var(--accent);
  box-shadow: 0 10px 20px rgba(229,57,53,.18);
  transform: translateY(2px);
  flex: 0 0 auto;
}
.logo .mark::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 2px rgba(255,255,255,.16);
  display:block;
}
.logo .bbc{letter-spacing:.8px}
.logo .news{margin-left:6px; color:#111827; font-weight: 950}
.logo .dot{margin: 0 2px; color: var(--accent); font-weight: 950}
.logo .ge{color: var(--accent); font-weight: 950; letter-spacing:.2px}
.logo small{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  margin-top:8px;
}

.search{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}
.search form{display:flex; gap:8px; align-items:center}
.search input[type="search"]{
  width: 220px;
  padding: 8px 10px;
  border:1px solid var(--line);
  border-radius: 4px;
  outline:none;
  font-size:13px;
}
.search button{
  border:1px solid var(--line);
  background:#fff;
  padding: 8px 10px;
  border-radius: 4px;
  cursor:pointer;
}

/* primary nav */
.nav{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:#fff;
}
.nav .inner{padding: 0 10px;}
.nav .menu{
  display:flex;
  gap: 6px;
  align-items:center;
  flex-wrap:wrap;
}
.nav .menu li{margin:0; padding:0}
.nav a{
  display:block;
  padding: 10px 10px;
  font-size: 13px;
  font-weight: 750;
  color:#111827;
  border-bottom: 2px solid transparent;
}
.nav a.active{border-bottom-color: var(--accent); color: var(--accent)}
.nav a:hover{color: var(--accent)}

/* Mobile categories toggle (icon only) */
.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  width:44px;
  height:40px;
  margin: 8px 10px;
  margin-left: auto;
}
.nav-toggle::before{content:"☰"; font-size:16px; line-height:1; color:#111827}
.nav.is-open .nav-toggle::before{content:"✕";}

/* Layout */
main{padding: 16px 12px 24px;}
.grid{
  display:grid;
  grid-template-columns: 2fr 1.15fr .95fr;
  gap: 14px;
  align-items:start;
}

/* box */
.box{
  border:1px solid var(--line);
  background:#fff;
}
.box h3{
  margin:0;
  padding: 10px 10px;
  font-size: 13px;
  font-weight: 900;
  border-bottom:1px solid var(--line);
}

/* Featured slider */
.featured{border:1px solid var(--line); background:#fff}
.slider{position:relative}
.slides{position:relative; height: 270px; overflow:hidden; border-bottom:1px solid var(--line)}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform: translateX(10px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.slide.is-active{opacity:1; transform: translateX(0); pointer-events:auto}
.slide .img{
  position:absolute;
  inset:0;
  background:#e5e7eb;
  background-size: cover;
  background-position: center;
}
.slide .shade{
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0) 55%);
  opacity:.9;
  pointer-events:none;
}
.slide .caption{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  color:#fff;
  text-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.slide .tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(229,57,53,.92);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
}
.slide h2{margin:0; font-size: 18px; line-height: 1.25; font-weight: 950}
.slide p{margin:8px 0 0; font-size: 13px; line-height: 1.5; opacity:.94; max-width: 68ch}

.slider-controls{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 8px;
  pointer-events:none;
}
.snav{
  pointer-events:auto;
  width:34px;height:34px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.45);
  background: rgba(17,24,39,.22);
  color:#fff;
  cursor:pointer;
  font-weight:950;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter: blur(6px);
}
.snav:hover{background: rgba(17,24,39,.35)}

.dots{
  display:flex;
  gap:6px;
  justify-content:center;
  padding: 10px 0;
  background:#fff;
}
.dotbtn{
  width:8px;height:8px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:#e5e7eb;
  cursor:pointer;
}
.dotbtn.active{background: var(--accent); border-color: var(--accent)}

/* headlines */
.headline-list{padding: 8px 10px 10px;}
.headline{
  display:flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.headline:last-child{border-bottom:0}
.bar{
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-top: 4px;
  flex: 0 0 auto;
}
.headline a{font-weight: 800; font-size: 12.8px; line-height: 1.35; color:#111827}
.headline a:hover{color: var(--accent)}
.headline .meta{font-size: 11.5px; color: var(--muted); margin-top: 4px}

/* Right sidebar + ads */
.ad{
  min-height: 240px;
  background: #f9fafb;
  border: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  font-weight: 800;
  padding: 10px;
}
.ad--mobile{display:none}

/* row3 */
.row3{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.card3{border:1px solid var(--line); background:#fff}
.card3 .img{height: 120px; background:#e5e7eb; border-bottom:1px solid var(--line); background-size:cover; background-position:center}
.card3 .b{padding: 10px}
.card3 .t{font-weight:900;font-size:13px;line-height:1.25}
.card3 .m{margin-top:6px;color:var(--muted);font-size:12px}

/* single */
.single-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
  align-items:start;
}
.single{
  border:1px solid var(--line);
  background:#fff;
  padding: 14px;
}
.single .title{
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 950;
  color:#111827;
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}
.single .meta{
  margin-top:10px;
  color: var(--muted);
  font-size: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.single .share{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.sbtn{
  border:1px solid var(--line);
  background:#fff;
  padding: 7px 10px;
  border-radius: 4px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.sbtn.fb{background:#eff6ff}
.sbtn.tw{background:#f0f9ff}
.sbtn.wapp{background:#ecfdf5}

.single .img{
  margin-top:12px;
  height: 250px;
  background:#e5e7eb;
  border:1px solid var(--line);
  background-size: cover;
  background-position:center;
}
.single .content{margin-top:10px}
.single .content p{color:#1f2937;font-size: 13.5px; line-height: 1.7}

/* Top-5 */
.top5{border:1px solid var(--line); background:#fff}
.top5 h3{
  margin:0;
  padding: 10px 10px;
  font-size: 13px;
  font-weight: 950;
  color:#111827;
  border-bottom:1px solid var(--line);
}
.top5 .item{
  display:flex;
  gap:10px;
  padding: 10px;
  border-bottom:1px solid #eef2f7;
  align-items:flex-start;
}
.top5 .item:last-child{border-bottom:0}
.rank{
  width:26px;height:26px;
  border-radius: 4px;
  background:#f3f4f6;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  color:#6b7280;
  flex: 0 0 auto;
}
.top5 .tt{font-weight:900;font-size:12.6px;line-height:1.3}
.top5 .views{margin-top:6px; font-size:12px; color: var(--accent); font-weight:900}
.top5 .barline{height:4px;background:#eef2ff;border-radius:999px;margin-top:6px;overflow:hidden}
.top5 .barline > span{display:block;height:100%;background: var(--accent); width:55%}

/* footer */
.site-footer{
  border-top:1px solid var(--line);
  padding: 18px 12px;
  color: var(--muted);
  font-size:13px;
  background:#fff;
}
.footer-inner{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.topge-counter{display:flex;justify-content:center;align-items:center;padding:10px 0 0}
.wau-counter{display:flex;justify-content:center;align-items:center;padding:8px 0 0}

/* Responsive */

/* Tablet */
@media (max-width: 980px){
  .wrap{margin-top: 64px}

  .mini-top .inner{
    max-width: 100%;
    padding: 8px 10px;
    gap: 12px;
    font-size: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mini-top .inner::-webkit-scrollbar{display:none}
  .mini-top a{white-space:nowrap}

  .head{grid-template-columns: 1fr; text-align:center; padding: 14px 12px 10px}
  .search{justify-content:center; width:100%}
  .search input[type="search"]{width: 100%}

  /* menu becomes horizontal scroll */
  .nav .menu{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav .menu::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap; padding: 10px 12px}

  .grid{grid-template-columns: 1.25fr 1fr}
  .grid > aside{grid-column: 1 / -1}

  .slides{height: 240px}
  .slide h2{font-size: 16px}
  .slide p{font-size: 12.5px}

  .row3{grid-template-columns: repeat(2, 1fr)}

  .single-grid{grid-template-columns: 1fr}
  .single .title{font-size: 20px}
}

/* Mobile */
@media (max-width: 680px){
  /* Mobile nav container behaves well */
  .nav{display:flex;flex-direction:column;align-items:stretch}
  .nav-toggle{align-self:flex-end}

  /* dropdown categories (icon only) */
  .nav-toggle{display:flex}
  .nav .inner{display:none}
  .nav.is-open .inner{display:block}

  .nav.is-open .menu{
    display:grid;
    padding: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 62vh;
    overflow:auto;
  }
  .nav.is-open a{
    border:1px solid var(--line);
    border-radius:999px;
    padding:10px 12px;
    border-bottom:0;
    text-align:center;
    font-weight:900;
    background:#fff;
    display:block;
    white-space:nowrap;
  }

  /* Home: hide sidebar ad and show bottom ad */
  body.home .grid > aside{display:none}
  .ad--mobile{display:flex}

  /* Post: Top-5 then Ad at the very bottom on mobile */
  .single-grid > aside{display:flex;flex-direction:column;gap:12px}
  .single-grid > aside .top5{order:100}
  .single-grid > aside .ad{order:101}

  .wrap{margin: 60px 10px 24px}

  .logo .logo-main{font-size: 30px}
  .logo .mark{width:30px;height:30px;margin-right:8px}

  .grid{grid-template-columns: 1fr}
  .row3{grid-template-columns: 1fr}

  .slides{height: 200px}
  .slide .caption{left: 10px; right: 10px; bottom: 10px}
  .slide .tag{font-size: 11px; padding: 5px 8px}
  .snav{width:30px;height:30px}

  .headline{gap:8px}
  .headline a{font-size: 13px}
}

/* very small */
@media (max-width: 420px){
  .nav.is-open .menu{grid-template-columns:1fr}
  .logo .logo-main{font-size: 28px}
  .logo small{font-size: 11.5px}
  .slides{height: 180px}
  .slide h2{font-size: 15px}
  .slide p{display:none}
}