/*
Theme Name: Celerion IT - Knockout Consulting
Author: ChatGPT
Version: 1.2.1
Text Domain: celerion-it
*/

:root{
  --bg:#070a12;
  --bg2:#0b1222;
  --card: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.12);
  --text:#eaf0ff;
  --muted:#b6c1e5;
  --accent:#4ea1ff;
  --accent2:#f5c84b;
  --radius:18px;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --max:1180px;
  --pad:24px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 600px at 10% 0%, rgba(78,161,255,.22), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(245,200,75,.18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  line-height:1.6;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
hr{border:0;height:1px;background:var(--line);margin:18px 0}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  transition:.18s ease;
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10)}
.btn.primary{
  background:linear-gradient(135deg, var(--accent), #8ac6ff);
  border-color:rgba(78,161,255,.35);
  color:#061022;
  font-weight:800;
}
.btn.gold{
  background:linear-gradient(135deg, var(--accent2), #ffe6a0);
  border-color:rgba(245,200,75,.45);
  color:#0e0f12;
  font-weight:900;
}

.badge{
  display:inline-flex;align-items:center;
  padding:7px 12px;border-radius:999px;
  background:rgba(78,161,255,.12);
  border:1px solid rgba(78,161,255,.26);
  color:var(--muted);
  font-size:12px;
}

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(14px);
  background:rgba(7,10,18,.70);
  border-bottom:1px solid var(--line);
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:250px;
}

.logo-box{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg, rgba(78,161,255,.25), rgba(245,200,75,.18));
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;display:grid;place-items:center;
}
.logo-box img{width:100%;height:100%;object-fit:cover}

.brand-title{font-weight:950;letter-spacing:.2px}
.brand-tag{font-size:12px;color:var(--muted);margin-top:2px}

/* MENU CONSISTENCY FIX */
.nav{display:flex;justify-content:center;flex:1}
.nav .menu{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}

.nav a,
.nav .menu a,
.nav .menu li a,
.nav .nav-link{
  color:var(--muted);
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  line-height:1.2;
}

.nav a:hover,
.nav .menu a:hover,
.nav .menu li a:hover,
.nav .nav-link:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}

/* Normalize WP menu markup */
.nav .menu ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}
.nav .menu li{list-style:none;margin:0;padding:0}
.nav .menu li.current-menu-item > a,
.nav .menu li.current_page_item > a,
.nav .menu li.current-menu-ancestor > a,
.nav .menu li.current_page_ancestor > a,
.nav .menu a[aria-current="page"],
.nav .nav-link.is-active{
  color:var(--text);
  background:rgba(78,161,255,.14);
  border-color:rgba(78,161,255,.26);
}

.actions{display:flex;align-items:center;gap:10px}

.lang-select{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  padding:10px 12px;border-radius:14px;
}
.lang-select option{color:#111}

.hero{
  margin-top:18px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
.hero-bg{
  background:
    linear-gradient(90deg, rgba(7,10,18,.90), rgba(7,10,18,.55)),
    url("assets/img/hero.jpg");
  background-size:cover;
  background-position:center;
  padding:68px 26px;
}

.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;align-items:stretch}
.hero h1{font-size:48px;line-height:1.06;margin:10px 0 10px 0}
.hero p{color:var(--muted);margin:0 0 16px 0;max-width:62ch}

.hero-mini{
  padding:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.kpi{padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(7,10,18,.50)}
.kpi .n{font-weight:950;font-size:18px}
.kpi .l{color:var(--muted);font-size:12px}

.section{padding:34px 0}
.h2{font-size:28px;margin:0 0 12px 0}
.sub{color:var(--muted);margin:0 0 16px 0}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.service{padding:16px}
.service .top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ico{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(78,161,255,.14);
  border:1px solid rgba(78,161,255,.26);
}
.service p{margin:0;color:var(--muted)}

.pillrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pill{
  font-size:12px;color:var(--muted);
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}

.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}

.media{
  min-height:320px;
  background-size:cover;
  background-position:center;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
}
.media.cables{background-image:linear-gradient(180deg, rgba(7,10,18,.25), rgba(7,10,18,.75)), url("assets/img/cables.jpg")}
.media.security{background-image:linear-gradient(180deg, rgba(7,10,18,.25), rgba(7,10,18,.75)), url("assets/img/security.jpg")}
.media.work{background-image:linear-gradient(180deg, rgba(7,10,18,.25), rgba(7,10,18,.75)), url("assets/img/work.jpg")}

.quote{padding:18px}
.quote strong{font-size:18px}
.quote p{color:var(--muted);margin:10px 0 0 0}

.faq details{padding:12px 0;border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:900}
.faq .a{color:var(--muted);padding-top:8px}

.footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.footer a{color:var(--text);opacity:.9}
.footer a:hover{opacity:1}

.page-wrap{padding:34px 0}
.page-title{font-size:36px;margin:0 0 10px 0}

.form{display:grid;gap:10px;max-width:700px}
.form input,.form textarea{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  color:var(--text);
  padding:12px 12px;
  outline:none;
}
.form textarea{min-height:140px;resize:vertical}

.notice{
  padding:12px 14px;border-radius:14px;
  border:1px solid rgba(78,161,255,.25);
  background:rgba(78,161,255,.10);
  color:var(--muted);
}

.wp-btn{
  padding:14px 16px;border-radius:999px;
  position:fixed;right:18px;bottom:18px;z-index:60;
  box-shadow:var(--shadow);
  background:linear-gradient(135deg, #25D366, #128C7E);
  color:white;border:0;
  display:flex;align-items:center;gap:10px;
}
.wp-btn:hover{filter:brightness(1.03);transform:translateY(-1px)}
.wp-btn span{font-weight:900}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .hero h1{font-size:38px}
  .brand{min-width:unset}
  .nav{justify-content:flex-start}
  .nav .menu ul{justify-content:flex-start}
}
/* ===========================
   BLOG (Index) — Premium Layout
   Uses: .blog-grid .blog-card .blog-title .blog-meta .blog-excerpt .blog-actions .blog-bottom-cta
   =========================== */

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:18px;
}

@media (max-width: 980px){
  .blog-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .blog-grid{ grid-template-columns:1fr; }
}

.blog-card{
  border-radius:18px;
  padding:18px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 10px 26px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  overflow:hidden;
  min-height: 220px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.blog-card:hover{
  transform: translateY(-2px);
  border-color: rgba(223,190,92,0.35);
  background:rgba(255,255,255,0.055);
}

.blog-title{
  margin:0 0 8px 0;
  font-size:18px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:0.1px;
}

.blog-title a{
  color:inherit;
  text-decoration:none;
}

.blog-title a:hover{
  text-decoration:underline;
}

.blog-meta{
  font-size:12.5px;
  opacity:.72;
  margin-bottom:10px;
}

.blog-excerpt{
  margin-top:8px;
  opacity:.9;
  font-size:14px;
  line-height:1.55;
}

.blog-actions{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.blog-readmore{
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  opacity:.92;
}

.blog-readmore:hover{
  text-decoration:underline;
}

/* Bottom CTA */
.blog-bottom-cta{
  margin-top:22px;
}

.blog-bottom-cta-inner{
  border-radius:22px;
  padding:20px;
  background: linear-gradient(135deg, rgba(223,190,92,0.10), rgba(255,255,255,0.04));
  border:1px solid rgba(223,190,92,0.22);
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
}

.blog-bottom-cta-inner h3{
  margin:0 0 6px 0;
  font-size:18px;
  font-weight:950;
}

.blog-bottom-cta-inner .sub{
  margin:0 0 12px 0;
  opacity:.9;
}