/* assets/css/style.css */

/* Theme colors */
:root{
  --blue:#42A5F5;
  --green:#66BB6A;
  --orange:#FF7043;
  --topbar-h: 36px; /* height of fixed contact bar */
}

/* Base */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:#f9f9ff;
  padding-top: var(--topbar-h); /* push content below fixed topbar */
}

/* Topbar */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: linear-gradient(90deg, #4E342E, #6D4C41, #757575);
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.topbar-inner{
  line-height: 1;
  font-size: .95rem;
}
.topbar-link{
  white-space: nowrap;
}

/* Navbar + Footer */
.bg-gradient-primary{ background: linear-gradient(90deg, #5D4037, #8D6E63, #9E9E9E); }
footer.bg-gradient-primary{ background: linear-gradient(90deg, #4E342E, #757575); }

/* Brand */
.brand-logo{ height:36px; width:auto; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); }

/* Hero */
.hero-section{ position:relative; }
.hero-img{ max-height:72vh; object-fit:cover; }
.text-shadow{ text-shadow:0 2px 10px rgba(0,0,0,.65); }
@media (max-width:576px){ .hero-img{ max-height:56vh; } }

/* Carousel */
#heroCarousel .carousel-item{ transition: transform .35s ease-in-out; }
#heroCarousel .carousel-item-next,
#heroCarousel .active.carousel-item-start{ transform: translateX(100%) !important; }
#heroCarousel .carousel-item-prev,
#heroCarousel .active.carousel-item-end{ transform: translateX(-100%) !important; }

@media (prefers-reduced-motion: reduce){
  #heroCarousel .carousel-item{ transition: transform .35s ease-in-out !important; }
}

/* Product Cards */
.material-card{ border-radius:1rem; transition:transform .25s ease, box-shadow .25s ease; }
.material-card:hover{ transform:translateY(-6px); box-shadow:0 12px 26px rgba(0,0,0,.12); }
.product-img{ aspect-ratio:4 / 3; object-fit:cover; border-top-left-radius:1rem; border-top-right-radius:1rem; }

/* Features */
.feature-box{ background:#fff; border-radius:1rem; box-shadow:0 2px 6px rgba(0,0,0,.08); transition:transform .25s ease; }
.feature-box:hover{ transform:translateY(-4px); }
.icon{ font-size:1.75rem; }

/* Footer */
footer p{ margin-bottom:.3rem; font-size:.9rem; }

/* ---------- STICKY CTA (NOW LEFT SIDE) ---------- */
/*
.sticky-cta{
  position: fixed;
  top: calc(var(--topbar-h) + 12px + env(safe-area-inset-top, 0));
  left: 16px;            
  z-index: 1040;
}
.sticky-cta .cta-btn{
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  border-radius: 999px;
  padding: .7rem 1.1rem;
}
*/

/* ---------- STICKY CTA (move farther left and below logo zone) ---------- */
.sticky-cta{
  position: fixed;
  top: calc(var(--topbar-h) + 75px + env(safe-area-inset-top, 0)); /* push below navbar/logo */
  left: 24px;                 /* keep visible but clear of logo */
  z-index: 1040;
}
.sticky-cta .cta-btn{
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  border-radius: 999px;
  padding: .7rem 1.1rem;
}


/* Modal priority */
.modal{ z-index: 1055; }
.modal-backdrop{ z-index: 1050; }

/* Mobile adjustments */
@media (max-width: 576px){
  :root{ --topbar-h: 40px; }
  body{ padding-top: calc(var(--topbar-h) + 70px); }
  .sticky-cta{
    left:0;
    right:0;
    display:flex;
    justify-content:center;
    top: calc(var(--topbar-h) + 8px + env(safe-area-inset-top, 0));
  }
  .sticky-cta .cta-btn{
    width:calc(100% - 24px);
    max-width:720px;
    border-radius:14px;
  }
}