:root {
  --bg-cream: #f0eee6;
  --primary: #d97757;
  --stone-dark: #2d2926;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-cream);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(217, 119, 87, 0.03), transparent 25%),
    radial-gradient(circle at 85% 60%, rgba(217, 119, 87, 0.02), transparent 25%);
  color: var(--stone-dark);
}

.glass-nav {
  background: rgba(240, 238, 230, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.glass-feature {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.perspective-container {
  perspective: 2000px;
}

.perspective-mockup {
  transform: rotateX(10deg) rotateY(-5deg) rotateZ(1deg);
  box-shadow:
    20px 40px 80px -10px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
  transition: transform 0.5s ease-out;
}

.perspective-mockup:hover {
  transform: rotateX(5deg) rotateY(-2deg) rotateZ(0.5deg) scale(1.01);
}

.feature-icon-wrapper {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* Community masonry (prototype-inspired) */
.grid-masonry {
  column-count: 1;
  column-gap: 2rem;
}

@media (min-width: 768px) {
  .grid-masonry {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .grid-masonry {
    column-count: 3;
  }
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 2rem;
}

/* Changelog timeline line (prototype-inspired) */
.timeline-line {
  background: linear-gradient(
    to bottom,
    rgba(217, 119, 87, 0) 0%,
    rgba(217, 119, 87, 0.3) 10%,
    rgba(217, 119, 87, 0.3) 90%,
    rgba(217, 119, 87, 0) 100%
  );
}

.changelog-bullet {
  position: relative;
  padding-left: 1.5rem;
}

.changelog-bullet::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--primary);
  opacity: 0.6;
}

/* Help center focus effect (prototype-inspired) */
.search-input-wrapper:focus-within {
  box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.2), 0 8px 30px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* Legal pages (prototype-inspired) */
.sticky-sidebar {
  position: sticky;
  top: 8rem;
}

.content-container {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.prose p {
  margin-bottom: 1.25em;
  line-height: 1.75;
}

.prose ul,
.prose ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin-bottom: 0.5em;
}

.toc-link.active {
  color: var(--primary);
  border-left-color: var(--primary);
  background-color: rgba(217, 119, 87, 0.05);
}

/* Modal */
body.momento-modal-open {
  overflow: hidden;
}

/* Prototype-like modal behavior on small screens: top-aligned + scrollable. */
#momentoLoginModal,
#momentoDownloadsModal {
  overflow-y: auto;
  align-items: flex-start;
}

@media (min-width: 640px) {
  #momentoLoginModal,
  #momentoDownloadsModal {
    align-items: center;
  }
}

#googleBtn {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Prototype-style: slightly blur the page behind modals. */
body.momento-modal-open > :not(#momentoDownloadsModal):not(#momentoLoginModal) {
  filter: blur(2px);
}

@media (prefers-reduced-motion: no-preference) {
  body > :not(#momentoDownloadsModal):not(#momentoLoginModal) {
    transition: filter 200ms ease;
  }
}

/* Avoid focus outlines looking like a "blue sticker" on the modal close button.
   Only show a ring for keyboard focus, not pointer clicks. */
#momentoLoginModal [data-momento-modal-close]:focus,
#momentoDownloadsModal [data-momento-modal-close]:focus {
  outline: none;
}

#momentoLoginModal [data-momento-modal-close],
#momentoDownloadsModal [data-momento-modal-close] {
  -webkit-tap-highlight-color: transparent;
}

#momentoLoginModal [data-momento-modal-close]:focus-visible,
#momentoDownloadsModal [data-momento-modal-close]:focus-visible {
  outline: 2px solid rgba(217, 119, 87, 0.5);
  outline-offset: 3px;
}

/* We focus the dialog container on open; avoid showing a browser outline. */
[data-momento-modal-dialog]:focus,
[data-momento-modal-dialog]:focus-visible {
  outline: none;
}

/* Ensure the HTML `hidden` attribute always wins over layout utilities (e.g. Tailwind `.flex`). */
[hidden] {
  display: none !important;
}