:root{
  --bg: #f7f6f2;
  --surface: rgba(255,255,255,0.45);
  --surface-strong: rgba(255,255,255,0.96);
  --text: #17211b;
  --muted: #627066;
  --line: rgba(23,33,27,0.08);
  --brand: #3f7d5f;
  --brand-strong: #285640;
  --brand-soft: #e6f2ea;
  --accent: #ea9633;
  --accent-strong: #cf7f22;
  --warning: #b64848;
  --shadow: 0 12px 30px rgba(17,24,19,0.08);
  --shadow-sm: 0 6px 16px rgba(17,24,19,0.05);
  --radius: 18px;
  --radius-lg: 28px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, #edf7f1 0, transparent 30%),
    radial-gradient(circle at top right, #fbf1e4 0, transparent 24%),
    var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button, input, select { font: inherit; }

.container{
  width:min(calc(100% - 1.25rem), var(--max));
  margin-inline:auto;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(247,246,242,.82);
  border-bottom: 1px solid var(--line);
}

.nav{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  font-weight:800;
  letter-spacing:-.03em;
}

.brand-mark{
  width:32px;
  height:32px;
  object-fit:contain;
}

.desktop-nav{
  display:none;
  align-items:center;
  gap:.4rem;
}

.desktop-nav a{
  padding:.6rem .85rem;
  color:var(--muted);
  font-weight:600;
  border-radius:12px;
}

.desktop-nav a:hover,
.desktop-nav a.active{
  color:var(--text);
  background:rgba(255,255,255,.8);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:.65rem;
}

.icon-btn, .btn{
  border:none;
  cursor:pointer;
  transition:.2s ease;
}

.icon-btn{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--surface-strong);
  border:1px solid var(--line);
}

.btn{
  min-height:46px;
  padding:0 1rem;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-weight:700;
  white-space:nowrap;
}

.btn:hover, .icon-btn:hover{ transform: translateY(-1px); }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--brand-strong); }
.btn-secondary{
  background:var(--surface-strong);
  color:var(--text);
  border:1px solid var(--line);
}
.btn-accent{
  background:linear-gradient(180deg, var(--accent), var(--accent-strong));
  color:#fff;
  box-shadow:var(--shadow);
}
.btn-accent:hover{ background:var(--accent-strong); }
.btn-ghost{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.5rem .8rem;
  border-radius:999px;
  background:var(--brand-soft);
  color:var(--brand-strong);
  font-size:.84rem;
  font-weight:700;
  border:1px solid rgba(63,125,95,.12);
}

.section{
  padding:1.2rem 0 3rem;
}

h1,h2,h3,h4{
  margin:0;
  line-height:1.05;
  letter-spacing:-.04em;
}

p{ margin:.4rem 0 0; }
.muted{ color:var(--muted); }

.panel{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.7);
  border-radius:24px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:1rem;
  margin-bottom:1rem;
}

.section-head h2{
  font-size:clamp(1.5rem, 3vw, 2.2rem);
}

.hero-grid{
  display:grid;
  gap:1rem;
  align-items:center;
}

.hero-copy{
  padding:1.25rem;
}

.hero-copy h1{
  font-size:clamp(2.3rem, 8vw, 5.2rem);
  margin:.8rem 0 1rem;
}

.hero-copy .lead{
  font-size:clamp(1rem, 2.3vw, 1.18rem);
  color:var(--muted);
  max-width:60ch;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.15rem;
}

.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1rem;
}

.meta-chip{
  padding:.52rem .8rem;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:.92rem;
}

.hero-visual{
  padding:.9rem;
}

.hero-image{
  min-height:340px;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  background:#dfe9e3 center/cover no-repeat;
}

.hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(23,33,27,.04), rgba(23,33,27,.35));
}

.floating-card{
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:1rem;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1rem;
  backdrop-filter: blur(10px);
  box-shadow:var(--shadow);
  z-index:1;
}

.search-panel{
  padding:1rem;
}

.search-grid{
  display:grid;
  gap:.8rem;
}

.field{
  display:grid;
  gap:.4rem;
}

.field label{
  font-size:.92rem;
  font-weight:700;
}

.field input, .field select{
  width:100%;
  min-height:48px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:14px;
  padding:0 .95rem;
}

.cards{
  display:grid;
  gap:1rem;
}

.recipe-card{
  background:var(--surface-strong);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:.2s ease;
}

.recipe-card:hover{ transform:translateY(-3px); }

.recipe-image{
  position:relative;
  aspect-ratio:16/11;
  background-color:#dfe9e3;
  overflow:hidden;
  border-radius:0;
}

.recipe-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.recipe-card-image-placeholder{
  position:absolute;
  inset:0;
  background-image:url('/images/backgrounds/vector-1758089442899-86183f881597.png');
  background-size:cover;
  background-position:center;
  opacity:0.25;
}

.recipe-body{
  padding:1rem;
}

.recipe-top{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.55rem;
}

.recipe-title{
  font-size:1.08rem;
  letter-spacing:-.02em;
}

.tag{
  display:inline-flex;
  padding:.35rem .65rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  background:var(--brand-soft);
  color:var(--brand-strong);
}

.recipe-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  color:var(--muted);
  font-size:.88rem;
  margin-top:.85rem;
}

.collection-grid{
  display:grid;
  gap:1rem;
}

.collection{
  min-height:220px;
  position:relative;
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.7);
  background-position:center;
  background-size:cover;
  background-color:#dfe9e3;
  cursor:pointer;
}

.collection::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(23,33,27,.08), rgba(23,33,27,.72));
}

.collection-content{
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:1rem;
  z-index:1;
  color:#fff;
}

.collection-content h3{
  font-size:1.3rem;
  margin-bottom:.35rem;
}

.about{
  display:grid;
  gap:1rem;
  align-items:start;
}

.about-card{
  padding:1.2rem;
}

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  color:var(--muted);
  font-size:.92rem;
  margin-bottom:1rem;
}

.breadcrumbs span::after{
  content:"/";
  margin-left:.55rem;
  opacity:.5;
}

.breadcrumbs span:last-child::after{ display:none; }

.listing-layout{
  display:grid;
  gap:1rem;
}

.filters{
  padding:1rem;
  height:max-content;
  position:relative;
}

.filter-group{
  display:grid;
  gap:.65rem;
  margin-bottom:1rem;
}

.check-list{
  display:grid;
  gap:.5rem;
  color:var(--muted);
  font-size:.95rem;
  max-height:220px;
  overflow:auto;
  padding-right:.25rem;
}

.results-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.sort-row{
  display:flex;
  gap:.75rem;
  align-items:center;
  flex-wrap:wrap;
}

.sort-row select{
  min-height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  padding:0 .8rem;
  background:#fff;
}

.recipe-hero{
  display:grid;
  gap:1rem;
  align-items:start;
}

.recipe-main-image{
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.7);
  background:#dfe9e3;
}

.recipe-main-image img{
  display:block;
  width:100%;
  height:auto;
}

.recipe-image-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:300px;
  border-radius:24px;
  background-image:url('/images/backgrounds/vector-1758089442899-86183f881597.png');
  background-size:cover;
  background-position:center;
  opacity:0.25;
  position:relative;
}

.recipe-image-placeholder span{
  position:relative;
  z-index:1;
  text-align:center;
  font-size:1.1rem;
  color:#666;
  padding:1rem;
}

.recipe-summary{
  padding:1.2rem;
}

.recipe-summary h1{
  font-size:clamp(2rem, 6vw, 3.6rem);
  margin:.75rem 0 .85rem;
}

.summary-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin:1rem 0 1.2rem;
}

.summary-meta .meta-chip{
  color:var(--text);
}

.action-row{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1rem;
}

.content-layout{
  display:grid;
  gap:1rem;
  margin-top:1rem;
}

.ingredients-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
  margin-bottom:.8rem;
}

.servings-control{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}

.servings-control button{
  width:36px;
  height:36px;
  border:none;
  border-radius:999px;
  background:var(--brand-soft);
  color:var(--brand-strong);
  cursor:pointer;
  font-weight:900;
  transition:.2s ease;
}

.servings-control button:hover{
  background:var(--brand);
  color:#fff;
}

.servings-value{
  min-width:44px;
  text-align:center;
  font-weight:800;
  padding:0 .55rem;
}

.recipe-notes-inline{
  margin-top:.75rem;
  display:grid;
  gap:.75rem;
}

.note-card{
  padding:1rem;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,248,246,.82));
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}

.note-card strong{
  display:block;
  margin-bottom:.2rem;
  font-size:.98rem;
}

.hero-subgrid{
  display:grid;
  gap:1rem;
  margin-top:1rem;
}

.summary-details-card{
  padding:1.15rem;
}

.nav-left{
  display:flex;
  align-items:center;
  gap:.7rem;
}

.brand-title{
  display:block;
  font-size:1rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:46vw;
}

.content-card{
  padding:1.15rem;
}

.ingredients-list,
.instructions-list{
  display:grid;
  gap:.8rem;
  margin-top:1rem;
}

.ingredient-item{
  display:flex;
  gap:.8rem;
  align-items: center;
  padding: 0.95rem 1rem;
  background: var(--surface-strong);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.ingredient-main {
  display: block;
  font-size: 1rem;
}


.ingredient-group.is-recipe {
  display: grid;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.ingredient-sublist {
  margin-top: 0.45rem;
  padding: 0.85rem 0.9rem 0.95rem;
  border-radius: 16px;
  display: grid;
  gap: 0.65rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

 .ingredient-subhead {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 0.8rem;
   padding-bottom: 0.35rem;
   border-bottom: 1px solid var(--line);
   font-size: 0.92rem;
}

.ingredient-subhead > div {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.ingredient-subhead strong {
  font-size: 0.85rem;
  color: var(--text);
}

.ingredient-subhead-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ingredient-subhead small {
  display: block;
  color: var(--muted);
  margin-top: 0.15rem;
}

.ingredient-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.5rem;
  padding-left: 2.1rem;
}


.ingredient-link {
  font-size: 0.92rem;
  color: #35553c;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
}

.ingredient-link:hover {
  text-decoration: underline;
}

.ingredient-subitems {
  display: grid;
  gap: 0.45rem;
}

.ingredient-subitem {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.9rem;
}

.sub-bullet {
  width: 20px;
  height: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sub-bullet::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3f7d5f;
}

.instruction-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.8rem;
  align-items:start;
  padding:.9rem;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius:18px;
}

.step-num{
  width:34px;
  height:34px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:.92rem;
  flex:0 0 auto;
}

.nutrition-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.75rem;
  margin-top:1rem;
}

.nutrition-item{
  padding:.85rem;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
}

.status{
  padding:.9rem 1rem;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.7);
  color:var(--muted);
}

.status.error{
  color:var(--warning);
  border-color: rgba(182,72,72,.22);
  background: rgba(182,72,72,.06);
}

.hidden{ display:none !important; }

footer{
  padding:2rem 0 3rem;
  color:var(--muted);
}

.footer-wrap{
  display:grid;
  gap:1rem;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.page{ display:none; }
.page.active{ display:block; }

@media (min-width: 768px){
  .desktop-nav{ display:flex; }
  .menu-toggle{ display:none; }

  .hero-grid{ grid-template-columns:1.06fr .94fr; }
  .hero-copy{ padding:2rem; }

  .search-grid{
    grid-template-columns:2fr 1fr 1fr auto;
    align-items:end;
  }

  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .collection-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .about{ grid-template-columns:1.1fr .9fr; }

  .listing-layout{
    grid-template-columns:300px 1fr;
    align-items:start;
  }

  .recipe-hero{ grid-template-columns:1fr 1fr; }

  .hero-subgrid{ grid-template-columns:1fr 1fr; }

  .content-layout{
    grid-template-columns:minmax(0, .92fr) minmax(300px, .55fr);
    align-items:start;
  }

  .footer-wrap{
    grid-template-columns:1fr auto;
    align-items:center;
  }
}

@media (min-width: 1100px){
  .cards{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ============================================
   Blog Page Styles
   ============================================ */

.tag-filters{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-bottom:1.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
}

.tag-filter-btn{
  padding:.55rem 1rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-strong);
  color:var(--muted);
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  transition:.2s ease;
}

.tag-filter-btn:hover{
  border-color:var(--brand);
  color:var(--brand);
  background:var(--brand-soft);
}

.tag-filter-btn.active{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  box-shadow:var(--shadow-sm);
}

/* ============================================
   Blog Listing Page Styles
   ============================================ */

.blog-grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns:1fr;
}

.blog-card{
  background:var(--surface-strong);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:.2s ease;
}

.blog-card:hover{
  transform:translateY(-3px);
}

.blog-card-image{
  aspect-ratio:16/9;
  background-position:center;
  background-size:cover;
  background-color:#dfe9e3;
  position:relative;
}

.blog-card-category{
  position:absolute;
  top:.85rem;
  left:.85rem;
  padding:.4rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--brand-strong);
  font-size:.78rem;
  font-weight:800;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7);
}

.blog-card-body{
  padding:1.15rem;
}

.blog-card-title{
  font-size:1.15rem;
  letter-spacing:-.02em;
  line-height:1.2;
  margin-bottom:.4rem;
}

.blog-card-date{
  color:var(--muted);
  font-size:.85rem;
  margin-bottom:.75rem;
}

.blog-card-desc{
  color:var(--text);
  font-size:.95rem;
  line-height:1.55;
  margin:0;
}

.blog-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.9rem;
}

.blog-tag{
  display:inline-flex;
  align-items:center;
  padding:.3rem .6rem;
  border-radius:999px;
  background:var(--brand-soft);
  color:var(--brand-strong);
  font-size:.75rem;
  font-weight:700;
}

/* ============================================
   Blog Post Detail Page — Editorial Layout
   ============================================ */

.blog-post-page {
  padding-top: .8rem;
}

.blog-post-container {
  max-width: 1120px;
}

.blog-breadcrumbs {
  margin-bottom: 1.5rem;
  font-size: .84rem;
  color: rgba(98,112,102,.82);
  gap: .4rem;
  justify-content: center;
}

.blog-breadcrumbs span::after {
  margin-left: .4rem;
  opacity: .35;
}

.blog-breadcrumbs a:hover {
  color: var(--brand);
}

/* The Unified Card Container */
.blog-post-card {
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

/* Inner padding for the text content */
.blog-post-content {
  padding: 1.5rem;
  background: var(--surface-strong);
  border-radius: inherit;
}

/* Header Styling */
.blog-post-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  margin: 0 0 1.25rem 0;
}

/* Author and Date Row */
.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--muted);
}

.blog-post-author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  background-color: #dfe9e3;
}

.author-name {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
}

.blog-post-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 36px;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  font-size: .88rem;
  font-weight: 600;
}

/* The Hook / Lead Paragraph */
.blog-post-lead {
  margin: 0;
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--muted);
  font-weight: 500;
}

/* Inline Editorial Image */
.blog-post-inline-image {
  margin: 2.5rem 0;
}

.blog-post-inline-image img {
  width: 100%;
  height: auto;
  border-radius: 16px; /* Softens the sharp corners */
  box-shadow: var(--shadow-sm);
  display: block;
}

/* Typography for the Markdown Body */
.blog-post-body > *:first-child { margin-top: 0 !important; }
.blog-post-body > *:last-child { margin-bottom: 0 !important; }

/* Hide redundant H1s from markdown */
.blog-post-body h1:first-child { display: none; }

.blog-post-body h1,
.blog-post-body h2,
.blog-post-body h3,
.blog-post-body h4 {
  letter-spacing: -.03em;
  line-height: 1.14;
  margin-top: 1.75em;
  margin-bottom: .75em;
}

.blog-post-body h1 { font-size: clamp(1.95rem, 4vw, 2.45rem); }
.blog-post-body h2 { font-size: clamp(1.65rem, 3.5vw, 2.1rem); }
.blog-post-body h3 { font-size: clamp(1.35rem, 2.5vw, 1.6rem); }
.blog-post-body h4 { font-size: 1.15rem; }

.blog-post-body p,
.blog-post-body ul,
.blog-post-body ol,
.blog-post-body table,
.blog-post-body blockquote,
.blog-post-body pre {
  margin-bottom: 1.4rem;
}

.blog-post-body p,
.blog-post-body li {
  font-size: 1.08rem;
  line-height: 1.8;
  color: #17211b; /* Slightly darker for optimal reading */
}

.blog-post-body ul,
.blog-post-body ol { padding-left: 1.3rem; }
.blog-post-body li + li { margin-top: .5rem; }

.blog-post-body blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--brand);
  background: linear-gradient(180deg, rgba(230,242,234,.68), rgba(255,255,255,.78));
  border-radius: 0 18px 18px 0;
  color: var(--muted);
  font-style: italic;
  font-size: 1.15rem;
}

/* Embedded standard images in markdown */
.blog-post-body img {
  border-radius: 16px;
  margin: 2rem 0;
  box-shadow: var(--shadow-sm);
}

.blog-post-body a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-color: rgba(63,125,95,.28);
  text-underline-offset: 2px;
}

.blog-post-body a:hover {
  color: var(--brand-strong);
  text-decoration-color: var(--brand);
}

/* Footer Tags */
.blog-post-footer-tags {
  margin-top: 3rem;
}

.blog-post-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin-bottom: 1.5rem;
}

.tags-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.blog-post-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.blog-post-footer {
  display: flex;
  justify-content: center;
  padding-top: 2.5rem;
}

/* Desktop sizing adjustments */
@media (min-width: 768px) {
  .blog-post-page { padding-top: 1rem; }
  .blog-post-content { padding: 3rem; }
  .blog-post-header h1 { max-width: 22ch; } /* Prevents ultra-wide titles */
}

@media (min-width: 1024px) {
  .blog-post-content { padding: 4rem; }
}

/* Navigation search input */
.nav-search {
  display: none;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 .8rem;
  width: 200px;
}

.nav-search.visible {
  display: block;
}

/* Error page styles */
.error-panel {
  padding: 2rem;
  text-align: center;
  max-width: 600px;
  margin: 3rem auto;
}

.error-pill {
  background: rgba(182, 72, 72, .1);
  color: var(--warning);
  border-color: rgba(182, 72, 72, .22);
}

.error-title {
  margin: 1.5rem 0 1rem;
  font-size: 2rem;
}

.error-message {
  font-size: 1.1rem;
}

.error-actions {
  margin-top: 2rem;
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.blog-no-results{
  text-align:center;
  padding:3rem 1rem;
  color:var(--muted);
}

/* Responsive: Tablet - 2 columns */
@media (min-width: 640px){
  .blog-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* Responsive: Desktop - 4 columns */
@media (min-width: 1100px){
  .blog-grid{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }
}

/* ============================================
   Live Search Dropdown
   Mobile-first, desktop enhancements
   ============================================ */

/* Search wrapper - positions the dropdown */
.nav-search-wrapper {
  position: relative;
}

/* Dropdown container - Mobile: full width, anchored to topbar */
.search-dropdown {
  display: none;
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  overflow: hidden;
  max-height: calc(100vh - 72px - 1rem);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.search-dropdown.active {
  display: block;
}

/* Desktop: constrain width, 1.5x larger */
@media (min-width: 640px) {
  .search-dropdown {
    position: absolute;
    left: auto;
    right: 0;
    top: calc(100% + 8px);
    width: 510px;
    max-width: calc(100vw - 2rem);
    border-radius: var(--radius);
    max-height: 570px;
    overflow-y: auto;
  }
}

/* Search result item - 1.5x larger on desktop */
.search-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
  color: inherit;
}

@media (min-width: 640px) {
  .search-item {
    gap: 1.125rem;
    padding: 0.9rem 1.275rem;
  }
}

.search-item:last-child {
  border-bottom: none;
}

.search-item:hover,
.search-item:focus,
.search-item.selected {
  background: var(--brand-soft);
  outline: none;
}

/* Recipe thumbnail */
.search-item-img {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
}

@media (min-width: 640px) {
  .search-item-img {
    width: 110px;
    height: 110px;
  }
}

/* Fallback for missing images - grey circle */
.search-item-img[src=""],
.search-item-img:not([src]) {
  background: var(--muted);
  opacity: 0.4;
}

/* Recipe info */
.search-item-info {
  flex: 1;
  min-width: 0;
}

.search-item-name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.search-item-desc {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.15rem;
}

/* Loading state */
.search-loading {
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}

/* No results state */
.search-no-results {
  padding: 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}

/* Scrollbar styling for dropdown */
.search-dropdown::-webkit-scrollbar {
  width: 6px;
}

.search-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.search-dropdown::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

.search-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}