/* Skip navigation link for keyboard/screen reader users */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: 0.5rem 1rem;
    z-index: 10000;
    border-radius: 0 0 4px 0;
    font-weight: 600;
    transition: none;
}

.skip-link:focus {
    top: 0;
    color: white;
    text-decoration: underline;
}

:root {
    /* ── Colour palette — update here to retheme ───── */
    --color-primary:        #312e81;   /* deep indigo */
    --color-primary-mid:    #4338ca;   /* medium indigo */
    --color-primary-dark:   #3730a3;   /* dark indigo */
    --color-primary-light:  #c7d2fe;   /* light indigo (text on dark bg) */
    --color-primary-shadow: rgba(49, 46, 129, 0.3);
    --color-accent:         #6d28d9;   /* purple — series headings, year labels */
    --color-accent-light:   #ede9fe;
    --color-success:        #28a745;   /* upcoming badges, days-away */
    --color-success-dark:   #1e7e34;
    --color-success-border: rgba(40, 167, 69, 0.4);

    /* ── Surfaces & overlays ───────────────────────── */
    --body-overlay-top: rgb(245 246 252 / 90%);
    /* --body-overlay-bottom: rgb(132 137 163 / 90%); */
    --body-overlay-bottom: rgb(172 177 183 / 90%);

    --jumbotron-bg-start: rgba(255, 255, 255, 0.1);
    --jumbotron-bg-end: rgba(255, 255, 255, 0.05);
    --jumbotron-shadow: rgba(0, 0, 0, 0.08);

    --card-bg-start: rgba(255, 255, 255, 0.95);
    --card-bg-end: rgba(248, 249, 250, 0.9);

    --footer-bg-start: rgba(248, 249, 250, 0.95);
    --footer-bg-end: rgba(233, 236, 239, 0.9);
    --footer-border: rgba(0, 0, 0, 0.1);
    --footer-shadow: rgba(0, 0, 0, 0.1);

    --text-color: #374151;

    --link-color: var(--color-primary);
    --link-hover-color: var(--color-primary-mid);

    --breadcrumb-color: #4b5563;
    --breadcrumb-separator-color: #9ca3af;
    --breadcrumb-current-color: var(--text-color);

    --cta-bg-start: #f0fdf4;
    --cta-bg-end: #dcfce7;
    --cta-border-color: #bbf7d0;
    --cta-text-color: #15803d;

    --banner-bg: rgba(238, 242, 255, 0.7);
    --banner-text-color: var(--text-color);

    --strip-bg: rgba(255, 255, 255, 0.55);
    --strip-border: rgba(67, 56, 202, 0.12);
}

.jumbotron {
    text-align: center;
    padding: 2rem 2rem;
    background: linear-gradient(135deg, var(--jumbotron-bg-start) 0%, var(--jumbotron-bg-end) 100%);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px var(--jumbotron-shadow);
}

@media (max-width: 768px) {
    .jumbotron {
        padding: 1.5rem 0.75rem;
    }

    .display-4 {
        font-size: 3rem;
    }
}

body {
    /*background: linear-gradient(to right, #484646, #524a4a);*/
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-size: cover;

    background-color: #0a2846;
    background-image: linear-gradient(to bottom, var(--body-overlay-top), var(--body-overlay-bottom)), url(assets/body-bg-v2-dark.jpg);
    background-attachment: scroll;
}

@media (min-width: 720px) {
    body {
        background-size: cover;
    }
}

.navbar {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 50%, var(--color-primary-dark) 100%);
    color: white;
    padding-top: 8px;
    box-shadow: 0 2px 10px var(--color-primary-shadow);
}

.navbar-brand a {
    color: white;
}

.navbar-brand a:hover {
    color: var(--color-primary-light);
    text-decoration: none;
}

.navbar-icon {
    height: 35px;
    /* filter: brightness(3); */
    padding-right: 10px;
}

.navbar .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0.5rem 0.75rem;
}

.navbar .nav-link:hover,
.navbar .nav-item.active .nav-link {
    color: var(--color-primary-light) !important;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

input[type="checkbox"] {
    border: 1px solid #7775b1;
}

.form-check {
    margin-right: auto;
    padding-left: 3em;
}

.subscribe-modal .form-check {
    margin-right: auto;
    padding-left: 2em;
}

/* .sub-more-games wraps the collapsed "other games" .form-check rows in a plain (non-flex)
   div — without its own margin-right:auto it stays centered by the outer flex container's
   align-items:center while the first/current .form-check pins itself to the left, so the
   two groups render at different left edges. */
.sub-more-games {
    margin-right: auto;
}

.input-group-text {
    min-width: 42px;
}

.input-group-text .fa {
    margin: 0 auto;
}

@keyframes input-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45); }
    60%  { box-shadow: 0 0 0 7px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.input-focus-highlight {
    animation: input-pulse 0.75s ease-out;
}

/* TODO make this selector more specific */
img {
    height: auto;
    max-height: 140px;
    max-width: 100%;
}

a[rel=sponsored] img{
    height: unset;
    max-height: unset;
    max-width: 100vw;
    margin: 0 auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.calendar-affiliate-banner {
    margin-bottom: 1.5rem;
}

img.banner{
        max-width: 200px;
}

@media (min-width: 576px) {
    img.banner{
        max-width: 250px;
    }
}

@media (min-width: 992px) {
    img.banner{
        max-width: 300px;
    }
}

.card {
    text-align: center;
    margin: 12px 0;
    height: auto;
    background: linear-gradient(145deg, var(--card-bg-start) 0%, var(--card-bg-end) 100%);
    backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), 0 6px 15px rgba(0, 0, 0, 0.1);
}

.card-stretch {
    height: 95%;
}

.card-subscribe-highlight {
    border: 2px solid rgba(99, 102, 241, 0.45) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08), 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

footer {
    background: linear-gradient(135deg, var(--footer-bg-start) 0%, var(--footer-bg-end) 100%);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--footer-border);
    box-shadow: 0 -2px 10px var(--footer-shadow);
}

.footer-col-heading {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #6b7280);
}

.footer-divider {
    border-color: var(--footer-border);
    opacity: 0.5;
}

.footer-disclaimer {
    font-size: 0.78rem;
    color: var(--text-muted, #9ca3af);
    opacity: 0.8;
}

.footer a,
.footer-link,
.footer .footer-link,
footer a {
    color: var(--link-color) !important;
    transition: color 0.3s ease;
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

.inline-link {
    color: var(--link-color) !important;
    text-decoration: underline;
}

.inline-link:hover {
    color: var(--link-hover-color) !important;
    text-decoration: underline;
}

.footer a:hover,
.footer-link:hover,
.footer .footer-link:hover,
footer a:hover {
    color: var(--link-hover-color) !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%);
    border: none;
    box-shadow: 0 4px 15px var(--color-primary-shadow);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-mid) 0%, var(--color-primary-dark) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--color-primary-shadow);
}

.btn-outline-secondary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-secondary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

/* TCG section headings */
.tcg-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tcg-section-header .tcg-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25em 0.6em;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: center;
}

@media (max-width: 576px) {
    .tcg-section-header {
        text-align: center;
    }
}

/* Subscribe CTA bar */
.cta-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    background: linear-gradient(135deg, var(--cta-bg-start), var(--cta-bg-end));
    border: 1px solid var(--cta-border-color);
    border-radius: 8px;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    color: var(--cta-text-color);
    margin-bottom: 1.25rem;
}

.cta-bar .cta-bar-text { flex: 1; min-width: 180px; }

.cta-bar--secondary {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: #bfdbfe;
    color: #1d4ed8;
}

/* Site-wide announcement banner */
.announcement-banner {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border-bottom: 1px solid #c7d2fe;
    color: var(--color-primary-dark);
    padding: 0.6rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    position: relative;
}

.announcement-banner a {
    color: var(--color-primary-mid);
    text-decoration: underline;
    font-weight: 600;
}

.announcement-banner a:hover {
    color: var(--color-primary-dark);
}

.announcement-banner-link {
    white-space: nowrap;
}

.announcement-banner-close {
    background: none;
    border: none;
    color: var(--color-primary-dark);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    opacity: 0.7;
}

.announcement-banner-close:hover {
    opacity: 1;
}

/* More TCGs expansion banner */
.tcg-expansion-banner {
    background: var(--banner-bg);
    border-left: 4px solid var(--color-primary-mid);
    border-radius: 0 8px 8px 0;
    padding: 0.75rem 1.1rem;
    font-size: 0.92rem;
    color: var(--banner-text-color);
}

/* Value proposition strip */
.value-prop-strip {
    font-size: 0.85rem;
    color: var(--text-color);
    background: var(--strip-bg);
    backdrop-filter: blur(6px);
    border: 1px solid var(--strip-border);
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
    margin-left: 0;
    margin-right: 0;
}

.value-prop-strip .col-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.value-prop-strip .col-4:not(:last-child) {
    border-right: 1px solid var(--strip-border);
}

.value-prop-strip .fa {
    font-size: 1.25rem;
    color: var(--color-primary-mid);
    margin-bottom: 0;
}

/* Breadcrumb navigation */
.page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--breadcrumb-color);
    list-style: none;
    padding: 0;
}

.page-breadcrumb a {
    color: var(--link-color);
    font-weight: 600;
}

.page-breadcrumb .breadcrumb-separator {
    color: var(--breadcrumb-separator-color);
}

.page-breadcrumb .breadcrumb-current {
    color: var(--breadcrumb-current-color);
    font-weight: 600;
}

/* Shared calendar page styles (star-wars, digimon, lorcana, onepiece calendars) */
/* Brand accent is overridden per page via --calendar-brand-color / --calendar-brand-border */
:root {
    --calendar-brand-color: #333;
    --calendar-brand-border: rgba(51, 51, 51, 0.2);
}

.month-group { margin-bottom: 2rem; }

.month-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--calendar-brand-color);
    border-bottom: 2px solid var(--calendar-brand-border);
    padding-bottom: 0.3rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.month-heading.upcoming {
    color: var(--color-success-dark);
    border-color: rgba(40, 167, 69, 0.3);
}

.set-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.6rem;
    transition: box-shadow 0.15s, background 0.15s;
}

.set-item:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    background: #f8f9fa;
    text-decoration: none;
}

.set-item.upcoming {
    border-left: 4px solid var(--color-success);
    /* background: #f8fff9; */
}

.set-item.upcoming:hover {
    background: #edfff2;
}

.set-item img {
    width: 130px;
    height: 53px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (min-width: 576px) {
    .set-item img {
        width: 190px;
        height: 73px;
    }
}

.set-item .item-no-logo {
    width: 105px;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 1.3rem;
    flex-shrink: 0;
}

@media (min-width: 576px) {
    .set-item .item-no-logo {
        width: 150px;
        height: 73px;
    }
}

.set-item .item-info {
    flex: 1;
    min-width: 0;
}

.set-item-logo-link {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

.set-item-link {
    display: block;
    min-width: 0;
    text-decoration: none;
}

.set-item .item-name {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.set-item .item-name,
.set-item a.item-info .item-name,
.set-item .set-item-link .item-name {
    color: var(--color-primary-mid);
    text-decoration: underline;
}

a.set-item:hover .item-name,
.set-item a.item-info:hover .item-name,
.set-item .set-item-link:hover .item-name {
    text-decoration-thickness: 2px;
}

.set-item .item-meta {
    font-size: 0.8rem;
    color: #888;
}

.js-latest-set-shop {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.35rem;
    justify-content: center;
    width: 100%;
}

.shop-link {
    font-size: 0.78rem;
    color: #6c757d;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    white-space: nowrap;
}

.shop-link:hover {
    color: #343a40;
}

.badge-type {
    background: rgba(99, 102, 241, 0.12);
    color: var(--color-primary-mid);
    font-size: 0.68rem;
    padding: 0.15em 0.5em;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-upcoming {
    background: var(--color-success);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.2em 0.55em;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-released {
    background: #6c757d;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.2em 0.55em;
    border-radius: 999px;
    white-space: nowrap;
}

.days-away {
    font-size: 0.75rem;
    color: var(--color-success);
    font-weight: 600;
}

/* Brand tiles grid */
.brand-tiles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

@media (max-width: 767px) {
    .brand-tiles-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        text-align: center;
        margin: 0 auto;
        justify-content: center;
        place-self: anchor-center;
    }
}

.brand-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1 1 130px;
    max-width: 175px;
    min-height: 115px;
    border-radius: 14px;
    padding: 1rem 0.75rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: white;
}

.brand-tile:hover {
    transform: translateY(-4px);
    color: white;
    text-decoration: none;
}

.brand-tile-icon {
    font-size: 1.75rem;
    margin-bottom: 0.45rem;
    opacity: 0.92;
}

.brand-tile-name {
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.25;
    margin-bottom: 0.4rem;
}

.brand-tile-badge {
    font-size: 0.62rem;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.brand-tile-live {
    background: rgba(74, 222, 128, 0.45);
}

/* Brand tile colors are set per-franchise via --brand-from/--brand-to
   custom properties (see frontend/src/data/franchises.ts brandColors). */
.brand-tile-custom {
    background: linear-gradient(135deg, var(--brand-from) 0%, var(--brand-to) 100%);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--brand-from) 30%, transparent);
}

.brand-tile-custom:hover {
    box-shadow: 0 10px 30px color-mix(in srgb, var(--brand-from) 40%, transparent);
}

/* Brand tile used as a card header on the games page */
.brand-tile-header {
    max-width: none;
    flex: none;
    width: 100%;
    min-height: 80px;
    border-radius: 0;
}

/* All Sets pages - series/year headings */
.series-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    padding: 0.65rem 1rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--color-primary-mid) 0%, var(--color-accent) 100%);
    color: #fff;
    border-radius: 8px;
    user-select: none;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    transition: filter 0.15s;
}
.series-heading:hover {
    filter: brightness(1.08);
}
.series-heading .fa-chevron-down {
    font-size: 0.75rem;
    opacity: 0.8;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.series-heading[aria-expanded="false"] .fa-chevron-down {
    transform: rotate(-90deg);
}
.series-heading .set-count-badge {
    margin-left: auto;
    background: rgba(255,255,255,0.18);
    border-radius: 999px;
    padding: 0.1em 0.65em;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    flex-shrink: 0;
}

.year-heading {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.1rem;
    margin: 1rem 0 0.5rem;
    border-bottom: 2px solid var(--color-accent-light);
}

/* All Sets pages - set card grid */
.sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.set-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,249,250,0.9));
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 0.75rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    display: block;
    color: inherit;
}

.set-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    text-decoration: none;
    color: inherit;
}

.set-card img {
    height: 55px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto 0.5rem;
}

.set-card .set-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.set-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.set-card-link .set-name {
    color: var(--color-primary-mid);
    text-decoration: underline;
}

.set-card .set-date {
    font-size: 0.7rem;
    color: #999;
}
.set-date-na {
    opacity: 0.65;
}
.set-card .set-count {
    font-size: 0.7rem;
    color: #888;
}

.set-card .set-id-label {
    font-size: 0.65rem;
    color: #aaa;
    font-family: monospace;
}

.set-card .no-logo {
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.set-card-shop {
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.set-card-shop .shop-link {
    font-size: 0.7rem;
}

.set-card--upcoming {
    border: 1.5px solid var(--color-success-border);
    background: linear-gradient(145deg, #f8fff9, #f0fdf3);
    position: relative;
}

.set-upcoming-label {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--color-success);
    border-radius: 999px;
    padding: 0.15em 0.6em;
    margin-bottom: 0.35rem;
}

#search-input {
    max-width: 400px;
}

/* CSS tooltip for WIP subscribe button */
#btn-subscribe-wip {
    position: relative;
}

#btn-subscribe-wip::after {
    content: "Coming Soon!";
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1f2937;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}

#btn-subscribe-wip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: #1f2937;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}

#btn-subscribe-wip:hover::after,
#btn-subscribe-wip:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/* helpers */

@media screen and (max-width: 576px) {
    .mobile-reverse {
        flex-direction: column-reverse;
    }
}

/* Calendar page */
.month-group { margin-bottom: 2rem; }
.month-heading { font-size: 1rem; font-weight: 700; color: var(--color-primary); border-bottom: 2px solid rgba(99,102,241,0.2); padding-bottom: 0.3rem; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.month-heading.upcoming { color: var(--color-success-dark); border-color: rgba(40,167,69,0.3); }
.set-item { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 0.6rem; transition: box-shadow 0.15s, background 0.15s; }
.set-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.1); background: #f8f9fa; text-decoration: none; }
.set-item.upcoming { border-color: var(--color-success-border); background: #f8fff9; }
.set-item.upcoming:hover { background: #edfff2; }
.set-item img { width: 130px; height: 53px; object-fit: contain; flex-shrink: 0; }
@media (min-width: 576px) { .set-item img { width: 190px; height: 73px; } }
.set-item .item-no-logo { width: 105px; height: 53px; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 1.3rem; flex-shrink: 0; }
@media (min-width: 576px) { .set-item .item-no-logo { width: 150px; height: 73px; } }
.set-item .item-info { flex: 1; min-width: 0; }
.set-item-logo-link { display: flex; flex-shrink: 0; align-items: center; }
.set-item-link { display: block; min-width: 0; text-decoration: none; }
.set-item .item-name { font-weight: 600; color: #333; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.set-item .item-name, .set-item a.item-info .item-name, .set-item .set-item-link .item-name { color: var(--color-primary-mid); text-decoration: underline; }
a.set-item:hover .item-name, .set-item a.item-info:hover .item-name, .set-item .set-item-link:hover .item-name { text-decoration-thickness: 2px; }
.set-item .item-meta { font-size: 0.8rem; color: #888; }
.js-latest-set-shop { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-top: 0.35rem; justify-content: center; width: 100%; }
.badge-upcoming { background: var(--color-success); color: #fff; font-size: 0.7rem; padding: 0.2em 0.55em; border-radius: 999px; white-space: nowrap; }

.badge-released { background: #6c757d; color: #fff; font-size: 0.7rem; padding: 0.2em 0.55em; border-radius: 999px; white-space: nowrap; }
.badge-out-today { background: #ea580c; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.2em 0.55em; border-radius: 999px; white-space: nowrap; }

/* Franchise badges — set rows that span multiple games (homepage, global calendar) */
.item-badges { display: flex; align-items: center; gap: 0.3rem; margin: 0.15rem 0; }
.franchise-badge { font-size: 0.68rem; font-weight: 700; padding: 0.15em 0.5em; border-radius: 999px; color: #fff; white-space: nowrap; }

/* Homepage Latest/Upcoming/Out Today rows — center the badge row under the set name */
.homepage-set-list .item-badges,
.homepage-out-today .item-badges { justify-content: center; }

/* Multi-select game filter dropdown (homepage Latest/Upcoming cards) */
.game-filter-menu { max-height: 320px; overflow-y: auto; min-width: 200px; }
.game-filter-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.game-filter-item input[type="checkbox"] { margin: 0; flex-shrink: 0; }
/* .card sets its own stacking context (backdrop-filter); without this, an open dropdown in
   one card can render behind the adjacent card in the same row. */
.card:has(.dropdown-menu.show) { z-index: 1050; }
.game-filter-item:active,
.game-filter-item:hover { background: var(--color-accent-light); }
.days-away { font-size: 0.75rem; color: var(--color-success); font-weight: 600; }
#name-latest-set { text-decoration: underline; }
.alert-link { color: #0056d6 !important; font-weight: 700; text-decoration: underline; }
.alert-link:hover,
.alert-link:focus { color: #0041a8 !important; text-decoration-thickness: 2px; }

/* Static SEO card list on /pokemon/sets/[id]/ — visible to crawlers, hidden once JS grid renders */
.seo-card-list {
    columns: 2;
    column-gap: 2rem;
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.seo-card-list li {
    padding: 0.2rem 0;
    break-inside: avoid;
}

.seo-card-list .card-number {
    font-family: monospace;
    color: #6b7280;
    margin-right: 0.35em;
}

.js-loaded .seo-card-list {
    display: none;
}

@media (max-width: 576px) {
    .seo-card-list {
        columns: 1;
    }
}

/* Blog post markdown content */
.blog-post-content h2 {
    margin-top: 1.75rem;
    font-size: 1.35rem;
}

.blog-post-content h3 {
    margin-top: 1.25rem;
    font-size: 1.1rem;
}

.blog-post-content p {
    margin-bottom: 1rem;
}

.blog-post-content ul,
.blog-post-content ol {
    margin-bottom: 1rem;
}

/* Blog post hero logo */
.blog-post-logo {
    max-height: 100px;
    max-width: 220px;
    object-fit: contain;
    margin: 0 auto 1rem;
    display: block;
}

.jumbotron .item-no-logo {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 2rem;
    margin: 0 auto 1rem;
}

/* Blog index card thumbnail */
.blog-index-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.blog-index-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
    flex-shrink: 0;
}

.blog-index-card .item-no-logo {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.blog-post-tags .badge {
    margin-right: 0.35rem;
    font-weight: 500;
}