/* ===================================================================
  style.css – Custom brutalist pastel theme
  Tailwind CSS is already included globally via CDN in <head>
  These additional styles extend & complement Tailwind
=================================================================== */

/* ---------- Root Theme & Typography ----------------------------- */
:root{
  --font-heading:'Manrope',sans-serif;
  --font-body:'Rubik',sans-serif;

  /* Pastel palette */
  --clr-primary:#FFB3B3;      /* soft coral pink */
  --clr-primary-dark:#E38A8A; /* darker shade */
  --clr-accent:#B3E5FF;       /* baby blue */
  --clr-accent-dark:#7ECBE8;  /* darker accent */
  --clr-bg:#F4F3EF;           /* global background */
  --clr-surface:#FAF9F7;      /* card surface */
  --clr-dark:#222222;         /* main dark text */
  --clr-light:#FFFFFF;        /* pure white */

  /* Gradients */
  --grad-dark:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6));
  --grad-light:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6));
}

/* Apply fonts */
body{font-family:var(--font-body);}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);}

/* Ensure hero text readability */
#hero h1, #hero p, #hero a{color:var(--clr-light);}

/* ---------- Global Utilities ------------------------------------ */
.parallax-bg{
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  position:relative;
}
.overlay-gradient::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--grad-dark);
  z-index:0;
}
.overlay-gradient>*{position:relative;z-index:1;}

.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--clr-surface);
  border:3px solid var(--clr-dark);
  padding:1.5rem;
  transition:transform .3s ease;
}
.card:hover,
.item:hover,
.testimonial:hover,
.team-member:hover,
.product-card:hover{transform:translateY(-4px);}

/* Image containers inside cards */
.card-image,
.image-container{
  width:100%;
  height:14rem;               /* fixed height for consistency */
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}

/* ---------- Buttons & Links ------------------------------------- */
.btn,
button,
input[type='submit']{
  background:var(--clr-accent);
  color:var(--clr-dark);
  border:2px solid var(--clr-dark);
  padding:.75rem 1.5rem;
  font-weight:700;
  transition:all .25s ease-out;
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  background:var(--clr-accent-dark);
  transform:translateY(-2px);
}
.btn:active,
button:active,
input[type='submit']:active{
  transform:translateY(0);
}

a{
  color:var(--clr-primary-dark);
  text-decoration:none;
  transition:color .2s;
}
a:hover{color:var(--clr-primary);}
.read-more{
  font-weight:700;
  border-bottom:2px solid var(--clr-primary);
}
.read-more:hover{
  color:var(--clr-dark);
  border-color:var(--clr-dark);
}

/* ---------- Navigation ------------------------------------------ */
header{
  border-bottom:3px solid var(--clr-dark);
}
#mobileMenu a{border-top:1px solid var(--clr-dark);}

/* ---------- Sections -------------------------------------------- */
section{
  padding-top:5rem;
  padding-bottom:5rem;
}
@media(min-width:768px){
  section{padding-top:6rem;padding-bottom:6rem;}
}

/* About, Media, Case Studies backgrounds handled inline */

/* ---------- Footer ---------------------------------------------- */
footer{
  border-top:6px double var(--clr-primary-dark);
  font-size:.95rem;
}
footer h4{font-weight:800;color:var(--clr-light);}
footer a{
  color:var(--clr-light);
  text-decoration:underline;
}
footer a:hover{color:var(--clr-primary);}

/* Social links appearance */
footer ul li a{
  display:inline-block;
  padding:.15rem 0;
  transition:transform .2s ease;
}
footer ul li a:hover{transform:translateX(3px);}

/* ---------- Modals ---------------------------------------------- */
.modal{
  animation:fadeIn .3s ease forwards;
}
@keyframes fadeIn{
  from{opacity:0;}to{opacity:1;}
}
.modal-content{
  max-height:80vh;
  overflow-y:auto;
}

/* ---------- Parallax Animations (GSAP triggers in JS) ------------ */
[data-parallax]{
  perspective:1000px;
}
[data-parallax] .inner{
  transform-style:preserve-3d;
  will-change:transform;
}

/* ---------- Success Page ---------------------------------------- */
.page-success{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--clr-bg);
}

/* ---------- Privacy & Terms Pages ------------------------------- */
.page-legal{
  padding-top:100px; /* prevents overlap with fixed header */
}

/* ---------- Cookie Popup (overrides inline bg for consistency) --- */
#cookiePopup{
  font-family:var(--font-body);
  background:rgba(0,0,0,.85);
}
#cookiePopup button{
  background:var(--clr-primary);
}
#cookiePopup button:hover{
  background:var(--clr-primary-dark);
}

/* ---------- Animations & Transitions ----------------------------- */
.fade-up{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s ease, transform .6s ease;
}
.fade-up.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- Helper Classes -------------------------------------- */
.shadow-brutal{box-shadow:6px 6px 0 0 var(--clr-dark);}
.border-brutal{border:3px solid var(--clr-dark);}
.bg-pastel-primary{background:var(--clr-primary);}
.bg-pastel-accent{background:var(--clr-accent);}
.text-dark{color:var(--clr-dark);}
.text-light{color:var(--clr-light);}

header nav{
  flex-wrap: wrap;
}

header{
  background: rgba(251, 232, 231, 1) !important;
  z-index: 100;
}