/* ================================================
   SANT MISTRI BLOG — STYLESHEET
   blog-styles.css  (v2 — self-contained)

   WHAT CHANGED IN v2:
   • Full :root CSS variables defined here so the blog
     works even if style.css fails to load
   • Navigation / header styles included as fallback
   • Button styles (.btn, .btn-gold, .btn-whatsapp)
   • Complete footer styles
   • Image placeholder / broken-image fallback styles
   • Hero title now always visible (solid dark color)
   • Empty-space gap between filters and posts reduced
================================================ */

/* =============================================
   1. CSS VARIABLES  (self-contained fallback)
   All variables the blog needs, defined here so
   the page looks correct even without style.css
============================================= */
:root {
  /* Brand colours */
  --gold:        #c9973a;
  --gold-lt:     #a0673a;
  --walnut:      #3d2008;   /* dark headings on light bg  */
  --oak:         #7a4a28;   /* medium accent               */
  --cream:       #fffaf2;   /* card / page background      */
  --offwhite:    #f9f3ea;

  /* Background layers */
  --bg-deep:     #f9f3ea;
  --bg-dark:     #fffaf2;
  --bg-card:     #fffaf2;
  --bg-lift:     #fffdf8;

  /* Text */
  --text-dark:   #2c1a0e;
  --text-mid:    #6b5c4e;
  --text:        #2c1a0e;
  --muted:       #6b5c4e;

  /* Border */
  --border:      rgba(122, 74, 40, 0.16);

  /* Shadows */
  --shadow-sm:   0 2px 8px  rgba(60,30,10,.08);
  --shadow-md:   0 4px 20px rgba(60,30,10,.12);
  --shadow-lg:   0 8px 32px rgba(60,30,10,.18);

  /* Misc */
  --transition:  0.25s ease;
  --header-h:    70px;
}

/* =============================================
   2. GLOBAL RESETS  (light fallback only)
============================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  background:
    radial-gradient(circle at top right, rgba(196,148,58,.12), transparent 24%),
    linear-gradient(180deg, #fffdf8 0%, var(--offwhite) 100%);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: inherit; }
ul  { margin: 0; padding: 0; list-style: none; }

/* =============================================
   3. BUTTONS  (fallback in case style.css fails)
============================================= */
.btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            0.5rem;
  padding:        0.8rem 1.8rem;
  font-family:    'Raleway', sans-serif;
  font-size:      0.9rem;
  font-weight:    700;
  letter-spacing: 0.05em;
  text-decoration: none;
  border:         none;
  border-radius:  4px;
  cursor:         pointer;
  transition:     all var(--transition);
  white-space:    nowrap;
}

.btn-gold {
  background: linear-gradient(135deg, #c9973a, #a0673a);
  color:       #fffaf2;
  box-shadow:  0 4px 15px rgba(201,151,58,.35);
}
.btn-gold:hover {
  background: linear-gradient(135deg, #d4a94b, #b57840);
  box-shadow: 0 6px 22px rgba(201,151,58,.50);
  transform:  translateY(-2px);
}

.btn-whatsapp {
  background: #25d366;
  color:       #fff;
  box-shadow:  0 4px 15px rgba(37,211,102,.30);
}
.btn-whatsapp:hover {
  background: #20b858;
  box-shadow: 0 6px 22px rgba(37,211,102,.45);
  transform:  translateY(-2px);
}

/* =============================================
   4. NAVIGATION / HEADER  (complete fallback)
============================================= */
#header {
  position:   sticky;
  top:        0;
  z-index:    1000;
  background: rgba(40, 20, 5, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201,151,58,.15);
  box-shadow: 0 2px 20px rgba(0,0,0,.15);
}

.nav-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  max-width:       1280px;
  margin:          0 auto;
  padding:         0 2rem;
  height:          var(--header-h);
  gap:             1.5rem;
}

/* Logo */
.nav-logo {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: center;
  gap:             0.75rem;
  text-decoration: none;
  flex-shrink:     0;
}
.nav-logo-img {
  width:        auto;
  height:       42px;
  max-width:    160px;
  border-radius: 0;
  object-fit:   contain;
  border:       0;
  filter: brightness(1.05) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.3));
}
.logo-fallback {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.logo-name {
  font-family:    'Playfair Display', serif;
  font-weight:    900;
  font-size:      1.06rem;
  color:          #fffaf2;
  line-height:    1.1;
  white-space:    nowrap;
}
.logo-tag {
  font-size:   0.62rem;
  font-weight: 600;
  color:       rgba(201,151,58,.8);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav-links a {
  padding:         0.5rem 1rem;
  font-size:       0.9rem;
  font-weight:     600;
  color:           rgba(255,250,242,.75);
  text-decoration: none;
  border-radius:   4px;
  letter-spacing:  0.03em;
  transition:      color var(--transition), background var(--transition);
}
.nav-links a:hover,
.nav-links a.active {
  color:      #c9973a;
  background: rgba(201,151,58,.08);
}

/* CTA button */
.nav-cta {
  padding:         0.55rem 1.3rem;
  background:      linear-gradient(135deg, #c9973a, #a0673a);
  color:           #fffaf2 !important;
  font-size:       0.85rem;
  font-weight:     700;
  letter-spacing:  0.04em;
  text-decoration: none;
  border-radius:   4px;
  white-space:     nowrap;
  box-shadow:      0 2px 10px rgba(201,151,58,.3);
  transition:      all var(--transition);
  flex-shrink:     0;
}
.nav-cta:hover {
  box-shadow: 0 4px 18px rgba(201,151,58,.5);
  transform:  translateY(-1px);
}

/* Hamburger */
.hamburger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  padding:        8px;
  background:     transparent;
  border:         1px solid rgba(201,151,58,.3);
  border-radius:  4px;
  cursor:         pointer;
  flex-shrink:    0;
}
.hamburger span {
  display:    block;
  width:      22px;
  height:     2px;
  background: #fffaf2;
  border-radius: 2px;
  transition: all var(--transition);
}

/* Mobile menu */
.mobile-menu {
  display:    none;
  flex-direction: column;
  padding:    1rem 1.5rem 1.5rem;
  background: rgba(30,14,3,.98);
  border-top: 1px solid rgba(201,151,58,.15);
  gap:        0.25rem;
}
.mobile-menu.open { display: flex; }

.mobile-link {
  padding:         0.75rem 1rem;
  color:           rgba(255,250,242,.8);
  font-size:       0.95rem;
  font-weight:     600;
  text-decoration: none;
  border-radius:   4px;
  transition:      all var(--transition);
}
.mobile-link:hover,
.mobile-link.active {
  color:      #c9973a;
  background: rgba(201,151,58,.08);
}
.mobile-link.btn-whatsapp {
  margin-top:  0.5rem;
  text-align:  center;
  color:       #fff;
  background:  #25d366;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .hamburger  { display: flex; }
  .nav-links  { display: none; }
  .nav-cta    { display: none; }
}

@media (max-width: 420px) {
  .nav-inner { padding: 0 1rem; gap: 0.75rem; }
  .nav-logo { gap: 0.55rem; }
  .nav-logo-img { height: 38px; max-width: 118px; }
  .logo-name { font-size: 0.98rem; }
  .logo-tag { font-size: 0.55rem; letter-spacing: 0.05em; }
}

/* =============================================
   5. FOOTER  (complete fallback)
============================================= */
footer {
  background:    #1c0f03;
  border-top:    1px solid rgba(201,151,58,.15);
  padding-top:   3.5rem;
  margin-top:    4rem;
  color:         rgba(255,250,242,.7);
}

.footer-inner {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   2.5rem;
  max-width:             1280px;
  margin:                0 auto;
  padding:               0 2rem 3rem;
}

.footer-brand h4 {
  font-family:   'Playfair Display', serif;
  font-size:     1.3rem;
  font-weight:   700;
  color:         #fffaf2;
  margin:        0 0 0.8rem;
}
.footer-brand p {
  font-size:   0.88rem;
  line-height: 1.7;
  color:       rgba(255,250,242,.6);
  margin:      0 0 1.2rem;
  max-width:   320px;
}
.footer-brand .nav-logo {
  justify-content: flex-start;
  width: fit-content;
  margin-bottom: 1rem;
}
.footer-brand .nav-logo-text {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}
.footer-brand .brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.1;
  color: #fffaf2;
}
.footer-brand .tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #c9973a;
}
.footer-logo-img {
  width:      auto;
  height:     52px;
  max-width:  90px;
  object-fit: contain;
}

.social-row {
  display: flex;
  gap:     0.6rem;
  flex-wrap: wrap;
}
.social-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  background:      rgba(201,151,58,.12);
  border:          1px solid rgba(201,151,58,.3);
  border-radius:   4px;
  color:           #c9973a;
  font-size:       0.85rem;
  text-decoration: none;
  transition:      all var(--transition);
}
.social-btn:hover {
  background: rgba(201,151,58,.25);
  border-color: #c9973a;
  transform: translateY(-2px);
}

.f-col h4 {
  font-family:    'Playfair Display', serif;
  font-size:      1rem;
  font-weight:    700;
  color:          #fffaf2;
  margin:         0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom:  1px solid rgba(201,151,58,.2);
}
.f-col ul { list-style: none; margin: 0; padding: 0; }
.f-col li { margin-bottom: 0.6rem; }
.f-col a {
  font-size:       0.88rem;
  color:           rgba(255,250,242,.6);
  text-decoration: none;
  transition:      color var(--transition);
}
.f-col a:hover { color: #c9973a; }

.footer-btm {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             1rem;
  max-width:       1280px;
  margin:          0 auto;
  padding:         1.2rem 2rem;
  border-top:      1px solid rgba(201,151,58,.12);
  font-size:       0.82rem;
  color:           rgba(255,250,242,.4);
}

.footer-links {
  display: flex;
  gap:     1.5rem;
}
.footer-links a {
  color:           rgba(255,250,242,.4);
  text-decoration: none;
  transition:      color var(--transition);
}
.footer-links a:hover { color: #c9973a; }

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
  .footer-inner {
    grid-template-columns: 1fr;
    padding: 0 1.25rem 2rem;
  }
  .footer-btm {
    flex-direction: column;
    text-align: center;
    padding: 1rem 1.25rem;
  }
}

/* =============================================
   6. BREADCRUMB  (fallback)
============================================= */
.breadcrumb {
  background:  transparent;
  padding:     1rem 2rem;
  max-width:   1280px;
  margin:      0 auto;
}
.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}
.breadcrumb li + li::before {
  content: '›';
  color: var(--muted);
  margin-right: 0.4rem;
}
.breadcrumb a {
  color: var(--oak);
  text-decoration: none;
  transition: color var(--transition);
}
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span   { color: var(--muted); }

/* =============================================
   7. BROKEN-IMAGE / PLACEHOLDER STYLES
============================================= */
/* When an image fails to load, the alt text is
   shown on a warm wood-tone background           */
.blog-card-image img[src=""],
.blog-card-image img:not([src]),
.featured-card-image img[src=""],
.post-hero-image img[src=""],
.related-card-image img[src=""],
img.img-error {
  object-fit:      unset !important;
  background:      linear-gradient(135deg, #f5e6cf, #e8d0a8);
  color:           var(--oak);
  font-size:       0.8rem;
  font-weight:     600;
  text-align:      center;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* Skeleton shimmer shown while image loads */
.blog-card-image,
.featured-card-image,
.post-hero-image,
.related-card-image {
  background: linear-gradient(90deg, #f0e4cc 25%, #f8f0e0 50%, #f0e4cc 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Stop shimmer once image is present */
.blog-card-image:has(img[src]:not([src=""])),
.featured-card-image:has(img[src]:not([src=""])),
.post-hero-image:has(img[src]:not([src=""])),
.related-card-image:has(img[src]:not([src=""])) {
  animation: none;
  background: none;
}

/* =============================================
   8. BLOG HERO SECTION
============================================= */
.blog-hero {
  position:   relative;
  overflow:   hidden;
  padding:    5rem 2rem 3.5rem;
  background:
    radial-gradient(circle at top left, rgba(196,148,58,.18), transparent 30%),
    linear-gradient(180deg, #fff8ec 0%, var(--offwhite) 100%);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.blog-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,148,58,.55), transparent);
}

/* ⭐ KEY FIX: title is always dark & readable */
.blog-hero-content h1 {
  font-size:   clamp(1.8rem, 4vw, 3rem);
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  color:       #3d2008;          /* solid walnut — no variable dependency */
  margin-bottom: 1rem;
  text-shadow: none;
  line-height: 1.2;
}

.blog-hero-content p {
  font-size:    1.05rem;
  color:        #6b5c4e;          /* solid text-mid */
  max-width:    700px;
  margin:       0 auto 2rem;
  line-height:  1.8;
}

/* =============================================
   9. SEARCH & FILTER CONTROLS
============================================= */
.blog-controls {
  display:        flex;
  flex-direction: column;
  gap:            1.2rem;
  max-width:      860px;
  margin:         0 auto;
}

.blog-search {
  width:       100%;
  padding:     0.9rem 1.4rem;
  background:  #fffdf8;
  border:      1px solid var(--border);
  border-radius: 4px;
  color:       var(--text-dark);
  font-family: 'Raleway', sans-serif;
  font-size:   1rem;
  transition:  all var(--transition);
  box-shadow:  var(--shadow-sm);
}
.blog-search::placeholder { color: #b0a090; }
.blog-search:focus {
  outline:    none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,151,58,.12);
}

.blog-filters {
  display:         flex;
  flex-wrap:       wrap;
  gap:             0.6rem;
  justify-content: center;
}

.filter-btn {
  padding:        0.55rem 1.3rem;
  background:     rgba(196,148,58,.08);
  border:         1.5px solid rgba(196,148,58,.25);
  border-radius:  50px;
  color:          var(--oak);
  font-family:    'Raleway', sans-serif;
  font-size:      0.82rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     all var(--transition);
}
.filter-btn:hover,
.filter-btn.active {
  border-color: var(--gold);
  color:        var(--walnut);
  background:   rgba(196,148,58,.15);
}

/* =============================================
   10. FEATURED POST SECTION
============================================= */
.featured-post {
  padding:    2.5rem 2rem;
  background: transparent;
}
.featured-post .container {
  max-width: 1140px;
  margin:    0 auto;
}

.featured-card {
  display:       grid;
  grid-template-columns: 1fr 1.2fr;
  gap:           2.5rem;
  align-items:   center;
  padding:       2rem;
  background:    #fffdf9;
  border:        1px solid rgba(122,74,40,.14);
  border-radius: 4px;
  box-shadow:    var(--shadow-md);
  overflow:      hidden;
}
.featured-card:hover {
  box-shadow: var(--shadow-lg);
}

.featured-card-image {
  position:      relative;
  overflow:      hidden;
  border-radius: 4px;
  aspect-ratio:  3/2;
}
.featured-card-image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.featured-card:hover .featured-card-image img {
  transform: scale(1.05);
}

.featured-label {
  display:        inline-block;
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  0.8rem;
  padding:        0.4rem 1rem;
  background:     rgba(201,151,58,.1);
  border:         1px solid rgba(201,151,58,.3);
  border-radius:  50px;
}

.featured-card-content h2 {
  font-size:    1.8rem;
  font-family:  'Playfair Display', serif;
  color:        var(--walnut);
  margin-bottom: 0.8rem;
  line-height:  1.25;
}
.featured-card-content p {
  font-size:    0.95rem;
  color:        var(--text-mid);
  line-height:  1.8;
  margin-bottom: 1.2rem;
}
.featured-card-meta {
  display:       flex;
  gap:           1.2rem;
  font-size:     0.88rem;
  color:         var(--muted);
  margin-bottom: 1.2rem;
  flex-wrap:     wrap;
}
.featured-card-cta {
  display: inline-flex;
  gap:     1rem;
}

@media (max-width: 768px) {
  .featured-card { grid-template-columns: 1fr; }
}

/* =============================================
   11. BLOG LISTING SECTION
   ⭐ FIX: removed excess top padding that caused
   the large empty gap below the filters
============================================= */
.blog-listing {
  padding:    2rem 2rem 4rem;   /* was 4rem 3rem */
  background: transparent;
}
.blog-listing .container {
  max-width: 1140px;
  margin:    0 auto;
}

.blog-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   1.8rem;
  margin-bottom:         2.5rem;
}

/* =============================================
   12. BLOG CARDS
============================================= */
.blog-card {
  display:        flex;
  flex-direction: column;
  background:     #fffdf9;
  border:         1px solid rgba(122,74,40,.14);
  border-radius:  4px;
  overflow:       hidden;
  transition:     all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:     var(--shadow-sm);
}
.blog-card:hover {
  transform:    translateY(-6px);
  border-color: rgba(201,151,58,.35);
  box-shadow:   var(--shadow-lg);
}

.blog-card-image {
  position:    relative;
  width:       100%;
  aspect-ratio: 16/9;
  overflow:    hidden;
}
.blog-card-image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-image img {
  transform: scale(1.06);
}

.blog-card-body {
  padding:        1.5rem;
  flex:           1;
  display:        flex;
  flex-direction: column;
}

.blog-card-category {
  display:        inline-block;
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--oak);
  margin-bottom:  0.6rem;
  padding:        0.3rem 0.8rem;
  background:     rgba(196,148,58,.08);
  border:         1px solid rgba(196,148,58,.2);
  border-radius:  50px;
  width:          fit-content;
}

.blog-card-title {
  font-size:    1.2rem;
  font-family:  'Playfair Display', serif;
  color:        var(--walnut);
  margin-bottom: 0.6rem;
  line-height:  1.35;
  flex:         1;
  transition:   color var(--transition);
}
.blog-card:hover .blog-card-title { color: var(--oak); }

.blog-card-excerpt {
  font-size:    0.88rem;
  color:        var(--text-mid);
  line-height:  1.65;
  margin-bottom: 1rem;
}

.blog-card-meta {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       0.82rem;
  color:           var(--muted);
  padding-top:     0.9rem;
  border-top:      1px solid var(--border);
  margin-top:      auto;
}

.blog-card-link {
  display:    inline-flex;
  align-items: center;
  gap:         0.3rem;
  font-size:   0.88rem;
  font-weight: 700;
  color:       var(--oak);
  cursor:      pointer;
  transition:  color var(--transition);
  text-decoration: none;
}
.blog-card-link:hover { color: var(--gold); }

/* =============================================
   13. PAGINATION / LOAD MORE
============================================= */
.pagination-controls {
  display:         flex;
  justify-content: center;
  padding-top:     1.5rem;
}
.load-more-btn { padding: 0.9rem 2.2rem; font-size: 0.95rem; }
.load-more-btn:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 28px rgba(201,151,58,.4);
}

/* =============================================
   14. BLOG SIDEBAR  (horizontal grid layout)
============================================= */
.blog-sidebar {
  position: static;
  display:  grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:      1.5rem;
  width:    min(1140px, calc(100% - 4rem));
  margin:   0 auto 4rem;
  padding:  0;
}
.post-container + .blog-sidebar {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}

.sidebar-widget {
  background:    #fffdf9;
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       1.6rem;
  box-shadow:    var(--shadow-sm);
}
.sidebar-widget h3 {
  font-size:    1.05rem;
  color:        var(--walnut);
  margin-bottom: 1rem;
  font-family:  'Playfair Display', serif;
}

.recent-posts li {
  margin-bottom:  0.8rem;
  padding-bottom: 0.8rem;
  border-bottom:  1px solid var(--border);
}
.recent-posts li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.recent-posts a {
  font-size:       0.88rem;
  color:           var(--text-mid);
  line-height:     1.5;
  transition:      color var(--transition);
  text-decoration: none;
}
.recent-posts a:hover { color: var(--oak); }

.categories-list li { margin-bottom: 0.6rem; }
.categories-list a {
  display:         inline-block;
  padding:         0.45rem 1rem;
  background:      rgba(196,148,58,.08);
  border:          1px solid rgba(196,148,58,.22);
  border-radius:   50px;
  font-size:       0.83rem;
  color:           var(--oak);
  font-weight:     600;
  transition:      all var(--transition);
  text-decoration: none;
}
.categories-list a:hover {
  background:   rgba(196,148,58,.15);
  border-color: var(--gold);
  color:        var(--walnut);
}

.cta-widget {
  background: linear-gradient(135deg, rgba(201,151,58,.08), rgba(201,151,58,.03));
  border:     2px solid rgba(201,151,58,.2);
}
.cta-widget p {
  font-size:    0.88rem;
  color:        var(--text-mid);
  line-height:  1.6;
  margin-bottom: 1rem;
}

.newsletter-widget form {
  display:        flex;
  flex-direction: column;
  gap:            0.7rem;
}
.newsletter-widget input {
  padding:     0.75rem 1rem;
  background:  #fffdf8;
  border:      1px solid var(--border);
  border-radius: 4px;
  color:       var(--text-dark);
  font-family: 'Raleway', sans-serif;
  font-size:   0.9rem;
  transition:  all var(--transition);
}
.newsletter-widget input:focus {
  outline:    none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,151,58,.1);
}

#newsletterMessage {
  font-size:  0.82rem;
  padding:    0.7rem;
  border-radius: 4px;
  text-align: center;
  margin-top: 0.5rem;
}
#newsletterMessage.success {
  background: rgba(76,175,80,.12);
  color:      #388e3c;
  border:     1px solid rgba(76,175,80,.3);
}
#newsletterMessage.error {
  background: rgba(244,67,54,.1);
  color:      #c62828;
  border:     1px solid rgba(244,67,54,.25);
}

@media (max-width: 1024px) {
  .blog-sidebar,
  .post-container + .blog-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, calc(100% - 3rem));
  }
}
@media (max-width: 640px) {
  .blog-sidebar,
  .post-container + .blog-sidebar {
    grid-template-columns: 1fr;
    width: min(100%, calc(100% - 2rem));
  }
}

/* =============================================
   15. POST PAGE — HERO
============================================= */
.post-hero {
  position:   relative;
  overflow:   hidden;
  padding:    4.5rem 2rem 2.5rem;
  background:
    radial-gradient(circle at top left, rgba(196,148,58,.14), transparent 30%),
    linear-gradient(180deg, #fff8ec 0%, var(--offwhite) 100%);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.post-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,148,58,.55), transparent);
}
.post-hero .container { max-width: 900px; margin: 0 auto; }

.post-hero-image {
  width:         100%;
  aspect-ratio:  16/9;
  overflow:      hidden;
  border-radius: 4px;
  border:        1px solid var(--border);
  margin-bottom: 2rem;
  box-shadow:    var(--shadow-md);
}
.post-hero-image img { width: 100%; height: 100%; object-fit: cover; }

.post-title {
  font-size:    clamp(1.8rem, 4.5vw, 3rem);
  font-family:  'Playfair Display', serif;
  font-weight:  900;
  color:        #3d2008;          /* solid — always visible */
  margin-bottom: 1rem;
  line-height:  1.2;
  text-shadow:  none;
}
.post-excerpt {
  font-size:    1.05rem;
  color:        #6b5c4e;
  line-height:  1.8;
  max-width:    750px;
  margin:       0 auto 1.5rem;
}
.post-hero-meta {
  display:         flex;
  flex-wrap:       wrap;
  gap:             1.5rem;
  font-size:       0.9rem;
  color:           var(--text-mid);
  padding-top:     1.2rem;
  border-top:      1px solid var(--border);
  justify-content: center;
}

/* =============================================
   16. POST CONTAINER & CONTENT
============================================= */
.post-container {
  display:               grid;
  grid-template-columns: minmax(0,1fr) 280px;
  gap:                   2.5rem;
  max-width:             1180px;
  margin:                0 auto;
  padding:               2.5rem 2rem;
  align-items:           start;
}

.post-content {
  background:    #fffdf9;
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       2rem;
  box-shadow:    var(--shadow-sm);
  color:         var(--text-dark);
  line-height:   1.9;
}

.post-content h2 {
  font-size:        clamp(1.5rem, 3vw, 2.1rem);
  font-family:      'Playfair Display', serif;
  color:            var(--walnut);
  margin:           2.5rem 0 1rem;
  padding-top:      1rem;
  border-top:       1px solid var(--border);
  scroll-margin-top: 100px;
}
.post-content h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.post-content h3 {
  font-size:     1.25rem;
  font-family:   'Playfair Display', serif;
  color:         var(--oak);
  margin:        1.8rem 0 0.7rem;
  scroll-margin-top: 100px;
}
.post-content h4 { font-size: 1.05rem; color: var(--walnut); margin: 1.2rem 0 0.5rem; }
.post-content p  { font-size: 0.97rem; color: var(--text-mid); margin-bottom: 1.1rem; }
.post-content ul,
.post-content ol { margin: 0 0 1.4rem 1.8rem; }
.post-content li { color: var(--text-mid); margin-bottom: 0.5rem; }
.post-content strong { color: var(--walnut); font-weight: 700; }
.post-content em     { color: var(--oak); font-style: italic; }
.post-content a      { color: var(--oak); text-decoration: underline; }
.post-content a:hover { color: var(--gold); }

/* =============================================
   17. TABLE OF CONTENTS
============================================= */
.post-toc {
  position:      sticky;
  top:           90px;
  background:    #fffdf9;
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       1.4rem;
  height:        fit-content;
  box-shadow:    var(--shadow-sm);
}
.post-toc h3 {
  font-size:    0.95rem;
  color:        var(--walnut);
  margin-bottom: 0.9rem;
  font-family:  'Playfair Display', serif;
}
.post-toc ul  { list-style: none; margin: 0; padding: 0; }
.post-toc li  { margin-bottom: 0.4rem; }
.post-toc a {
  font-size:       0.85rem;
  color:           var(--text-mid);
  text-decoration: none;
  display:         block;
  padding:         0.3rem 0 0.3rem 0.8rem;
  border-left:     2px solid transparent;
  transition:      all var(--transition);
}
.post-toc a:hover,
.post-toc a.active {
  color:            var(--oak);
  border-left-color: var(--gold);
  font-weight:      600;
}

/* =============================================
   18. POST META
============================================= */
.post-meta {
  display:       flex;
  flex-wrap:     wrap;
  gap:           1.5rem;
  padding:       1.2rem 1.5rem;
  background:    #fffdf9;
  border:        1px solid var(--border);
  border-radius: 4px;
  margin:        1.5rem 0;
  font-size:     0.9rem;
  color:         var(--text-mid);
  box-shadow:    var(--shadow-sm);
}
.meta-item { display: flex; flex-direction: column; gap: 0.25rem; }
.meta-item strong { color: var(--walnut); font-weight: 600; }

.post-category {
  display:       inline-block;
  background:    rgba(196,148,58,.1);
  border:        1px solid rgba(196,148,58,.28);
  padding:       0.35rem 0.9rem;
  border-radius: 50px;
  color:         var(--oak);
  font-weight:   600;
  font-size:     0.85rem;
}

/* =============================================
   19. SOCIAL SHARE
============================================= */
.post-share {
  padding:       1.5rem;
  background:    #fffdf9;
  border:        1px solid var(--border);
  border-radius: 4px;
  margin:        1.5rem 0;
  box-shadow:    var(--shadow-sm);
}
.post-share h4 { font-size: 0.95rem; color: var(--walnut); margin-bottom: 1rem; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.share-btn {
  display:    inline-flex;
  align-items: center;
  gap:         0.4rem;
  padding:     0.65rem 1.1rem;
  background:  #fffdf8;
  border:      1.5px solid var(--border);
  border-radius: 4px;
  color:       var(--text-mid);
  font-size:   0.85rem;
  font-weight: 600;
  font-family: 'Raleway', sans-serif;
  cursor:      pointer;
  text-decoration: none;
  transition:  all var(--transition);
}
.share-btn:hover {
  background: rgba(201,151,58,.1);
  border-color: var(--gold);
  color:       var(--oak);
  transform:   translateY(-2px);
}
.share-facebook:hover  { background:#1877f2; border-color:#1877f2; color:#fff; }
.share-twitter:hover   { background:#1da1f2; border-color:#1da1f2; color:#fff; }
.share-linkedin:hover  { background:#0a66c2; border-color:#0a66c2; color:#fff; }
.share-whatsapp:hover  { background:#25d366; border-color:#25d366; color:#fff; }
.share-copy:hover      { background:var(--gold); border-color:var(--gold); color:#fff; }

/* =============================================
   20. FAQ SECTION
============================================= */
.post-faq {
  padding:       1.5rem;
  background:    #fffdf9;
  border:        1px solid var(--border);
  border-radius: 4px;
  margin:        1.5rem 0;
  box-shadow:    var(--shadow-sm);
}
.post-faq h2 { margin-top: 0; border-top: none; padding-top: 0; }

.faq-item {
  margin-bottom:  0.8rem;
  border-bottom:  1px solid var(--border);
  padding-bottom: 0.8rem;
}
.faq-item:last-child { border-bottom: none; }

.faq-question {
  display:     flex;
  align-items: center;
  gap:         0.8rem;
  cursor:      pointer;
  padding:     0.9rem 1rem;
  background:  #fffaf2;
  border:      1px solid var(--border);
  border-radius: 4px;
  font-weight: 600;
  color:       var(--walnut);
  font-size:   0.95rem;
  width:       100%;
  text-align:  left;
  transition:  all var(--transition);
}
.faq-question:hover {
  border-color: var(--gold);
  background:   rgba(201,151,58,.06);
}
.faq-toggle {
  flex-shrink: 0;
  width:       22px;
  height:      22px;
  color:       var(--gold);
  font-size:   1.2rem;
  line-height: 1;
  transition:  transform var(--transition);
  display:     flex;
  align-items: center;
  justify-content: center;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.35s ease;
}
.faq-item.open .faq-answer {
  max-height: 600px;
  padding:    0.5rem 0 0;
}
.faq-answer-text {
  padding:    1rem;
  background: #fffdf9;
  border:     1px solid var(--border);
  color:      var(--text-mid);
  line-height: 1.7;
  font-size:  0.93rem;
}

/* =============================================
   21. RELATED POSTS
============================================= */
.related-posts {
  padding:       1.5rem;
  background:    #fffdf9;
  border:        1px solid var(--border);
  border-radius: 4px;
  margin:        1.5rem 0;
  box-shadow:    var(--shadow-sm);
}
.related-posts h2 { margin-top: 0; border-top: none; padding-top: 0; }

.related-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   1.2rem;
}

.related-card {
  display:        flex;
  flex-direction: column;
  background:     #fffaf2;
  border:         1px solid var(--border);
  border-radius:  4px;
  overflow:       hidden;
  transition:     all var(--transition);
  box-shadow:     var(--shadow-sm);
  text-decoration: none;
  color:          inherit;
}
.related-card:hover {
  transform:    translateY(-4px);
  border-color: rgba(201,151,58,.35);
  box-shadow:   var(--shadow-md);
}
.related-card-image {
  width:        100%;
  aspect-ratio: 16/9;
  overflow:     hidden;
}
.related-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.related-card:hover .related-card-image img { transform: scale(1.06); }

.related-card-body { padding: 1rem; }
.related-card-title {
  font-size:    0.95rem;
  font-family:  'Playfair Display', serif;
  color:        var(--walnut);
  margin-bottom: 0.4rem;
  line-height:  1.3;
}
.related-card-category {
  font-size:   0.72rem;
  font-weight: 700;
  color:       var(--oak);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =============================================
   22. POST CTA
============================================= */
.post-cta {
  background:    linear-gradient(135deg, rgba(196,148,58,.14), rgba(160,103,58,.06)), #fff8ec;
  border:        1px solid rgba(196,148,58,.28);
  border-radius: 4px;
  padding:       2rem;
  margin:        1.5rem 0;
  text-align:    center;
}
.cta-content h3 {
  font-size:    1.5rem;
  font-family:  'Playfair Display', serif;
  color:        var(--walnut);
  margin-bottom: 0.6rem;
}
.cta-content p { color: var(--text-mid); margin-bottom: 1.2rem; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* =============================================
   23. AUTHOR BOX  (sidebar)
============================================= */
.author-box {
  display:     flex;
  gap:         1rem;
  align-items: flex-start;
  padding:     1rem;
  background:  #fffdf9;
  border:      1px solid var(--border);
  border-radius: 4px;
}
.author-avatar {
  width:         72px;
  height:        56px;
  border-radius: 4px;
  object-fit:    contain;
  background:    #fffaf2;
  border:        2px solid rgba(201,151,58,.3);
  flex-shrink:   0;
}
.author-info h4 { color: var(--walnut); margin: 0 0 0.4rem; font-size: 0.95rem; }
.author-info p  { color: var(--text-mid); font-size: 0.83rem; line-height: 1.6; margin-bottom: 0.6rem; }
.author-contacts { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.author-contacts a {
  font-size:       0.82rem;
  font-weight:     600;
  color:           var(--oak);
  text-decoration: none;
  transition:      color var(--transition);
}
.author-contacts a:hover { color: var(--gold); }

/* =============================================
   24. READING PROGRESS BAR
============================================= */
.reading-progress {
  position:   fixed;
  top:        0;
  left:       0;
  width:      0%;
  height:     3px;
  background: linear-gradient(90deg, var(--gold), var(--oak));
  z-index:    9999;
  transition: width 0.1s linear;
}

/* =============================================
   25. EMPTY STATE
============================================= */
.blog-empty-state {
  grid-column: 1 / -1;
  padding:     2.5rem;
  text-align:  center;
  background:  #fffaf2;
  border:      1px dashed rgba(122,74,40,.28);
  border-radius: 4px;
  box-shadow:  var(--shadow-sm);
}
.blog-empty-state h3 { color: var(--walnut); margin-bottom: 0.5rem; }
.blog-empty-state p  { color: var(--text-mid); }

/* =============================================
   26. STATUS MESSAGES
============================================= */
.blog-status-message {
  max-width: 1140px;
  margin:    1rem auto 0;
  padding:   1rem 1.2rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.blog-status-message.error,
.blog-status-message.success {
  background: #fff7ef;
  border:     1px solid rgba(122,74,40,.18);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  box-shadow:  var(--shadow-sm);
}

/* =============================================
   27. RESPONSIVE
============================================= */
@media (max-width: 1024px) {
  .post-container {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
  }
  .post-toc { display: none; }
  .featured-post { padding: 2rem 1.5rem; }
}

@media (max-width: 768px) {
  .blog-hero    { padding: 4rem 1.5rem 2.5rem; }
  .featured-card { padding: 1.5rem; gap: 1.5rem; }
  .blog-listing  { padding: 1.5rem 1.25rem 3rem; }
  .blog-grid     { grid-template-columns: 1fr; gap: 1.2rem; }
  .post-hero     { padding: 3rem 1.5rem 2rem; }
  .post-title    { font-size: 1.7rem; }
  .share-buttons { gap: 0.5rem; }
  .share-btn     { padding: 0.55rem 0.9rem; font-size: 0.8rem; }
  .cta-buttons   { flex-direction: column; }
  .cta-buttons .btn { width: 100%; }
  .related-grid  { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .blog-hero-content h1 { font-size: 1.5rem; }
  .post-title            { font-size: 1.4rem; }
  .share-btn span        { display: none; }
  .post-meta             { flex-direction: column; gap: 0.8rem; }
}

/* =============================================
   28. ACCESSIBILITY
============================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:       0.01ms !important;
  }
}

:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 3px;
  border-radius:  2px;
}