/* ═══════════════════════════════════════════════════════════════════════════
 * PathHub AI — Blog Post Canonical Layout
 * Single source of truth for nav, header, content, footer styles.
 * Linked from every blog post via <link rel="stylesheet" href="/static/css/blog-layout.css">
 * Generated 2026-05-16 — do not edit manually (regenerated by scripts/build-blog-layout-css.py)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CSS Variables ─── */
:root {
    --primary: #4F46E5;
    --primary-light: #EEF2FF;
    --gradient-start: #667EEA;
    --gradient-end: #764BA2;
    --text-primary: #0F0E2E;
    --text-secondary: #4B5563;
    --text-muted: #6B7280;
    --background: #F9FAFB;
    --surface: #F9FAFB;
    --border: #E5E7EB;
}

/* ─── Inter font ─── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/static/fonts/inter-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Base ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.65;
    color: var(--text-primary);
    background: white;
    padding-top: 64px;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:1rem 2rem}
.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:38px;width:auto;display:block}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links .nav-link{order:1}
.nav-links .lang-switcher{order:2;margin-left:auto}
.nav-links .nav-cta{order:3}
.nav-link{text-decoration:none;color:var(--text-secondary);font-weight:500;transition:color .2s;font-size:.95rem}
.nav-link:hover{color:var(--primary)}
.nav-cta{padding:.6rem 1.25rem;background:linear-gradient(135deg,#667EEA,#764BA2);color:white!important;text-decoration:none;border-radius:8px;font-weight:600;font-size:.9rem;transition:transform .2s,box-shadow .2s;white-space:nowrap}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(79,70,229,.3)}
.lang-switcher{display:flex;align-items:center;gap:4px;font-size:.85rem;margin-left:.5rem}
.lang-link{text-decoration:none;color:var(--text-secondary);font-weight:500;padding:2px 6px;border-radius:4px;transition:all .2s}
.lang-link:hover{color:var(--primary)}
.lang-link.lang-active{color:var(--primary);font-weight:700}
.lang-divider{color:var(--border);font-size:.8rem}
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-right:-8px}
.nav-hamburger svg{width:24px;height:24px;stroke:#111827}
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:1001}
.mobile-menu.active{display:block}
.mobile-menu-panel{position:absolute;top:0;right:0;width:280px;max-width:85vw;height:100%;background:white;padding:1.5rem;box-shadow:-4px 0 20px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:.5rem overflow-y: auto;}
.mobile-menu-close{align-self:flex-end;background:none;border:none;cursor:pointer;padding:8px;margin:-8px -8px .5rem 0}
.mobile-menu-close svg{width:24px;height:24px;stroke:#111827}
.mobile-menu-panel a{display:block;padding:.85rem 1rem;text-decoration:none;color:#111827;font-weight:500;font-size:1rem;border-radius:8px;transition:background .15s}
.mobile-menu-panel a:hover{background:#f3f4f6}
        /* Lang switcher anchors must stay inline inside the mobile menu */
        .mobile-menu-panel .mobile-lang-switcher a { display:inline !important; padding:0 !important; background:none !important; font-size:0.95rem !important; border-radius:0 !important; }

.mobile-menu-panel .nav-cta{display:block;text-align:center;margin-top:.5rem;background:linear-gradient(135deg,#667EEA,#764BA2)!important;color:white!important;padding:.85rem 1.5rem;border-radius:8px;font-weight:600}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:block!important}
@media(max-width:768px){.nav-links{display:none}.nav-hamburger{display:block}}

/* ─── Breadcrumb ─── */
.breadcrumb {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem 2rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.breadcrumb a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: rgba(79, 70, 229, 0.3);
    text-underline-offset: 2px;
}
.breadcrumb a:hover { text-decoration: underline; }

/* ─── Article header ─── */
.article-header, .article-body { caret-color: transparent; }
.article-header {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 2rem 0;
}
.article-category {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    background: linear-gradient(135deg, #EEF2FF 0%, #F3E8FF 100%);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 9999px;
    margin-bottom: 1rem;
}
.article-header h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.article-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.article-meta span { display: flex; align-items: center; gap: 0.4rem; }

/* ─── Article illustration ─── */
.article-illustration {
    max-width: 900px;
    margin: 1.5rem auto 2rem;
    padding: 0 1.5rem;
}
.article-illustration svg { width: 100%; height: auto; display: block; }

/* ─── Table of Contents ─── */
.toc {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 2rem;
}
.toc-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem 2rem;
}
.toc-box h2 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}
.toc-box ol { padding-left: 1.25rem; margin: 0; }
.toc-box li { margin-bottom: 0.5rem; font-size: 0.95rem; line-height: 1.5; }
.toc-box a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: rgba(79, 70, 229, 0.3);
    text-underline-offset: 2px;
}
.toc-box a:hover { text-decoration: underline; }

/* ─── Hub-callout / TL;DR (defaults — can be overridden by inline) ─── */
.hub-callout, .tldr-box {
    max-width: 800px;
    margin: 1.5rem auto;
}

/* ─── Article body ─── */
.article-body {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem 3rem;
}
.article-body h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 2.5rem 0 1rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    scroll-margin-top: 80px;
}
.article-body h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    color: var(--text-primary);
}
.article-body p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #374151;
    margin-bottom: 1.5rem;
}
.article-body ul, .article-body ol {
    margin: 1rem 0 1.5rem 1.5rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #374151;
}
.article-body li { margin-bottom: 0.5rem; }
.article-body strong { color: var(--text-primary); font-weight: 700; }

/* Footer */
.footer{background:#111827;color:white;padding:4rem 2rem 2rem}
.footer-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:3rem;margin-bottom:3rem}
.footer-column h4{font-size:1rem;font-weight:600;margin-bottom:1rem}
.footer-links{list-style:none;padding:0}
.footer-links li{margin-bottom:.5rem}
.footer-links a{color:rgba(255,255,255,.7);text-decoration:none;font-size:.9rem;transition:color .2s}
.footer-links a:hover{color:white}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:2rem;text-align:center}
.footer-bottom p{color:rgba(255,255,255,.6);font-size:.875rem}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.3,.8,.3,1),transform .7s cubic-bezier(.3,.8,.3,1)}
.reveal.visible{opacity:1;transform:none}

/* Responsive */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:3rem}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .try-layout{grid-template-columns:1fr;gap:2.5rem}
  .try-intro{position:static}
  .feat-row,.feat-row.reverse{grid-template-columns:1fr;gap:2rem}
  .feat-row.reverse>div:first-child{order:initial}
  .ag-layout{grid-template-columns:1fr;gap:2rem}
  .bud-layout{grid-template-columns:1fr;gap:2rem}
  .more-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
  body{padding-top:60px}
  .nav{padding:.75rem 1rem}
  .section,.cat-section,.try-section,.eh-section,.bud-section,.comp-section,.agentic-section,.more-section,.feat-row-section{padding:3.5rem 1.1rem}
  .hero{padding:3rem 1.1rem 2.5rem;min-height:auto}
  .hero-inner{gap:2rem}
  .hero h1{font-size:clamp(1.85rem,8vw,2.3rem);line-height:1.15}
  .hero-sub{font-size:.95rem;margin-bottom:1.5rem}
  .hero-badge{font-size:.68rem;padding:.35rem .8rem;margin-bottom:1rem}
  .hero-cta-row{flex-direction:column;gap:.6rem;margin-bottom:1.75rem}
  .hero-cta-row>a{width:100%;justify-content:center;padding:.8rem 1.25rem;font-size:.9rem}
  .hero-metrics{grid-template-columns:repeat(2,1fr);gap:.5rem;max-width:none}
  .hero-metric{padding:.6rem .75rem}
  .hero-metric-val{font-size:1rem}
  .hero-metric-label{font-size:.65rem}
  .showcase-body{min-height:auto;padding:.9rem;gap:.55rem}
  .sc-phase{padding:.65rem .75rem;gap:.55rem}
  .sc-phase-num{width:22px;height:22px;font-size:.7rem}
  .sc-phase-title{font-size:.78rem}
  .sc-phase-meta{font-size:.65rem;gap:.4rem}
  .sc-phase-progress{width:40px}
  .showcase-title{font-size:.7rem}
  .stats-strip{padding:2rem 1.1rem}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  .stat-item{padding:.5rem}
  .stat-val{font-size:clamp(1.5rem,6vw,1.9rem)}
  .stat-label{font-size:.78rem;line-height:1.4}
  .sec-title{font-size:clamp(1.55rem,6vw,2rem)}
  .sec-sub{font-size:.95rem;margin-bottom:2rem}
  .cat-grid{grid-template-columns:1fr;margin-top:2rem}
  .cat-card{padding:1.1rem}
  .more-grid{grid-template-columns:1fr;margin-top:2rem}
  .more-card{padding:1.25rem}
  /* Planner */
  .try-intro h2{font-size:clamp(1.45rem,6vw,1.9rem)}
  .try-intro p{font-size:.95rem}
  .try-tag{font-size:.62rem;padding:.28rem .65rem}
  .planner-box{padding:1.1rem;border-radius:14px}
  .planner-textarea{min-height:80px;font-size:.88rem}
  .planner-chip{padding:.28rem .65rem;font-size:.72rem}
  .planner-btn{padding:.75rem 1rem;font-size:.88rem}
  .planner-phase{padding:.65rem .7rem;gap:.55rem}
  .planner-phase-title{font-size:.8rem}
  .planner-phase-meta{font-size:.68rem}
  .planner-phase-weeks{font-size:.68rem;padding:.15rem .4rem}
  .planner-phase-num{width:22px;height:22px;font-size:.68rem}
  .planner-summary-val{font-size:.95rem}
  /* Feat row */
  .feat-row-left h2,.bud-intro h2{font-size:clamp(1.45rem,6vw,1.85rem)}
  .feat-row-left p,.bud-intro p{font-size:.95rem}
  .feat-row-list li{font-size:.88rem}
  .feat-check{padding:.7rem .85rem}
  .feat-check-title{font-size:.88rem}
  .feat-check-desc{font-size:.8rem}
  /* Eisenhower — stack vertically, ALL 4 visible */
  .eh-wrap{padding:1.1rem;border-radius:16px}
  .eh-controls{flex-direction:column;gap:.5rem}
  .eh-input{min-width:0;width:100%}
  .eh-add-btn,.eh-reset-btn{width:100%;justify-content:center}
  .eh-grid{grid-template-columns:1fr;grid-template-rows:none;gap:.65rem}
  .eh-corner,.eh-col-header,.eh-row-header{display:none}
  .eh-quad{min-height:auto;padding:.85rem .9rem}
  .eh-quad.q1::before,.eh-quad.q2::before,.eh-quad.q3::before,.eh-quad.q4::before{content:'';display:inline-block}
  /* Budget table */
  .bud-wrap{border-radius:14px}
  .bud-header{padding:1rem;flex-direction:column;align-items:flex-start;gap:.5rem}
  .bud-header-title{font-size:.88rem}
  .bud-total-display{font-size:1rem;padding:.35rem .75rem;width:100%;text-align:center}
  .bud-body{padding:.85rem}
  .bud-table th{font-size:.6rem;padding:.4rem .25rem;letter-spacing:.02em}
  .bud-table td{padding:.3rem .15rem}
  .bud-input{padding:.45rem .5rem;font-size:.78rem}
  .bud-cell{padding:.45rem .3rem;font-size:.78rem}
  .bud-table th:nth-child(2),.bud-table td:nth-child(2),.bud-table th:nth-child(3),.bud-table td:nth-child(3){display:none}
  .bud-add{font-size:.8rem;padding:.55rem .8rem}
  .bud-foot{font-size:.75rem;flex-direction:column;align-items:flex-start;gap:.35rem}
  /* Compliance */
  .comp-search{font-size:.88rem;padding:.8rem 1rem .8rem 2.7rem;border-radius:12px}
  .comp-search-icon{left:.85rem}
  .comp-filters{gap:.3rem;margin-bottom:1rem}
  .comp-filter{padding:.35rem .7rem;font-size:.72rem}
  .comp-item{padding:.85rem 1rem;gap:.65rem}
  .comp-item-icon{width:28px;height:28px;font-size:.62rem}
  .comp-item-name{font-size:.88rem}
  .comp-item-desc{font-size:.8rem}
  .comp-item-cat{font-size:.58rem}
  .comp-total{padding:.85rem 1rem;font-size:.82rem}
  /* Agentic */
  .agentic-section{padding:4rem 1.1rem}
  .ag-intro h2{font-size:clamp(1.55rem,6vw,2rem)}
  .ag-intro p{font-size:.95rem}
  .ag-intro li{font-size:.85rem}
  .ag-preview{padding:1.1rem;border-radius:14px}
  .ag-task{padding:.7rem .8rem;gap:.6rem}
  .ag-task-icon{width:26px;height:26px}
  .ag-task-title{font-size:.78rem}
  .ag-task-desc{font-size:.68rem}
  .ag-task-badge{font-size:.6rem;padding:.15rem .45rem}
  /* CTA */
  .cta-section{padding:4rem 1.1rem}
  .cta-section h2{font-size:clamp(1.55rem,6vw,2rem)}
  .cta-section p{font-size:.95rem}
  .btn-white{padding:.85rem 1.5rem;font-size:.9rem}
  /* Footer */
  .footer{padding:3rem 1.25rem 1.5rem}
  .footer-container{gap:2rem;margin-bottom:2rem}
}
@media(max-width:400px){
  .hero-metrics{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr}
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
    .breadcrumb { padding: 1rem 1.25rem 0; }
    .article-header { padding: 1.5rem 1.25rem 0; }
    .article-header h1 { font-size: 1.6rem; }
    .article-meta { gap: 0.85rem; font-size: 0.82rem; }
    .article-illustration { padding: 0 1rem; margin: 1rem auto 1.5rem; }
    .toc { padding: 0 1.25rem; }
    .article-body { padding: 0 1.25rem 2rem; }
    .article-body h2 { font-size: 1.4rem; }
}