/* Myrtilles Blog Styles - brand aligned */

:root {
  --blueberry: #4A4EAB;
  --garden: #2E7D32;
  --terracotta: #C15A36;
  --honey: #F2C94C;
  --dew: #E0F7FA;
  --cloud: #F5F5F5;
  --ink: #333333;
  --white: #ffffff;
  --muted: #6b7280;
  --maxw: 72rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cloud);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.7;
  font-size: 18px;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid #e5e7eb;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; }
.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--blueberry); font-weight: 700; font-size: 1.1rem; }
.brand-mark { display: inline-block; font-size: 1.25rem; }
.brand-text { letter-spacing: 0.2px; }
.site-nav { display: inline-flex; align-items: center; gap: 1rem; }
.site-nav a { color: var(--ink); text-decoration: none; padding: .4rem .6rem; border-radius: .5rem; }
.site-nav a:hover { background: var(--dew); color: var(--blueberry); }
.site-nav .cta { background: var(--terracotta); color: var(--white); }
.site-nav .cta:hover { background: #a4492b; color: var(--white); }

.content { padding: 2rem 0 4rem; }

.hero { background: linear-gradient(180deg, #ffffff 0%, var(--cloud) 100%); padding: 2rem 1rem; border-radius: 1rem; border: 1px solid #eef2f7; }
.hero h1 { font-size: clamp(1.75rem, 2.5vw, 2.25rem); color: var(--blueberry); margin: 0 0 .5rem; }
.lead { margin: 0; color: var(--muted); }

h1, h2, h3 { color: var(--blueberry); line-height: 1.3; }
h1 { font-size: clamp(1.6rem, 2.2vw, 2rem); margin: 1.5rem 0 .75rem; }
h2 { font-size: clamp(1.35rem, 1.8vw, 1.6rem); margin: 1.25rem 0 .5rem; }
h3 { font-size: clamp(1.15rem, 1.4vw, 1.3rem); margin: 1rem 0 .5rem; }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.4rem; margin: 0 0 1rem; }
li { margin-bottom: .35rem; }
blockquote { margin: 1rem 0; padding: .75rem 1rem; border-left: 4px solid var(--garden); background: #f0faf0; border-radius: .25rem; }
hr { border: none; border-top: 1px solid #e5e7eb; margin: 2rem 0; }

a { color: var(--blueberry); text-underline-offset: 2px; }
a:hover { color: #3a3f95; }

.post { background: var(--white); padding: 2rem; border-radius: 1rem; border: 1px solid #eef2f7; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.post > h1:first-child { margin-top: 0; }
.post-meta { color: var(--muted); font-size: .9rem; }

/* New: meta bar, summary, image placeholders, related */
.meta-bar { display:flex; gap:.5rem; align-items:center; color:var(--muted); font-size:.95rem; margin:.5rem 0 1rem; }
.meta-bar span { white-space:nowrap; }

.summary-card { background: #f7fafc; border:1px solid #e6eef8; border-radius:.75rem; padding:1rem 1.25rem; margin: 1rem 0 1.25rem; }
.summary-card h2 { margin:0 0 .5rem; font-size:1.1rem; color: var(--blueberry); }
.summary-card p { margin:0; color:#374151; }

.image-placeholder { border:2px dashed #cbd5e1; border-radius: .75rem; padding: .75rem; margin: .5rem 0 1rem; background: #ffffff; }
.image-placeholder .ph-box { height: 220px; display:flex; align-items:center; justify-content:center; color:#94a3b8; background: linear-gradient(180deg,#f8fafc,#f1f5f9); border-radius:.5rem; font-weight:600; }
.image-placeholder details.prompt { margin-top:.5rem; }
.image-placeholder pre { white-space:pre-wrap; font-size:.9rem; color:#334155; background:#f8fafc; padding:.75rem; border-radius:.5rem; border:1px solid #e2e8f0; }

.related { margin-top:2rem; }
.related h2 { font-size:1.25rem; margin:0 0 .5rem; color: var(--blueberry); }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin-top: 1rem; }
.post-card { grid-column: span 12; background: var(--white); border: 1px solid #eef2f7; border-radius: .75rem; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 640px) { .post-card { grid-column: span 6; } }
@media (min-width: 980px) { .post-card { grid-column: span 4; } }
.post-title { margin: .25rem 0; font-size: 1.1rem; }
.post-title a { text-decoration: none; color: var(--blueberry); }
.post-title a:hover { text-decoration: underline; }
.post-excerpt { color: var(--ink); opacity: .9; }
.post-link { align-self: flex-start; color: var(--terracotta); text-decoration: none; font-weight: 600; }
.post-link:hover { color: #a4492b; text-decoration: underline; }

.site-footer { background: var(--white); border-top: 1px solid #e5e7eb; }
.footer-inner { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 0; flex-wrap: wrap; }
.footer-nav { display: inline-flex; gap: .75rem; }
.footer-nav a { color: var(--ink); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }

/* Readability */
.post p { text-wrap: pretty; }
.post ul, .post ol { text-wrap: balance; }

/* Accessibility: focus styles */
a:focus { outline: 3px solid var(--honey); outline-offset: 2px; }