/* =========================================
   Pomogaem.help — Single Clean Stylesheet
   Works for index.html + all sub-pages
   ========================================= */

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --c1:#5b5fc7;
  --c1d:#4a4eb5;
  --c1l:#e8e9f8;
  --tx:#2d3748;
  --tx2:#4a5568;
  --tx3:#718096;
  --bg:#fff;
  --bg2:#f8f9fa;
  --bd:#e2e8f0;
  --bd2:#edf2f7;
  --sh:0 4px 12px rgba(0,0,0,.08);
  --sh2:0 8px 24px rgba(0,0,0,.1);
  --rs:6px;
  --rm:10px;
  --rl:16px;
  --mw:1200px;
  --cw:760px;
  --hh:64px;
}

html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.7;color:var(--tx);background:var(--bg)}
a{color:var(--c1);text-decoration:none;transition:color .2s}
a:hover{color:var(--c1d)}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}

/* === CONTAINER === */
.wrap,
.container{max-width:var(--mw);margin:0 auto;padding:0 24px}

.content-container{max-width:var(--cw);margin:0 auto;padding:0 24px}

/* =========================================
   HEADER — supports both new + legacy classes
   ========================================= */
.header,
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--bd2);
}

.header>.wrap,
.site-header .header-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--mw);width:100%;margin:0 auto;padding:0 24px;
  height:var(--hh);
}

/* Logo */
.logo,
.site-logo{
  display:inline-flex;align-items:center;gap:10px;
  font-size:1.25rem;font-weight:700;color:var(--tx);text-decoration:none;flex-shrink:0;
}
.logo:hover,.site-logo:hover{color:var(--c1)}

.logo-ico,
.logo-icon{
  width:34px;height:34px;
  background:linear-gradient(135deg,var(--c1),#7c7fd9);
  border-radius:8px;display:grid;place-items:center;
  color:#fff;font-size:1rem;font-weight:800;flex-shrink:0;
}

/* Desktop nav */
.desktop-nav,
.nav-links{
  display:flex;align-items:center;gap:28px;
}
.desktop-nav a,
.nav-links a{
  color:var(--tx2);font-size:.925rem;font-weight:500;white-space:nowrap;transition:color .2s;
}
.desktop-nav a:hover,.desktop-nav a.active,
.nav-links a:hover,.nav-links a.active{color:var(--c1)}

/* Burger (new index) */
.burger{display:none;background:none;border:none;cursor:pointer;width:32px;height:32px;position:relative}
.burger span{display:block;width:22px;height:2px;background:var(--tx);position:absolute;left:5px;transition:.3s}
.burger span:nth-child(1){top:9px}
.burger span:nth-child(2){top:15px}
.burger span:nth-child(3){top:21px}

/* SVG burger (legacy pages) */
.mobile-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--tx)}
.mobile-menu-btn svg{width:24px;height:24px}

/* Mobile menu */
.mobile-menu,
.mobile-nav{
  display:none;position:fixed;top:var(--hh);left:0;right:0;bottom:0;
  background:var(--bg);z-index:99;padding:16px 24px;flex-direction:column;gap:2px;
}
.mobile-menu.open,
.mobile-nav.open{display:flex}
.mobile-menu a,
.mobile-nav a{
  display:block;padding:14px 16px;color:var(--tx);font-size:1.05rem;font-weight:500;
  border-radius:var(--rs);transition:background .2s;
}
.mobile-menu a:hover,
.mobile-nav a:hover{background:var(--c1l);color:var(--c1)}

/* =========================================
   HERO (index)
   ========================================= */
.hero,
.blog-hero{
  background:linear-gradient(135deg,#f8f9fa,#e8e9f8);
  border-bottom:1px solid var(--bd2);
  padding:52px 0 40px;
}
.hero .badge,.blog-hero .blog-hero-label{
  display:inline-block;padding:4px 14px;
  background:var(--c1);color:#fff;
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  border-radius:4px;margin-bottom:16px;width:fit-content;
}
.hero h1,.blog-hero h1{
  font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;line-height:1.2;
  margin-bottom:14px;color:var(--tx);
}
.hero p,.blog-hero p{
  font-size:1.1rem;color:var(--tx3);line-height:1.6;max-width:640px;
}
.blog-hero-content{max-width:680px}

/* =========================================
   BADGE / CARD-TAG / META
   ========================================= */
.badge{
  display:inline-block;padding:5px 14px;
  background:var(--c1);color:#fff;
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  border-radius:4px;width:fit-content;
}
.badge.sm,.card-tag{
  display:inline-block;padding:3px 10px;
  background:var(--c1l);color:var(--c1);
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  border-radius:4px;width:fit-content;
}
.meta,.card-meta{
  display:flex;align-items:center;gap:16px;
  font-size:.825rem;color:var(--tx3);
}
.card-meta span{display:flex;align-items:center;gap:4px}

/* =========================================
   FEATURED STRIP (index)
   ========================================= */
.featured,
.featured-strip{
  display:grid;grid-template-columns:1fr 1.2fr;
  border-radius:var(--rl);overflow:hidden;
  border:1px solid var(--bd2);
  text-decoration:none;color:inherit;
  transition:box-shadow .25s,transform .25s;
  margin-top:40px;
}
.featured:hover,.featured-strip:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.featured:hover h2,.featured-strip:hover h2{color:var(--c1)}

.featured-img,
.featured-strip-image{overflow:hidden}
.featured-img .ph,
.featured-strip-image .hero-placeholder{
  min-height:280px;background-size:cover;background-position:center;
  background-color:var(--c1l);
}

.featured-body,
.featured-strip-body{
  padding:36px 40px;display:flex;flex-direction:column;justify-content:center;background:var(--bg);
}
.featured-body .badge,.featured-body .card-tag,
.featured-strip-body .badge,.featured-strip-body .card-tag{margin-bottom:14px}
.featured-body h2,.featured-strip-body h2{
  font-size:1.45rem;font-weight:700;line-height:1.3;margin-bottom:10px;color:var(--tx);transition:color .2s;
}
.featured-body p,.featured-strip-body p{color:var(--tx3);font-size:.95rem;line-height:1.6;margin-bottom:16px}
.featured-body .meta,.featured-body .card-meta,
.featured-strip-body .meta,.featured-strip-body .card-meta{
  display:flex;gap:16px;font-size:.825rem;color:var(--tx3);
}

/* =========================================
   CONTROLS: FILTERS + SEARCH (index)
   ========================================= */
.controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:36px 0 28px;flex-wrap:wrap}

.filters,.blog-filters{display:flex;flex-wrap:wrap;gap:8px}

.fbtn,.filter-btn{
  padding:8px 18px;border:1px solid var(--bd);border-radius:100px;
  background:var(--bg);color:var(--tx3);
  font-size:.875rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s;
}
.fbtn:hover,.filter-btn:hover{border-color:var(--c1);color:var(--c1)}
.fbtn.active,.filter-btn.active{background:var(--c1);color:#fff;border-color:var(--c1)}

.search{display:flex;flex-shrink:0}
.search input{width:240px;padding:10px 16px;border:1px solid var(--bd);border-right:none;border-radius:var(--rs) 0 0 var(--rs);font-size:.875rem;font-family:inherit;background:var(--bg);transition:border-color .2s}
.search input:focus{outline:none;border-color:var(--c1)}
.search button{padding:10px 18px;background:var(--c1);color:#fff;border:none;border-radius:0 var(--rs) var(--rs) 0;cursor:pointer;font-family:inherit;display:grid;place-items:center;transition:background .2s}
.search button:hover{background:var(--c1d)}

/* =========================================
   CARD GRID (index)
   ========================================= */
.grid,
.blog-feed{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:64px;
}

.card,
.blog-card{
  border:1px solid var(--bd2);border-radius:var(--rm);overflow:hidden;
  transition:transform .25s,box-shadow .25s;background:var(--bg);
}
.card:hover,.blog-card:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.card.hidden,.blog-card.hidden{display:none}

.card a,.blog-card-link{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
}
.card:hover h3,.blog-card-link:hover h3{color:var(--c1)}

.card-img .ph,.blog-card-image .hero-placeholder{
  height:200px;background-size:cover;background-position:center;background-color:var(--c1l);
}

.card-body,.blog-card-body{padding:20px 22px 22px}
.card-body .badge.sm,.card-body .card-tag,.blog-card-body .card-tag{margin-bottom:10px}
.card-body h3,.blog-card-body h3{
  font-size:1.08rem;font-weight:700;line-height:1.4;margin-bottom:8px;color:var(--tx);transition:color .2s;
}
.card-body p,.blog-card-body p{
  font-size:.9rem;color:var(--tx3);line-height:1.55;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-body .meta,.card-body .card-meta,
.blog-card-body .card-meta{
  display:flex;gap:14px;font-size:.8rem;color:var(--tx3);margin-top:4px;
}

/* =========================================
   PLACEHOLDER IMAGES (both .ph and .hero-placeholder)
   ========================================= */
.ph,.hero-placeholder{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--c1l);
}
.ph[data-topic="productivity"],.hero-placeholder[data-topic="productivity"]{background-image:url('../images/thumb-productivity.svg')}
.ph[data-topic="burnout"],.hero-placeholder[data-topic="burnout"]{background-image:url('../images/thumb-burnout.svg')}
.ph[data-topic="sleep"],.hero-placeholder[data-topic="sleep"]{background-image:url('../images/thumb-sleep.svg')}
.ph[data-topic="communication"],.hero-placeholder[data-topic="communication"]{background-image:url('../images/thumb-communication.svg')}
.ph[data-topic="boundaries"],.hero-placeholder[data-topic="boundaries"]{background-image:url('../images/thumb-boundaries.svg')}

/* =========================================
   NEWSLETTER (index)
   ========================================= */
.newsletter,.newsletter-section{background:var(--c1l);padding:56px 0}
.newsletter-box,.newsletter-inner{max-width:520px;margin:0 auto;text-align:center}
.newsletter-box h2,.newsletter-inner h2{font-size:1.6rem;font-weight:700;margin-bottom:12px}
.newsletter-box p,.newsletter-inner p{color:var(--tx3);font-size:.95rem;line-height:1.6;margin-bottom:24px}
.nl-form,.newsletter-form{display:flex;gap:10px;max-width:420px;margin:0 auto}
.nl-form input,.newsletter-form input{
  flex:1;padding:12px 18px;border:2px solid var(--bd);border-radius:var(--rs);
  font-size:.95rem;font-family:inherit;background:var(--bg);transition:border-color .2s;
}
.nl-form input:focus,.newsletter-form input:focus{outline:none;border-color:var(--c1)}
.nl-form button,.newsletter-form button{
  padding:12px 28px;background:var(--c1);color:#fff;border:none;border-radius:var(--rs);
  font-size:.95rem;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .2s;
}
.nl-form button:hover,.newsletter-form button:hover{background:var(--c1d)}

/* =========================================
   ARTICLE PAGE
   ========================================= */
.article-header{padding:48px 0 32px;text-align:center}
.article-header .card-tag,.article-header .badge{margin-bottom:18px}
.article-header h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;line-height:1.25;margin:0 auto 18px;max-width:800px}
.article-header .article-subtitle{font-size:1.15rem;color:var(--tx3);max-width:600px;margin:0 auto 20px}
.article-header .article-meta{display:flex;align-items:center;justify-content:center;gap:20px;font-size:.875rem;color:var(--tx3)}

.article-hero-image{max-width:900px;margin:0 auto 40px;border-radius:var(--rl);overflow:hidden}
.article-hero-image .ph,.article-hero-image .hero-placeholder{min-height:360px}

.article-content{max-width:var(--cw);margin:0 auto;padding:0 24px 60px}
.article-content h2{font-size:1.5rem;font-weight:700;margin:40px 0 16px}
.article-content h3{font-size:1.2rem;font-weight:700;margin:32px 0 12px}
.article-content p{font-size:1.05rem;line-height:1.8;margin-bottom:20px}
.article-content ul,.article-content ol{margin-bottom:20px;padding-left:24px}
.article-content ul{list-style:disc}
.article-content ol{list-style:decimal}
.article-content li{font-size:1.05rem;line-height:1.7;margin-bottom:8px}
.article-content blockquote{border-left:4px solid var(--c1);padding:16px 24px;margin:28px 0;background:var(--c1l);border-radius:0 var(--rs) var(--rs) 0;font-style:italic;color:var(--tx2)}
.article-content blockquote p{margin-bottom:0}
.article-content a{color:var(--c1);text-decoration:underline;text-underline-offset:2px}
.article-content a:hover{color:var(--c1d)}

/* TOC */
.toc{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rm);padding:24px 28px;margin-bottom:36px}
.toc h3{font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--tx3);margin-bottom:12px}
.toc ol{list-style:decimal;padding-left:20px}
.toc li{margin-bottom:6px;font-size:.95rem}
.toc a{color:var(--tx2)}
.toc a:hover{color:var(--c1)}

/* Related articles */
.related-articles{max-width:var(--cw);margin:0 auto;padding:0 24px 60px}
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.article-card{background:var(--bg);border:1px solid var(--bd2);border-radius:var(--rm);overflow:hidden;transition:transform .25s,box-shadow .25s}
.article-card:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.article-card .card-thumb{height:160px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--c1l)}
.article-card .card-body{padding:18px}
.article-card h3{font-size:1rem;font-weight:700;line-height:1.4;margin-bottom:6px}
.article-card h3 a{color:var(--tx)}
.article-card h3 a:hover{color:var(--c1)}
.article-card .card-excerpt{font-size:.85rem;color:var(--tx3);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px}

/* Tags */
.tags-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tag{display:inline-block;padding:4px 12px;background:var(--bg2);border:1px solid var(--bd);border-radius:100px;font-size:.8rem;color:var(--tx3);text-decoration:none;transition:all .2s}
.tag:hover{background:var(--c1l);color:var(--c1);border-color:var(--c1l)}

/* Reading progress */
.reading-progress{position:fixed;top:var(--hh);left:0;width:0%;height:3px;background:var(--c1);z-index:101;transition:width .1s linear}

/* Section title */
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.section-title h2{font-size:1.4rem;font-weight:700;color:var(--tx)}
.section-title a{font-size:.9rem;font-weight:600;color:var(--c1)}

/* =========================================
   STATIC PAGES
   ========================================= */
.page-header{padding:48px 0;text-align:center;border-bottom:1px solid var(--bd2)}
.page-header h1{font-size:2rem;font-weight:800;margin-bottom:12px}
.page-header p{color:var(--tx3);max-width:560px;margin:0 auto}
.page-content{max-width:var(--cw);margin:0 auto;padding:48px 24px 60px}
.page-content h2{font-size:1.4rem;font-weight:700;margin:36px 0 14px}
.page-content h3{font-size:1.15rem;font-weight:700;margin:28px 0 10px}
.page-content p{font-size:1rem;line-height:1.8;margin-bottom:16px}
.page-content ul,.page-content ol{margin-bottom:16px;padding-left:24px}
.page-content ul{list-style:disc}
.page-content ol{list-style:decimal}
.page-content li{font-size:1rem;line-height:1.7;margin-bottom:6px}
.page-content strong{font-weight:700}

/* Contact */
.contact-form{max-width:560px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:.9rem;font-weight:600;margin-bottom:6px}
.form-group input,.form-group textarea{width:100%;padding:12px 16px;border:2px solid var(--bd);border-radius:var(--rs);font-size:.95rem;font-family:inherit;background:var(--bg);transition:border-color .2s}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--c1)}
.form-group textarea{min-height:140px;resize:vertical}
.form-submit{padding:12px 32px;background:var(--c1);color:#fff;border:none;border-radius:var(--rs);font-size:.95rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s}
.form-submit:hover{background:var(--c1d)}
.contact-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-bottom:40px}
.contact-info-item{padding:24px;background:var(--bg2);border-radius:var(--rm);text-align:center}
.contact-info-item .contact-info-icon{width:48px;height:48px;margin:0 auto 14px;background-size:contain;background-position:center;background-repeat:no-repeat}
.contact-info-item .contact-info-icon[data-icon="email"]{background-image:url('../images/icon-email.svg')}
.contact-info-item .contact-info-icon[data-icon="location"]{background-image:url('../images/icon-location.svg')}
.contact-info-item .contact-info-icon[data-icon="clock"]{background-image:url('../images/icon-clock.svg')}
.contact-info-item h3{font-size:.9rem;font-weight:700;margin-bottom:6px}
.contact-info-item p{font-size:.875rem;color:var(--tx3)}

/* About */
.about-mission{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:48px}
.about-mission-text h2{margin-top:0}
.about-mission-image{background:var(--c1l) url('../images/about-hero.svg') center/cover no-repeat;border-radius:var(--rl);min-height:280px}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-bottom:48px}
.value-card{padding:28px;background:var(--bg2);border-radius:var(--rm);text-align:center}
.value-card .value-icon{display:block;width:64px;height:64px;margin:0 auto 16px;background-size:contain;background-position:center;background-repeat:no-repeat}
.value-card .value-icon[data-icon="mission"]{background-image:url('../images/value-mission.svg')}
.value-card .value-icon[data-icon="science"]{background-image:url('../images/value-science.svg')}
.value-card .value-icon[data-icon="community"]{background-image:url('../images/value-community.svg')}
.value-card .value-icon[data-icon="growth"]{background-image:url('../images/value-growth.svg')}
.value-card h3{font-size:1.05rem;font-weight:700;margin-bottom:8px}
.value-card p{font-size:.9rem;color:var(--tx3)}

/* =========================================
   FOOTER
   ========================================= */
.footer,.site-footer{background:var(--bg2);border-top:1px solid var(--bd);padding:48px 0 24px}
.footer-top,.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand p,.footer-brand .site-logo+p{font-size:.9rem;color:var(--tx3);margin-top:12px;line-height:1.6}
.footer-links h4,.footer-col h4{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--tx);margin-bottom:14px}
.footer-links a,.footer-col a{display:block;color:var(--tx3);font-size:.9rem;padding:4px 0;transition:color .2s}
.footer-links a:hover,.footer-col a:hover{color:var(--c1)}
.footer-disclaimer{border-top:1px solid var(--bd);padding-top:24px;margin-bottom:20px}
.footer-disclaimer p{font-size:.82rem;color:var(--tx3);line-height:1.6;max-width:900px}
.footer-meta,.footer-business{border-top:1px solid var(--bd);padding-top:20px;display:flex;flex-wrap:wrap;gap:20px;font-size:.8rem;color:var(--tx3)}
.footer-business span{display:flex;align-items:center;gap:6px}
.footer-copy,.footer-bottom{border-top:1px solid var(--bd);padding-top:16px;margin-top:20px;text-align:center;font-size:.82rem;color:var(--tx3)}

/* =========================================
   RESPONSIVE
   ========================================= */
@media(max-width:1024px){
  .articles-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top,.footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:768px){
  .desktop-nav,.nav-links{display:none}
  .burger,.mobile-menu-btn{display:block}
  .featured,.featured-strip{grid-template-columns:1fr}
  .featured-img .ph,.featured-strip-image .hero-placeholder{min-height:200px}
  .controls,.feed-controls{flex-direction:column;align-items:stretch}
  .filters,.blog-filters{width:100%}
  .search{width:100%}
  .search input{width:100%}
  .grid,.blog-feed{grid-template-columns:1fr;gap:20px}
  .hero,.blog-hero{padding:36px 0 28px}
  .articles-grid{grid-template-columns:1fr;gap:16px}
  .article-header .article-meta{flex-direction:column;gap:8px}
  .footer-top,.footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-business{flex-direction:column;gap:8px}
  .nl-form,.newsletter-form{flex-direction:column}
  .about-mission{grid-template-columns:1fr}
  .contact-info{grid-template-columns:1fr}
}
@media(max-width:480px){
  .wrap,.container{padding:0 16px}
  .hero,.blog-hero{padding:28px 0 24px}
  .hero h1,.blog-hero h1{font-size:1.6rem}
  .filters,.blog-filters{gap:6px}
  .fbtn,.filter-btn{padding:6px 14px;font-size:.8rem}
  .card-img .ph,.blog-card-image .hero-placeholder{height:160px}
  .featured-body,.featured-strip-body{padding:24px}
  .featured-body h2,.featured-strip-body h2{font-size:1.25rem}
  .article-content{padding:0 16px 40px}
  .article-hero-image .ph,.article-hero-image .hero-placeholder{min-height:220px}
  .newsletter,.newsletter-section{padding:36px 0}
}