/* Techno theme — the site default; ?theme=default opts back out (see the switch in listings.html).
   Every rule is scoped to html[data-theme="techno"], so this file does nothing unless the
   switch is on, and the extra specificity wins over styles.css regardless of load order.
   Turn it off with ?theme=default. */

html[data-theme="techno"] {
    /* Laser red, used as crisp light: thin straight lines on black, never blurred or glowing */
    --techno-red: #ff1a1a;
    --techno-red-dim: rgba(255, 26, 26, 0.45);
    --techno-bg: #050505;
    --techno-row: #0b0b0b;
    --techno-row-alt: #111111;
    --techno-line: rgba(255, 255, 255, 0.08);
    --techno-text: #f2f2f2;
    --techno-muted: #8a8a8a;
    --techno-font: "Archivo", "Open Sans", sans-serif;

    /* Re-point the brand tokens so everything built on them follows */
    --color-pink: var(--techno-red);
    --color-cream: var(--techno-text);
    --color-purple: var(--techno-red);
    --bg-row-even: var(--techno-row-alt);
    --bg-row-odd: var(--techno-row);
    --bg-dark: var(--techno-bg);
    --gradient-brand: linear-gradient(90deg, var(--techno-text), var(--techno-text));
    --gradient-brand-webkit: -webkit-linear-gradient(90deg, var(--techno-text), var(--techno-text));
    --gradient-border: linear-gradient(var(--techno-bg), var(--techno-bg)) padding-box, linear-gradient(var(--techno-red-dim), var(--techno-red-dim)) border-box;

    background: var(--techno-bg);
}

/* Transparent body: styles.css paints body black, and with html also painted that covers
   the z-index:-1 .background-wrapper and hides the light pattern */
html[data-theme="techno"] body {
    font-family: var(--techno-font);
    background: transparent;
}

/* --- Background: a barely-there 48px grid on black --- */

html[data-theme="techno"] .background-wrapper {
    filter: none;
}

html[data-theme="techno"] .background-wrapper::before {
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 48px 48px;
    background-position: center top;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, rgba(0, 0, 0, 0.35) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 60%, rgba(0, 0, 0, 0.35) 100%);
    opacity: 1;
    z-index: 0; /* styles.css puts it at -2, under the wrapper */
}

/* Canvas for the scroll-driven light ceiling (theme-techno-scene.js), above the grid.
   Faded out by mid-screen so it lives behind the header, never behind the listings. */
html[data-theme="techno"] .techno-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 55%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 55%);
}

/* --- Title: solid heavy expanded type --- */

html[data-theme="techno"] h1.gradient {
    font-family: var(--techno-font);
    font-weight: 900;
    font-stretch: 125%;
    font-variation-settings: "wdth" 125;
    font-size: min(8em, 12vw);
    letter-spacing: -0.01em;
    line-height: 0.88;
    background: none;
    -webkit-text-stroke: 0;
    color: var(--techno-text);
    -webkit-text-fill-color: var(--techno-text);
    opacity: 1;
}

/* --- The beat: the listings.html timer adds .glitch-active for 200 ms every 500 ms (a
   120 BPM kick). The title punches and two copies — laser red and faint white — are cut
   into horizontal bands that jump sideways in hard steps. No skew, no easing wobble. --- */

html[data-theme="techno"] h1.gradient::before {
    color: rgba(255, 26, 26, 0.55);
    -webkit-text-fill-color: rgba(255, 26, 26, 0.55);
    filter: blur(1.5px);
}

html[data-theme="techno"] h1.gradient::after {
    color: rgba(255, 255, 255, 0.2);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.2);
    filter: blur(1.5px);
}

html[data-theme="techno"] h1.glitch-active {
    animation: techno-kick 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html[data-theme="techno"] h1.glitch-active::before {
    opacity: 1;
    animation: techno-slice-red 0.2s steps(1, end);
}

html[data-theme="techno"] h1.glitch-active::after {
    opacity: 1;
    animation: techno-slice-white 0.2s steps(1, end);
}

@keyframes techno-kick {
    0%   { transform: scale(1.035); }
    100% { transform: scale(1); }
}

@keyframes techno-slice-red {
    0%   { clip-path: inset(8% 0 72% 0);  transform: translateX(-14px); }
    25%  { clip-path: inset(46% 0 38% 0); transform: translateX(10px); }
    50%  { clip-path: inset(70% 0 12% 0); transform: translateX(-6px); }
    75%  { clip-path: inset(28% 0 58% 0); transform: translateX(4px); }
    100% { clip-path: inset(0 0 100% 0);  transform: none; }
}

@keyframes techno-slice-white {
    0%   { clip-path: inset(58% 0 26% 0); transform: translateX(12px); }
    25%  { clip-path: inset(18% 0 70% 0); transform: translateX(-8px); }
    50%  { clip-path: inset(36% 0 50% 0); transform: translateX(6px); }
    75%  { clip-path: inset(80% 0 6% 0);  transform: translateX(-3px); }
    100% { clip-path: inset(0 0 100% 0);  transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="techno"] h1.glitch-active {
        animation: none;
    }
    html[data-theme="techno"] h1.gradient::before,
    html[data-theme="techno"] h1.gradient::after {
        display: none;
    }
}

html[data-theme="techno"] h2.subheading,
html[data-theme="techno"] .subheading {
    font-family: var(--techno-font);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.45em;
    font-size: 0.95em;
    color: var(--techno-text);
}

/* Thin red rule under the subheading */
html[data-theme="techno"] h2.subheading::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin: 14px auto 0;
    background: var(--techno-red);
}

/* --- Filters: outlined, wide-tracked, no fill --- */

html[data-theme="techno"] .filter-container {
    background: transparent;
}

html[data-theme="techno"] .filter-input {
    background: rgba(0, 0, 0, 0.6);
    color: var(--techno-text);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-family: var(--techno-font);
    letter-spacing: 0.12em;
    transition: border-color 0.15s ease;
}

html[data-theme="techno"] .filter-input:focus {
    border-color: var(--techno-red);
}

html[data-theme="techno"] .filter-input::placeholder {
    color: var(--techno-muted);
    letter-spacing: 0;
    font-size: 72%;
}

html[data-theme="techno"] .filter-icon {
    filter: invert(1);
    opacity: 0.7;
}

html[data-theme="techno"] .map-link {
    font-family: var(--techno-font);
    font-weight: 300;
    letter-spacing: 0.35em;
    font-size: 0.9em;
    text-shadow: none;
}

html[data-theme="techno"] .map-link-icon {
    filter: grayscale(1) brightness(1.4);
}

html[data-theme="techno"] .social-media-icon {
    filter: grayscale(1);
}

/* --- Favourite DJs card --- */

html[data-theme="techno"] .favorite-djs-card {
    background: rgba(5, 5, 5, 0.85);
    border: 1px solid var(--techno-line);
    border-left: 2px solid var(--techno-red);
    border-radius: 0;
    box-shadow: none;
}

html[data-theme="techno"] .favorite-djs-card::before {
    display: none;
}

html[data-theme="techno"] .favorite-djs-kicker {
    color: var(--techno-red);
    font-weight: 400;
    letter-spacing: 0.35em;
}

html[data-theme="techno"] .favorite-djs-title {
    font-family: var(--techno-font);
    font-variation-settings: "wdth" 125;
    font-weight: 900;
}

/* Favourite-DJ rows follow the event rows: no colour wash, a red edge line on hover */
html[data-theme="techno"] .favorite-dj-row {
    font-family: var(--techno-font);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--techno-line);
    color: rgba(255, 255, 255, 0.78);
    transition: color 0.15s ease, box-shadow 0.15s ease;
}

html[data-theme="techno"] .favorite-dj-name {
    font-weight: 600;
}

html[data-theme="techno"] .favorite-dj-event {
    color: var(--techno-muted);
    font-weight: 400;
    letter-spacing: 0.04em;
}

html[data-theme="techno"] .favorite-dj-star {
    color: var(--techno-red);
}

html[data-theme="techno"] .favorite-dj-row:hover {
    background: rgba(0, 0, 0, 0.5);
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme="techno"] .favorite-dj-row:hover {
        color: rgba(255, 255, 255, 0.96);
        box-shadow: inset 2px 0 0 var(--techno-red);
    }

    html[data-theme="techno"] .favorite-dj-row:hover .favorite-dj-event {
        color: var(--techno-text);
    }
}

html[data-theme="techno"] .favorite-djs-empty {
    border-radius: 0;
    border-color: var(--techno-line);
}

/* --- Date rows: black bar, "SAT 10.10" on one line with the weekday in red --- */

html[data-theme="techno"] .date-cell {
    background-color: var(--techno-bg);
    color: var(--techno-text);
    font-family: var(--techno-font);
    font-weight: 900;
    font-variation-settings: "wdth" 125;
    letter-spacing: 0;
    border-top: 1px solid var(--techno-line);
    border-bottom: 2px solid var(--techno-red);
    padding: 16px 0 12px;
}

/* Set by theme-techno.js, which splits "THU 08/10" into these spans. One line, same heavy
   type as the date: the day name is what people scan for, and a single line saves height
   (on the Instagram day slides especially). Earlier it sat above the date as a small thin
   label, which was hard to read on phones. */
html[data-theme="techno"] .techno-weekday {
    color: var(--techno-red);
}

html[data-theme="techno"] .techno-weekday,
html[data-theme="techno"] .techno-day {
    display: inline;
    line-height: 1;
}

/* Date rows in listings (site, club pages, Instagram slides) sit straight on the background:
   no panel, no top or side lines, no backdrop blur, only the red underline. The popup header
   keeps its panel. */
html[data-theme="techno"] tr.date-row td.date-cell {
    background-color: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

/* styles.css blurs whatever is behind a date row (backdrop-filter), which smeared the
   background into a dark band with hard edges */
html[data-theme="techno"] tr.date-row {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-theme="techno"] .today-date-row .date-cell {
    color: var(--techno-red);
}

html[data-theme="techno"] .date-cell-subtitle {
    color: var(--techno-text);
    font-weight: 300;
    letter-spacing: 0.4em;
    font-size: 36%;
    margin-top: 6px;
    opacity: 1;
}

/* Beach-club-to-night-club divider: crisp line instead of the glowing gradient bar */
html[data-theme="techno"] .day-night-separator::before {
    height: 1px;
    top: 0;
    background: var(--techno-red);
    border-radius: 0;
    box-shadow: none;
}

/* --- Event rows --- */

html[data-theme="techno"] tr.data-row {
    color: var(--techno-text);
    border-bottom: 1px solid var(--techno-line);
    backdrop-filter: none;
}

html[data-theme="techno"] tr.data-row:hover {
    box-shadow: inset 2px 0 0 var(--techno-red);
}

/* Club name watermark: outlined instead of filled */
html[data-theme="techno"] .club-name {
    font-family: var(--techno-font);
    font-variation-settings: "wdth" 125;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.14);
}

html[data-theme="techno"] .club-icon-container {
    border: 1px solid var(--techno-red-dim);
    background: var(--techno-bg);
    transition: border-color 0.15s ease;
}

/* Club logos in the event rows: on devices with a mouse they sit monochrome and dimmed and
   switch on to full colour on row hover (dimmed, because most logos are already black and
   white). Touch devices cannot hover, so there the logos are always shown as they are.
   Scoped to tr.data-row: the event popup reuses .club-icon and must show logos in full. */
@media (hover: hover) and (pointer: fine) {
    html[data-theme="techno"]:not([data-surface="instagram"]) tr.data-row .club-icon {
        filter: grayscale(1) brightness(0.75) contrast(1.1);
        transition: filter 0.15s ease;
    }

    html[data-theme="techno"] tr.data-row:hover .club-icon {
        filter: none;
    }

    html[data-theme="techno"] tr.data-row:hover .club-icon-container {
        border-color: var(--techno-red);
    }

    /* The hovered row's lineup lights up to near full white */
    html[data-theme="techno"] tr.data-row:hover .lineup-cell .dj-big-name-row,
    html[data-theme="techno"] tr.data-row:hover .lineup-cell .dj-container {
        color: rgba(255, 255, 255, 0.96);
    }
}

/* Lineups lighter and softer than the white headings, so the outlined club name behind
   them still reads */
html[data-theme="techno"] .lineup-cell {
    font-family: var(--techno-font);
    font-weight: 300;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.72);
}

html[data-theme="techno"] .lineup-cell .dj-big-name-row,
html[data-theme="techno"] .lineup-cell .dj-container {
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.15s ease;
}

/* "B2B" between names: styles.css fixes its colour and weight, so it stayed bright while the
   names around it were dimmed. It follows the lineup instead, including hover and the
   touch-device and Instagram values. */
html[data-theme="techno"] .lineup-cell .b2b-separator {
    color: inherit;
    font-weight: inherit;
}

/* Big names keep their emphasis, just not at full weight (styles.css forces white !important) */
html[data-theme="techno"] .lineup-cell .big-name-dj {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 500;
    text-shadow: none !important;
}

/* Touch devices have no hover to light a row up, and the light weight thins out further
   at phone sizes, so lineups sit brighter and at regular weight there */
@media (hover: none), (pointer: coarse) {
    html[data-theme="techno"] .lineup-cell {
        font-weight: 400;
    }

    html[data-theme="techno"] .lineup-cell .dj-big-name-row,
    html[data-theme="techno"] .lineup-cell .dj-container {
        color: rgba(255, 255, 255, 0.88);
    }

    html[data-theme="techno"] .lineup-cell .big-name-dj {
        color: #fff !important;
        font-weight: 600;
    }
}

html[data-theme="techno"] .more-button {
    background: var(--techno-bg);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Beach clubs: keep them distinguishable without the sepia wash */
html[data-theme="techno"] .beach-club-row .lineup-cell,
html[data-theme="techno"] .beach-club-row .more-button {
    filter: none;
}

html[data-theme="techno"] .beach-club-row .club-icon-container {
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.5);
}

/* --- Badges: flat, square, thin --- */

html[data-theme="techno"] .popular-badge {
    background: transparent;
    border: 1px solid var(--techno-red);
    border-radius: 0;
    box-shadow: none;
    color: var(--techno-red);
    font-family: var(--techno-font);
    letter-spacing: 0.25em;
}

html[data-theme="techno"] .popular-badge svg {
    display: none;
}

html[data-theme="techno"] .day-badge svg {
    display: none;
}

html[data-theme="techno"] .day-badge {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--techno-font);
    letter-spacing: 0.25em;
}

/* --- Event popup description: more air between lines --- */

html[data-theme="techno"] .lineup-description {
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

/* --- Featured flyer: thin red frame, no blurred halo --- */

html[data-theme="techno"] .featured-background {
    display: none;
}

html[data-theme="techno"] .featured-post img.featured-main-image {
    outline: 1px solid var(--techno-red-dim);
}

/* Size the flyer by its own aspect ratio so the red frame hugs the picture. styles.css gives
   it a fixed height with width: auto and max-width: 100%; on phones the width cap kicks in
   and object-fit: contain then letterboxes the flyer inside a box of the wrong shape,
   leaving black bands inside the frame. With both dimensions auto and only max limits,
   the browser keeps the ratio. */
@media (max-width: 600px) {
    html[data-theme="techno"] .featured-post img.featured-main-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: min(35vh, 360px);
        min-height: min(25vh, 240px); /* the lazy thumbnail is tiny; keeps the slot from collapsing */
    }
}

/* --- Date picker (flatpickr): black panel, square days, laser-red selection --- */

html[data-theme="techno"] .flatpickr-calendar {
    background: var(--techno-row);
    border: 1px solid var(--techno-line);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--techno-font);
}

html[data-theme="techno"] .flatpickr-calendar.arrowTop::before {
    border-bottom-color: var(--techno-line);
}

html[data-theme="techno"] .flatpickr-calendar.arrowTop::after {
    border-bottom-color: var(--techno-row);
}

html[data-theme="techno"] .flatpickr-months .flatpickr-month,
html[data-theme="techno"] .flatpickr-current-month .flatpickr-monthDropdown-months,
html[data-theme="techno"] .flatpickr-current-month input.cur-year,
html[data-theme="techno"] .flatpickr-months .flatpickr-prev-month,
html[data-theme="techno"] .flatpickr-months .flatpickr-next-month {
    color: var(--techno-text);
    fill: var(--techno-text);
    background: transparent;
    font-family: var(--techno-font);
}

html[data-theme="techno"] .flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: var(--techno-row);
    color: var(--techno-text);
}

html[data-theme="techno"] .flatpickr-months .flatpickr-prev-month:hover svg,
html[data-theme="techno"] .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--techno-red);
}

html[data-theme="techno"] span.flatpickr-weekday {
    color: var(--techno-muted);
    font-weight: 400;
    letter-spacing: 0.1em;
}

html[data-theme="techno"] .flatpickr-day {
    color: rgba(255, 255, 255, 0.85);
    border-radius: 0;
}

html[data-theme="techno"] .flatpickr-day.prevMonthDay,
html[data-theme="techno"] .flatpickr-day.nextMonthDay,
html[data-theme="techno"] .flatpickr-day.flatpickr-disabled {
    color: rgba(255, 255, 255, 0.25);
}

html[data-theme="techno"] .flatpickr-day:hover,
html[data-theme="techno"] .flatpickr-day:focus,
html[data-theme="techno"] .flatpickr-day.has-events:hover {
    background: transparent;
    border-color: var(--techno-red);
    color: #fff;
}

html[data-theme="techno"] .flatpickr-day.today {
    border-color: rgba(255, 255, 255, 0.5);
}

html[data-theme="techno"] .flatpickr-day.today:hover,
html[data-theme="techno"] .flatpickr-day.today:focus {
    background: transparent;
    border-color: var(--techno-red);
    color: #fff;
}

/* Range days: flatpickr's own box-shadow fill reads as stray blocks on black, so a plain
   tint shows the span instead */
html[data-theme="techno"] .flatpickr-day.inRange,
html[data-theme="techno"] .flatpickr-day.prevMonthDay.inRange,
html[data-theme="techno"] .flatpickr-day.nextMonthDay.inRange {
    background: rgba(255, 26, 26, 0.18);
    border-color: transparent;
    box-shadow: -5px 0 0 rgba(255, 26, 26, 0.18), 5px 0 0 rgba(255, 26, 26, 0.18);
    color: #fff;
}

html[data-theme="techno"] .flatpickr-day.selected,
html[data-theme="techno"] .flatpickr-day.startRange,
html[data-theme="techno"] .flatpickr-day.endRange,
html[data-theme="techno"] .flatpickr-day.selected.inRange,
html[data-theme="techno"] .flatpickr-day.startRange.inRange,
html[data-theme="techno"] .flatpickr-day.endRange.inRange,
html[data-theme="techno"] .flatpickr-day.selected:hover,
html[data-theme="techno"] .flatpickr-day.startRange:hover,
html[data-theme="techno"] .flatpickr-day.endRange:hover,
html[data-theme="techno"] .flatpickr-day.has-events.selected,
html[data-theme="techno"] .flatpickr-day.has-events.startRange,
html[data-theme="techno"] .flatpickr-day.has-events.endRange {
    background: var(--techno-red);
    border-color: var(--techno-red);
    box-shadow: none;
    color: #fff;
}

/* Event marker under the date: a small laser-red square instead of the gradient dot */
html[data-theme="techno"] .flatpickr-day.has-events::after,
html[data-theme="techno"] .flatpickr-day.has-events:hover::after,
html[data-theme="techno"] .flatpickr-day.has-events:focus::after {
    background: var(--techno-red);
    border-radius: 0;
    width: 4px;
    height: 4px;
}

html[data-theme="techno"] .flatpickr-day.has-events.selected::after,
html[data-theme="techno"] .flatpickr-day.has-events.startRange::after,
html[data-theme="techno"] .flatpickr-day.has-events.endRange::after {
    background: #fff;
}

/* --- Search suggestions: a dark panel, red labels, the row hover line --- */

html[data-theme="techno"] .suggestions-container {
    background: var(--techno-row);
    border: 1px solid var(--techno-line);
    border-top: 0;
    font-family: var(--techno-font);
}

html[data-theme="techno"] .suggestion-divider {
    color: var(--techno-red);
    border-bottom: 1px solid var(--techno-line);
    font-size: 0.75em;
    letter-spacing: 0.3em;
    padding: 8px 10px 6px;
    margin-top: 0;
}

html[data-theme="techno"] .suggestion-item {
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    padding: 6px 10px;
    margin-top: 0;
}

html[data-theme="techno"] .suggestion-item:hover {
    color: #fff;
    box-shadow: inset 2px 0 0 var(--techno-red);
}

/* --- Map popup ("Where to party"): black frame, light close button, dark controls --- */

html[data-theme="techno"] .map-modal-content {
    background: var(--techno-row);
    border: 1px solid var(--techno-line);
    border-left: 2px solid var(--techno-red);
}

/* Close buttons on every popup (event details, map): scripts.js and listings.html draw the X
   with a hard-coded black stroke, invisible on the theme's black popups */
html[data-theme="techno"] .modal-close svg path {
    stroke: var(--techno-text);
    stroke-width: 1.4;
    transition: stroke 0.15s ease;
}

/* Red on mouse hover only: the event popup focuses its close button when it opens, so a
   focus-based colour would show the X red on every open, and taps leave :hover stuck */
@media (hover: hover) and (pointer: fine) {
    html[data-theme="techno"] .modal-close:hover svg path {
        stroke: var(--techno-red);
    }
}

html[data-theme="techno"] #mapContainer {
    background: var(--techno-bg);
}

html[data-theme="techno"] .leaflet-bar a,
html[data-theme="techno"] .leaflet-bar a:hover {
    background: var(--techno-row);
    color: var(--techno-text);
    border-color: var(--techno-line);
    border-radius: 0;
}

html[data-theme="techno"] .leaflet-bar {
    border: 1px solid var(--techno-line);
    border-radius: 0;
}

html[data-theme="techno"] .leaflet-container .leaflet-control-attribution {
    background: rgba(0, 0, 0, 0.6);
    color: var(--techno-muted);
}

html[data-theme="techno"] .leaflet-container .leaflet-control-attribution a {
    color: var(--techno-text);
}

html[data-theme="techno"] .popup-logo-container {
    border-color: var(--techno-red-dim);
    background: var(--techno-bg);
}

/* --- Privacy policy (policy.html): the Termly text on a dark panel --- */

html[data-theme="techno"] .attribution {
    display: none; /* credits the old swirl background, which the theme does not show */
}

html[data-theme="techno"] .button-container {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: border-color 0.15s ease, background 0.15s ease;
}

html[data-theme="techno"] .button-container:hover {
    border: 1px solid var(--techno-red);
    background: var(--techno-red);
}

html[data-theme="techno"] .button-container .button {
    font-family: var(--techno-font);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: transparent;
}

html[data-theme="techno"] .welcome {
    background-color: var(--techno-row);
    border: 1px solid var(--techno-line);
    border-left: 2px solid var(--techno-red);
}

/* Termly's embedded styles set every colour and font with !important */
html[data-theme="techno"] [data-custom-class='body'],
html[data-theme="techno"] [data-custom-class='body'] * {
    font-family: var(--techno-font) !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="techno"] [data-custom-class='title'],
html[data-theme="techno"] [data-custom-class='title'] *,
html[data-theme="techno"] [data-custom-class='heading_1'],
html[data-theme="techno"] [data-custom-class='heading_1'] *,
html[data-theme="techno"] [data-custom-class='heading_2'],
html[data-theme="techno"] [data-custom-class='heading_2'] * {
    color: var(--techno-text) !important;
}

html[data-theme="techno"] [data-custom-class='link'],
html[data-theme="techno"] [data-custom-class='link'] *,
html[data-theme="techno"] [data-custom-class='body'] a {
    color: var(--techno-text) !important;
    text-decoration-color: var(--techno-red) !important;
}

/* --- Cookie banner (CookieScript, injected by a third-party script) --- */

html[data-theme="techno"] #cookiescript_injected {
    background-color: var(--techno-row) !important;
    border-top: 1px solid var(--techno-line) !important;
    box-shadow: none !important;
    font-family: var(--techno-font) !important;
}

html[data-theme="techno"] #cookiescript_injected * {
    font-family: var(--techno-font) !important;
}

html[data-theme="techno"] #cookiescript_accept,
html[data-theme="techno"] #cookiescript_save {
    background-color: var(--techno-red) !important;
    border-radius: 0 !important;
    letter-spacing: 0.15em !important;
}

html[data-theme="techno"] #cookiescript_reject {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0 !important;
    letter-spacing: 0.15em !important;
}

html[data-theme="techno"] #cookiescript_readmore {
    color: var(--techno-text) !important;
    border-color: var(--techno-red) !important;
}

html[data-theme="techno"] #cookiescript_injected .mdc-checkbox__background {
    border-radius: 0 !important;
}

html[data-theme="techno"] #cookiescript_injected .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {
    background-color: var(--techno-red) !important;
    border-color: var(--techno-red) !important;
}

/* --- Generated club and event pages (scripts/generate-event-pages.js) ---
   They reuse the listings classes above; these cover the elements their inline <style>
   blocks define (pink hero gradient, cream labels, soft cards). */

html[data-theme="techno"] .event-page,
html[data-theme="techno"] .event-card {
    background: rgba(5, 5, 5, 0.88);
    border: 1px solid var(--techno-line);
    box-shadow: none;
}

html[data-theme="techno"] .event-hero {
    background: transparent;
    border-bottom: 2px solid var(--techno-red);
}

html[data-theme="techno"] .event-title,
html[data-theme="techno"] .club-hub-title,
html[data-theme="techno"] .club-hub-identity .modal-club-name {
    font-family: var(--techno-font);
    font-weight: 900;
    font-variation-settings: "wdth" 125;
    letter-spacing: -0.01em;
    text-shadow: none;
}

/* Labels: thin, wide-tracked caps; red for kickers and section titles, muted for meta */
html[data-theme="techno"] .event-kicker,
html[data-theme="techno"] .related-title,
html[data-theme="techno"] .event-section h2 {
    color: var(--techno-red);
    font-family: var(--techno-font);
    font-weight: 400;
    letter-spacing: 0.35em;
}

html[data-theme="techno"] .event-meta,
html[data-theme="techno"] .event-location-link,
html[data-theme="techno"] .club-hub-meta,
html[data-theme="techno"] .club-hub-address {
    color: var(--techno-muted);
    font-family: var(--techno-font);
    font-weight: 400;
    letter-spacing: 0.08em;
}

html[data-theme="techno"] .event-past {
    background: transparent;
    border-bottom: 1px solid var(--techno-red);
    color: var(--techno-red);
    font-weight: 400;
    letter-spacing: 0.35em;
}

html[data-theme="techno"] .event-flyer,
html[data-theme="techno"] .event-card-flyer {
    border: 0;
    outline: 1px solid var(--techno-red-dim);
    box-shadow: none;
}

html[data-theme="techno"] .event-page .lineup-description {
    border-color: var(--techno-line);
    line-height: 1.6;
}

/* Club hub identity block: a black panel with the red edge line */
html[data-theme="techno"] .club-hub-identity {
    background: var(--techno-row);
    border: 1px solid var(--techno-line);
    border-left: 2px solid var(--techno-red);
    border-radius: 0;
    box-shadow: none;
}

html[data-theme="techno"] .club-guide-intro {
    border-top-color: var(--techno-line);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
}

html[data-theme="techno"] .club-section-row span {
    color: var(--techno-muted);
    font-family: var(--techno-font);
    font-weight: 400;
    letter-spacing: 0.4em;
}

html[data-theme="techno"] .club-section-row span::before,
html[data-theme="techno"] .club-section-row span::after {
    background: var(--techno-line);
}

/* Buttons: flat, square, thin outline; filled laser red on hover */
html[data-theme="techno"] .event-cta,
html[data-theme="techno"] .event-full-schedule-cta,
html[data-theme="techno"] .club-hub-action {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    box-shadow: none;
    color: var(--techno-text);
    font-family: var(--techno-font);
    font-weight: 500;
    letter-spacing: 0.2em;
    transform: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

html[data-theme="techno"] .event-ticket {
    border-color: var(--techno-red);
}

html[data-theme="techno"] .event-cta:hover,
html[data-theme="techno"] .event-full-schedule-cta:hover,
html[data-theme="techno"] .club-hub-action:hover {
    background: var(--techno-red);
    border-color: var(--techno-red);
    box-shadow: none;
    color: #fff;
    transform: none;
}

/* Related events: the row treatment — dark panel, red edge line on hover */
html[data-theme="techno"] .related-card {
    background: var(--techno-row);
    border: 1px solid var(--techno-line);
    border-radius: 0;
    font-family: var(--techno-font);
}

html[data-theme="techno"] .related-card:hover {
    background: var(--techno-row);
    border-color: var(--techno-line);
    box-shadow: inset 2px 0 0 var(--techno-red);
}

html[data-theme="techno"] .related-date {
    color: var(--techno-red);
    font-weight: 400;
    letter-spacing: 0.25em;
}

html[data-theme="techno"] .related-club {
    color: var(--techno-text);
    font-weight: 600;
}

html[data-theme="techno"] .related-djs {
    color: rgba(255, 255, 255, 0.65);
}

html[data-theme="techno"] .event-related-section {
    border-top-color: var(--techno-line);
}

html[data-theme="techno"] .event-footer a {
    color: var(--techno-text);
    text-decoration-color: var(--techno-red);
}

html[data-theme="techno"] .modal-save-button.saved-state {
    color: var(--techno-red);
}

/* Their own hamburger menu */
html[data-theme="techno"] .hamburger-dropdown-menu {
    background-color: var(--techno-row);
    border: 1px solid var(--techno-line);
    font-family: var(--techno-font);
}

html[data-theme="techno"] .hamburger-dropdown-menu a:hover,
html[data-theme="techno"] .language-option.active,
html[data-theme="techno"] .language-option:hover {
    background-color: transparent;
    box-shadow: inset 2px 0 0 var(--techno-red);
}

html[data-theme="techno"] .language-option {
    border-radius: 0;
}

/* --- Instagram renders (generate_*.html with &theme=techno; html[data-surface="instagram"]) ---
   1080x1350 screenshots taken by the backend's generateIGContent.js. */

/* The edition colour (bgColor, set inline) gives way to black. The panning background photo
   (--bg-img, panned per slide by the templates' bgOffset rule) stays, in black and white and
   darkened, under the grid; the light ceiling (theme-techno-scene.js, a still per slide)
   sits on top. */
html[data-surface="instagram"][data-theme="techno"] .background-wrapper {
    background: var(--techno-bg) !important;
}

html[data-surface="instagram"][data-theme="techno"] .background-wrapper::before {
    background:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 48px 48px,
        var(--bg-img) no-repeat 0 0 / auto 1350px;
    filter: grayscale(1) brightness(0.3) contrast(1.15);
    opacity: 0.45;
    -webkit-mask-image: none;
    mask-image: none;
}

/* Flyers on the featured slides: a frame that still reads at phone size */
html[data-surface="instagram"][data-theme="techno"] .featured-post img.featured-main-image {
    outline: 1.5px solid var(--techno-red);
}

/* Headlines (#headline on the intro and end slides): heavy white Archivo, frozen mid-beat */
html[data-surface="instagram"][data-theme="techno"] #headline {
    font-style: normal;
    font-size: 150px;
    width: min-content;
    min-width: 0;
    margin: 0 auto;
    line-height: 0.9;
}

html[data-surface="instagram"][data-theme="techno"] #headline.techno-still::before {
    opacity: 1;
    clip-path: inset(46% 0 38% 0);
    transform: translateX(12px);
}

html[data-surface="instagram"][data-theme="techno"] #headline.techno-still::after {
    opacity: 1;
    clip-path: inset(12% 0 74% 0);
    transform: translateX(-10px);
}

html[data-surface="instagram"][data-theme="techno"] .date-range-text {
    font-family: var(--techno-font);
    font-weight: 400;
    font-size: 3.4em;
    letter-spacing: 0.3em;
    color: var(--techno-red);
    text-shadow: none;
    opacity: 1;
    margin-top: 40px;
}

/* The listing template forces its brown/grey row colours with !important */
html[data-surface="instagram"][data-theme="techno"] tr.data-row {
    background-color: var(--techno-row) !important;
}

html[data-surface="instagram"][data-theme="techno"] tr:nth-child(even):not(.gap-row):not(.date-row) {
    background-color: var(--techno-row-alt) !important;
}

/* Lineups: the phone brightening is scoped to touch devices (hover: none / pointer: coarse),
   which the screenshot browser is not, so the slides got the dim desktop resting state. They
   are viewed at phone size, so they get the phone values. */
html[data-surface="instagram"][data-theme="techno"] .lineup-cell {
    font-weight: 400;
}

html[data-surface="instagram"][data-theme="techno"] .lineup-cell .dj-big-name-row,
html[data-surface="instagram"][data-theme="techno"] .lineup-cell .dj-container {
    color: rgba(255, 255, 255, 0.88);
}

html[data-surface="instagram"][data-theme="techno"] .lineup-cell .big-name-dj {
    color: #fff !important;
    font-weight: 600;
}

/* Wordmarks: the corner watermark and the end slide's mallorca-clubs.com */
html[data-surface="instagram"][data-theme="techno"] .homepage-text {
    font-family: var(--techno-font);
    font-weight: 300;
    letter-spacing: 0.45em;
    text-shadow: none;
    opacity: 0.8;
}

html[data-surface="instagram"][data-theme="techno"] .content > h2 {
    font-family: var(--techno-font);
    font-style: normal;
    font-weight: 400;
    font-size: 2.6em;
    letter-spacing: 0.3em;
    white-space: nowrap;
    color: var(--techno-red);
    text-shadow: none;
    text-transform: uppercase;
}

/* --- Phone header (theme-techno-mobile.js): text MENU and full-screen menu instead of the
   hamburger and the pinned bottom bar, one control row, favourites collapsed to a line ---
   The pieces are created on every screen size and only shown under 600px. */

html[data-theme="techno"] .techno-map-btn,
html[data-theme="techno"] .techno-date-chip,
html[data-theme="techno"] .techno-fav-line {
    display: none;
}

@media (max-width: 600px) {
    /* 1. Menu: styled in theme-techno-menu.css, shared with the blog */

    /* Room between the MENU label and the title */
    html[data-theme="techno"] h1.gradient {
        margin-top: 64px !important;
    }

    /* styles.css makes the title inline on phones, where text-align does nothing; the
       listings layout centres it anyway, the generated club and event pages did not */
    html[data-theme="techno"] h1.event-site-title {
        display: block;
        text-align: center;
    }

    /* The light ceiling reaches further down a tall phone screen before fading */
    html[data-theme="techno"] .techno-scene {
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 72%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 72%);
    }

    /* Header spacing: drop only the red rule under the tagline; its position stays */
    html[data-theme="techno"] h2.subheading::after {
        display: none;
    }

    /* 2. One control row: search, calendar button, map button */
    html[data-theme="techno"] .filter-container {
        flex-direction: row !important;
        align-items: stretch;
        gap: 8px !important;
        width: calc(100vw - 32px) !important;
        max-width: 520px !important;
        margin: 22px 0 18px !important;
        padding: 0 !important;
    }

    html[data-theme="techno"] .filter-container .filter-wrapper {
        min-width: 0 !important;
        height: 44px;
    }

    html[data-theme="techno"] .filter-container .filter-wrapper .filter-input {
        height: 44px;
        margin: 0;
        box-sizing: border-box;
    }

    html[data-theme="techno"] .filter-container .filter-wrapper .filter-icon {
        top: 22px;
    }

    /* search field first, filling the row */
    html[data-theme="techno"] .filter-container .filter-wrapper:nth-child(2) {
        order: 1;
        flex: 1 1 auto;
    }

    html[data-theme="techno"] .filter-container .filter-wrapper:nth-child(2) .filter-input {
        padding-left: 40px !important;
        padding-right: 12px !important;
        text-align: left;
    }

    /* room for the clear button only once there is something to clear */
    html[data-theme="techno"] .filter-container .filter-wrapper:nth-child(2) .filter-input:not(:placeholder-shown) {
        padding-right: 40px !important;
    }

    html[data-theme="techno"] .filter-container .filter-wrapper:nth-child(2) .filter-input::placeholder {
        font-size: 10.5px;
        letter-spacing: 0.04em;
    }

    html[data-theme="techno"] .filter-container .filter-wrapper:nth-child(2) .filter-icon {
        left: 13px;
    }

    /* the date filter shrinks to a calendar button; the chosen dates show in the chip */
    html[data-theme="techno"] .filter-container .filter-wrapper:nth-child(1) {
        order: 2;
        flex: 0 0 44px;
        width: 44px;
    }

    html[data-theme="techno"] .filter-container .filter-wrapper:nth-child(1) .filter-input {
        padding: 0 !important;
        color: transparent !important;
        caret-color: transparent;
        cursor: pointer;
    }

    html[data-theme="techno"] .filter-container .filter-wrapper:nth-child(1) .filter-input::placeholder {
        color: transparent !important;
    }

    html[data-theme="techno"] .filter-container .filter-wrapper:nth-child(1) .filter-icon {
        left: 50%;
        transform: translate(-50%, -50%);
    }

    html[data-theme="techno"] .filter-container .filter-wrapper:nth-child(1) .reset-button,
    html[data-theme="techno"] .filter-container .filter-wrapper:nth-child(1) .filter-spinner {
        display: none !important;
    }

    html[data-theme="techno"] .filter-container.techno-has-dates .filter-wrapper:nth-child(1) .filter-input {
        border-color: var(--techno-red);
    }

    html[data-theme="techno"] .techno-map-btn {
        display: flex;
        order: 3;
        flex: 0 0 44px;
        align-items: center;
        justify-content: center;
        height: 44px;
        padding: 0;
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.22);
        cursor: pointer;
    }

    html[data-theme="techno"] .techno-map-btn img {
        width: 22px;
        height: auto;
        filter: grayscale(1) brightness(1.4);
    }

    html[data-theme="techno"] .map-link-container {
        display: none !important;
    }

    html[data-theme="techno"] .techno-date-chip:not([hidden]) {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: -8px 0 14px;
        color: var(--techno-text);
        font: 400 12px var(--techno-font);
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }

    html[data-theme="techno"] .techno-date-chip button {
        padding: 0 4px;
        background: none;
        border: 0;
        color: var(--techno-red);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
    }

    html[data-theme="techno"] .suggestions-container:empty {
        border: 0;
    }

    /* 3. Favourites collapsed to one line, expanding in place */
    html[data-theme="techno"] .favorite-djs-section {
        width: calc(100vw - 32px);
        margin: 0 auto 4px;
    }

    html[data-theme="techno"] .favorite-djs-section .favorite-djs-card {
        padding: 0;
    }

    html[data-theme="techno"] .favorite-djs-section.techno-fav-collapsed .favorite-djs-card > *:not(.techno-fav-line) {
        display: none !important;
    }

    html[data-theme="techno"] .favorite-djs-section:not(.techno-fav-collapsed) .favorite-djs-card > *:not(.techno-fav-line) {
        margin-left: 14px;
        margin-right: 14px;
    }

    /* the line already says what the card is, so the expanded card shows only its content */
    html[data-theme="techno"] .favorite-djs-section .favorite-djs-kicker,
    html[data-theme="techno"] .favorite-djs-section .favorite-djs-title {
        display: none !important;
    }

    html[data-theme="techno"] .favorite-djs-section:not(.techno-fav-collapsed) .favorite-djs-card {
        padding-bottom: 14px;
    }

    html[data-theme="techno"] .techno-fav-line {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 14px;
        background: none;
        border: 0;
        color: var(--techno-text);
        font: 400 12px var(--techno-font);
        letter-spacing: 0.25em;
        text-align: left;
        text-transform: uppercase;
        cursor: pointer;
    }

    html[data-theme="techno"] .techno-fav-line b {
        color: var(--techno-red);
        font-weight: 400;
    }

    html[data-theme="techno"] .techno-fav-line i {
        margin-left: auto;
        color: rgba(255, 255, 255, 0.6);
        font-size: 16px;
        font-style: normal;
        letter-spacing: 0;
    }
}

/* --- Phones --- */

@media (max-width: 600px) {
    html[data-theme="techno"] h1.gradient {
        letter-spacing: -0.02em;
        line-height: 0.92;
    }

    html[data-theme="techno"] h2.subheading,
    html[data-theme="techno"] .subheading {
        font-size: 0.72em !important;
        letter-spacing: 0.3em;
    }

    html[data-theme="techno"] .map-link {
        letter-spacing: 0.25em;
    }

    html[data-theme="techno"] .date-cell {
        font-size: 2.2em;
    }

}