/* ===========================================================
   style.css  |  Modern + Neo-Brutalism Theme
   Tailwind CSS utilities are already in use; this file adds
   custom variables, global utilities and component patterns.
   =========================================================== */

/* ---------- Root Theme Variables ---------- */
:root{
  /* Split-Complementary Palette */
  --primary           : #10b981;  /* Teal / Main */
  --primary-dark      : #0e8f6e;
  --secondary         : #ff6b6b;  /* Coral / Split-Complement */
  --secondary-dark    : #cc5555;
  --accent            : #ffd166;  /* Warm Accent */
  --light             : #ffffff;
  --dark              : #111111;
  --muted             : #f7f7f7;
  --gradient-primary  : linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
  --gradient-overlay  : linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65));
  --transition-fast   : 200ms cubic-bezier(.4,0,.2,1);
  --transition-medium : 400ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Global Resets & Typography ---------- */
html{scroll-behavior:smooth;}
body{
  font-family:"Work Sans",sans-serif;
  color:var(--dark);
  background:var(--muted);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:"Poppins",sans-serif;
  font-weight:700;
  line-height:1.25;
  color:var(--dark);
  text-shadow:1px 1px 3px rgba(0,0,0,.1);
}
section{padding:4rem 0;}
img{max-width:100%;display:block}

/* ---------- Utility Classes ---------- */
.container{max-width:1280px;margin-inline:auto;padding-inline:1rem;}
.text-shadow{ text-shadow:1px 1px 3px rgba(0,0,0,.5);}
.bg-cover{background-size:cover;background-repeat:no-repeat;background-position:center;}
.read-more{
  color:var(--secondary);
  font-weight:600;
  position:relative;
}
.read-more::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:100%;height:2px;
  background:var(--secondary);
  transition:width var(--transition-fast);
}
.read-more:hover::after{width:0}

/* ---------- Buttons ---------- */
.btn,
button,
input[type="submit"]{
  display:inline-block;
  background:var(--primary);
  color:var(--light);
  padding:.75rem 1.75rem;
  border:none;
  border-radius:.5rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:3px 3px 0 var(--dark);
  transition:transform var(--transition-fast),box-shadow var(--transition-fast);
}
.btn--outline{background:transparent;border:2px solid var(--primary);color:var(--primary);}
.btn:hover,
button:hover,
input[type="submit"]:hover{
  transform:translate(-3px,-3px);
  box-shadow:6px 6px 0 var(--dark);
}
.btn:active,
button:active,
input[type="submit"]:active{
  transform:translate(0,0);
  box-shadow:2px 2px 0 var(--dark);
}

/* ---------- Header & Navigation ---------- */
header{
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.9);
  border-bottom:2px solid var(--dark);
}
#burger span{transition:all var(--transition-fast);}
#burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#burger.open span:nth-child(2){opacity:0;}
#burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero Section ---------- */
#hero{
  color:var(--light);
}
#hero::before{                /* Dark overlay if needed */
  content:"";
  position:absolute;
  inset:0;
  background:var(--gradient-overlay);
  z-index:1;
}
#hero .relative{z-index:2;}
#hero h1{text-shadow:2px 2px 4px rgba(0,0,0,.6);}

/* ---------- Neo-Brutal Cards ---------- */
.card,
.testimonial,
.item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--light);
  border:2px solid var(--dark);
  border-radius:.75rem;
  box-shadow:4px 4px 0 var(--dark);
  transition:transform var(--transition-medium);
}
.card:hover,
.testimonial:hover,
.item:hover{
  transform:translateY(-6px);
}

/* Image container rules */
.card-image,
.image-container{
  width:100%;
  height:250px;
  overflow:hidden;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}

/* ---------- Accordion ---------- */
.accordion{
  border:2px solid var(--dark);
  border-radius:.5rem;
  background:var(--secondary);
  color:var(--light);
  box-shadow:3px 3px 0 var(--dark);
  transition:background var(--transition-fast);
}
.accordion:hover{background:var(--secondary-dark);}
.panel{border:2px solid var(--dark);border-top:none;}

/* ---------- Carousel Controls ---------- */
.carousel-prev,
.carousel-next{
  background:var(--secondary);
  box-shadow:3px 3px 0 var(--dark);
}
.carousel-prev:hover,
.carousel-next:hover{background:var(--secondary-dark);}

/* ---------- Social Links (Footer) ---------- */
.footer-links a,
.social-link{
  color:var(--light);
  position:relative;
  transition:color var(--transition-fast);
}
.footer-links a:hover,
.social-link:hover{color:var(--accent);}
.social-link::before{          /* simple icon style */
  content:"◆";
  margin-right:.25rem;
  color:var(--accent);
}

/* ---------- Footer ---------- */
footer{
  background:var(--dark);
  color:var(--light);
  border-top:4px solid var(--primary);
}
footer h3{color:var(--accent);}
footer a{color:var(--light);}
footer a:hover{text-decoration:underline;}

/* ---------- Success Page ---------- */
.page--success{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--gradient-primary);
  color:var(--light);
}

/* ---------- Static Pages (Privacy / Terms) ---------- */
.page--static{padding-top:100px;}

/* ---------- Morphing Blob Animation ---------- */
@keyframes morph{
  0%  {border-radius:42% 58% 62% 38% / 40% 45% 55% 60%;}
  50% {border-radius:58% 42% 38% 62% / 60% 55% 45% 40%;}
  100%{border-radius:42% 58% 62% 38% / 40% 45% 55% 60%;}
}
.blob{
  position:absolute;
  width:300px;
  height:300px;
  background:var(--secondary);
  opacity:.15;
  animation:morph 20s infinite linear;
  z-index:0;
}

/* ---------- Parallax Placeholder Classes ---------- */
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-position:center;
}

/* ---------- Forms ---------- */
input,textarea{
  background:var(--light);
  border:2px solid var(--dark);
  border-radius:.5rem;
  padding:.75rem 1rem;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
input:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(16,185,129,.25);
  outline:none;
}

/* ---------- Cookie Popup ---------- */
#cookiePopup{
  font-size:.875rem;
}
#acceptCookie{
  border:2px solid var(--light);
  box-shadow:3px 3px 0 var(--dark);
}
#acceptCookie:hover{background:var(--primary-dark);}

/* ---------- Media Queries ---------- */
@media (max-width:768px){
  section{padding:3rem 0;}
  .card-image,.image-container{height:200px;}
}