/*
 * ZooRules — Readability + Typography Enhancement
 * Font System: DM Serif Display (제목) + Source Serif 4 (본문) + DM Sans (UI)
 * File: style-readability.css
 * Upload to: /public_html/wp-content/themes/ZooRules/
 */

/* =============================================
   CSS VARIABLES — Font Stack 정의
   ============================================= */
:root {
  --font-display: 'DM Serif Display', Georgia, serif;       /* 제목 */
  --font-body:    'Source Serif 4', Georgia, serif;          /* 본문 */
  --font-ui:      'DM Sans', system-ui, sans-serif;          /* 메뉴·UI */
  --color-red:    #c0392b;
  --color-dark:   #1a1410;
  --color-body:   #3d3530;
  --color-muted:  #7a7068;
}

/* =============================================
   1. GLOBAL BASE
   ============================================= */
body {
  font-family: var(--font-ui) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--color-dark) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* =============================================
   2. NAVIGATION
   ============================================= */
.main-nav a,
nav.site-nav a,
#site-navigation a,
header nav ul li a,
.nav-menu li a {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--color-dark) !important;
}
.main-nav a:hover,
header nav ul li a:hover,
.nav-menu li a:hover {
  color: var(--color-red) !important;
}

/* Mobile nav */
.mobile-menu a,
.nav-mobile li a {
  font-family: var(--font-ui) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--color-dark) !important;
}

/* =============================================
   3. CATEGORY FILTER TABS
   ============================================= */
.zr-filter-tabs a,
.filter-tabs a,
.category-tabs a,
[class*="filter"] a,
[class*="tab"] a {
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #444 !important;
  letter-spacing: 0.03em !important;
}
.zr-filter-tabs a.active,
.filter-tabs a.active,
.category-tabs a.active {
  color: var(--color-red) !important;
  font-weight: 700 !important;
}
[class*="tab"] .count,
.filter-tabs .count {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* =============================================
   4. POST CARDS
   ============================================= */

/* Category label (BEHIND THE ZOO 등) */
.post-card .category-label,
.zr-card .cat-name,
.entry-category,
[class*="card"] .category,
.post-category-label,
.post-meta .cat-links a,
.post-meta .category a {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  color: var(--color-red) !important;
}

/* Card title */
.post-card h2,
.post-card h3,
.zr-card h2,
.zr-card h3,
[class*="card"] h2,
[class*="card"] h3,
.entry-title a,
.post-title {
  font-family: var(--font-display) !important;
  font-size: 21px !important;
  font-weight: 400 !important;     /* DM Serif Display는 400이 충분히 굵음 */
  line-height: 1.3 !important;
  color: var(--color-dark) !important;
  letter-spacing: -0.01em !important;
}

/* Featured card title */
.featured-card h2,
[class*="featured"] h2,
[class*="popular"] h2 {
  font-size: 26px !important;
  line-height: 1.22 !important;
}

/* Card excerpt */
.post-card p,
.zr-card p,
[class*="card"] .excerpt,
[class*="card"] p {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.68 !important;
  color: #555 !important;
}

/* Card meta (date 등) */
.post-card .post-meta,
.post-card .meta,
.zr-card .meta,
[class*="card"] .meta,
.post-date,
.entry-date {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  color: var(--color-muted) !important;
  font-weight: 400 !important;
}

/* =============================================
   5. SIDEBAR
   ============================================= */

/* 섹션 헤딩 (CATEGORIES, RECENT POSTS 등) */
.sidebar .widget-title,
.widget-title,
aside h3,
aside h4,
[class*="sidebar"] h3,
[class*="sidebar"] h4,
[class*="widget"] h3,
[class*="widget"] h4 {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
}

/* 카테고리 리스트 */
.sidebar .cat-item a,
.sidebar ul li a,
aside ul li a,
.widget_categories li a,
.zr-cat-list li a {
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #222 !important;
  line-height: 1.5 !important;
}
.sidebar ul li a:hover,
aside ul li a:hover { color: var(--color-red) !important; }

/* 카운트 뱃지 */
.sidebar .cat-item .count,
.widget_categories .count {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  color: #aaa !important;
  font-weight: 600 !important;
}

/* Recent Posts */
.widget_recent_entries li a,
[class*="recent"] li a {
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #222 !important;
  line-height: 1.45 !important;
}
.widget_recent_entries li a:hover { color: var(--color-red) !important; }

/* Tags */
.tagcloud a,
.widget_tag_cloud a {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #555 !important;
}
.tagcloud a:hover { color: var(--color-red) !important; }

/* Newsletter */
[class*="newsletter"] h4,
[class*="subscribe"] h4,
[id*="nl"] h4 {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #fff !important;
}
[class*="newsletter"] p,
[class*="subscribe"] p,
[id*="nl"] p {
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
[class*="newsletter"] input,
[class*="subscribe"] input,
[id*="nl"] input {
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
}
[class*="newsletter"] button,
[class*="subscribe"] button,
[id*="nl"] button {
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* =============================================
   6. SINGLE POST
   ============================================= */

/* H1 제목 */
.single .entry-title,
.single h1,
article.post h1,
.post-header h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--color-dark) !important;
  letter-spacing: -0.02em !important;
}

/* Post meta */
.single .post-meta,
.entry-meta,
.post-header .meta {
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  color: var(--color-muted) !important;
  font-weight: 400 !important;
}

/* 본문 전체 */
.entry-content,
.single .entry-content,
article .entry-content {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  line-height: 1.85 !important;
  color: var(--color-body) !important;
}

.entry-content p {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  line-height: 1.85 !important;
  color: var(--color-body) !important;
  margin-bottom: 1.5em !important;
}

/* H2 소제목 */
.entry-content h2 {
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  color: var(--color-dark) !important;
  line-height: 1.28 !important;
  margin-top: 2.2em !important;
  margin-bottom: 0.8em !important;
}

/* H3 소제목 */
.entry-content h3 {
  font-family: var(--font-display) !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  color: #222 !important;
  margin-top: 1.8em !important;
  margin-bottom: 0.6em !important;
}

.entry-content strong {
  font-weight: 700 !important;
  color: var(--color-dark) !important;
}

.entry-content a {
  color: var(--color-red) !important;
  text-underline-offset: 3px !important;
}

.entry-content code {
  font-size: 15px !important;
  background: #f7f3f0 !important;
  color: var(--color-red) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

.entry-content blockquote {
  font-family: var(--font-body) !important;
  font-size: 20px !important;
  font-style: italic !important;
  color: #444 !important;
  line-height: 1.7 !important;
  border-left: 4px solid var(--color-red) !important;
  padding: 18px 24px !important;
  margin: 2em 0 !important;
  background: #f9f6f2 !important;
}

.entry-content ul,
.entry-content ol {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  line-height: 1.85 !important;
  color: var(--color-body) !important;
}

/* =============================================
   7. CATEGORY PAGE
   ============================================= */
.category-header h1,
.archive-title,
.page-title {
  font-family: var(--font-display) !important;
  font-size: clamp(26px, 3.5vw, 36px) !important;
  font-weight: 400 !important;
  color: var(--color-dark) !important;
  letter-spacing: -0.02em !important;
}

/* =============================================
   8. FOOTER
   ============================================= */
footer h3,
footer h4,
.site-footer h3,
.site-footer h4 {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-red) !important;
}

footer ul li a,
.site-footer a {
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #ccc !important;
}
footer ul li a:hover,
.site-footer a:hover { color: #fff !important; }

footer small,
.site-footer .copyright {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  color: var(--color-muted) !important;
}

footer input[type="email"],
.site-footer input[type="email"] {
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
}

/* =============================================
   9. ABOUT ZOORULES SIDEBAR BOX
   ============================================= */

/* monospace 폰트 강제 제거 — 사이드바 전체 */
.sidebar,
aside {
  font-family: var(--font-ui) !important;
}
.sidebar *,
aside * {
  font-family: var(--font-ui) !important;
}
/* 단, 제목류는 display 폰트 */
.sidebar h2, aside h2,
.sidebar h3, aside h3,
[class*="about"] .logo,
[class*="about"] strong {
  font-family: var(--font-display) !important;
}

/* "ABOUT ZOORULES" 헤딩 */
[class*="about"] .widget-title,
[class*="about"] h4 {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
}

/* About 박스 "ZooRules" 로고 */
[class*="about-box"] .logo,
[class*="about"] .logo,
[class*="about-box"] strong {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-dark) !important;
}

/* 슬로건 — italic serif로 품격 있게 */
[class*="about-box"] p:first-of-type,
[class*="about"] p:first-of-type {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  font-style: italic !important;
  color: #555 !important;
  line-height: 1.6 !important;
}

/* 설명 텍스트 */
[class*="about-box"] p,
[class*="about"] p {
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #666 !important;
}

/* Subscribe 버튼 */
[class*="about-box"] a,
[class*="about"] a.subscribe-btn {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* =============================================
   10. MOBILE
   ============================================= */
@media (max-width: 768px) {

  body { font-size: 15px !important; }

  header nav ul li a,
  .nav-menu li a {
    font-size: 15px !important;
  }

  [class*="filter"] a,
  [class*="tab"] a {
    font-size: 13px !important;
  }

  [class*="card"] h2,
  .zr-card h2 {
    font-size: 18px !important;
  }

  .single .entry-title,
  .single h1,
  article.post h1 {
    font-size: 26px !important;
  }

  .entry-content,
  .entry-content p,
  .entry-content ul,
  .entry-content ol {
    font-size: 17px !important;
    line-height: 1.78 !important;
  }

  .entry-content h2 { font-size: 22px !important; }
  .entry-content h3 { font-size: 19px !important; }

  .entry-content blockquote {
    font-size: 18px !important;
    padding: 14px 18px !important;
  }

  aside ul li a,
  .sidebar ul li a {
    font-size: 15px !important;
  }

  footer ul li a,
  .site-footer a {
    font-size: 14px !important;
  }
}