/* ==========================================================================
   LeeFlora — hero band
   ==========================================================================

   A photograph with a block of words over it: a small label, the title, an
   optional lead, a row of short facts, two buttons. On a wide screen the words
   take the right-hand 42% of the band and sit in the middle of it; on a narrow
   one they take the full width and sit along the bottom.

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

   Three of these values are worth knowing because the figure written down is
   not the one that renders — in each case a later rule cancels the first:

     * the title is 45px, not 48px. The larger figure is declared in one rule
       and cancelled by a later one; 45 is what the renderer computes.
     * the fact separator is the text colour, not the gold (#c9a96e) written
       on it. The gold is overridden further down the cascade and never shows.
     * on a phone the words are at the BOTTOM. The band is 640px tall and the
       column is aligned to the end, which is what puts the photograph above
       the type instead of behind it.

   Two deliberate departures worth knowing about:

     * the breakpoint is 921px. That is this theme's phone breakpoint, the one
       brand.css and sections.css already switch on. A band that changed shape
       at some other width would do so while the header above it stayed put.
     * the band carries an overlay. White type straight onto a photograph is
       only readable when the picture happens to be dark exactly where the type
       is, which is a property of one photograph and not of the band — so the
       overlay is a control with a default rather than an assumption.

   Nothing is layered over the photograph except that overlay. The picture, the
   type and the scrim carry the whole band, and a decorative flourish drawn on
   top would compete with all three. */

/* --------------------------------------------------------------------------
   The band
   --------------------------------------------------------------------------

   The band answers to the width it is given, not to the width of the window.
   Dropped into a column — or looked at in the editor, where the canvas is
   whatever is left beside the panel — those two are different, and a media
   query cannot tell them apart: a 500px band inside a 1400px window gets the
   wide-screen treatment and the title ends up three characters to a line.

   So the widget's own wrapper is the query container. It is an ancestor of the
   band, which matters: an element cannot query itself, so putting the container
   on .lee-hero would leave the band's own rules — its alignment and its height —
   unable to respond. `.elementor-widget-hero_5506` is a class Elementor adds to
   every instance of this widget, so it is stable across them. */

body.elementor-kit-840 .elementor-widget-hero_5506 {
  container-type: inline-size;
}

body.elementor-kit-840 .lee-hero {
  position: relative;
  /* Keeps the photograph, which is pushed to z-index -2, inside this element
     rather than behind the page. Without it the image would drop out of sight
     the moment the page behind the band had a background of its own. */
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: var(--lee-hero-min-h, 600px);
  background-color: var(--lee-hero-bg, #2d2926);
}

/* --------------------------------------------------------------------------
   The photograph
   -------------------------------------------------------------------------- */

body.elementor-kit-840 .lee-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

body.elementor-kit-840 .lee-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--lee-hero-focal-x, 50%) var(--lee-hero-focal-y, 50%);
  /* A very slow push in. 36s is long enough that it never reads as movement
     while you are looking at it — the photograph only appears to have been
     framed differently when you come back to it. Scaling up only, never below
     1, or the crop would open a gap at the edges. */
  animation: lee-hero-breathe 36s ease-in-out infinite alternate;
}

@keyframes lee-hero-breathe {
  from { transform: scale(1.03); }
  to   { transform: scale(1.09); }
}

/* --------------------------------------------------------------------------
   The overlay
   -------------------------------------------------------------------------- */

body.elementor-kit-840 .lee-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: transparent;
  opacity: var(--lee-hero-overlay, .45);
}

/* Even, over the whole photograph. */
body.elementor-kit-840 .lee-hero--overlay-flat .lee-hero__scrim {
  background-color: var(--lee-hero-overlay-color, #2d2926);
}

/* Strongest behind the words, gone by the far side — so the photograph keeps
   its own light where nothing is written on it. The direction is tied to the
   text side: `to left` puts the first stop, the full-strength one, against the
   right edge, which is where the words are in the `end` variant.

   Both variants are written out rather than one default plus an override. An
   override would have to be at least as specific as the default, and on a
   narrow screen that extra class is what stops the direction from turning. */
body.elementor-kit-840 .lee-hero--end.lee-hero--overlay-edge .lee-hero__scrim {
  background-image: linear-gradient(
    to left,
    var(--lee-hero-overlay-color, #2d2926) 0%,
    transparent 68%
  );
}

body.elementor-kit-840 .lee-hero--start.lee-hero--overlay-edge .lee-hero__scrim {
  background-image: linear-gradient(
    to right,
    var(--lee-hero-overlay-color, #2d2926) 0%,
    transparent 68%
  );
}

/* --------------------------------------------------------------------------
   The words
   -------------------------------------------------------------------------- */

/* The column. It is pushed to one side or the other, and its width is what
   keeps the type from running across the whole photograph. */
body.elementor-kit-840 .lee-hero__body {
  position: relative;
  width: var(--lee-hero-text-width, 42%);
  margin-inline-start: auto;
  margin-inline-end: 0;
}

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

/* The gutters. These are a percentage of the COLUMN, not of the band — which
   is why this is a second element at all. A percentage in padding always
   resolves against the containing block, so putting 15% on the column itself
   would measure 15% of the band and pull the type much further in than
   intended. */
body.elementor-kit-840 .lee-hero__inner {
  padding-inline: 15%;
  padding-block: 48px;
}

body.elementor-kit-840 .lee-hero__eyebrow {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.625;
  color: var(--lee-hero-eyebrow-ink, var(--lee-hero-ink, #ffffff));
}

body.elementor-kit-840 .lee-hero__title {
  margin: 0;
  font-size: var(--lee-hero-title-size, 45px);
  font-weight: 500;
  line-height: 1.29;
  letter-spacing: .01em;
  color: var(--lee-hero-ink, #ffffff);
  /* Breaks the line where it reads best rather than wherever it runs out. */
  text-wrap: balance;
}

body.elementor-kit-840 .lee-hero__lead {
  max-width: 46ch;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--lee-hero-lead-ink, var(--lee-hero-ink, #ffffff));
  text-wrap: pretty;
}

/* The facts row. Baseline alignment is the point: the separators are short and
   the facts are not, so aligning their middles would leave the dots floating. */
body.elementor-kit-840 .lee-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--lee-hero-meta-ink, var(--lee-hero-ink, #ffffff));
}

body.elementor-kit-840 .lee-hero__meta-item {
  white-space: nowrap;
}

/* The dot between facts. Decoration, so it is drawn rather than written into
   the markup — nothing announces it, and the row still reads as one sentence
   when a screen reader runs through it. It adds its own 10px on top of the
   row's 10px gap, which is what spaces the facts evenly either side of it. */
body.elementor-kit-840 .lee-hero__meta-item + .lee-hero__meta-item::before {
  content: "·";
  margin-right: 10px;
}

body.elementor-kit-840 .lee-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lee-hero-btn-gap, 15px);
  margin-top: 22px;
}

body.elementor-kit-840 .lee-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--lee-hero-btn-h, 48px);
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--lee-hero-btn-radius, 0);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, box-shadow .2s ease, transform .2s ease,
              filter .2s ease;
}

/* Each button reads its own pair of variables, so each keeps its designed
   value here, next to the rule that uses it, rather than sharing one pair with
   the defaults pushed somewhere else.

   The filled button is pale and the outlined one is drawn in the text colour.
   That is the pairing that survives every background this band can be given:
   over a photograph darkened by the overlay, over a solid band colour, and
   over a light photograph with the overlay switched off, one of the two is
   always the lighter shape and the words on it are always the darker ink. */
body.elementor-kit-840 .lee-hero__btn--primary {
  background-color: var(--lee-hero-btn-1-bg, #fafaf7);
  border-color: var(--lee-hero-btn-1-border, var(--lee-hero-btn-1-bg, #fafaf7));
  color: var(--lee-hero-btn-1-ink, #2d2926);
}

body.elementor-kit-840 .lee-hero__btn--ghost {
  background-color: var(--lee-hero-btn-2-bg, transparent);
  border-color: var(--lee-hero-btn-2-border, var(--lee-hero-ink, #ffffff));
  color: var(--lee-hero-btn-2-ink, var(--lee-hero-ink, #ffffff));
}

/* Hover only lifts on a device with a pointer that can rest — on a touchscreen
   the same rule would leave the button stuck in its hover state after a tap. */
@media (hover: hover) and (pointer: fine) {
  body.elementor-kit-840 .lee-hero__btn:hover,
  body.elementor-kit-840 .lee-hero__btn:focus-visible {
    box-shadow: 0 8px 18px rgba(45, 41, 38, .16);
    transform: translateY(-1px);
  }

  /* A slight darkening rather than a second named colour. The button's colour
     is the panel's to choose, and a fixed hover shade would fight whichever one
     is in use — this works against any of them. */
  body.elementor-kit-840 .lee-hero__btn--primary:hover,
  body.elementor-kit-840 .lee-hero__btn--primary:focus-visible {
    filter: brightness(.93);
  }

  body.elementor-kit-840 .lee-hero__btn--ghost:hover,
  body.elementor-kit-840 .lee-hero__btn--ghost:focus-visible {
    background-color: #fafaf7;
    border-color: #fafaf7;
    color: #2d2926;
  }
}

body.elementor-kit-840 .lee-hero__btn:focus-visible {
  outline: 2px solid #c9a96e;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   The down arrow
   -------------------------------------------------------------------------- */

/* Never on a wide screen: there the band is short enough that the section
   below is already visible, so a cue would point at something in plain sight. */
body.elementor-kit-840 .lee-hero__hint {
  display: none;
}

body.elementor-kit-840 .lee-hero__chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* The editor's empty state. */
body.elementor-kit-840 .lee-hero__empty {
  margin: 0;
  padding: 40px 24px;
  color: #5a5049;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   A narrow screen
   --------------------------------------------------------------------------

   At 921px — this theme's phone breakpoint — the band stops putting the words
   beside the photograph and starts putting them along the bottom of it. The
   overlay changes direction with them, so it stays behind the type. */

@media (max-width: 921px) {
  body.elementor-kit-840 .lee-hero {
    align-items: flex-end;
    min-height: var(--lee-hero-min-h-sm, var(--lee-hero-min-h, 640px));
  }

  body.elementor-kit-840 .lee-hero__body,
  body.elementor-kit-840 .lee-hero--start .lee-hero__body {
    width: 100%;
    margin-inline: 0;
  }

  body.elementor-kit-840 .lee-hero__inner {
    padding-inline: 24px;
    padding-block: 40px 32px;
  }

  /* Room for the arrow, which sits in the bottom corner the buttons would
     otherwise reach. */
  body.elementor-kit-840 .lee-hero--hint .lee-hero__inner {
    padding-bottom: 76px;
  }

  body.elementor-kit-840 .lee-hero__eyebrow {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.65;
    letter-spacing: .04em;
  }

  body.elementor-kit-840 .lee-hero__title {
    font-size: calc(var(--lee-hero-title-size, 45px) * .66);
    line-height: 1.4;
  }

  body.elementor-kit-840 .lee-hero__lead {
    font-size: 14px;
  }

  body.elementor-kit-840 .lee-hero__meta {
    gap: 6px;
    margin-top: 18px;
    font-size: 12px;
    letter-spacing: 0;
  }

  body.elementor-kit-840 .lee-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 20px;
  }

  body.elementor-kit-840 .lee-hero__btn {
    width: 100%;
    padding: 10px 8px;
    font-size: 13px;
  }

  /* Both directions become the same one on a phone: the words are along the
     bottom, so that is the edge the overlay has to be darkest at. Spelled out
     for each side because a plain `.lee-hero--overlay-edge` here would be a
     class short of the wide-screen rule above and lose to it. */
  body.elementor-kit-840 .lee-hero--end.lee-hero--overlay-edge .lee-hero__scrim,
  body.elementor-kit-840 .lee-hero--start.lee-hero--overlay-edge .lee-hero__scrim {
    background-image: linear-gradient(
      to top,
      var(--lee-hero-overlay-color, #2d2926) 0%,
      transparent 72%
    );
  }

  body.elementor-kit-840 .lee-hero__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(250, 250, 247, .85);
    color: #2d2926;
    box-shadow: 0 4px 14px rgba(45, 41, 38, .16);
    transform: translateX(-50%);
  }

  body.elementor-kit-840 .lee-hero__hint:focus-visible {
    outline: 2px solid #b89456;
    outline-offset: 2px;
  }
}

/* --------------------------------------------------------------------------
   The same treatment again, for the band's own width
   --------------------------------------------------------------------------

   Identical to the block above, and deliberately so — a container query cannot
   be written as an addition to a media query, and the two conditions are not
   alternatives that can be collapsed into one. This is the one that fires when
   the band is in a narrow column on a wide screen; the media query above is
   what covers a genuinely small window, and what still works in an engine with
   no container query support.

   ⚠ Keep the two in step. If a value changes here, change it there.

   Only the 921px threshold is shared reasoning: below it a 42% column cannot
   hold enough characters to be worth reading, which is true of the band
   whether the measurement came from the window or from the column. */

@container (max-width: 921px) {
  body.elementor-kit-840 .lee-hero {
    align-items: flex-end;
    min-height: var(--lee-hero-min-h-sm, var(--lee-hero-min-h, 640px));
  }

  body.elementor-kit-840 .lee-hero__body,
  body.elementor-kit-840 .lee-hero--start .lee-hero__body {
    width: 100%;
    margin-inline: 0;
  }

  body.elementor-kit-840 .lee-hero__inner {
    padding-inline: 24px;
    padding-block: 40px 32px;
  }

  body.elementor-kit-840 .lee-hero--hint .lee-hero__inner {
    padding-bottom: 76px;
  }

  body.elementor-kit-840 .lee-hero__eyebrow {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.65;
    letter-spacing: .04em;
  }

  body.elementor-kit-840 .lee-hero__title {
    font-size: calc(var(--lee-hero-title-size, 45px) * .66);
    line-height: 1.4;
  }

  body.elementor-kit-840 .lee-hero__lead {
    font-size: 14px;
  }

  body.elementor-kit-840 .lee-hero__meta {
    gap: 6px;
    margin-top: 18px;
    font-size: 12px;
    letter-spacing: 0;
  }

  body.elementor-kit-840 .lee-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 20px;
  }

  body.elementor-kit-840 .lee-hero__btn {
    width: 100%;
    padding: 10px 8px;
    font-size: 13px;
  }

  body.elementor-kit-840 .lee-hero--end.lee-hero--overlay-edge .lee-hero__scrim,
  body.elementor-kit-840 .lee-hero--start.lee-hero--overlay-edge .lee-hero__scrim {
    background-image: linear-gradient(
      to top,
      var(--lee-hero-overlay-color, #2d2926) 0%,
      transparent 72%
    );
  }

  body.elementor-kit-840 .lee-hero__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(250, 250, 247, .85);
    color: #2d2926;
    box-shadow: 0 4px 14px rgba(45, 41, 38, .16);
    transform: translateX(-50%);
  }

  body.elementor-kit-840 .lee-hero__hint:focus-visible {
    outline: 2px solid #b89456;
    outline-offset: 2px;
  }
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.elementor-kit-840 .lee-hero__media img {
    animation: none;
  }

  body.elementor-kit-840 .lee-hero__btn {
    transition: none;
  }

  body.elementor-kit-840 .lee-hero__btn:hover,
  body.elementor-kit-840 .lee-hero__btn:focus-visible {
    transform: none;
  }
}