@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Luckiest+Guy&display=swap');

:root {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

body {
  margin: 0;
  padding: 0;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.dark body {
  background-color: #0b1220;
  color: #e5e7eb;
}

.dark [class*="text-gray-900"],
.dark [class*="text-gray-800"] {
  color: #e5e7eb !important;
}

.dark [class*="text-gray-700"] {
  color: #cbd5e1 !important;
}

.dark [class*="bg-gray-50"] {
  background-color: #0b1220 !important;
}

.dark [class*="bg-white"]:not(a[href*="produits"]):not(a[href*="products"]) {
  background-color: #111827 !important;
  color: #e5e7eb !important;
}

.dark [class*="border-gray"],
.dark [class*="border-white"] {
  border-color: #334155 !important;
}

/* Footer fallback styles to ensure consistent layout */
footer[class*="bg-[#e0f2fe]"] {
  background: #e0f2fe;
  border-top: 1px solid #e5e7eb;
  margin-top: 4rem;
}

footer[class*="bg-[#e0f2fe]"] .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Remove legacy spacer column */
footer[class*="bg-[#e0f2fe]"] .container > .hidden.md\:block {
  display: none !important;
}

footer[class*="bg-[#e0f2fe]"] .container .flex {
  flex-wrap: wrap;
}

footer[class*="bg-[#e0f2fe]"] .container .flex.items-center.md\:items-start {
  align-items: flex-start;
}

/* Right block inline (nav + Instagram) */
footer[class*="bg-[#e0f2fe]"] .container > .flex.flex-col.text-sm.font-medium {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}

footer[class*="bg-[#e0f2fe]"] nav[aria-label="Footer navigation"] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
}

.theme-panel {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

.dark .theme-panel {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Overlay header so hero shows through */
header.theme-panel {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
}

/* Stretch header content edge-to-edge so the logo anchors fully left */
header.theme-panel > .container {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 1rem;
  padding-right: 5rem;
}

main {
  padding-top: 0;
}

.theme-toggle {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 60;
}

.brand-mark {
  font-family: 'Bungee', 'Luckiest Guy', 'Impact', 'Arial Black', sans-serif;
  letter-spacing: 0.015em;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
}

.brand-mark .brand-amp {
  font-size: 0.85em;
  padding: 0 0.05em;
}

.brand-mark .brand-kingo,
.brand-mark .brand-himaya {
  font-weight: 800;
}

.dark .products-page {
  color: #ffffff;
}
.dark .products-page [class*="text-gray"] {
  color: #ffffff !important;
}
.dark .products-page h1,
.dark .products-page h2,
.dark .products-page h3,
.dark .products-page p,
.dark .products-page li,
.dark .products-page a {
  color: #ffffff !important;
}

.dark .home-page .bg-white,
.dark .home-page [class*="bg-[#"],
.dark .home-page [class*="bg-gradient-to-"] {
  color: #000000 !important;
}
.dark .home-page .bg-white h1,
.dark .home-page .bg-white h2,
.dark .home-page .bg-white h3,
.dark .home-page [class*="bg-[#"] h1,
.dark .home-page [class*="bg-[#"] h2,
.dark .home-page [class*="bg-[#"] h3,
.dark .home-page [class*="bg-gradient-to-"] h1,
.dark .home-page [class*="bg-gradient-to-"] h2,
.dark .home-page [class*="bg-gradient-to-"] h3,
.dark .home-page [class*="bg-[#"] p,
.dark .home-page [class*="bg-gradient-to-"] p,
.dark .home-page [class*="bg-[#"] li,
.dark .home-page [class*="bg-gradient-to-"] li {
  color: #000000 !important;
}

/* Footer text stays dark in dark mode */
.dark footer,
.dark footer p,
.dark footer a,
.dark footer span,
.dark footer li,
.dark footer nav a {
  color: #000000 !important;
}
.dark footer svg {
  color: #000000 !important;
  fill: currentColor !important;
}

/* Home hero slider: force light text, white CTA in dark mode */
.dark .home-page .product-slide,
.dark .home-page .product-slide h2,
.dark .home-page .product-slide p,
.dark .home-page .product-slide .text-sm {
  color: #ffffff !important;
}
.dark .home-page .product-slide a {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: transparent !important;
}
.dark .home-page .product-slide a:hover {
  background-color: #f5f5f5 !important;
}

/* Hide legacy hero slides if still present in cached markup */
.hero-slide {
  display: none !important;
}

/* Product section styling to mirror homepage hero */
.product-section {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 72px);
}

.product-section-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.45), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.35), transparent 40%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  opacity: 0.9;
  pointer-events: none;
}

.product-section-inner {
  position: relative;
  z-index: 1;
}

.product-image-frame {
  position: relative;
  border-radius: 1rem;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.product-image-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  filter: none;
  opacity: 0;
}

.product-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.28));
}

/* Homepage hero slider alignment like product sections */
.product-slide .hero-copy {
  order: 2;
}

.product-slide .hero-image {
  order: 1;
  display: flex;
  justify-content: center;
  background-color: var(--slide-color, transparent) !important;
}

.product-slide .hero-image img {
  width: 100%;
  max-width: 520px;
  max-height: 520px;
  object-fit: contain;
  filter: none;
  background: transparent;
}

.product-image-himaya {
  max-width: 1040px;
  max-height: 800px;
}

@media (max-width: 1023px) {
  .product-slide .hero-copy {
    order: 2;
  }
  .product-slide .hero-image {
    order: 1;
  }
}

/* Product description lists with bullet points */
.product-description-list {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.product-description-list li {
  padding-left: 0.25rem;
}

/* Dark mode for orange-themed cards */
.dark [class*="bg-[#FFF3DE]"] {
  background-color: #2d1f0a !important;
  border-color: #4a3314 !important;
}

.dark [class*="bg-[#FFE8CC]"] {
  background-color: #2a1c08 !important;
  border-color: #45300f !important;
}

.dark [class*="bg-[#FFDAB3]"] {
  background-color: #2d1e0c !important;
  border-color: #4a3416 !important;
}

/* Dark mode text colors for orange cards */
.dark [class*="text-[#5B3A00]"] {
  color: #ffa94d !important;
}

.dark [class*="text-[#6B4308]"] {
  color: #ffb366 !important;
}

/* Dark mode for orange gradient backgrounds */
.dark [class*="from-[#FFDAB3]"],
.dark [class*="to-[#FFE8CC]"],
.dark [class*="from-[#FFF5E6]"],
.dark [class*="to-[#FFE8CC]"] {
  background: linear-gradient(to right, #2d1e0c, #2a1c08) !important;
  border-color: #4a3416 !important;
}

/* Keep text readable in orange gradients in dark mode */
.dark [class*="from-[#FFDAB3]"] [class*="text-[#5B3A00]"],
.dark [class*="to-[#FFE8CC]"] [class*="text-[#5B3A00]"] {
  color: #ffa94d !important;
}

.dark [class*="from-[#FFDAB3]"] [class*="text-[#6B4308]"],
.dark [class*="to-[#FFE8CC]"] [class*="text-[#6B4308]"] {
  color: #ffb366 !important;
}

/* Dark mode for border colors */
.dark [class*="border-[#F1C27D]"] {
  border-color: #4a3416 !important;
}

.dark [class*="border-orange-200"] {
  border-color: #4a3416 !important;
}

/* Dark mode for small colored info cards */
.dark [class*="bg-[#ecfeff]"] {
  background-color: #ecfeff !important;
}

.dark [class*="bg-[#ecfeff]"] p,
.dark [class*="bg-[#ecfeff]"] .font-semibold {
  color: #000000 !important;
}

.dark [class*="bg-[#fff7ed]"] {
  background-color: #fff7ed !important;
}

.dark [class*="bg-[#fff7ed]"] p,
.dark [class*="bg-[#fff7ed]"] .font-semibold {
  color: #000000 !important;
}

.dark [class*="bg-[#fdf4ff]"] {
  background-color: #fdf4ff !important;
}

.dark [class*="bg-[#fdf4ff]"] p,
.dark [class*="bg-[#fdf4ff]"] .font-semibold {
  color: #000000 !important;
}

/* Dark mode for orange accent elements */
.dark [class*="bg-[#F5A623]"] {
  background-color: #d68910 !important;
}

.dark [class*="text-orange-600"] {
  color: #ff9933 !important;
}

/* Ensure orange CTA buttons remain visible */
.dark .bg-orange-500,
.dark [class*="bg-orange-500"] {
  background-color: #d68910 !important;
  color: #ffffff !important;
}

.dark .bg-orange-500:hover,
.dark [class*="bg-orange-500"]:hover {
  background-color: #b87410 !important;
}

/* Border for orange buttons in dark mode */
.dark [class*="border-orange-500"] {
  border-color: #d68910 !important;
  color: #ff9933 !important;
}

/* Dark mode navigation links */
.dark header nav a {
  color: #ffffff !important;
}

.dark header nav a:hover {
  color: #ff9933 !important;
}

/* Mobile menu dark mode */
.dark #mobile-menu {
  background-color: rgba(17, 24, 39, 0.95) !important;
  border-color: #334155 !important;
}

/* Dark mode for form inputs */
.dark input,
.dark textarea {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #9ca3af !important;
}

.dark input:focus,
.dark textarea:focus {
  border-color: #ff9933 !important;
  ring-color: #ff9933 !important;
}

/* Dark mode for checkboxes */
.dark input[type="checkbox"] {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

.dark input[type="checkbox"]:checked {
  background-color: #d68910 !important;
  border-color: #d68910 !important;
}

/* Ensure labels remain visible */
.dark label {
  color: #e5e7eb !important;
}

/* Dark mode for homepage "View products" button */
.dark .home-page a[href="produits.html"],
.dark .home-page a[href*="produits"],
.dark .home-page a[href="products.html"],
.dark .home-page a[href*="products"] {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Dark mode CTA button: keep label readable */
.dark .home-page .cta-primary-button {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}
.dark .home-page .cta-primary-button:hover {
  background-color: #f5f5f5 !important;
}

/* First slide fade-in animation */
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.first-slide-content {
  opacity: 1;
}

.first-slide-content > * {
  opacity: 0;
}

.first-slide-content.animate-in > * {
  animation: fadeInSlide 1.6s ease-out forwards;
}

.first-slide-content.animate-in > p {
  animation-delay: 0.25s;
}

.first-slide-content.animate-in > h2 {
  animation-delay: 0.55s;
}

.first-slide-content.animate-in > a {
  animation-delay: 0.85s;
}