/* ==========================================================================
   LeeFlora — section header
   ==========================================================================

   The block that opens a band: a small overline, the title, a short gold rule,
   and one line of lead underneath. Four parts, all optional — a section with
   only a title is a normal thing to want.

   Same house rules as brand.css and anim.css: scoped to body.elementor-kit-840,
   no !important anywhere, every var() carries a literal fallback so the block
   looks right even if the panel value is never set.

   The values are the ones this block was designed around, not rounded guesses.
   Two of them are worth knowing because they are not the obvious choice:

     * the overline is GREY, not gold. It is easy to read it as gold, because a
       #c9a96e is written inline on the span — but that value is overridden to
       #5a5049 further down the cascade, and grey is what actually renders.
       Taking the inline value at face value would have been wrong.
     * the lead is 15px / line-height 1.9 and capped at 760px, so it sits in a
       measured column under the title instead of running the full width.

   Its letter-spacing is 3px on a 12px overline — a quarter of the type size.
   That is what makes the part read as a label rather than as small text, and it
   is the value most likely to be "tidied" down to something more normal. */

body.elementor-kit-840 .lee-head__overline {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--lee-grey, #5a5049);
}

body.elementor-kit-840 .lee-head__title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--lee-ink, #2d2926);
  text-wrap: balance;
}

/* A rule, not a divider: it is decoration, so it is a span the screen reader is
   told to skip rather than an <hr>, which would announce a thematic break that
   is not there. 6% of the column keeps it short and deliberate; the floor stops
   it disappearing on a narrow one. */
body.elementor-kit-840 .lee-head__rule {
  display: block;
  width: var(--lee-rule-width, 6%);
  min-width: 40px;
  max-width: 140px;
  margin: 20px auto;
  border: 0;
  border-top: 1px solid var(--lee-rule, var(--lee-gold, #b89456));
}

body.elementor-kit-840 .lee-head__desc {
  max-width: var(--lee-head-lead-width, 760px);
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.9;
  color: var(--lee-grey, #5a5049);
  text-wrap: pretty;
}

/* Centred is the default, and it is the block's whole manner: the overline, the
   title, the rule and the lead all sit on one axis.

   Stated here rather than left to whatever the block is dropped into. The rule
   and the lead are centred by `margin: auto`, which does not care about
   text-align — so in a column that is not itself centred, an inherited
   alignment puts the text on the left while the rule and the lead stay in the
   middle, which reads as broken rather than as a choice. That is exactly what
   happened the first time this shipped: there were rules for the start and end
   variants and none for the case everything actually uses. */
body.elementor-kit-840 .lee-head {
  text-align: center;
}

/* The two variants. The rule and the lead follow the block's alignment rather
   than staying centred — a centred rule under a left-aligned title reads as a
   mistake. These come after the rule above so they win at equal specificity. */
body.elementor-kit-840 .lee-head--start {
  text-align: start;
}

body.elementor-kit-840 .lee-head--start .lee-head__rule {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

body.elementor-kit-840 .lee-head--start .lee-head__desc {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

body.elementor-kit-840 .lee-head--end {
  text-align: end;
}

body.elementor-kit-840 .lee-head--end .lee-head__rule {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

body.elementor-kit-840 .lee-head--end .lee-head__desc {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* All four parts tighten in step on a phone — the title drops to 22px, the lead
   to 14px, and the rule's breathing room roughly halves. */
@media (max-width: 921px) {
  body.elementor-kit-840 .lee-head__title {
    font-size: 22px;
    line-height: 1.4;
  }

  body.elementor-kit-840 .lee-head__rule {
    margin: 12px auto;
  }

  body.elementor-kit-840 .lee-head__desc {
    font-size: 14px;
    line-height: 1.75;
  }

  body.elementor-kit-840 .lee-head--start .lee-head__rule,
  body.elementor-kit-840 .lee-head--start .lee-head__desc {
    margin-inline-start: 0;
    margin-inline-end: auto;
  }

  body.elementor-kit-840 .lee-head--end .lee-head__rule,
  body.elementor-kit-840 .lee-head--end .lee-head__desc {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }
}