/* Lux flavour search — styles for the search box, filter chips, flavour tiles and the
   "we may still develop it" empty state. Loaded from the end of <body> on / and /flavours/.
   Uses the site tokens (--forest --gold --line --muted --ink --white) which lux-theme.css
   already remaps for dark, so most rules need no per-theme override. */

.lx-root [hidden]{display:none!important}
.lx-root > * + *{margin-top:14px}

/* ---- search box (same look as the home page's .search; redeclared so /flavours/ gets it too) ---- */
.lx-search{background:var(--white);border:1px solid var(--line);padding:28px;margin:0}
.lx-search label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:14px;color:var(--ink)}
.lx-search .search-row{display:flex}
.lx-search input[type=search]{flex:1;min-width:0;border:0;border-bottom:1px solid #91a69d;padding:13px 4px;font-family:inherit;font-size:1rem;color:var(--ink);background:transparent;outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.lx-search input[type=search]::-webkit-search-decoration,.lx-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.lx-search input[type=search]:focus-visible{border-bottom-color:var(--gold);box-shadow:0 1px 0 var(--gold)}
.lx-count{margin-top:14px;min-height:1.4em;font-size:.88rem;color:var(--forest);font-weight:600}

html.site-dark .lx-search{background:var(--dk-card)}
html.site-dark .lx-empty{background:var(--dk-card);border-color:var(--line);border-top-color:var(--dk-acc)}
html.site-dark .lx-empty h3{color:#f5f3ec}
html.site-dark .lx-empty p{color:var(--muted)}
html.site-dark .lx-empty p strong,html.site-dark .lx-clear{color:#f5f3ec}

/* ---- filter chips: eyebrow language (small caps, tracked, square) ---- */
.lx-filter{margin-top:20px}
.lx-filter[hidden]{display:none}
.lx-filter-label{display:block;margin-bottom:9px;color:var(--gold);font-size:.7rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase}
.lx-chips{display:flex;flex-wrap:wrap;gap:8px}
.lx-chip{appearance:none;-webkit-appearance:none;cursor:pointer;min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--forest);font-family:inherit;font-weight:700;font-size:.72rem;line-height:1;letter-spacing:.09em;text-transform:uppercase;transition:border-color .25s,background-color .25s,color .25s}
.lx-chip:hover{border-color:var(--gold)}
.lx-chip:focus-visible,a.flavour:focus-visible{outline:3px solid #a8823c;outline-offset:3px}
.lx-clear:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.lx-chip[aria-pressed=true]{background:var(--forest);border-color:var(--forest);color:var(--white)}
html.site-dark .lx-chip[aria-pressed=true]{background:var(--dk-acc);border-color:var(--dk-acc);color:#022b1f}
html.site-dark .lx-chip:focus-visible,html.site-dark a.flavour:focus-visible{outline-color:var(--dk-acc)}

/* ---- tiles (identical to the home page's .flavour; redeclared for /flavours/) ---- */
.lx-root .flavours{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.lx-root .flavour{display:block;background:var(--white);border:1px solid var(--line);padding:24px;min-height:125px;color:inherit;text-decoration:none;overflow-wrap:break-word}
.lx-root .flavour strong{display:block;font:500 1.45rem "Manrope",sans-serif;color:var(--forest)}
.lx-root .flavour span{font-size:.8rem;color:var(--muted)}
.lx-root a.flavour{cursor:pointer}
.lx-root a.flavour:after{content:"\2192";position:absolute;right:20px;bottom:16px;color:#a8823c;font-size:.95rem;opacity:0;transform:translateX(-6px);transition:.3s}
.lx-root a.flavour:hover:after,.lx-root a.flavour:focus-visible:after{opacity:1;transform:none}
html.site-dark .lx-root a.flavour:after{color:var(--dk-acc)}

.lx-more{display:flex;justify-content:center}
.lx-root .lx-more .button{min-width:220px}

/* ---- empty state: the most important screen ---- */
.lx-empty{position:relative;background:linear-gradient(115deg,#07523a,#0b6549);border:1px solid #07523a;border-top:3px solid var(--gold);padding:clamp(28px,4vw,44px);color:#fff}
.lx-empty h3{margin:10px 0 10px;font:500 clamp(1.5rem,2.6vw,2rem)/1.15 "Manrope",sans-serif;color:#fff}
.lx-empty p{margin:0 0 24px;max-width:60ch;color:#d4e2dc;font-size:1rem}
.lx-empty p strong{color:#fff;overflow-wrap:anywhere}
.lx-empty-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.lx-empty .button{max-width:100%;text-align:center;overflow-wrap:anywhere}
.lx-clear{appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:1px solid var(--gold);padding:4px 0;border-radius:0;color:#fff;font-family:inherit;font-weight:700;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.lx-clear:hover{color:#f5e9cf}

/* ---- pairing with the existing open-call block ---- */
.lx-root .open-call .lx-call-link{display:inline-block;margin-top:14px;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:3px;text-decoration:none}
.lx-root .open-call .lx-call-link:hover{color:#f5e9cf}

@media(max-width:980px){.lx-root .flavour-tools{grid-template-columns:1fr}}
@media(max-width:680px){
  .lx-search{padding:22px 18px}
  .lx-search .search-row{display:grid;gap:10px}
    .lx-root .flavours{grid-template-columns:1fr 1fr}
  .lx-root .flavour{padding:20px 16px}
  .lx-root .flavour strong{font-size:1.25rem}
  .lx-empty-actions{display:grid}
  .lx-clear{justify-self:start}
}
@media(max-width:360px){.lx-root .flavours{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.lx-chip,.lx-root a.flavour:after{transition:none}}
.lx-family-head{margin:44px 0 16px}