/* ============================================================
       GLOBAL DESIGN TOKENS
       Copy this <style> block into your Barrio subtheme's CSS file
       (web/themes/custom/YOUR_THEME/css/style.css)
       ============================================================ */
    :root {
      --av-lime:       #c8d600;
      --av-lime-dark:  #a8b400;
      --av-green-deep: #2a3100;
      --av-cream:      #f7f8ee;
      --av-dark:       #1e2200;
      --av-muted:      #6b7400;
      --av-border:     rgba(42, 49, 0, 0.12);

      --av-font-display: 'Crimson Pro', Georgia, serif;
      --av-font-body:    'DM Sans', system-ui, sans-serif;
    }

    body {
      font-family: var(--av-font-body);
      background: #fff;
      color: var(--av-green-deep);
    }

    /* ---- Shared utilities ---- */
    .av-tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 500;
      padding: 3px 10px;
      border-radius: 20px;
      line-height: 1.6;
    }
    .av-tag--endemic      { background: #eaf3de; color: #3b6d11; }
    .av-tag--pollinator   { background: #e6f1fb; color: #185fa5; }
    .av-tag--pest         { background: #faece7; color: #993c1d; }
    .av-tag--bioindicator { background: #faeeda; color: #854f0b; }
    .av-tag--invasive     { background: #fcebeb; color: #a32d2d; }

    .av-section-title {
      font-family: var(--av-font-display);
      font-size: 26px;
      font-weight: 400;
      color: var(--av-green-deep);
      letter-spacing: -0.01em;
    }

    .av-section-link {
      font-size: 13px;
      color: var(--av-muted);
      text-decoration: none;
      border-bottom: 1px solid var(--av-lime);
    }
    .av-section-link:hover { color: var(--av-green-deep); }

    /* ---- Block separators for this preview only ---- */
    .block-preview-label {
      background: #f0f0f0;
      border-left: 4px solid var(--av-lime);
      padding: 6px 14px;
      font-size: 12px;
      font-family: monospace;
      color: #555;
      margin: 0;
    }


    /* ============================================================
       BLOCK 1 — HERO
       ============================================================ */
    .av-hero {
      position: relative;
      min-height: 380px;
      background: var(--av-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* Replace .av-hero-bg with a real <img> or CSS background-image in Drupal */
    .av-hero-bg {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(160deg, rgba(30,34,0,0.82) 0%, rgba(20,28,0,0.65) 60%, rgba(10,18,0,0.88) 100%),
        url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/24701-nature-natural-beauty.jpg/1280px-24701-nature-natural-beauty.jpg') center/cover no-repeat;
      /* In Drupal: replace url() with your field_hero_image value */
    }

    .av-hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 48px 24px;
      max-width: 680px;
    }

    .av-hero-eyebrow {
      display: inline-block;
      background: rgba(200, 214, 0, 0.92);
      color: var(--av-green-deep);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 4px 14px;
      border-radius: 20px;
      margin-bottom: 16px;
    }

    .av-hero-title {
      font-family: var(--av-font-display);
      font-size: clamp(36px, 6vw, 56px);
      font-weight: 400;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 10px;
    }

    .av-hero-title span {
      color: var(--av-lime);
    }

    .av-hero-sub {
      font-size: 16px;
      color: rgba(255,255,255,0.72);
      margin-bottom: 32px;
    }

    .av-search-bar {
      display: flex;
      max-width: 560px;
      margin: 0 auto;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    }

    .av-search-bar input[type="search"] {
      flex: 1;
      border: none;
      padding: 13px 18px;
      font-size: 14px;
      font-family: var(--av-font-body);
      outline: none;
      color: var(--av-green-deep);
      background: transparent;
      min-width: 0;
    }

    .av-search-bar select {
      border: none;
      border-left: 1px solid #e0e0e0;
      padding: 13px 12px;
      font-size: 13px;
      font-family: var(--av-font-body);
      color: #555;
      background: #fafafa;
      outline: none;
      cursor: pointer;
    }

    .av-search-bar button {
      background: var(--av-lime);
      border: none;
      padding: 13px 22px;
      font-size: 14px;
      font-weight: 500;
      font-family: var(--av-font-body);
      color: var(--av-green-deep);
      cursor: pointer;
      transition: background 0.15s;
      white-space: nowrap;
    }
    .av-search-bar button:hover { background: var(--av-lime-dark); }


    /* ============================================================
       BLOCK 2 — QUICK STATS BAR
       ============================================================ */
    .av-stats-bar {
      background: var(--av-green-deep);
    }

    .av-stat-item {
      padding: 18px 16px;
      text-align: center;
      border-right: 1px solid rgba(255,255,255,0.08);
    }
    .av-stat-item:last-child { border-right: none; }

    .av-stat-num {
      font-family: var(--av-font-display);
      font-size: 28px;
      font-weight: 400;
      color: var(--av-lime);
      line-height: 1;
    }

    .av-stat-label {
      font-size: 11px;
      color: rgba(255,255,255,0.55);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-top: 4px;
    }


    /* ============================================================
       BLOCK 3 — ORDERS GRID
       ============================================================ */
    .av-orders-section {
      padding: 56px 0 40px;
    }

    .av-filter-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .av-filter-chip {
      font-size: 12px;
      padding: 5px 14px;
      border-radius: 20px;
      border: 1px solid var(--av-border);
      background: transparent;
      color: var(--av-muted);
      cursor: pointer;
      transition: all 0.15s;
      font-family: var(--av-font-body);
    }
    .av-filter-chip:hover,
    .av-filter-chip.active {
      background: var(--av-lime);
      border-color: var(--av-lime);
      color: var(--av-green-deep);
    }

    .av-order-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      text-decoration: none;
      transition: transform 0.15s;
    }
    .av-order-card:hover { transform: translateY(-3px); }

    .av-order-circle {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border: 2px solid var(--av-lime);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--av-cream);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .av-order-card:hover .av-order-circle {
      border-color: var(--av-lime-dark);
      box-shadow: 0 0 0 4px rgba(200,214,0,0.2);
    }
    .av-order-circle img { width: 100%; height: 100%; object-fit: cover; }

    .av-order-name {
      font-size: 13px;
      font-style: italic;
      color: var(--av-green-deep);
      text-align: center;
      font-family: var(--av-font-display);
      font-size: 15px;
    }
    .av-order-count {
      font-size: 11px;
      color: var(--av-muted);
      margin-top: -6px;
    }


    /* ============================================================
       BLOCK 4 — FEATURED SPECIES
       ============================================================ */
    .av-featured-section {
      padding: 48px 0;
      background: var(--av-cream);
    }

    .av-species-card {
      background: #fff;
      border-radius: 12px;
      border: 1px solid var(--av-border);
      overflow: hidden;
      transition: box-shadow 0.2s, transform 0.2s;
      text-decoration: none;
      color: inherit;
      display: block;
    }
    .av-species-card:hover {
      box-shadow: 0 8px 32px rgba(42,49,0,0.10);
      transform: translateY(-2px);
      color: inherit;
    }

    .av-species-img {
      width: 100%;
      height: 160px;
      object-fit: cover;
      background: #e8f0c0;
      display: block;
    }

    .av-species-body { padding: 14px 16px 16px; }

    .av-species-name {
      font-family: var(--av-font-display);
      font-size: 18px;
      font-style: italic;
      font-weight: 400;
      color: var(--av-green-deep);
      margin-bottom: 2px;
    }

    .av-species-meta {
      font-size: 12px;
      color: var(--av-muted);
      margin-bottom: 10px;
    }


    /* ============================================================
       BLOCK 5 — GEO MAP PLACEHOLDER
       ============================================================ */
    .av-map-section {
      padding: 48px 0;
    }

    .av-map-frame {
      background: #ddeebb;
      border-radius: 12px;
      min-height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      border: 1px solid var(--av-border);
    }

    .av-map-frame-label {
      font-size: 14px;
      color: var(--av-muted);
      font-style: italic;
    }

    /* Leaflet map target: add id="av-map" and init with JS */
    #av-leaflet-map {
      width: 100%;
      min-height: 360px;
      border-radius: 12px;
      border: 1px solid var(--av-border);
    }

    .av-map-controls {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px;
    }


    /* ============================================================
       BLOCK 6 — RECENT BIBLIOGRAPHY
       ============================================================ */
    .av-bib-section {
      padding: 48px 0;
      background: var(--av-cream);
    }

    .av-bib-item {
      padding: 16px 20px;
      border-radius: 10px;
      border: 1px solid var(--av-border);
      background: #fff;
      margin-bottom: 10px;
    }
    .av-bib-item:last-child { margin-bottom: 0; }

    .av-bib-year {
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--av-lime-dark);
      margin-bottom: 4px;
    }

    .av-bib-authors {
      font-size: 14px;
      font-weight: 500;
      color: var(--av-green-deep);
    }

    .av-bib-title {
      font-family: var(--av-font-display);
      font-size: 16px;
      font-style: italic;
      color: #444;
      margin: 3px 0 8px;
      line-height: 1.4;
    }

    .av-bib-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .av-bib-journal {
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 10px;
      background: #f2f2f2;
      color: #555;
    }

    .av-bib-doi {
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 10px;
      background: #e6f1fb;
      color: #185fa5;
      text-decoration: none;
    }
    .av-bib-doi:hover { text-decoration: underline; }

    .av-bib-actions {
      margin-left: auto;
      display: flex;
      gap: 6px;
    }

    .av-btn-sm {
      font-size: 12px;
      padding: 5px 12px;
      border-radius: 6px;
      border: 1px solid var(--av-border);
      background: transparent;
      color: var(--av-green-deep);
      text-decoration: none;
      cursor: pointer;
      font-family: var(--av-font-body);
      transition: background 0.12s;
    }
    .av-btn-sm:hover { background: var(--av-cream); }
    .av-btn-sm--primary { background: var(--av-lime); border-color: var(--av-lime); }
    .av-btn-sm--primary:hover { background: var(--av-lime-dark); }