/* ============================================================
   TANVI BLOG — minimal styles (compact, native CSS nesting)
   Heading system: eyebrows are real h-tags (SEO weight);
   display headings are styled paragraphs (visual only).
   ============================================================ */


/* ------------------------------------------------------------
   1. Article elements (scoped to the post content)
   ------------------------------------------------------------ */

.brxe-post-content {

  /* Semantic headings (eyebrows and h-tags) */
  h1, h2, h3, h4 {
    font-family: var(--tnv-font-serif);
    font-weight: 400;
    font-style: italic;
    line-height: var(--tnv-lh-heading);
    color: var(--tnv-honey);
  }

  h1 { font-size: var(--tnv-text-h1); margin-bottom: var(--tnv-space-6); }
  h1.post-title { font-style: normal; }
  h2 { font-size: var(--tnv-text-h2); margin: var(--tnv-space-8) 0 var(--tnv-space-4); }
  h3 { font-size: var(--tnv-text-h3); margin: var(--tnv-space-7) 0 var(--tnv-space-3); }
  h4 { font-size: var(--tnv-text-h4); margin: var(--tnv-space-6) 0 var(--tnv-space-2); }

  /* Text */
  p, li {
    font-family: var(--tnv-font-sans);
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
  }

  p { margin-bottom: var(--tnv-space-5); }

  ul, ol { padding-left: 24px; margin-bottom: var(--tnv-space-5); }
  ul { list-style: disc; }
  ol { list-style: decimal; }
  li { margin-bottom: var(--tnv-space-2); }

  strong { font-weight: var(--tnv-fw-bold); color: rgba(255, 255, 255, 0.85); }

  /* Links */
  a {
    color: var(--tnv-honey);
    text-decoration: underline;
    text-underline-offset: 3px;

    &:hover { opacity: 0.6; }
  }

  /* Meta and intro */
  .post-meta {
    font-family: var(--tnv-font-sans);
    font-size: var(--tnv-text-caption);
    text-transform: uppercase;
    letter-spacing: var(--tnv-ls-wide);
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: var(--tnv-space-7);
  }

  .post-intro {
    font-size: var(--tnv-text-editorial);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
  }

  /* ------------------------------------------------------------
     1b. Display headings: look like h2/h3, carry no SEO weight.
     Eyebrows (h2.tnv-label) sit on top; the display follows.
     ------------------------------------------------------------ */

  .tanvi-heading {
    font-family: var(--tnv-font-serif);
    font-weight: 400;
    font-style: italic;
    line-height: var(--tnv-lh-heading);
    color: var(--tnv-honey);
  }

  .tanvi-heading--h2 { font-size: var(--tnv-text-h2); margin: var(--tnv-space-8) 0 var(--tnv-space-4); }
  .tanvi-heading--h3 { font-size: var(--tnv-text-h3); margin: var(--tnv-space-7) 0 var(--tnv-space-3); }

  /* No gap between an eyebrow and its display heading */
  .tnv-label + .tanvi-heading { margin-top: 0; }

  /* Shared small label: works as p (box labels) or h-tag (eyebrows) */
  .tnv-label {
    margin: 0 0 var(--tnv-space-2);
    font-family: var(--tnv-font-sans);
    font-style: normal;
    font-size: var(--tnv-text-caption);
    font-weight: var(--tnv-fw-bold);
    letter-spacing: var(--tnv-ls-wide);
    text-transform: uppercase;
    color: var(--tnv-apricot);
  }

  /* ------------------------------------------------------------
     2. Blockquote: centred quotation mark on top, serif, 4x+
     ------------------------------------------------------------ */

  blockquote {
    position: relative;
    margin: var(--tnv-space-8) 0;
    padding: clamp(5rem, 10vw, 7rem) clamp(1.5rem, 6vw, 5rem) var(--tnv-space-7);
    border-left: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: var(--tnv-lh-heading);
    color: var(--tnv-honey);
    text-align: center;

    &::before {
      content: "\201C";
      position: absolute;
      top: var(--tnv-space-4);
      left: 50%;
      transform: translateX(-50%);
      font-size: clamp(4rem, 8vw, 6rem);
      line-height: 1;
      color: var(--tnv-apricot);
    }

    p:last-child { margin-bottom: 0; }
  }

  /* Quote source: person's name + linked source */
  .quote-source {
    margin-top: var(--tnv-space-5);
    font-family: var(--tnv-font-sans);
    font-style: normal;
    font-size: var(--tnv-text-caption);
    letter-spacing: var(--tnv-ls-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);

    strong { color: var(--tnv-apricot); }
  }

  /* ------------------------------------------------------------
     3. Images and divider
     ------------------------------------------------------------ */

  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--tnv-space-7) auto 0;
    border-radius: var(--tnv-radius-sm);
  }

  figcaption {
    font-family: var(--tnv-font-sans);
    font-size: var(--tnv-text-caption);
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    margin: var(--tnv-space-3) 0 var(--tnv-space-6);
  }

  hr {
    border: 0;
    height: 1px;
    background: rgba(252, 209, 144, 0.2);
    margin: var(--tnv-space-8) 0;
  }
}


/* ------------------------------------------------------------
   4. CTA (no eyebrow; heading is display-only, not a real h-tag)
   One per article, before the FAQs.
   ------------------------------------------------------------ */

.tanvi-post-cta {
  background-color: var(--tnv-honey, #fcd190);
  padding: clamp(2rem, 5vw, 4.5rem);
  margin: var(--tnv-space-8) 0;
  border-radius: var(--tnv-radius-sm);

  .tanvi-post-cta__heading {
    margin: 0 0 var(--tnv-space-4);
    font-family: var(--tnv-font-serif);
    font-weight: 400;
    font-style: italic;
    font-size: var(--tnv-text-h2);
    line-height: var(--tnv-lh-heading);
    color: var(--tnv-ink, #1d1d1b);
  }

  > p:not(.tanvi-post-cta__heading) {
    margin: 0 0 var(--tnv-space-5);
    color: rgba(29, 29, 27, 0.8);
  }

  .tanvi-post-cta__button {
    display: inline-block;
    padding: 0.8rem 1.25rem;
    font-family: var(--tnv-font-sans);
    font-weight: var(--tnv-fw-bold);
    letter-spacing: var(--tnv-ls-wide);
    text-transform: uppercase;
    text-decoration: none;
    background-color: var(--tnv-ink, #1d1d1b);
    color: var(--tnv-honey, #fcd190);
    border-radius: var(--tnv-radius-sm);
    transition: transform 0.2s ease;

    &:hover {
      opacity: 1;
      color: var(--tnv-honey, #fcd190);
      transform: translateY(-2px);
    }

    &:focus-visible {
      outline: 2px solid var(--tnv-ink, #1d1d1b);
      outline-offset: 4px;
    }
  }

  @media (max-width: 478px) {
    padding: 2rem 1.5rem;

    .tanvi-post-cta__button { width: 100%; text-align: center; }
  }
}


/* ------------------------------------------------------------
   5. Panel grid (bordered cards, slightly lifted background)
   ------------------------------------------------------------ */

.tanvi-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tnv-space-5);
  margin: var(--tnv-space-7) 0;

  div {
    padding: var(--tnv-space-5);
    border: 1px solid rgba(252, 209, 144, 0.2);
    border-radius: var(--tnv-radius-sm);
    background: rgba(252, 209, 144, 0.04);
  }

  h3, .tanvi-heading { margin-top: 0; }
  p:last-child { margin-bottom: 0; }
}

@media (min-width: 479px) {
  .tanvi-panels { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .tanvi-panels { grid-template-columns: repeat(3, 1fr); }
}


/* ------------------------------------------------------------
   6. Highlight box
   ------------------------------------------------------------ */

.tanvi-highlight {
  margin: var(--tnv-space-7) 0;
  padding: var(--tnv-space-5);
  background: rgba(252, 209, 144, 0.06);
  border-left: 2px solid var(--tnv-honey);
  border-radius: var(--tnv-radius-sm);

  h3 { margin: 0 0 var(--tnv-space-2); }
  p:last-child { margin-bottom: 0; }
}


/* ------------------------------------------------------------
   7. At a glance (boxed highlight list, thin border)
   Placed at the top, straight after the intro paragraph.
   ------------------------------------------------------------ */

.tanvi-glance {
  margin: var(--tnv-space-7) 0;
  padding: var(--tnv-space-5);
  border: 1px solid rgba(252, 209, 144, 0.2);
  border-radius: var(--tnv-radius-sm);

  ul { margin: 0; }
  p:last-child { margin: var(--tnv-space-3) 0 0; }
}


/* ------------------------------------------------------------
   8. Key takeaway (optional; for long articles without a
   glance box. Skip in short articles, the intro does the job)
   ------------------------------------------------------------ */

.tanvi-takeaway {
  margin: var(--tnv-space-8) 0;
  padding: var(--tnv-space-3) 0 var(--tnv-space-3) var(--tnv-space-5);
  border-left: 2px solid var(--tnv-apricot);
  font-family: var(--tnv-font-serif);
  font-style: italic;
  font-size: var(--tnv-text-editorial);
  line-height: var(--tnv-lh-heading);
  color: var(--tnv-honey);
}


/* ------------------------------------------------------------
   9. Practical details (table-like rows, wide label column)
   ------------------------------------------------------------ */

.tanvi-details {
  margin: var(--tnv-space-7) 0;
  font-family: var(--tnv-font-sans);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);

  div {
    display: grid;
    grid-template-columns: minmax(11rem, 14rem) 1fr;
    gap: var(--tnv-space-4);
    padding: var(--tnv-space-2) 0;
    border-bottom: 1px solid rgba(252, 209, 144, 0.15);
    text-align: left;

    &:last-child { border-bottom: 0; }
  }

  strong { color: var(--tnv-honey); }

  @media (max-width: 478px) {
    div { grid-template-columns: 1fr; gap: 0; }
  }
}


/* ------------------------------------------------------------
   10. FAQ (question in honey strong, answer below)
   Heading is a display paragraph, not an h-tag.
   ------------------------------------------------------------ */

.tanvi-faq {
  .tanvi-heading { margin-top: 0; }
  strong { color: var(--tnv-honey); }
  p { margin-bottom: var(--tnv-space-2); }
  p + p { margin-bottom: var(--tnv-space-6); }
}


/* ------------------------------------------------------------
   11. Keep reading (top hairline)
   Always last in the article, after the FAQs.
   ------------------------------------------------------------ */

.tanvi-related {
  margin-top: var(--tnv-space-8);
  padding-top: var(--tnv-space-5);
  border-top: 1px solid rgba(252, 209, 144, 0.2);

  h3, .tanvi-heading { margin-top: 0; }
}