/**
 * HerbariumIQ Design Studio — Consolidated Frontend & Pattern Stylesheet
 * (assets/css/design-studio-frontend.css)
 *
 * Consolidates:
 * 1. Original HerbariumIQ Page Effects styles (nomenclature tooltips, supplier panels,
 *    research-card hover states, and @property --animation-reduced).
 * 2. Four Differentiated Aesthetic Design Systems:
 *    - System 1: Modern Botanical & Earthy (.hiq-ds-system-botanical)
 *    - System 2: Clean Clinical & Scientific (.hiq-ds-system-clinical)
 *    - System 3: Dark Mode Luxury (.hiq-ds-system-luxury)
 *    - System 4: Minimalist Editorial (.hiq-ds-system-editorial)
 * 3. Unified Visual Effects Studio Entrance, Scroll-Reveal, Hover, and Advanced Motion Presets.
 */

@property --animation-reduced {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@media (prefers-reduced-motion: reduce) {
  .herbariumiq-nomenclature-popover,
  .herbarium-panel-card,
  .herbariumiq-bulk-tier-card,
  .herbariumiq-toggle-indicator,
  .hiq-ds-pattern,
  .hiq-ds-pattern *,
  .hiq-effect-target,
  .hiq-effect-target * {
    animation: var(--animation-reduced) !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   1. Migrated HerbariumIQ Page Effects Core Styles (100% Preserved)
   ========================================================================== */

/* 1A. Research-Card Hover & Keyboard Focus States */
.herbarium-panel-card,
.herbariumiq-bulk-tier-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.herbarium-panel-card:hover,
.herbarium-panel-card:focus-within {
  border-color: var(--herbariumiq-sage, #5c7d68);
  box-shadow: 0 6px 18px rgba(20, 51, 38, 0.09);
}

/* 1B. Botanical Nomenclature Tooltips (WCAG 1.4.13 Dismissible, Hoverable, Persistent) */
.herbariumiq-tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.herbariumiq-nomenclature-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  border-block-end: 2px dotted var(--herbariumiq-teal-pop, #0b6e69);
  color: var(--herbariumiq-forest, #143326);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  padding: 0 0.15rem;
  cursor: pointer;
  min-block-size: 24px;
  min-inline-size: 24px;
  --interest-delay-start: 0.2s;
  interest-delay-start: var(--interest-delay-start);
  --interest-delay-end: 0.1s;
  interest-delay-end: var(--interest-delay-end);
}

.herbariumiq-nomenclature-trigger:is(:hover, :focus-visible, :interest-source, .interest-source) {
  background-color: rgba(11, 110, 105, 0.1);
  color: var(--herbariumiq-teal-pop, #0b6e69);
}

.herbariumiq-nomenclature-popover[popover] {
  top: anchor(bottom);
  left: anchor(center);
  position-try: flip-block;
  margin: unset;
}

.herbariumiq-nomenclature-popover {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 60;
  min-inline-size: 220px;
  max-inline-size: min(320px, 88dvw);
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
  background-color: var(--herbariumiq-forest, #143326);
  color: #ffffff;
  font-size: 0.8125rem;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  border: 1px solid var(--herbariumiq-brass, #8c6a32);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, display 0.18s allow-discrete, overlay 0.18s allow-discrete;
}

.herbariumiq-nomenclature-popover:is(:popover-open, .\:popover-open, .is-open) {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

@starting-style {
  .herbariumiq-nomenclature-popover:is(:popover-open, .\:popover-open, .is-open) {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* 1C. Supplier & Bulk-Sourcing Panel Presentation Toggles & Hidden-Until-Found Accordions */
.herbariumiq-supplier-toggle {
  inline-size: 100%;
  display: flex;
  align-items: safe center;
  justify-content: space-between;
  gap: 0.75rem;
  background: transparent;
  border: 0;
  color: var(--herbariumiq-forest, #143326);
  font-size: 1rem;
  font-weight: 700;
  text-align: start;
  padding: 0.35rem 0;
  cursor: pointer;
}

.herbariumiq-toggle-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 999px;
  background-color: var(--herbariumiq-ivory, #f8faf9);
  border: 1px solid var(--herbariumiq-sage, #5c7d68);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.herbariumiq-supplier-toggle[aria-expanded="true"] .herbariumiq-toggle-indicator {
  transform: rotate(45deg);
  background-color: var(--herbariumiq-teal-pop, #0b6e69);
  color: #ffffff;
}

.herbariumiq-supplier-collapsible-inner {
  padding-block-start: 0.85rem;
  border-block-start: 1px solid rgba(20, 51, 38, 0.15);
  margin-block-start: 0.5rem;
}

/* ==========================================================================
   2. Four Differentiated Aesthetic Design Systems
   ========================================================================== */

/* System 1: Modern Botanical & Earthy */
:where(.hiq-ds-system-botanical, [data-hiq-aesthetic="botanical"]) {
  --hiq-ds-bg: var(--herbariumiq-ivory, #f8faf9);
  --hiq-ds-surface: var(--herbariumiq-parchment, #f2efe9);
  --hiq-ds-surface-elevated: #ffffff;
  --hiq-ds-text: var(--herbariumiq-charcoal, #1c2521);
  --hiq-ds-text-muted: #46574e;
  --hiq-ds-heading: var(--herbariumiq-forest, #143326);
  --hiq-ds-primary: var(--herbariumiq-botanical, #1e4d38);
  --hiq-ds-secondary: var(--herbariumiq-sage, #5c7d68);
  --hiq-ds-accent: var(--herbariumiq-terracotta-pop, #b83d25);
  --hiq-ds-border: #d6e0da;
  --hiq-ds-radius: 12px;
  --hiq-ds-font-heading: "Georgia", "Cambria", "Times New Roman", Times, serif;
  --hiq-ds-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hiq-ds-section-pad: clamp(2.5rem, 5vw, 4.5rem);
  --hiq-ds-grid-gap: 1.75rem;
  --hiq-ds-shadow: 0 10px 28px rgba(20, 51, 38, 0.07);
}

/* System 2: Clean Clinical & Scientific */
:where(.hiq-ds-system-clinical, [data-hiq-aesthetic="clinical"]) {
  --hiq-ds-bg: #ffffff;
  --hiq-ds-surface: #f4f7f9;
  --hiq-ds-surface-elevated: #ffffff;
  --hiq-ds-text: #13232c;
  --hiq-ds-text-muted: #475b66;
  --hiq-ds-heading: #102a3f;
  --hiq-ds-primary: #164e78;
  --hiq-ds-secondary: var(--herbariumiq-teal-pop, #0b6e69);
  --hiq-ds-accent: var(--herbariumiq-botanical, #1e4d38);
  --hiq-ds-border: #cfdbe3;
  --hiq-ds-radius: 6px;
  --hiq-ds-font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hiq-ds-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hiq-ds-section-pad: clamp(2rem, 4vw, 3.5rem);
  --hiq-ds-grid-gap: 1.25rem;
  --hiq-ds-shadow: 0 2px 10px rgba(16, 42, 63, 0.06);
}

/* System 3: Dark Mode Luxury */
:where(.hiq-ds-system-luxury, [data-hiq-aesthetic="luxury"]) {
  --hiq-ds-bg: #121916;
  --hiq-ds-surface: #18241f;
  --hiq-ds-surface-elevated: #1f2f28;
  --hiq-ds-text: #f2efe9;
  --hiq-ds-text-muted: #b7c6be;
  --hiq-ds-heading: #f8faf9;
  --hiq-ds-primary: #c8a464;
  --hiq-ds-secondary: var(--herbariumiq-brass, #8c6a32);
  --hiq-ds-accent: #e09f3e;
  --hiq-ds-border: #2d4239;
  --hiq-ds-radius: 8px;
  --hiq-ds-font-heading: "Georgia", "Cambria", "Times New Roman", Times, serif;
  --hiq-ds-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hiq-ds-section-pad: clamp(3rem, 6vw, 5.25rem);
  --hiq-ds-grid-gap: 2rem;
  --hiq-ds-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
  color-scheme: dark;
}

/* System 4: Minimalist Editorial */
:where(.hiq-ds-system-editorial, [data-hiq-aesthetic="editorial"]) {
  --hiq-ds-bg: #fbfaf7;
  --hiq-ds-surface: #f3f1ec;
  --hiq-ds-surface-elevated: #ffffff;
  --hiq-ds-text: #1e1e1c;
  --hiq-ds-text-muted: #575652;
  --hiq-ds-heading: #141413;
  --hiq-ds-primary: var(--herbariumiq-forest, #143326);
  --hiq-ds-secondary: #575652;
  --hiq-ds-accent: var(--herbariumiq-terracotta-pop, #b83d25);
  --hiq-ds-border: #dcd8cf;
  --hiq-ds-radius: 2px;
  --hiq-ds-font-heading: "Georgia", "Cambria", "Times New Roman", Times, serif;
  --hiq-ds-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hiq-ds-section-pad: clamp(2.75rem, 5.5vw, 4.75rem);
  --hiq-ds-grid-gap: 2.25rem;
  --hiq-ds-shadow: none;
}

/* Shared Pattern Base Styling */
.hiq-ds-pattern {
  background-color: var(--hiq-ds-bg, #f8faf9);
  color: var(--hiq-ds-text, #1c2521);
  font-family: var(--hiq-ds-font-body);
  padding-block: var(--hiq-ds-section-pad, 3rem);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  border-radius: var(--hiq-ds-radius, 8px);
  border: 1px solid var(--hiq-ds-border, #d6e0da);
  margin-block: 1.5rem;
  overflow-x: clip;
  box-sizing: border-box;
}

.hiq-ds-pattern :where(h1, h2, h3, h4, h5, h6) {
  color: var(--hiq-ds-heading);
  font-family: var(--hiq-ds-font-heading);
  text-wrap: balance;
  margin-block-start: 0;
}

.hiq-ds-pattern :where(p, li) {
  color: var(--hiq-ds-text);
}

.hiq-ds-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hiq-ds-accent) !important;
  margin-block-end: 0.65rem;
}

.hiq-ds-lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--hiq-ds-text-muted) !important;
  max-inline-size: 68ch;
}

.hiq-ds-card,
.hiq-ds-step-card,
.hiq-ds-specimen-frame {
  background-color: var(--hiq-ds-surface-elevated);
  border: 1px solid var(--hiq-ds-border);
  border-radius: var(--hiq-ds-radius);
  padding: 1.5rem;
  box-shadow: var(--hiq-ds-shadow);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.28s ease;
}

.hiq-ds-specimen-frame {
  background-color: var(--hiq-ds-surface);
  border-inline-start: 4px solid var(--hiq-ds-primary);
}

.hiq-ds-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background-color: var(--hiq-ds-surface);
  color: var(--hiq-ds-primary) !important;
  border: 1px solid var(--hiq-ds-border);
  margin-block-end: 0.75rem;
}

.hiq-ds-step-num {
  font-family: var(--hiq-ds-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--hiq-ds-accent) !important;
  margin-block-end: 0.4rem;
}

.hiq-ds-stat-value {
  font-family: var(--hiq-ds-font-heading);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--hiq-ds-primary) !important;
  margin-block-end: 0.25rem;
}

.hiq-ds-stat-label {
  font-size: 0.875rem;
  color: var(--hiq-ds-text-muted) !important;
  margin-block-end: 0;
}

.hiq-ds-price {
  font-family: var(--hiq-ds-font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--hiq-ds-heading) !important;
  margin-block: 0.5rem 1rem;
}

.hiq-ds-price span {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--hiq-ds-text-muted);
}

.hiq-ds-card-featured {
  border: 2px solid var(--hiq-ds-primary);
}

.hiq-ds-fine-rule {
  border: 0;
  border-block-start: 1px solid var(--hiq-ds-border);
  margin-block: 1.5rem;
}

.hiq-ds-faq-item {
  padding-block: 1.25rem;
  border-block-end: 1px solid var(--hiq-ds-border);
}

.hiq-ds-clinical-table table {
  inline-size: 100%;
  border-collapse: collapse;
  background-color: var(--hiq-ds-surface-elevated);
}

.hiq-ds-clinical-table th,
.hiq-ds-clinical-table td {
  padding: 0.85rem 1rem;
  border: 1px solid var(--hiq-ds-border);
  text-align: start;
}

.hiq-ds-clinical-table th {
  background-color: var(--hiq-ds-surface);
  color: var(--hiq-ds-heading);
  font-weight: 700;
}

.hiq-ds-btn-gold .wp-block-button__link {
  background-color: var(--hiq-ds-primary, #c8a464) !important;
  color: #121916 !important;
  font-weight: 700;
}

.hiq-ds-btn-outline-light .wp-block-button__link {
  border-color: var(--hiq-ds-primary, #c8a464) !important;
  color: var(--hiq-ds-heading, #f8faf9) !important;
}

/* ==========================================================================
   3. Unified Visual Effects Studio — Entrance, Scroll, Hover & Advanced Motion
   ========================================================================== */

/* CRITICAL SAFETY RULE: Content remains 100% visible if JS does not run or fails.
   Initial hidden states are ONLY applied when `html.hiq-js-effects-ready` is active
   AND the element has `.hiq-effect-pending` prior to viewport intersection. */
html.hiq-js-effects-ready .hiq-effect-target.hiq-effect-pending {
  opacity: 0;
  will-change: transform, opacity;
}

html.hiq-js-effects-ready .hiq-effect-target.hiq-effect-pending.hiq-effect-fade-up {
  transform: translateY(var(--hiq-effect-distance, 24px));
}

html.hiq-js-effects-ready .hiq-effect-target.hiq-effect-pending.hiq-effect-fade-down {
  transform: translateY(calc(-1 * var(--hiq-effect-distance, 24px)));
}

html.hiq-js-effects-ready .hiq-effect-target.hiq-effect-pending.hiq-effect-slide-left {
  transform: translateX(var(--hiq-effect-distance, 24px));
}

html.hiq-js-effects-ready .hiq-effect-target.hiq-effect-pending.hiq-effect-slide-right {
  transform: translateX(calc(-1 * var(--hiq-effect-distance, 24px)));
}

html.hiq-js-effects-ready .hiq-effect-target.hiq-effect-pending.hiq-effect-scale-up {
  transform: scale(0.94);
}

html.hiq-js-effects-ready .hiq-effect-target.hiq-effect-pending.hiq-effect-blur-clear {
  filter: blur(6px);
  transform: translateY(14px);
}

html.hiq-js-effects-ready .hiq-effect-target.hiq-effect-pending.hiq-effect-clip-reveal {
  clip-path: inset(0 0 100% 0);
}

/* Revealed Active State */
html.hiq-js-effects-ready .hiq-effect-target.hiq-effect-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  clip-path: inset(0 0 0 0);
  transition-property: opacity, transform, filter, clip-path;
  transition-duration: var(--hiq-effect-duration, 600ms);
  transition-delay: var(--hiq-effect-delay, 0ms);
  transition-timing-function: var(--hiq-effect-easing, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Staggered Card Children Support (with modern sibling-index() + --sibling-index fallback) */
html.hiq-js-effects-ready .hiq-effect-stagger-cards.hiq-effect-pending :where(.hiq-ds-card, .wp-block-column) {
  opacity: 0;
  transform: translateY(18px);
}

html.hiq-js-effects-ready .hiq-effect-stagger-cards.hiq-effect-visible :where(.hiq-ds-card, .wp-block-column) {
  opacity: 1;
  transform: translateY(0);
  transition-property: opacity, transform;
  transition-duration: var(--hiq-effect-duration, 520ms);
  transition-timing-function: var(--hiq-effect-easing, cubic-bezier(0.22, 1, 0.36, 1));
  transition-delay: calc(var(--sibling-index, 0) * var(--hiq-stagger-step, 80ms));
  transition-delay: calc((sibling-index() - 1) * var(--hiq-stagger-step, 80ms));
}

/* Hover & Micro-Interaction Presets */
.hiq-hover-card-lift :where(.hiq-ds-card, .hiq-ds-step-card):hover,
.hiq-hover-card-lift :where(.hiq-ds-card, .hiq-ds-step-card):focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(20, 51, 38, 0.12);
}

.hiq-hover-border-glow :where(.hiq-ds-card, .hiq-ds-step-card):hover,
.hiq-hover-border-glow :where(.hiq-ds-card, .hiq-ds-step-card):focus-within {
  border-color: var(--hiq-ds-secondary, #0b6e69);
  box-shadow: 0 0 0 2px rgba(11, 110, 105, 0.16);
}

.hiq-hover-shadow-elevate :where(.hiq-ds-card, .hiq-ds-step-card):hover,
.hiq-hover-shadow-elevate :where(.hiq-ds-card, .hiq-ds-step-card):focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(16, 42, 63, 0.12);
}

.hiq-hover-luxury-elevation :where(.hiq-ds-card, .hiq-ds-hero-overlay-box):hover,
.hiq-hover-luxury-elevation :where(.hiq-ds-card, .hiq-ds-hero-overlay-box):focus-within {
  transform: translateY(-4px);
  border-color: var(--hiq-ds-primary, #c8a464);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
}

.hiq-hover-button-scale .wp-block-button__link {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hiq-hover-button-scale .wp-block-button__link:hover,
.hiq-hover-button-scale .wp-block-button__link:focus-visible {
  transform: scale(1.03);
}

.hiq-hover-underline-reveal a:not(.wp-block-button__link) {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-underline-offset 0.2s ease;
}

.hiq-hover-underline-reveal a:not(.wp-block-button__link):hover,
.hiq-hover-underline-reveal a:not(.wp-block-button__link):focus-visible {
  color: var(--hiq-ds-accent);
  text-underline-offset: 7px;
}

.hiq-hover-tilt-subtle :where(.hiq-ds-card):hover {
  transform: perspective(800px) rotateX(1.2deg) rotateY(-1.2deg) translateY(-3px);
}

/* Advanced Motion Presets (Scroll-Driven View Timeline with Progressive Enhancement) */
@keyframes hiq-gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: no-preference) {
  .hiq-advanced-float-accent {
    animation: hiq-gentle-float 6s ease-in-out infinite;
    --animation-reduced: none;
  }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes hiq-scroll-parallax-shift {
      from { transform: translateY(18px); }
      to { transform: translateY(-18px); }
    }

    .hiq-advanced-parallax-bg .hiq-ds-hero-overlay-box {
      animation: hiq-scroll-parallax-shift linear both;
      animation-timeline: view();
      animation-range: entry 10% exit 90%;
    }
  }
}

/* Responsive Viewport Breakpoint Adjustments */
@media (max-width: 781px) {
  .hiq-ds-pattern {
    padding-block: 2rem;
    padding-inline: 1.15rem;
  }

  .hiq-effect-target[data-hiq-responsive="desktop-only"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}