/* ============================================================
   MJ-Design 官網 — 共用樣式表
   適用頁面：所有 HTML wireframe 與 WP 主題模板
   ============================================================ */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Noto Sans TC',sans-serif;background:#ECEAE6;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}

/* ── WIREFRAME ANNOTATIONS ── */
.wf-label{
  position:absolute;top:8px;right:12px;
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;
  color:#BF4E37;background:rgba(191,78,55,.08);padding:2px 7px;border-radius:3px;
  border:1px solid rgba(191,78,55,.2);pointer-events:none;
}
.wf-wrap{position:relative;}

/* ── NAV ── */
nav{background:#1C1814;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 64px;position:sticky;top:0;z-index:100;}
.nav-logo{height:26px;}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center;}
.nav-links a{font-size:16px;color:#A8A29E;letter-spacing:.02em;}
.nav-links a:hover{color:#fff;}
.header-logo h2,.mobile-logo h2{color:#A8A29E;}
.nav-cta{border:1px solid rgba(191,78,55,.6);color:#BF4E37 !important;padding:6px 16px;border-radius:4px;}
.nav-cta:hover{background:#BF4E37;color:#fff !important;}

/* ── SECTION SHELL ── */
.sec{padding:80px 64px;max-width:1280px;margin:0 auto;}
.sec-full{padding:80px 64px;}
.bg-dark{background:#2E2925;}
.bg-warm{background:#F5F1EC;}
.bg-white{background:#fff;}
.bg-red{background:#BF4E37;}

/* ── EYEBROW LABELS ── */
.sec-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.sec-eyebrow-bar{width:3px;height:14px;background:#BF4E37;border-radius:2px;flex-shrink:0;}
.sec-eyebrow-text{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:#BF4E37;text-transform:uppercase;}

/* ── TYPOGRAPHY ── */
.t-hero{font-family:'Noto Serif TC',serif;font-size:54px;font-weight:900;line-height:1.2;color:#fff;}
.t-h2{font-family:'Noto Serif TC',serif;font-size:36px;font-weight:600;line-height:1.4;}
.t-h2-light{color:#fff;}
.t-body{font-size:18px;line-height:1.85;color:#5A534E;max-width:660px;}
.t-body-light{color:#A8A29E;}
.t-mono{font-family:'IBM Plex Mono',monospace;}
.t-accent{color:#BF4E37;}

/* ── HERO ── */
.hero-sub{font-size:18px;color:#C7BFB9;line-height:1.85;max-width:560px;margin:20px 0 36px;}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:#BF4E37;color:#fff;font-size:15px;font-weight:500;padding:13px 28px;border-radius:5px;}
.btn-primary:hover{opacity:.88;}

/* ── GRIDS ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:32px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px;}

/* ── CARDS ── */
.card{background:#fff;border:1px solid #E8E2DA;border-radius:10px;padding:24px;}
.card-ai{border-color:#BF4E37;border-width:1.5px;}
.card-dark{background:#2E2420;border:1.5px solid #5A4540;}
.card-cream{background:#FAF0EE;border:1.5px solid #EDD5CF;}
.chip{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:4px;margin-bottom:16px;font-weight:500;}
.chip-gray{background:#F0EDE8;color:#5A534E;}
.chip-red{background:#BF4E37;color:#fff;}
.chip-red-soft{background:rgba(191,78,55,.1);color:#BF4E37;}
.card-title{font-family:'Noto Serif TC',serif;font-size:24px;font-weight:600;color:#1C1814;margin-bottom:14px;}
.card-body{font-size:17px;color:#5A534E;line-height:1.8;}
.card-caption{margin-top:16px;font-size:14px;color:#6B6258;padding-top:14px;border-top:1px solid #E8E2DA;}
.query-block{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:12px;background:rgba(191,78,55,.08);color:#BF4E37;padding:6px 12px;border-radius:4px;border:1px solid rgba(191,78,55,.2);margin-top:8px;}
.link-more{display:inline-block;margin-top:20px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#BF4E37;letter-spacing:.04em;}

/* ── BREADCRUMB ── */
.breadcrumb{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.04em;margin-bottom:32px;}
.breadcrumb a{color:#A8A29E;}
.breadcrumb a:hover{color:#fff;}
.breadcrumb-sep{color:#5A4540;}
.breadcrumb-current{color:#C7BFB9;}

/* ── ARTICLE INDEX CARDS ── */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:0;}
.article-card{background:#fff;border:1px solid #E8E2DA;border-radius:12px;padding:28px;display:flex;flex-direction:column;transition:border-color .2s;}
.article-card:hover{border-color:#BF4E37;}
.article-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.article-date{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#A8A29E;}
.article-title{font-family:'Noto Serif TC',serif;font-size:19px;font-weight:600;color:#1C1814;line-height:1.5;margin-bottom:12px;}
.article-excerpt{font-size:15px;color:#6B6258;line-height:1.8;flex:1;}
.article-more{display:flex;align-items:center;gap:6px;margin-top:20px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#BF4E37;letter-spacing:.04em;padding-top:16px;border-top:1px solid #F0EDE8;}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;gap:8px;margin-top:48px;justify-content:center;}
.page-btn{font-family:'IBM Plex Mono',monospace;font-size:12px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid #E8E2DA;color:#6B6258;background:#fff;}
.page-btn.active{background:#BF4E37;border-color:#BF4E37;color:#fff;}
.page-btn:hover:not(.active){border-color:#BF4E37;color:#BF4E37;}

/* ── CTA SECTION ── */
.cta-inner{text-align:center;padding:20px 0;}
.cta-title{font-family:'Noto Serif TC',serif;font-size:30px;font-weight:600;color:#fff;margin-bottom:10px;}
.cta-sub{font-size:16px;color:rgba(255,255,255,.75);margin-bottom:32px;line-height:1.7;}
.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:600px;margin:0 auto;}
.qr-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:20px;display:flex;align-items:center;gap:16px;}
.qr-box{width:72px;height:72px;background:rgba(255,255,255,.15);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.qr-box span{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(255,255,255,.5);letter-spacing:.05em;text-align:center;line-height:1.5;}
.qr-tag{font-family:'IBM Plex Mono',monospace;font-size:9px;color:rgba(255,255,255,.5);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px;}
.qr-name{font-size:15px;font-weight:500;color:#fff;margin-bottom:4px;}
.qr-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.5;}

/* ── FOOTER ── */
footer{background:#1C1814;padding:32px 64px;display:flex;align-items:center;justify-content:space-between;}
.footer-links{display:flex;gap:24px;list-style:none;}
.footer-links a{font-size:12px;color:#3D3733;}
.footer-links a:hover{color:#A8A29E;}
.footer-copy{font-size:11px;color:#3D3733;}

/* ── RESPONSIVE ── */
.nav-open-cb{display:none;}
.nav-burger{display:none;}

/* ── MOBILE PANEL NAV OVERRIDE (fixes sliding panel nav on WP theme) ── */
@media(max-width:1024px){
  #mobile.header__nav nav{height:auto;min-height:100%;padding:60px 0 20px;display:block;position:relative;background:transparent;}
  #mobile .nav-links{display:flex !important;flex-direction:column;gap:0;padding:0;}
  #mobile .nav-links li{border-bottom:1px solid rgba(255,255,255,.06);}
  #mobile .nav-links li#trigger-close{display:none;}
  #mobile .nav-links li a{padding:16px 24px;display:block;font-size:15px;color:#A8A29E;}
  #mobile .nav-links li a:hover,#mobile .nav-links li a.active{color:#fff;}
  #mobile .nav-links .nav-cta{border:none;border-radius:0;color:#BF4E37 !important;background:none;}
}

@media(max-width:768px){
  .sec{padding:56px 28px;}
  nav{padding:0 24px;}
  .nav-burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;z-index:101;}
  .nav-burger span{width:22px;height:2px;background:#fff;border-radius:2px;display:block;}
  .nav-links{display:none;position:absolute;top:56px;left:0;right:0;background:#1C1814;flex-direction:column;gap:0;padding:8px 0;z-index:100;}
  .nav-links li a{padding:14px 24px;display:block;font-size:15px;}
  .nav-open-cb:checked~.nav-links{display:flex;}
  .t-hero{font-size:36px;}
  .t-h2{font-size:26px;}
  .grid-2,.grid-3,.grid-4,.article-grid{grid-template-columns:1fr;}
  .qr-grid{grid-template-columns:1fr;}
  footer{flex-direction:column;gap:20px;padding:28px 24px;text-align:center;}
  .footer-links{flex-wrap:wrap;justify-content:center;gap:16px;}
}

@media(max-width:390px){
  .sec{padding:40px 20px;}
  .t-hero{font-size:28px;line-height:1.3;}
  .hero-sub{font-size:16px;}
  .t-h2{font-size:22px;}
  .card{padding:18px;}
  .btn-primary{padding:11px 22px;font-size:14px;}
}

@media(min-width:1025px){
  #mobile{left:auto !important;}
}

/* ── WORDPRESS COMPAT ── */
/* Prevent primary.css a{font-size:1rem} from overriding inline-sized paragraphs */
p a { font-size: inherit; }