/*
Theme Name: 4044.eu
Theme URI: https://4044.eu
Author: 4044.eu
Author URI: https://4044.eu
Description: Motyw WordPress dla portalu 4044.eu — newsy na żywo generowane z pomocą AI, wyniki sportowe na żywo generowane z pomocą AI, w pełni zgodny z zasadami Google AdSense (RODO/cookie consent, ads.txt, responsywne bloki reklamowe, polityka prywatności). Kolory: czarny, niebieski, biały.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theme4044
Tags: news, sports, ai, blog, one-column, two-columns, right-sidebar, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   1. RESET / BASE
   ========================================================= */
:root{
  --c-black: #05070a;
  --c-black-soft: #10141b;
  --c-blue: #0a6cff;
  --c-blue-dark: #0347b8;
  --c-blue-light: #4fa0ff;
  --c-white: #ffffff;
  --c-grey: #b5bcc7;
  --radius: 10px;
  --maxw: 1200px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background:var(--c-black);
  color:var(--c-white);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  line-height:1.6;
}

a{ color:var(--c-blue-light); text-decoration:none; }
a:hover{ color:var(--c-white); text-decoration:underline; }

img{ max-width:100%; height:auto; display:block; }

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px;
}

/* =========================================================
   2. HEADER
   ========================================================= */
.site-header{
  background: linear-gradient(180deg, var(--c-black-soft), var(--c-black));
  border-bottom:2px solid var(--c-blue);
  position:sticky;
  top:0;
  z-index:999;
}

.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  padding-bottom:14px;
  flex-wrap:wrap;
  gap:12px;
}

.site-branding .site-title{
  margin:0;
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:1px;
}
.site-branding .site-title a{ color:var(--c-white); }
.site-branding .site-title a span{ color:var(--c-blue); }

.site-branding .site-description{
  margin:0;
  font-size:.8rem;
  color:var(--c-grey);
}

/* Live badge */
.live-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(10,108,255,.15);
  border:1px solid var(--c-blue);
  color:var(--c-blue-light);
  padding:4px 10px;
  border-radius:20px;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
}
.live-badge .dot{
  width:8px;height:8px;border-radius:50%;
  background:#ff3b3b;
  animation:pulse 1.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,59,59,.6);}
  70%{ box-shadow:0 0 0 8px rgba(255,59,59,0);}
  100%{ box-shadow:0 0 0 0 rgba(255,59,59,0);}
}

/* Nav */
.main-navigation ul{
  list-style:none;
  display:flex;
  gap:22px;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
.main-navigation a{
  color:var(--c-white);
  font-weight:600;
  font-size:.95rem;
}
.main-navigation a:hover{ color:var(--c-blue-light); text-decoration:none; }
.main-navigation .current-menu-item > a{ color:var(--c-blue-light); }

.menu-toggle{
  display:none;
  background:var(--c-blue);
  color:#fff;
  border:none;
  padding:8px 12px;
  border-radius:6px;
  cursor:pointer;
}

/* =========================================================
   3. NEWS TICKER (live)
   ========================================================= */
.news-ticker{
  background:var(--c-blue);
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  position:relative;
}
.news-ticker .container{ padding-top:8px; padding-bottom:8px; }
.news-ticker-label{
  font-weight:800;
  text-transform:uppercase;
  margin-right:14px;
  background:var(--c-black);
  padding:2px 10px;
  border-radius:4px;
  font-size:.75rem;
}
.news-ticker-track{
  display:inline-block;
  padding-left:100%;
  animation:ticker 40s linear infinite;
}
.news-ticker-track a{ color:#fff; margin-right:50px; font-size:.9rem; }
@keyframes ticker{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}

/* =========================================================
   4. LAYOUT
   ========================================================= */
.site-content{ padding:36px 0; }
.site-content::after{ content:""; display:table; clear:both; }
.content-area{ float:left; width:68%; }
.widget-area{ float:right; width:29%; }

@media (max-width:900px){
  .content-area, .widget-area{ float:none; width:100%; }
}

/* =========================================================
   PASEK KATEGORII (pod nagłówkiem, jak w portalach newsowych)
   ========================================================= */
.category-bar{
  background:var(--c-black);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.category-bar .container{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:10px 20px;
  scrollbar-width:none;
}
.category-bar .container::-webkit-scrollbar{ display:none; }
.cat-pill{
  flex:0 0 auto;
  color:var(--c-grey);
  font-size:.82rem;
  font-weight:600;
  padding:6px 14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
}
.cat-pill:hover{ color:#fff; border-color:var(--c-blue); text-decoration:none; }
.cat-pill-sport{ background:var(--c-blue); color:#fff; border-color:var(--c-blue); }

/* =========================================================
   HERO GRID (duży news + lista mniejszych, styl portali newsowych)
   ========================================================= */
.hero-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:24px;
  margin:28px 0;
}
.hero-main{ position:relative; }
.hero-thumb{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; background:var(--c-black-soft); }
.hero-thumb img{ width:100%; height:100%; object-fit:cover; }
.hero-thumb-placeholder{ width:100%; height:100%; background:linear-gradient(135deg,var(--c-black-soft),var(--c-blue-dark)); }
.category-badge-onimg{ position:absolute; left:14px; bottom:14px; margin:0; }
.hero-title{ font-size:1.6rem; line-height:1.3; margin:16px 0 6px; }
.hero-title a{ color:#fff; }
.hero-title a:hover{ color:var(--c-blue-light); text-decoration:none; }

.hero-side{ display:flex; flex-direction:column; gap:16px; }
.hero-side-item{ display:flex; gap:12px; }
.hero-side-item .thumb{ flex:0 0 96px; }
.hero-side-item .thumb img{ border-radius:6px; aspect-ratio:1/1; object-fit:cover; }
.side-thumb-placeholder{ width:96px; height:96px; border-radius:6px; background:var(--c-black-soft); }
.hero-side-title{ font-size:.95rem; margin:2px 0 4px; line-height:1.35; }
.hero-side-title a{ color:#fff; }
.hero-side-title a:hover{ color:var(--c-blue-light); text-decoration:none; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   ZAKŁADKI (Najnowsze / Popularne)
   ========================================================= */
.tabs{ display:flex; gap:6px; border-bottom:2px solid rgba(255,255,255,.1); margin-bottom:18px; }
.tab-btn{
  background:none; border:none; cursor:pointer;
  color:var(--c-grey); font-weight:700; font-size:1rem;
  padding:10px 4px; margin-right:20px;
  border-bottom:3px solid transparent;
}
.tab-btn.active{ color:#fff; border-bottom-color:var(--c-blue); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* Cards */
.card{
  background:var(--c-black-soft);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:24px;
}
.card h2, .card h3{ margin-top:0; }

.post-list .post-item{
  display:flex;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.post-list .post-item:last-child{ border-bottom:none; }
.post-item .thumb{ flex:0 0 140px; }
.post-item .thumb img{ border-radius:8px; }
.post-item .entry-title{ margin:0 0 6px; font-size:1.1rem; }
.post-item .entry-meta{ font-size:.78rem; color:var(--c-grey); }

.category-badge{
  display:inline-block;
  background:rgba(10,108,255,.18);
  color:var(--c-blue-light);
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:4px;
  margin-bottom:6px;
}

/* =========================================================
   5. SPORTS SCOREBOARD
   ========================================================= */
.sports-board{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.match-card{
  background:var(--c-black-soft);
  border:1px solid rgba(255,255,255,.08);
  border-left:4px solid var(--c-blue);
  border-radius:8px;
  padding:14px;
}
.match-card.live{ border-left-color:#ff3b3b; }
.match-card .league{ font-size:.72rem; color:var(--c-grey); text-transform:uppercase; margin-bottom:8px;}
.match-card .teams{ display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.match-card .score{ font-size:1.3rem; color:var(--c-blue-light); }
.match-card .status{ font-size:.75rem; margin-top:8px; color:var(--c-grey); }
.match-card.live .status{ color:#ff6b6b; font-weight:700; }

/* =========================================================
   6. WIDGETS / SIDEBAR
   ========================================================= */
.widget{ margin-bottom:26px; }
.widget-title{
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  border-bottom:2px solid var(--c-blue);
  padding-bottom:8px;
  margin-bottom:14px;
}

.sidebar-popular-list{
  list-style:none; counter-reset:popitem; margin:0; padding:0;
}
.sidebar-popular-list li{
  counter-increment:popitem;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:12px 0;
}
.sidebar-popular-list li:first-child{ padding-top:0; }
.sidebar-popular-list li:last-child{ border-bottom:none; }
.sidebar-popular-list a{ display:flex; gap:10px; align-items:center; color:#fff; }
.sidebar-popular-list a:hover{ color:var(--c-blue-light); text-decoration:none; }
.sidebar-popular-list .sp-thumb{ flex:0 0 56px; }
.sidebar-popular-list .sp-thumb img{ border-radius:6px; aspect-ratio:1/1; object-fit:cover; }
.sidebar-popular-list .sp-title{ font-size:.9rem; line-height:1.35; }
.sidebar-popular-list li::before{
  content:counter(popitem);
  display:none;
}

/* =========================================================
   7. ADSENSE BLOCKS
   ========================================================= */
.ad-slot{
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.15);
  border-radius:8px;
  text-align:center;
  padding:8px;
  margin:24px 0;
  overflow:hidden;
}
.ad-slot span.ad-label{
  display:block;
  font-size:.65rem;
  text-transform:uppercase;
  color:var(--c-grey);
  margin-bottom:6px;
  letter-spacing:1px;
}

/* =========================================================
   8. COOKIE CONSENT (RODO / AdSense)
   ========================================================= */
#cookie-consent-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  background:var(--c-black-soft);
  border-top:2px solid var(--c-blue);
  color:#fff;
  padding:18px 20px;
  z-index:9999;
  display:none;
}
#cookie-consent-banner.show{ display:block; }
#cookie-consent-banner .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
#cookie-consent-banner p{ margin:0; font-size:.85rem; max-width:700px; }
#cookie-consent-banner .cc-actions{ display:flex; gap:10px; flex-shrink:0; }
#cookie-consent-banner button{
  border:none;
  padding:10px 18px;
  border-radius:6px;
  cursor:pointer;
  font-weight:700;
}
#cc-accept{ background:var(--c-blue); color:#fff; }
#cc-reject{ background:transparent; color:var(--c-grey); border:1px solid var(--c-grey); }

/* =========================================================
   9. FOOTER
   ========================================================= */
.site-footer{
  background:var(--c-black-soft);
  border-top:2px solid var(--c-blue);
  margin-top:40px;
  padding:36px 0 20px;
  font-size:.85rem;
  color:var(--c-grey);
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:24px;
  margin-bottom:24px;
}
.footer-grid h4{ color:#fff; margin-top:0; }
.site-footer .footer-bottom{
  text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:16px;
}

/* =========================================================
   10. RESPONSIVE NAV
   ========================================================= */
@media (max-width:780px){
  .menu-toggle{ display:inline-block; }
  .main-navigation{ display:none; width:100%; }
  .main-navigation.toggled{ display:block; }
  .main-navigation ul{ flex-direction:column; gap:10px; padding:14px 0; }
}