/*
Theme Name: K-Pop Wave
Theme URI: https://example.com
Author: Toi
Description: Thème d'actualité K-pop minimaliste, liste d'articles du plus récent au plus ancien, recherche, sans auteur ni votes ni commentaires.
Version: 1.0
Text Domain: kpopwave
*/

:root{
  --bg:#fff; --fg:#111; --muted:#777; --line:#eee; --accent:#e0227a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111214; --fg:#f2f2f2; --muted:#9a9a9a; --line:#26272a;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Helvetica Neue',Arial,sans-serif;
}
a{color:inherit}

/* ---- header ---- */
header.site-header{
  position:sticky; top:0; background:var(--bg);
  border-bottom:2px solid var(--fg); z-index:10;
}
.header-inner{
  max-width:900px; margin:0 auto; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
}
.logo{font-weight:800; font-size:22px; letter-spacing:1px; text-decoration:none}
.logo span{color:var(--accent)}

.search-form{
  display:flex; align-items:center; border:1px solid var(--line);
  border-radius:20px; padding:6px 12px; flex:1; max-width:280px;
}
.search-form input[type="search"]{
  border:none; background:transparent; outline:none; color:var(--fg);
  width:100%; font-size:14px;
}
.search-form button{
  border:none; background:transparent; cursor:pointer; color:var(--fg);
  display:flex; align-items:center;
}

nav.primary-menu{max-width:900px; margin:0 auto; padding:0 16px}
nav.primary-menu ul{
  list-style:none; display:flex; gap:18px; padding:10px 0; margin:0;
  border-bottom:1px solid var(--line); font-size:13px; font-weight:700;
  letter-spacing:.5px; overflow-x:auto;
}
nav.primary-menu a{
  text-decoration:none; color:var(--muted); white-space:nowrap;
}
nav.primary-menu a:hover{color:var(--fg)}

/* ---- article list ---- */
main{max-width:900px; margin:0 auto; padding:8px 16px 40px}

.article{
  display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);
}
.thumb{
  width:110px; height:78px; border-radius:6px; flex-shrink:0;
  background:var(--line); overflow:hidden;
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}

.content{flex:1; min-width:0}
.cat{
  font-size:11px; font-weight:800; color:var(--accent); text-transform:uppercase;
  letter-spacing:.5px;
}
.cat a{color:var(--accent); text-decoration:none}
.title{font-size:16px; font-weight:700; margin:4px 0 6px; line-height:1.3}
.title a{text-decoration:none}
.title a:hover{text-decoration:underline}
.meta{font-size:12px; color:var(--muted)}

/* ---- single article page ---- */
.single-article{max-width:700px; margin:20px auto; padding:0 16px 60px}
.single-article .cat{margin-bottom:8px}
.single-article h1{font-size:28px; line-height:1.3; margin:0 0 10px}
.single-article .meta{margin-bottom:20px}
.single-article .featured-img{width:100%; border-radius:8px; margin-bottom:20px}
.single-article .entry-content{font-size:16px; line-height:1.7}
.single-article .entry-content img{max-width:100%; height:auto; border-radius:6px}

.pagination{max-width:900px; margin:20px auto; padding:0 16px; display:flex; justify-content:center; gap:12px}
.pagination a{
  padding:8px 16px; border:1px solid var(--line); border-radius:20px;
  text-decoration:none; font-size:13px; font-weight:700;
}

footer.site-footer{
  max-width:900px; margin:20px auto 40px; padding:16px;
  text-align:center; color:var(--muted); font-size:12px;
}

/* ---- tags en bulles ---- */
.tags{
  display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 20px;
}
.tags a{
  background:var(--line); color:var(--fg); font-size:12px; font-weight:600;
  padding:6px 14px; border-radius:20px; text-decoration:none;
}
.tags a:hover{background:var(--accent); color:#fff}

.meta-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-bottom:20px;
}
.meta-row .meta{margin:0}
.meta-row .tags{margin:0}

nav.primary-menu li{display:flex; align-items:center}
.insta-link{
  display:flex; align-items:center; color:var(--muted);
}
.insta-link:hover{color:var(--accent)}