/*
Theme Name: HerbariumIQ Block Theme
Theme URI: https://herbariumiq.com
Author: HerbariumIQ Architecture Team
Author URI: https://herbariumiq.com
Description: Production-ready WordPress Full Site Editing (FSE) Block Theme for the HerbariumIQ botanical research institute, scientific digital library, and clinical workstation. Engineered with 12-column responsive fractional CSS Grid workspace panels, a Global Standard/Clinical Mode Switch, Zero-Knowledge Identity Vault badge hooks, accessible slide-out drawers, and strict separation of concerns (zero business logic or API keys in theme).
Version: 3.2.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: herbariumiq-block-theme
Tags: full-site-editing, block-themes, accessibility-ready, custom-colors, grid-layout, scientific, botanical
*/

/* ==========================================================================
   1. Canonical Botanical Design Tokens (v3.2.0)
   ========================================================================== */
:root {
  --herbariumiq-forest: #143326;
  --herbariumiq-forest-v32: #1B4332;
  --herbariumiq-botanical: #1e4d38;
  --herbariumiq-sage: #5c7d68;
  --herbariumiq-sage-mist: #D8F3DC;
  --herbariumiq-ivory: #f8faf9;
  --herbariumiq-parchment: #f2efe9;
  --herbariumiq-parchment-light: #FBFBF9;
  --herbariumiq-slate: #2B2D42;
  --herbariumiq-gold: #D4AF37;
  --herbariumiq-charcoal: #1c2521;
  --herbariumiq-brass: #8c6a32;
  --herbariumiq-amber-pop: #c97310;
  --herbariumiq-terracotta-pop: #b83d25;
  --herbariumiq-teal-pop: #0b6e69;

  /* Mode & Semantic Surface Tokens */
  --herbariumiq-clinical-accent: #164e78;
  --herbariumiq-surface-card: #ffffff;
  --herbariumiq-border-subtle: #d6e0da;
  --herbariumiq-border-strong: #9ab0a3;
  --herbariumiq-text-muted: #46574e;
  --herbariumiq-focus-ring: #0b6e69;

  /* Layout Dimensions */
  --header-height: 64px;
  --sidebar-width-expanded: 256px;
  --sidebar-width-collapsed: 72px;
  --drawer-width-desktop: min(65%, 960px);
}

body[data-herbarium-mode="clinical"] {
  --herbariumiq-active-mode-accent: var(--herbariumiq-clinical-accent);
  --herbariumiq-header-bg: #102a3f;
}

body[data-herbarium-mode="standard"],
body:not([data-herbarium-mode]) {
  --herbariumiq-active-mode-accent: var(--herbariumiq-forest);
  --herbariumiq-header-bg: var(--herbariumiq-forest);
}

/* ==========================================================================
   2. Base Typography & Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--herbariumiq-ivory);
  color: var(--herbariumiq-charcoal);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--herbariumiq-forest);
  font-family: "Cormorant Garamond", "Georgia", "Cambria", "Times New Roman", Times, serif;
  line-height: 1.25;
  margin-block-start: 0;
  margin-block-end: 0.75rem;
  text-wrap: balance;
}

code, pre, kbd, samp, .herbarium-case-id-badge {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

p {
  margin-block-start: 0;
  margin-block-end: 1rem;
  max-inline-size: 72ch;
}

img,
svg,
video,
canvas {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* ==========================================================================
   3. Global View Toggle: Standard View vs. Clinical Mode
   ========================================================================== */
/* Default: Standard Mode Active */
body[data-herbarium-mode="standard"] .clinical-only-block,
body:not([data-herbarium-mode]) .clinical-only-block {
  display: none !important;
}

body[data-herbarium-mode="standard"] .standard-only-block,
body:not([data-herbarium-mode]) .standard-only-block {
  display: block !important;
}

/* Clinical Mode Active */
body[data-herbarium-mode="clinical"] .standard-only-block {
  display: none !important;
}

body[data-herbarium-mode="clinical"] .clinical-only-block {
  display: block !important;
}

/* Smooth transition utility */
.herbarium-section-content {
  transition: opacity 0.2s ease-in-out;
}

/* SAFETY RULE: Critical contraindications and material safety warnings
   NEVER get hidden by mode switching across Standard or Clinical modes. */
.herbarium-critical-contraindication,
[data-safety-critical="true"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================================================
   4. Production Dashboard Grid & Responsive Behavior (Blueprint Specification)
   ========================================================================== */
/* Dashboard Workspace */
.herbarium-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
  grid-template-rows: minmax(240px, 2fr) minmax(320px, 3fr);
  gap: 16px;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f8faf9;
  height: calc(100dvh - var(--header-height, 64px));
  min-height: 0;
  overflow: auto;
}

/* Panel 1: Full-width botanical overview */
.herbarium-overview {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

/* Panel 2: Clinical research, bottom right */
.herbarium-research {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

/* Shared bottom-left column */
.herbarium-left-stack {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  min-height: 0;
}

/* Panels 3 and 4 */
.herbarium-traditional,
.herbarium-safety {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overflow-wrap: anywhere;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.herbarium-dashboard > *,
.herbarium-left-stack > * {
  box-sizing: border-box;
}

/* Tablet and Mobile Responsive Layouts */
@media (max-width: 900px) {
  .herbarium-dashboard {
    height: auto;
    min-height: calc(100dvh - var(--header-height, 64px));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    overflow: visible;
    padding: 12px;
  }

  .herbarium-overview,
  .herbarium-research,
  .herbarium-left-stack {
    grid-column: 1;
    grid-row: auto;
  }

  .herbarium-overview {
    min-height: 280px;
  }

  .herbarium-research {
    min-height: 320px;
  }

  .herbarium-left-stack {
    grid-template-rows: auto auto;
  }

  .herbarium-traditional,
  .herbarium-safety {
    min-height: 220px;
  }
}

/* ==========================================================================
   5. Responsive 12-Column Fractional Grid & 8/4 Clinical Split (v3.2.0)
   ========================================================================== */
.herbarium-grid-12,
.herbariumiq-fractional-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
  inline-size: 100%;
  box-sizing: border-box;
}

.herbarium-col-12 {
  grid-column: span 12 / span 12;
  min-inline-size: 0;
}

.herbarium-col-8 {
  grid-column: span 8 / span 8;
  min-inline-size: 0;
}

.herbarium-col-6 {
  grid-column: span 6 / span 6;
  min-inline-size: 0;
}

.herbarium-col-4 {
  grid-column: span 4 / span 4;
  min-inline-size: 0;
}

/* Tablet 8-Column Fractional Grid (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  .herbarium-grid-12,
  .herbariumiq-fractional-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .herbarium-col-12,
  .herbarium-col-8 {
    grid-column: span 8 / span 8;
  }

  .herbarium-col-6,
  .herbarium-col-4 {
    grid-column: span 4 / span 4;
  }
}

/* Mobile Single-Column Fractional Grid (< 768px) */
@media (max-width: 767px) {
  .herbarium-grid-12,
  .herbariumiq-fractional-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .herbarium-col-12,
  .herbarium-col-8,
  .herbarium-col-6,
  .herbarium-col-4 {
    grid-column: 1 / -1;
  }
}