/*
Theme Name: Agent-Intel Light
Theme URI: https://agent-intel.io
Author: Agent-Intel.io
Description: Light theme for blog.agent-intel.io that matches the agent-intel.io marketing site (DM Sans, white paper, ink text, cyan accent, deep navy footer). Same template structure as the Agent-Intel Blog dark theme.
Version: 2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: agentintel-blog
*/

:root{
  --ink:#101820;--ink-soft:#475563;--muted:#7A8894;
  --line:#C7D0D8;--line-soft:#E3E8EC;
  --cyan:#00B8D9;--cyan-dk:#0092AC;--green:#10B981;--amber:#B4791A;--purple:#6D44D8;--pink:#DB2777;
  --paper:#FFFFFF;--wash:#F4F7F9;--deep:#0B1219;
  --radius:12px;--maxw:1120px;--content:720px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan-dk);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.15;font-weight:700;color:var(--ink)}
::selection{background:rgba(0,184,217,.22)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:var(--content);margin:0 auto;padding:0 24px}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.mono{font-family:"DM Mono",ui-monospace,Menlo,Consolas,monospace}

/* ---------- header: same as the marketing site nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-weight:700;font-size:21px;letter-spacing:-.4px;color:var(--ink);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:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);border-radius:99px;vertical-align:3px}
.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:15px;font-weight:500}
.site-nav a:hover{color:var(--cyan);text-decoration:none}
.site-nav .current-menu-item>a{color:var(--cyan)}
.nav-cta{display:inline-block;font-weight:600;font-size:15px;padding:11px 20px;border-radius:7px;background:var(--ink);color:#fff !important;white-space:nowrap;transition:.15s}
.nav-cta:hover{background:var(--deep);text-decoration:none}
.nav-toggle{display:none;background:none;border:1.5px solid var(--line);border-radius:7px;color:var(--ink);padding:8px 12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}

/* ---------- blog hero ---------- */
.blog-hero{padding:72px 0 48px;border-bottom:1px solid var(--line-soft)}
.blog-hero .eyebrow{margin:0 0 12px}
.blog-hero h1{margin:0;font-size:clamp(34px,5vw,54px);max-width:18ch}
.blog-hero h1 em{font-style:normal;color:var(--cyan)}
.blog-hero p{color:var(--ink-soft);font-size:clamp(17px,2vw,20px);max-width:58ch;margin:18px 0 0}

/* ---------- featured post ---------- */
.featured{display:grid;grid-template-columns:1.15fr 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:48px 0 28px;transition:border-color .15s,box-shadow .15s}
.featured:hover{border-color:var(--cyan);box-shadow:0 6px 24px rgba(16,24,32,.07)}
.featured .thumb{min-height:300px;background:linear-gradient(135deg,#EAF7FB,#F3F1FC);position:relative}
.featured .thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.featured .body{padding:38px 42px;display:flex;flex-direction:column;justify-content:center}
.featured h2{margin:12px 0 12px;font-size:clamp(24px,2.8vw,32px)}
.featured h2 a{color:var(--ink)}
.featured h2 a:hover{color:var(--cyan-dk);text-decoration:none}
.featured .excerpt{color:var(--ink-soft);font-size:16.5px;margin:0 0 18px}

/* ---------- card grid ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:28px 0 64px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s,transform .15s}
.card:hover{border-color:var(--cyan);box-shadow:0 6px 24px rgba(16,24,32,.07);transform:translateY(-2px)}
.card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#EAF7FB,#F3F1FC);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:10px 0 8px;font-size:19px;line-height:1.3}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--cyan-dk);text-decoration:none}
.card .excerpt{color:var(--ink-soft);font-size:15px;line-height:1.55;margin:0 0 14px;flex:1}

/* ---------- pills / meta ---------- */
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-block;padding:4px 12px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-dk);background:#EFFAFD;border:1px solid #B5E6F1}
a.pill:hover{text-decoration:none;background:#E0F6FB}
.pill.green{color:#0B8F67;background:#ECFDF5;border-color:#A7F3D0}
.pill.gold{color:var(--amber);background:#FDF8EC;border-color:#E2C486}
.pill.purple{color:var(--purple);background:#F3EEFE;border-color:#E1D6FB}
.pill.pink{color:var(--pink);background:#FDF2F8;border-color:#F7D3E6}
.meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;font-weight:500}
.meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line);display:inline-block}

/* ---------- single post ---------- */
.single-head{padding:60px 0 8px}
.single-head .pill-row{margin-bottom:18px}
.single-head h1{margin:0 0 18px;font-size:clamp(30px,4.4vw,46px)}
.single-head .meta{font-size:14.5px}
.single-hero-img{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 50px rgba(16,24,32,.12);margin:30px 0 8px}

.entry-content{padding:28px 0 40px;font-size:17.5px;line-height:1.7}
.entry-content>*{max-width:var(--content)}
.entry-content p{margin:0 0 1.4em}
.entry-content h2{font-size:28px;margin:1.9em 0 .7em}
.entry-content h3{font-size:22px;margin:1.7em 0 .6em}
.entry-content h4{font-size:18px;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)}
.entry-content a{font-weight:600}
.entry-content blockquote{margin:1.8em 0;padding:18px 24px;border-left:3px solid var(--cyan);background:#F0FAFC;border-radius:0 10px 10px 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(--wash);border:1px solid var(--line-soft);border-radius:5px;padding:2px 6px;color:var(--ink)}
.entry-content pre{background:var(--deep);color:#E8EDF2;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:inherit}
.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-soft);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-bottom:1px solid var(--line-soft);padding:12px 14px;text-align:left;vertical-align:top}
.entry-content th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1.5px solid var(--ink)}

/* ---------- post footer CTA: the dark band from the site ---------- */
.post-cta{max-width:var(--content);background:var(--ink);color:#fff;border-radius:14px;padding:36px 40px;margin:16px 0 56px}
.post-cta h3{margin:0 0 8px;font-size:23px;color:#fff}
.post-cta p{margin:0 0 20px;color:#9DAAB6;font-size:16px}
.post-cta .fine{font-size:13.5px;color:#7A8894;margin:14px 0 0}
.btn-cyan{display:inline-block;padding:13px 24px;border-radius:7px;background:var(--cyan);color:#04222a;font-weight:600;font-size:15.5px;transition:.15s}
.btn-cyan:hover{background:var(--cyan-dk);color:#fff;text-decoration:none}

/* ---------- 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:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;color:var(--ink);font-weight:600;font-size:15px;line-height:1.35;transition:border-color .15s}
.post-nav a:hover{border-color:var(--cyan);text-decoration:none}
.post-nav .lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-dk);margin-bottom:6px}
.post-nav .next{text-align:right}

/* ---------- archive / search head ---------- */
.archive-head{padding:60px 0 36px;border-bottom:1px solid var(--line-soft)}
.archive-head .eyebrow{margin:0 0 10px}
.archive-head h1{margin:0;font-size:clamp(28px,3.6vw,40px)}
.archive-head p{color:var(--ink-soft);margin:12px 0 0;max-width:62ch}

/* ---------- 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:#fff;border:1.5px solid var(--line);border-radius:7px;color:var(--ink);font-size:14px;font-weight:600}
.pagination .page-numbers:hover{border-color:var(--ink);text-decoration:none}
.pagination .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- search form ---------- */
.search-form{display:flex;gap:10px;max-width:520px}
.search-form input[type=search]{flex:1;background:#fff;border:1px solid var(--line);border-radius:7px;padding:11px 16px;color:var(--ink);font-family:inherit;font-size:15.5px}
.search-form input[type=search]::placeholder{color:var(--muted)}
.search-form input[type=search]:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,184,217,.15)}
.search-form button{background:var(--ink);color:#fff;border:none;border-radius:7px;padding:11px 20px;font-family:inherit;font-weight:600;font-size:15px;cursor:pointer}
.search-form button:hover{background:var(--deep)}

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

/* ---------- footer: same as the marketing site ---------- */
.site-footer{padding:48px 0 40px;background:var(--deep);color:#7F8D9A;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.site-footer .brand{color:#fff;font-size:21px;display:inline-block;margin-bottom:10px}
.site-footer p{margin:0;max-width:34ch}
.site-footer h5{color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
.site-footer a{color:#7F8D9A}
.site-footer a:hover{color:var(--cyan);text-decoration:none}
.foot-bottom{margin-top:36px;padding-top:22px;border-top:1px solid #1E2A35;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px}
.social{display:flex;gap:16px;align-items:center}
.social a{display:inline-flex;color:#7F8D9A;transition:.15s}
.social a:hover{color:var(--cyan)}
.social svg{width:18px;height:18px;display:block}

/* ---------- cookie toast (same as site) ---------- */
.ck{position:fixed;left:20px;right:20px;bottom:20px;z-index:300;margin:0 auto;max-width:660px;background:var(--deep);color:#E8EDF2;border:1px solid #24303C;border-radius:12px;padding:17px 20px;box-shadow:0 18px 46px rgba(0,0,0,.38);display:none;gap:16px;align-items:center;flex-wrap:wrap}
.ck.show{display:flex}
.ck p{flex:1;min-width:250px;font-size:14.5px;line-height:1.5;color:#9DAAB6;margin:0}
.ck p b{color:#fff;font-weight:600}
.ck a{color:#E8EDF2;text-decoration:underline}
.ck .ck-acts{display:flex;gap:9px;flex:0 0 auto}
.ck button{font:inherit;font-size:14px;font-weight:600;padding:9px 17px;border-radius:7px;cursor:pointer;border:1.5px solid transparent}
.ck .btn-line{border-color:#36434F;color:#E8EDF2;background:none}
.ck .btn-cyan{background:var(--cyan);color:#04222a}

/* ---------- 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(--ink);color:#fff;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}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@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:66px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line-soft);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:48px 0 36px}
  .post-cta{padding:26px 22px}
  .foot-grid{grid-template-columns:1fr}
  .ck{left:12px;right:12px;bottom:12px;padding:16px}
  .ck .ck-acts{width:100%}
  .ck .ck-acts button{flex:1}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}