/* ==============================================================
   1️⃣  BASIC RESET & TYPOGRAPHY
   ============================================================== */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  color: var(--clr-text);          /* <-- now uses a variable */
  background-color: var(--clr-bg);/* <-- now uses a variable */
}

/* ==============================================================
   2️⃣  COLOR VARIABLES (dark defaults)
   ============================================================== */
:root {
  /* Primary “WEB STUDIOy” hues */
  --clr-primary: #8a2be2;          /* deep purple */
  --clr-primary-dark: #5c0099;
  --clr-accent: #ffeb3b;          /* bright accent for CTA */

  /* Dark theme palette */
  --clr-bg: #0c0c0c;               /* page background */
  --clr-bg-dark: #050505;          /* sections, cards, inputs … */
  --clr-text: #e0e0e0;             /* main text */

  /* Hero overlay & hero text – they flip in light mode */
  --hero-overlay: rgba(0,0,0,.65);
  --hero-text: #fff;
}

/* ==============================================================
   3️⃣  LIGHT‑MODE OVERRIDES
   ============================================================== */
html.light-mode {
  --clr-bg: #ffffff;
  --clr-bg-dark: #f5f5f5;          /* light‑gray for cards, footers, inputs */
  --clr-text: #222222;
  --hero-overlay: rgba(255,255,255,.65);
  --hero-text: #222222;
}

/* ==============================================================
   4️⃣  REUSABLE COMPONENTS
   ============================================================== */
.container { width: min(92%, 1200px); margin-inline: auto; }
.section   { padding: 4rem 0; }
.section-title {
  font-size: clamp(2rem,5vw,2.8rem);
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}
.section-title::after {
  content:"";
  width:4rem;
  height:4px;
  background-color: var(--clr-primary);
  display:block;
  margin: .5rem auto 0;
}
.btn{
  display:inline-block;
  padding:.8rem 1.6rem;
  font-weight:600;
  border-radius:.4rem;
  background-color: var(--clr-primary);
  color:#fff;
  transition:background .3s ease;
}
.btn:hover,.btn:focus{ background-color: var(--clr-primary-dark); }

/* ==============================================================
   5️⃣  THEME‑TOGGLE BUTTON
   ============================================================== */
#theme-toggle{
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: var(--clr-primary);
  color:#fff;
  border:none;
  border-radius:.5rem;
  padding:.5rem .7rem;
  font-size:1rem;
  cursor:pointer;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .3s ease;
}
#theme-toggle:hover{ background: var(--clr-primary-dark); }

/* ==============================================================
   6️⃣  HERO
   ============================================================== */
.hero{
  position:relative;
  min-height:100vh;
  background:url('assets/hero.jpg') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--hero-overlay);
}
.hero-content{
  position:relative;
  z-index:1;
}
.hero h1,
.hero p,
.hero .btn{
  color: var(--hero-text);
}
.hero h1{
  font-size: clamp(2.5rem,8vw,4rem);
  margin-bottom:1rem;
}
.hero p{
  font-size: clamp(1rem,2.5vw,1.2rem);
  margin-bottom:2rem;
}

/* ==============================================================
   7️⃣  ABOUT, SERVICES, TESTIMONIALS, CONTACT (all share same bg)
   ============================================================== */
.about,
.service-card,
.testimonial,
.contact {
  background-color: var(--clr-bg-dark);
}
.about { color: var(--clr-text); }  /* text inside the about section */

/* ----------------------------------------------------
   Benefit cards – previously hard‑coded #212121,
   now use the same var so they change with the theme.
   ---------------------------------------------------- */
.benefit-card{
  background-color: var(--clr-bg-dark);
  padding:1.5rem;
  border-radius:.5rem;
  text-align:center;
}
.benefit-card i{
  font-size:2rem;
  margin-bottom:.5rem;
  color:var(--clr-primary);
}

/* ----------------------------------------------------
   SERVICE CARD – already uses var(--clr-bg-dark)
   ---------------------------------------------------- */

/* ----------------------------------------------------
   PORTFOLIO – no background colour changes needed
   ---------------------------------------------------- */
.portfolio .grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:1.5rem;
}
.portfolio-item{
  overflow:hidden;
  border-radius:.5rem;
  position:relative;
}
.portfolio-item img{
  transition:transform .5s ease;
}
.portfolio-item:hover img{
  transform:scale(1.1);
}
.portfolio-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.7), transparent);
  opacity:0;
  transition:opacity .3s ease;
}
.portfolio-item:hover::after{ opacity:1; }

/* ----------------------------------------------------
   TESTIMONIALS – already use var(--clr-bg-dark)
   ---------------------------------------------------- */
.testimonials .grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:2rem;
}
.testimonial{
  background-color: var(--clr-bg-dark);
  border-radius:.5rem;
  padding:2rem;
  text-align:center;
  position:relative;
}
.testimonial img{
  width:80px;
  height:80px;
  border-radius:50%;
  margin-bottom:1rem;
  object-fit:cover;
  border:3px solid var(--clr-primary);
}
.testimonial p{
  font-style:italic;
  margin-bottom:1rem;
}
.testimonial h4{
  font-size:1rem;
  color:var(--clr-primary);
}

/* ----------------------------------------------------
   CONTACT – form elements now use the theme variable
   ---------------------------------------------------- */
.contact{
  background-color: var(--clr-bg-dark);
}
.contact form{
  max-width:600px;
  margin-inline:auto;
  display:grid;
  gap:1rem;
}
.contact input,
.contact textarea{
  width:100%;
  padding:.8rem;
  border:none;
  border-radius:.3rem;
  background-color: var(--clr-bg-dark);
  color:#fff;                /* the text inside inputs stays white for contrast */
}
.contact button{
  justify-self:start;
}

/* ----------------------------------------------------
   FOOTER – now follows the theme (instead of hard‑coded #000)
   ---------------------------------------------------- */
footer{
  background: var(--clr-bg-dark);
  padding:2rem 0;
  text-align:center;
  font-size:.9rem;
}
footer .social a{
  margin:0 .7rem;
  color:var(--clr-primary);
  font-size:1.2rem;
  transition:color .3s;
}
footer .social a:hover{ color:var(--clr-primary-dark); }

/* ----------------------------------------------------
   SCROLL‑TO‑TOP button (unchanged – uses primary colour)
   ---------------------------------------------------- */
#topBtn{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  background: var(--clr-primary);
  color:#fff;
  border:none;
  border-radius:50%;
  width:48px;
  height:48px;
  display:none;               /* shown by JS when needed */
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:100;
}
#topBtn i{ font-size:1.5rem; }

/* ----------------------------------------------------
   RESPONSIVE HELPERS
   ---------------------------------------------------- */
@media (max-width:768px){
  .about .row{ flex-direction:column; }
  .hero h1{ font-size: clamp(2rem,9vw,3.2rem); }
}