/*
Theme Name: MiwaNews
Theme URI: miwakovn.com
Author: Khanh Toan
Author URI: miwakovn.com
Description: A premium, meticulously designed magazine theme focusing on typography and reading experience.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: miwanews
Tags: blog, magazine, news, editorial, clean, responsive
*/

/* === Meticulous Editorial Design System (Refined) === */

:root {
  --color-text-body: #374151; /* Gray-700: Dễ đọc, không quá đen */
  --color-text-heading: #111827; /* Gray-900: Đậm, rõ ràng */
  --color-accent: #2563eb; /* Blue-600 */
  --color-border: #e5e7eb;
  
  /* Font Stack */
  --font-serif: 'Merriweather', Georgia, serif; 
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Fira Code', monospace;
  
  /* Spacing */
  --spacing-p: 1.75rem; /* Khoảng cách giữa các đoạn vừa phải */
}

/* iOS Smooth Scrolling Support */
* {
  -webkit-overflow-scrolling: touch;
}

.markdown-content {
  color: var(--color-text-body);
  font-family: var(--font-serif);
  font-feature-settings: "kern", "liga", "clig", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- TÍNH TOÁN KÍCH THƯỚC (Responsive Typography) --- */

/* Mobile First (Mặc định cho điện thoại) */
.markdown-content {
  font-size: 16px; /* Chuẩn đọc trên mobile */
  line-height: 1.65; /* Thoáng nhưng không rời rạc */
}

.markdown-content h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  color: var(--color-text-heading);
  font-size: 28px !important; /* Mobile H1 */
  line-height: 1.3 !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  letter-spacing: -0.02em;
}

.markdown-content h2 {
  font-family: var(--font-sans);
  color: var(--color-text-heading);
  font-weight: 700;
  font-size: 22px !important; /* Mobile H2 */
  line-height: 1.35 !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border); /* Đường kẻ nhẹ */
}

.markdown-content h3 {
  font-family: var(--font-sans);
  color: #1f2937;
  font-weight: 600;
  font-size: 19px !important; /* Mobile H3 */
  line-height: 1.4 !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.75rem !important;
}

.markdown-content h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Desktop (Màn hình > 768px) */
@media (min-width: 768px) {
  .markdown-content {
    font-size: 18px; /* Tăng size cho màn hình rộng */
    line-height: 1.8; /* Tăng line-height để mắt di chuyển dễ hơn trên dòng dài */
  }

  .markdown-content h1 {
    font-size: 38px !important;
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
  }

  .markdown-content h2 {
    font-size: 28px !important;
    margin-top: 2.75rem !important;
    margin-bottom: 1.25rem !important;
  }

  .markdown-content h3 {
    font-size: 22px !important;
    margin-top: 2.25rem !important;
    margin-bottom: 1rem !important;
  }
}

/* --- NỘI DUNG & HÌNH ẢNH (Constraints - Fix Lỗi Tràn) --- */

.markdown-content p {
  margin-bottom: var(--spacing-p) !important;
}

/* Reset Figure & Block Image Wrapper - Quan trọng để tránh lỗi layout */
.markdown-content figure,
.markdown-content .wp-block-image {
  margin: 2.5rem 0 !important; /* Margin trên dưới */
  width: 100% !important;
  max-width: 100% !important;
  display: block;
  position: relative !important; /* Quan trọng để neo caption */
  overflow: hidden !important; /* Bo góc cả caption nếu tràn */
  border-radius: 12px !important; /* Bo góc toàn bộ khối */
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

/* Hình ảnh: Constraints chặt chẽ */
.markdown-content img {
  display: block;
  max-width: 100% !important;
  width: 100% !important; /* Full width của figure */
  height: auto !important;
  border-radius: 0 !important; /* Reset border-radius của img vì đã bo ở figure */
  margin: 0 !important;
  object-fit: cover !important;
}

/* Căn chỉnh ảnh Full Width nếu cần (cho ảnh to) */
.markdown-content .alignfull img,
.markdown-content .alignwide img {
  width: 100%;
}

/* --- Glassmorphism Caption (Overlay) --- */
.markdown-content figcaption, 
.markdown-content .wp-caption-text {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  
  /* Glassmorphism Effect */
  background: rgba(255, 255, 255, 0.75) !important; /* Nền trắng mờ */
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
  
  padding: 1rem 1.5rem !important;
  margin: 0 !important;
  
  /* Text Style */
  color: #1f2937 !important; /* Chữ xám đậm */
  font-family: var(--font-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  line-height: 1.4 !important;
  z-index: 10;
  
  /* Animation (Optional) */
  transition: all 0.3s ease;
}

/* Ẩn caption trên mobile nếu quá dài hoặc che ảnh (Tuỳ chọn: hiện tại giữ nguyên cho đẹp) */
@media (max-width: 640px) {
  .markdown-content figcaption, 
  .markdown-content .wp-caption-text {
    padding: 0.75rem 1rem !important;
    font-size: 0.85rem !important;
    background: rgba(255, 255, 255, 0.9) !important; /* Đậm hơn trên mobile để dễ đọc */
  }
}

/* --- ĐIỂM NHẤN (Highlights) --- */

/* Chữ đậm: Đậm thật sự và màu tối hơn */
.markdown-content strong, .markdown-content b {
  font-weight: 700;
  color: #000; /* Đen tuyền để nổi bật giữa xám đậm */
}

/* Trích dẫn (Blockquote): Tinh gọn, hiện đại */
.markdown-content blockquote {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 1.15em;
  color: #374151 !important;
  border-left: 4px solid var(--color-accent) !important;
  background: #f9fafb !important;
  padding: 1.5rem 1.75rem !important;
  margin: 2.5rem 0 !important;
  border-radius: 0 8px 8px 0;
  position: relative;
  width: 100%; /* Đảm bảo không tràn */
  box-sizing: border-box; /* Tính cả padding vào width */
}
.markdown-content blockquote::before { content: none; }

/* Danh sách (Lists): Gọn gàng */
.markdown-content ul, .markdown-content ol {
  margin: 1.5rem 0 1.5rem 1.25rem !important;
  padding: 0 !important;
}

.markdown-content li {
  margin-bottom: 0.75rem !important;
  padding-left: 0.5rem !important;
  line-height: 1.7;
}

.markdown-content ul { list-style: disc outside !important; }
.markdown-content ul li::marker { color: var(--color-accent); }

.markdown-content ol { list-style: decimal outside !important; }
.markdown-content ol li::marker { font-weight: 600; color: #4b5563; }

/* Links */
.markdown-content a {
  color: var(--color-accent) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(37, 99, 235, 0.3);
  transition: all 0.2s ease;
  word-wrap: break-word; /* Tránh link dài gây tràn */
}
.markdown-content a:hover {
  background-color: rgba(37, 99, 235, 0.08);
  border-bottom-color: var(--color-accent);
  border-radius: 2px;
}

/* Code block */
.markdown-content pre {
  background: #1f2937 !important;
  color: #f3f4f6 !important;
  padding: 1.25rem !important;
  border-radius: 6px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.9em !important;
  line-height: 1.6;
  overflow-x: auto; /* Scroll ngang nếu quá dài */
  margin: 2rem 0 !important;
  max-width: 100%; /* Không tràn */
}

/* Bảng */
.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.5rem 0;
  font-family: var(--font-sans);
  font-size: 0.95em;
  border: 1px solid var(--color-border);
  display: block; /* Cho phép scroll trên mobile */
  overflow-x: auto;
}

.markdown-content th {
  background-color: #f3f4f6;
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap; /* Giữ tiêu đề bảng đẹp hơn */
}

.markdown-content td {
  border-bottom: 1px solid var(--color-border);
}

/* === Helper: Stretched Link (Clickable Card) === */
.relative-card {
  position: relative !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.relative-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
}
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  content: "";
  cursor: pointer;
}
/* Raise specific elements (like separate category tags) above the stretched link */
.z-over-link {
  position: relative;
  z-index: 20;
}