/*
Theme Name: WSA Clay Neumorphic
Theme URI: https://websitesolutionsaustralia.com
Author: Website Solutions Australia
Description: Lightweight blog theme with Neumorphic Clay design.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wsa-clay
*/

:root {
  --bg-clay: #E0E5EC;
  --shadow-light: rgba(255, 255, 255, 0.6);
  --shadow-dark: rgba(163, 177, 198, 0.65);
  --shadow-dark-deep: rgba(163, 177, 198, 0.8);
}

body {
  background-color: var(--bg-clay);
  color: #3D4852;
  font-family: 'Inter', sans-serif;
}

/* Neumorphic Shadows System */
.neu-extruded {
  background-color: #E0E5EC;
  box-shadow: 9px 9px 16px var(--shadow-dark), -9px -9px 16px var(--shadow-light);
}

.neu-extruded-hover {
  transition: all 0.3s ease-out;
}
.neu-extruded-hover:hover {
  transform: translateY(-2px);
  box-shadow: 12px 12px 20px var(--shadow-dark), -12px -12px 20px var(--shadow-light);
}

.neu-extruded-sm {
  background-color: #E0E5EC;
  box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
}

.neu-inset {
  background-color: #E0E5EC;
  box-shadow: inset 6px 6px 10px var(--shadow-dark), inset -6px -6px 10px var(--shadow-light);
}

.neu-inset-deep {
  background-color: #E0E5EC;
  box-shadow: inset 10px 10px 20px var(--shadow-dark-deep), inset -10px -10px 20px var(--shadow-light);
}

.neu-inset-sm {
  background-color: #E0E5EC;
  box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
}

.neu-button-primary {
  background-color: #4cbfa6;
  color: #ffffff;
  box-shadow: 6px 6px 12px rgba(76, 191, 166, 0.4), -6px -6px 12px rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease-out;
}
.neu-button-primary:hover {
  background-color: #3ea891;
  transform: translateY(-1px);
  box-shadow: 8px 8px 16px rgba(76, 191, 166, 0.5), -8px -8px 16px rgba(255, 255, 255, 0.7);
}
.neu-button-primary:active {
  transform: translateY(1px);
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.3);
}

/* Floating Ambient Motion */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Scroll Reveal Initial States */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Focus Indicator */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #E0E5EC, 0 0 0 5px #4cbfa6;
}

/* Content Styling & Resets */
.prose p {
  margin-bottom: 1.25rem;
  line-height: 1.75;
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: #3D4852;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}
.prose a {
  color: #4cbfa6;
  text-decoration: underline;
}
.prose a:hover {
  color: #3ea891;
}
.prose ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}
.prose ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}
.prose blockquote {
  border-left: 4px solid #4cbfa6;
  padding-left: 1rem;
  font-style: italic;
  margin: 1.5rem 0;
  color: #6B7280;
}
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 1.5rem 0;
}