/* ==========================================================================
   BLOG-SINGLE.CSS — Single blog post layout for driov.com
   Blocksy: single_blog_post_structure = type-4 → data-content="normal"

   LAYOUT PRINCIPLE:
   - ct-container-full is full viewport width (100vw)
   - Blocksy's is-width-constrained and is-layout-constrained use 90vw
     (5vw margins), misaligned with nav/footer which use --d-gap (7.5vw).
   - We override ALL three regions (hero, entry-content, related posts)
     to use the unified padding: 0 var(--d-gap) approach.
   ========================================================================== */

/* ── §1. Remove Blocksy's default vertical spacing ─────────────────── */
.single-post .ct-container-full[data-vertical-spacing] {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
}

/* ── §2. Hero section ────────────────────────────────────────────────
   Vertical rhythm + border — same as Private Label reference page.
   ─────────────────────────────────────────────────────────────────── */
.single-post .hero-section {
  padding-top:    clamp(56px, 7vw, 96px) !important;
  padding-bottom: clamp(36px, 4vw, 56px) !important;
  border-bottom:  1px solid var(--d-gray-200);
  text-align:     left;
}

/* §2b. Hero section horizontal alignment ────────────────────────────
   Blocksy's is-width-constrained = width: min(100%, 90vw) + margin-inline: auto
   → only 5vw side margins, misaligned with nav/footer (7.5vw = --d-gap).
   Switch to explicit padding approach used by every other page section. */
.single-post .hero-section.is-width-constrained {
  width: 100% !important;
  max-width: calc(var(--d-max-w) + 2 * var(--d-gap)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--d-gap) !important;
  padding-right: var(--d-gap) !important;
  box-sizing: border-box !important;
}


/* Flex column so we can reorder: category label → title → description */
.single-post .entry-header {
  display:        flex;
  flex-direction: column;
}

/* Category label: float to top via order:-1 */
.single-post .entry-header .entry-meta {
  order:      -1;
  display:    flex  !important;
  margin:     0 0 1.25rem !important;
  padding:    0 !important;
  list-style: none;
  gap:        0;
}

/* Hide author avatar + date; keep only category */
.single-post .entry-header .entry-meta .meta-author,
.single-post .entry-header .entry-meta .meta-date {
  display: none !important;
}

/* Style category as small uppercase label (matches "BRAND IDENTITY" in ref) */
.single-post .entry-header .entry-meta .meta-categories,
.single-post .entry-header .entry-meta .meta-categories a {
  font-size:       0.6875rem;
  font-weight:     600;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--d-gray-500);
  text-decoration: none;
}

/* Title: large, light-weight, left-aligned */
.single-post .entry-header .page-title {
  font-size:      clamp(2rem, 4vw, 3.25rem);
  font-weight:    300;
  letter-spacing: -0.04em;
  color:          var(--d-black);
  line-height:    1.15;
  margin:         0 0 1rem;
}

/* Description: smaller grey text, left-aligned, comfortable line length */
.single-post .entry-header .page-description {
  font-size:   0.9375rem;
  color:       var(--d-gray-500);
  line-height: 1.7;
  max-width:   560px;
  margin:      0;
}
.single-post .entry-header .page-description p { margin: 0; }

/* ── §3. Entry-content: container alignment ──────────────────────────
   Blocksy's is-layout-constrained children get width: var(--theme-block-width)
   (≈ 90vw) but NO margin:auto → they left-align at position 0 of the
   100vw ct-container-full, giving ~5vw left margin instead of --d-gap.
   Fix: pad the container itself with --d-gap, then let children fill it.
   ─────────────────────────────────────────────────────────────────── */
.single-post .entry-content.is-layout-constrained {
  width: 100% !important;
  max-width: calc(var(--d-max-w) + 2 * var(--d-gap)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--d-gap) !important;
  padding-right: var(--d-gap) !important;
  box-sizing: border-box !important;
  padding-top:    clamp(48px, 6vw, 80px) !important;
  padding-bottom: 96px !important;
}

/* §3b. Children: fill the padded container ──────────────────────────
   Override Blocksy's width: var(--theme-block-width) so blocks span
   the full content area (container minus padding) and don't left-shift. */
.single-post .entry-content.is-layout-constrained > * {
  width:     100% !important;
  max-width: 100% !important;
}

/* Category tag in body: hidden (hero already shows category) */
.single-post .entry-content .driov-post-category-tag { display: none !important; }

/* Spacers: covered by §3b but explicit for clarity */
.single-post .entry-content .wp-block-spacer {
  max-width: 100% !important;
  width:     100% !important;
}

/* ── §4. Wide blocks — visual styling ───────────────────────────────
   Horizontal extent is handled by §3b (children fill padded container).
   This section only sets visual overrides: rounded corners, grey bg, etc.
   ─────────────────────────────────────────────────────────────────── */
.single-post .entry-content .alignwide {
  box-sizing: border-box;
}

/* Wide image: rounded corners */
.single-post .entry-content .wp-block-image.alignwide img {
  border-radius: var(--d-radius-card);
  display:       block;
  width:         100%;
  height:        auto;
}

/* Wide two-column panel: light grey background */
.single-post .entry-content .wp-block-columns.alignwide {
  background:    var(--d-gray-100);
  border-radius: var(--d-radius-card);
  padding:       clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
  gap:           clamp(28px, 4vw, 56px);
  align-items:   center;
}

/* Column inner elements: unconstrained within their column */
.single-post .entry-content .wp-block-columns.alignwide .wp-block-column > * {
  max-width: 100% !important;
}

/* ── §5. Typography ──────────────────────────────────────────────────
   Matches site scale: weight 300 for section headings, 600 for labels.
   ─────────────────────────────────────────────────────────────────── */
.single-post .entry-content h2.wp-block-heading {
  font-size:      clamp(1.5rem, 2.5vw, 2.125rem);
  font-weight:    300;
  letter-spacing: -0.03em;
  color:          var(--d-black);
  line-height:    1.2;
  margin-top:     0 !important;
  margin-bottom:  1.25rem !important;
}

.single-post .entry-content h4.wp-block-heading {
  font-size:      0.9375rem;
  font-weight:    600;
  letter-spacing: -0.01em;
  color:          var(--d-black);
  margin-top:     0 !important;
  margin-bottom:  0.75rem !important;
}

.single-post .entry-content p {
  font-size:     0.9375rem;
  color:         #4b5563;
  line-height:   1.85;
  margin-top:    0 !important;
  margin-bottom: 1.25em !important;
}

.single-post .entry-content p em { color: var(--d-gray-500); }

/* ── §6. Care-tip list — divider rows ───────────────────────────────
   Each item separated by 1px grey lines, matching spec-row style.
   ─────────────────────────────────────────────────────────────────── */
.single-post .entry-content ul.wp-block-list {
  list-style:    none !important;
  padding-left:  0    !important;
  margin-top:    0    !important;
  margin-bottom: 1.5em !important;
}

.single-post .entry-content ul.wp-block-list li {
  padding:       1.125rem 0;
  border-bottom: 1px solid var(--d-gray-200);
  font-size:     0.9375rem;
  color:         #4b5563;
  line-height:   1.75;
  margin-bottom: 0 !important;
}

.single-post .entry-content ul.wp-block-list li:first-child {
  border-top: 1px solid var(--d-gray-200);
}

.single-post .entry-content ul.wp-block-list li strong {
  display:        block;
  font-size:      0.875rem;
  font-weight:    600;
  letter-spacing: 0.01em;
  color:          var(--d-black);
  margin-bottom:  3px;
}

/* Remove <br> gap after display:block strong */
.single-post .entry-content ul.wp-block-list li br { display: none; }

/* ── §7. Links ────────────────────────────────────────────────────── */
.single-post .entry-content a {
  color:                 var(--d-black);
  text-decoration:       underline;
  text-underline-offset: 3px;
}
.single-post .entry-content a:hover { color: var(--d-gray-500); }

/* ── §8. Related posts ("You May Also Like") ─────────────────────────
   The related-posts section is hardcoded HTML in each post's content
   (wp:html block). Blocksy's ct-related-posts-container is not used.
   Horizontal alignment is handled by §3b (entry-content children fill
   the padded container).
   ─────────────────────────────────────────────────────────────────── */