/* ===== RESET ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img,video{max-width:100%;display:block}

/* ===== BASE ===== */
body{font-family:Arial,sans-serif;background:#f4f4f4;color:#333;line-height:1.45}
a{color:#0077ff;text-decoration:none}
a:hover{text-decoration:underline}

/* ===== HEADER GLOBAL ===== */
header{background:#1c1c1c;color:#fff;padding:1rem;text-align:center}
header h1{margin:0}
header nav ul{list-style:none;margin:1rem 0 0;padding:0;display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
header nav a{color:#fff;font-weight:700}
header nav a.active{text-decoration:underline}

/* ===== CONTENIDOR GENERIC ===== */
main.content{max-width:960px;margin:2rem auto;padding:0 1rem}
.card{background:#fff;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.08);padding:1rem;margin-bottom:1rem}
.alert{padding:.8rem 1rem;border-radius:8px;margin:1rem 0}
.alert-ok{background:#e8fff1;color:#136c3a;border:1px solid #bfe9cd}
.alert-err{background:#ffecec;color:#7b0c0c;border:1px solid #ffc4c4}

/* ===== SUBMENÚ XARXA ===== */
.xnav{background:#fff;border-bottom:1px solid #e6e6e6}
.xnav-inner{max-width:960px;margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.xnav-search{display:flex;gap:.5rem;align-items:center}
.xnav-search input{height:36px;padding:.4rem .75rem;border:1px solid #ccc;border-radius:8px;width:240px}
.xnav-search button{height:36px;padding:0 .8rem;border:1px solid #ccc;background:#f7f7f7;border-radius:8px;cursor:not-allowed}
.xnav-icons{list-style:none;display:flex;gap:.8rem;margin:0;padding:0;align-items:center}
.xnav-icons a{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .55rem;border-radius:8px;background:#f8f8f8;border:1px solid #eee}
.badge{background:#ff3b30;color:#fff;font-size:.75rem;line-height:1;padding:.15rem .35rem;border-radius:999px}

/* ===== FORMES ===== */
form{background:#fff;padding:1.2rem;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.08);max-width:640px;margin:0 auto}
form label{display:block;font-weight:700;margin-top:.8rem}
form input,form textarea,form select{width:100%;padding:.55rem .7rem;margin-top:.35rem;border:1px solid #ccc;border-radius:8px;background:#fff;font-size:1rem}
form textarea{min-height:120px;resize:vertical}
form button{margin-top:1rem;padding:.7rem 1.2rem;border:0;border-radius:8px;background:#1c1c1c;color:#fff;font-weight:700;cursor:pointer}
form button:hover{background:#444}

/* ===== XARXA: POSTS ===== */
.post-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.post-user{font-weight:800}
.post-time{color:#777;font-size:.9rem}
.post-text{margin:.6rem 0 1rem;white-space:pre-wrap}
.post-media img,.post-media video{width:100%;height:auto;border-radius:10px;background:#000;max-height:60vh;object-fit:contain}

/* Botons petits unificats (pill) */
.accions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding-top:.4rem}
.pill-btn{font-size:.85rem;line-height:1;padding:.45rem .75rem;border-radius:999px;border:1px solid #d6d6d6;background:#f7f7f7;color:#222;cursor:pointer}
.pill-btn:hover{background:#efefef}
.pill-btn:disabled{opacity:.55;cursor:not-allowed}
.pill-btn--danger{border-color:#f5c7c7;background:#ffe9e9;color:#8d1f1f}
.pill-btn--danger:hover{background:#ffdede}
.push-right{margin-left:auto}

/* Comentaris */
.cmt-box{display:none;margin-top:.6rem;padding:.7rem;border:1px solid #e9e9e9;border-radius:10px;background:#fafafa}
.cmt-box textarea{width:100%;min-height:70px;border:1px solid #d9d9d9;border-radius:8px;padding:.55rem .7rem;background:#fff}
.cmt-actions{margin-top:.5rem;display:flex;gap:.5rem}
.cmt-box.is-open{display:block}

/* ===== BLOG (restaurat) ===== */
.main-container{display:flex;gap:2rem;max-width:960px;margin:2rem auto;padding:0 1rem}
.sidebar{flex:1;max-width:220px}
.sidebar h2{font-size:1.1rem;margin:.2rem 0 .5rem}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar button{width:100%;margin-bottom:.5rem;padding:.5rem;background:#ededed;border:1px solid #ddd;border-radius:8px;cursor:pointer}
.sidebar button:hover{background:#e2e2e2}

.articles-grid{flex:4;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem}
.article-card{background:#fff;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.06);padding:1rem;transition:transform .15s ease, box-shadow .15s ease}
.article-card:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.article-card img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:.6rem}
.article-card h3{margin:.2rem 0 .3rem;font-size:1rem}
.article-card p{margin:0;color:#555;font-size:.95rem}

/* ===== FOOTER ===== */
footer{background:#222;color:#fff;text-align:center;padding:1rem;margin-top:3rem}
footer a{color:#aaa;margin:0 .5rem}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  header nav ul{flex-direction:column;align-items:center}
  .xnav-inner{flex-direction:column;align-items:stretch}
  .xnav-search input{width:100%}
  .main-container{flex-direction:column}
  .articles-grid{grid-template-columns:1fr}
}