/*
Theme Name: Namaya
Theme URI: https://namaya.app
Author: Namaya
Description: Editorial theme for the Namaya blog, matched to the Namaya app design system (Playfair Display + DM Sans, stone/coral/champagne palette).
Version: 1.0.6
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: namaya
*/

/* ============================================================
   Design tokens (mirrors the Next.js app)
   ============================================================ */
:root {
  --stone-50:#fafaf9; --stone-100:#f5f5f4; --stone-200:#e7e5e4; --stone-300:#d6d3d1;
  --stone-400:#a8a29e; --stone-500:#78716c; --stone-600:#57534e; --stone-700:#44403c;
  --stone-800:#292524; --stone-900:#1c1917;
  --champagne-50:#fdfbf7; --champagne-100:#f7f3eb;
  --coral-50:#fef6f4; --coral-100:#fdeee9; --coral-200:#fbddd4; --coral-300:#f7c4b6;
  --coral-400:#f0a997; --coral-500:#ec9a85; --coral-600:#ea9179; --coral-700:#b5725f;
  --coral-800:#9a5f4d; --coral-900:#7f4c3d;
  --shadow-soft:0 4px 30px -4px rgba(28,25,23,.04);
  --shadow-soft-hover:0 20px 40px -4px rgba(28,25,23,.08);
  --shadow-card:0 2px 10px rgba(0,0,0,.02);
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"DM Sans", system-ui, -apple-system, sans-serif;
  --wrap:1280px; --read:46rem;
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background-color:var(--stone-50); color:var(--stone-900);
  font-family:var(--sans); font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
a{ color:var(--coral-700); text-decoration:none; transition:color .15s ease; }
a:hover{ color:var(--coral-600); }
img{ max-width:100%; height:auto; }
/* App uses Playfair Display at weight 400 for headings (elegant/light) — match it. */
h1,h2,h3,h4{ font-family:var(--serif); color:var(--stone-900); font-weight:400; line-height:1.15; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 1.5rem; }

/* ============================================================
   Header (sticky, blurred — matches app)
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(250,250,249,.8); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--stone-100);
}
.site-header .bar{ display:flex; align-items:center; justify-content:space-between; height:84px; }
.site-header .left{ display:flex; align-items:center; gap:2rem; }
.site-header .brand{ display:flex; align-items:center; }
.site-header .logo-img{ height:40px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:1.5rem; }
.nav-links a{ font-size:15px; font-weight:500; color:var(--stone-600); transition:color .15s ease; }
.nav-links a:hover, .nav-links a.active{ color:var(--coral-600); }
.site-header .right{ display:flex; align-items:center; gap:1rem; }
.site-header .globe{ display:inline-flex; align-items:center; gap:.35rem; color:var(--stone-400); font-size:.72rem; font-weight:500; }
.site-header .globe .en{ text-transform:uppercase; letter-spacing:.02em; }
.site-header .signin{ display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:500; color:var(--stone-700); }
.site-header .signin:hover{ color:var(--coral-600); }
@media (max-width:520px){ .site-header .globe{ display:none; } }
@media (max-width:720px){
  .site-header .left{ gap:1rem; }
  .nav-links{ display:none; }
}

/* ============================================================
   Blog hero / page header
   ============================================================ */
.page-hero{ text-align:center; padding:4rem 1.5rem 2.5rem; }
.page-hero .eyebrow{
  text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; font-weight:700;
  color:var(--coral-600); margin-bottom:1rem;
}
.page-hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin:0 0 .75rem; }
.page-hero p{ color:var(--stone-500); max-width:38rem; margin:0 auto; font-weight:300; }

/* ============================================================
   Post list (cards)
   ============================================================ */
.post-list{
  max-width:64rem; margin:1rem auto 4rem; padding:0 1.5rem;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.75rem;
}
.card{
  background:#fff; border:1px solid var(--stone-100); border-radius:1rem; overflow:hidden;
  box-shadow:var(--shadow-card); transition:box-shadow .2s ease, transform .2s ease;
  display:flex; flex-direction:column;
}
.card:hover{ box-shadow:var(--shadow-soft-hover); transform:translateY(-2px); }
.card .thumb{ display:block; aspect-ratio:16/9; background:var(--champagne-100); overflow:hidden; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; }
.card .body{ padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card .cat{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--coral-600); }
.card h2{ font-size:1.4rem; margin:0; }
.card h2 a{ color:var(--stone-900); }
.card h2 a:hover{ color:var(--coral-700); }
.card .excerpt{ color:var(--stone-600); font-size:.95rem; font-weight:300; }
.card .meta{ margin-top:auto; padding-top:.5rem; color:var(--stone-400); font-size:.8rem; }

/* ============================================================
   Single article
   ============================================================ */
.article{ max-width:var(--read); margin:0 auto; padding:3rem 1.5rem 2rem; }
.article .eyebrow{
  text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700;
  color:var(--coral-600); margin-bottom:1rem; text-align:center;
}
.article h1.title{ font-size:clamp(2rem,4.5vw,3rem); text-align:center; margin:0 0 1rem; }
.article .meta{
  text-align:center; color:var(--stone-500); font-size:.9rem;
  padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid var(--stone-200);
}
.article .featured{ margin:0 0 2.5rem; border-radius:1rem; overflow:hidden; box-shadow:var(--shadow-soft); }

.prose{ font-size:1.125rem; line-height:1.85; color:var(--stone-800); }
.prose > p:first-of-type.has-drop-cap::first-letter,
.prose.drop > p:first-of-type::first-letter{
  float:left; font-family:var(--serif); font-size:3.6rem; line-height:.82;
  font-weight:400; margin:.28rem .75rem 0 0; color:var(--stone-900);
}
.prose p{ margin:0 0 1.5rem; }
.prose h2{ font-size:1.8rem; margin:2.75rem 0 1rem; }
.prose h3{ font-size:1.35rem; margin:2rem 0 .75rem; }
.prose a{ color:var(--coral-700); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--coral-200); }
.prose a:hover{ text-decoration-color:var(--coral-500); }
.prose blockquote{
  margin:2rem 0; padding:.5rem 0 .5rem 1.5rem; border-left:3px solid var(--coral-300);
  font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--stone-700);
}
.prose ul,.prose ol{ margin:0 0 1.5rem; padding-left:1.4rem; }
.prose li{ margin:.4rem 0; }
.prose img{ border-radius:.75rem; margin:1.5rem 0; }
.prose hr{ border:0; border-top:1px solid var(--stone-200); margin:2.5rem 0; }
.prose code{ background:var(--stone-100); padding:.15em .4em; border-radius:.3em; font-size:.9em; }

/* Article footer / back link */
.article-foot{
  max-width:var(--read); margin:1rem auto 4rem; padding:2rem 1.5rem 0;
  border-top:1px solid var(--stone-200); text-align:center;
}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.4rem;
  border-radius:9999px; font-weight:600; font-size:.9rem;
  background:var(--coral-700); color:#fff;
}
.btn:hover{ background:var(--coral-800); color:#fff; }
.btn.ghost{ background:#fff; color:var(--stone-700); border:1px solid var(--stone-200); }
.btn.ghost:hover{ border-color:var(--coral-300); color:var(--coral-700); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ border-top:1px solid var(--stone-100); background:var(--champagne-50); margin-top:2rem; }
.site-footer .inner{ padding:3rem 1.5rem; text-align:center; color:var(--stone-500); font-size:.9rem; }
.site-footer .logo{ font-family:var(--serif); font-weight:700; font-size:1.3rem; color:var(--stone-900); }
.site-footer .logo .dot{ color:var(--coral-600); }
.site-footer a{ color:var(--stone-600); }
.site-footer a:hover{ color:var(--coral-700); }
.site-footer .muted{ margin-top:1rem; font-size:.8rem; color:var(--stone-400); }

/* Pagination */
.pagination{ max-width:64rem; margin:0 auto 4rem; padding:0 1.5rem; display:flex; gap:.5rem; justify-content:center; }
.pagination .page-numbers{
  padding:.5rem .9rem; border:1px solid var(--stone-200); border-radius:.6rem;
  color:var(--stone-600); background:#fff; font-size:.9rem;
}
.pagination .page-numbers.current{ background:var(--coral-700); color:#fff; border-color:var(--coral-700); }
.pagination .page-numbers:hover:not(.current){ border-color:var(--coral-300); color:var(--coral-700); }