/* =======================================================
   style.css  |  Futuristic Bright UI with 3D Elements
   Compatible with TailwindCSS utility classes
======================================================= */

/* ---------- CSS Variables ---------- */
:root{
  --color-primary:#06b6d4;      /* cyan-500 */
  --color-secondary:#d946ef;    /* fuchsia-500 */
  --color-accent:#a855f7;       /* purple-500 */
  --color-dark:#0f172a;         /* slate-900 */
  --color-light:#f8fafc;        /* slate-50 */
  --color-card:#1e293b;         /* slate-800 */
  --color-muted:#94a3b8;        /* slate-400 */

  --shadow-3d:0 10px 25px rgba(0,0,0,.25);
  --shadow-hover:0 15px 30px rgba(0,0,0,.35);

  --gradient-bright:linear-gradient(135deg,var(--color-primary),var(--color-secondary));
}

/* ---------- Global Resets & Typography ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background-color:var(--color-dark);
  color:var(--color-light);
  font-family:'DM Sans',sans-serif;
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  color:#ffffff;
  text-shadow:1px 1px 3px rgba(0,0,0,.5);
}
section,footer,header{width:100%;position:relative}

/* ---------- Fixed Header Override ---------- */
header{backdrop-filter:blur(8px);}

/* ---------- Hero Section ---------- */
#hero{
  color:#ffffff; /* Ensures high contrast */
}
#hero .overlay{
  position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.4));
}

/* ---------- Buttons ---------- */
.btn,
button,
input[type="submit"]{
  display:inline-block;
  padding:.85rem 2.25rem;
  border-radius:9999px;
  background:var(--gradient-bright);
  color:#ffffff;
  font-weight:600;
  letter-spacing:.3px;
  box-shadow:var(--shadow-3d);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.btn:hover,
button:hover,
input[type="submit"]:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}
.btn:active,
button:active,
input[type="submit"]:active{
  transform:translateY(0);
  box-shadow:var(--shadow-3d);
}

/* ---------- Cards ---------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  background-color:var(--color-card);
  border-radius:.75rem;
  box-shadow:var(--shadow-3d);
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  text-align:center;
  transition:transform .35s ease,box-shadow .35s ease;
}
.card:hover,
.item:hover,
.testimonial:hover,
.team-member:hover,
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-hover);
}
.card-image,
.image-container{
  width:100%;
  height:12rem;           /* fixed display height */
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}

/* ---------- Read More Links ---------- */
a.read-more,
a.underline{
  position:relative;
  color:var(--color-primary);
  font-weight:600;
  transition:color .25s ease;
}
a.read-more::after,
a.underline::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:2px;
  background:var(--gradient-bright);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
a.read-more:hover,
a.underline:hover{
  color:var(--color-secondary);
}
a.read-more:hover::after,
a.underline:hover::after{
  transform:scaleX(1);
}

/* ---------- Parallax Utility ---------- */
.parallax{
  position:relative;
  perspective:1000px;
  overflow-x:hidden;
  overflow-y:visible;
}
[data-parallax]{
  transform-style:preserve-3d;
  will-change:transform;
}
[data-parallax-speed="slow"]{transform:translateZ(-1px) scale(1.1);}
[data-parallax-speed="fast"]{transform:translateZ(1px) scale(.9);}

/* ---------- Workshops & Grid Layout ---------- */
.grid-auto-fit{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
}

/* ---------- FAQ / Accordion ---------- */
details{
  border:1px solid var(--color-muted);
  border-radius:.5rem;
  background-color:var(--color-card);
  padding:1rem 1.25rem;
  transition:box-shadow .25s ease;
}
details[open]{box-shadow:var(--shadow-hover);}
details summary{
  cursor:pointer;
  font-weight:600;
  list-style:none;
}
details summary::-webkit-details-marker{display:none;}

/* ---------- Gallery Slider ---------- */
.slider{
  position:relative;
  overflow:hidden;
}
.slider-track{
  display:flex;transition:transform .7s ease;
}
.slider-slide{min-width:100%}

/* ---------- Social Text Links ---------- */
footer a{
  color:var(--color-muted);
  font-weight:500;
  transition:color .25s ease;
}
footer a:hover{color:var(--color-secondary);}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:.5rem}

/* ---------- Fixed Cookie Popup ---------- */
#cookiePopup{
  backdrop-filter:blur(4px);
}

/* ---------- Success Page ---------- */
.success-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gradient-bright);
  text-align:center;
}
.success-wrapper h1{
  color:#ffffff;
  font-size:2.5rem;
  text-shadow:1px 1px 4px rgba(0,0,0,.3);
}

/* ---------- Privacy & Terms Page Padding ---------- */
.legal-page{
  padding-top:100px;
}

/* ---------- Background Images ---------- */
.bg-cover{
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* ---------- Utility Helpers ---------- */
.text-shadow{
  text-shadow:1px 1px 3px rgba(0,0,0,.5);
}
.glassmorph{
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
}
.hover-raise{
  transition:transform .25s ease,box-shadow .25s ease;
}
.hover-raise:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
}
#burger{
  display: none;
}