.post-hero-festival {
  text-align: center;
  margin: 2rem auto;
}
.post-hero-festival .post-hero-logo {
  max-width: 220px;
  height: auto;
  display: inline-block;
}


.browse-scope .browse-card, .browse-card {
    background-color: #f3f4f608 !important;
    background-image: linear-gradient(var(--ss-surface), var(--ss-surface)) !important;
    border: 1px solid #78787838 !important;
    border-radius: 14px !important;
    box-shadow: var(--ss-elev) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 18px !important;
}

.browse-scope .browse-search input[type="search"], .browse-search input[type="search"] {

                background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>), none !important;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e0e5ea%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C%2Fline%3E%3C%2Fsvg%3E) !important;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239aa1aa%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C%2Fline%3E%3C%2Fsvg%3E), linear-gradient(var(--ss-surface), var(--ss-surface)) !important;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239aa1aa%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%3E%3C/circle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C/line%3E%3C/svg%3E), linear-gradient(var(--ss-surface), var(--ss-surface)) !important;
    background-color: #f3f4f608 !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: left 14px center, 0 0 !important;
    background-size: 18px 18px, 100% 100% !important;
    padding-left: 46px !important;
    border: 1px solid #e8eaed54 !important;
    border-radius: 16px !important;
    box-shadow: var(--ss-elev) !important;
    outline: none !important;
    color: inherit !important;
    font-size: 1rem !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Select month dropdown */
.browse-scope .browse-search select#monthSearch, .browse-search select#monthSearch {
    background-color: #f3f4f608 !important;
    background-image: linear-gradient(var(--ss-surface), var(--ss-surface)) !important;
    border: 1px solid #e8eaed4d !important;
    border-radius: 16px !important;
    box-shadow: var(--ss-elev) !important;
    color: inherit !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 14px 18px !important;
    font-size: 1rem !important;
}

/* === Browse Festivals overrides v20 (scoped; minimal impact) === */
.browse-scope .browse-card, .browse-card {
    background-color: #f3f4f608 !important;
    background-image: linear-gradient(var(--ss-surface), var(--ss-surface)) !important;
    border: 1px solid #78787838 !important;
    border-radius: 14px !important;
    box-shadow: var(--ss-elev) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 18px !important;
}

.browse-scope .browse-search input[type="search"], .browse-search input[type="search"] {

                background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>), none !important;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e0e5ea%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C%2Fline%3E%3C%2Fsvg%3E) !important;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239aa1aa%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C%2Fline%3E%3C%2Fsvg%3E), linear-gradient(var(--ss-surface), var(--ss-surface)) !important;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239aa1aa%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%3E%3C/circle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C/line%3E%3C/svg%3E), linear-gradient(var(--ss-surface), var(--ss-surface)) !important;
    background-color: #f3f4f608 !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: left 14px center, 0 0 !important;
    background-size: 18px 18px, 100% 100% !important;
    padding-left: 46px !important;
    border: 1px solid #e8eaed54 !important;
    border-radius: 16px !important;
    box-shadow: var(--ss-elev) !important;
    outline: none !important;
    color: inherit !important;
    font-size: 1rem !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Select month dropdown */
.browse-scope .browse-search select#monthSearch, .browse-search select#monthSearch {
    background-color: #f3f4f608 !important;
    background-image: linear-gradient(var(--ss-surface), var(--ss-surface)) !important;
    border: 1px solid #e8eaed4d !important;
    border-radius: 16px !important;
    box-shadow: var(--ss-elev) !important;
    color: inherit !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 14px 18px !important;
    font-size: 1rem !important;
}

/* === Browse Festivals overrides v21 (dark mode adjustment) === */
[data-color-scheme="dark"] .browse-scope .browse-card, 
[data-color-scheme="dark"] .browse-card {
    background-color: rgba(30,30,30,0.65) !important;
    background-image: linear-gradient(var(--ss-surface), var(--ss-surface)) !important;
    border: 1px solid rgba(120,120,120,0.25) !important;
    border-radius: 14px !important;
    box-shadow: var(--ss-elev) !important;
}

[data-color-scheme="dark"] .browse-scope .browse-search input[type="search"], 
[data-color-scheme="dark"] .browse-search input[type="search"],
[data-color-scheme="dark"] .browse-scope .browse-search select#monthSearch, 
[data-color-scheme="dark"] .browse-search select#monthSearch {
    background-color: rgba(30,30,30,0.65) !important;
    background-image: linear-gradient(var(--ss-surface), var(--ss-surface)) !important;
    border: 1px solid rgba(232,234,237,0.25) !important;
    border-radius: 16px !important;
    box-shadow: var(--ss-elev) !important;
    color: inherit !important;
}

/* === Dark mode refinement v21: darker surfaces + softer borders === */
:root[data-color-scheme="dark"] .browse-scope .browse-card,
:root[data-color-scheme="dark"] .browse-card {
    /* Darker translucent surface */
    background-color: rgba(20,22,24,0.42) !important;
    /* Keep gradient but let base color drive perceived darkness */
    background-image: linear-gradient(var(--ss-surface), var(--ss-surface)) !important;
    /* Softer, more transparent border */
    border-color: #78787826 !important; /* ~15% alpha */
}

:root[data-color-scheme="dark"] .browse-scope .browse-search input[type="search"],
:root[data-color-scheme="dark"] .browse-search input[type="search"] {
    background-color: rgba(20,22,24,0.36) !important;
    border-color: #e8eaed24 !important; /* ~14% alpha */
}

:root[data-color-scheme="dark"] .browse-scope .browse-search select#monthSearch,
:root[data-color-scheme="dark"] .browse-search select#monthSearch {
    background-color: rgba(20,22,24,0.36) !important;
    border-color: #e8eaed24 !important; /* ~14% alpha */
}


/* Match select (All months) to search input */
:root[data-color-scheme="dark"] .browse-scope .browse-search select#monthSearch {
    background-color: rgba(24,26,28,0.45) !important;
    border-color: #e8eaed30 !important;
}

/* Festival cards: slightly clearer but still subtle */
:root[data-color-scheme="dark"] .browse-scope .browse-card,
:root[data-color-scheme="dark"] .browse-card {
    background-color: rgba(28,30,32,0.55) !important;
    border-color: #7878782e !important;
}

/* === Dark mode refinement v22: unified inputs + clearer icon + card hover === */
:root[data-color-scheme="dark"] {
    /* Tweakable alphas for surfaces and controls */
    --ss-surface-alpha-card: 0.40;     /* cards */
    --ss-surface-alpha-input: 0.32;    /* inputs/selects */
    --ss-border-alpha: 0.16;           /* base border */
    --ss-border-alpha-hover: 0.24;     /* hover border */
}

/* Cards */
:root[data-color-scheme="dark"] .browse-scope .browse-card,
:root[data-color-scheme="dark"] .browse-card {
    background-color: rgba(22,24,26,var(--ss-surface-alpha-card)) !important;
    background-image: linear-gradient(var(--ss-surface), var(--ss-surface)) !important;
    border-color: rgba(232,234,237,var(--ss-border-alpha)) !important;
    transition: background-color .18s ease, border-color .18s ease;
}
:root[data-color-scheme="dark"] .browse-scope .browse-card:hover,
:root[data-color-scheme="dark"] .browse-card:hover {
    border-color: rgba(232,234,237,var(--ss-border-alpha-hover)) !important;
    background-color: rgba(22,24,26,calc(var(--ss-surface-alpha-card) + 0.04)) !important;
}

/* Search input and month select: SAME background/outline */
:root[data-color-scheme="dark"] .browse-scope .browse-search input[type="search"],
:root[data-color-scheme="dark"] .browse-search input[type="search"],
:root[data-color-scheme="dark"] .browse-scope .browse-search select#monthSearch,
:root[data-color-scheme="dark"] .browse-search select#monthSearch {
    background-color: rgba(22,24,26,var(--ss-surface-alpha-input)) !important;
    background-image: linear-gradient(var(--ss-surface), var(--ss-surface)) !important;
    border-color: rgba(232,234,237,var(--ss-border-alpha)) !important;
}

/* Make sure select looks consistent (radius, padding already set above) */
:root[data-color-scheme="dark"] .browse-scope .browse-search select#monthSearch,
:root[data-color-scheme="dark"] .browse-search select#monthSearch {
    color: inherit !important;
}


/* Unify search input + month select background */
:root[data-color-scheme="dark"] .browse-scope .browse-search input[type="search"],
:root[data-color-scheme="dark"] .browse-search input[type="search"],
:root[data-color-scheme="dark"] .browse-scope .browse-search select#monthSearch,
:root[data-color-scheme="dark"] .browse-search select#monthSearch {
    background-color: rgba(30,32,34,0.38) !important;  /* unified tone */
    border-color: rgba(232,234,237,0.18) !important;
    color: inherit !important;
}

/* Festival cards: darker background for better contrast */
:root[data-color-scheme="dark"] .browse-scope .browse-card,
:root[data-color-scheme="dark"] .browse-card {
    background-color: rgba(30,32,34,0.52) !important;
    border-color: rgba(232,234,237,0.20) !important;
}

/* === Dark mode refinement v23: unify input/select backgrounds, darker card === */
:root[data-color-scheme="dark"] {
    --ss-surface-alpha-card: 0.48;     /* darker cards */
    --ss-surface-unified: rgba(28,30,32,0.34); /* unified input/select bg */
    --ss-border-alpha: 0.18;
}

/* Cards darker */
:root[data-color-scheme="dark"] .browse-scope .browse-card,
:root[data-color-scheme="dark"] .browse-card {
    background-color: rgba(22,24,26,var(--ss-surface-alpha-card)) !important;
    border-color: rgba(232,234,237,var(--ss-border-alpha)) !important;
}

/* Unified background for search and month select (remove gradients to avoid mismatches) */
:root[data-color-scheme="dark"] .browse-scope .browse-search input[type="search"],
:root[data-color-scheme="dark"] .browse-search input[type="search"] {
    background-color: var(--ss-surface-unified) !important;
    background-repeat: no-repeat !important;
    background-position: left 14px center !important;
    background-size: 18px 18px !important;
    /* ensure no extra gradient layer competes */
    background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e0e5ea%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C%2Fline%3E%3C%2Fsvg%3E) !important;
    border-color: rgba(232,234,237,var(--ss-border-alpha)) !important;
}

:root[data-color-scheme="dark"] .browse-scope .browse-search select#monthSearch,
:root[data-color-scheme="dark"] .browse-search select#monthSearch {
    background-image: none !important;
    background-color: var(--ss-surface-unified) !important;
    border-color: rgba(232,234,237,var(--ss-border-alpha)) !important;
}


/* Cards unified */
:root[data-color-scheme="dark"] .browse-scope .browse-card,
:root[data-color-scheme="dark"] .browse-card {
    background-color: var(--ss-surface-unified) !important;
    background-image: none !important;
    border-color: rgba(232,234,237,var(--ss-border-alpha)) !important;
}

/* Unified background for search and month select */
:root[data-color-scheme="dark"] .browse-scope .browse-search input[type="search"],
:root[data-color-scheme="dark"] .browse-search input[type="search"],
:root[data-color-scheme="dark"] .browse-scope .browse-search select#monthSearch,
:root[data-color-scheme="dark"] .browse-search select#monthSearch {
    background-color: var(--ss-surface-unified) !important;
    background-image: none !important;
    border-color: rgba(232,234,237,var(--ss-border-alpha)) !important;
}

/* === Dark mode refinement v24: cards use the SAME unified bg as inputs/select === */
:root[data-color-scheme="dark"] {
    /* Single source of truth for surface color */
    --ss-surface-unified: rgba(28,30,32,0.34);
    --ss-border-alpha: 0.18;
    --ss-border-alpha-hover: 0.24;
}

/* Cards now use EXACTLY the same background as the search input/select */
:root[data-color-scheme="dark"] .browse-scope .browse-card,
:root[data-color-scheme="dark"] .browse-card {
    background-color: var(--ss-surface-unified) !important;
    background-image: none !important; /* remove gradients to avoid tone mismatch */
    border-color: rgba(232,234,237,var(--ss-border-alpha)) !important;
    transition: background-color .18s ease, border-color .18s ease;
}
:root[data-color-scheme="dark"] .browse-scope .browse-card:hover,
:root[data-color-scheme="dark"] .browse-card:hover {
    border-color: rgba(232,234,237,var(--ss-border-alpha-hover)) !important;
    background-color: rgba(28,30,32,0.38) !important; /* subtle lift on hover */
}

/* Keep inputs/select in sync with the same unified background */
:root[data-color-scheme="dark"] .browse-scope .browse-search input[type="search"],
:root[data-color-scheme="dark"] .browse-search input[type="search"],
:root[data-color-scheme="dark"] .browse-scope .browse-search select#monthSearch,
:root[data-color-scheme="dark"] .browse-search select#monthSearch {
    background-color: var(--ss-surface-unified) !important;
    border-color: rgba(232,234,237,var(--ss-border-alpha)) !important;
}

/* === v25: fix magnifier visibility in dark mode === */
:root[data-color-scheme="dark"] .browse-scope .browse-search input[type="search"],
:root[data-color-scheme="dark"] .browse-search input[type="search"] {
    background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23f2f5f8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C%2Fline%3E%3C%2Fsvg%3E) !important;
    background-repeat: no-repeat !important;
    background-position: left 14px center !important;
    background-size: 18px 18px !important;
    padding-left: 46px !important; /* ensure room for the icon */
}


.browse-card .title { font-weight: 600; }