/* Minimal custom styles (Tailwind is loaded via CDN). */

:root {
  color-scheme: light;
}

html, body {
  height: 100%;
}

/* Optional: smoother anchor/hash navigation */
html {
  scroll-behavior: smooth;
}

/* Basic fade-in */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fadeUp 240ms ease-out both;
}

/* 3D flip cards (Category / Shop) */
.category-card {
  perspective: 1000px;
}

.category-inner {
  transform-style: preserve-3d;
}

.category-front,
.category-back {
  backface-visibility: hidden;
}

.category-back {
  transform: rotateY(180deg);
}

.category-card.is-flipped .category-inner {
  transform: rotateY(180deg);
}

.shop-flip {
  transform-style: preserve-3d;
}

.shop-front,
.shop-back {
  backface-visibility: hidden;
}

.shop-back {
  transform: rotateY(180deg);
}

.shop-flip.is-flipped {
  transform: rotateY(180deg);
}

/* Minimal typography for microCMS HTML */
.simple-prose {
  line-height: 1.8;
  color: #374151;
}

.simple-prose h1,
.simple-prose h2,
.simple-prose h3 {
  color: #111827;
  font-weight: 700;
  line-height: 1.4;
  margin: 1.2em 0 0.6em;
}

.simple-prose h1 { font-size: 1.5rem; }
.simple-prose h2 { font-size: 1.25rem; }
.simple-prose h3 { font-size: 1.125rem; }

.simple-prose p { margin: 0.9em 0; }
.simple-prose a { color: #2563eb; text-decoration: underline; }
.simple-prose ul,
.simple-prose ol { padding-left: 1.25em; margin: 0.9em 0; }
.simple-prose li { margin: 0.35em 0; }
.simple-prose img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.simple-prose blockquote {
  border-left: 4px solid #e5e7eb;
  padding-left: 1rem;
  color: #4b5563;
  margin: 1em 0;
}

.simple-prose pre {
  background: #0b1020;
  color: #e5e7eb;
  padding: 1rem;
  border-radius: 0.75rem;
  overflow: auto;
  margin: 1em 0;
}

.simple-prose code {
  background: #f3f4f6;
  padding: 0.15em 0.35em;
  border-radius: 0.375rem;
}