/* =============================================================================
   Firebrand Logo Carousel — flc-style.css
   ============================================================================= */

/* Wrapper
   ============================================================================= */
.flc-wrapper {
    width: 100%;
    box-sizing: border-box;
    --flc-logo-height:        80px;
    --flc-logo-max-width:     160px;
    --flc-gap:                85px;
    --flc-arrow-color:        #000000;
    --flc-arrow-hover-color:  #f26522;
}

/* Carousel layout
   ============================================================================= */
.flc-carousel-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    position: relative;
}

.flc-track-wrapper {
    flex: 1;
    overflow: hidden;
    height: var(--flc-logo-height);
}

.flc-track {
    display: flex;
    align-items: center;
    will-change: transform;
    /* Step mode: transition set by JS during animation  */
    /* Conveyor mode: animation applied via .flc-conveyor class */
}

/* Slides
   ============================================================================= */
.flc-slide {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
     * Horizontal padding only — this is the spacing mechanism.
     * Slide width = image width + gap (left pad + right pad).
     * Adjacent image edges are therefore always exactly --flc-gap apart,
     * regardless of how wide each logo is.
     */
    padding: 0 calc(var(--flc-gap) / 2);
    height: var(--flc-logo-height);
    box-sizing: content-box;
}

.flc-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Logo images — greyscale by default, full colour on hover */
/* height (not max-height) gives SVGs a concrete dimension so browsers can
   correctly compute width:auto. object-fit:contain prevents distortion. */
.flc-slide img {
    display: block;
    height: var(--flc-logo-height);
    width: auto;
    max-width: var(--flc-logo-max-width);
    object-fit: contain;

    filter: grayscale(100%);
    opacity: 0.65;
    transition: filter 0.35s ease, opacity 0.35s ease;
}

.flc-slide:hover img,
.flc-slide:focus-within img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Conveyor Belt animation
   ============================================================================= */
@keyframes flc-conveyor-scroll {
    from { transform: translateX( 0 ); }
    to   { transform: translateX( -50% ); }
}

/*
 * Applied by JS when scroll-mode = conveyor.
 * The animation moves -50% of the track's own width, which equals
 * exactly one full set of (original) slides — creating a seamless loop.
 * Duration is calculated and set dynamically by JS.
 */
.flc-track.flc-conveyor {
    animation-name:            flc-conveyor-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state:      running;
}

/* Arrow buttons — no border/circle, just the character
   ============================================================================= */
.flc-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 44px;
    background: transparent;
    border: none;
    color: var(--flc-arrow-color);
    cursor: pointer;

    font-size: 32px;
    line-height: 1;
    padding: 0;

    transition: color 0.2s ease, opacity 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.flc-arrow:hover {
    color: var(--flc-arrow-hover-color);
}

.flc-arrow:focus-visible {
    outline: 2px solid var(--flc-arrow-hover-color);
    outline-offset: 3px;
}

.flc-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Empty state
   ============================================================================= */
.flc-empty {
    text-align: center;
    opacity: 0.5;
    padding: 20px;
}

/* Responsive
   ============================================================================= */
@media ( max-width: 479px ) {
    .flc-arrow {
        width: 24px;
        font-size: 26px;
    }
}