/*
 * Bonfire Night 2026 seasonal theme.
 * Loaded only while active — see inc/seasonal-bonfire.php.
 *
 * Breakpoints follow the theme: 64rem is CodyFrame @md (desktop header row,
 * navy shortcut bar), 80rem is where .f-header swaps the mobile icon bar for
 * the inline primary nav. The fireworks art covers only the top logo/search
 * block; the navigation bar below it (.mobile_header_outer) keeps the live
 * site's white background and dark links at every width.
 */

.seasonal-bonfire {
    --bonfire-night: #100b0f;   /* matches the bottom edge of the header artwork */
    --bonfire-gold: #ffc94a;
    --bonfire-ember: #ff7a1a;
}

/* ---------- Header: background ---------- */

.seasonal-bonfire .barcare-header .header_outer_block {
    background: var(--bonfire-night) url(../img/seasonal/bonfire/bonfire-header-mobile.webp) no-repeat center top / cover;
    border-bottom: none;
}

@media (min-width: 64rem) {
    .seasonal-bonfire .barcare-header .header_outer_block {
        background: var(--bonfire-night) url(../img/seasonal/bonfire/bonfire-header-desktop.webp) no-repeat center / cover;
    }
}

/* ---------- Header: white text and icons ---------- */

.seasonal-bonfire .header_slogon_text a,
.seasonal-bonfire .header_logon_text a,
.seasonal-bonfire .barcare-header__store-actions a,
.seasonal-bonfire .barcare-header__nav a,
.seasonal-bonfire .barcare-header__tax-toggle,
.seasonal-bonfire .barcare-header__tax-toggle a {
    color: #fff;
}
.seasonal-bonfire .header_slogon_text,
.seasonal-bonfire .header_logon_text,
.seasonal-bonfire .barcare-header__store-actions p {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .6);
}
.seasonal-bonfire .header_logon_text strong {
    color: var(--bonfire-gold);
}
.seasonal-bonfire .barcare-header__store-actions a img {
    filter: brightness(0) invert(1);
}
.seasonal-bonfire .barcare-header__logo-link img {
    filter: drop-shadow(0 0 10px rgba(255, 201, 74, .25));
}
.seasonal-bonfire .barcare-header__store-actions a:hover,
.seasonal-bonfire .barcare-header__nav a:hover,
.seasonal-bonfire .header_slogon_text a:hover,
.seasonal-bonfire .header_logon_text a:hover {
    color: var(--bonfire-gold);
}
.seasonal-bonfire .header_outer_block #product-search-field-0:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 201, 74, .55);
}

/* ---------- Subtle accents ---------- */

/* firework-coloured rule under the navy shortcut bar */
.seasonal-bonfire .header_short_links_block {
    position: relative;
}
.seasonal-bonfire .header_short_links_block::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #c23bd4, var(--bonfire-ember), var(--bonfire-gold), #2fd1b5, #c23bd4);
    background-size: 200% 100%;
    animation: bonfire-shimmer 12s linear infinite;
}
@keyframes bonfire-shimmer {
    to { background-position: -200% 0; }
}

.seasonal-bonfire .header_short_links_block a:hover {
    color: var(--bonfire-gold);
}
.seasonal-bonfire #menu-tertiary .rental-equipement-button:hover,
.seasonal-bonfire .mobile_rental_button .rental-equipement-button:hover {
    box-shadow: 0 0 14px rgba(255, 122, 26, .55);
}
.seasonal-bonfire ::selection {
    background: var(--bonfire-gold);
    color: #000;
}

/* ---------- Homepage campaign banner ---------- */

.bonfire-banner-block {
    padding-bottom: 0;
}
.bonfire-banner {
    position: relative;
    margin: 0;
    border-radius: 15px;
    overflow: hidden;
    line-height: 0;
}
.bonfire-banner img {
    height: auto;
}
.bonfire-banner__hotspot {
    position: absolute;
    top: 59%;
    height: 32%;
    border-radius: 10px;
    transition: box-shadow .2s;
}
.bonfire-banner__hotspot:hover,
.bonfire-banner__hotspot:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(255, 201, 74, .8), 0 0 18px rgba(255, 201, 74, .35);
    outline: none;
}

/* ---------- Footer ---------- */

.seasonal-bonfire .barcare-footer.main-footer {
    /* light scrim keeps the menu text readable over the bursts */
    background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
                var(--bonfire-night) url(../img/seasonal/bonfire/bonfire-footer-mobile.webp) no-repeat right top / cover;
}
@media (max-width: 39.99rem) {
    /* phones: the footer stacks into one tall column, so a cover crop puts the
       busiest bursts behind the links — pin the art full-width at the bottom
       instead and fade it into the night colour above (art is ~105vw tall) */
    .seasonal-bonfire .barcare-footer.main-footer {
        background:
            linear-gradient(var(--bonfire-night), var(--bonfire-night) calc(100% - 105vw), rgba(16, 11, 15, .35) calc(100% - 70vw), rgba(16, 11, 15, .35)),
            var(--bonfire-night) url(../img/seasonal/bonfire/bonfire-footer-mobile.webp) no-repeat center bottom / 100% auto;
    }
}
@media (min-width: 64rem) {
    .seasonal-bonfire .barcare-footer.main-footer {
        background: var(--bonfire-night) url(../img/seasonal/bonfire/bonfire-footer-desktop.webp) no-repeat center / cover;
    }
}
.seasonal-bonfire .barcare-footer a:hover {
    color: var(--bonfire-gold);
}

@media (prefers-reduced-motion: reduce) {
    .seasonal-bonfire .header_short_links_block::after {
        animation: none;
    }
}