/*
Theme Name: Comeback Insights
Theme URI: https://planmycomeback.com/insights/
Author: Click Circle LLC
Description: Plan My Comeback's article section. Mirrors the static site's design tokens (forest/mint palette, Fraunces + Inter) so planmycomeback.com/insights/ reads as part of the same site. Home is a newest-first list of articles.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: comeback-insights
*/

/* ---------- Tokens: copied from planmycomeback.com index.html / guides ---------- */
:root{
  --bg:#F5F9F8;
  --bg-warm:#E9F6F1;
  --surface:#FFFFFF;
  --ink:#0B2B31;
  --muted:#5C7370;
  --border:#DCE6E3;
  --forest:#003341;
  --forest-deep:#001F29;
  --forest-light:#0F5C68;
  --mint:#57DFB6;
  --mint-dark:#2FAE8A;
  --success-bg:#E4FBF3;
  --shadow: 0 1px 2px rgba(0,51,65,0.07), 0 8px 24px rgba(0,51,65,0.09);
  --shadow-lg: 0 12px 32px rgba(0,31,41,0.14), 0 4px 12px rgba(0,31,41,0.08);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{background:var(--bg); overflow-x:hidden;}
body{
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.25;
  margin:0 0 14px;
  color:var(--forest-deep);
}
a{color:var(--forest-light);}
img{max-width:100%; height:auto; display:block;}
button{font-family:inherit;}
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 24px;}

.eyebrow{
  display:inline-block; font-size:11.5px; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase;
  color:var(--forest-light); background:var(--success-bg);
  padding:5px 12px; border-radius:99px; margin-bottom:16px;
}
.eyebrow a{color:inherit; text-decoration:none;}
.on-dark .eyebrow{background:rgba(87,223,182,0.15); color:#8FD9C4;}

/* ---------- Buttons (site) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:12px; font-weight:800; font-size:15.5px;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{
  background:linear-gradient(180deg, #8CEFD3, var(--mint));
  color:var(--forest-deep);
  padding:15px 26px;
  box-shadow:0 3px 0 var(--mint-dark), 0 6px 16px rgba(47,174,138,0.3);
}
.btn-primary.small{padding:11px 18px; font-size:13.5px;}
.btn svg{width:16px; height:16px; flex:none;}
@media (max-width:480px){ .btn{white-space:normal; text-align:center;} }

/* ---------- Nav (site) ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; background:var(--forest); color:#fff;
}
.admin-bar .nav{top:32px;}
@media (max-width:782px){ .admin-bar .nav{top:46px;} }
.nav-inner{
  max-width:1120px; margin:0 auto; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces',serif; font-weight:600; font-size:19px;
  color:#fff; text-decoration:none;
}
.brand .brand-sub{
  display:block; font-family:'Inter',sans-serif; font-weight:500;
  font-size:10px; letter-spacing:0.09em; text-transform:uppercase;
  color:#8FD9C4; margin-top:1px;
}
.nav-right{display:flex; align-items:center; gap:22px;}
.nav-link{
  color:#BFE0CE; text-decoration:none; font-size:13.5px; font-weight:600;
}
.nav-link:hover{color:#fff; text-decoration:underline;}
@media (max-width:560px){ .nav-link{display:none;} }

/* ---------- Dark band (list hero + article hero) ---------- */
.band{background:var(--forest); color:#fff; padding:52px 0 56px;}
.band h1{color:#fff; font-size:44px; line-height:1.1; margin-bottom:14px;}
.band .sub{font-size:17.5px; color:rgba(255,255,255,0.8); line-height:1.6; max-width:620px; margin:0;}
.mint-divider{height:4px; background:linear-gradient(90deg, var(--mint), var(--mint-dark));}
.meta-row{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:22px;}
.meta-item{display:flex; align-items:center; gap:6px; font-size:13px; color:#BFE0CE; font-weight:600;}
.meta-item svg{width:14px; height:14px; color:var(--mint); flex:none;}
.meta-item a{color:inherit; text-decoration:none;}
.meta-item a:hover{text-decoration:underline;}
@media (max-width:640px){ .band h1{font-size:34px;} }

/* ---------- Article list (home / archives): slim title row + tile grid ---------- */
.page-head{padding:30px 0 6px;}
.page-head h1{font-size:30px; margin:0 0 4px;}
.page-head .sub{margin:0; color:var(--muted); font-size:15px;}
.post-list{padding:20px 0 72px;}
.post-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:22px;
}
@media (max-width:1024px){ .post-grid{grid-template-columns:repeat(3, minmax(0, 1fr));} }
@media (max-width:720px){ .post-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;} }
@media (max-width:440px){ .post-grid{grid-template-columns:1fr;} }
.tile{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow); height:100%;
  display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.tile:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.tile-img{display:block; aspect-ratio:4/3; overflow:hidden; background:var(--forest);}
.tile-img img{width:100%; height:100%; object-fit:cover; display:block;}
/* Placeholder for posts without a featured image: brand mark on the forest gradient */
.tile-ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--forest-deep), var(--forest-light));
}
.tile-ph svg{opacity:0.8;}
.tile-body{padding:14px 16px 18px; display:flex; flex-direction:column; gap:6px;}
.tile .meta{
  display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center;
  font-size:12px; font-weight:600; color:var(--muted);
}
.tile .meta .dot{color:var(--border);}
.tile h2{font-size:17px; line-height:1.3; margin:0;}
.tile h2 a{color:var(--forest-deep); text-decoration:none;}
.tile h2 a:hover{color:var(--forest-light);}
.empty{color:var(--muted); font-size:16px;}

.pagination{margin-top:32px; display:flex; justify-content:center;}
.pagination .nav-links{display:flex; gap:6px; flex-wrap:wrap;}
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface);
  color:var(--forest); font-weight:700; font-size:14px; text-decoration:none;
}
.pagination .page-numbers.current{background:var(--forest); color:#fff; border-color:var(--forest);}
.pagination .page-numbers.dots{border:none; background:transparent;}
.pagination a.page-numbers:hover{border-color:var(--forest-light); color:var(--forest-light);}

/* ---------- Single article ---------- */
.article-wrap{max-width:760px; margin:0 auto; padding:48px 24px 40px;}
.entry-content{font-size:17px; line-height:1.75;}
.entry-content > *{margin-top:0;}
.entry-content h2{font-size:27px; margin-top:48px; padding-top:36px; border-top:1px solid var(--border);}
.entry-content h2:first-child{margin-top:0; padding-top:0; border-top:none;}
.entry-content h3{font-size:20px; margin-top:32px; color:var(--forest);}
.entry-content h4{font-family:'Inter',sans-serif; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; font-size:11.5px; color:var(--forest); margin-top:28px;}
.entry-content p{margin:0 0 18px; color:var(--muted);}
.entry-content p strong, .entry-content li strong{color:var(--ink);}
.entry-content a{color:var(--forest-light); text-decoration:underline;}
.entry-content a:hover{color:var(--forest);}
.entry-content ul, .entry-content ol{margin:0 0 20px; padding-left:22px; color:var(--muted);}
.entry-content li{margin-bottom:8px;}
.entry-content hr{border:none; border-top:1px solid var(--border); margin:40px 0;}
.entry-content blockquote{
  margin:28px 0; padding:18px 22px; border-left:4px solid var(--mint);
  background:var(--success-bg); border-radius:12px; color:var(--ink);
}
.entry-content blockquote p{margin:0; color:var(--ink);}
.entry-content blockquote p + p{margin-top:8px;}
.entry-content blockquote cite{display:block; margin-top:8px; font-size:13px; color:var(--muted); font-style:normal;}
.entry-content img, .entry-content figure{border-radius:12px;}
.entry-content figure{margin:28px 0;}
.entry-content figcaption{font-size:13px; color:var(--muted); margin-top:8px; text-align:center;}
.entry-content table{width:100%; border-collapse:collapse; margin:0 0 24px; font-size:15px;}
.entry-content th, .entry-content td{border:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top;}
.entry-content th{background:var(--bg-warm); color:var(--forest-deep); font-weight:700;}
.entry-content code{background:var(--bg-warm); padding:2px 6px; border-radius:6px; font-size:0.92em;}
.entry-content pre{background:var(--forest-deep); color:#E4FBF3; padding:18px; border-radius:12px; overflow:auto;}
.entry-content pre code{background:none; padding:0; color:inherit;}
.entry-content .wp-block-button__link{border-radius:12px; font-weight:800;}
.entry-content .aligncenter{margin-left:auto; margin-right:auto;}
.entry-content .alignwide, .entry-content .alignfull{max-width:none;}
.entry-content .wp-block-image img{margin:0 auto;}
.entry-content > :last-child{margin-bottom:0;}

/* Callouts: same classes the static guides use, so pasted guide HTML renders identically */
.callout{border-radius:12px; padding:20px 22px; margin:28px 0;}
.callout-tip{background:var(--success-bg); border-left:4px solid var(--mint);}
.callout-tip .callout-label{color:var(--mint-dark);}
.callout-warn{background:#FEF7E6; border-left:4px solid #D9A441;}
.callout-warn .callout-label{color:#B8862F;}
.callout-key{background:#EEF3FF; border-left:4px solid #5B7FD4;}
.callout-key .callout-label{color:#3D5FC4;}
.callout-label{font-size:10.5px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; margin-bottom:6px; display:block;}
.entry-content .callout p{margin:0; font-size:14.5px; color:var(--ink); line-height:1.6;}
.entry-content .callout p + p{margin-top:8px;}

.entry-footer{
  max-width:760px; margin:0 auto; padding:0 24px 48px;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px;
}
.entry-footer .tags{display:flex; flex-wrap:wrap; gap:8px;}
.entry-footer .tags a{
  font-size:12px; font-weight:700; color:var(--forest-light); background:var(--success-bg);
  padding:4px 10px; border-radius:99px; text-decoration:none;
}
.back-link{display:inline-flex; align-items:center; gap:6px; color:var(--forest-light); font-weight:700; font-size:14px; text-decoration:none;}
.back-link svg{width:15px; height:15px;}
.back-link:hover{text-decoration:underline;}

/* CTA card back to the funnel (the point of the whole section) */
.cta-card{
  max-width:760px; margin:0 auto 72px; padding:0 24px;
}
.cta-card-inner{
  background:var(--forest-deep); color:#fff; border-radius:18px;
  padding:34px 32px; box-shadow:var(--shadow-lg);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px;
}
.cta-card h3{color:#fff; font-size:24px; margin:0 0 6px;}
.cta-card p{margin:0; color:#BFE0CE; font-size:15px; max-width:440px;}
@media (max-width:640px){ .cta-card-inner{padding:26px 22px;} .cta-card .btn{width:100%;} }

/* Pages + 404 */
.page-wrap{max-width:760px; margin:0 auto; padding:48px 24px 72px;}
.page-wrap h1{font-size:38px;}
.search-form{display:flex; gap:8px; max-width:420px; margin-top:20px;}
.search-form input[type=search]{
  flex:1; font:inherit; padding:11px 14px; border:1px solid var(--border); border-radius:10px; background:var(--surface);
}
.search-form button{
  font:inherit; font-weight:700; padding:11px 16px; border:none; border-radius:10px;
  background:var(--forest); color:#fff; cursor:pointer;
}

/* ---------- Footer (site) ---------- */
.site-footer{background:var(--forest-deep); color:#BFE0CE; padding:46px 0 26px; margin-top:auto;}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:24px; padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand .brand{color:#fff; margin-bottom:8px;}
.footer-brand p{font-size:13px; color:#8FAEA4; max-width:280px; line-height:1.6; margin:0;}
.footer-col h4{
  font-family:'Inter',sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:#fff; margin:0 0 10px;
}
.footer-col ul{list-style:none; margin:0; padding:0; font-size:13.5px; line-height:2;}
.footer-col a{color:#BFE0CE; text-decoration:none;}
.footer-col a:hover{color:#fff; text-decoration:underline;}
.footer-bottom{
  display:flex; flex-direction:column; gap:12px;
  padding-top:20px; font-size:12px; color:#71938A;
}
/* Legal links: a wrapping row where each link stays on ONE line (an inline run
   of anchors broke "…Sensitive Personal Information" across lines). */
.footer-links{display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; padding:0;}
.footer-links a{color:#BFE0CE; text-decoration:none; white-space:nowrap;}
.footer-links a:hover{color:#fff; text-decoration:underline;}
body{min-height:100vh; display:flex; flex-direction:column;}
.site-main{flex:1 0 auto;}
