/*
Theme Name:   Heartfelt
Template:     generatepress
Description:  Child theme cho site truyện: chữ to, tông ấm, dễ đọc cho người đọc 55+.
Version:      1.0.3
Text Domain:  heartfelt
*/

/* ---------- Tokens ---------- */
:root {
  --hr-bg: #faf6f0;
  --hr-surface: #ffffff;
  --hr-ink: #2a2420;
  --hr-muted: #6e625a;
  --hr-accent: #a0322b;
  --hr-accent-dark: #7f241f;
  --hr-accent-soft: #f6e7e0;
  --hr-border: #e9dfd4;
  --hr-radius: 14px;
  --hr-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --hr-display: "Playfair Display", Georgia, serif;
  --hr-scale: 1;
}

/* ---------- Base ---------- */
body {
  background: var(--hr-bg);
  color: var(--hr-ink);
  font-family: var(--hr-serif);
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--hr-accent); }
a:hover, a:focus { color: var(--hr-accent-dark); }
h1, h2, h3, h4, .entry-title, .main-title {
  font-family: var(--hr-display);
  color: var(--hr-ink);
  font-weight: 700;
  line-height: 1.2;
}
:focus-visible { outline: 3px solid var(--hr-accent); outline-offset: 3px; }

.one-container .site-content,
.separate-containers .inside-article,
.one-container .container,
.site-main > * { background: transparent; }
.site-content { padding-top: 32px; padding-bottom: 56px; }

/* ---------- Header ---------- */
.site-header {
  background: var(--hr-surface);
  border-bottom: 1px solid var(--hr-border);
}
.inside-header {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 34px 20px 18px;
}
.main-title { font-size: 42px; letter-spacing: -0.01em; margin: 0; }
.main-title a { color: var(--hr-ink); text-decoration: none; }
.main-title a::before {
  content: "\2665";
  color: var(--hr-accent);
  font-size: 0.6em;
  margin-right: 0.35em;
  vertical-align: 0.18em;
}
.site-description {
  font-family: var(--hr-serif);
  font-style: italic;
  color: var(--hr-muted);
  font-size: 18px;
  margin-top: 4px;
}
.main-navigation,
.main-navigation ul ul { background: var(--hr-surface); }
.main-navigation { border-bottom: 1px solid var(--hr-border); }
.main-navigation .inside-navigation { justify-content: center; }
.main-navigation .main-nav ul li a,
.menu-toggle {
  color: var(--hr-ink);
  font-family: var(--hr-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 54px;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--hr-accent); }

/* ---------- Home hero ---------- */
.hr-hero {
  text-align: center;
  max-width: 720px;
  margin: 8px auto 40px;
  padding: 0 8px;
}
.hr-hero h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 12px; }
.hr-hero p { color: var(--hr-muted); font-size: 20px; margin: 0; }
.hr-hero .hr-ornament { color: var(--hr-accent); font-size: 22px; letter-spacing: 0.5em; display: block; margin-bottom: 10px; }

/* ---------- Story cards (home / archive / search) ---------- */
.blog .site-main,
.archive .site-main,
.search .site-main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
.blog .site-main > :not(article),
.archive .site-main > :not(article),
.search .site-main > :not(article) { grid-column: 1 / -1; }
.blog article, .archive article, .search article { margin: 0 !important; padding: 0 !important; }
.blog .inside-article,
.archive .inside-article,
.search .inside-article {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 !important;
  background: var(--hr-surface);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog .inside-article:hover,
.archive .inside-article:hover,
.search .inside-article:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(42, 36, 32, .10);
}
.blog .post-image, .archive .post-image, .search .post-image { order: -1; margin: 0 !important; }
.blog .post-image img, .archive .post-image img, .search .post-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.blog .entry-header, .archive .entry-header, .search .entry-header { padding: 22px 24px 0; }
.blog .entry-title, .archive .entry-title, .search .entry-title { font-size: 25px; margin: 0; }
.blog .entry-title a, .archive .entry-title a, .search .entry-title a { color: var(--hr-ink); text-decoration: none; }
.blog .entry-title a:hover, .archive .entry-title a:hover { color: var(--hr-accent); }
.blog .entry-summary, .archive .entry-summary, .search .entry-summary {
  padding: 0 24px;
  margin-top: 10px !important;
  color: var(--hr-muted);
  font-size: 17px;
  flex: 1;
}
.hr-card-cta { padding: 4px 24px 24px; }
.hr-card-cta a {
  font-weight: 700;
  text-decoration: none;
  font-size: 17px;
}
.hr-card-cta a span { transition: margin .2s; }
.hr-card-cta a:hover span { margin-left: 6px; }
.blog footer.entry-meta, .archive footer.entry-meta, .search footer.entry-meta { display: none; }

/* ---------- Single story ---------- */
.single .inside-article,
.page .inside-article {
  max-width: 740px;
  margin: 0 auto;
  padding: 0 !important;
}
.single .entry-header, .page .entry-header { text-align: center; margin-bottom: 24px; }
.single .entry-title { font-size: clamp(32px, 4.6vw, 46px); margin-bottom: 14px; }
.page .entry-title { font-size: clamp(30px, 4vw, 40px); }
.featured-image.page-header-image-single { max-width: 740px; margin: 0 auto 28px; }
.featured-image.page-header-image-single img {
  border-radius: var(--hr-radius);
  width: 100%;
  max-height: min(56vh, 520px);
  object-fit: cover;
  object-position: center 22%;
}

.hr-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  color: var(--hr-muted);
  font-size: 16px;
}
.hr-textsize { display: inline-flex; gap: 6px; }
.hr-textsize button {
  font-family: var(--hr-serif);
  background: var(--hr-surface);
  color: var(--hr-ink);
  border: 1px solid var(--hr-border);
  border-radius: 999px;
  min-width: 46px;
  min-height: 40px;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.hr-textsize button:hover { border-color: var(--hr-accent); color: var(--hr-accent); }

.single .entry-content,
.page .entry-content {
  font-size: calc(21px * var(--hr-scale));
  line-height: 1.8;
}
.single .entry-content p { margin-bottom: 1.15em; }
.single .entry-content > p:first-of-type::first-letter {
  font-family: var(--hr-display);
  float: left;
  font-size: 3.4em;
  line-height: 0.9;
  padding: 0.06em 0.12em 0 0;
  color: var(--hr-accent);
}
.single .entry-content blockquote {
  border-left: 4px solid var(--hr-accent);
  background: var(--hr-accent-soft);
  margin: 1.4em 0;
  padding: 0.8em 1.1em;
  font-style: italic;
  border-radius: 0 10px 10px 0;
}
.single .entry-content hr { border: 0; text-align: center; margin: 2em 0; }
.single .entry-content hr::after { content: "\2766"; color: var(--hr-accent); font-size: 24px; }

/* Ẩn thông tin không cần cho truyện */
.entry-meta .byline,
.entry-meta .posted-on,
.comments-link,
.cat-links,
.tags-links,
.comments-area,
.post-navigation,
.single footer.entry-meta { display: none !important; }

/* ---------- Story parts (multi-page) ---------- */
.hr-parts { text-align: center; margin: 40px 0 8px; }
.hr-next {
  display: inline-block;
  background: var(--hr-accent);
  color: #fff !important;
  font-family: var(--hr-display);
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  padding: 18px 44px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(160, 50, 43, .25);
  transition: background .2s, transform .2s;
}
.hr-next:hover { background: var(--hr-accent-dark); transform: translateY(-2px); }
.hr-end { font-family: var(--hr-display); font-size: 26px; font-style: italic; color: var(--hr-accent); }
.hr-part-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  color: var(--hr-muted);
  font-size: 16px;
}
.hr-part-list a, .hr-part-list .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--hr-border);
  background: var(--hr-surface);
  text-decoration: none;
  font-weight: 700;
}
.hr-part-list .current { background: var(--hr-ink); color: #fff; border-color: var(--hr-ink); }

.hr-disclaimer {
  max-width: 740px;
  margin: 36px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--hr-border);
  color: var(--hr-muted);
  font-size: 15px;
  font-style: italic;
  text-align: center;
}

/* ---------- Related stories ---------- */
.hr-related { max-width: 960px; margin: 56px auto 0; }
.hr-related h2 { text-align: center; font-size: 30px; margin-bottom: 24px; }
.hr-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.hr-related-card {
  display: flex;
  flex-direction: column;
  background: var(--hr-surface);
  border: 1px solid var(--hr-border);
  border-radius: var(--hr-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--hr-ink);
}
.hr-related-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; display: block; }
.hr-related-card .hr-noimg { aspect-ratio: 4 / 3; background: var(--hr-accent-soft); display: flex; align-items: center; justify-content: center; color: var(--hr-accent); font-size: 40px; }
.hr-related-card span.hr-rt { font-family: var(--hr-display); font-weight: 700; font-size: 20px; line-height: 1.3; padding: 16px 18px 20px; }
.hr-related-card:hover span.hr-rt { color: var(--hr-accent); }

/* ---------- Footer ---------- */
.site-info { background: var(--hr-ink); color: #d9cfc6; }
.inside-site-info { padding: 34px 20px; font-size: 16px; }
.hr-footer { text-align: center; width: 100%; }
.hr-footer .hr-footer-title { font-family: var(--hr-display); font-size: 24px; color: #fff; margin-bottom: 8px; }
.hr-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 12px 0; }
.hr-footer a { color: #f3e3dc; text-decoration: none; }
.hr-footer a:hover { color: #fff; text-decoration: underline; }
.hr-footer small { display: block; color: #a99c92; font-size: 14px; }

/* ---------- Back to top ---------- */
a.generate-back-to-top {
  background: var(--hr-accent);
  color: #fff;
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 999px;
  right: 20px;
  left: auto;
  bottom: 24px;
  box-shadow: 0 6px 16px rgba(42, 36, 32, .2);
}
a.generate-back-to-top:hover, a.generate-back-to-top:focus { background: var(--hr-accent-dark); color: #fff; }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  body { font-size: 18px; }
  .inside-header { padding: 14px 16px 8px; }
  .main-title { font-size: 28px; }
  .main-navigation .main-nav ul li a, .menu-toggle { line-height: 44px; font-size: 15px; }
  .single .entry-title { font-size: 28px; margin-bottom: 10px; }
  .single .entry-header { margin-bottom: 16px; }
  .featured-image.page-header-image-single { margin-bottom: 20px; }
  .featured-image.page-header-image-single img { max-height: 34vh; aspect-ratio: 4 / 3; }
  .site-description { font-size: 16px; }
  .site-content { padding: 20px 16px 40px !important; }
  .single .entry-content { font-size: calc(20px * var(--hr-scale)); }
  .hr-next { font-size: 21px; padding: 16px 32px; width: 100%; }
  .blog .site-main, .archive .site-main, .search .site-main { grid-template-columns: 1fr; gap: 22px; }
}