/* Custom CSS variables based on the LIGHT theme and male health topic */
:root {
  --vital-vibe-bg: #faf8f5;            /* Off-white soft cream */
  --vital-vibe-surface: #ffffff;       /* Pure white for elements */
  --vital-vibe-accent: #d95d39;        /* Warm rust red/orange accent */
  --vital-vibe-accent-hover: #c04c2b;  /* Darker tone of rust orange */
  --vital-vibe-neutral-dark: #2c1f18;   /* Warm dark brown/black text */
  --vital-vibe-neutral-light: #f0ebe1;  /* Light grey/beige contrast divider */
  --vital-vibe-shadow-color: rgba(44, 31, 24, 0.08); /* Transparent dark shadow */
  
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  /* Screen and radius parameters */
  --hero-screen-height: 75vh;
  --border-radius-val: 16px; /* Soft radius style */
}

/* Base resets & typography */
body {
  font-family: var(--font-body);
  color: var(--vital-vibe-neutral-dark);
  background-color: var(--vital-vibe-bg);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

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

/* Animations */
@keyframes progress-grow {
  to { width: 100%; }
}

.scroll-progress {
  height: 3px;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  animation: progress-grow linear;
  animation-timeline: scroll();
}

/* Header & Hamburger styles (CSS-only) */
.menu-button {
  width: 24px;
  height: 18px;
}
.menu-bar {
  width: 100%;
  height: 2px;
  background-color: var(--vital-vibe-neutral-dark);
  transition: all 0.3s ease;
}

#menu-toggle:checked ~ .editorial-menu-strip {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--vital-vibe-surface);
  box-shadow: 0 4px 6px var(--vital-vibe-shadow-color);
  padding: 1.5rem;
  gap: 1rem;
}

@media(max-width: 767px) {
  .editorial-menu-strip {
    display: none;
  }
}

/* Hero elements constraints */
.editorial-top-spot h1 {
  font-size: clamp(2.5rem, 6vw, 6.5rem); /* Giant editorial typography */
}

/* Shadow utilities for elements (Raised shadows) */
.pillar-accordion-plate, .voice-quote-plate, .contact-form-strip > div {
  box-shadow: 0 10px 25px -5px var(--vital-vibe-shadow-color), 0 8px 10px -6px var(--vital-vibe-shadow-color);
  border: 1px solid rgba(44, 31, 24, 0.05);
}

/* Accordion interaction styles */
.pillar-accordion-plate {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.pillar-accordion-plate:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 30px -10px var(--vital-vibe-shadow-color);
}

/* Styled input tags for modern underline-only form */
.contact-form-strip input:focus, .contact-form-strip textarea:focus {
  border-bottom-color: var(--vital-vibe-accent) !important;
}

/* Scroll Animation Timeline implementation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Progressive enhancement: Reveal sections smoothly as they enter viewport */
@supports (animation-timeline: view()) {
  .editorial-segment-spacer {
    animation: fadeInUp ease-out both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
}