/*
 * Lasso Creators homepage — only what an inline style cannot say.
 *
 * partials/creators-home-landing.php carries the approved v2 mockup's own inline
 * styles, which is how the geometry stays identical and how it outranks style.css.
 * Four things cannot live in a style attribute, and they are all that is here:
 *
 *   1. the mockup's own <style> block — page background, link colour, keyframes
 *   2. hover and focus, which the mockup expresses as runtime style-hover attributes
 *   3. the handful of style.css rules that use !important and so beat inline styles
 *   4. reduced motion, and the no-JavaScript fallback
 *
 * Everything is under .lc-v3, the wrapper around the ported markup, so the outreach
 * and Black Friday landings are untouched.
 */

/* ---- 1. The mockup's own stylesheet ------------------------------------- */

body.lc-creators-home:not(.lc-outreach-landing):not(.lc-black-friday) {
  background: #F7F7FC;
  color: #17133A;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.lc-v3,
.lc-v3 * {
  box-sizing: border-box;
}

.lc-v3 a {
  color: #5E36CA;
  text-decoration: none;
}

.lc-v3 input[type="range"] {
  accent-color: #22BAA0;
}

@keyframes lassoPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@keyframes lassoFill {
  from { width: 0; }
  to { width: 100%; }
}

/* The progress bar the comparison chips and the example posts run under
   themselves; js/creators-home.js inserts it and sets the duration. */
.lc-v3 .lc3-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  animation-name: lassoFill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* ---- 2. Hover, from the mockup's style-hover attributes ----------------- */

.lc-v3 .lc3-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(34, 186, 160, .8);
}

.lc-v3 .lc3-tab:hover {
  border-color: #5E36CA;
}

.lc-v3 .lc3-pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(94, 54, 202, .35);
}

.lc-v3 .lc3-punlock:hover {
  background: #22BAA0;
  color: #fff;
}

.lc-v3 .lc3-quote:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -26px rgba(94, 54, 202, .35);
  border-color: #AAAAAA;
}

.lc-v3 a:hover .lc3-caselink {
  color: #40258A;
}

.lc-v3 .lc3-chip:hover,
.lc-v3 .lc3-post:hover {
  border-color: #AAAAAA;
}

/* ---- 3. Beating the !important rules in style.css ----------------------- */

/* Typography inside the port comes from the mockup's inline styles and nothing else.
   css/creators-home.css still carries the hand-built version's rules, and they target
   the organic homepage specifically — `:not(.lc-outreach-landing):not(.lc-black-friday)`
   — so today they aim at nothing but this port. One of them sets `color: var(--text)`
   on every heading, which is why the final CTA's headline rendered dark ink on purple
   instead of the mockup's white; a spot-fix forcing #fff on #comparison h2 is already
   in that file, for the same cause one section earlier.

   Rather than keep patching section by section, headings inherit again. This out-
   specifies those rules instead of shouting over them with !important, because the
   mockup does colour one heading inline — the FAQ question — and an inline value
   must stay the last word.

   (Those rules are dead weight now and deleting them is the real fix; they also reach
   the shared header and footer, so that is its own change.) */
body.lc-creators-home:not(.lc-outreach-landing):not(.lc-black-friday) .lc-v3 h1,
body.lc-creators-home:not(.lc-outreach-landing):not(.lc-black-friday) .lc-v3 h2,
body.lc-creators-home:not(.lc-outreach-landing):not(.lc-black-friday) .lc-v3 h3,
body.lc-creators-home:not(.lc-outreach-landing):not(.lc-black-friday) .lc-v3 h4,
body.lc-creators-home:not(.lc-outreach-landing):not(.lc-black-friday) .lc-v3 h5 {
  color: inherit;
}

/* The theme sets a 1.5 line-height on the body; the mockup leaves it at normal, which
   shows up in every eyebrow and label that sets no line-height of its own. Anything
   the mockup did set inline still wins. */
.lc-v3 {
  line-height: normal;
}

/* style.css:64 forces every heading to 800; the mockup draws them at 700. */
.lc-v3 h1,
.lc-v3 h2,
.lc-v3 h3 {
  font-weight: 700 !important;
}

/* style.css:73 forces <strong> to 800; the hero's figures are 700. */
.lc-v3 strong {
  font-weight: 700 !important;
}

/* style.css:20 and :23 strip every outline and shadow from inputs and buttons,
   which takes the keyboard focus ring with them. Put it back — one rule, so no
   later selector can shadow it (getlasso-creators#52). */
.lc-v3 a:focus-visible,
.lc-v3 button:focus-visible,
.lc-v3 input:focus-visible,
.lc-v3 summary:focus-visible,
.lc-v3 [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #5E36CA !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* ---- The search field --------------------------------------------------- */

/* Focus belongs to the whole pill, not the borderless input inside it: a 3px
   outline on the input drew a rectangle straight across the pill's rounded
   corners. This is the softer ring asked for, and it is more visible than the
   outline was, not less. */
.lc-v3 .lc3-search {
  color: #777777;
}

/* The pill carries its border inline, as the rest of the port does, and an inline
   style outranks a stylesheet — so the state colours have to insist. */
.lc-v3 .lc3-search:hover {
  border-color: #C9C6DA !important;
  background: #FFFFFF;
}

.lc-v3 .lc3-search:focus-within {
  border-color: #5E36CA !important;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(94, 54, 202, .14);
}

.lc-v3 .lc3-search:focus-within .lc3-search-icon {
  color: #5E36CA;
}

/* The pill above carries the focus ring for this one input. */
.lc-v3 .lc3-search input:focus,
.lc-v3 .lc3-search input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.lc-v3 .lc3-search input::placeholder {
  color: #9793AE;
  opacity: 1;
}

/* creators-home.css sets `body.lc-creators-home a { color: inherit }` — one more rule
   left over from the hand-built page — and at (0,1,2) it out-specifies `.lc-v3 a`
   above. The Help Center link sits inside a #777777 paragraph and inherited the grey;
   the mockup's own stylesheet paints every link #5E36CA. Same cause as the headings,
   same fix: out-specify it rather than shout over it, so an inline colour still wins. */
body.lc-creators-home:not(.lc-outreach-landing):not(.lc-black-friday) .lc-v3 a {
  color: #5E36CA;
}

/* ---- The FAQ accordion ---------------------------------------------------- */

/* Native <details>, so there is no JavaScript here to keep in step — only the parts a
   style attribute cannot reach: the layout's breakpoint, killing the default
   disclosure triangle, and drawing the plus that becomes a minus. */

/* Heading and help link in their own column, the list beside it. The mockup runs the
   heading along the top over a two-column list of open answers; with eight rows closed
   that leaves a wide empty strip, and the heading reads better as a label for the
   column it sits next to. The whole layout is here rather than in a style attribute
   like the rest of the page, because it needs a media query and one cannot out-rank an
   inline style without !important. */
.lc-v3 .lc3-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: start;
  gap: 0 80px;
}

/* One column before the heading and the questions start fighting for width. */
@media (max-width: 900px) {
  .lc-v3 .lc3-faq-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px 0;
  }
}

.lc-v3 .lc3-faq {
  border-bottom: 1px solid #E2E2E2;
}

.lc-v3 .lc3-faq-q {
  list-style: none;
}

.lc-v3 .lc3-faq-q::-webkit-details-marker {
  display: none;
}

.lc-v3 .lc3-faq-q::marker {
  content: "";
}

/* Two bars; opening rotates the upright one onto the other and fades it, which reads
   as a plus becoming a minus. Cheaper and sharper than swapping two glyphs. */
.lc-v3 .lc3-faq-sign {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}

.lc-v3 .lc3-faq-sign::before,
.lc-v3 .lc3-faq-sign::after {
  content: "";
  position: absolute;
  background: #5E36CA;
  border-radius: 1px;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .25s, background .2s;
}

.lc-v3 .lc3-faq-sign::before {
  top: 8px;
  left: 0;
  right: 0;
  height: 2px;
}

.lc-v3 .lc3-faq-sign::after {
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
}

.lc-v3 .lc3-faq-item[open] .lc3-faq-sign::after {
  transform: rotate(90deg);
  opacity: 0;
}

.lc-v3 .lc3-faq-item:hover .lc3-faq-sign::before,
.lc-v3 .lc3-faq-item:hover .lc3-faq-sign::after {
  background: #40258A;
}

/* ---- The product card's name --------------------------------------------- */

/* The mockup's card gives brand and name a 58px block, which is one line plus two.
   Its own demo names are short enough never to test that; real Amazon listing titles
   are not, and a name that takes three lines pushes the commission block and the CTA
   below where they sit on the card beside it. lc_home_trim_name() keeps names short
   enough to fit, and this is what holds the row straight when one still does not. */
.lc-v3 .lc3-pname {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ---- The revenue slider -------------------------------------------------- */

/* style.css:353 already skins input[type=range] for this site — a #22BAA0 fill up
   to --slider-percentage over a #ddd track, with a green thumb. The port never set
   that variable, so the fill resolved to 0 and the track read as an empty dashed
   line. js/creators-home-v3.js sets it; these only round the ends off. */
.lc-v3 input[type="range"] {
  border-radius: 99px;
  cursor: pointer;
}

.lc-v3 input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 2px 6px rgba(23, 19, 58, .25);
}

/* The modal carries the mockup's own inline `display:grid`, which outranks the
   `[hidden]{display:none}` rule in creators-home.css — it opened on page load until
   this won the argument back. */
.lc-modal[hidden] {
  display: none !important;
}

/* The modal's email field: the mockup's purple focus border. */
.lc-modal .lc-modal-email:focus {
  border-color: #5E36CA !important;
}

/* ---- 4. Reduced motion, and no JavaScript ------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .lc-v3 *,
  .lc-v3 *::before,
  .lc-v3 *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  /* The hero's rate badges are the point of the hero, not decoration: with motion
     off they are simply already there, as the mockup's own reduced-motion branch
     does (`const on = this.reduced || s.scan >= t`). */
  .lc-v3 [data-scan-badge] {
    opacity: 1 !important;
    transform: none !important;
  }

  .lc-v3 [data-scan-ring] {
    box-shadow: 0 0 0 3px #22BAA0 !important;
  }

  .lc-v3 [data-prob] {
    transition: none !important;
  }

  /* The ring on "Set it up once" stops travelling; the controller leaves it on
     the first step rather than hiding it. */
  .lc-v3 [data-step-ring] {
    transition: none !important;
  }
}

/* Without JavaScript nothing staged ever arrives, so show the finished state. */
@media (scripting: none) {
  .lc-v3 [data-scan-badge] {
    opacity: 1;
    transform: none;
  }

  .lc-v3 [data-scan-ring] {
    box-shadow: 0 0 0 3px #22BAA0;
  }

  .lc-v3 [data-prob="amz"] {
    width: 28%;
  }

  .lc-v3 [data-prob="lasso"] {
    width: 98%;
  }
}