/* =====================================================
   style.css  |  ARG BizConsult
   Brutalism + Asymmetric Balance + Split-Complementary
   Tailwind CSS utility-first baseline – custom enhancers
   ===================================================== */

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Lato',sans-serif;color:var(--text-dark);background:var(--light);line-height:1.6}
h1,h2,h3,h4,h5,h6{font-family:'Roboto',sans-serif;color:var(--text-dark);font-weight:700;line-height:1.2}

/* ---------- Theme Variables ---------- */
:root{
  --primary:#1D3557;
  --primary-dark:#16294A;
  --secondary:#E63946;
  --secondary-dark:#B72833;
  --accent:#A8DADC;
  --accent-dark:#82c0c7;
  --light:#F1FAEE;
  --neutral:#ffffff;
  --text-dark:#222222;
  --text-light:#ffffff;
  --shadow:0 6px 18px rgba(0,0,0,0.15);
}

/* ---------- Utility ---------- */
.container-full{width:100%;max-width:90rem;margin-inline:auto;padding-inline:1rem}
.text-shadow-dark{text-shadow:1px 1px 3px rgba(0,0,0,.5)}
.parallax{background-attachment:fixed;background-size:cover;background-repeat:no-repeat}
.glass{
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.25);
}
.read-more{
  color:var(--secondary);
  font-weight:700;
  position:relative;
}
.read-more::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:2px;
  background:var(--secondary);
  transition:transform .3s ease;
  transform-origin:left;
  transform:scaleX(0);
}
.read-more:hover::after{transform:scaleX(1)}
/* ---------- Buttons ---------- */
.btn,
button,
input[type='button'],
input[type='submit']{
  display:inline-block;
  padding:.9rem 2.2rem;
  font-weight:700;
  font-family:'Roboto',sans-serif;
  color:var(--text-light);
  background:var(--secondary);
  border:none;
  border-radius:.25rem;
  cursor:pointer;
  transition:all .25s ease;
  box-shadow:var(--shadow);
}
.btn:hover,
button:hover,
input[type='button']:hover,
input[type='submit']:hover{
  background:var(--secondary-dark);
  transform:translateY(-2px);
}
.btn:active{transform:translateY(0)}
/* ---------- Navigation ---------- */
header{
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
header a{transition:color .2s}
header a:hover{color:var(--accent)}
/* ---------- Hero ---------- */
#hero{
  position:relative;
  color:var(--text-light);
}
#hero h1,
#hero p{color:var(--text-light)}
#hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.6),rgba(0,0,0,.4));
  z-index:0;
}
#hero > *{position:relative;z-index:1}

/* ---------- Cards & Image Containers ---------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--neutral);
  border-radius:.5rem;
  box-shadow:var(--shadow);
}
.card-image,
.image-container{width:100%;height:14rem;overflow:hidden;position:relative}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  margin:0 auto;
}
.card-content{padding:1.5rem}

/* ---------- Workshops Carousel ---------- */
.carousel{scroll-behavior:smooth;will-change:transform}
#prevWorkshop,#nextWorkshop{
  font-size:2rem;line-height:1;padding:.2rem .9rem;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
#prevWorkshop:hover,#nextWorkshop:hover{background:var(--accent-dark)}

/* ---------- Events Table ---------- */
table{border-collapse:collapse;width:100%}
th,td{padding:1rem;text-align:left}
tbody tr:nth-child(even){background:var(--light)}
tbody tr:hover{background:var(--accent);color:var(--text-light)}

/* ---------- Morphed Blob Animation ---------- */
@keyframes morph{
  0%{border-radius:42% 58% 67% 33%/49% 58% 42% 51%}
  50%{border-radius:58% 42% 33% 67%/61% 31% 69% 39%}
  100%{border-radius:42% 58% 67% 33%/49% 58% 42% 51%}
}
.morph{
  animation:morph 10s ease-in-out infinite;
}

/* ---------- Parallax Helper ---------- */
.parallax::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.6) 100%);
}

/* ---------- Footer ---------- */
footer{font-size:.95rem}
footer a{color:var(--accent);transition:color .2s}
footer a:hover{color:var(--secondary)}
footer ul{list-style:none}
footer ul li{margin-bottom:.3rem}

/* ---------- Social Text Links ---------- */
footer ul li a::before{
  content:'•';
  margin-right:.4rem;
  color:var(--secondary);
}

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

/* ---------- Legal Pages Padding ---------- */
.legal-page{padding-top:100px}

/* ---------- Cookie Popup Override for Brutalism ---------- */
#cookiePopup{
  font-size:.9rem;
  letter-spacing:.4px;
}
#cookiePopup button:hover{background:var(--secondary-dark)}

/* ---------- Adaptive Spacing ---------- */
section{padding-block:5rem}
@media(max-width:768px){
  section{padding-block:4rem}
  .card-image,.image-container{height:11rem}
}

/* ---------- Hover Elevation ---------- */
.elevate:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,.2)}

/* ---------- Glassmorphism for Hero CTA ---------- */
.hero-cta{
  position:relative;
  display:inline-block;
}
.hero-cta::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  background:linear-gradient(45deg,var(--secondary),var(--accent));
  z-index:-2;
  animation:morph 8s infinite linear;
}
.hero-cta::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--primary);
  z-index:-1;
}

/* ---------- Link Underline Animation ---------- */
a.link-underline{position:relative;display:inline-block}
a.link-underline::after{
  content:'';
  position:absolute;
  width:0;height:2px;
  left:0;bottom:-3px;
  background:currentColor;
  transition:width .3s;
}
a.link-underline:hover::after{width:100%}