/*
 * Seed list and order forms: neutral colours (AA contrast on white), theme fonts.
 * Each colour takes the public --assoc-* variable of the members plugin when
 * the page sets it (accent colour of the association), a neutral value otherwise;
 * a theme restyles everything by setting these variables.
 * .assoc-seeds prefix everywhere: nothing leaks onto the rest of the site.
 */
.assoc-seeds,
.assoc-seeds-order,
.assoc-seeds-admin {
  --assoc-seeds-accent: var(--assoc-accent, #2f5d3a);
  --assoc-seeds-accent-strong: var(--assoc-accent-strong, color-mix(in srgb, var(--assoc-seeds-accent) 70%, #000));
  --assoc-seeds-accent-soft: var(--assoc-accent-soft, color-mix(in srgb, var(--assoc-seeds-accent) 10%, #fff));
  --assoc-seeds-on-accent: var(--assoc-on-accent, #fff);
  --assoc-seeds-text: var(--assoc-text, #1f1f1f);
  --assoc-seeds-muted: var(--assoc-muted, #5c5c5c);
  --assoc-seeds-rule: var(--assoc-border, #d8d8d8);
  --assoc-seeds-surface: var(--assoc-surface, #fff);
  --assoc-seeds-danger: var(--assoc-danger, #b32d2e);
  --assoc-seeds-warning: var(--assoc-warning, #8a5300);
  --assoc-seeds-warning-soft: var(--assoc-warning-soft, #fbf1df);
  --assoc-seeds-success: var(--assoc-success, #2e7d32);
  --assoc-seeds-radius: var(--assoc-radius, 4px);

  /* Height of a fixed header of the theme, above the sticky bars: 0 by default. */
  --assoc-seeds-sticky-top: 0px;
}

.assoc-seeds {
  margin-block: 1.5em;
}

.assoc-seeds *, .assoc-seeds *::before, .assoc-seeds *::after { box-sizing: border-box; }

.assoc-seeds-header { display: flex; flex-wrap: wrap; gap: .25em 1.5em; color: var(--assoc-seeds-muted); font-size: .92em; }

.assoc-seeds-header p { margin: 0; }

/* Box inviting visitors to join: discreet, above the filters. */
.assoc-seeds-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em 1.5em; margin-block: 1em; padding: .8em 1em; background: var(--assoc-seeds-accent-soft); border-left: 4px solid var(--assoc-seeds-accent); }

.assoc-seeds-join p { margin: 0; }

.assoc-seeds-join-text { flex: 1 1 22em; }

.assoc-seeds-join-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4em 1em; }

.assoc-seeds-join-button { display: inline-block; padding: .45em 1em; background: var(--assoc-seeds-accent); color: var(--assoc-seeds-on-accent) !important; font-weight: 700; text-decoration: none; border-radius: 3px; }

.assoc-seeds-join-button:hover, .assoc-seeds-join-button:focus-visible { background: var(--assoc-seeds-accent-strong); }

.assoc-seeds-legend { margin-block: 1em; border: 1px solid var(--assoc-seeds-rule); border-radius: 6px; background: var(--assoc-seeds-surface); }

/* The whole bar opens the key; the arrow turns when it is open. */
.assoc-seeds-legend summary { display: flex; align-items: center; gap: .6em; padding: .75em 1em; cursor: pointer; list-style: none; font-weight: 700; color: var(--assoc-seeds-accent-strong); }

.assoc-seeds-legend summary::-webkit-details-marker { display: none; }

.assoc-seeds-legend summary::before { content: ""; flex: none; width: .55em; height: .55em; border-right: 2px solid currentcolor; border-bottom: 2px solid currentcolor; transform: rotate(-45deg); }

.assoc-seeds-legend[open] summary::before { transform: rotate(45deg); }

.assoc-seeds-legend summary:hover { background: var(--assoc-seeds-accent-soft); }

.assoc-seeds-legend-body { display: grid; gap: 1em; padding: .2em 1em 1em; font-size: .92em; }

.assoc-seeds-legend p, .assoc-seeds-legend ul, .assoc-seeds-legend dl { margin: 0; }

.assoc-seeds-reading { color: var(--assoc-seeds-muted); }

/* Small text on the tinted panel: the darker accent keeps a 4.5:1 contrast (the plain one is only checked on white). */
.assoc-seeds-legend .assoc-seeds-legend-title { margin: 0 0 .5em; font-size: .8em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--assoc-seeds-accent-strong); }

/* Uses: a rule of the association, set apart from the codes. */
.assoc-seeds-legend-uses { padding: .8em 1em; background: var(--assoc-seeds-accent-soft); border-left: 4px solid var(--assoc-seeds-accent); }

.assoc-seeds-legend-uses ul { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .5em; padding: 0; list-style: none; }

.assoc-seeds-legend-uses li { margin: 0; padding: .2em .7em; background: var(--assoc-seeds-surface); border-radius: 999px; }

.assoc-seeds-legend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }

.assoc-seeds-legend-card { padding: .9em 1em; border: 1px solid var(--assoc-seeds-rule); border-radius: 6px; }

.assoc-seeds-legend-iucn { grid-column: 1 / -1; }

.assoc-seeds-legend-intro { margin-bottom: .7em !important; }

.assoc-seeds-legend dl { display: grid; grid-template-columns: max-content 1fr; gap: .45em .7em; align-items: baseline; }

.assoc-seeds-legend dt { margin: 0; font-weight: 400; }

/* Each code in a label, as it reads in the table. */
.assoc-seeds-legend dt span { display: inline-block; min-width: 2.6em; padding: .1em .45em; text-align: center; font-size: .85em; font-weight: 700; white-space: nowrap; border-radius: 3px; }

/* IUCN codes keep the colours of the badges (assoc-seeds-iucn-*). */
.assoc-seeds-legend dt span:not([class]) { background: var(--assoc-seeds-accent-soft); }

.assoc-seeds-legend dd { margin: 0; }

@media (max-width: 759px) {

  .assoc-seeds-legend-grid { grid-template-columns: minmax(0, 1fr); }
}

/* IUCN: two columns of categories when there is room. */
@media (min-width: 760px) {

  .assoc-seeds-legend-iucn dl { grid-template-columns: max-content 1fr max-content 1fr; column-gap: .7em; }
}

.assoc-seeds-filters { --assoc-seeds-control: 2.6rem; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6em 1.5em; padding-block: .8em; border-block: 1px solid var(--assoc-seeds-rule); margin-block: 1em; background: inherit; }

/* Every item as tall as the search field and centred on it: the theme gives inputs,
   labels and paragraphs their own heights and margins, which broke the line. */
.assoc-seeds-filters p { margin: 0; }

.assoc-seeds-field { display: grid; gap: .3em; min-width: 0; flex: 1 1 14em; max-width: 24em; }

.assoc-seeds-field label { margin: 0; font-size: .85em; font-weight: 700; line-height: 1.2; }

.assoc-seeds .assoc-seeds-search { box-sizing: border-box; width: 100%; height: var(--assoc-seeds-control); margin: 0; padding: 0 .6em; font: inherit; }

.assoc-seeds-checkboxes, .assoc-seeds-print { display: flex; align-items: center; min-height: var(--assoc-seeds-control); }

.assoc-seeds-checkboxes { flex-wrap: wrap; gap: .3em 1.2em; }

.assoc-seeds-checkboxes label { display: inline-flex; align-items: center; gap: .4em; margin: 0; white-space: nowrap; cursor: pointer; }

.assoc-seeds-checkboxes input { inline-size: 1.2em; block-size: 1.2em; margin: 0; }

.assoc-seeds-filters p.assoc-seeds-print { margin-left: auto; }

/* Result of the search, under the bar. */
.assoc-seeds p.assoc-seeds-count { margin: 0 0 .5em; color: var(--assoc-seeds-muted); font-size: .9em; font-variant-numeric: tabular-nums; }

/* As tall as the search field next to it. */
.assoc-seeds-button { box-sizing: border-box; height: var(--assoc-seeds-control, auto); border: 1px solid var(--assoc-seeds-accent); background: transparent; color: var(--assoc-seeds-accent-strong); padding: .35em .9em; cursor: pointer; font: inherit; }

.assoc-seeds-button:hover, .assoc-seeds-button:focus-visible { background: var(--assoc-seeds-accent); color: var(--assoc-seeds-on-accent); }

.assoc-seeds-button:focus-visible, .assoc-seeds-search:focus-visible, .assoc-seeds-checkboxes input:focus-visible, .assoc-seeds-legend summary:focus-visible {
  outline: 2px solid var(--assoc-seeds-accent-strong); outline-offset: 2px;
}

/* .assoc-seeds before: the page templates of the theme reset the margins of h2 and p. */
.assoc-seeds .assoc-seeds-title { margin-block: 1.1em .35em; color: var(--assoc-seeds-accent-strong); }

/* The second list (rare seeds) clearly apart from the end of the first table. */
.assoc-seeds-section + .assoc-seeds-section { margin-top: 2.5em; padding-top: .2em; border-top: 1px solid var(--assoc-seeds-rule); }

.assoc-seeds p.assoc-seeds-intro { font-style: italic; margin-block: 0 1em; }

.assoc-seeds-scroll { overflow-x: auto; }

.assoc-seeds-table { width: 100%; border-collapse: collapse; font-size: .95em; margin: 0; }

.assoc-seeds-table th, .assoc-seeds-table td { padding: .4em .6em; border: 0; border-bottom: 1px solid var(--assoc-seeds-rule); text-align: left; vertical-align: baseline; }

.assoc-seeds-table thead th { background: var(--assoc-seeds-accent); color: var(--assoc-seeds-on-accent); font-weight: 700; white-space: nowrap; }

.assoc-seeds-table tbody th { font-weight: 400; }

.assoc-seeds-table tbody tr:hover { background: var(--assoc-seeds-accent-soft); }

.assoc-seeds-code { white-space: nowrap; font-variant-numeric: tabular-nums; }

.assoc-seeds-code abbr { text-decoration: none; cursor: help; }

.assoc-seeds-price { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* stylelint-disable-next-line no-descending-specificity -- body rows only, never the header cells above: no element matches both. */
.assoc-seeds-out-of-stock th, .assoc-seeds-out-of-stock td { color: var(--assoc-seeds-muted); }

.assoc-seeds-badge { display: inline-block; margin-left: .4em; padding: .05em .45em; font-size: .8em; font-weight: 700; vertical-align: .05em; white-space: nowrap; border-radius: 2px; }

.assoc-seeds-badge-new { background: var(--assoc-seeds-success); color: #fff; }

.assoc-seeds-badge-out-of-stock { background: #e4e4e1; color: #3b3a37; }

/* IUCN Red List colours, so that a visitor who knows them recognises them. */
.assoc-seeds-badge-iucn { font-weight: 400; cursor: help; }

.assoc-seeds-iucn-code { font-weight: 700; }

.assoc-seeds-iucn-ex, .assoc-seeds-iucn-ew { background: #000; color: #fff; }

.assoc-seeds-iucn-cr { background: #b3180a; color: #fff; }

.assoc-seeds-iucn-en { background: #fc7f3f; color: #000; }

.assoc-seeds-iucn-vu { background: #f9e814; color: #000; }

.assoc-seeds-iucn-nt { background: #cce226; color: #000; }

.assoc-seeds-iucn-lc { background: #60c659; color: #000; }

.assoc-seeds-iucn-dd { background: #d1d1c6; color: #000; }

.assoc-seeds-iucn-ne { background: #fff; color: #000; box-shadow: inset 0 0 0 1px var(--assoc-seeds-rule); }


.assoc-seeds-hidden-row { display: none; }

/* Meaning of the codes in words: read by screen readers, shown on phones. */
.assoc-seeds-plain { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.assoc-seeds [hidden] { display: none !important; }

/* Phone: each seed becomes a small card (name, then growing, type, habitat, price on one
   line) instead of a table scrolling sideways and hiding the price. */
@media (max-width: 600px) {

  .assoc-seeds-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .assoc-seeds-table, .assoc-seeds-table tbody { display: block; }

  .assoc-seeds-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .9em; padding: .5em .2em; border-bottom: 1px solid var(--assoc-seeds-rule); }

  .assoc-seeds-table tr.assoc-seeds-hidden-row { display: none; }

  .assoc-seeds-table th, .assoc-seeds-table td { display: block; padding: 0; border: 0; }

  .assoc-seeds-table tbody th { flex: 1 0 100%; }

  .assoc-seeds-table td[data-label]::before { content: attr(data-label) "\00a0"; color: var(--assoc-seeds-muted); font-size: .85em; }

  .assoc-seeds-table .assoc-seeds-price { margin-left: auto; font-weight: 700; }

  .assoc-seeds-table td.assoc-seeds-code { display: grid; grid-template-columns: auto; }

  .assoc-seeds-table td.assoc-seeds-code abbr { display: none; }

  .assoc-seeds-table td.assoc-seeds-code[data-label]::before { content: none; }

  .assoc-seeds-plain { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-size: .88em; }

  .assoc-seeds-table tbody td.assoc-seeds-code { flex: 1 0 100%; }

  .assoc-seeds-table tbody td.assoc-seeds-habitat { flex: 1 1 auto; }
}

@media print {

  .assoc-seeds-filters, .assoc-seeds-count, .assoc-seeds-empty, .assoc-seeds-join { display: none !important; }

  .assoc-seeds-scroll[hidden] { display: block !important; }

  .assoc-seeds-hidden-row { display: table-row; }

  .assoc-seeds-table thead th { background: none; color: #000; border-bottom: 2px solid #000; }

  .assoc-seeds-badge-new, .assoc-seeds-badge-iucn { background: none; color: #000; border: 1px solid #000; }

  .assoc-seeds-table tbody tr { break-inside: avoid; }
}

@media (prefers-reduced-motion: no-preference) {

  .assoc-seeds-button { transition: background-color .15s, color .15s; }
}