/*
DJ Hammy Archive — Supersonic public theme
v3.0.0

Preferred public visual theme. Loaded after tokens.css and style.css on the
main public application. The pre-Supersonic visual theme is retained under
assets/legacy-theme/ and legacy-theme-preview.php for reference.
*/

.theme-supersonic {
    --color-brand: #cf2d6f;
    --color-brand-hover: #b4205c;
    --color-action: #cf2d6f;
    --color-action-hover: #b4205c;
    --accent: var(--color-action);
    --accent-hover: var(--color-action-hover);
    --archive-green: var(--color-action);
    --hammy-orange: var(--color-brand);
    --hammy-orange-hover: var(--color-brand-hover);
    --color-focus-action: rgba(207, 45, 111, .30);
    --color-focus-brand: rgba(207, 45, 111, .30);
    --color-focus-action-strong: rgba(207, 45, 111, .24);
    --color-focus-brand-strong: rgba(207, 45, 111, .24);
    --color-brand-tint: rgba(207, 45, 111, .15);
    --color-home-hero-glow: rgba(207, 45, 111, .18);
    --color-home-hero-warm: #160d13;
    --color-home-hero-deep: #0b0e13;
    --color-home-search-border: #54505d;
    --color-home-shortcut-border: #3e3b46;
    --color-home-shortcut-border-hover: #cf2d6f;
    --color-home-shortcut-hover-border: #cf2d6f;
    --color-home-shortcut-hover-surface: rgba(207, 45, 111, .09);
}

.theme-supersonic .c-site-header__brand-sub {
    color: var(--color-brand);
}

.theme-supersonic .c-site-nav a.active {
    background: var(--color-brand);
}

.theme-supersonic .c-hero--archive {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    background-color: #07090d;
    background-image: var(--homepage-hero-image, url("brand/hammy-hero-photo-desktop.webp"));
    background-repeat: no-repeat;
    background-position: var(--homepage-hero-position, center bottom);
    background-size: cover;
}

.theme-supersonic .c-hero--archive::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(6, 8, 12, var(--homepage-hero-overlay, .42)) 0%,
            rgba(6, 8, 12, var(--homepage-hero-overlay, .32)) 24%,
            rgba(6, 8, 12, var(--homepage-hero-overlay, .58)) 100%
        ),
        linear-gradient(
            90deg,
            rgba(113, 11, 47, .48) 0%,
            rgba(8, 10, 17, .30) 34%,
            rgba(8, 10, 17, .34) 66%,
            rgba(18, 36, 108, .42) 100%
        ),
        radial-gradient(circle at 16% 22%, rgba(255, 65, 140, .24), transparent 30%),
        radial-gradient(circle at 84% 14%, rgba(97, 118, 255, .22), transparent 24%),
        radial-gradient(circle at 52% 100%, rgba(0, 0, 0, .38), transparent 56%);
}

.theme-supersonic .c-hero--archive.c-hero--no-image {
    background-image:
        radial-gradient(circle at 18% 8%, rgba(207, 45, 111, .20), transparent 38%),
        radial-gradient(circle at 86% 18%, rgba(72, 91, 190, .16), transparent 34%),
        linear-gradient(180deg, #111018 0%, #090b10 58%, #07090d 100%);
    background-position: initial;
    background-size: auto;
}

.theme-supersonic .c-hero--archive::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(5, 6, 10, .10) 0%,
            rgba(5, 6, 10, .18) 34%,
            rgba(5, 6, 10, .34) 100%
        ),
        radial-gradient(
            ellipse at center,
            transparent 34%,
            rgba(7, 8, 12, .12) 70%,
            rgba(7, 8, 12, .22) 100%
        );
}

.theme-supersonic .home-hero-inner {
    position: relative;
    z-index: 1;
    margin-inline: auto;
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
    text-align: center;
}

.c-preview-hero-title__supersonic {
    display: none;
}

.theme-supersonic .c-preview-hero-eyebrow,
.theme-supersonic .c-preview-hero-title__current {
    display: none;
}

.theme-supersonic .c-preview-hero-title {
    max-width: none;
    margin: 0 auto var(--space-12);
    line-height: 1;
}

.theme-supersonic .c-preview-hero-title__supersonic {
    display: block;
}

.theme-supersonic .c-preview-hero-title__supersonic img {
    display: block;
    width: min(760px, 80vw);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.30));
}

.theme-supersonic .c-archive-search {
    width: min(620px, 100%);
    margin-inline: auto;
}

.theme-supersonic .c-archive-search input {
    background: rgba(22, 25, 32, .90);
    backdrop-filter: blur(8px);
}

.theme-supersonic .c-home-browse-line {
    margin-top: var(--space-3);
    color: rgba(255, 255, 255, .84);
    font-size: var(--type-size-navigation);
    font-weight: 700;
    line-height: 1.5;
}

.theme-supersonic .c-home-browse-line a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.theme-supersonic .c-home-browse-line a:hover,
.theme-supersonic .c-home-browse-line a:focus-visible {
    color: #fff;
}


.theme-supersonic .c-button--brand {
    background: var(--color-brand);
    color: #fff;
}

.theme-supersonic .c-button--brand:hover,
.theme-supersonic .c-button--brand:focus-visible {
    background: var(--color-brand-hover);
    color: #fff;
}

.theme-supersonic .c-button--primary,
.theme-supersonic .compact-actions .c-button--primary,
.theme-supersonic .show-card-modern-actions .c-button--primary {
    background: var(--color-action);
    border-color: var(--color-action);
    color: #fff;
}

.theme-supersonic .c-button--primary:hover,
.theme-supersonic .compact-actions .c-button--primary:hover,
.theme-supersonic .show-card-modern-actions .c-button--primary:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
}

.theme-supersonic .c-tag--stream {
    background: rgba(207,45,111,.12);
    color: #8e1948;
}

.theme-supersonic .c-text-link {
    color: #9b1b50;
}

/* Preview-only comparison control. */
.c-theme-preview-switcher {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(12,14,18,.94);
    color: #fff;
    box-shadow: 0 10px 35px rgba(0,0,0,.30);
    backdrop-filter: blur(10px);
}

.c-theme-preview-switcher__label {
    padding: 0 8px;
    color: #afb2b8;
    font-size: .72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.c-theme-preview-switcher__button {
    min-height: 34px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: .82rem;
    font-weight: 750;
    cursor: pointer;
}

.c-theme-preview-switcher__button:hover,
.c-theme-preview-switcher__button:focus-visible {
    background: rgba(255,255,255,.10);
}

.c-theme-preview-switcher__button.active {
    background: #cf2d6f;
}

@media (max-width: 760px) {
    /*
     * Mobile archive hero
     *
     * Keep the larger-screen photographic treatment, but simplify the hero
     * on smaller screens so the Supersonic identity, search and browse routes
     * have a clearer hierarchy.
     */
    .theme-supersonic .c-hero--archive {
        background-color: #090b10;
        background-image:
            radial-gradient(circle at 18% 8%, rgba(207, 45, 111, .20), transparent 38%),
            radial-gradient(circle at 86% 18%, rgba(72, 91, 190, .16), transparent 34%),
            linear-gradient(180deg, #111018 0%, #090b10 58%, #07090d 100%);
        background-position: initial;
        background-size: auto;
    }

    .theme-supersonic .c-hero--archive::before {
        background:
            linear-gradient(
                135deg,
                rgba(207, 45, 111, .08) 0%,
                transparent 42%,
                rgba(53, 73, 169, .08) 100%
            );
    }

    .theme-supersonic .c-hero--archive::after {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, .14) 100%
            );
    }

    .theme-supersonic .home-hero-inner {
        padding-top: var(--space-8);
        padding-bottom: var(--space-12);
    }

    .theme-supersonic .c-preview-hero-title {
        margin-bottom: var(--space-6);
    }

    .theme-supersonic .c-preview-hero-title__supersonic img {
        width: min(560px, 78vw);
        margin-inline: auto;
    }

    .theme-supersonic .c-archive-search {
        margin-top: 0;
    }

    .theme-supersonic .c-home-browse-line {
        margin-top: var(--space-4);
        font-size: var(--type-size-secondary);
    }


    .c-theme-preview-switcher {
        right: 8px;
        bottom: 8px;
    }

    .c-theme-preview-switcher__label {
        display: none;
    }
}

@media (max-width: 480px) {
    .theme-supersonic .home-hero-inner {
        padding-top: var(--space-7);
        padding-bottom: var(--space-8);
    }

    .theme-supersonic .c-preview-hero-title__supersonic img {
        width: min(500px, 82vw);
    }
}


/* ---------------------------------------------------------
   Error pages
   --------------------------------------------------------- */

.theme-supersonic.error-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 10%, rgba(207, 45, 111, .13), transparent 30rem),
        radial-gradient(circle at 85% 85%, rgba(76, 94, 195, .12), transparent 34rem),
        #f7f7f9;
}

.c-error-page {
    padding: clamp(48px, 8vw, 96px) 0;
}

.c-error-card {
    width: min(820px, 100%);
    margin: 0 auto;
    padding: clamp(28px, 5vw, 56px);
    border: 1px solid rgba(20, 22, 28, .10);
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 70px rgba(14, 16, 22, .09);
    text-align: center;
}

.c-error-card .eyebrow {
    margin-bottom: 12px;
}

.c-error-card h1 {
    max-width: 700px;
    margin: 0 auto 18px;
    font-size: clamp(2.2rem, 6vw, 4.8rem);
    line-height: .98;
    text-wrap: balance;
}

.c-error-page__intro {
    max-width: 620px;
    margin: 0 auto 30px;
    color: #555863;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.6;
}

.c-error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 42px;
}

.c-error-page__search {
    max-width: 700px;
    margin: 0 auto;
    padding-top: 32px;
    border-top: 1px solid rgba(20, 22, 28, .10);
}

.c-error-page__search h2 {
    margin: 0 0 6px;
    font-size: 1.25rem;
}

.c-error-page__search > p {
    margin: 0 0 18px;
    color: #666974;
}

.c-error-page__search .c-archive-search {
    width: 100%;
    margin-inline: auto;
}

.c-error-page__search .c-archive-search__examples {
    justify-content: center;
    text-align: center;
}

@media (max-width: 640px) {
    .c-error-page {
        padding: 28px 0;
    }

    .c-error-card {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .c-error-page__actions {
        flex-direction: column;
    }

    .c-error-page__actions .c-button {
        width: 100%;
    }
}