/**
 * brand-marquee.css - Authorized Dealer Logo Scroller (v2)
 *
 * v1 put each logo on a card with a caption. v2 strips that chrome
 * entirely: logos float free on whatever section background the
 * marquee lives on, sized to a uniform bounding box so visual
 * weight stays consistent across wildly different SVG viewBoxes.
 * A JS-driven tooltip replaces the old caption and exposes the
 * brand name, description, and hyperlink target to visitors.
 *
 * Visual spec:
 *   - Each logo sits in a 240 x 140 transparent bounding box
 *   - object-fit: contain preserves aspect ratio
 *   - Per-brand [data-brand] rules handle a few outliers whose
 *     SVG viewBoxes embed extra whitespace (Oregon, Craftsman,
 *     Troy-Bilt, Honda, Zama, MTD) so they render at comparable
 *     visual size
 *   - cursor: grab on the track; grabbing during pointer drag
 *
 * @package LibrandiOutdoorPower
 * @since   1.4.0
 * @updated 1.5.0 - v2 redesign: no cards, no captions, drag and
 *                  swipe interaction, hover tooltip, logos wrap
 *                  in hyperlinks, per-brand scale normalization.
 * @updated 1.5.2 - Tooltip repositioned above the hovered logo
 *                  (not the cursor, not below) so it holds still
 *                  and users can mouse straight up into it to
 *                  click the Visit Catalog link without the
 *                  marquee loop scrolling the anchor logo out
 *                  from under the cursor mid-travel. pointer-
 *                  events: auto plus a 300ms hide-delay make the
 *                  logo -> tooltip handoff forgiving. Visual
 *                  treatment switched from dark slab to a light
 *                  card (white bg, gray-200 border, gray-900
 *                  heading, accent-orange CTA) so the tooltip
 *                  reads in-place against the white section
 *                  background rather than landing like a system
 *                  overlay. Per-brand scales bumped for
 *                  Craftsman, Troy-Bilt, Honda, Zama to visually
 *                  match neighbors.
 */


/* ==========================================================
   Section container
   ========================================================== */
.lop-brand-marquee {
    padding-block: var(--space-16);
    overflow: hidden;
    position: relative; /* anchor point for the absolute tooltip */
}

.lop-brand-marquee--bg-default { background: var(--color-white); }
.lop-brand-marquee--bg-alt     { background: var(--color-off-white); }
.lop-brand-marquee--bg-accent {
    background: var(--color-primary);
    color: var(--color-white);
}


/* ==========================================================
   Header block
   ========================================================== */
.lop-brand-marquee__head {
    max-width: 780px;
    margin-inline: auto;
    margin-bottom: var(--space-10);
    text-align: center;
}
.lop-brand-marquee__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}
.lop-brand-marquee--bg-accent .lop-brand-marquee__eyebrow {
    color: var(--color-accent-light);
}
.lop-brand-marquee__heading {
    font-size: clamp(1.75rem, 2.4vw + 1rem, var(--text-4xl));
    margin-bottom: var(--space-3);
    color: var(--color-primary);
    letter-spacing: -0.01em;
}
.lop-brand-marquee--bg-accent .lop-brand-marquee__heading {
    color: var(--color-white);
}
.lop-brand-marquee__subheading {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    line-height: var(--leading-normal);
    margin: 0;
}
.lop-brand-marquee--bg-accent .lop-brand-marquee__subheading {
    color: rgba(255, 255, 255, 0.8);
}


/* ==========================================================
   Track (scrolling viewport)
   ========================================================== */
.lop-brand-marquee__track {
    width: 100%;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 6%,
        #000 94%,
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 6%,
        #000 94%,
        transparent 100%
    );
}
.lop-brand-marquee__track::-webkit-scrollbar {
    display: none;
}
.lop-brand-marquee__track.is-dragging {
    cursor: grabbing;
}
.lop-brand-marquee__track.is-dragging .lop-brand-marquee__item {
    /* Disable hyperlink navigation during drag so scrubbing
       across a logo does not accidentally open its catalog. */
    pointer-events: none;
}

.lop-brand-marquee__inner {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-6), 3vw, var(--space-10));
    flex-shrink: 0;
    width: max-content;
    will-change: transform;
    padding-block: var(--space-3);
}


/* ==========================================================
   Logo item (free-floating, no card, no caption)
   ========================================================== */
.lop-brand-marquee__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 140px;
    padding: var(--space-3);
    background: transparent;
    border: 0;
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration)      var(--ease),
                filter    var(--duration-slow) var(--ease);
    -webkit-user-drag: none;
}
.lop-brand-marquee__item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius);
}
.lop-brand-marquee__item:hover {
    transform: translateY(-4px) scale(1.05);
    z-index: 2;
}

.lop-brand-marquee__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    pointer-events: none; /* clicks fall through to the anchor */
    -webkit-user-drag: none;
    user-select: none;
}


/* ==========================================================
   Per-brand scale normalization
   -----------------------------------------------------------
   The 17 SVGs in the registry were authored by different
   manufacturers at different times, and their viewBoxes embed
   wildly different amounts of whitespace around the artwork.
   object-fit: contain alone cannot compensate -- logos with
   generous padding in their source files render visually smaller
   than logos whose artwork fills the viewBox edge-to-edge.

   These targeted data-brand selectors scale individual logos up
   or down so the whole strip reads as a uniform row of marks.
   Scale values tuned by eye against Husqvarna as the reference
   (its viewBox is tightly cropped to the artwork).
   ========================================================== */

/* Oregon Products: wide horizontal wordmark with generous
   vertical padding in the source. */
.lop-brand-marquee__item[data-brand="oregon-products"] .lop-brand-marquee__img {
    transform: scale(1.3);
}

/* Craftsman: shield + wordmark stacked, artwork only fills the
   center third of the viewBox. Bumped in v1.5.2 to match the
   other larger marks visually. */
.lop-brand-marquee__item[data-brand="craftsman"] .lop-brand-marquee__img {
    transform: scale(1.4);
}

/* Troy-Bilt: condensed wordmark with generous side padding.
   Bumped in v1.5.2. */
.lop-brand-marquee__item[data-brand="troy-bilt"] .lop-brand-marquee__img {
    transform: scale(1.45);
}

/* Honda: the Honda Power Equipment mark carries vertical padding
   in its source viewBox and reads visually smaller than peers
   without a scale bump. Added in v1.5.2. */
.lop-brand-marquee__item[data-brand="honda"] .lop-brand-marquee__img {
    transform: scale(1.3);
}

/* Zama: the carburetor company's SVG has vertical whitespace
   around a compact wordmark. Added in v1.5.2. */
.lop-brand-marquee__item[data-brand="zama"] .lop-brand-marquee__img {
    transform: scale(1.3);
}

/* MTD: tall artwork with the grass graphic adding height. */
.lop-brand-marquee__item[data-brand="mtd"] .lop-brand-marquee__img {
    transform: scale(1.15);
}


/* ==========================================================
   Tooltip (hover / focus reveal) - v3.1 light card, holds still
   -----------------------------------------------------------
   Journey to here:
     v2: positioned above the logo with pointer-events: none.
         Dead zone between logo and tooltip killed the tooltip
         before users could click the CTA.
     v3: positioned below the cursor and FOLLOWED the cursor on
         mousemove. Users trying to move into the tooltip found
         it moved away from them -- classic chase bug.
     v3.1 (current): positioned ONCE on mouseenter/focus above
         the hovered logo's bounding box. Holds still for the
         rest of the hover. pointer-events: auto plus a 300ms
         cancelable hide-delay makes the logo -> tooltip handoff
         forgiving, and the "above" placement keeps the tooltip
         clear of the marquee strip so the paused-on-hover loop
         does not interfere with reaching the CTA.

   Visual treatment also switched from a dark slab to a light
   card -- white background, gray-200 border, gray-900 heading
   color, accent-orange CTA -- so the tooltip reads like native
   site chrome rather than a system overlay dropped on top of
   the white section background.
   ========================================================== */
.lop-brand-marquee-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    max-width: 280px;
    padding: var(--space-4) var(--space-5);
    background: var(--color-white);
    color: var(--color-gray-900);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);

    /* pointer-events: auto so the tooltip itself participates in
       hover tracking. JS cancels the pending hide-timer on
       mouseenter and reschedules on mouseleave -- giving users
       time to move from logo into the tooltip to click the CTA. */
    pointer-events: auto;

    /* Hidden by default. translate(-50%, 0) horizontally centers
       the tooltip on the JS-provided x. scale(0.96) provides a
       subtle grow-in when .is-visible is added. */
    opacity: 0;
    transform: translate(-50%, 0) scale(0.96);
    transform-origin: bottom center;
    transition: opacity   var(--duration) var(--ease),
                transform var(--duration) var(--ease);
}
.lop-brand-marquee-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

/* Down-pointing arrow on the bottom edge of the tooltip. In the
   light theme the arrow is white with a matching gray-200
   bottom-and-right border so it reads as a continuous extension
   of the tooltip card rather than floating free. The two visible
   borders form the bottom-right wedge that points down toward
   the hovered logo. */
.lop-brand-marquee-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--color-white);
    border-right:  1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
    transform: translateX(-50%) rotate(45deg);
}

/* Brand name uses Racing Sans One to match the site's section
   headings, in the primary forest green so the tooltip feels
   like native site chrome rather than a generic popover. */
.lop-brand-marquee-tooltip__name {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--color-primary);
    margin: 0 0 var(--space-2);
    line-height: 1.25;
}
.lop-brand-marquee-tooltip__description {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-gray-600);
    margin: 0 0 var(--space-3);
}

/* CTA is a real <a> (since v3) so users can click it to open
   the manufacturer catalog in a new tab in addition to clicking
   the logo itself. Amber accent color in the light theme, with
   an explicit hover underline that promotes to accent-hover
   (the deeper amber). */
.lop-brand-marquee-tooltip__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color        var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
}
.lop-brand-marquee-tooltip__cta:hover,
.lop-brand-marquee-tooltip__cta:focus-visible {
    color: var(--color-accent-hover);
    border-bottom-color: var(--color-accent-hover);
}
.lop-brand-marquee-tooltip__cta:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: 2px;
}


/* ==========================================================
   Responsive tuning
   ========================================================== */
@media (max-width: 640px) {
    .lop-brand-marquee {
        padding-block: var(--space-12);
    }
    .lop-brand-marquee__item {
        width: 180px;
        height: 110px;
        padding: var(--space-2);
    }
    .lop-brand-marquee__inner {
        gap: var(--space-5);
    }
    .lop-brand-marquee-tooltip {
        max-width: 240px;
        padding: var(--space-3) var(--space-4);
    }
    .lop-brand-marquee__item:hover {
        transform: translateY(-2px) scale(1.03);
    }
}


/* ==========================================================
   Reduced-motion fallback
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    .lop-brand-marquee__track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        cursor: auto;
    }
    .lop-brand-marquee__item {
        scroll-snap-align: center;
    }
    .lop-brand-marquee__item:hover {
        transform: none;
    }
}