/**
 * blog.css — HUM Blog shared stylesheet
 * --------------------------------------
 * Loaded by every /blog page (index + posts). Contains:
 *   1. Brand design tokens (source of truth: docs/brand-guidelines.md, section 9)
 *   2. Nav / market bar / dropdown / hamburger / footer chrome — kept in exact
 *      parity with nav.js's injected markup, but rendered as static HTML here
 *      (blog pages don't load nav.js) so nav/footer content is present in the
 *      raw HTML for crawlers that don't execute JavaScript. Interaction-only
 *      behavior (hamburger toggle, dropdown aria sync, scroll shadow) lives in
 *      /blog/blog-nav.js. If nav.js's markup/links change, mirror the change
 *      here and in the blog page templates.
 *   3. Shared post + index layout and components.
 * If brand tokens change, update this file AND docs/brand-guidelines.md.
 */

:root {
  /* Brand Colors */
  --color-teal:          #52ADA2;
  --color-teal-dark:     #3D8A80;
  --color-teal-darker:   #2A6B62;
  --color-teal-light:    #7EC5BC;
  --color-teal-lighter:  #AADCD6;
  --color-teal-faint:    #F0FBF7;
  --color-pink:          #D0114D;  /* CTA ONLY */
  --color-pink-dark:     #A50D3D;  /* CTA hover */
  --color-pink-faint:    #FCE8EF;
  /* Neutrals */
  --color-black:         #0D0D0D;
  --color-gray-900:      #1A1A1A;
  --color-gray-800:      #2E2E2E;
  --color-gray-700:      #444444;
  --color-gray-500:      #777777;
  --color-gray-300:      #BBBBBB;
  --color-gray-100:      #F0F0F0;
  --color-gray-50:       #F8F8F8;
  --color-white:         #FFFFFF;
  /* Web layout defaults */
  --bg-hero:             var(--color-teal-faint);
  --bg-body:             var(--color-white);
  --bg-alt:              var(--color-teal-faint);
  --bg-stats:            var(--color-black);
  --bg-cta-banner:       var(--color-teal);
  --bg-footer:           var(--color-black);
  /* Type — DM Sans (Google Fonts) */
  --font-primary:        'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display:        'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:            'Courier New', Courier, monospace;
  /* Type scale */
  --text-xs:  11px;  --text-sm: 13px;  --text-base: 15px; --text-lg: 18px;
  --text-xl:  24px;  --text-2xl: 32px; --text-3xl: 40px;  --text-4xl: 52px;
  /* Spacing (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  /* Radius */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px;
  /* Nav + market bar */
  --nav-height: 64px;
  --market-bar-height: 38px;
}

/* -------------------------------------------------------
   Reset + base
   ------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-primary);color:var(--color-gray-900);background:var(--color-white);
  line-height:1.7;-webkit-font-smoothing:antialiased;
  padding-top:calc(var(--nav-height) + var(--market-bar-height));
}

/* =========================================================
   NAV / MARKET BAR / FOOTER — kept in parity with nav.js
   ========================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--nav-height);background:var(--color-black);
  border-bottom:1px solid var(--color-gray-800);
  display:flex;align-items:center;padding:0 var(--space-8);
  transition:box-shadow 0.2s ease;}
.nav-inner{max-width:1160px;width:100%;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.nav-links{display:flex;gap:var(--space-8);align-items:center;}
.nav-links a{font-size:var(--text-sm);font-weight:500;
  color:var(--color-gray-300);text-decoration:none;transition:color 0.15s ease;}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--color-white);}
.nav-actions{display:flex;align-items:center;gap:var(--space-4);}
.btn-nav{display:inline-flex;align-items:center;
  background:var(--color-pink);color:var(--color-white);
  border:none;padding:10px 20px;font-family:var(--font-primary);
  font-size:var(--text-sm);font-weight:700;letter-spacing:0.07em;
  text-transform:uppercase;border-radius:var(--radius-md);
  cursor:pointer;text-decoration:none;transition:background 0.15s ease;}
.btn-nav:hover{background:var(--color-pink-dark);}
.market-bar{position:fixed;top:var(--nav-height);left:0;right:0;z-index:800;
  height:var(--market-bar-height);background:var(--color-teal-faint);
  border-bottom:1px solid var(--color-teal-lighter);
  display:flex;align-items:center;justify-content:center;padding:0 var(--space-6);}
.market-bar p{font-size:var(--text-xs);font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--color-teal-darker);text-align:center;}
.market-bar strong{color:var(--color-teal-darker);font-weight:800;}

footer{background:var(--color-black);padding:var(--space-12) var(--space-8);
  border-top:1px solid var(--color-gray-800);}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;
  flex-direction:column;gap:var(--space-8);}
.footer-top{display:flex;align-items:flex-start;
  justify-content:space-between;gap:var(--space-12);flex-wrap:wrap;}
.footer-brand{flex-shrink:0;}
.footer-cols{display:flex;gap:var(--space-12);flex-wrap:wrap;flex:1;
  justify-content:flex-end;}
.footer-col{display:flex;flex-direction:column;min-width:120px;}
.footer-col-title{font-size:var(--text-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:0.12em;
  color:var(--color-gray-300);margin-bottom:var(--space-4);}
.footer-col nav{display:flex;flex-direction:column;gap:var(--space-3);}
.footer-col a{font-size:var(--text-sm);font-weight:500;
  color:var(--color-gray-500);text-decoration:none;transition:color 0.15s ease;}
.footer-col a:hover,.footer-col a[aria-current]{color:var(--color-teal);}
.footer-divider{height:1px;background:var(--color-gray-800);}
.footer-legal{font-size:var(--text-xs);color:var(--color-gray-500);line-height:1.75;}
.footer-social{display:flex;gap:16px;align-items:center;}
.footer-social a{display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:var(--color-gray-800);
  color:var(--color-gray-300);transition:background 0.15s ease,color 0.15s ease;
  text-decoration:none;flex-shrink:0;}
.footer-social a:hover{background:var(--color-teal);color:var(--color-white);}
.footer-social svg{width:16px;height:16px;}

.nav-dropdown{position:relative;display:inline-flex;align-items:center;}
.nav-dropdown::after{content:"";position:absolute;top:100%;left:-8px;right:-8px;height:16px;}
.nav-dropdown-trigger{display:inline-flex;align-items:center;gap:4px;
  font-size:var(--text-sm);font-weight:500;color:var(--color-gray-300);
  text-decoration:none;cursor:pointer;transition:color 0.15s ease;}
.nav-dropdown-trigger:hover,.nav-dropdown-trigger[aria-current],
.nav-dropdown:focus-within .nav-dropdown-trigger{color:var(--color-white);}
.nav-dropdown-trigger svg{width:11px;height:11px;flex-shrink:0;
  transition:transform 0.2s ease;margin-top:1px;}
.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown:focus-within .nav-dropdown-trigger svg{transform:rotate(180deg);}
.nav-dropdown-menu{position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(-4px);
  background:var(--color-gray-900);border:1px solid var(--color-gray-800);
  border-radius:var(--radius-md);padding:6px 0;min-width:230px;
  box-shadow:0 8px 32px rgba(0,0,0,0.45);
  opacity:0;pointer-events:none;transition:opacity 0.15s ease,transform 0.15s ease;z-index:910;}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0);}
.nav-dropdown-menu a{display:block;font-size:var(--text-sm);font-weight:500;
  color:var(--color-gray-300);text-decoration:none;padding:9px 16px;
  transition:color 0.12s ease,background 0.12s ease;white-space:nowrap;}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a[aria-current]{
  color:var(--color-white);background:var(--color-gray-800);}
.nav-dropdown-menu hr{height:1px;background:var(--color-gray-800);border:none;margin:4px 0;}

.nav-hamburger{display:none;flex-direction:column;justify-content:center;
  align-items:center;gap:5px;width:44px;height:44px;background:none;
  border:none;cursor:pointer;padding:0;flex-shrink:0;}
.nav-hamburger span{display:block;width:22px;height:2px;
  background:var(--color-white);border-radius:2px;
  transition:transform 0.25s ease,opacity 0.25s ease;}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-drawer{display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  z-index:850;background:var(--color-black);
  flex-direction:column;
  padding-top:calc(var(--nav-height, 64px) + var(--market-bar-height, 38px));
  padding-left:24px;padding-right:24px;padding-bottom:40px;overflow-y:auto;}
.nav-drawer.open{display:flex;}
.nav-drawer-links{display:flex;flex-direction:column;flex:1;}
.nav-drawer-links a{font-size:28px;font-weight:800;color:var(--color-gray-300);
  text-decoration:none;padding:18px 0;
  border-bottom:1px solid var(--color-gray-800);
  transition:color 0.15s ease;letter-spacing:-0.02em;}
.nav-drawer-links a:hover,.nav-drawer-links a[aria-current]{color:var(--color-white);}
.nav-drawer-cta{margin-top:32px;}
.nav-drawer-cta .btn-nav{display:flex;width:100%;justify-content:center;
  text-align:center;font-size:15px;padding:16px 24px;box-sizing:border-box;}

@media(max-width:768px){
  :root{--nav-height:58px;}
  .nav{padding:0 var(--space-4);}
  .nav-links{display:none!important;}
  .nav-actions .btn-nav{display:none;}
  .nav-hamburger{display:flex;}
  .market-bar{padding:0 var(--space-4);}
  .footer-top{flex-direction:column;gap:var(--space-8);}
  .footer-cols{justify-content:flex-start;gap:var(--space-8) var(--space-12);}
}

/* =========================================================
   SHARED BLOG LAYOUT
   ========================================================= */
.wrap{max-width:760px;margin:0 auto;padding:0 24px;}

.breadcrumb{font-size:12px;color:var(--color-gray-500);padding:22px 0 0;}
.breadcrumb a{color:var(--color-teal-darker);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb span{margin:0 6px;color:var(--color-gray-300);}

/* =========================================================
   POST TEMPLATE
   ========================================================= */
.post-hero{max-width:960px;margin:24px auto 0;padding:0 24px;}
.post-hero img{width:100%;height:auto;border-radius:var(--radius-xl);display:block;}
.post-hero--placeholder{position:relative;}
.post-hero--placeholder img{display:none;}
.post-hero--placeholder::after{content:"";display:block;aspect-ratio:1200/630;background:var(--color-teal-faint) url('https://raw.githubusercontent.com/cgkolb/hum-assets/main/black-teal-logo.png') center/180px no-repeat;border-radius:var(--radius-xl);}

.post-head{padding-top:28px;}
.post-category{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--color-teal);margin-bottom:14px;}
h1{font-size:clamp(32px,5vw,52px);font-weight:900;letter-spacing:-1.5px;line-height:1.1;color:var(--color-black);margin-bottom:14px;}
.post-deck{font-size:18px;color:var(--color-gray-700);font-weight:500;margin-bottom:6px;}
.post-deck em{color:var(--color-teal-darker);font-style:italic;font-weight:600;}
.post-byline{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--color-gray-500);margin-top:16px;padding-bottom:24px;border-bottom:1px solid var(--color-gray-100);}
.post-byline span{position:relative;}
.post-byline span:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--color-gray-300);transform:translateY(-50%);}

.post-tldr{background:var(--color-teal-faint);border-radius:var(--radius-lg);padding:24px 28px;margin:28px 0;}
.post-tldr__label{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--color-teal-darker);margin-bottom:12px;}
.post-tldr ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.post-tldr li{position:relative;padding-left:22px;font-size:15px;color:var(--color-gray-900);}
.post-tldr li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--color-teal);}

.post-toc{border:1px solid var(--color-gray-100);border-radius:var(--radius-lg);padding:22px 28px;margin:28px 0;}
.post-toc__label{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--color-gray-500);margin-bottom:12px;}
.post-toc ol{margin-left:18px;display:flex;flex-direction:column;gap:8px;}
.post-toc a{color:var(--color-teal-darker);text-decoration:none;font-size:15px;}
.post-toc a:hover{text-decoration:underline;}

.post-body{padding:8px 0 0;}
.post-body h2{font-size:clamp(24px,3.4vw,30px);font-weight:800;letter-spacing:-0.5px;line-height:1.25;color:var(--color-black);margin:44px 0 16px;scroll-margin-top:90px;}
.post-body h3{font-size:19px;font-weight:700;color:var(--color-gray-900);margin:28px 0 10px;}
.post-body p{font-size:16px;color:var(--color-gray-900);margin-bottom:18px;}
.post-body ul{margin:0 0 18px 22px;display:flex;flex-direction:column;gap:10px;}
.post-body ul li{font-size:16px;}
.post-body strong{font-weight:700;color:var(--color-black);}
.post-body em{font-style:italic;}

.pull-quote{border-left:3px solid var(--color-teal);padding:6px 0 6px 22px;margin:22px 0;font-size:18px;font-style:italic;color:var(--color-gray-900);line-height:1.5;}

.post-comparison{margin:32px 0;overflow-x:auto;}
.post-comparison caption{text-align:left;font-size:13px;color:var(--color-gray-500);margin-bottom:12px;caption-side:top;}
.post-comparison table{width:100%;border-collapse:collapse;min-width:560px;}
.post-comparison th,.post-comparison td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--color-gray-100);font-size:14px;vertical-align:top;}
.post-comparison thead th{font-weight:800;color:var(--color-white);background:var(--color-black);}
.post-comparison thead th:nth-child(2){background:var(--color-teal-darker);}
.post-comparison tbody th{font-weight:700;color:var(--color-black);width:22%;}
.post-comparison tbody td:first-of-type{background:var(--color-teal-faint);}

.post-cta{background:var(--color-black);border-radius:var(--radius-xl);padding:34px 32px;margin:40px 0;text-align:center;}
.post-cta p{color:var(--color-white);font-size:17px;margin-bottom:22px;line-height:1.55;}
.btn--cta{display:inline-block;background:var(--color-pink);color:var(--color-white);text-decoration:none;font-weight:700;font-size:15px;padding:14px 30px;border-radius:var(--radius-full);}
.btn--cta:hover{background:var(--color-pink-dark);}

.post-faq{margin:44px 0;}
.post-faq h2{font-size:clamp(24px,3.4vw,30px);font-weight:800;letter-spacing:-0.5px;color:var(--color-black);margin-bottom:8px;scroll-margin-top:90px;}
.faq-item{padding:18px 0;border-bottom:1px solid var(--color-gray-100);}
.faq-item h3{font-size:17px;font-weight:700;color:var(--color-gray-900);margin-bottom:8px;}
.faq-item p{font-size:15px;color:var(--color-gray-700);}

.post-note{font-size:13px;color:var(--color-gray-500);font-style:italic;background:var(--color-gray-100);border-radius:var(--radius-lg);padding:18px 22px;margin:28px 0;line-height:1.6;}

.post-author{display:flex;gap:18px;align-items:flex-start;background:var(--color-teal-faint);border-radius:var(--radius-lg);padding:26px 28px;margin:36px 0;}
.post-author__avatar{flex:0 0 auto;width:54px;height:54px;border-radius:50%;background:var(--color-teal);color:var(--color-white);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;letter-spacing:0.5px;}
.post-author__name{font-weight:800;font-size:16px;color:var(--color-black);margin-bottom:6px;}
.post-author__bio p:not(.post-author__name){font-size:14px;color:var(--color-gray-700);margin-bottom:10px;}
.post-author__links{display:flex;gap:16px;}
.post-author__links a{color:var(--color-teal-darker);text-decoration:none;font-size:13px;font-weight:600;}
.post-author__links a:hover{text-decoration:underline;}

.post-related{margin:44px 0;}
.post-related h2{font-size:22px;font-weight:800;color:var(--color-black);margin-bottom:18px;}
.post-related__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.post-related__card{display:flex;flex-direction:column;gap:8px;text-decoration:none;border:1px solid var(--color-gray-100);border-radius:var(--radius-lg);padding:20px;transition:border-color .15s;}
.post-related__card:hover{border-color:var(--color-teal);}
.post-related__cat{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--color-teal);}
.post-related__title{font-size:16px;font-weight:700;color:var(--color-gray-900);line-height:1.35;}

@media (max-width:600px){
  .post-related__grid{grid-template-columns:1fr;}
}

/* =========================================================
   INDEX PAGE — shared page primitives (match site convention,
   see faq.html / how-it-works.html for the same .container /
   .eyebrow / .lead / .bg-faint pattern used across the site)
   ========================================================= */
.container{max-width:1080px;margin:0 auto;padding:0 var(--space-8);}
@media (max-width:600px){.container{padding:0 var(--space-4);}}
.bg-faint{background:var(--color-teal-faint);}
.eyebrow{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:2px;font-weight:700;color:var(--color-teal);margin-bottom:var(--space-4);}
.lead{font-size:var(--text-lg);line-height:1.6;color:var(--color-gray-700);}

.blog-hero{padding:var(--space-16) 0 var(--space-12);}
.blog-hero h1{margin-bottom:var(--space-4);}
.blog-body{padding:var(--space-12) 0 var(--space-20);}
@media (max-width:600px){
  .blog-hero{padding:var(--space-8) 0;}
  .blog-body{padding:var(--space-8) 0 var(--space-12);}
}

/* Category filter pills */
.filter-row{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-8);}
.pill{padding:8px 18px;border-radius:var(--radius-full);border:1px solid var(--color-gray-300);
  font-family:var(--font-primary);font-size:var(--text-sm);font-weight:600;cursor:pointer;
  background:var(--color-white);color:var(--color-gray-700);
  transition:background 0.15s ease,border-color 0.15s ease,color 0.15s ease;}
.pill:hover{border-color:var(--color-teal);color:var(--color-teal-darker);}
.pill--active{background:var(--color-teal-faint);color:var(--color-teal-darker);border-color:var(--color-teal);}

/* Post card grid */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-8);margin-bottom:var(--space-12);}
.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--color-gray-100);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--color-white);transition:border-color 0.15s ease,transform 0.15s ease;}
.post-card:hover{border-color:var(--color-teal);transform:translateY(-2px);}
.post-card__image{aspect-ratio:16/10;background:var(--color-teal-faint);overflow:hidden;}
.post-card__image img{width:100%;height:100%;object-fit:cover;display:block;}
.post-card__body{padding:var(--space-4) var(--space-4) var(--space-6);}
.post-card__cat{display:block;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--color-teal);margin-bottom:8px;}
.post-card__title{font-size:17px;font-weight:700;color:var(--color-black);line-height:1.35;margin-bottom:10px;}
.post-card__meta{font-size:13px;color:var(--color-gray-500);}

.post-grid-empty{font-size:15px;color:var(--color-gray-500);text-align:center;padding:var(--space-16) 0;}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:wrap;
  padding-top:var(--space-8);border-top:1px solid var(--color-gray-100);}
.pagination[hidden]{display:none;}
.pg-numbers{display:flex;align-items:center;gap:var(--space-2);}
.pg-btn{min-width:36px;height:36px;padding:0 10px;border-radius:var(--radius-md);
  border:1px solid var(--color-gray-300);background:var(--color-white);
  font-family:var(--font-primary);font-size:13px;font-weight:600;color:var(--color-gray-700);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background 0.15s ease,border-color 0.15s ease,color 0.15s ease;}
.pg-btn:hover{border-color:var(--color-teal);color:var(--color-teal-darker);}
.pg-btn[aria-current="page"]{background:var(--color-teal-faint);color:var(--color-teal-darker);border-color:var(--color-teal);}
.pg-btn:disabled{opacity:0.4;cursor:not-allowed;}
.pg-btn:disabled:hover{border-color:var(--color-gray-300);color:var(--color-gray-700);}
.pg-ellipsis{font-size:13px;color:var(--color-gray-500);padding:0 4px;}