/* --- CUSTOM THEMATIC CSS VARIABLES --- */
:root {
  --nutri-base-canvas: #faf9f6;          /* Creamy white background canvas */
  --nutri-card-back: #ffffff;            /* Pure white background for modules */
  --nutri-pine-glare: #e6f0ec;           /* Soft warm mint-white tint */
  --nutri-emerald-main: #0b4235;         /* Deep emerald primary color representing health & nature */
  --nutri-emerald-deep: #072a22;         /* Dark forest shadow shade */
  --nutri-highlight-bronze: #d4a373;     /* Elegant accent gold/bronze color */
  --nutri-charcoal-text: #1f2d29;        /* Easy to read text dark color */
  --nutri-sage-subtext: #52665f;         /* Elegant slate green for subtle notes */
  
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  --prev-radius-soft: 16px;              /* Custom soft border radius style */
  --prev-radius-pill: 999px;             /* Pill shape border radius style */
  
  --prev-shadow-standard: 0 10px 30px -5px rgba(11, 66, 53, 0.08), 0 5px 15px -5px rgba(0, 0, 0, 0.04);
  --prev-shadow-deep: 0 25px 50px -12px rgba(11, 66, 53, 0.18);
}

/* --- BASE & UTILITIES STYLING --- */
body {
  background-color: var(--nutri-base-canvas);
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54 48c-2 0-3 1-4 2s-2 1-4 1-3-1-4-2-2-1-4-1-3 1-4 2-2 1-4 1-3-1-4-2-2-1-4-1-3 1-4 2-2 1-4 1-3-1-4-2-2-1-4-1-3 1-4 2-2 1-4 1-3-1-4-2-2-1-4-1' fill='none' stroke='%230b4235' stroke-opacity='0.02' stroke-width='2'/%3E%3C/svg%3E");
  color: var(--nutri-charcoal-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* Page Scroll Progress Bar inside Sticky Header */
.prev-scroll-progress {
  height: 4px;
  width: 0%;
  background: var(--nutri-highlight-bronze);
  animation: prev-progress-grow linear;
  animation-timeline: scroll();
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
}

@keyframes prev-progress-grow {
  to { width: 100%; }
}

/* Scroll-driven Entrance Animations (CSS Only) */
@keyframes prev-slide-in {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.prev-scroll-reveal {
  animation: prev-slide-in linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
}

/* Component Neumorphism Styling */
.prev-neumorphic-tile {
  background: var(--nutri-card-back);
  box-shadow: 6px 6px 18px rgba(11, 66, 53, 0.04), -6px -6px 18px rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--prev-radius-soft);
  transition: all 0.3s ease;
}

.prev-neumorphic-tile:hover {
  box-shadow: 2px 2px 6px rgba(11, 66, 53, 0.04), -2px -2px 6px rgba(255, 255, 255, 0.9);
  transform: translateY(-3px);
}

/* Custom layout container elements */
.prev-shell-restrict {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* CSS Only Responsive Navigation Hamburger Toggle */
@media (max-width: 1023px) {
  .prev-main-navigation {
    position: fixed;
    top: 80px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 80px);
    background: var(--nutri-emerald-main);
    transition: left 0.35s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    padding: 3rem 2rem;
    z-index: 40;
  }
  .prev-nav-list-items {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .prev-nav-toggle-chk:checked ~ .prev-main-navigation {
    left: 0;
  }
  .prev-nav-toggle-chk:checked ~ .prev-hamburger-trigger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .prev-nav-toggle-chk:checked ~ .prev-hamburger-trigger span:nth-child(2) {
    opacity: 0;
  }
  .prev-nav-toggle-chk:checked ~ .prev-hamburger-trigger span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}