/*
Theme Name: Agent-Intel Blog
Theme URI: https://agent-intel.io
Author: Agent-Intel.io
Description: Custom dark theme for blog.agent-intel.io matching the Agent-Intel brand. DM Sans, deep navy background, cyan accents.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: agentintel-blog
*/

:root{
  --bg:#060C18;
  --card:#0D1628;
  --card-hover:#111D33;
  --line:#1B2A42;
  --cyan:#00D4F5;
  --green:#10B981;
  --gold:#C9A84C;
  --purple:#8B5CF6;
  --pink:#EC4899;
  --red:#EF4444;
  --muted:#5A7A8A;
  --ink:#D8E8F0;
  --ink-bright:#FFFFFF;
  --radius:10px;
  --maxw:1120px;
  --content:720px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--cyan);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
::selection{background:rgba(0,212,245,.25);}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:3px;}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:var(--content);margin:0 auto;padding:0 24px;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(6,12,24,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.brand{
  font-weight:700;font-size:20px;letter-spacing:-.3px;
  color:var(--ink-bright);white-space:nowrap;
}
.brand:hover{text-decoration:none;}
.brand b{color:var(--cyan);font-weight:700;}
.brand .tag{
  display:inline-block;margin-left:10px;padding:2px 9px;
  font-size:10.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:99px;
  vertical-align:2px;
}
.site-nav{display:flex;align-items:center;gap:26px;}
.site-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;}
.site-nav a{color:var(--ink);font-size:14.5px;font-weight:500;}
.site-nav a:hover{color:var(--cyan);text-decoration:none;}
.nav-cta{
  padding:8px 16px;border-radius:8px;
  background:var(--cyan);color:#04121B !important;
  font-weight:700;font-size:14px;
}
.nav-cta:hover{text-decoration:none;filter:brightness(1.1);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:7px 11px;font-size:15px;cursor:pointer;}

/* ---------- blog hero ---------- */
.blog-hero{padding:64px 0 40px;}
.blog-hero .eyebrow{
  font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--cyan);margin:0 0 12px;
}
.blog-hero h1{
  margin:0;font-size:clamp(30px,4.5vw,46px);line-height:1.12;
  font-weight:700;letter-spacing:-1px;color:var(--ink-bright);
  max-width:760px;
}
.blog-hero p{color:var(--muted);font-size:18px;max-width:620px;margin:16px 0 0;}

/* ---------- featured post ---------- */
.featured{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-bottom:48px;
  transition:border-color .2s ease;
}
.featured:hover{border-color:rgba(0,212,245,.45);}
.featured .thumb{min-height:280px;background:linear-gradient(135deg,#0A1322,#122036);position:relative;}
.featured .thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.featured .body{padding:36px 40px;display:flex;flex-direction:column;justify-content:center;}
.featured h2{margin:10px 0 12px;font-size:clamp(22px,2.6vw,30px);line-height:1.2;letter-spacing:-.5px;}
.featured h2 a{color:var(--ink-bright);}
.featured h2 a:hover{color:var(--cyan);text-decoration:none;}
.featured .excerpt{color:var(--muted);font-size:16px;margin:0 0 18px;}

/* ---------- card grid ---------- */
.post-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  padding-bottom:64px;
}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s ease, transform .2s ease;
}
.card:hover{border-color:rgba(0,212,245,.45);transform:translateY(-3px);}
.card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#0A1322,#122036);position:relative;}
.card .thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.card .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.card h3{margin:8px 0 8px;font-size:18.5px;line-height:1.3;letter-spacing:-.3px;}
.card h3 a{color:var(--ink-bright);}
.card h3 a:hover{color:var(--cyan);text-decoration:none;}
.card .excerpt{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 0 14px;flex:1;}

/* ---------- meta / pills ---------- */
.pill-row{display:flex;flex-wrap:wrap;gap:8px;}
.pill{
  display:inline-block;padding:3px 11px;border-radius:99px;
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--cyan);background:rgba(0,212,245,.09);border:1px solid rgba(0,212,245,.28);
}
a.pill:hover{text-decoration:none;background:rgba(0,212,245,.18);}
.pill.green{color:var(--green);background:rgba(16,185,129,.09);border-color:rgba(16,185,129,.28);}
.pill.gold{color:var(--gold);background:rgba(201,168,76,.09);border-color:rgba(201,168,76,.28);}
.pill.purple{color:var(--purple);background:rgba(139,92,246,.10);border-color:rgba(139,92,246,.30);}
.pill.pink{color:var(--pink);background:rgba(236,72,153,.09);border-color:rgba(236,72,153,.28);}
.meta{
  display:flex;align-items:center;gap:8px;
  color:var(--muted);font-size:13px;font-weight:500;
}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);display:inline-block;}

/* ---------- single post ---------- */
.single-head{padding:56px 0 8px;}
.single-head .pill-row{margin-bottom:18px;}
.single-head h1{
  margin:0 0 18px;font-size:clamp(28px,4vw,42px);line-height:1.15;
  font-weight:700;letter-spacing:-1px;color:var(--ink-bright);
}
.single-head .meta{font-size:14px;}
.single-hero-img{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin:28px 0 8px;}

.entry-content{padding:28px 0 40px;font-size:17.5px;}
.entry-content > *{max-width:var(--content);}
.entry-content p{margin:0 0 1.4em;}
.entry-content h2{font-size:27px;letter-spacing:-.5px;color:var(--ink-bright);margin:1.9em 0 .7em;line-height:1.25;}
.entry-content h3{font-size:21px;letter-spacing:-.3px;color:var(--ink-bright);margin:1.7em 0 .6em;}
.entry-content h4{font-size:18px;color:var(--ink-bright);margin:1.5em 0 .5em;}
.entry-content ul,.entry-content ol{margin:0 0 1.4em;padding-left:1.3em;}
.entry-content li{margin-bottom:.45em;}
.entry-content li::marker{color:var(--cyan);}
.entry-content strong{color:var(--ink-bright);}
.entry-content blockquote{
  margin:1.8em 0;padding:18px 24px;
  border-left:3px solid var(--cyan);
  background:var(--card);border-radius:0 var(--radius) var(--radius) 0;
  color:var(--ink);font-size:18px;
}
.entry-content blockquote p:last-child{margin-bottom:0;}
.entry-content code{
  font-family:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--card);border:1px solid var(--line);
  border-radius:5px;padding:2px 6px;color:var(--gold);
}
.entry-content pre{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;overflow-x:auto;margin:0 0 1.6em;
}
.entry-content pre code{background:none;border:none;padding:0;color:var(--ink);}
.entry-content img{border-radius:var(--radius);border:1px solid var(--line);margin:1.6em 0;}
.entry-content figure{margin:1.6em 0;}
.entry-content figcaption{color:var(--muted);font-size:13.5px;margin-top:10px;text-align:center;}
.entry-content hr{border:none;border-top:1px solid var(--line);margin:2.4em 0;}
.entry-content table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:15px;}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:10px 14px;text-align:left;}
.entry-content th{background:var(--card);color:var(--ink-bright);font-weight:600;}

/* ---------- post footer CTA ---------- */
.post-cta{
  max-width:var(--content);
  background:linear-gradient(135deg,var(--card),#101E38);
  border:1px solid rgba(0,212,245,.30);border-radius:var(--radius);
  padding:32px 36px;margin:16px 0 56px;
}
.post-cta h3{margin:0 0 8px;font-size:21px;color:var(--ink-bright);letter-spacing:-.3px;}
.post-cta p{margin:0 0 18px;color:var(--muted);font-size:15.5px;}
.btn-cyan{
  display:inline-block;padding:11px 22px;border-radius:8px;
  background:var(--cyan);color:#04121B;font-weight:700;font-size:15px;
}
.btn-cyan:hover{text-decoration:none;filter:brightness(1.1);}

/* ---------- prev / next ---------- */
.post-nav{
  max-width:var(--content);display:grid;grid-template-columns:1fr 1fr;gap:18px;
  padding-bottom:64px;
}
.post-nav a{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;color:var(--ink-bright);font-weight:600;font-size:15px;line-height:1.35;
  transition:border-color .2s ease;
}
.post-nav a:hover{border-color:rgba(0,212,245,.45);text-decoration:none;}
.post-nav .lbl{display:block;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.post-nav .next{text-align:right;}

/* ---------- archive / search head ---------- */
.archive-head{padding:56px 0 36px;}
.archive-head .eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin:0 0 10px;}
.archive-head h1{margin:0;font-size:clamp(26px,3.5vw,38px);letter-spacing:-.8px;color:var(--ink-bright);}
.archive-head p{color:var(--muted);margin:12px 0 0;max-width:620px;}

/* ---------- pagination ---------- */
.pagination{display:flex;justify-content:center;gap:8px;padding:8px 0 72px;flex-wrap:wrap;}
.pagination .page-numbers{
  min-width:40px;padding:9px 14px;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font-size:14px;font-weight:600;
}
.pagination .page-numbers:hover{border-color:rgba(0,212,245,.45);text-decoration:none;}
.pagination .page-numbers.current{background:var(--cyan);color:#04121B;border-color:var(--cyan);}

/* ---------- search form ---------- */
.search-form{display:flex;gap:10px;max-width:520px;}
.search-form input[type=search]{
  flex:1;background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:11px 16px;color:var(--ink);font-family:inherit;font-size:15px;
}
.search-form input[type=search]::placeholder{color:var(--muted);}
.search-form input[type=search]:focus{outline:none;border-color:var(--cyan);}
.search-form button{
  background:var(--cyan);color:#04121B;border:none;border-radius:8px;
  padding:11px 20px;font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;
}

/* ---------- 404 / empty ---------- */
.empty-state{padding:80px 0 100px;text-align:center;}
.empty-state h1{color:var(--ink-bright);font-size:clamp(26px,4vw,38px);letter-spacing:-.8px;margin:0 0 12px;}
.empty-state p{color:var(--muted);margin:0 auto 28px;max-width:480px;}
.empty-state .search-form{margin:0 auto;}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:#050A14;}
.site-footer .inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:34px 0;flex-wrap:wrap;
}
.site-footer .brand{font-size:17px;}
.site-footer .fine{color:var(--muted);font-size:13px;}
.site-footer nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.site-footer nav a{color:var(--muted);font-size:13.5px;}
.site-footer nav a:hover{color:var(--cyan);text-decoration:none;}

/* ---------- utility ---------- */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);word-wrap:normal!important;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--cyan);color:#04121B;padding:10px 18px;border-radius:0 0 8px 0;font-weight:700;
}
.skip-link:focus{left:0;}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .post-grid{grid-template-columns:repeat(2,1fr);}
  .featured{grid-template-columns:1fr;}
  .featured .thumb{min-height:220px;}
  .featured .body{padding:28px;}
}
@media(max-width:640px){
  body{font-size:16px;}
  .post-grid{grid-template-columns:1fr;}
  .site-nav ul{display:none;flex-direction:column;gap:0;position:absolute;top:64px;left:0;right:0;background:var(--card);border-bottom:1px solid var(--line);padding:8px 0;}
  .site-nav.open ul{display:flex;}
  .site-nav ul li a{display:block;padding:13px 24px;}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
  .post-nav{grid-template-columns:1fr;}
  .blog-hero{padding:44px 0 32px;}
  .post-cta{padding:24px;}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}
