/* =============================================================================
   BLOG POST SKIN v1.3 — vidhukhare.com
   Makes WordPress single-post pages match the v2/v3 site design
   (cream + wine + Cinzel Decorative / PT Serif / Outfit).
   v1.3 (2026-09-18): FONTS v2 — Cinzel Decorative for the post title + h2,
   PT Serif for body copy and h3/h4 (site-wide type change).
   v1.1 (2026-07-02): adds the LAYOUT section — stacks the theme's
   two-column post template into one centered article and hides the duplicated
   excerpt block. Re-verified against the live post (postid-336).
   v1.2 (2026-07-02): styles the Jetpack Sharing Buttons block (WhatsApp /
   LinkedIn / Mail / etc.) to match — cream/wine pills, centered. NOTE: the
   legacy auto-append "Share this:" + "Like this:" module is a separate feature;
   turn it off in Settings → Sharing so the buttons don't appear twice.

   WHERE TO PASTE (one time only):
   1. Open https://vidhukhare.com/wp-admin/customize.php
      (block themes hide the Customizer menu link, but the URL works)
   2. Click "Additional CSS"
   3. Paste this ENTIRE file → Publish
   Alternative on newer WP: Appearance → Editor → Styles → ⋮ → Additional CSS.

   ASSUMPTION (verify after pasting): selectors target the markup of the
   `substrata` block theme as observed live on 2026-07-02
   (body.single-post, .wp-site-blocks, .wp-block-post-title,
   .wp-block-post-content, .wp-block-post-date). If the theme is ever
   updated or switched, this skin needs re-verification — it is additive
   only, so the worst case is an unstyled but fully functional post page.
   The Elementor kit (elementor-kit-43) sets global variables with high
   specificity; a few !important flags below exist only to win those.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@300;400;500;600&display=swap');

/* ---- page surface: warm cream, matching the rest of the site ---- */
body.single-post,
body.single-post .wp-site-blocks,
body.archive .wp-site-blocks,
body.blog .wp-site-blocks {
  background: linear-gradient(180deg, #F5E9DC 0%, #F1E0CF 50%, #F5E9DC 100%) !important;
  color: #2A1A14;
}

/* ---- post title: Cinzel Decorative ---- */
body.single-post .wp-block-post-title {
  font-family: 'Cinzel Decorative', 'PT Serif', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(1.6rem, 4.5vw, 2.5rem) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.01em;
  color: #3A1F15 !important;
}

/* ---- date / byline: Outfit eyebrow treatment ---- */
body.single-post .wp-block-post-date,
body.single-post .wp-block-post-date a,
body.single-post .wp-block-post-author-name,
body.single-post .wp-block-post-terms {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7A5C4B !important;
  text-decoration: none;
}

/* ---- body copy: PT Serif at a readable measure ---- */
body.single-post .wp-block-post-content {
  font-family: 'PT Serif', 'Iowan Old Style', Georgia, serif !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: #2A1A14 !important;
}
body.single-post .wp-block-post-content > * {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}
body.single-post .wp-block-post-content p {
  margin-bottom: 1.35em;
}

/* ---- headings inside the article ---- */
body.single-post .wp-block-post-content h2,
body.single-post .wp-block-post-content h3,
body.single-post .wp-block-post-content h4 {
  font-family: 'PT Serif', 'Iowan Old Style', Georgia, serif !important;
  font-weight: 700 !important;
  line-height: 1.2;
  color: #3A1F15 !important;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}
body.single-post .wp-block-post-content h2 { font-family: 'Cinzel Decorative', 'PT Serif', Georgia, serif !important; font-weight: 400 !important; font-size: 1.5rem !important; line-height: 1.3; }
body.single-post .wp-block-post-content h3 { font-size: 1.35rem !important; }
body.single-post .wp-block-post-content em {
  color: #9C3A4A;
}

/* ---- links: wine, underlined ---- */
body.single-post .wp-block-post-content a {
  color: #9C3A4A !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body.single-post .wp-block-post-content a:hover { color: #82303C !important; }

/* ---- blockquote: wine left border, matching site callouts ---- */
body.single-post .wp-block-post-content blockquote,
body.single-post .wp-block-quote {
  border-left: 2px solid #9C3A4A !important;
  background: #FAF1E5;
  border-radius: 0 12px 12px 0;
  padding: 18px 22px !important;
  margin-left: 0;
  font-style: italic;
  color: #5C4131;
}

/* ---- lists ---- */
body.single-post .wp-block-post-content ul,
body.single-post .wp-block-post-content ol {
  padding-left: 1.2em;
  margin-bottom: 1.35em;
}
body.single-post .wp-block-post-content li { margin-bottom: 0.5em; }

/* ---- images & captions ---- */
body.single-post .wp-block-post-content img,
body.single-post .wp-block-post-featured-image img {
  border-radius: 14px;
}
body.single-post .wp-block-post-content figcaption {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #7A5C4B;
  text-align: center;
}

/* ---- keyboard focus, matching the site ---- */
body.single-post a:focus-visible,
body.single-post button:focus-visible {
  outline: 2px solid #9C3A4A;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- light touch for archive/list views (date archives stay reachable) ---- */
body.archive .wp-block-post-title,
body.blog .wp-block-post-title {
  font-family: 'Cinzel Decorative', 'PT Serif', Georgia, serif !important;
  font-weight: 400 !important;
  color: #3A1F15 !important;
}
body.archive .wp-block-post-title a,
body.blog .wp-block-post-title a {
  color: inherit !important;
  text-decoration: none;
}
body.archive .wp-block-post-title a:hover,
body.blog .wp-block-post-title a:hover { color: #9C3A4A !important; }

/* NOTE: this skin deliberately does NOT restyle the theme's header/nav into
   the custom site nav — that is too fragile from CSS alone. Its job is the
   reading surface. Readers reach articles from /blog/, which carries the
   full site chrome. */

/* =============================================================================
   v1.1 LAYOUT — stack the substrata two-column post template into one
   centered article. Selectors re-verified against the live post on
   2026-07-02 (body.single-post postid-336): the template is wp-block-columns
   flex rows with meta (site title / date / author) in a narrow left column
   and the article in the right one, plus a wp-block-post-excerpt block that
   duplicates the article's opening.
   ========================================================================== */

/* ---- one column: stack every columns row inside the post template ---- */
body.single-post main .wp-block-columns {
  display: block !important;
}
body.single-post main .wp-block-column {
  width: 100% !important;
  flex-basis: auto !important;
  margin-bottom: 0;
}

/* ---- hide the theme's auto excerpt (it duplicates the article lead) ---- */
body.single-post .wp-block-post-excerpt { display: none !important; }

/* ---- title centered on the reading measure ---- */
body.single-post .wp-block-post-title {
  max-width: 26ch;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 18px;
  text-align: left;
}

/* ---- "vidhukhare.com" site-title (the reader's route back): wine eyebrow ---- */
body.single-post main .wp-block-site-title,
body.single-post main .wp-block-site-title a {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.7rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9C3A4A !important;
  text-decoration: none;
}
body.single-post main .wp-block-site-title {
  max-width: 68ch;
  margin: 0 auto 6px;
}

/* ---- date + author as one centered meta line above the article ---- */
body.single-post main .wp-block-post-date,
body.single-post main .wp-block-post-author {
  display: inline-flex;
  vertical-align: middle;
}
body.single-post main .wp-block-post-author__avatar { display: none !important; }
body.single-post main .wp-block-post-author__name,
body.single-post main .wp-block-post-author__name a {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7A5C4B !important;
  text-decoration: none;
}
/* the group that carries date + author becomes a centered hairline-ruled row
   (the theme nests them in a vertical wp-block-group inside the meta column) */
body.single-post main .wp-block-group:has(.wp-block-post-date) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  max-width: 68ch;
  margin: 6px auto 26px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid #E0C5AE;
}

/* ---- content block centered: the theme's constrained layout pins it left
   with `is-content-justification-left` (margin rules carry !important) ---- */
body.single-post main .wp-block-column .wp-block-post-content,
body.single-post .wp-block-post-content {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =============================================================================
   v1.2 SHARING BUTTONS — style the Jetpack Sharing Buttons block
   (ul.wp-block-jetpack-sharing-buttons > li > a.jetpack-sharing-button__button
    .style-icon-text.share-<service>, verified on the live post 2026-07-02).
   IMPORTANT: this styles the BLOCK in your post template. The older
   auto-append "Share this:" + "Like this:" module is separate — switch it off
   in Settings → Sharing, or you'll see two sets of buttons.
   ========================================================================== */
body.single-post main .wp-block-jetpack-sharing-buttons {
  justify-content: center !important;
  gap: 10px !important;
  max-width: 68ch;
  margin: 8px auto 0;
}
body.single-post main .jetpack-sharing-button__button {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  color: #9C3A4A !important;
  background: #FAF1E5 !important;
  border: 1px solid #E0C5AE !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  transition: background .2s, color .2s, border-color .2s;
}
body.single-post main .jetpack-sharing-button__button:hover {
  background: #9C3A4A !important;
  border-color: #9C3A4A !important;
  color: #FAF1E5 !important;
}
/* icons follow the text colour so they read as one monochrome pill */
body.single-post main .jetpack-sharing-button__button .social-logo {
  fill: currentColor !important;
}

/* ---- if you keep the legacy "Share this:" module instead, this softens it ---- */
body.single-post .sd-sharing .sd-title,
body.single-post .sharedaddy h3.sd-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7A5C4B !important;
}