/*
Theme Name: Dumpling Tech Life
Theme URI: http://www.52dumpling.com/
Description: A refined technical blog with warm life notes — better typography, card visuals, and replaceable post images.
Author: Codex
Template: blocksy
Version: 1.1.2
Text Domain: dumpling-tech-life
*/

:root {
  --theme-palette-color-1: #0f766e;
  --theme-palette-color-2: #0b5f59;
  --theme-palette-color-3: #4c5b63;
  --theme-palette-color-4: #12212b;
  --theme-palette-color-5: #d7e4e5;
  --theme-palette-color-6: #eef6f3;
  --theme-palette-color-7: #f7fbf8;
  --theme-palette-color-8: #ffffff;
  --theme-link-initial-color: #0f766e;
  --theme-link-hover-color: #c46a36;
  --theme-headings-color: #12212b;
  --theme-text-color: #3d4e58;
  --theme-border-color: #d7e4e5;
  --theme-button-background-initial-color: #0f766e;
  --theme-button-background-hover-color: #c46a36;
  --theme-button-border-radius: 6px;
  --theme-normal-container-max-width: 1100px;
  --theme-content-vertical-spacing: 68px;
  --theme-content-spacing: 1.7em;
  --dumpling-ink: #12212b;
  --dumpling-muted: #63727a;
  --dumpling-line: #d7e4e5;
  --dumpling-panel: #ffffff;
  --dumpling-paper: #f7fbf8;
  --dumpling-accent: #0f766e;
  --dumpling-warm: #c46a36;
  --dumpling-code: #0d1b2a;
  --dumpling-deep: #10242f;
  --dumpling-soft: #edf7f3;
}

body {
  background:
    radial-gradient(circle at 18% 0, rgba(15, 118, 110, 0.12), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(196, 106, 54, 0.1), transparent 30%),
    linear-gradient(180deg, #f8fbf7 0, #eef6f3 380px, #f7fbf8 100%);
  color: var(--dumpling-ink);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 36, 47, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 36, 47, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, #000 0, transparent 620px);
}

a {
  text-underline-offset: 0.18em;
}

.site-main,
[data-vertical-spacing*="top"] {
  --theme-content-spacing: 1.65em;
}

[data-header*="type-1"] .ct-header [data-id="logo"] .site-title {
  --theme-link-initial-color: #f8fffb;
  --theme-link-hover-color: #ffffff;
  font-weight: 820;
  letter-spacing: 0;
}

[data-header*="type-1"] .ct-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 65px rgba(16, 36, 47, 0.18);
}

[data-header*="type-1"] .ct-header [data-row*="middle"] {
  --height: 96px;
  background:
    linear-gradient(135deg, rgba(16, 36, 47, 0.98), rgba(15, 118, 110, 0.92) 58%, rgba(196, 106, 54, 0.9));
}

[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
  --theme-link-initial-color: rgba(255, 255, 255, 0.84);
  --theme-link-hover-color: #ffffff;
}

[data-header*="type-1"] .ct-header [data-id="search"],
[data-header*="type-1"] .ct-header [data-id="trigger"] {
  --theme-icon-color: rgba(255, 255, 255, 0.86);
  --theme-icon-hover-color: #ffffff;
}

.site-title-container::after {
  content: "tech notes / life logs";
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-prefix="blog"] .site-main .ct-container::before {
  display: none;
}

.entry-card,
.ct-sidebar .ct-widget,
.post-navigation,
.ct-comments-container,
.ct-related-posts,
.author-box {
  border: 1px solid rgba(16, 36, 47, 0.08);
  box-shadow: 0 22px 60px rgba(30, 57, 68, 0.1);
}

.entry-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 251, 0.98));
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  display: flex;
  flex-direction: column;
}

.entry-card::before {
  content: "";
  display: block;
  height: 4px;
  order: 1;
  background: linear-gradient(90deg, var(--dumpling-accent), #58b7aa 55%, var(--dumpling-warm));
}

.entry-card [data-id="meta_1"],
.entry-card .entry-title {
  order: 0;
}

.entry-card .ct-media-container {
  order: 2;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: auto !important;
  margin-inline: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 6px;
}

.entry-card .ct-media-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto !important;
  transition: transform 320ms ease, filter 320ms ease;
}

.entry-card:hover .ct-media-container img {
  transform: scale(1.04);
  filter: saturate(1.1) brightness(1.02);
}

.entry-card .entry-excerpt {
  order: 3;
  color: #4e6069;
  line-height: 1.72;
}

.entry-card [data-id="meta_2"] {
  order: 4;
}

.entry-card:hover {
  transform: translateY(-5px);
  border-color: rgba(15, 118, 110, 0.28);
  box-shadow: 0 32px 80px rgba(30, 57, 68, 0.16);
}

.entry-card .entry-title {
  --theme-link-initial-color: #12212b;
  --theme-link-hover-color: #0f766e;
  font-weight: 760;
  letter-spacing: -0.01em;
}

.entry-card .entry-meta,
.entry-meta,
.ct-widget {
  color: var(--dumpling-muted);
}

.entry-card .meta-categories a,
.entry-card .entry-meta a[rel="tag"],
.entry-meta .meta-categories a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 6px;
  background: rgba(15, 118, 110, 0.08);
  color: #0b5f59;
  font-weight: 800;
}

.entry-meta .meta-date::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--dumpling-warm);
  vertical-align: 0.12em;
}

.hero-section[data-type="type-1"] {
  border-bottom: 1px solid rgba(20, 32, 43, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(237, 247, 243, 0.86));
}

[data-prefix="single_blog_post"] .hero-section,
[data-prefix="single_page"] .hero-section {
  padding-top: 32px;
  padding-bottom: 12px;
}

[data-prefix="single_blog_post"] .hero-section,
[data-prefix="single_page"] .hero-section {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

[data-prefix="single_blog_post"] .entry-header .page-title,
[data-prefix="single_page"] .entry-header .page-title {
  max-width: none;
  font-size: clamp(26px, 3.5vw, 42px);
  line-height: 1.24;
}

[data-prefix="single_blog_post"] .entry-header .entry-meta,
[data-prefix="single_page"] .entry-header .entry-meta {
  max-width: none;
}

.entry-content {
  font-size: 17px;
  line-height: 1.88;
  letter-spacing: 0.005em;
}

[data-prefix="single_blog_post"] article,
[data-prefix="single_page"] article {
  border-radius: 8px;
}

[data-prefix="single_blog_post"] .entry-content,
[data-prefix="single_page"] .entry-content {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
  padding: 20px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.entry-content h2,
.entry-content h3 {
  letter-spacing: 0;
  scroll-margin-top: 96px;
}

.entry-content h2 {
  padding-top: 0.4em;
  border-top: 1px solid rgba(15, 118, 110, 0.18);
  margin-top: 1.8em;
}

.entry-content blockquote {
  border-inline-start: 4px solid var(--dumpling-warm);
  background: rgba(196, 106, 54, 0.09);
  color: #33424d;
}

.entry-content code,
.entry-content pre {
  border-radius: 6px;
}

.entry-content code {
  background: rgba(15, 118, 110, 0.1);
  color: #0b5f59;
  padding: 0.13em 0.35em;
}

.entry-content pre {
  border: 1px solid rgba(15, 118, 110, 0.3);
  background:
    linear-gradient(180deg, #10242f, #0d1b2a);
  box-shadow:
    inset 4px 0 0 rgba(15, 118, 110, 0.95),
    0 20px 42px rgba(13, 27, 42, 0.18);
  color: #e9fbf5;
}

.entry-content pre,
.entry-content pre * {
  color: #e9fbf5 !important;
}

.entry-content pre code {
  background: transparent;
  color: #e9fbf5 !important;
  padding: 0;
}

.ct-breadcrumbs,
.post-tags a,
.tagcloud a {
  border-radius: 6px;
}

.post-tags a,
.tagcloud a {
  border: 1px solid rgba(15, 118, 110, 0.22);
  background: rgba(15, 118, 110, 0.07);
}

.ct-comments-container,
.post-navigation {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.ct-footer [data-row*="bottom"] {
  background:
    linear-gradient(135deg, rgba(16, 36, 47, 0.96), rgba(15, 118, 110, 0.88));
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}

.ct-footer [data-row*="bottom"],
.ct-footer [data-row*="bottom"] a,
.ct-footer [data-row*="bottom"] span,
.ct-footer-copyright,
.ct-footer-copyright * {
  color: rgba(255, 255, 255, 0.85) !important;
}

.ct-footer [data-row*="bottom"] a:hover,
.ct-footer-copyright a:hover {
  color: #fff !important;
}

.ct-footer-copyright .footer-slogan {
  font-weight: 600;
}

.ct-footer-copyright .footer-sep {
  margin: 0 10px;
  opacity: 0.5;
}

.ct-footer-copyright .footer-icp {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.ct-footer-copyright .footer-icp:hover {
  color: #fff;
}

.ct-footer {
  border-top: 1px solid rgba(20, 32, 43, 0.08);
  box-shadow: 0 -18px 54px rgba(16, 36, 47, 0.1);
}

/* Hide post author, its avatar, and separator */
.entry-meta .meta-author,
.entry-meta li.meta-author {
  display: none !important;
}
.entry-meta[data-type*="slash"] li.meta-date {
  border-left: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.entry-meta[data-type*="slash"] li.meta-date::before {
  display: none !important;
  content: none !important;
}

/* Remove harsh title background on single post hero */
[data-prefix="single_blog_post"] .hero-section {
  background: transparent !important;
  border-bottom: none !important;
}

/* Hide comment avatars */
.ct-comment-meta > figure.ct-media-container,
.ct-comment .ct-media-container,
.comment-list .avatar {
  display: none !important;
}

@media (max-width: 689.98px) {
  [data-header*="type-1"] .ct-header [data-row*="middle"] {
    --height: 76px;
  }

  .site-title-container::after {
    font-size: 10px;
  }

  [data-prefix="blog"] .site-main .ct-container::before {
    margin-top: -18px;
    padding: 14px 16px;
    font-size: 14px;
  }

  .entry-content {
    font-size: 16px;
    line-height: 1.78;
  }

  [data-prefix="single_blog_post"] .entry-content,
  [data-prefix="single_page"] .entry-content {
    padding: 24px 18px;
  }

  .entry-card,
  .ct-sidebar .ct-widget,
  .post-navigation,
  .ct-comments-container {
    box-shadow: 0 12px 28px rgba(30, 57, 68, 0.06);
  }

  .entry-card .ct-media-container {
    aspect-ratio: 16 / 10;
  }
}