/* -------------------------------------------------
   Retro-Neobrutal Theme  •  RetroConsult 2024
   Bulma complementary stylesheet
   ------------------------------------------------- */

/* ==========  CSS Variables  ========== */
:root{
  /* Core Palette  – monochrome with bold accent  */
  --clr-bg: #ffffff;
  --clr-surface: #f5f5f5;
  --clr-text: #111111;
  --clr-muted: #777777;

  --clr-primary: #000000;               /* bold black */
  --clr-primary-dark: #000000;          /* identical – for clarity */
  --clr-accent: #ffec00;                /* retro yellow accent */
  --clr-accent-dark: #c9b200;

  /* Gradients / Overlays */
  --overlay-dark: rgba(0,0,0,0.55);
  --overlay-light: rgba(255,255,255,0.15);

  /* Shadows */
  --shadow-hard: 4px 4px 0 var(--clr-primary);
  --shadow-soft: 0 8px 24px rgba(0,0,0,0.08);

  /* Radii  */
  --radius-sm: 4px;
  --radius-lg: 12px;

  /* Animation  */
  --easing: cubic-bezier(.22,1,.36,1);
  --dur-fast: .25s;
  --dur-mid: .5s;
}

/* ==========  Base  ========== */
html{
  scroll-behavior:smooth;
  background:var(--clr-bg);
  color:var(--clr-text);
  font-family:'Source Sans Pro',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto;
  line-height:1.6;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Playfair Display',serif;
  font-weight:700;
  letter-spacing:.3px;
  color:var(--clr-primary);
}

a{color:var(--clr-primary);transition:color var(--dur-fast) var(--easing);}
a:hover{color:var(--clr-accent);text-decoration:none;}

/* Section spacing */
.section{padding:4rem 1.5rem;}
.section:first-child{padding-top:6rem;} /* avoids overlap with fixed navbar */

/* Responsive containers */
.container,
.mx-auto{margin-left:auto!important;margin-right:auto!important;}
.is-two-thirds{max-width:960px;}

/* ==========  Navigation  ========== */
.navbar{
  border-bottom:2px solid var(--clr-primary);
  box-shadow:var(--shadow-hard);
}
.navbar-item:hover{background:var(--clr-accent);color:var(--clr-primary-dark)!important;}

/* ==========  Hero  ========== */
.hero{
  position:relative;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(var(--overlay-dark),var(--overlay-dark));
}
.hero .title,
.hero .subtitle,
.hero .button{position:relative;z-index:1;color:#fff;}
.hero .title{text-shadow:2px 2px 0 var(--clr-primary-dark);}
.hero .button:hover{background:#fff;color:var(--clr-primary-dark);}

/* ==========  Buttons  ========== */
.btn,
button,
input[type="submit"],
.button{
  background:var(--clr-primary);
  color:#fff;
  padding:.75rem 1.5rem;
  border:none;
  border-radius:var(--radius-sm);
  font-weight:600;
  letter-spacing:.5px;
  box-shadow:var(--shadow-hard);
  transition:transform var(--dur-fast) var(--easing),box-shadow var(--dur-fast) var(--easing),background var(--dur-fast);
}
.btn:hover,
button:hover,
input[type="submit"]:hover,
.button:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--clr-accent-dark);
  background:var(--clr-accent);
  color:var(--clr-primary-dark);
}

/* ==========  Cards & Flex Centering  ========== */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--clr-surface);
  border:2px solid var(--clr-primary);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-hard);
  transition:transform var(--dur-fast) var(--easing);
}
.card:hover,
.item:hover,
.testimonial:hover,
.team-member:hover,
.product-card:hover{
  transform:translateY(-6px);
}

.card-image,
.image-container{
  width:100%;
  height:250px;
  overflow:hidden;
  border-bottom:2px solid var(--clr-primary);
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}

/* ==========  Process Timeline  ========== */
.timeline .timeline-marker.is-icon{
  border:2px solid var(--clr-primary);
  background:#fff;
}
.timeline .tag.is-dark{background:var(--clr-primary);}

/* ==========  Gallery Grid  ========== */
#gallery .columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;}
#gallery .card{cursor:pointer;}

/* ==========  Team  ========== */
#team .card-content .title{margin-bottom:.25rem;}

/* ==========  Insights  ========== */
#insights .content p{font-size:1.125rem;}

/* ==========  Contact Form  ========== */
#contactForm .field .input,
#contactForm .field .textarea{
  border:2px solid var(--clr-primary);
  border-radius:var(--radius-sm);
}
#contactForm .input:focus,
#contactForm .textarea:focus{box-shadow:0 0 0 2px var(--clr-accent);}

/* Read-more links */
.read-more{
  display:inline-block;
  font-weight:600;
  margin-top:1rem;
  color:var(--clr-accent);
}
.read-more:hover{color:var(--clr-primary);}

/* ==========  Footer  ========== */
footer.footer{
  padding:3rem 1.5rem;
  background:var(--clr-primary);
  color:#fff;
  text-align:center;
}
footer a{color:var(--clr-accent);font-weight:600;margin:0 .25rem;}
footer a:hover{color:#fff;text-decoration:underline;}

/* Social links decoration */
.footer a::after{
  content:'↗';
  margin-left:.25rem;
  font-size:.75rem;
  vertical-align:2px;
  opacity:.6;
  transition:opacity var(--dur-fast);
}
.footer a:hover::after{opacity:1;}

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

/* ==========  Utility  ========== */
.text-center{text-align:center!important;}
.full-width{width:100%!important;}

/* ==========  Particle Animation (Canvas-free CSS)  ========== */
@keyframes float{
  0%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-20px) scale(1.05);}
  100%{transform:translateY(0) scale(1);}
}

.particles{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
}
.particles span{
  position:absolute;
  display:block;
  width:8px;height:8px;
  background:var(--clr-accent);
  border-radius:50%;
  opacity:.8;
  animation:float 6s var(--easing) infinite;
}
.particles span:nth-child(2){left:20%;animation-duration:7s;animation-delay:-2s;}
.particles span:nth-child(3){left:40%;animation-duration:5s;animation-delay:-3s;}
.particles span:nth-child(4){left:60%;animation-duration:8s;animation-delay:-4s;}
.particles span:nth-child(5){left:80%;animation-duration:6s;animation-delay:-1s;}

/* ==========  Glassmorphism helper  ========== */
.glass{
  backdrop-filter:blur(10px) saturate(1.2);
  background-color:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.3);
}

/* ==========  Parallax Helper  ========== */
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}

/* ==========  Media Queries  ========== */
@media (max-width:768px){
  .navbar-menu{background:var(--clr-bg);}
  .navbar-burger span{background:var(--clr-primary)!important;}
  .section{padding:3rem 1rem;}
  .card-image,.image-container{height:200px;}
}