/* Radio Site Maker Generated Site - Base Styles */
/* Bold, dark, energetic radio-industry aesthetic */
/* Colors and fonts injected via CSS custom properties in generated site.css */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: var(--p-line-height, 1.6);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading, var(--color-text));
    line-height: 1.05;
    letter-spacing: var(--h-letter-spacing, -0.03em);
    font-weight: var(--h-weight, 800);
}

h1 { font-size: var(--h1-size, clamp(3rem, 8vw, 7rem)); }
h2 { font-size: var(--h2-size, clamp(2rem, 5vw, 3.5rem)); }
h3 { font-size: var(--h3-size, clamp(1.4rem, 3vw, 2rem)); }

a {
    color: var(--color-link, var(--color-primary));
    text-decoration: none;
    transition: color 0.2s, opacity 0.2s;
}

a:hover { opacity: var(--a-hover-opacity, 0.8); }

img {
    max-width: 100%;
    height: auto;
}

#page-content {
    transition: opacity 0.15s ease;
}

/* ============================================
   GRADIENT TEXT UTILITY
   ============================================ */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-right: 0.15em;
}

.text-gradient-accent {
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-right: 0.15em;
}

/* ============================================
   WATERMARK / GHOST TEXT
   Giant semi-transparent text behind sections
   ============================================ */
.watermark {
    position: absolute;
    font-family: var(--font-heading);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.85;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    color: var(--color-text);
    opacity: 0.03;
    z-index: 0;
}

.watermark--primary {
    color: var(--color-primary);
    opacity: 0.06;
}

.watermark--accent {
    color: var(--color-accent);
    opacity: 0.06;
}

.watermark--sm {
    font-size: clamp(4rem, 12vw, 8rem);
}

.watermark--md {
    font-size: clamp(6rem, 18vw, 14rem);
}

.watermark--lg {
    font-size: clamp(8rem, 25vw, 20rem);
}

.watermark--xl {
    font-size: clamp(10rem, 35vw, 28rem);
}

/* Repeating text pattern background */
.bg-text-repeat {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.bg-text-repeat::before {
    content: attr(data-text);
    position: absolute;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(3rem, 8vw, 6rem);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text);
    opacity: 0.025;
    transform: rotate(-5deg);
    top: -20%;
    left: -10%;
    width: 200%;
    line-height: 1.2;
    word-spacing: 0.3em;
    letter-spacing: 0.05em;
}

/* ============================================
   ACCENT BLOCKS
   Solid color panels for CTAs, highlights
   ============================================ */
.accent-block {
    background: var(--color-accent);
    color: var(--color-on-accent);
    position: relative;
    overflow: hidden;
}

.accent-block--primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.accent-block--secondary {
    background: var(--color-secondary);
    color: var(--color-on-secondary);
}

/* ============================================
   IMAGE SHAPES — angular clips for DJ/show photos
   ============================================ */
.clip-angle-right {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%);
}

.clip-angle-left {
    clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
}

.clip-diagonal {
    clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
}

.clip-slant {
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

.clip-notch-br {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}

.clip-notch-tl {
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%, 0 20%);
}

/* ============================================
   NOISE TEXTURE OVERLAY
   ============================================ */
.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: var(--noise-opacity, 0.035);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* ============================================
   GEOMETRIC DECORATIONS — bold, energetic
   ============================================ */

/* Plus sign (+) decorative element */
.geo-plus {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.geo-plus::before,
.geo-plus::after {
    content: '';
    position: absolute;
    background: var(--color-accent);
    border-radius: 2px;
}

.geo-plus::before {
    width: 4px;
    height: 24px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.geo-plus::after {
    width: 24px;
    height: 4px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.geo-plus--lg::before {
    width: 6px;
    height: 40px;
}

.geo-plus--lg::after {
    width: 40px;
    height: 6px;
}

.geo-plus--primary::before,
.geo-plus--primary::after {
    background: var(--color-primary);
}

/* Dot grid decoration */
.geo-dots {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(5, 8px);
    grid-template-rows: repeat(5, 8px);
    gap: 10px;
}

.geo-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.2;
}

/* Corner accent — thick L-shaped border */
.corner-accent {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 1;
}

.corner-accent--tl {
    top: 0;
    left: 0;
    border-top: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
}

.corner-accent--tr {
    top: 0;
    right: 0;
    border-top: 4px solid var(--color-accent);
    border-right: 4px solid var(--color-accent);
}

.corner-accent--bl {
    bottom: 0;
    left: 0;
    border-bottom: 4px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
}

.corner-accent--br {
    bottom: 0;
    right: 0;
    border-bottom: 4px solid var(--color-accent);
    border-right: 4px solid var(--color-accent);
}

/* Stripe pattern background */
.bg-stripes {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.02) 10px,
        rgba(255,255,255,0.02) 20px
    );
}

/* Halftone-style dots */
.bg-halftone {
    background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.06;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Legacy geometric shapes (kept for backwards compat) */
.geo-triangle {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid var(--color-primary);
    opacity: 0.12;
    position: absolute;
    pointer-events: none;
}

.geo-triangle--accent { border-bottom-color: var(--color-accent); }
.geo-triangle--lg { border-left-width: 70px; border-right-width: 70px; border-bottom-width: 120px; }

.geo-circle {
    border-radius: 50%;
    border: 3px solid var(--color-primary);
    opacity: 0.1;
    position: absolute;
    pointer-events: none;
}

.geo-circle--accent { border-color: var(--color-accent); }
.geo-circle--filled { border: none; background: var(--color-primary); opacity: 0.08; }

.diagonal-line {
    position: absolute;
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    opacity: 0.15;
    transform: rotate(-35deg);
    pointer-events: none;
}

.diagonal-line--accent {
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Equalizer bars */
@keyframes eq-bar-1 { 0%, 100% { height: 15%; } 25% { height: 80%; } 50% { height: 40%; } 75% { height: 95%; } }
@keyframes eq-bar-2 { 0%, 100% { height: 40%; } 25% { height: 20%; } 50% { height: 90%; } 75% { height: 55%; } }
@keyframes eq-bar-3 { 0%, 100% { height: 70%; } 25% { height: 45%; } 50% { height: 15%; } 75% { height: 85%; } }
@keyframes eq-bar-4 { 0%, 100% { height: 30%; } 25% { height: 90%; } 50% { height: 60%; } 75% { height: 20%; } }
@keyframes eq-bar-5 { 0%, 100% { height: 55%; } 25% { height: 30%; } 50% { height: 80%; } 75% { height: 10%; } }

.eq-bar {
    display: inline-block;
    width: 4px;
    border-radius: 2px;
    background: var(--color-accent);
    transform-origin: bottom;
}

.eq-bar:nth-child(1) { animation: eq-bar-1 1.2s ease-in-out infinite; }
.eq-bar:nth-child(2) { animation: eq-bar-2 1.0s ease-in-out infinite; }
.eq-bar:nth-child(3) { animation: eq-bar-3 1.4s ease-in-out infinite; }
.eq-bar:nth-child(4) { animation: eq-bar-4 0.9s ease-in-out infinite; }
.eq-bar:nth-child(5) { animation: eq-bar-5 1.1s ease-in-out infinite; }
.eq-bar:nth-child(6) { animation: eq-bar-2 1.3s ease-in-out infinite; }
.eq-bar:nth-child(7) { animation: eq-bar-4 1.0s ease-in-out infinite; }
.eq-bar:nth-child(8) { animation: eq-bar-1 1.5s ease-in-out infinite; }

/* Glow effects */
@keyframes glow-primary {
    0%, 100% { box-shadow: 0 0 15px var(--color-primary), 0 0 30px transparent; }
    50% { box-shadow: 0 0 30px var(--color-primary), 0 0 60px var(--color-primary); }
}

@keyframes glow-accent {
    0%, 100% { box-shadow: 0 0 15px var(--color-accent), 0 0 30px transparent; }
    50% { box-shadow: 0 0 30px var(--color-accent), 0 0 60px var(--color-accent); }
}

.glow-primary { animation: glow-primary 2.5s ease-in-out infinite; }
.glow-accent { animation: glow-accent 2.5s ease-in-out infinite; }

/* Live pulse dot */
@keyframes live-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.5; }
}

.live-dot { animation: live-dot 1.5s ease-in-out infinite; }

/* Float animation */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

.animate-float { animation: float 4s ease-in-out infinite; }

/* Spin slow */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow { animation: spin-slow 20s linear infinite; }

/* Scale in */
@keyframes scale-in {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.animate-scale-in { animation: scale-in 0.5s ease-out forwards; }

/* Slide up */
@keyframes slide-up {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-slide-up { animation: slide-up 0.6s ease-out forwards; }

/* Ticker scroll */
@keyframes ticker-scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.animate-ticker {
    animation: ticker-scroll 20s linear infinite;
}

/* ============================================
   TOP ACCENT BAR
   ============================================ */
.top-accent-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
    z-index: 9999;
    background-size: 200% 100%;
    animation: accent-bar-shift 4s linear infinite;
}

@keyframes accent-bar-shift {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================
   EVENT COUNTDOWN TICKER
   ============================================ */
.event-ticker {
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 39;
}

.event-ticker a {
    color: var(--color-on-accent);
    text-decoration: none;
}

.event-ticker a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ============================================
   FORM INPUTS — adaptive contrast
   Uses var(--color-bg) as input background so inputs are always
   visually distinct from any card/section container they sit in.
   Placeholder uses solid mid-tone between text and bg.
   ============================================ */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
textarea,
select {
    background: var(--color-bg) !important;
    border: 1px solid color-mix(in srgb, var(--color-text) 25%, var(--color-bg)) !important;
    color: var(--color-text) !important;
    border-radius: 0.75rem;
}

input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
    border-color: var(--color-accent) !important;
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

::placeholder {
    color: color-mix(in srgb, var(--color-text) 45%, var(--color-bg)) !important;
    opacity: 1 !important;
}

::-webkit-input-placeholder {
    color: color-mix(in srgb, var(--color-text) 45%, var(--color-bg)) !important;
    opacity: 1 !important;
}

::-moz-placeholder {
    color: color-mix(in srgb, var(--color-text) 45%, var(--color-bg)) !important;
    opacity: 1 !important;
}

/* ============================================
   PLAYER — custom range slider
   ============================================ */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent);
    margin-top: -5px;
}

input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent);
    border: none;
}

/* ============================================
   NAVIGATION
   ============================================ */
#nav-loading {
    position: fixed;
    top: 3px;
    left: 0;
    height: 3px;
    background: var(--color-accent);
    width: 0;
    transition: width 0.3s ease;
    z-index: 9999;
}

#site-nav a.active {
    color: var(--color-accent) !important;
}

/* Adaptive nav hover — works on both light and dark backgrounds */
#site-nav .nav-link:hover {
    background: color-mix(in srgb, var(--nav-text) 12%, transparent);
    opacity: 0.85;
}

#site-nav .nav-toggle-btn:hover {
    background: color-mix(in srgb, var(--nav-text) 12%, transparent);
}

/* Mobile menu hovers (always on --color-secondary background) */
#nav-mobile-menu .mobile-nav-link:hover {
    background: color-mix(in srgb, var(--color-on-secondary) 10%, transparent);
}

/* ============================================
   SCHEDULE
   ============================================ */
@keyframes onair-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--color-accent); }
    50% { box-shadow: 0 0 0 4px transparent; }
}

.schedule-slot.on-air {
    animation: onair-pulse 2s infinite;
    border: 2px solid var(--color-accent);
}

/* ============================================
   SPONSOR CAROUSEL
   ============================================ */
@keyframes scroll-sponsors {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.sponsor-scroll {
    animation: scroll-sponsors 30s linear infinite;
}

/* ============================================
   CHAT
   ============================================ */
@keyframes chat-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ============================================
   CARD STYLES — bold hover effects
   ============================================ */
.card-bold {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, var(--color-bg));
    border-radius: var(--card-radius, 1rem);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.card-bold::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-primary), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.card-bold:hover {
    transform: translateY(var(--card-hover-lift, -6px));
    border-color: var(--color-card-hover-border, var(--color-primary));
    box-shadow: var(--card-hover-shadow, 0 20px 60px rgba(0,0,0,0.4)), 0 0 30px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.card-bold:hover::before {
    opacity: 0.06;
}

/* Card with accent stripe on left */
.card-stripe {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, var(--color-bg));
    border-radius: var(--card-radius, 1rem);
    transition: all 0.3s ease;
}

.card-stripe::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--card-stripe-width, 4px);
    background: var(--color-accent);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.card-stripe:hover::before {
    transform: scaleY(1);
}

.card-stripe:hover {
    border-color: color-mix(in srgb, var(--color-text) 12%, transparent);
    background: color-mix(in srgb, var(--color-secondary) 60%, var(--color-bg)) !important;
}

/* Feature card — large with overlay text */
.card-feature {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
}

.card-feature img {
    transition: transform 0.6s ease;
}

.card-feature:hover img {
    transform: scale(1.08);
}

.card-feature .card-feature__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
}

/* ============================================
   SECTION HERO HEADERS — bold with background imagery
   ============================================ */
.section-hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 0 4rem;
}

/* Hero text sits on gradients that blend secondary → bg. */
.section-hero h1,
.section-hero h2,
.section-hero h3,
.site-hero h1,
.site-hero h2,
.site-hero h3 {
    text-shadow: none;
}

.section-hero p,
.section-hero span,
.site-hero p,
.site-hero span {
    text-shadow: none;
}

.section-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--color-bg), transparent);
    pointer-events: none;
}

/* ============================================
   CHART NUMBERS — large dramatic position numbers
   ============================================ */
.chart-position {
    font-family: var(--font-heading);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
}

.chart-position--featured {
    font-size: clamp(4rem, 10vw, 8rem);
    -webkit-text-stroke: 2px var(--color-accent);
    color: transparent;
}

/* ============================================
   SCHEDULE DAY TABS — bold, radio style
   ============================================ */
.schedule-day-tab {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.schedule-day-tab.active {
    background: var(--color-accent) !important;
    color: var(--color-on-accent) !important;
    font-weight: 800;
}

/* ============================================
   SHOW CARD — used in schedule and home
   ============================================ */
.show-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.show-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}

.show-card__time {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    color: white;
}

.show-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.6rem;
    border-radius: 0.25rem;
    background: var(--color-accent);
    color: var(--color-on-accent);
}

/* ============================================
   NOW PLAYING DISPLAY — prominent hero-level
   ============================================ */
.now-playing-hero {
    position: relative;
    overflow: hidden;
}

.now-playing-hero__artwork {
    width: 80px;
    height: 80px;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

@media (min-width: 640px) {
    .now-playing-hero__artwork {
        width: 120px;
        height: 120px;
    }
}

/* ============================================
   SECTION DIVIDERS
   ============================================ */
.section-divider {
    position: relative;
    padding-top: 60px;
}

.section-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, var(--color-bg), transparent);
}

.divider-accent {
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary), transparent);
    border: none;
    margin: 0;
}

/* ============================================
   PAGE TRANSITIONS
   ============================================ */
.page-enter { opacity: 0; transform: translateY(8px); }
.page-enter-active { opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease; }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* Hide scrollbar for horizontal scrollers */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================
   SELECTION
   ============================================ */
::selection {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

/* ============================================
   RESPONSIVE HELPERS
   ============================================ */
@media (max-width: 640px) {
    .geo-triangle, .geo-circle, .diagonal-line, .geo-plus, .geo-dots, .corner-accent {
        display: none;
    }
    .watermark {
        font-size: clamp(3rem, 15vw, 6rem) !important;
    }
}

/* ============================================
   STYLE VARIANTS — truly differentiated layouts
   Controlled by data-* attributes on <body>
   ============================================ */

/* ── HERO VARIANTS ─────────────────────────── */

/* Centered hero: single column, centered text, no right card */
body[data-hero="centered"] .site-hero .grid {
    grid-template-columns: 1fr !important;
    text-align: center;
    max-width: 56rem;
    margin: 0 auto;
}
body[data-hero="centered"] .site-hero .lg\:text-left { text-align: center !important; }
body[data-hero="centered"] .site-hero .lg\:justify-start { justify-content: center !important; }
body[data-hero="centered"] .site-hero .lg\:mx-0 { margin-left: auto !important; margin-right: auto !important; }
body[data-hero="centered"] .site-hero #hero-right { display: none !important; }
body[data-hero="centered"] .site-hero h1 {
    font-size: clamp(3.5rem, 10vw, 9rem) !important;
    text-align: center;
}
body[data-hero="centered"] .site-hero .eq-bar { width: 6px !important; }

/* Fullbleed hero: stretches to full viewport, overlay style */
body[data-hero="fullbleed"] .site-hero { min-height: 100vh !important; display: flex; align-items: center; }
body[data-hero="fullbleed"] .site-hero .grid {
    grid-template-columns: 1fr !important;
    text-align: center;
}
body[data-hero="fullbleed"] .site-hero .absolute:first-child {
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, var(--color-bg) 100%) !important;
}
body[data-hero="fullbleed"] .site-hero #hero-right { display: none !important; }
body[data-hero="fullbleed"] .site-hero .lg\:text-left { text-align: center !important; }
body[data-hero="fullbleed"] .site-hero .lg\:justify-start { justify-content: center !important; }
body[data-hero="fullbleed"] .site-hero h1 {
    font-size: clamp(4rem, 12vw, 10rem) !important;
    text-shadow: none;
}

/* ── CARD STYLE VARIANTS ───────────────────── */

/* Minimal cards: no hover lift, subtle border, clean look */
body[data-card-style="minimal"] .card-bold { border: none; border-radius: 0.5rem; }
body[data-card-style="minimal"] .card-bold:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border-color: transparent;
}
body[data-card-style="minimal"] .card-bold::before { display: none; }
body[data-card-style="minimal"] .card-stripe::before { display: none; }
body[data-card-style="minimal"] .show-card { border-radius: 0.5rem; }
body[data-card-style="minimal"] .show-card:hover { transform: none; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }

/* Glass cards: glassmorphism with blur and transparency */
body[data-card-style="glass"] .card-bold {
    background: color-mix(in srgb, var(--color-text) 5%, transparent) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
body[data-card-style="glass"] .card-bold:hover {
    background: color-mix(in srgb, var(--color-text) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--color-text) 20%, transparent);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent);
}
body[data-card-style="glass"] .show-card {
    background: color-mix(in srgb, var(--color-text) 6%, transparent) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
body[data-card-style="glass"] .card-stripe {
    background: color-mix(in srgb, var(--color-text) 4%, transparent) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

/* ── CARD COLUMN VARIANTS ──────────────────── */
body[data-card-cols="2"] .site-card-grid { grid-template-columns: repeat(1, 1fr) !important; }
body[data-card-cols="3"] .site-card-grid { grid-template-columns: repeat(1, 1fr) !important; }
@media (min-width: 640px) {
    body[data-card-cols="2"] .site-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
    body[data-card-cols="3"] .site-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1024px) {
    body[data-card-cols="2"] .site-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
    body[data-card-cols="3"] .site-card-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── DJ LAYOUT VARIANTS ────────────────────── */

/* Cards layout: no accent block, full-width grid of DJ cards */
body[data-dj-layout="cards"] .site-dj-section {
    grid-template-columns: 1fr !important;
}
body[data-dj-layout="cards"] .site-dj-section > .lg\:col-span-2 { display: none !important; }
body[data-dj-layout="cards"] .site-dj-section > .lg\:col-span-3 {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
    body[data-dj-layout="cards"] .site-dj-section > .lg\:col-span-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    body[data-dj-layout="cards"] .site-dj-section > .lg\:col-span-3 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* List layout: horizontal list of DJs with circular avatars + name below */
body[data-dj-layout="list"] .site-dj-section {
    grid-template-columns: 1fr !important;
}
body[data-dj-layout="list"] .site-dj-section > .lg\:col-span-2 { display: none !important; }
body[data-dj-layout="list"] .site-dj-section > .lg\:col-span-3 {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}
body[data-dj-layout="list"] .site-dj-section .card-feature {
    width: 120px;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    position: relative;
}
/* Circular avatar — works for both absolute-positioned and flow images */
body[data-dj-layout="list"] .site-dj-section .card-feature > img,
body[data-dj-layout="list"] .site-dj-section .card-feature > div:first-child:not(.card-feature__overlay) {
    position: relative !important;
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    object-fit: cover;
    flex-shrink: 0;
    inset: auto !important;
}
/* Hide gradient overlay, show name below the circle instead */
body[data-dj-layout="list"] .site-dj-section .card-feature__overlay {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    background: transparent !important;
    padding: 0.5rem 0 0 0 !important;
    width: 100%;
}
body[data-dj-layout="list"] .site-dj-section .card-feature__overlay h3 {
    color: var(--color-text) !important;
    font-size: 0.8rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
body[data-dj-layout="list"] .site-dj-section .card-feature__overlay p,
body[data-dj-layout="list"] .site-dj-section .card-feature__overlay .flex {
    display: none !important;
}
/* Preview template: text in .absolute.bottom-0 wrapper */
body[data-dj-layout="list"] .site-dj-section .card-feature > .absolute.bottom-0 {
    position: relative !important;
    inset: auto !important;
    padding: 0.5rem 0 0 0 !important;
    text-align: center;
    width: 100%;
}
body[data-dj-layout="list"] .site-dj-section .card-feature > .absolute.bottom-0 h3 {
    color: var(--color-text) !important;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body[data-dj-layout="list"] .site-dj-section .card-feature > .absolute.bottom-0 p {
    color: var(--color-text) !important;
    opacity: 0.6;
    font-size: 0.7rem;
}

/* ── HEADING STYLE VARIANTS ────────────────── */
body[data-heading-style="mixed"] h1,
body[data-heading-style="mixed"] h2,
body[data-heading-style="mixed"] h3 {
    text-transform: none !important;
}
body[data-heading-style="lowercase"] h1,
body[data-heading-style="lowercase"] h2,
body[data-heading-style="lowercase"] h3 {
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    font-weight: 600 !important;
}

/* ── SECTION DIVIDER VARIANTS ──────────────── */
body[data-divider="wave"] .site-divider .site-divider-angle { display: none !important; }
body[data-divider="wave"] .site-divider .site-divider-wave { display: block !important; }
body[data-divider="none"] .site-divider { display: none !important; }

/* ── FOOTER STYLE VARIANTS ─────────────────── */

/* Compact footer: 2-column, no contact section */
body[data-footer-style="compact"] footer .grid {
    grid-template-columns: 1fr 1fr !important;
}
body[data-footer-style="compact"] footer .grid > div:nth-child(3) { display: none; }
body[data-footer-style="compact"] footer .grid > div:nth-child(4) {
    grid-column: 1 / -1;
}

/* Minimal footer: just logo, copyright, socials in a single row */
body[data-footer-style="minimal"] footer .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    text-align: center;
}
body[data-footer-style="minimal"] footer .grid > div:nth-child(2),
body[data-footer-style="minimal"] footer .grid > div:nth-child(3) { display: none; }
body[data-footer-style="minimal"] footer .grid > div:nth-child(4) {
    display: flex;
    justify-content: center;
}
body[data-footer-style="minimal"] footer .grid > div:nth-child(4) .flex-wrap {
    justify-content: center;
}
body[data-footer-style="minimal"] footer { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* ── PLAYER STYLE VARIANTS ─────────────────── */

/* Compact player: smaller height, hidden EQ bars and artwork */
body[data-player-style="compact"] #player-body .flex { height: 56px !important; }
body[data-player-style="compact"] #player-artwork-wrap { display: none !important; }
body[data-player-style="compact"] #player-body .md\:flex.items-end { display: none !important; }
body[data-player-style="compact"] #player-play {
    width: 44px !important; height: 44px !important;
}
body[data-player-style="compact"] #player-play > span { display: none; }

/* Minimal player: floating pill at bottom-right */
body[data-player-style="minimal"] #player-body {
    left: auto !important;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    border-radius: 9999px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
body[data-player-style="minimal"] #player-body > .h-1 { display: none; }
body[data-player-style="minimal"] #player-body .flex { height: 56px !important; gap: 0.5rem !important; }
body[data-player-style="minimal"] #player-body .sm\:flex-initial { display: none !important; }
body[data-player-style="minimal"] #player-body .sm\:flex.items-center.justify-end { display: none !important; }
body[data-player-style="minimal"] #player-body .md\:flex.items-end { display: none !important; }
body[data-player-style="minimal"] #player-play {
    width: 44px !important; height: 44px !important;
}
body[data-player-style="minimal"] #player-play > span { display: none; }
body[data-player-style="minimal"] #player-artwork-wrap { display: none !important; }

/* ============================================
   RTL SUPPORT (Arabic)
   ============================================ */
[dir="rtl"] {
    text-align: right;
}
[dir="rtl"] .text-left {
    text-align: right;
}
[dir="rtl"] .text-right {
    text-align: left;
}
/* Flip margin/padding utilities */
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }
[dir="rtl"] .ml-0\.5 { margin-left: 0; margin-right: 0.125rem; }
[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
/* Mobile menu: slide from left instead of right */
[dir="rtl"] #nav-mobile-menu {
    transform: translateX(-100%);
}
[dir="rtl"] #nav-mobile-menu.open,
[dir="rtl"] #nav-mobile-menu[style*="translateX(0)"] {
    transform: translateX(0) !important;
}
/* Hover translate direction for nav links */
[dir="rtl"] .hover\:translate-x-2:hover {
    transform: translateX(-0.5rem);
}
/* Flip directional icons (arrows, chevrons) */
[dir="rtl"] .rtl-flip {
    transform: scaleX(-1);
}
/* Noto Sans fallback for non-Latin scripts */
[dir="rtl"] body {
    font-family: 'Noto Sans Arabic', var(--font-body), sans-serif;
}