/*
Theme Name: Elik Production
Theme URI: https://elikproduction.com/
Author: Elik Production
Description: A dark Base44-inspired WordPress theme for DJ Avi Elik and the Elik Production label.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: elikproduction
*/

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

:root {
  --background: hsl(240 10% 4%);
  --foreground: hsl(0 0% 96%);
  --card: hsl(240 10% 7%);
  --secondary: hsl(240 10% 12%);
  --muted: hsl(240 5% 55%);
  --border: hsl(240 10% 16%);
  --primary: hsl(270 100% 65%);
  --primary-soft: hsl(270 100% 65% / 0.3);
  --cyan: hsl(195 100% 50%);
  --cyan-soft: hsl(195 100% 50% / 0.2);
  --font-display: "Anton", Impact, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 20% 20%, hsl(270 100% 65% / 0.05), transparent 50%),
    radial-gradient(ellipse at 80% 80%, hsl(195 100% 50% / 0.04), transparent 50%),
    var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.cursor-dot {
  position: fixed; z-index: 9999; top: 0; left: 0; width: 5px; height: 5px;
  border-radius: 50%; background: var(--foreground); mix-blend-mode: difference;
  pointer-events: none; transform: translate(-50%, -50%);
}

.nav {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(24px, 4vw, 80px);
  border-bottom: 1px solid hsl(240 10% 16% / 0.5);
  background: hsl(240 10% 4% / 0.8); backdrop-filter: blur(12px);
}
.nav-brand, .footer-brand, .mobile-top span {
  font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.14em;
  line-height: 1; text-transform: uppercase;
}
.nav-brand b, .footer-brand span, .mobile-top b { color: var(--primary); font-weight: 400; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a, .text-link, .mobile-close, .footer a {
  color: var(--muted); font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.nav-links a:hover, .text-link:hover, .footer a:hover { color: var(--foreground); }
.nav-button { padding: 8px 20px; background: var(--primary); color: white !important; }
.menu-button, .mobile-close { display: none; border: 0; background: transparent; color: var(--foreground); }
.menu-button { width: 32px; height: 32px; place-items: center; }
.menu-button span { display: block; width: 22px; height: 2px; margin: 4px 0; background: var(--foreground); }
.mobile-menu { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; padding: 20px 24px; background: var(--background); }
.mobile-menu.is-open { display: flex; }
.mobile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; }
.mobile-menu > a { display: block; font-family: var(--font-display); font-size: clamp(3rem, 16vw, 5.5rem); line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; }
.mobile-book { margin-top: auto; padding: 18px; background: var(--primary); font-family: var(--font-mono) !important; font-size: 0.8rem !important; text-align: center; letter-spacing: 0.2em !important; }

.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 96px clamp(24px, 4vw, 80px) 80px; }
.grid-bg { position: absolute; inset: 0; opacity: 0.1; background-image: linear-gradient(hsl(270 100% 65% / 0.3) 1px, transparent 1px), linear-gradient(90deg, hsl(270 100% 65% / 0.3) 1px, transparent 1px); background-size: 60px 60px; }
.hero-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, transparent, var(--background)); }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); animation: breathe 7s ease-in-out infinite; }
.orb-one { top: 25%; left: 25%; width: 384px; height: 384px; background: var(--primary); opacity: 0.15; }
.orb-two { right: 25%; bottom: 25%; width: 288px; height: 288px; background: var(--cyan); opacity: 0.1; animation-delay: 2s; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.12; } 50% { transform: scale(1.25); opacity: 0.22; } }
.hero-inner { position: relative; z-index: 2; }
.kicker { margin: 0 0 16px; color: var(--primary); font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.3em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; }
h1 { margin-bottom: 0; font-size: clamp(5.4rem, 15vw, 13rem); line-height: 0.88; letter-spacing: 0.035em; }
.outline { color: transparent; -webkit-text-stroke: 2px var(--primary); }
.gradient-text { background: linear-gradient(90deg, var(--primary), var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-copy { max-width: 448px; margin: 24px 0 0; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 15px 32px; border: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; transition: all 0.25s ease; cursor: pointer; }
.button.primary { border-color: transparent; background: var(--primary); color: white; }
.button.primary:hover { background: hsl(270 100% 65% / 0.8); }
.button.ghost:hover { border-color: var(--primary); color: var(--primary); }
.scroll-cue { position: absolute; z-index: 3; bottom: 32px; left: 50%; color: var(--muted); font-size: 1.5rem; animation: bounce 2s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 32px clamp(24px, 4vw, 80px); border-block: 1px solid var(--border); background: var(--card); }
.stats strong { display: block; color: var(--primary); font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.1rem); font-weight: 400; line-height: 1; text-transform: uppercase; }
.stats span, .release-card p, .release-card > span, .service-card p, .about-copy, .facts span, .label-grid p, .contact-info span, .contact-info p, .footer p, .copyright { color: var(--muted); }
.stats span, .release-card p, .release-card > span, .facts span, .contact-info span, .footer-links span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; }
.section, .about, .all-releases, .contact { padding: clamp(80px, 10vw, 128px) clamp(24px, 4vw, 80px); }
.section-border, .about, .all-releases, .contact { border-top: 1px solid var(--border); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.section-head.stacked { display: block; }
.section-head h2, .all-releases h2, .contact-title h2 { margin: 0; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1; letter-spacing: 0.04em; }
.release-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.release-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 40px; }
.release-card { min-width: 0; padding: 20px; border: 1px solid var(--border); background: var(--card); cursor: pointer; transition: border-color 0.3s ease, transform 0.3s ease; }
.release-card:hover, .service-card:hover { border-color: hsl(270 100% 65% / 0.5); }
.release-card:hover { transform: translateY(-4px); }
.cover { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 16px; background: var(--secondary); }
.cover img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.85); }
.cover-gradient { background: linear-gradient(135deg, var(--primary-soft), var(--cyan-soft)); }
.cover-gradient.alt { background: linear-gradient(135deg, hsl(240 10% 12%), var(--primary-soft)); }
.cover-gradient.pulse { background: radial-gradient(circle at center, hsl(195 100% 50% / 0.2), transparent 45%), linear-gradient(135deg, hsl(270 100% 65% / 0.2), hsl(240 10% 12%)); }
.cover span { color: hsl(270 100% 65% / 0.5); font-family: var(--font-display); font-size: 4rem; }
.release-card h3 { overflow: hidden; margin: 0; font-size: 1.05rem; letter-spacing: 0.04em; text-overflow: ellipsis; white-space: nowrap; }
.release-card p { margin: 4px 0 0; }
.release-card > span { display: block; margin-top: 8px; color: hsl(270 100% 65% / 0.7); }
.service-grid, .about-grid, .label-grid, .contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.service-card, .label-grid article, .contact-info article { padding: clamp(24px, 4vw, 32px); border: 1px solid var(--border); }
.service-icon { display: block; margin-bottom: 20px; color: var(--primary); font-size: 2rem; }
.service-card h3, .label-grid h3 { margin: 0 0 12px; font-size: 1.45rem; letter-spacing: 0.04em; }
.service-card p, .label-grid p { margin-bottom: 0; font-size: 0.92rem; line-height: 1.75; }
.cta-band { padding: clamp(80px, 10vw, 128px) clamp(24px, 4vw, 80px); border-top: 1px solid var(--border); background: var(--card); }
.cta-band > div { max-width: 720px; }
.cta-band h2 { margin-bottom: 24px; font-size: clamp(3rem, 8vw, 6rem); line-height: 0.96; letter-spacing: 0.04em; }
.cta-band h2 span, .about-hero h2 span { color: var(--primary); }
.cta-band p { max-width: 620px; margin-bottom: 32px; color: var(--muted); line-height: 1.7; }
.about { padding-top: 0; }
.about-hero { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; padding-top: 80px; }
.about-hero h2 { margin: 0; font-size: clamp(4rem, 10vw, 8rem); line-height: 0.96; letter-spacing: 0.04em; }
.about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 96px); padding-block: 64px; border-top: 1px solid var(--border); }
.about-copy p { margin-bottom: 24px; font-size: 1.05rem; line-height: 1.8; }
.facts { display: grid; gap: 28px; }
.facts div { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.facts strong { font-weight: 400; }
.label-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.all-releases { padding-top: 64px; }
.all-releases h2 { margin: 0; }
.release-card.compact { padding: 16px; }
.cover.mini span { font-size: 3rem; }
.contact { padding-top: 64px; }
.contact-title { padding-bottom: 64px; }
.contact-grid { grid-template-columns: 2fr 1fr; gap: clamp(48px, 8vw, 80px); padding-top: 48px; border-top: 1px solid var(--border); }
.booking-form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
label { display: grid; gap: 8px; color: var(--muted); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
input, select, textarea { width: 100%; border: 1px solid var(--border); border-radius: 0; outline: none; background: var(--card); color: var(--foreground); padding: 13px 16px; font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0; text-transform: none; transition: border-color 0.2s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
textarea { resize: vertical; }
.contact-info { display: grid; align-content: start; gap: 24px; }
.contact-info div { display: grid; gap: 2px; }
.contact-info strong { overflow-wrap: anywhere; font-size: 0.92rem; font-weight: 400; }
.contact-info article { background: transparent; }
.contact-info article strong { display: block; color: var(--primary); font-family: var(--font-display); font-size: 2rem; line-height: 1; text-transform: uppercase; }
.contact-info article p { margin: 4px 0 0; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0; text-transform: none; }
.footer { display: grid; grid-template-columns: 1fr auto; gap: 48px; padding: 48px clamp(24px, 4vw, 80px); border-top: 1px solid var(--border); background: var(--card); }
.footer-brand { margin-bottom: 8px; color: var(--foreground); font-size: 1.8rem; }
.footer p { max-width: 320px; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.65; }
.footer-links { display: flex; gap: 64px; }
.footer-links div { display: grid; align-content: start; gap: 8px; }
.footer-links span { margin-bottom: 4px; color: var(--muted); }
.copyright { grid-column: 1 / -1; max-width: none !important; margin: 0; padding-top: 24px; border-top: 1px solid var(--border); }

@media (max-width: 980px) {
  .nav-links { display: none; }
  .menu-button, .mobile-close { display: grid; }
  .stats, .release-grid, .release-grid.five, .service-grid, .about-grid, .label-grid, .contact-grid, .footer { grid-template-columns: 1fr; }
  .release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head { align-items: flex-start; flex-direction: column; }
  .cursor-dot { display: none; }
}

@media (max-width: 640px) {
  .nav { padding: 18px 24px; }
  .hero { padding-top: 96px; }
  h1 { font-size: clamp(4.7rem, 25vw, 7rem); }
  .button { width: 100%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release-grid, .release-grid.five, .form-row { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 8px; }
  .footer-links { flex-direction: column; gap: 28px; }
}

.nav-links li,
.footer-links li {
  list-style: none;
}

.nav-links ul,
.footer-links ul {
  display: contents;
  margin: 0;
  padding: 0;
}

/* Elementor template support */
.elementor-page {
  background: var(--background);
}

.elementor-section.elementor-section-boxed > .elementor-container {
  width: 100%;
}

.elementor-section.hero > .elementor-container,
.elementor-section.section > .elementor-container,
.elementor-section.section-border > .elementor-container,
.elementor-section.cta-band > .elementor-container,
.elementor-section.about > .elementor-container,
.elementor-section.all-releases > .elementor-container,
.elementor-section.contact > .elementor-container {
  max-width: none;
}

.elementor-section.hero {
  min-height: 100vh;
}

.elementor-section.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image:
    linear-gradient(hsl(270 100% 65% / 0.3) 1px, transparent 1px),
    linear-gradient(90deg, hsl(270 100% 65% / 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
}

.elementor-section.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 35%, hsl(270 100% 65% / 0.18), transparent 22%),
    radial-gradient(circle at 70% 65%, hsl(195 100% 50% / 0.12), transparent 20%),
    linear-gradient(to bottom, transparent, transparent, var(--background));
  filter: blur(0);
}

.elementor-section.hero > .elementor-container {
  position: relative;
  z-index: 2;
}

.elementor-section.hero .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(5.4rem, 15vw, 13rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.elementor-widget .kicker {
  margin: 0 0 16px;
}

.elementor-section.hero .elementor-widget-text-editor {
  max-width: 448px;
}

.elementor-section.hero .elementor-widget-text-editor.hero-copy,
.elementor-section.hero .hero-copy {
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.7;
}

.elementor-button-wrapper .elementor-button,
.elementor-widget-button.button .elementor-button {
  border-radius: 0;
  background: transparent;
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.elementor-widget-button.button.primary .elementor-button {
  border: 1px solid transparent;
  background: var(--primary);
  color: white;
}

.elementor-widget-button.button.ghost .elementor-button {
  border: 1px solid var(--border);
  background: transparent;
}

.elementor-widget-button.button.ghost .elementor-button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.elementor-section.hero .elementor-widget-button.hero-button {
  display: inline-block;
  width: auto;
  margin: 40px 16px 0 0;
}

.elementor-section.stats > .elementor-container,
.elementor-section.release-grid > .elementor-container,
.elementor-section.service-grid > .elementor-container,
.elementor-section.label-grid > .elementor-container,
.elementor-section.contact-grid > .elementor-container {
  display: grid;
  gap: 24px;
  max-width: none;
}

.elementor-section.stats > .elementor-container {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.elementor-section.release-grid > .elementor-container {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.elementor-section.release-grid.five > .elementor-container {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.elementor-section.service-grid > .elementor-container {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.elementor-section.contact-grid > .elementor-container {
  grid-template-columns: 2fr 1fr;
}

.elementor-section.stats .elementor-column,
.elementor-section.release-grid .elementor-column,
.elementor-section.service-grid .elementor-column,
.elementor-section.contact-grid .elementor-column {
  width: auto !important;
}

.elementor-section.release-grid,
.elementor-section.service-grid,
.elementor-section.about-grid,
.elementor-section.contact-grid {
  padding: 0 clamp(24px, 4vw, 80px) clamp(80px, 10vw, 128px);
}

.elementor-section.release-grid.five {
  padding-top: 40px;
}

.elementor-section.about-grid {
  padding-top: 64px;
  border-top: 1px solid var(--border);
}

.elementor-section.contact-grid {
  padding-top: 48px;
  border-top: 1px solid var(--border);
}

.elementor-section.release-grid .elementor-widget-text-editor,
.elementor-section.service-grid .elementor-widget-text-editor,
.elementor-section.contact-grid .elementor-widget-text-editor {
  margin-bottom: 0;
}

.elementor-section.release-grid .release-card .elementor-widget:not(:last-child),
.elementor-section.service-grid .service-card .elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

.elementor-section.release-grid .release-card .elementor-widget-html {
  margin-bottom: 16px;
}

.elementor-section.release-grid .release-card .elementor-widget-heading {
  margin-bottom: 4px;
}

.elementor-section.release-grid .release-card .elementor-widget-text-editor:last-child {
  margin-top: 8px;
}

.elementor-section.service-grid .service-card .elementor-widget-heading {
  margin-bottom: 12px;
}

.elementor-section.cta-band .elementor-widget-wrap,
.elementor-section.about .elementor-widget-wrap,
.elementor-section.contact .elementor-widget-wrap {
  padding: 0;
}

.elementor-widget-heading .elementor-heading-title {
  color: inherit;
}

.elementor-widget-text-editor {
  color: inherit;
  font-family: var(--font-body);
}

@media (max-width: 980px) {
  .elementor-section.stats > .elementor-container,
  .elementor-section.release-grid > .elementor-container,
  .elementor-section.release-grid.five > .elementor-container,
  .elementor-section.service-grid > .elementor-container,
  .elementor-section.contact-grid > .elementor-container {
    grid-template-columns: 1fr;
  }

  .elementor-section.release-grid > .elementor-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .elementor-section.hero .elementor-heading-title {
    font-size: clamp(4.7rem, 25vw, 7rem);
  }

  .elementor-section.hero .elementor-widget-button.hero-button {
    display: block;
    margin-right: 0;
  }

  .elementor-section.stats > .elementor-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .elementor-section.release-grid > .elementor-container,
  .elementor-section.release-grid.five > .elementor-container {
    grid-template-columns: 1fr;
  }
}