/* =====================================================================
   AyuNature Wellness Blog — Frontend stylesheet
   Palette/fonts intentionally match the main site (see /style.css)
   ===================================================================== */

:root {
  --color-olive: #59633d;
  --color-olive-dark: #30391f;
  --color-gold: #d88d20;
  --color-gold-dark: #b86e10;
  --color-cream: #fbf7ef;
  --color-beige: #f4eadc;
  --color-soft: #fffdf8;
  --color-text: #1f211a;
  --color-muted: #666b5c;
  --color-border: rgba(112, 91, 57, 0.16);
  --shadow-soft: 0 24px 70px rgba(72, 54, 34, 0.10);
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.blog-body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }

.section { padding: 64px 0; }

.anw-label {
  display: inline-block;
  color: var(--color-olive);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-title.small-title {
  font-family: var(--font-heading);
  font-size: 28px;
  margin: 0 0 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-brand { background: var(--color-olive); color: #fff; }
.btn-brand:hover { background: var(--color-olive-dark); }
.btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover { border-color: var(--color-olive); }
.btn-text { background: none; color: var(--color-olive); padding: 8px 4px; }

/* ---------- Header ----------
   The .anw-header / .anw-navbar / .anw-logo / .anw-menu-toggle /
   .anw-mobile-collapse / .page-hero* rules that style the header and hero
   above come from the main site's own stylesheet (linked in header.php)
   so this page matches the rest of the site exactly. The blog no longer
   has its own sub-bar (Blog Home / Categories / Search were removed). */

/* ---------- Hero ----------
   Single-post pages use their own breadcrumb header instead of the shared
   .page-hero component (see post.php). */
.search-page-form { display: flex; gap: 10px; margin-top: 22px; max-width: 480px; }
.search-page-form input {
  flex: 1;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fffdf8;
  font-family: var(--font-body);
  font-size: 15px;
}
.search-page-form input::placeholder { color: rgba(255, 253, 248, 0.6); }
.search-page-form input:focus { outline: none; border-color: var(--color-gold); }

.preview-banner {
  background: var(--color-gold);
  color: #fff;
  text-align: center;
  padding: 10px;
  font-weight: 600;
}

/* ---------- Post grid / cards ---------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 8px;
}

.post-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.post-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }

.post-card-image { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--color-beige); }
.post-card-image img { width: 100%; height: 100%; object-fit: cover; }
.post-card-image-placeholder { width: 100%; height: 100%; background: var(--color-beige); }
.post-card-category {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,0.92);
  color: var(--color-olive-dark);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 5px 12px; border-radius: 999px;
}

.post-card-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card-date { font-size: 12px; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.post-card-body h3 { font-family: var(--font-heading); font-size: 20px; margin: 0; line-height: 1.3; }
.post-card-body h3 a:hover { color: var(--color-olive); }
.post-card-body p { color: var(--color-muted); font-size: 14px; margin: 0; flex: 1; }
.post-card-link { color: var(--color-gold-dark); font-weight: 800; font-size: 14px; margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; transition: gap 0.2s ease, color 0.2s ease; }
.post-card-link:hover { color: var(--color-gold); gap: 12px; }

.empty-state { text-align: center; color: var(--color-muted); padding: 48px 0; }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 48px; }
.page-link {
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--color-border);
  font-size: 14px; font-weight: 600;
}
.page-link.active { background: var(--color-olive); color: #fff; border-color: var(--color-olive); }
.page-link:hover:not(.active) { border-color: var(--color-olive); }
.page-dots { padding: 8px 4px; color: var(--color-muted); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: 13px; color: var(--color-muted); margin: 24px 0; }
.breadcrumbs a:hover { color: var(--color-olive); }
.breadcrumb-sep { margin: 0 8px; }

/* ---------- Single post ---------- */
.single-post { padding: 24px 0 64px; }
.single-post-header h1 { font-family: var(--font-heading); font-size: 38px; line-height: 1.2; margin: 14px 0; color: var(--color-olive-dark); }
.post-category-pill {
  display: inline-block; background: var(--color-beige); color: var(--color-olive-dark);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 6px 14px; border-radius: 999px; margin: 0 6px 6px 0;
}
.single-post-meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--color-muted); font-size: 14px; margin-bottom: 24px; }
.single-post-meta a { font-weight: 600; color: var(--color-olive); }

.single-post-image { border-radius: 16px; overflow: hidden; margin-bottom: 32px; box-shadow: var(--shadow-soft); }
.single-post-image img { width: 100%; }

.single-post-content { font-size: 17px; line-height: 1.85; }
.single-post-content h2, .single-post-content h3 { font-family: var(--font-heading); color: var(--color-olive-dark); margin-top: 40px; }
.single-post-content p { margin: 0 0 20px; }
.single-post-content ul, .single-post-content ol { margin: 0 0 20px; padding-left: 24px; }
.single-post-content blockquote {
  border-left: 4px solid var(--color-gold);
  background: var(--color-beige);
  margin: 28px 0;
  padding: 18px 24px;
  font-style: italic;
  border-radius: 0 10px 10px 0;
}
.single-post-content img { border-radius: 12px; margin: 20px 0; }
.single-post-content table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.single-post-content table td, .single-post-content table th { border: 1px solid var(--color-border); padding: 10px; }

.single-post-tags { display: flex; gap: 10px; flex-wrap: wrap; margin: 32px 0; }
.single-post-tags a { background: var(--color-cream); border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.single-post-tags a:hover { border-color: var(--color-olive); color: var(--color-olive); }

.share-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-bottom: 32px; }
.share-bar span:first-child { font-weight: 700; }
.share-bar a, .share-copy { font-size: 13px; font-weight: 600; color: var(--color-olive); border: 1px solid var(--color-border); padding: 6px 14px; border-radius: 999px; background: none; cursor: pointer; font-family: var(--font-body); }
.share-bar a:hover, .share-copy:hover { border-color: var(--color-olive); }

.author-box { display: flex; gap: 16px; align-items: center; background: var(--color-cream); border-radius: 14px; padding: 20px; margin-bottom: 32px; }
.author-box-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--color-olive); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 22px; flex-shrink: 0; }
.author-box span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); }
.author-box h3 { margin: 2px 0 0; font-family: var(--font-heading); font-size: 18px; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.post-nav-link { border: 1px solid var(--color-border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.post-nav-link:hover { border-color: var(--color-olive); }
.post-nav-link.next { text-align: right; align-items: flex-end; grid-column: 2; }
.post-nav-link span { font-size: 12px; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.post-nav-link strong { font-family: var(--font-heading); font-size: 15px; }

.related-posts-section { background: var(--color-cream); }

.not-found-section h1 { font-family: var(--font-heading); font-size: 72px; color: var(--color-gold); margin: 0; }

.search-page-form { display: flex; gap: 10px; max-width: 480px; margin: 24px auto 0; }
.search-page-form input { flex: 1; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--color-border); font-family: var(--font-body); }
.search-result-count { color: var(--color-muted); margin-bottom: 20px; }

/* ---------- Footer ---------- */
/* Footer now reuses the main site's real .site-footer styling directly
   (linked in header.php), so no blog-specific footer rules are needed. */

@media (max-width: 760px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-link.next { grid-column: 1; text-align: left; align-items: flex-start; }
  .single-post-header h1 { font-size: 28px; }
}