/*
Theme Name: Copera Blog
Theme URI: https://blog.copera.ai/
Author: Copera
Author URI: https://copera.ai/
Description: The official Copera blog theme — a bespoke dark editorial design that matches Copera's marketing-site branding (logo, Inter + Plus Jakarta Sans typography, brand blue/violet/cyan palette, header, and footer) so the blog feels like a seamless part of copera.ai.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: copera-blog
*/

/* ============================================================
   Design tokens — matched to the Copera marketing site
   ============================================================ */
:root{
  --bg:#0e0e10;              /* page background */
  --surface:#151515;         /* cards / panels */
  --surface-2:#0d0d14;       /* deep panel */
  --text:#fafafa;            /* text-primary */
  --text-2:#a1a1aa;          /* text-secondary */
  --text-3:#71717a;          /* text-muted */
  --primary:#2f55ea;         /* brand blue */
  --primary-hover:#3d63f5;
  --primary-alt:#6c5ce7;     /* violet accent */
  --cyan:#00b4d8;            /* cyan accent */
  --border:#27272a;
  --border-hover:#3f3f46;
  --border-soft:rgba(255,255,255,.06);
  --logo-grad:linear-gradient(160deg,#3463f3,#1e398d);
  --brand-grad:linear-gradient(135deg,#6c5ce7,#2f55ea,#00b4d8);
  --heading:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  overflow-x:hidden;
  min-height:100vh;
  line-height:1.6;
}
a{ color:var(--text-2); text-decoration:none; }
a:hover{ color:var(--text); }
img{ max-width:100%; display:block; }
::selection{ background:rgba(47,85,234,.3); color:#fff; }
input::placeholder{ color:var(--text-3); }
.wrap{ position:relative; }
.gradient-text{
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* ============================================================
   Navigation — mirrors the marketing-site header
   ============================================================ */
.site-nav{
  position:sticky; top:0; z-index:40;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.site-nav.is-scrolled{
  background:rgba(14,14,16,.80);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1280px; margin:0 auto; padding:0 24px; height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-left{ display:flex; align-items:stretch; gap:32px; }
.brand{ display:flex; align-items:center; gap:8px; }
.brand-logo{ width:28px; height:28px; border-radius:6px; display:block; }
.brand-name{ font-family:var(--heading); font-weight:700; font-size:20px; letter-spacing:-.025em; color:var(--text); }
.nav-links{ display:flex; align-items:stretch; gap:24px; font-size:14px; font-weight:500; }
.nav-link{ display:flex; align-items:center; height:64px; color:var(--text-2); cursor:pointer; transition:color .18s; }
.nav-link:hover{ color:var(--text); }
.nav-link.bankai{ gap:6px; }
.nav-link.is-active{ color:var(--text); font-weight:600; box-shadow:inset 0 -2px 0 var(--primary); }
.nav-badge{
  font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(47,85,234,.15); color:#89a0ff; border:1px solid rgba(47,85,234,.25);
  padding:2px 6px; border-radius:999px;
}
.nav-right{ display:flex; align-items:center; gap:16px; font-size:14px; }
.lang{ display:flex; align-items:center; gap:6px; color:var(--text-2); cursor:pointer; font-weight:500; font-size:14px; font-family:inherit; background:none; border:none; padding:0; line-height:1; }
.lang:hover{ color:var(--text); }
.lang .flag{ font-size:14px; }
.lang .caret{ font-size:9px; transition:transform .18s; }
/* Language switcher dropdown */
.lang-switch{ position:relative; }
.lang-menu{
  position:absolute; top:calc(100% + 12px); right:0; min-width:160px;
  background:#0d0d14; border:1px solid rgba(255,255,255,.1); border-radius:12px;
  padding:6px; box-shadow:0 16px 40px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s, transform .16s, visibility .16s;
  z-index:60;
}
.lang-switch:hover .lang-menu,
.lang-switch:focus-within .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-switch:hover .lang .caret,
.lang-switch:focus-within .lang .caret{ transform:rotate(180deg); }
.lang-item{
  display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:8px;
  font-size:14px; color:var(--text-2); white-space:nowrap;
}
.lang-item .flag{ font-size:15px; }
.lang-item:hover{ background:rgba(255,255,255,.05); color:var(--text); }
.lang-item.is-current{ background:rgba(47,85,234,.12); color:#93a7ff; }
.nav-login{ color:var(--text-2); cursor:pointer; font-weight:500; }
.nav-login:hover{ color:var(--text); }
.btn-primary{
  background:var(--primary); color:#fff; font-weight:500; font-size:14px;
  padding:8px 16px; border-radius:16px; cursor:pointer; white-space:nowrap;
  box-shadow:0 10px 15px -3px rgba(47,85,234,.25);
  transition:background .2s;
}
.btn-primary:hover{ background:var(--primary-hover); color:#fff; }

/* ============================================================
   Hero (home)
   ============================================================ */
.hero{ position:relative; }
.hero-glow{
  position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:900px; height:420px;
  background:radial-gradient(ellipse at center,rgba(47,85,234,.16),transparent 70%);
  pointer-events:none;
}
.hero-inner{ max-width:1200px; margin:0 auto; padding:76px 32px 20px; position:relative; }
.hero-head{ text-align:center; max-width:760px; margin:0 auto; }
.eyebrow{
  font-family:var(--heading); font-size:12px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:#8f9bff; margin-bottom:18px;
}
.hero-title{
  font-family:var(--heading);
  font-size:60px; line-height:1.04; font-weight:800; letter-spacing:-.03em; margin:0 0 18px;
}
.grad{
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.hero-sub{
  font-size:18px; line-height:1.6; color:var(--text-2);
  margin:0 auto 30px; max-width:560px;
}
.search-box{
  max-width:440px; margin:0 auto; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:12px; padding:12px 16px; color:var(--text-3);
}
.search-box svg{ flex:0 0 auto; }
.search-box input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-size:15px; font-family:inherit;
}

/* ============================================================
   Category chips
   ============================================================ */
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:36px 0 44px; }
.chips.left{ justify-content:flex-start; margin:0 0 42px; }
.chip{
  padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:500;
  cursor:pointer; transition:all .18s; color:var(--text-2);
  background:rgba(255,255,255,.04); border:1px solid var(--border);
}
.chip:hover{ color:var(--text); border-color:var(--border-hover); }
.chip.is-active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.chip.is-active:hover{ color:#fff; }

/* ============================================================
   Shared media boxes
   ============================================================ */
.media{
  position:relative; overflow:hidden;
  border:1px solid var(--border-soft);
  background:repeating-linear-gradient(135deg,#16161a 0 14px,#101013 14px 28px);
}
.media img{ width:100%; height:100%; object-fit:cover; }
.media-label{
  position:absolute; bottom:12px; left:14px; font-family:var(--sans);
  font-size:11px; color:#52525b; letter-spacing:.02em;
}

/* ============================================================
   Featured card
   ============================================================ */
.featured-card{
  display:grid; grid-template-columns:1.12fr 1fr; gap:32px; align-items:center;
  background:var(--surface); border:1px solid var(--border-soft); border-radius:20px;
  padding:20px; margin-bottom:50px; transition:border-color .2s, transform .2s;
  cursor:pointer;
}
.featured-card:hover{ border-color:rgba(47,85,234,.5); transform:translateY(-3px); }
.fc-media{ aspect-ratio:16/10; border-radius:14px; }
.badges{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.badge-featured{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--primary); color:#fff; padding:4px 9px; border-radius:6px;
}
.badge-cat{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(47,85,234,.14); border:1px solid rgba(47,85,234,.3); color:#93a7ff;
  padding:3px 9px; border-radius:6px;
}
.fc-title{ font-family:var(--heading); font-size:30px; line-height:1.15; font-weight:800; letter-spacing:-.02em; margin:0 0 14px; color:#fff; }
.fc-title a{ color:#fff; }
.fc-excerpt{ font-size:16px; line-height:1.6; color:var(--text-2); margin:0 0 22px; }

/* Bylines */
.byline{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#8b8b93; }
.byline .avatar{ width:28px; height:28px; font-size:12px; }
.byline .b-author{ color:#d4d4d8; font-weight:500; }
.byline .dot{ color:#52525b; }
.avatar{
  border-radius:50%; background:var(--logo-grad);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--heading); font-weight:700; color:#fff; flex:0 0 auto;
}

/* ============================================================
   Post grid + cards
   ============================================================ */
.post-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.post-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.post-card{
  display:flex; flex-direction:column; gap:14px;
  background:var(--surface); border:1px solid var(--border-soft); border-radius:16px;
  padding:14px; transition:border-color .2s, transform .2s; cursor:pointer;
}
.post-card:hover{ border-color:rgba(47,85,234,.5); transform:translateY(-3px); }
.pc-media{ aspect-ratio:16/9; border-radius:11px; }
.pc-badge{
  align-self:flex-start; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(47,85,234,.14); border:1px solid rgba(47,85,234,.28); color:#93a7ff;
  padding:3px 8px; border-radius:6px;
}
.pc-title{ font-family:var(--heading); font-size:18.5px; line-height:1.28; font-weight:700; letter-spacing:-.01em; margin:0; color:#f0f0f2; }
.pc-title a{ color:#f0f0f2; }
.post-card:hover .pc-title a{ color:#fff; }
.pc-excerpt{ font-size:14px; line-height:1.55; color:var(--text-2); margin:0; }
.byline-sm{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-3); margin-top:auto; padding-top:6px; }
.byline-sm .avatar{ width:24px; height:24px; font-size:11px; }
.byline-sm .b-author{ color:#c8c8cd; }
.byline-sm .dot{ color:#3f3f46; }

/* ============================================================
   Section wrappers
   ============================================================ */
.section{ max-width:1200px; margin:0 auto; padding:0 32px; position:relative; }

/* ============================================================
   Category / archive header
   ============================================================ */
.archive-head{ max-width:1200px; margin:0 auto; padding:56px 32px 20px; }
.back-link{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px;
  color:#8f9bff; cursor:pointer; margin-bottom:26px;
}
.back-link:hover{ color:#b3c0ff; }
.cat-eyebrow{
  font-family:var(--heading); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#8f9bff; margin-bottom:12px;
}
.cat-title{ font-family:var(--heading); font-size:52px; line-height:1.05; font-weight:800; letter-spacing:-.03em; margin:0 0 14px; }
.cat-desc{ font-size:17px; line-height:1.6; color:var(--text-2); margin:0 0 8px; max-width:620px; }
.cat-count{ font-family:var(--sans); font-size:12.5px; color:var(--text-3); margin:0 0 32px; letter-spacing:.02em; }

/* ============================================================
   Article (single)
   ============================================================ */
.article{ max-width:760px; margin:0 auto; padding:48px 32px 20px; }
.article-cat{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  background:rgba(47,85,234,.14); border:1px solid rgba(47,85,234,.3); color:#93a7ff;
  padding:4px 10px; border-radius:6px; margin-bottom:20px;
}
.article-title{ font-family:var(--heading); font-size:44px; line-height:1.1; font-weight:800; letter-spacing:-.03em; margin:0 0 24px; color:#fff; }
.article-meta{ display:flex; align-items:center; gap:12px; margin-bottom:34px; }
.article-meta .avatar{ width:44px; height:44px; font-size:17px; }
.am-name{ font-size:15px; font-weight:600; color:#eaeaec; }
.am-sub{ font-size:13px; color:var(--text-3); }
.article-cover{ aspect-ratio:16/8; border-radius:16px; margin-bottom:40px; }

.entry-content{ font-size:19px; line-height:1.75; color:#c8c8cf; font-family:var(--sans); }
.entry-content > *:first-child{ margin-top:0; }
.entry-content p{ margin:0 0 24px; }
.entry-content .lead{ font-size:21px; line-height:1.65; color:#dcdce2; }
.entry-content h2{ font-family:var(--heading); font-size:26px; font-weight:800; letter-spacing:-.01em; color:#fff; margin:42px 0 14px; }
.entry-content h3{ font-family:var(--heading); font-size:21px; font-weight:700; letter-spacing:-.01em; color:#fff; margin:34px 0 12px; }
.entry-content a{ color:#93a7ff; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.entry-content a:hover{ color:#b6c4ff; }
.entry-content strong{ color:#ececf0; font-weight:700; }
.entry-content em{ color:#d0d0d6; }
.entry-content blockquote{
  margin:32px 0; padding:8px 0 8px 24px; border-left:3px solid var(--primary);
  font-family:var(--heading); font-size:22px; line-height:1.5; color:#e6e6ea; font-weight:500;
}
.entry-content blockquote p{ margin:0; }
.entry-content ul,.entry-content ol{ margin:0 0 24px; padding-left:22px; color:#c8c8cf; }
.entry-content li{ margin-bottom:11px; }
.entry-content figure{ margin:34px 0 30px; }
.entry-content figure img{ width:100%; border-radius:14px; border:1px solid var(--border-soft); }
.entry-content figcaption{ font-size:13.5px; color:var(--text-3); margin-top:10px; text-align:center; }
.entry-content .wp-block-image{ margin:34px 0 30px; }
.entry-content h2 + p, .entry-content h3 + p{ margin-top:0; }

.divider{ height:1px; background:rgba(255,255,255,.08); margin:48px 0 36px; }
.keep-reading{ font-family:var(--heading); font-size:20px; font-weight:800; letter-spacing:-.01em; color:#fff; margin:0 0 22px; }
.related-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.related-card{
  display:flex; flex-direction:column; gap:11px;
  background:var(--surface); border:1px solid var(--border-soft); border-radius:14px;
  padding:12px; transition:border-color .2s, transform .2s; cursor:pointer;
}
.related-card:hover{ border-color:rgba(47,85,234,.5); transform:translateY(-3px); }
.rc-media{ aspect-ratio:16/9; border-radius:9px; }
.rc-badge{ align-self:flex-start; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#93a7ff; }
.rc-title{ font-family:var(--heading); font-size:15px; line-height:1.3; font-weight:700; margin:0; color:#eaeaec; }
.related-card:hover .rc-title{ color:#fff; }

/* Simple page template */
.page-wrap{ max-width:760px; margin:0 auto; padding:48px 32px 20px; }
.page-wrap .article-title{ font-size:40px; }

/* ============================================================
   CTA banner
   ============================================================ */
.cta{ max-width:1200px; margin:0 auto; padding:60px 32px 20px; }
.cta-inner{
  background:var(--brand-grad); border-radius:24px;
  padding:52px 40px; text-align:center; position:relative; overflow:hidden;
}
.cta-glow{
  position:absolute; top:-80px; right:-40px; width:280px; height:280px;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);
}
.cta h2{ font-family:var(--heading); font-size:34px; font-weight:800; letter-spacing:-.02em; margin:0 0 12px; color:#fff; position:relative; }
.cta p{ font-size:17px; line-height:1.55; color:rgba(255,255,255,.88); margin:0 auto 26px; max-width:500px; position:relative; }
.btn-light{
  display:inline-block; background:#fff; color:var(--primary); font-weight:700; font-size:15px;
  padding:13px 26px; border-radius:12px; cursor:pointer; position:relative;
}
.btn-light:hover{ color:var(--primary); opacity:.94; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ border-top:1px solid var(--border); margin-top:56px; background:var(--bg); }
.footer-inner{ max-width:1280px; margin:0 auto; padding:52px 24px 0; }
.footer-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-brand-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-logo{ width:40px; height:40px; border-radius:8px; display:block; }
.footer-brand-name{ font-family:var(--heading); font-weight:700; font-size:22px; letter-spacing:-.02em; color:#fff; }
.footer-tag{ font-size:14.5px; line-height:1.6; color:var(--text-3); margin:0; }
.socials{ display:flex; align-items:center; gap:10px; }
.social{
  width:36px; height:36px; border-radius:9px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.02); display:flex; align-items:center; justify-content:center;
  color:var(--text-3); cursor:pointer; transition:all .18s;
}
.social:hover{ color:var(--text); border-color:rgba(255,255,255,.2); }
.footer-rule{ height:1px; background:var(--border-soft); margin:36px 0 40px; }
.footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.footer-col{ display:flex; flex-direction:column; gap:14px; font-size:14px; }
.footer-col .col-title{ font-weight:600; color:var(--text); margin-bottom:2px; }
.footer-bottom{ border-top:1px solid var(--border-soft); margin-top:48px; }
.footer-bottom-inner{ padding:22px 0; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--text-3); }

/* ============================================================
   Pagination
   ============================================================ */
.pager{ display:flex; justify-content:center; gap:10px; margin:44px 0 0; }
.pager a,.pager span{
  padding:9px 15px; border-radius:10px; font-size:14px; font-weight:600;
  background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text-2);
}
.pager a:hover{ color:var(--text); border-color:var(--border-hover); }
.pager .current{ background:var(--primary); border-color:var(--primary); color:#fff; }

.empty-state{ text-align:center; color:var(--text-2); font-size:16px; padding:40px 0 20px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .related-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-cols{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .nav-links .nav-link:not(.bankai):not(.is-active){ display:none; }
}
@media (max-width:820px){
  .featured-card{ grid-template-columns:1fr; }
  .hero-title{ font-size:44px; }
  .cat-title{ font-size:40px; }
  .article-title{ font-size:34px; }
}
@media (max-width:680px){
  .nav-left{ gap:0; }
  .nav-links{ display:none; }
  .nav-right .nav-login{ display:none; }
  .lang-menu{ right:-8px; }
  .nav-inner{ padding:0 18px; }
  .hero-inner,.section,.archive-head,.cta{ padding-left:18px; padding-right:18px; }
  .article{ padding-left:18px; padding-right:18px; }
  .post-grid,.post-grid.cols-2{ grid-template-columns:1fr; }
  .related-grid{ grid-template-columns:1fr; }
  .hero-title{ font-size:34px; }
  .hero-inner{ padding-top:52px; }
  .cat-title{ font-size:32px; }
  .article-title{ font-size:29px; }
  .entry-content{ font-size:18px; }
  .entry-content .lead{ font-size:19px; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
  .footer-bottom-inner{ flex-direction:column; gap:8px; text-align:center; }
}