/*
Theme Name: Mama Help
Description: Generated theme for mama-help.org, built from design tokens.
Version: 2.0
Text Domain: pressroom
*/

:root {
  --bg: #fff5ec;
  --text: #0e0502;
  --muted: #684025;
  --accent: #7c2e2a;
  --accent-contrast: #fff5ec;
  --border: #bf9376;
  --surface: #edd4c4;
  --radius: 999px;
  --space: 1.15rem;
  --maxw: 1240px;
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-text: "Onest", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-text); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
/* Serif display for headlines; clean sans for UI/labels — an editorial pairing. */
h1,h2,h3,h4,.brand__name,.card__title,.section-head,.hero__title,.pick__title,.article__title {
  font-family:var(--font-display); font-weight:700; }
.nav a,.pill,.btn,.meta,.header-search input,.brand__logo { font-family:var(--font-text); }
.container { max-width:var(--maxw); margin:0 auto; padding:0 var(--space); }

/* Top social bar */
.topbar { background:var(--text); color:var(--bg); font-size:.8rem; }
.topbar .container { display:flex; justify-content:flex-end; gap:1rem;
  padding:.4rem var(--space); }
.topbar a { color:var(--bg); opacity:.85; }

/* Header */
.site-header { border-top:3px solid var(--accent); border-bottom:1px solid var(--border);
  background:var(--bg); position:sticky; top:0; z-index:20; }
.site-header__bar { display:flex; align-items:center; gap:var(--space);
  padding:calc(var(--space)*.9) 0; }
.brand { display:flex; align-items:center; gap:.55rem; flex:0 0 auto; }
.brand__logo { display:grid; place-items:center; width:40px; height:40px;
  border-radius:calc(var(--radius)*.7); background:var(--accent);
  color:var(--accent-contrast); font-family:var(--font-display); font-weight:800;
  font-size:1.3rem; line-height:1; flex:0 0 auto; }
.brand__mark { flex:0 0 auto; line-height:0; }
.brand__mark svg { width:40px; height:40px; display:block; }
.brand__name { font-weight:800; font-size:1.5rem; letter-spacing:-.02em; white-space:nowrap; }
.nav { flex:1 1 auto; }
.nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:1.15rem; margin:0; padding:0; }
.nav a { font-weight:600; font-size:.92rem; }
.nav a:hover { color:var(--accent); }
.header-actions { display:flex; align-items:center; gap:.7rem; }
.header-search input { border:1px solid var(--border); border-radius:999px;
  padding:.45rem .9rem; font:inherit; font-size:.85rem; background:var(--surface);
  color:var(--text); width:150px; }
.btn { display:inline-block; font-weight:700; font-size:.85rem; padding:.5rem 1.05rem;
  border-radius:999px; background:var(--accent); color:var(--accent-contrast);
  border:1px solid var(--accent); cursor:pointer; }
.btn:hover { filter:brightness(.95); }

/* Pills */
.pill { display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding:.2rem .6rem; border-radius:999px;
  background:var(--surface); color:var(--accent); }

/* Hero — sits in a soft panel so the top of the page has weight */
.hero { display:grid; grid-template-columns:1.4fr 1fr; gap:calc(var(--space)*1.6);
  align-items:center; margin:calc(var(--space)*1.4) 0;
  padding:calc(var(--space)*1.4); background:var(--surface);
  border-radius:calc(var(--radius)*1.3); }
.hero__imgwrap { aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); }
.hero__imgwrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.hero__imgwrap:hover img { transform:scale(1.03); }
.hero__title { font-size:clamp(2rem, 4.2vw, 3.25rem); line-height:1.1;
  letter-spacing:-.015em; margin:.5rem 0 .4rem; text-wrap:balance; }
.hero__excerpt { color:var(--muted); font-size:1.12rem; line-height:1.55; margin:.5rem 0;
  max-width:46ch; }
/* Not flex: mixed text nodes + a separator span in a flex row could collapse
   onto one another on wrap. Plain inline text with a comfortable line-height. */
.meta { color:var(--muted); font-size:.82rem; line-height:1.6;
  font-family:var(--font-text); }
.meta .dot { opacity:.5; margin:0 .35rem; }
@media (max-width:820px) { .hero { grid-template-columns:1fr; } }

/* Section heads */
.section { padding:calc(var(--space)*1.2) 0; }
.section-head { display:flex; align-items:center; gap:.8rem; font-size:1.2rem;
  text-transform:uppercase; letter-spacing:.06em; margin:0 0 var(--space); }
.section-head::before { content:""; width:.65rem; height:1.3rem; border-radius:3px;
  background:var(--accent); flex:0 0 auto; }
.section-head::after { content:""; flex:1; height:2px; background:var(--border); }

/* Card grids */
.grid { display:grid; gap:calc(var(--space)*1.3); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px) { .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .grid-3,.grid-4 { grid-template-columns:1fr; } }
/* Flex column so the card box always encloses image + pill + title + meta;
   without it the row can end at the image and the next block (pagination)
   draws over the titles. */
.card { display:flex; flex-direction:column; transition:transform .2s ease; }
.card:hover { transform:translateY(-3px); }
.card__imgwrap { aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); margin-bottom:.6rem; flex:0 0 auto;
  box-shadow:0 1px 3px rgba(0,0,0,.06); }
.card:hover .card__imgwrap { box-shadow:0 8px 24px rgba(0,0,0,.12); }
.card__imgwrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.card:hover .card__imgwrap img { transform:scale(1.04); }
.card__title { font-size:1.08rem; line-height:1.35; margin:.4rem 0 .35rem; }
.card:hover .card__title { color:var(--accent); }
/* Pills sit on their own line above the title with real separation. */
.card .pill, .hero .pill, .article .pill { display:inline-block; margin-bottom:.4rem; }
/* Long unbroken Cyrillic titles must wrap, not overrun neighbouring text. */
.card__title, .hero__title, .article__title, .pick__title { overflow-wrap:break-word; }
.card__title a, .hero__title a { display:inline-block; }

/* Editor picks: alternating list */
.picks { display:flex; flex-direction:column; gap:calc(var(--space)*1.2); }
.pick { display:grid; grid-template-columns:300px 1fr; gap:calc(var(--space)*1.2);
  align-items:center; }
.pick:nth-child(even) { grid-template-columns:1fr 300px; }
.pick:nth-child(even) .pick__img { order:2; }
.pick__img { aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); }
.pick__img img { width:100%; height:100%; object-fit:cover; }
.pick__title { font-family:var(--font-display); font-size:1.4rem; line-height:1.2;
  margin:.4rem 0; }
.pick__excerpt { color:var(--muted); margin:.3rem 0 .6rem; }
@media (max-width:700px) { .pick,.pick:nth-child(even) { grid-template-columns:1fr; }
  .pick:nth-child(even) .pick__img { order:0; } }

/* Newsletter strip — accent panel for a strong call to action */
.newsletter { background:var(--accent); color:var(--accent-contrast);
  border-radius:calc(var(--radius)*1.3);
  padding:calc(var(--space)*2); text-align:center; margin:calc(var(--space)*2) 0; }
.newsletter h2 { font-size:1.8rem; margin:0 0 .4rem; }
.newsletter p { opacity:.9; margin:0 0 var(--space); }
.newsletter .btn { background:var(--bg); color:var(--accent); border-color:var(--bg); }
.newsletter form { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }
.newsletter input { border:1px solid var(--border); border-radius:999px;
  padding:.6rem 1rem; font:inherit; min-width:260px; background:var(--bg); }

/* Pagination */
.pagination { display:flex; gap:.4rem; padding:var(--space) 0; flex-wrap:wrap;
  justify-content:center; clear:both; margin-top:calc(var(--space)*1.4);
  position:relative; z-index:1; }
.pagination a,.pagination span { font-family:var(--font-display); font-weight:600;
  padding:.5rem .85rem; border-radius:var(--radius); border:1px solid var(--border); }
.pagination .current { background:var(--accent); color:var(--accent-contrast);
  border-color:var(--accent); }

/* Article */
.article { max-width:740px; margin:0 auto; padding:calc(var(--space)*1.8) 0; }
.article__title { font-size:2.5rem; line-height:1.2; letter-spacing:-.02em; margin:.5rem 0; }
.article__img { border-radius:var(--radius); overflow:hidden; margin:var(--space) 0; }
.article__body { font-size:1.12rem; }
.article__body p { margin:0 0 1.2rem; }
.article__body h2 { font-family:var(--font-display); font-size:1.6rem; margin:2rem 0 .6rem; }
.article__body ul { margin:0 0 1.2rem 1.2rem; }
.article__body a { color:var(--accent); text-decoration:underline; }

/* Footer */
.site-footer { background:var(--text); color:var(--bg); margin-top:calc(var(--space)*2.2);
  padding:calc(var(--space)*2) 0 var(--space); }
.footer-cols { display:grid; grid-template-columns:2fr 1fr 1fr; gap:calc(var(--space)*1.5);
  margin-bottom:calc(var(--space)*1.4); }
@media (max-width:700px) { .footer-cols { grid-template-columns:1fr; } }
.site-footer h3 { font-size:.9rem; text-transform:uppercase; letter-spacing:.06em;
  opacity:.7; margin:0 0 .8rem; }
.site-footer a { opacity:.85; } .site-footer a:hover { opacity:1; color:var(--accent); }
.site-footer ul { list-style:none; margin:0; padding:0; line-height:2; }
.footer__brand { font-family:var(--font-display); font-weight:800; font-size:1.4rem; }
.footer__copy { border-top:1px solid rgba(255,255,255,.15); padding-top:var(--space);
  opacity:.6; font-size:.82rem; }

/* --- Wire / news archetype: a dense headline river --- */
.wire-lead { display:grid; grid-template-columns:1.3fr 1fr; gap:calc(var(--space)*1.4);
  align-items:center; margin:var(--space) 0 calc(var(--space)*1.4); }
.wire-lead__img { aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); }
.wire-lead__img img { width:100%; height:100%; object-fit:cover; }
.wire-lead__title { font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.15; margin:.4rem 0; }
@media (max-width:760px) { .wire-lead { grid-template-columns:1fr; } }
.wire-list { list-style:none; margin:0; padding:0; border-top:2px solid var(--text); }
.wire-item { display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; align-items:baseline;
  padding:.8rem 0; border-bottom:1px solid var(--border); }
.wire-item__time { color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.wire-item__title { font-size:1.12rem; line-height:1.3; margin:0; }
.wire-item__title a:hover { color:var(--accent); }
.wire-item .pill { margin-right:.5rem; }
@media (max-width:560px) { .wire-item { grid-template-columns:1fr; gap:.2rem; } }

/* --- Knowledge base archetype: search + category tiles --- */
.kb-hero { text-align:center; background:var(--surface); border-radius:calc(var(--radius)*1.3);
  padding:calc(var(--space)*2.2) var(--space); margin:var(--space) 0 calc(var(--space)*1.6); }
.kb-hero h1 { font-size:clamp(1.8rem,3.5vw,2.6rem); margin:0 0 .4rem; }
.kb-hero p { color:var(--muted); margin:0 auto var(--space); max-width:52ch; }
.kb-hero form { display:flex; gap:.5rem; justify-content:center; }
.kb-hero input { border:1px solid var(--border); border-radius:999px; padding:.7rem 1.1rem;
  font:inherit; min-width:min(420px,70vw); background:var(--bg); color:var(--text); }
.kb-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space); }
@media (max-width:760px) { .kb-cats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px) { .kb-cats { grid-template-columns:1fr; } }
.kb-cat { display:block; border:1px solid var(--border); border-radius:var(--radius);
  padding:calc(var(--space)*1.1); background:var(--bg); transition:border-color .2s,transform .2s; }
.kb-cat:hover { border-color:var(--accent); transform:translateY(-2px); }
.kb-cat__name { font-family:var(--font-display); font-weight:700; font-size:1.2rem; }
.kb-cat__count { color:var(--muted); font-size:.85rem; }

/* --- Long-read archetype: single column, essay-forward --- */
.lr-wrap { max-width:760px; margin:0 auto; }
.lr-lead { padding:calc(var(--space)*1.8) 0 var(--space); border-bottom:1px solid var(--border); }
.lr-lead__title { font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.08; margin:.5rem 0;
  letter-spacing:-.02em; text-wrap:balance; }
.lr-lead__excerpt { font-size:1.2rem; color:var(--muted); line-height:1.6; }
.lr-list { list-style:none; margin:0; padding:0; }
.lr-item { padding:calc(var(--space)*1.3) 0; border-bottom:1px solid var(--border); }
.lr-item__title { font-size:1.7rem; line-height:1.2; margin:.2rem 0 .4rem; }
.lr-item__title a:hover { color:var(--accent); }
.lr-item__excerpt { color:var(--muted); margin:.2rem 0; }

/* Cookie consent bar */
.cookie-bar { position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--text); color:var(--bg); padding:.85rem var(--space);
  display:flex; gap:1rem; align-items:center; justify-content:center;
  flex-wrap:wrap; font-size:.9rem; box-shadow:0 -2px 16px rgba(0,0,0,.18); }
.cookie-bar a { color:var(--bg); text-decoration:underline; }
.cookie-bar .btn { padding:.4rem .95rem; }

/* Mobile */
@media (max-width:820px) {
  body { font-size:16px; }
  .site-header__bar { flex-wrap:wrap; gap:.6rem; }
  .brand { flex:1 1 auto; }
  .nav { order:3; flex-basis:100%; overflow-x:auto; }
  .nav ul { flex-wrap:nowrap; gap:1rem; padding-bottom:.2rem; }
  .header-actions { margin-left:auto; }
  .header-search input { width:120px; }
  .hero__title { font-size:1.9rem; }
  .article__title { font-size:2rem; }
  .article__body { font-size:1.05rem; }
}
@media (max-width:460px) {
  .header-search { display:none; }
  .hero__title { font-size:1.6rem; }
}