/*
 * Ask Lee hero — styling now lives INSIDE the self-contained .asklee block
 * (printed by inc/ask-lee-hero.php, verbatim from Claude Design's copy-paste
 * block). This enqueued file is intentionally near-empty; it only carries a
 * couple of safety rules in case the inline <style> is stripped by an optimiser.
 */

/* outer positioning fallback (also set inline in the block) */
.asklee { max-width: 1200px; margin: 18px auto; }
@media (max-width: 1240px) { .asklee { margin: 16px clamp(12px, 3vw, 22px); } }

/* never show the retired homepage hero remnants */
.hero-ask-lee,
.ask-lee.hero-ask-lee { display: none !important; }

/* ── Delete each page's OLD hero so only the Ask Lee hero remains ──
 * Its intro text is moved into the Ask Lee hero's left column (see PHP).
 * One hero per page, never two. */
.wiki-hero { display: none !important; }     /* wiki landing + entries */
.recipes-hero { display: none !important; }  /* recipe landing */
/* .brand-hero hide removed 2026-06-19: brand page now has its own styled hero (single-brand.css) */
.ns-hero { display: none !important; }        /* news / single post */
.os-hero { display: none !important; }        /* about / our-story */
.sp-hero { display: none !important; }        /* shop + product category archive */
.acctx-hero { display: none !important; }     /* my-account / cart / checkout */
.search-head { display: none !important; }    /* search results title band */

/* Shared generic-page template header (recipe singles, wiki entries, generic
 * pages) — the dark title band that duplicates the Ask Lee hero. Scoped to
 * pages that actually have the Ask Lee hero so excluded pages keep their head. */
.teas-asklee-on .page-head-simple { display: none !important; }
.teas-asklee-on .article-head { display: none !important; } /* wiki entries / posts dark title band */

/* ── THEME-BLEED GUARD ──
 * The live site has global form + svg styles (e.g. textarea{height:...},
 * svg{max-width:100%;height:auto}) that leak into the scoped widget and break
 * it — the standalone mockup never saw these. Re-assert the widget's intended
 * dimensions with `.asklee`-prefixed selectors so they win over the theme. */
.asklee .asklee__composer { align-items: flex-end; }
.asklee .asklee__composer textarea {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 120px !important;
  width: auto !important;
  box-sizing: border-box !important;
}
/* Keep the example-question placeholder on ONE line. It was wrapping to two
   lines on mobile and the fixed 46px height then clipped the second line.
   Scoped to :placeholder-shown so the user's typed text still wraps normally.
   Lives here (not the PHP inline <style>) so it survives template rewrites. */
.asklee .asklee__composer textarea:placeholder-shown {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.asklee .asklee__send {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  flex: 0 0 40px !important;
}
.asklee .asklee__send svg { width: 20px !important; height: 20px !important; display: block !important; }
.asklee .asklee__close { width: 32px !important; height: 32px !important; padding: 0 !important; flex: none !important; }
.asklee .asklee__close svg { width: 17px !important; height: 17px !important; }
.asklee .asklee__help { width: 24px !important; height: 24px !important; padding: 0 !important; flex: none !important; }
.asklee .asklee__login svg { width: 14px !important; height: 14px !important; flex: none !important; }
.asklee .asklee__avatar { width: 40px !important; height: 40px !important; flex: none !important; }
.asklee .asklee__rowav { width: 28px !important; height: 28px !important; flex: none !important; }
.asklee .asklee__online-dot { width: 8px !important; height: 8px !important; flex: none !important; }
.asklee .asklee__dot { width: 8px !important; height: 8px !important; flex: none !important; }