/* Section-specific CSS for the WOODRANGER lander.
 * Tailwind utilities cover layout; this file holds only what utilities cannot
 * express (keyframes, Swiper state styling).
 */

/* ── icons-1: press-logo strip ─────────────────────────────────────────────
 * Figma draws the mobile logo row 846px wide inside a 375px frame, i.e. it is
 * meant to scroll. Below md the track duplicates and marquees; from md up the
 * duplicate is dropped and the row spreads across the container.
 */
/* Layout (flex, widths, hiding the duplicate) stays in Tailwind utilities on
 * the markup — this rule only adds the motion, so the two never fight over
 * `display` when the Tailwind CDN injects its stylesheet after this one.
 */
.press-strip { overflow: hidden; }

.press-strip__track { animation: press-scroll 24s linear infinite; }

@media (min-width: 1024px) {
  .press-strip__track { animation: none; }
}

@keyframes press-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .press-strip__track { animation: none; }
}

/* ── Anchor navigation ─────────────────────────────────────────────────────
 * The nav links jump to #features / #comparison / #reviews. Scroll them
 * smoothly, and offset the landing point by the sticky header height so the
 * section heading is not left underneath it (56px mobile, 78px desktop).
 */
html { scroll-behavior: smooth; }

#hero,
#features,
#comparison,
#reviews { scroll-margin-top: 72px; }

@media (min-width: 1024px) {
  #hero,
  #features,
  #comparison,
  #reviews { scroll-margin-top: 94px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── nav-1: active link ────────────────────────────────────────────────────
 * landing.js flags the link whose section is in view with data-active. The two
 * navs show it differently, per Figma: the desktop bar underlines the label,
 * the mobile panel (44:2883) fills the whole row with the brand yellow and
 * switches the label to Roboto 700.
 */
@media (min-width: 1024px) {
  [data-scrollspy] a[data-active='true'] {
    text-decoration: underline;
    /* Same brand yellow the mobile panel fills its active row with, so the
     * two navs signal "you are here" in one colour. */
    text-decoration-color: var(--brand-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
}

.nav-panel-link[data-active='true'] {
  background-color: var(--brand-primary);
  font-weight: 700;
}

/* ── CTA buttons: attention pulse ──────────────────────────────────────────
 * Matches the shipped WOODRANGER lander: woodranger/powershears/en/us/
 * css/int/int_style.css `.pulse` — scale 0.9 -> 1 -> 0.9 over 1.7s, forever.
 * Applied to every order button (hero, standalone, top bar, sticky bar, nav).
 * transform only, so nothing reflows.
 */
@keyframes cta-pulse {
  0%   { transform: scale(0.9); }
  50%  { transform: scale(1); }
  100% { transform: scale(0.9); }
}

.cta-pulse {
  animation-name: cta-pulse;
  animation-duration: 1.7s;
  animation-iteration-count: infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .cta-pulse { animation: none; }
}

/* ── nav-1: hamburger → X ──────────────────────────────────────────────────
 * Figma draws three 3px bars 10px apart (y=19/29/39 inside a 20px box). The
 * open state is not designed, so the bars fold into an X — landing.js flips
 * data-menu-open on the button.
 */
.nav-burger__bar { transition: transform 200ms ease, opacity 150ms ease; }
.nav-burger__bar:nth-child(1) { top: 0; }
.nav-burger__bar:nth-child(2) { top: 50%; margin-top: -1.5px; }
.nav-burger__bar:nth-child(3) { bottom: 0; }

.nav-burger[data-menu-open='true'] .nav-burger__bar:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}
.nav-burger[data-menu-open='true'] .nav-burger__bar:nth-child(2) { opacity: 0; }
.nav-burger[data-menu-open='true'] .nav-burger__bar:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

/* ── faq-1: accordion panel ────────────────────────────────────────────────
 * landing.js animates max-height/opacity inline; the transition and the clip
 * come from CSS. The animated element must stay padding-free — padding is not
 * clamped by max-height, so any on this box leaves a closed row several pixels
 * tall and the list visibly jumps as rows swap.
 */
.faq-panel {
  overflow: hidden;
  padding: 0;
  transition: max-height 300ms ease, opacity 200ms ease;
}

/* Closed rows are 24 + 35 + 24 = 83px, matching Figma. When a row opens the
 * toggle's bottom padding tightens so the answer sits just under the question
 * instead of a full 24px away — transitioned so it moves with the panel.
 */
[data-accordion-toggle] { cursor: pointer; transition: padding-bottom 300ms ease; }
[data-accordion-item][data-open='true'] > [data-accordion-toggle] { padding-bottom: 8px; }

/* landing.js also drops a rotate-180 on [data-accordion-icon]; the +/- glyph
 * is symmetric, so neutralise it to avoid a pointless spin.
 */
[data-accordion-icon].rotate-180 { transform: none; }


/* ── reviews: rating rows ──────────────────────────────────────────────────
 * Was a baked PNG (powershears-lander1-rating-bars.webp), which is why the
 * rows could not align to the container or take the live 4.8 score. Now live
 * markup with tp-stars; only the star metrics need CSS, and they differ per
 * breakpoint: Figma mobile draws 15.5px stars 3px apart (56:612), desktop
 * 32px stars 2px apart (50:5251).
 */
.rating-rows .tp-stars { gap: 3px; }
.rating-rows .tp-stars img { width: 15.5px; height: 15.5px; }

@media (min-width: 1024px) {
  .rating-rows .tp-stars { gap: 2px; }
  .rating-rows .tp-stars img { width: 32px; height: 32px; }
}