/*
 * Dawn Art Insights Engine v0.2.0
 * Single Article / Reading Style
 * Scope: standard WordPress posts only.
 */

/* ---------------------------------------------------------
   01 / PAGE SURFACE
   --------------------------------------------------------- */

body.single-post {
  --da-article-orange: #F35B06;
  --da-article-navy: #253558;
  --da-article-text: #3F3F3F;
  --da-article-muted: #6E7582;
  --da-article-paper: #F4F2ED;
  --da-article-line: rgba(37,53,88,.14);
  --da-article-content: 820px;
  --da-article-wide: 1040px;
  --da-article-font-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --da-article-font-en: "Work Sans", "Avenir Next", Avenir, Arial, Helvetica, sans-serif;

  background: var(--da-article-paper) !important;
  color: var(--da-article-text) !important;
}

body.single-post #content.site-content,
body.single-post #primary,
body.single-post #main,
body.single-post .site-main,
body.single-post .ast-article-single {
  background: var(--da-article-paper) !important;
}

body.single-post .ast-article-single {
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   02 / ARTICLE AXIS
   --------------------------------------------------------- */

body.single-post .site-content .ast-container {
  width: min(100% - 40px, var(--da-article-wide)) !important;
  max-width: var(--da-article-wide) !important;
  margin-inline: auto !important;
}

body.single-post article.post .entry-header,
body.single-post article.post .entry-content,
body.single-post article.post .entry-footer {
  width: min(100%, var(--da-article-content)) !important;
  max-width: var(--da-article-content) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Some Astra versions place the featured image outside entry-header. */
body.single-post article.post .post-thumb,
body.single-post article.post .ast-single-post-featured-section,
body.single-post article.post .entry-image,
body.single-post article.post .ast-post-format- {
  width: min(100%, var(--da-article-wide)) !important;
  max-width: var(--da-article-wide) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------------------------------------------------------
   03 / ARTICLE HEADER
   --------------------------------------------------------- */

body.single-post article.post .entry-header {
  padding-top: 64px !important;
  padding-bottom: 26px !important;
}

body.single-post article.post .entry-title,
body.single-post article.post h1.entry-title {
  width: 100% !important;
  max-width: none !important;
  margin: 10px 0 12px !important;
  color: var(--da-article-navy) !important;
  font-family: var(--da-article-font-zh) !important;
  font-size: clamp(34px, 3.3vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  letter-spacing: -.03em !important;
  text-wrap: balance;
}

body.single-post article.post .entry-meta,
body.single-post article.post .entry-meta *,
body.single-post article.post .posted-on,
body.single-post article.post .cat-links,
body.single-post article.post .tags-links {
  color: var(--da-article-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body.single-post article.post .cat-links,
body.single-post article.post .ast-taxonomy-container,
body.single-post article.post .ast-terms-link {
  color: var(--da-article-orange) !important;
  font-family: var(--da-article-font-en) !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}

/* ---------------------------------------------------------
   04 / FEATURED IMAGE
   --------------------------------------------------------- */

body.single-post article.post .post-thumb,
body.single-post article.post .ast-single-post-featured-section {
  margin-top: 4px !important;
  margin-bottom: 46px !important;
}

body.single-post article.post .post-thumb img,
body.single-post article.post .ast-single-post-featured-section img,
body.single-post article.post .entry-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
  object-fit: contain !important;
}

/* ---------------------------------------------------------
   05 / READING TYPOGRAPHY
   --------------------------------------------------------- */

body.single-post article.post .entry-content {
  color: var(--da-article-text) !important;
  font-family: var(--da-article-font-zh) !important;
  font-size: 17px !important;
  line-height: 1.92 !important;
  letter-spacing: .008em !important;
}

body.single-post article.post .entry-content p,
body.single-post article.post .entry-content li {
  color: var(--da-article-text) !important;
}

body.single-post article.post .entry-content p {
  margin: 0 0 1.45em !important;
}

body.single-post article.post .entry-content ul,
body.single-post article.post .entry-content ol {
  margin: 0 0 1.6em 1.25em !important;
}

body.single-post article.post .entry-content li + li {
  margin-top: .45em !important;
}

/* H2: navy, not giant orange */
body.single-post article.post .entry-content h2 {
  width: 100% !important;
  max-width: none !important;
  margin: 2.15em 0 .72em !important;
  padding-top: .62em !important;
  border-top: 1px solid var(--da-article-line) !important;
  color: var(--da-article-navy) !important;
  font-family: var(--da-article-font-zh) !important;
  font-size: clamp(27px, 2.6vw, 36px) !important;
  font-weight: 800 !important;
  line-height: 1.38 !important;
  letter-spacing: -.022em !important;
}

/* Small orange accent before H2 */
body.single-post article.post .entry-content h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 13px;
  background: var(--da-article-orange);
}

/* H3 */
body.single-post article.post .entry-content h3 {
  width: 100% !important;
  max-width: none !important;
  margin: 1.85em 0 .65em !important;
  color: var(--da-article-navy) !important;
  font-family: var(--da-article-font-zh) !important;
  font-size: clamp(21px, 2vw, 27px) !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

/* H4 */
body.single-post article.post .entry-content h4 {
  margin: 1.55em 0 .55em !important;
  color: var(--da-article-navy) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
}

/* Links */
body.single-post article.post .entry-content a {
  color: var(--da-article-navy) !important;
  text-decoration-color: rgba(243,91,6,.5) !important;
  text-underline-offset: 3px;
}

body.single-post article.post .entry-content a:hover {
  color: var(--da-article-orange) !important;
}

/* ---------------------------------------------------------
   06 / CONTENT MEDIA
   --------------------------------------------------------- */

body.single-post article.post .entry-content figure,
body.single-post article.post .entry-content .wp-block-image {
  margin-top: 2em !important;
  margin-bottom: 2em !important;
}

body.single-post article.post .entry-content img {
  height: auto !important;
  border-radius: 14px;
}

body.single-post article.post .entry-content figcaption {
  margin-top: 8px !important;
  color: var(--da-article-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

/* Allow wide images/figures without making body copy too wide. */
body.single-post article.post .entry-content .alignwide {
  width: min(1040px, calc(100vw - 40px)) !important;
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ---------------------------------------------------------
   07 / TABLES & QUOTES
   --------------------------------------------------------- */

body.single-post article.post .entry-content table {
  width: 100% !important;
  margin: 2em 0 !important;
  border-collapse: collapse !important;
  background: rgba(255,255,255,.36) !important;
  color: var(--da-article-text) !important;
  font-size: 14px !important;
}

body.single-post article.post .entry-content th,
body.single-post article.post .entry-content td {
  padding: 12px 14px !important;
  border: 1px solid var(--da-article-line) !important;
  color: var(--da-article-text) !important;
  vertical-align: top !important;
}

body.single-post article.post .entry-content th {
  background: rgba(37,53,88,.06) !important;
  color: var(--da-article-navy) !important;
  font-weight: 800 !important;
}

body.single-post article.post .entry-content blockquote {
  margin: 2em 0 !important;
  padding: 18px 22px !important;
  border-left: 3px solid var(--da-article-orange) !important;
  background: rgba(37,53,88,.045) !important;
  color: var(--da-article-navy) !important;
}

body.single-post article.post .entry-content blockquote p:last-child {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   08 / REMOVE OLD BLOG VISUAL RESIDUE
   --------------------------------------------------------- */

body.single-post article.post .entry-content,
body.single-post article.post .entry-content section,
body.single-post article.post .entry-content div {
  text-shadow: none !important;
}

/* Old global heading rules are intentionally overridden only here. */
body.single-post h1,
body.single-post h2,
body.single-post h3 {
  text-wrap: pretty;
}

/* ---------------------------------------------------------
   09 / RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 820px) {
  body.single-post .site-content .ast-container {
    width: 80% !important;
    max-width: none !important;
  }

  body.single-post article.post .entry-header {
    padding-top: 48px !important;
  }

  body.single-post article.post .entry-content {
    font-size: 16px !important;
    line-height: 1.88 !important;
  }

  body.single-post article.post .post-thumb,
  body.single-post article.post .ast-single-post-featured-section {
    margin-bottom: 38px !important;
  }
}

@media (max-width: 520px) {
  body.single-post .site-content .ast-container {
    width: 84% !important;
  }

  body.single-post article.post .entry-header {
    padding-top: 38px !important;
    padding-bottom: 20px !important;
  }

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

  body.single-post article.post .entry-content h2 {
    margin-top: 1.8em !important;
    font-size: 27px !important;
  }

  body.single-post article.post .entry-content h3 {
    font-size: 22px !important;
  }

  body.single-post article.post .post-thumb img,
  body.single-post article.post .ast-single-post-featured-section img,
  body.single-post article.post .entry-image img,
  body.single-post article.post .entry-content img {
    border-radius: 10px !important;
  }

  body.single-post article.post .entry-content table {
    font-size: 13px !important;
  }
}