/*
Theme Name: はまちゅーぶ
Theme URI: https://hamachu.me/
Author: hamachu
Description: 個人ブログ(DIY・日記・iPhone・バスケ・自転車)向けの独自テーマ。2HMC-NEW-BLOGTHEME-001 モック(mockups/mock_v2.html, mock_v2_single.html)を実装。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hamachu-blog
*/

:root{
  --navy:#2C3E50;
  --navy-deep:#1F2C38;
  --bg:#ffffff;
  --bg-soft:#F5F7F8;
  --border:#E5E9EC;
  --text:#2C3E50;
  --text-sub:#6B7A88;
  --text-faint:#9AA6B0;
  --c-diy:#B5651D;
  --c-diary:#78909C;
  --c-pr:#2C3E50;
  --c-iphone:#455A64;
  --c-basketball:#E4572E;
  --c-bike:#2E7D6B;
  --c-default:#90A4AE;
}
*{box-sizing:border-box;}
body{margin:0;font-family:"Noto Sans JP",sans-serif;color:var(--text);background:var(--bg);line-height:1.8;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.screen-reader-text{position:absolute;left:-9999px;}

/* header */
header.site-header{border-bottom:1px solid var(--border);position:sticky;top:0;background:#fff;z-index:10;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:1120px;margin:0 auto;flex-wrap:wrap;gap:10px;}
.logo{display:flex;flex-direction:column;}
.logo .name{font-size:24px;font-weight:900;color:var(--navy);letter-spacing:.02em;}
.logo .tagline{font-size:12px;color:var(--text-sub);margin-top:2px;}
nav.main-nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
nav.main-nav ul{display:flex;align-items:center;gap:24px;list-style:none;}
nav.main-nav a{font-size:14px;font-weight:500;color:var(--text);padding-bottom:4px;border-bottom:2px solid transparent;}
nav.main-nav .current-menu-item a,
nav.main-nav a.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:700;}
.header-search{display:flex;align-items:center;}
.header-search input[type="search"]{border:1px solid var(--border);border-radius:4px;padding:6px 10px;font-size:13px;width:140px;}
.cat-dropdown select{border:1px solid var(--border);border-radius:4px;padding:6px 8px;font-size:13px;color:var(--text);background:#fff;}

/* hero */
.hero{position:relative;background:linear-gradient(120deg,#3B4B5C 0%,#2C3E50 55%,#22303D 100%);color:#fff;padding:64px 24px;overflow:hidden;}
.hero-inner{max-width:1120px;margin:0 auto;position:relative;}
.hero h1{font-size:34px;font-weight:900;line-height:1.5;margin:0 0 16px;}
.hero p.lead{font-size:15px;color:#D7DEE4;max-width:520px;margin:0 0 24px;}
.hero .cta{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--navy);font-weight:700;font-size:14px;padding:12px 22px;border-radius:4px;}

/* section title */
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin:56px 0 20px;}
.section-title h1,.section-title h2{font-size:22px;font-weight:900;position:relative;padding-left:14px;margin:0;}
.section-title h1::before,.section-title h2::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:5px;background:var(--navy);border-radius:2px;}
.section-title .more{font-size:13px;color:var(--text-sub);font-weight:500;}

/* layout */
.layout{display:grid;grid-template-columns:1fr 320px;gap:48px;padding-bottom:64px;}
@media (max-width:880px){.layout{grid-template-columns:1fr;}}

/* article card (list) */
.article-card{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--border);}
.article-list .article-card:first-child{padding-top:0;}
.thumb{width:180px;height:120px;flex:none;border-radius:6px;overflow:hidden;position:relative;}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb-fallback{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;height:100%;}
.thumb-fallback .cat{font-size:13px;font-weight:700;letter-spacing:.05em;}
.thumb-fallback .mark{font-size:26px;font-weight:900;opacity:.85;margin-bottom:4px;}
.card-body{flex:1;min-width:0;}
.badges{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:3px;}
.badge.pr{background:var(--navy);color:#fff;}
.badge.cat{background:var(--bg-soft);color:var(--text-sub);border:1px solid var(--border);}
.card-body h2,.card-body h3{font-size:16px;font-weight:700;margin:0 0 8px;line-height:1.5;}
.card-meta{font-size:12px;color:var(--text-faint);margin-bottom:6px;}
.card-excerpt{font-size:13px;color:var(--text-sub);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* pagination */
.pagination{display:flex;gap:8px;margin-top:24px;font-size:13px;}
.pagination a,.pagination span{padding:6px 12px;border:1px solid var(--border);border-radius:4px;color:var(--text-sub);}
.pagination .current{background:var(--navy);color:#fff;border-color:var(--navy);}

/* sidebar */
aside .box{background:var(--bg-soft);border-radius:8px;padding:22px;margin-bottom:20px;}
aside .box h2,aside .box h4{font-size:14px;font-weight:700;margin:0 0 16px;}
.profile-avatar{width:64px;height:64px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;margin-bottom:12px;overflow:hidden;}
.profile-avatar img{width:100%;height:100%;object-fit:cover;}
.profile-name{font-weight:700;font-size:15px;margin-bottom:4px;}
.profile-tag{font-size:12px;color:var(--text-sub);margin-bottom:10px;}
.profile-bio{font-size:12.5px;color:var(--text-sub);margin-bottom:16px;}
.profile-btn{display:block;text-align:center;border:1px solid var(--navy);color:var(--navy);font-size:12.5px;font-weight:700;padding:9px;border-radius:4px;}
.sns-links{list-style:none;margin:12px 0 0;padding:0;}
.sns-links li{margin-top:8px;}
.sns-links a{font-size:12.5px;font-weight:500;color:var(--navy);}
.sns-links a:hover{text-decoration:underline;}

.cat-list{list-style:none;margin:0;padding:0;}
.cat-list li{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;padding:9px 0;border-bottom:1px solid #E9ECEE;}
.cat-list li:last-child{border-bottom:none;}
.cat-list .count{background:#fff;border:1px solid var(--border);color:var(--text-sub);font-size:11px;padding:1px 8px;border-radius:10px;}

.recent-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #E9ECEE;}
.recent-item:last-child{border-bottom:none;}
.recent-thumb{width:52px;height:52px;flex:none;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;background:var(--c-default);}
.recent-thumb img{width:100%;height:100%;object-fit:cover;}
.recent-title{font-size:12.5px;font-weight:500;line-height:1.5;}
.recent-date{font-size:11px;color:var(--text-faint);margin-top:4px;}

.archive-banner{background:linear-gradient(135deg,#2C3E50,#1F2C38);color:#fff;border-radius:8px;padding:26px 22px;}
.archive-banner p{font-size:14px;font-weight:700;line-height:1.6;margin:0 0 14px;}
.archive-banner .btn{display:inline-block;background:#fff;color:var(--navy);font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:4px;}

/* single */
.breadcrumb{font-size:12.5px;color:var(--text-faint);padding:18px 0;}
.breadcrumb a{color:var(--text-sub);}
article.single-post h1.title{font-size:26px;font-weight:900;line-height:1.55;margin:0 0 18px;}
.article-meta{display:flex;gap:16px;font-size:12.5px;color:var(--text-faint);margin-bottom:24px;flex-wrap:wrap;}
.main-image{width:100%;border-radius:6px;margin-bottom:28px;overflow:hidden;}
.main-image img{width:100%;height:auto;}
.body-text,.entry-content{font-size:15px;color:#3A4652;}
.body-text p,.entry-content p{margin:0 0 22px;}
.entry-content img{border-radius:6px;margin:20px 0;}
.entry-content h2{font-size:19px;font-weight:900;position:relative;padding-left:14px;margin:40px 0 18px;}
.entry-content h2::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:5px;background:var(--navy);border-radius:2px;}

.pr-notice{border:1px dashed var(--navy);border-radius:6px;padding:18px 20px;margin:28px 0;background:#F7F9FA;font-size:13px;}

footer.site-footer{border-top:1px solid var(--border);padding:28px 24px;text-align:center;font-size:12px;color:var(--text-faint);}

@media (max-width:600px){
  .article-card{flex-direction:column;}
  .thumb{width:100%;height:180px;}
}