/*
Theme Name: Work-Life Integrator (Kadence Child)
Template: kadence
Description: Child theme powering the WLI Operator's Notebook blog (archive + single post templates)
Version: 1.2
*/

:root{
  --teal:#0B3B34;
  --teal-mid:#175048;
  --teal-line:#2E6B60;
  --rose:#B24865;
  --rose-soft:#F0DCE1;
  --rose-tint:#7A2E44;
  --paper:#FAF9F5;
  --paper-line:#DEDACD;
  --ink:#16211D;
  --ink-soft:#57635C;
}
*{box-sizing:border-box; margin:0; padding:0;}
body.wli-blog{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wli-blog a{color:inherit; text-decoration:none;}
.wli-wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.wli-mono{font-family:'IBM Plex Mono',monospace;}
.wli-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--rose);
  font-weight:500;
}

/* ---- Nav ---- */
.wli-nav{border-bottom:1px solid var(--paper-line); background:var(--paper); position:sticky; top:0; z-index:20;}
.wli-nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1120px; margin:0 auto;}
.wli-nav-links{display:flex; align-items:center; gap:32px;}
.wli-nav-links a{font-size:14px; font-weight:500; color:var(--ink-soft);}
.wli-nav-links a.active{color:var(--teal);}
.wli-nav-links a:hover{color:var(--teal);}
.wli-btn{display:inline-block; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; padding:11px 20px; border-radius:4px; background:var(--teal); color:#fff; transition:background .15s ease; white-space:nowrap;}
.wli-btn:hover{background:var(--teal-mid);}
@media(max-width:720px){.wli-nav-links{display:none;}}

/* ---- Hero (archive) ---- */
.wli-hero{padding:64px 0 48px; border-bottom:1px solid var(--paper-line);}
.wli-hero h1{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:clamp(34px,5vw,52px);
  line-height:1.1;
  margin-top:14px;
  max-width:14ch;
  color:var(--ink);
}
.wli-hero h1 em{font-style:italic; color:var(--rose);}
.wli-hero p{margin-top:16px; max-width:52ch; font-size:17px; color:var(--ink-soft);}

/* ---- Filter row ---- */
.wli-filters{display:flex; flex-wrap:wrap; gap:10px; padding:28px 0; border-bottom:1px solid var(--paper-line);}
.wli-filter-tag{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em;
  padding:8px 14px; border-radius:100px;
  border:1px solid var(--paper-line);
  color:var(--ink-soft); background:#fff;
  cursor:pointer; transition:all .15s ease;
  display:inline-block;
}
.wli-filter-tag:hover{border-color:var(--teal-line);}
.wli-filter-tag.active{background:var(--teal); border-color:var(--teal); color:#fff;}

/* ---- Featured post ---- */
.wli-featured{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; padding:48px 0; border-bottom:1px solid var(--paper-line); align-items:center;}
.wli-featured-media{
  aspect-ratio:4/3; border-radius:6px;
  background:var(--teal-mid);
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:20px;
}
.wli-featured-media.has-img{ background:var(--teal-mid); padding:0; }
.wli-featured-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wli-featured-media .wli-mono{color:#fff; opacity:.85; font-size:11px; letter-spacing:.08em; text-transform:uppercase; position:relative; z-index:1;}
.wli-featured-body .wli-eyebrow{margin-bottom:14px; display:block;}
.wli-featured-body h2{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(24px,3vw,32px); line-height:1.2; margin-bottom:14px;}
.wli-featured-body p{color:var(--ink-soft); font-size:15.5px; margin-bottom:18px; max-width:48ch;}
.wli-meta{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:10px;}
.wli-meta .dot{opacity:.5;}
.wli-read-link{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--rose); margin-top:16px;}
.wli-read-link::after{content:"\2192"; transition:transform .15s ease;}
.wli-read-link:hover::after{transform:translateX(3px);}
@media(max-width:800px){.wli-featured{grid-template-columns:1fr;}}

/* ---- Post grid ---- */
.wli-grid-section{padding:56px 0 64px;}
.wli-grid-section > h3{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--ink-soft); margin-bottom:24px;
}
.wli-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;}
@media(max-width:900px){.wli-grid{grid-template-columns:repeat(2, 1fr);}}
@media(max-width:620px){.wli-grid{grid-template-columns:1fr;}}
.wli-card{
  border:1px solid var(--paper-line); border-radius:6px; background:#fff;
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .15s ease, transform .15s ease;
}
.wli-card:hover{border-color:var(--teal-line); transform:translateY(-2px);}
.wli-card-media{aspect-ratio:16/10; background:var(--rose-soft); position:relative; overflow:hidden;}
.wli-card-media.alt{background:rgba(11,59,52,0.08);}
.wli-card-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.wli-card-body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.wli-card-body h4{font-family:'Fraunces',serif; font-weight:500; font-size:19px; line-height:1.3;}
.wli-card-body p{color:var(--ink-soft); font-size:14px; flex:1;}

/* ---- Pagination (targets native WP paginate_links() output) ---- */
.wli-pagination{display:flex; justify-content:center; align-items:center; gap:8px; padding:8px 0 64px; font-family:'IBM Plex Mono',monospace; font-size:13px;}
.wli-pagination .page-numbers{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--paper-line); border-radius:4px;
  color:var(--ink-soft);
}
.wli-pagination .page-numbers.current{background:var(--teal); border-color:var(--teal); color:#fff;}
.wli-pagination a.page-numbers:hover{border-color:var(--teal-line);}
.wli-pagination .page-numbers.dots{border:none;}

/* ---- Breadcrumb (single) ---- */
.wli-breadcrumb{padding:20px 0 0; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);}
.wli-breadcrumb a{color:var(--ink-soft);}
.wli-breadcrumb a:hover{color:var(--teal);}
.wli-breadcrumb span{opacity:.5; margin:0 6px;}

/* ---- Post header (single) ---- */
.wli-post-header{padding:24px 0 40px; border-bottom:1px solid var(--paper-line); max-width:760px; margin:0 auto;}
.wli-post-header h1{
  font-family:'Fraunces',serif; font-weight:500;
  font-size:clamp(30px,4.2vw,46px); line-height:1.15; margin-top:14px;
}
.wli-post-header .wli-dek{margin-top:16px; font-size:18px; color:var(--ink-soft); max-width:56ch;}
.wli-post-meta{margin-top:24px; display:flex; align-items:center; gap:14px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft);}
.wli-avatar{
  width:36px; height:36px; border-radius:100px; background:var(--teal);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Fraunces',serif; font-weight:600; font-size:14px;
}
.wli-post-meta .wli-author-name{font-family:'Inter',sans-serif; font-weight:600; font-size:14px; color:var(--ink);}
.wli-post-meta .dot{opacity:.5;}

/* ---- Body (single) ---- */
.wli-post-body{max-width:760px; margin:0 auto; padding:48px 0;}
.wli-post-body p{font-size:17px; color:var(--ink); margin-bottom:22px;}
.wli-post-body h2{font-family:'Fraunces',serif; font-weight:500; font-size:28px; margin:44px 0 18px; line-height:1.25;}
.wli-post-body h3{font-family:'Fraunces',serif; font-weight:500; font-size:21px; margin:32px 0 14px;}
.wli-post-body ul{margin:0 0 22px 20px;}
.wli-post-body li{font-size:17px; margin-bottom:10px; padding-left:6px;}
.wli-post-body img{max-width:100%; height:auto; border-radius:6px; margin:12px 0 22px;}
.wli-pull{
  font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  font-size:26px; line-height:1.4; color:var(--rose);
  border-left:3px solid var(--rose); padding:4px 0 4px 24px; margin:36px 0;
}

/* ---- Diagnostic readout bar (paste as Custom HTML per-post when needed) ---- */
.wli-diag{background:#fff; border:1px solid var(--paper-line); border-radius:8px; padding:28px 28px 24px; margin:36px 0;}
.wli-diag .wli-eyebrow{display:block; margin-bottom:16px;}
.wli-diag-row{margin-bottom:18px;}
.wli-diag-row:last-child{margin-bottom:0;}
.wli-diag-label{display:flex; justify-content:space-between; font-size:13px; font-weight:600; margin-bottom:6px;}
.wli-diag-bar{height:14px; border-radius:4px; overflow:hidden; display:flex; background:var(--paper-line);}
.wli-diag-bar .fill-teal{background:var(--teal);}
.wli-diag-bar .fill-rose{background:var(--rose);}
.wli-diag-bar span{display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:10px; color:#fff; font-weight:500;}
.wli-diag-legend{display:flex; gap:20px; margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft);}
.wli-diag-legend span{display:flex; align-items:center; gap:6px;}
.wli-diag-legend i{width:9px; height:9px; border-radius:2px; display:inline-block;}

/* ---- Author bio (single) ---- */
.wli-bio{
  max-width:760px; margin:0 auto; padding:32px 0;
  border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);
  display:flex; gap:20px; align-items:flex-start;
}
.wli-bio .wli-avatar{width:56px; height:56px; font-size:20px; flex-shrink:0;}
.wli-bio h4{font-family:'Fraunces',serif; font-weight:500; font-size:18px; margin-bottom:6px;}
.wli-bio p{font-size:14.5px; color:var(--ink-soft); max-width:56ch;}

/* ---- Related ---- */
.wli-related{padding:56px 0 64px;}
.wli-related h3{font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-soft); margin-bottom:24px;}

/* ---- CTA band ---- */
.wli-cta-band{background:var(--teal); color:#fff; padding:56px 0;}
.wli-cta-inner{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.wli-cta-inner .wli-eyebrow{color:var(--rose-soft);}
.wli-cta-inner h3{font-family:'Fraunces',serif; font-weight:500; font-style:italic; font-size:clamp(22px,3vw,30px); margin-top:10px; max-width:26ch;}
.wli-cta-inner .wli-btn{background:var(--rose);}
.wli-cta-inner .wli-btn:hover{background:var(--rose-tint);}

/* ---- Footer ---- */
.wli-footer{padding:40px 0; border-top:1px solid var(--paper-line);}
.wli-footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.wli-footer p{font-size:13px; color:var(--ink-soft);}