/* ============================================================
   FoodCMS – Frontend CSS  (stile Giallo Zafferano)
   ============================================================ */
:root {
  --orange:   #e67e22;
  --orange-d: #cf6d17;
  --dark:     #1a1a1a;
  --text:     #333;
  --muted:    #777;
  --border:   #e8e8e8;
  --cream:    #fef9f4;
  --white:    #fff;
  --radius:   12px;
  --shadow:   0 4px 24px rgba(0,0,0,.08);
  --header-h: 70px;
  --font-body: 'Lato', sans-serif;
  --font-head: 'Playfair Display', serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); color:var(--text); background:var(--white); line-height:1.7; font-size:16px; }

/* ── Utility ── */
.container { max-width:1180px; margin:0 auto; padding:0 1.5rem; }
.skip-link { position:absolute; transform:translateY(-100%); background:var(--orange); color:#fff; padding:.5rem 1rem; border-radius:0 0 8px 8px; transition:.2s; }
.skip-link:focus { transform:translateY(0); }
.btn { display:inline-flex; align-items:center; gap:.5rem; background:var(--orange); color:#fff; padding:.6rem 1.25rem; border-radius:var(--radius); font-weight:700; font-size:.875rem; border:none; cursor:pointer; text-decoration:none; transition:.2s; font-family:var(--font-body); }
.btn:hover { background:var(--orange-d); transform:translateY(-1px); }
.btn-primary { background:var(--orange); }
.text-muted { color:var(--muted); }
.prose { line-height:1.8; }
.prose h2,.prose h3,.prose h4 { font-family:var(--font-head); margin:2rem 0 .75rem; }
.prose p { margin-bottom:1.25rem; }
.prose img { max-width:100%; border-radius:var(--radius); }
.prose ul,.prose ol { padding-left:1.5rem; margin-bottom:1.25rem; }
.prose blockquote { border-left:4px solid var(--orange); padding:1rem 1.5rem; background:var(--cream); border-radius:0 var(--radius) var(--radius) 0; margin:1.5rem 0; font-style:italic; }

/* ── PWA banner ── */
.pwa-install-banner { position:fixed; bottom:0; left:0; right:0; background:var(--dark); color:#fff; z-index:9999; padding:.75rem 1.5rem; }
.pwa-banner-content { display:flex; align-items:center; gap:1rem; max-width:600px; margin:0 auto; }
.pwa-banner-content span { flex:1; font-size:.9rem; }
.btn-pwa-install { background:var(--orange); color:#fff; border:none; padding:.5rem 1.25rem; border-radius:8px; font-weight:700; cursor:pointer; font-family:inherit; }
.btn-pwa-dismiss { background:none; border:none; color:#aaa; font-size:1.4rem; cursor:pointer; }

/* ── Header ── */
.site-header { position:sticky; top:0; z-index:1000; background:var(--white); border-bottom:1px solid var(--border); height:var(--header-h); }
.header-inner { height:100%; display:flex; align-items:center; gap:2rem; }
.site-logo { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.logo-icon { font-size:1.6rem; color:var(--orange); }
.logo-text { font-family:var(--font-head); font-size:1.4rem; color:var(--dark); font-weight:700; }
.logo-tagline { font-size:.75rem; color:var(--muted); display:none; }
.site-nav { display:flex; align-items:center; gap:.25rem; margin-left:auto; }
.nav-item-wrap { position:relative; }
.nav-link { display:flex; align-items:center; gap:.3rem; padding:.5rem .9rem; border-radius:8px; text-decoration:none; color:var(--text); font-weight:600; font-size:.9rem; transition:.2s; }
.nav-link:hover { color:var(--orange); background:var(--cream); }
.nav-arrow { font-size:.65rem; transition:.2s; }
.has-dropdown:hover .nav-arrow { transform:rotate(180deg); }
.dropdown { display:none; position:absolute; top:calc(100% + .5rem); left:0; min-width:200px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; z-index:500; }
.has-dropdown:hover .dropdown { display:block; }
.dropdown li { list-style:none; }
.dropdown a { display:block; padding:.7rem 1.25rem; color:var(--text); text-decoration:none; font-size:.9rem; transition:.15s; }
.dropdown a:hover { background:var(--cream); color:var(--orange); }
.header-actions { display:flex; align-items:center; gap:.5rem; margin-left:1rem; }
.header-search-toggle,.nav-toggle { background:none; border:none; cursor:pointer; width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text); font-size:1rem; transition:.2s; }
.header-search-toggle:hover,.nav-toggle:hover { background:var(--cream); color:var(--orange); }
.nav-toggle { display:none; }
.site-search-bar { background:var(--cream); border-top:1px solid var(--border); padding:1rem 0; }
.search-form { display:flex; gap:.5rem; }
.search-form input { flex:1; padding:.7rem 1.2rem; border:2px solid var(--border); border-radius:var(--radius); font-size:.95rem; font-family:inherit; }
.search-form input:focus { outline:none; border-color:var(--orange); }
.search-form button { background:var(--orange); color:#fff; border:none; padding:.7rem 1.25rem; border-radius:var(--radius); cursor:pointer; font-size:.95rem; }

/* ── Hero ── */
.hero-section { background:linear-gradient(135deg, #fff8f0 0%, #fef3e2 100%); padding:5rem 0; text-align:center; }
.hero-title { font-family:var(--font-head); font-size:clamp(2.5rem,5vw,4rem); color:var(--dark); margin-bottom:.75rem; }
.hero-subtitle { color:var(--muted); font-size:1.15rem; margin-bottom:2.5rem; }
.hero-search { display:flex; max-width:560px; margin:0 auto; gap:.5rem; }
.hero-search input { flex:1; padding:.9rem 1.5rem; border:2px solid var(--border); border-radius:100px; font-size:1rem; font-family:inherit; }
.hero-search input:focus { outline:none; border-color:var(--orange); }
.hero-search button { background:var(--orange); color:#fff; border:none; padding:.9rem 1.75rem; border-radius:100px; font-weight:700; cursor:pointer; font-family:inherit; transition:.2s; }
.hero-search button:hover { background:var(--orange-d); }

/* ── Category pills ── */
.category-pills-section { padding:2rem 0; }
.category-pills { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.category-pill { padding:.5rem 1.25rem; border-radius:100px; background:var(--cream); color:var(--text); text-decoration:none; font-size:.875rem; font-weight:600; border:2px solid var(--border); transition:.2s; }
.category-pill:hover { background:var(--orange); color:#fff; border-color:var(--orange); }

/* ── Section ── */
.section { padding:4rem 0; }
.section-title { font-family:var(--font-head); font-size:1.9rem; margin-bottom:2rem; position:relative; }
.section-title::after { content:''; display:block; width:50px; height:3px; background:var(--orange); border-radius:2px; margin-top:.5rem; }

/* ── Post card (grid) ── */
.posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.posts-grid.featured { grid-template-columns:2fr 1fr; }
.posts-grid.featured .post-card:first-child { grid-row:span 2; }
.post-card { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--white); transition:.25s; display:flex; flex-direction:column; }
.post-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.12); }
.post-card-img-wrap { overflow:hidden; aspect-ratio:16/9; }
.post-card-img-wrap img { width:100%; height:100%; object-fit:cover; transition:.4s; }
.post-card:hover .post-card-img-wrap img { transform:scale(1.05); }
.post-card-body { padding:1.25rem; flex:1; display:flex; flex-direction:column; }
.post-cat { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--orange); text-decoration:none; }
.post-card-title { font-family:var(--font-head); font-size:1.15rem; margin:.4rem 0 .75rem; line-height:1.3; }
.post-card-title a { color:var(--dark); text-decoration:none; }
.post-card-title a:hover { color:var(--orange); }
.post-card-excerpt { color:var(--muted); font-size:.875rem; line-height:1.6; flex:1; }
.post-card-meta { margin-top:1rem; font-size:.8rem; color:var(--muted); display:flex; gap:1rem; }

/* ── Blog layout ── */
.blog-layout { display:grid; grid-template-columns:1fr 300px; gap:3rem; }
.blog-main { min-width:0; }
.blog-sidebar { position:sticky; top:calc(var(--header-h) + 1rem); height:fit-content; }

/* ── Post list item ── */
.post-list-item { display:grid; grid-template-columns:240px 1fr; gap:1.5rem; padding:2rem 0; border-bottom:1px solid var(--border); }
.post-list-img { border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.post-list-img img { width:100%; height:100%; object-fit:cover; transition:.3s; }
.post-list-item:hover .post-list-img img { transform:scale(1.03); }
.post-list-body { display:flex; flex-direction:column; }
.post-list-title { font-family:var(--font-head); font-size:1.35rem; margin:.4rem 0 .75rem; line-height:1.3; }
.post-list-title a { color:var(--dark); text-decoration:none; }
.post-list-title a:hover { color:var(--orange); }
.post-list-excerpt { color:var(--muted); line-height:1.7; flex:1; }
.post-list-meta { font-size:.8rem; color:var(--muted); display:flex; gap:1.25rem; margin-top:.75rem; }
.read-more { align-self:flex-start; margin-top:.75rem; color:var(--orange); font-weight:700; font-size:.875rem; text-decoration:none; }
.read-more:hover { gap:.75rem; }

/* ── Sidebar widgets ── */
.sidebar-widget { background:var(--white); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); margin-bottom:1.5rem; }
.widget-title { font-family:var(--font-head); font-size:1.1rem; margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:2px solid var(--orange); }
.widget-post { display:grid; grid-template-columns:70px 1fr; gap:.75rem; margin-bottom:1rem; }
.widget-post img { width:70px; height:56px; object-fit:cover; border-radius:8px; }
.widget-post a { font-size:.875rem; color:var(--dark); text-decoration:none; line-height:1.4; font-weight:600; }
.widget-post a:hover { color:var(--orange); }
.widget-cats { list-style:none; }
.widget-cats li { border-bottom:1px solid var(--border); }
.widget-cats a { display:flex; justify-content:space-between; padding:.5rem 0; color:var(--text); text-decoration:none; font-size:.9rem; transition:.2s; }
.widget-cats a:hover { color:var(--orange); }
.widget-cats span { background:var(--cream); border-radius:100px; padding:.1rem .6rem; font-size:.75rem; }

/* ── Single post ── */
.single-container { padding:2rem 1.5rem; }
.single-layout { display:grid; grid-template-columns:1fr 300px; gap:3rem; }
.breadcrumb { font-size:.85rem; color:var(--muted); margin-bottom:1rem; display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; }
.breadcrumb a { color:var(--orange); text-decoration:none; }
.single-title { font-family:var(--font-head); font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.2; margin:.5rem 0 1.25rem; }
.single-meta { display:flex; flex-wrap:wrap; gap:1.25rem; font-size:.875rem; color:var(--muted); margin-bottom:1.25rem; }
.single-meta span { display:flex; align-items:center; gap:.3rem; }
.post-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.post-tag { padding:.25rem .75rem; background:var(--cream); border-radius:100px; font-size:.8rem; color:var(--text); text-decoration:none; border:1px solid var(--border); transition:.2s; }
.post-tag:hover { background:var(--orange); color:#fff; border-color:var(--orange); }
.single-featured-img { margin-bottom:2rem; }
.single-featured-img img { width:100%; border-radius:var(--radius); max-height:500px; object-fit:cover; }
.single-content { margin-bottom:2.5rem; }
.share-box { display:flex; align-items:center; gap:.75rem; padding:1.5rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:2rem; }
.share-btn { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; font-size:.9rem; transition:.2s; }
.share-btn:hover { transform:scale(1.1); }
.share-fb  { background:#1877f2; }
.share-tw  { background:#000; }
.share-pin { background:#e60023; }
.share-wa  { background:#25d366; }
.author-box { display:flex; gap:1.5rem; padding:2rem; background:var(--cream); border-radius:var(--radius); margin-bottom:2.5rem; }
.author-avatar { width:80px; height:80px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.author-avatar img { width:100%; height:100%; object-fit:cover; }
.author-initials { background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700; }
.author-info .author-label { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.author-info strong { display:block; font-family:var(--font-head); font-size:1.1rem; margin:.2rem 0 .5rem; }
.related-posts { margin-bottom:2.5rem; }
.related-posts h3 { font-family:var(--font-head); font-size:1.5rem; margin-bottom:1.25rem; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.related-item { border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--text); transition:.2s; }
.related-item:hover { transform:translateY(-3px); }
.related-item img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.related-item span { display:block; padding:.75rem; font-size:.85rem; font-weight:600; background:var(--white); border:1px solid var(--border); border-top:none; border-radius:0 0 var(--radius) var(--radius); }

/* ── Comments ── */
.comments-section { margin-top:2rem; }
.comments-title { font-family:var(--font-head); font-size:1.5rem; margin-bottom:1.5rem; }
.comment { display:flex; gap:1rem; margin-bottom:1.5rem; }
.comment-avatar { width:44px; height:44px; border-radius:50%; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; flex-shrink:0; }
.comment-body { flex:1; }
.comment-meta { display:flex; gap:1rem; align-items:baseline; margin-bottom:.5rem; }
.comment-meta strong { font-weight:700; }
.comment-meta span { font-size:.8rem; color:var(--muted); }
.comment-form-wrap { margin-top:2.5rem; padding:2rem; background:var(--cream); border-radius:var(--radius); }
.comment-form-wrap h3 { font-family:var(--font-head); font-size:1.3rem; margin-bottom:1.5rem; }
.comment-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-size:.85rem; font-weight:600; margin-bottom:.4rem; }
.form-control { width:100%; padding:.7rem 1rem; border:2px solid var(--border); border-radius:var(--radius); font-family:inherit; font-size:.95rem; background:var(--white); transition:.2s; }
.form-control:focus { outline:none; border-color:var(--orange); }

/* ── Pagination ── */
.pagination { display:flex; gap:.5rem; margin-top:2.5rem; }
.pagination a { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; border:2px solid var(--border); color:var(--text); text-decoration:none; font-weight:600; transition:.2s; }
.pagination a:hover,.pagination a.active { background:var(--orange); border-color:var(--orange); color:#fff; }

/* ── Archive header ── */
.archive-header { padding:3rem 0 2rem; border-bottom:2px solid var(--border); margin-bottom:2rem; }
.archive-header h1 { font-family:var(--font-head); font-size:2.2rem; }

/* ── Footer ── */
.site-footer { background:#1a1a1a; color:#ccc; padding:4rem 0 0; margin-top:5rem; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:3rem; margin-bottom:3rem; }
.footer-logo { display:flex; align-items:center; gap:.75rem; font-family:var(--font-head); font-size:1.4rem; color:#fff; text-decoration:none; margin-bottom:1rem; }
.footer-logo i { color:var(--orange); }
.footer-about p { font-size:.875rem; line-height:1.7; }
.footer-title { font-family:var(--font-head); color:#fff; font-size:1rem; margin-bottom:1.25rem; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:.5rem; }
.footer-links a { color:#aaa; text-decoration:none; font-size:.875rem; transition:.2s; }
.footer-links a:hover { color:var(--orange); }
.footer-links span { color:#666; }
.newsletter-form { display:flex; gap:.5rem; }
.newsletter-form input { flex:1; background:#333; border:none; border-radius:8px; padding:.7rem 1rem; color:#fff; font-family:inherit; font-size:.875rem; }
.newsletter-form button { background:var(--orange); color:#fff; border:none; padding:.7rem 1rem; border-radius:8px; cursor:pointer; }
.social-links { display:flex; gap:.75rem; }
.social-btn { width:36px; height:36px; border-radius:50%; background:#333; color:#ccc; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:.85rem; transition:.2s; }
.social-btn:hover { background:var(--orange); color:#fff; }
.btn-pwa-footer { background:var(--orange); color:#fff; border:none; padding:.6rem 1.25rem; border-radius:8px; font-weight:700; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:.5rem; margin-top:.75rem; }
.footer-bottom { border-top:1px solid #333; padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:.875rem; }
.footer-bottom-links { display:flex; gap:1.5rem; }
.footer-bottom-links a { color:#aaa; text-decoration:none; font-size:.875rem; transition:.2s; }
.footer-bottom-links a:hover { color:var(--orange); }

/* ── Back to top ── */
.back-to-top { position:fixed; bottom:2rem; right:2rem; width:44px; height:44px; background:var(--orange); color:#fff; border:none; border-radius:50%; cursor:pointer; display:none; align-items:center; justify-content:center; z-index:999; box-shadow:0 4px 16px rgba(230,126,34,.4); transition:.2s; }
.back-to-top.visible { display:flex; }
.back-to-top:hover { background:var(--orange-d); transform:translateY(-2px); }

/* ── Responsive ── */
@media (max-width:1024px) {
  .blog-layout,.single-layout { grid-template-columns:1fr; }
  .blog-sidebar,.single-sidebar { position:static; }
  .posts-grid { grid-template-columns:1fr 1fr; }
  .posts-grid.featured { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .nav-toggle { display:flex; }
  .site-nav { display:none; position:absolute; top:var(--header-h); left:0; right:0; background:var(--white); border-top:1px solid var(--border); padding:1rem; flex-direction:column; box-shadow:0 8px 24px rgba(0,0,0,.1); }
  .site-nav.open { display:flex; }
  .dropdown { position:static; box-shadow:none; border:none; background:var(--cream); }
  .post-list-item { grid-template-columns:1fr; }
  .comment-form-row,.related-grid { grid-template-columns:1fr; }
  .hero-search { flex-direction:column; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:480px) {
  .posts-grid { grid-template-columns:1fr; }
}

/* ── Notice ── */
.notice { padding:1rem 1.25rem; border-radius:var(--radius); margin-bottom:1.25rem; }
.notice-success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.notice-error { background:#f8d7da; color:#721c24; }