/* Custom CSS Variables tailored directly for the joint & healthy lifestyle space */
:root {
  --wellness-core-bg: #FCFBF9; /* Soft warm ivory background */
  --wellness-surface-card: #FFFFFF; /* Clean pure white cards */
  --wellness-brand-accent: #164E3F; /* Elegant deep pine green for healthy feeling */
  --wellness-brand-hover: #0F352B; /* Darker green variant for clean interaction states */
  --wellness-dark-ink: #2A322E; /* Dark olive charcoal body color */
  --wellness-sub-text: #687771; /* Medium slate gray for descriptions */
  --wellness-highlight-warm: #E0A96D; /* Warm golden sand for high-quality accents */
  --wellness-gradient: linear-gradient(135deg, #164E3F 0%, #2A6F5E 100%); /* Lush medical-grade forest green gradient */
  --wellness-light-gradient: linear-gradient(135deg, #F4EAE1 0%, #E8DAD0 100%); /* Dreamy soft clay-and-sand background gradient */
  --font-display: 'Lora', serif;
  --font-body: 'Inter', sans-serif;
  --wellness-soft-border-radius: 16px; /* Soft comfortable corners */
  --wellness-glow-shade: 0 10px 25px rgba(22, 78, 63, 0.08); /* Raised depth shadow */
}

/* Global Reset & Typography */
body {
  font-family: var(--font-body);
  background-color: var(--wellness-core-bg);
  color: var(--wellness-dark-ink);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  transition: background-color 0.3s ease;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase; /* Heading Case Requirement */
}

/* Header style override */
.joint-header-bar {
  background-color: var(--wellness-brand-accent);
  border-bottom: 2px solid rgba(22, 78, 63, 0.15);
}

.joint-header-bar a {
  color: var(--wellness-surface-card) !important;
  font-family: var(--font-body);
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.joint-header-bar a:hover {
  opacity: 0.85;
}

/* CSS-only Hamburguer Menu for Variant 2 */
.joint-hamburger-btn span {
  display: block;
  width: 28px;
  height: 3px;
  background-color: var(--wellness-surface-card);
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.joint-hamburger-btn span:last-child {
  margin-bottom: 0;
}

#joint-mobile-toggle:checked ~ .joint-hamburger-btn span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}

#joint-mobile-toggle:checked ~ .joint-hamburger-btn span:nth-child(2) {
  opacity: 0;
}

#joint-mobile-toggle:checked ~ .joint-hamburger-btn span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -7px);
}

#joint-mobile-toggle:checked ~ .joint-nav-links {
  display: flex !important;
}

@media (max-width: 767px) {
  .joint-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--wellness-brand-accent);
    padding: 1.5rem;
    flex-direction: column;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }
}

/* Custom transitions and interactive states (no JS) */
.joint-item-box {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  border-radius: var(--wellness-soft-border-radius);
}

.joint-item-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(22, 78, 63, 0.12);
}

.joint-trigger-link {
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.joint-trigger-link:hover {
  transform: scale(1.02);
}

/* Custom Masonry styles */
.joint-masonry-grid {
  column-count: 3;
  column-gap: 1.5rem;
}

@media (max-width: 1024px) {
  .joint-masonry-grid {
    column-count: 2;
  }
}

@media (max-width: 640px) {
  .joint-masonry-grid {
    column-count: 1;
  }
}

.joint-voice-bubble {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
}

/* Scroll Animation and Scroll Driven Elements (CSS-only) */
@supports (animation-range: entry) {
  .joint-item-box, .joint-voice-bubble, .joint-content-plate {
    animation: reveal-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }
}

@keyframes reveal-fade-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}