/* css/styles.css
   Minimal custom styles on top of Tailwind.
   Most styling happens via Tailwind utility classes in the PHP partials. */

:root {
  --sml-primary:   #4D2546;
  --sml-secondary: #C67882;
  --sml-tertiary:  #8C5B3F;
  --sml-neutral:   #FAF5EF;
}

/* Smooth scrolling for anchor jumps. */
html { scroll-behavior: smooth; }

/* Prevent iOS zoom on input focus. */
input, textarea, select { font-size: 16px; }

/* Decorative shapes used in the Stitch design. */
.asymmetric-shape {
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}
.glass-card {
  background: rgba(254, 249, 243, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Subtle paper-grain overlay for the "Philosophy" sections. */
.bg-grain {
  background-image: radial-gradient(rgba(77, 37, 70, 0.04) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* Soft drop shadow for editorial cards. */
.editorial-shadow {
  box-shadow: 0 20px 60px -20px rgba(77, 37, 70, 0.25);
}
.soft-glow {
  box-shadow: 0 25px 70px -30px rgba(77, 37, 70, 0.2);
}

/* Line clamp fallback (Tailwind's line-clamp plugin covers this already, kept defensively). */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Material Symbols default weight tweak so outlined icons sit nicely with text. */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
  vertical-align: middle;
}

/* Keep the mobile bottom nav from hiding page content on small screens. */
@media (max-width: 767px) {
  main { padding-bottom: 6rem; }
}