/* -------------------------
   Complete styles.css
   Combines site-wide theme, header/nav, about centering,
   recipes grid, and restored index post layout
   ------------------------- */

/* Reset / base */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg: #0f1720;
  --panel: #0b1318;
  --muted-panel: #0e1a22;
  --text: #e6eef6;
  --muted: #9fb0c0;
  --accent: #e67e22;
  --card-radius: 12px;
  --container-max: 1200px;
  --gap: 1rem;
  --footer-height: 90px;
  --focus: 3px solid rgba(230,126,34,0.18);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.45);
}

/* Page + typography */
html, body { height: 100%; }
body{
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: calc(var(--footer-height) + 12px); /* space for fixed footer */
}

/* Layout container */
.container{
  width: 92%;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Header */
header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.header-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 18px 0;
}
.site-title{
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}

/* Navigation */
nav{ }
.nav-links{
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: center;
}
.nav-links a{
  display: inline-block;
  padding: 8px 10px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  border-radius: 8px;
  transition: color 120ms ease, background 120ms ease, transform 120ms ease;
}
.nav-links a:hover,
.nav-links a:focus{ color: var(--text); background: rgba(255,255,255,0.02); transform: translateY(-1px); outline: none; }
.nav-links a:focus-visible{ box-shadow: var(--focus); border-radius: 8px; }
.nav-links a.active{
  color: white;
  background: linear-gradient(90deg, rgba(230,126,34,0.12), rgba(230,126,34,0.06));
  box-shadow: 0 4px 18px rgba(230,126,34,0.06);
}

/* Main area spacing */
main{ padding: 28px 0; }

/* ---------------------------
   Index post layout (mobile-first)
   stacked images then text, side-by-side on wide screens
   --------------------------- */
.post {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column; /* stack images then text by default */
  gap: 0;
}

/* Thumbnail block: grid of small images */
.post .images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  padding: 12px;
  background: rgba(255,255,255,0.01);
}
.post .images img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  box-shadow: var(--shadow-md);
}

/* Text column below thumbnails on mobile */
.post .text {
  padding: 16px 18px;
  background: transparent;
}
.post h2 {
  font-size: 1.125rem;
  color: var(--text);
  margin-bottom: 8px;
}
.post p { color: var(--muted); }

/* Wider screens: images left, text right */
@media (min-width: 880px) {
  .post {
    display: grid;
    grid-template-columns: 340px 1fr; /* left column for images, right for text */
    gap: 18px;
    align-items: start;
  }
  .post .images {
    padding: 16px;
    grid-template-columns: repeat(2, 1fr); /* two-column thumbnails in left column */
    height: auto;
  }
  .post .images img { height: 120px; }
  .post .text { padding: 20px; }
}

/* ---------------------------
   Recipes grid
   --------------------------- */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 12px;
}
.recipe{
  padding: 16px;
  border-radius: 12px;
  background: var(--muted-panel);
  border: 1px solid rgba(255,255,255,0.02);
  box-shadow: var(--shadow-md);
}
.recipe h2{ font-size: 1.05rem; margin-bottom: 8px; color: var(--text); }
.meta{ color: var(--muted); font-size: 0.92rem; margin-bottom: 8px; }
.desc{ color: var(--muted); font-size: 0.98rem; }

/* ---------------------------
   About page centering (hero)
   --------------------------- */
.hero-wrap{
  min-height: calc(100vh - 78px); /* subtract header height approximation */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 12px;
}
.about-card{
  width: 100%;
  max-width: 760px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: var(--card-radius);
  padding: 36px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.about-card h1{ margin-bottom: 12px; font-size: 1.6rem; color: var(--text); }
.about-card p{ margin: 0 auto; color: var(--muted); font-size: 1.02rem; line-height: 1.65; }

/* ---------------------------
   Thumbnail gallery utility
   --------------------------- */
.images-inline{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

/* ---------------------------
   Footer (fixed)
   --------------------------- */
footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--footer-height);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border-top: 1px solid rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 8px;
}
.adsense-container{
  width: 100%;
  max-width: 970px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Utilities */
.center { text-align: center; }
.kicker{ color: var(--muted); font-size: 0.95rem; margin-bottom: 6px; }

/* Responsive adjustments */
@media (max-width: 880px){
  .header-container{ padding: 14px 0; gap: 8px; }
  .site-title{ font-size: 1.1rem; }
  .post .images { grid-template-columns: repeat(3, 1fr); padding: 12px; }
  .post .images img { height: 96px; }
  .about-card { padding: 24px; }
  .about-card h1 { font-size: 1.35rem; }
  .about-card p { font-size: 1rem; }
}

@media (max-width: 480px){
  .post .images img { height: 84px; border-radius: 6px; }
  .nav-links{ gap: 8px; }
  .nav-links a{ padding: 8px; font-size: 0.95rem; }
  .container{ width: 96%; }
  .about-card{ padding: 18px; border-radius: 10px; }
}