/* File: webline_shop/public/style.css */
/* ------------------------------------------------- */
/* Custom overrides to complement Tailwind navbar   */
/* ------------------------------------------------- */

/* 1) Hero Section with masked background */
.hero {
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    url('../uploads/back.jpg') center/cover no-repeat;
  /* Subtract 20px from the 70vh height */
  min-height: calc(60vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1.1) Headline slightly smaller */
.hero h1 {
  font-size: 2.2rem; /* was 3rem */
}

/* 1.2) Paragraph slightly smaller */
.hero p {
  font-size: 1.1rem; /* was 1.25rem */
}


/* 2) Card styling (for featured & new arrivals) */
.card {
  border-radius: 0.75rem; /* more rounded */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.card img {
  object-fit: cover;
  object-position: center;
}

/* 3) Product image hover effect */
.product-card img {
  transition: transform 0.3s ease;
}
.product-card img:hover {
  transform: scale(1.05);
}

/* 4) Buttons: custom blue/green styles */
.btn-primary, .btn-blue-600 {
  @apply bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 text-white rounded-md;
}
.btn-success {
  @apply bg-green-600 hover:bg-green-700 focus:ring-2 focus:ring-green-500 text-white rounded-md;
}

/* 5) Footer styling */
footer {
  background-color: #1F2937; /* Tailwind gray-800 */
  color: #D1D5DB;            /* Tailwind gray-300 */
}
footer a:hover {
  color: #FFF;
  text-decoration: none;
}

/* 6) Container utility (if not using Tailwind container) */
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* 7) Section headings */
section h2 {
  font-size: 2rem;
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* 8) Custom scroll bar (Webkit) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F3F4F6; /* Tailwind gray-100 */
}
::-webkit-scrollbar-thumb {
  background-color: #9CA3AF; /* Tailwind gray-400 */
  border-radius: 4px;
}
/* Outline‐blue button for Tailwind */
.btn-outline-blue {
  @apply border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white focus:ring-2 focus:ring-blue-500 rounded-md transition-colors duration-200;
}

/* ===========================================
   1) TICKER STYLES (updated)
   =========================================== */

/* 1.1) Ticker Container */
.ticker-container {
  position: relative;           /* pin under navbar */
  top: 0.1rem;                  /* adjust if your navbar height differs */
  width: 100%;
  background-color: #FFFFFF;  /* white background */
  overflow: hidden;
  height: 4rem;               /* total ticker height */
  z-index: 50;
  display: flex;
  align-items: center;
  /* subtle box‐shadow to separate from content below */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* 1.2) Ticker Content (sliding track) */
.ticker-content {
  display: inline-flex;
  animation: ticker-slide 20s linear infinite;
}

/* 1.3) Individual Ticker Item */
.ticker-item {
  display: flex;
  align-items: center;
  margin-right: 1.5rem;                /* space between items */
  padding: 0 0.75rem;                  /* left/right padding */
  border-right: 1px solid rgba(0,0,0,0.08); /* subtle divider */
  background-color: rgba(255,255,255,0.0);  /* initial transparent */
  animation: item-bg-shift 10s ease-in-out infinite;
}
.ticker-item:last-child {
  border-right: none; /* no divider on last item */
}

/* 1.4) Product Image */
.ticker-item img {
  height: 2.5rem;      /* fill most of ticker height (4rem) */
  width: 2.5rem;       /* square aspect ratio */
  object-fit: cover;
  border-radius: 0.25rem;
  flex-shrink: 0;      /* don’t shrink below this size */
  margin-right: 0.75rem;
}

/* 1.5) Product Name */
.ticker-item span {
  color: #1F2937;           /* dark gray for readability on white */
  font-size: 0.875rem;      /* 14px */
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* “…” if too long */
  max-width: 8rem;          /* adjust as needed (e.g. ~128px) */
}

/* 1.6) Keyframes: slide the ticker track */
@keyframes ticker-slide {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* 1.7) Keyframes: subtle background color shift on each item */
@keyframes item-bg-shift {
  0%   { background-color: rgba(255, 255, 255, 0.0); }
  50%  { background-color: rgba(245, 246, 252, 0.6); } /* Tailwind gray-100 @ 60% opacity */
  100% { background-color: rgba(255, 255, 255, 0.0); }
}

/* 1.8) Responsive Shrink on Mobile */
@media (max-width: 640px) {
  .ticker-container {
    height: 3.5rem;
  }
  .ticker-item img {
    height: 2rem;
    width: 2rem;
    margin-right: 0.5rem;
  }
  .ticker-item span {
    font-size: 0.75rem;
    max-width: 6rem; /* shorter available space */
  }
}