/* Shared by the feature carousel on the home page, the builder modal and the
   generated demo: the calorie chip, the CO₂ chip and the wine-pairing panel.
   Colours come from the --b-accent / --b-ink / --b-border / --b-radius custom
   properties each host sets, so one stylesheet serves all three. */

/* ---- Feature demo elements ---- */
/* Small muted text never drops below .72 opacity: on a white chip that is the
   floor for WCAG AA at these sizes, and the demos are checked for it.
   Wine pairing, after the wine panel on the De Reiziger menu: a small-caps
   region line, the name, a line of tasting notes and a dashed rule above the
   price. The link under the dish is dotted-underlined the way that menu does it. */
.wp-link {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .35em .45em;
  margin: .35rem 0 0 .2rem; padding: .3rem 0; min-height: 24px;
  font-size: 12px; color: var(--b-ink); background: none; border: 0; text-align: left; cursor: pointer;
}
.wp-link-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .75; }
.wp-link-name {
  font-weight: 700; color: var(--b-accent);
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.wp-link[aria-expanded="true"] .wp-link-name { text-decoration-style: solid; }
.wp-info {
  margin-top: .4rem; padding: .85rem 1rem .8rem;
  background: #fff; border: 1px solid var(--b-border); border-radius: var(--b-radius);
}
.wp-info-region { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--b-accent); margin: 0; }
.wp-info-name { font-weight: 800; font-size: 16px; line-height: 1.2; color: var(--b-ink); margin: .2rem 0 0; }
.wp-info-desc { font-size: 12.5px; line-height: 1.55; color: var(--b-ink); opacity: .72; margin: .4rem 0 0; }
.wp-info-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed rgba(43,24,16,.25); font-size: 12px;
}
.wp-info-price { font-weight: 800; color: var(--b-accent); }
.wp-info-glass { font-size: 11px; color: var(--b-ink); opacity: .72; }

/* CO₂: three rising bars like a signal meter, filled to the level and tinted
   by it, so the scale reads at a glance without a leaf emoji doing the work. */
.co2-chip {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  padding: .3rem .6rem .3rem .55rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--b-border);
  font-size: 10.5px; font-weight: 700; color: var(--b-ink); white-space: nowrap; line-height: 1.2;
}
.co2-scale { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.co2-scale i { display: block; width: 4px; border-radius: 1.5px; background: rgba(43,24,16,.14); }
.co2-scale i:nth-child(1) { height: 4px; }
.co2-scale i:nth-child(2) { height: 7px; }
.co2-scale i:nth-child(3) { height: 10px; }
.co2-chip b { font-weight: 800; opacity: .72; }
.co2-chip[data-level="low"]    .co2-scale i:nth-child(1)    { background: #16A34A; }
.co2-chip[data-level="medium"] .co2-scale i:nth-child(-n+2) { background: #D97706; }
.co2-chip[data-level="high"]   .co2-scale i                 { background: #DC2626; }
.co2-chip[data-level="low"]    .co2-level { color: #15803D; }
.co2-chip[data-level="medium"] .co2-level { color: #B45309; }
.co2-chip[data-level="high"]   .co2-level { color: #B91C1C; }

/* Calories: the number leads, the unit steps back, and a short bar sets the
   dish against a 900 kcal main course so the figure means something. */
.kcal-chip {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  padding: .3rem .65rem .3rem .6rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--b-border);
  font-size: 10.5px; font-weight: 700; color: var(--b-ink); white-space: nowrap; line-height: 1.2;
}
.kcal-num { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--b-accent); }
.kcal-unit { opacity: .72; margin-left: -.3rem; }
.kcal-bar { width: 28px; height: 4px; border-radius: 2px; background: rgba(43,24,16,.14); overflow: hidden; }
.kcal-bar i { display: block; height: 100%; width: var(--fill, 50%); border-radius: 2px; background: var(--b-accent); }
.demo-note { font-size: 11.5px; line-height: 1.5; color: var(--b-ink); opacity: .75; margin: .75rem 0 0; }

/* Several of the demos toggle `hidden` on elements that also carry a display
   rule below; the attribute has to win regardless of stylesheet order. */
.feature-demo [hidden] { display: none !important; }

/* ---- Menu samenstellen: a prix-fixe builder ---- */
.sm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.sm-kicker { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--b-accent); margin: 0; }
.sm-title { font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--b-ink); margin: .15rem 0 0; }
.sm-price {
  flex: none; display: inline-flex; align-items: baseline; gap: .25rem;
  padding: .35rem .7rem; border-radius: 999px; background: var(--b-accent); color: #fff;
  font-weight: 800; font-size: 14px; line-height: 1; white-space: nowrap;
}
.sm-price small { font-size: 9.5px; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.sm-progress { display: grid; grid-auto-flow: column; gap: 4px; margin: .8rem 0 .9rem; }
.sm-progress i { display: block; height: 4px; border-radius: 2px; background: rgba(43,24,16,.14); transition: background .2s ease; }
.sm-progress i.is-done { background: var(--b-accent); }
.sm-course + .sm-course { margin-top: .7rem; }
.sm-legend { display: flex; align-items: center; gap: .5rem; margin: 0 0 .45rem; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--b-ink); opacity: .85; }
.sm-step {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 999px; border: 1.5px solid var(--b-ink); font-size: 10px; font-weight: 800; letter-spacing: 0;
  color: var(--b-ink); transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sm-step.is-done { background: var(--b-accent); border-color: var(--b-accent); color: #fff; }
.sm-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .45rem; }
.sm-opt {
  display: flex; align-items: flex-start; gap: .55rem; text-align: left;
  padding: .55rem .65rem; background: #fff; border: 1px solid var(--b-border); border-radius: var(--b-radius);
  color: var(--b-ink); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.sm-opt:hover { border-color: var(--b-accent); }
.sm-opt:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 2px; }
.sm-opt-check {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 999px;
  border: 1.5px solid rgba(43,24,16,.3); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.sm-opt-check svg { width: 11px; height: 11px; opacity: 0; transition: opacity .15s ease; }
.sm-opt[aria-pressed="true"] { border-color: var(--b-accent); box-shadow: 0 0 0 1px var(--b-accent); }
.sm-opt[aria-pressed="true"] .sm-opt-check { background: var(--b-accent); border-color: var(--b-accent); }
.sm-opt[aria-pressed="true"] .sm-opt-check svg { opacity: 1; }
.sm-opt-text { display: flex; flex-direction: column; min-width: 0; }
.sm-opt-name { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.sm-opt-note { font-size: 10.5px; line-height: 1.35; opacity: .72; margin-top: .15rem; }
.sm-summary { margin-top: .9rem; padding: .7rem .85rem; border-radius: var(--b-radius); border: 1px dashed rgba(43,24,16,.3); }
.sm-summary.is-complete { background: #fff; border-style: solid; border-color: var(--b-border); }
.sm-summary-hint { font-size: 11.5px; font-weight: 700; color: var(--b-ink); opacity: .72; margin: 0; }
.sm-summary-label { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--b-accent); margin: 0; }
.sm-summary-list { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .3rem; font-size: 12px; font-weight: 700; color: var(--b-ink); }
.sm-summary-list li + li::before { content: "\00B7"; margin-right: .3rem; opacity: .5; }
.sm-summary-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  margin-top: .55rem; padding-top: .5rem; border-top: 1px dashed rgba(43,24,16,.25);
  font-size: 11.5px; color: var(--b-ink);
}
.sm-summary-foot b { font-size: 14px; font-weight: 800; color: var(--b-accent); }

/* ---- Filteren op stemming: three tiles and a colour-coded list ---- */
/* One tile per row: the cards are narrow, and "Avontuurlijk" does not fit
   three abreast. The icon sits in a tinted disc at the left, the label and
   its hint beside it, and a pressed tile fills with the accent. */
.md-tiles { display: flex; flex-direction: column; gap: .35rem; }
.md-tile {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: .6rem; align-items: center; text-align: left;
  padding: .45rem .65rem .45rem .5rem; background: #fff; border: 1px solid var(--b-border); border-radius: var(--b-radius);
  color: var(--b-ink); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.md-tile:hover { border-color: var(--b-accent); }
.md-tile:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 2px; }
.md-tile-icon {
  grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(193,58,34,.1); color: var(--b-accent);
}
.md-tile-icon svg { width: 16px; height: 16px; }
.md-tile-label { font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.md-tile-hint { font-size: 10.5px; line-height: 1.3; opacity: .72; }
.md-tile[aria-pressed="true"] { background: var(--b-accent); border-color: var(--b-accent); color: #fff; }
.md-tile[aria-pressed="true"] .md-tile-icon { background: rgba(255,255,255,.18); color: #fff; }
.md-tile[aria-pressed="true"] .md-tile-hint { opacity: .85; }
.md-status { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .8rem 0 .5rem; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--b-ink); opacity: .85; }
.md-clear { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--b-accent); background: none; border: 0; padding: .2rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.md-list { display: flex; flex-direction: column; gap: .4rem; }
/* Name and price on the first line, the mood tag under the name, and a
   colour bar down the left that spans both. */
.md-row {
  display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; align-items: center; column-gap: .6rem; row-gap: .3rem;
  padding: .5rem .7rem .5rem .6rem; background: #fff; border: 1px solid var(--b-border); border-radius: var(--b-radius);
  --md-tint: var(--b-accent); --md-soft: rgba(193,58,34,.12);
}
.md-row-bar { grid-row: 1 / span 2; }
.md-row-tag { grid-column: 2; justify-self: start; }
.md-row[data-mood-of="fresh"] { --md-tint: #15803D; --md-soft: rgba(21,128,61,.12); }
.md-row[data-mood-of="adventurous"] { --md-tint: #B45309; --md-soft: rgba(180,83,9,.14); }
.md-row-bar { display: block; width: 4px; height: 100%; min-height: 26px; border-radius: 2px; background: var(--md-tint); align-self: stretch; }
.md-row-name { font-size: 12.5px; font-weight: 700; color: var(--b-ink); line-height: 1.25; }
.md-row-tag { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--md-tint); background: var(--md-soft); border-radius: 999px; padding: .2rem .45rem; white-space: nowrap; }
.md-row-price { font-size: 12px; font-weight: 800; color: var(--b-accent); font-variant-numeric: tabular-nums; }

/* ---- Aanbevelingen per type gast: a segmented control and a re-sorted list ---- */
.pr-kicker { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--b-ink); opacity: .85; margin: 0 0 .45rem; }
.pr-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; background: #fff; border: 1px solid var(--b-border); border-radius: 999px; }
.pr-seg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 32px; min-width: 0;
  padding: .3rem .25rem; border: 0; border-radius: 999px; background: transparent; color: var(--b-ink);
  font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.pr-seg-btn:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 1px; }
.pr-seg-icon { display: inline-flex; opacity: .8; }
.pr-seg-icon svg { width: 14px; height: 14px; }
.pr-seg-btn[aria-pressed="true"] { background: var(--b-accent); color: #fff; }
.pr-seg-btn[aria-pressed="true"] .pr-seg-icon { opacity: 1; }
.pr-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; }
/* Name and price share the first line; a recommended dish gets a second
   line with the reason at the left and the tag at the right, so the name is
   never squeezed by the tag. */
.pr-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .6rem; row-gap: .3rem;
  padding: .55rem .7rem; background: #fff; border: 1px solid var(--b-border); border-radius: var(--b-radius);
  transition: opacity .15s ease;
}
.pr-row:not(.is-rec) { opacity: .78; }
.pr-row.is-rec { border-color: var(--b-accent); box-shadow: inset 3px 0 0 var(--b-accent); background: #fff; }
.pr-row-name { font-size: 12.5px; font-weight: 700; color: var(--b-ink); line-height: 1.25; margin: 0; min-width: 0; }
.pr-row-why { font-size: 10.5px; color: var(--b-ink); opacity: .72; margin: 0; line-height: 1.35; min-width: 0; }
.pr-badge {
  display: inline-flex; align-items: center; gap: .25rem; padding: .22rem .5rem .22rem .4rem; border-radius: 999px;
  background: var(--b-accent); color: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
}
.pr-badge svg { width: 10px; height: 10px; }
.pr-row-price { font-size: 12px; font-weight: 800; color: var(--b-accent); font-variant-numeric: tabular-nums; }

/* ---- Interactieve herkomstkaart: the De Reiziger wine map ----
   Colours and type follow that menu (terracotta, cream, Fraunces for names,
   Space Mono for the small caps) rather than the host --b-* set, because the
   brief is that it looks exactly like the demo does. */
.wm-root { position: relative; }
.wm-frame { position: relative; border-radius: 14px; overflow: hidden; border: 2px dashed rgba(226,71,44,.35); background: #F5EBDB; }
.wm-map { width: 100%; height: 264px; isolation: isolate; }
@media (min-width: 640px) { .wm-map { height: 288px; } }
.map-tint .leaflet-tile-pane { filter: sepia(.35) saturate(1.3) hue-rotate(-8deg) brightness(1.03); }
.wm-marker {
  width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #FBF3E7; color: #C13A22; font-family: "Space Mono", ui-monospace, monospace; font-weight: 700; font-size: 11px;
  border: 1.5px dashed currentColor; box-shadow: 0 2px 6px rgba(43,24,16,.18); cursor: pointer; transition: transform .15s ease;
}
.wm-marker:hover { transform: scale(1.08); }
.wm-home {
  width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #C13A22; color: #FBF3E7; border: 2px solid #FBF3E7; box-shadow: 0 2px 6px rgba(43,24,16,.25);
}
.wm-home svg { width: 13px; height: 13px; }
/* The info panel sits over the whole demo (map, chips and hint), which gives
   a wine's full story room without the map having to be taller than the card. */
.wm-overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: .5rem; }
.wm-backdrop { position: absolute; inset: 0; background: rgba(43,24,16,.45); border: 0; padding: 0; cursor: pointer; border-radius: 14px; }
.wm-panel {
  position: relative; width: 100%; max-height: 100%; overflow-y: auto;
  background: #FBF3E7; color: #2B1810; border-radius: 16px; padding: .85rem .95rem .9rem;
  box-shadow: 0 18px 34px -16px rgba(43,24,16,.35);
}
.wm-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.wm-info-region { font-family: "Space Mono", ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: #C13A22; margin: 0; }
.wm-info-name { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 21px; line-height: 1.1; margin: .15rem 0 0; color: #2B1810; }
.wm-info-close { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: rgba(43,24,16,.65); cursor: pointer; border-radius: 999px; }
.wm-info-close:hover { background: rgba(43,24,16,.06); }
.wm-info-close svg { width: 16px; height: 16px; }
.wm-info-desc { font-size: 12.5px; line-height: 1.45; color: rgba(43,24,16,.72); margin: .4rem 0 0; }
.wm-info-about { font-size: 12px; line-height: 1.5; font-style: italic; color: rgba(43,24,16,.72); margin: .45rem 0 0; }
.wm-info-about-label { display: block; font-style: normal; font-family: "Space Mono", ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: rgba(43,24,16,.65); margin-bottom: .2rem; }
.wm-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .55rem; }
.wm-tag {
  display: inline-flex; align-items: center; gap: .25rem; font-family: "Space Mono", ui-monospace, monospace;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: .15rem .45rem; border: 1px solid;
}
.wm-tag.is-vegan { background: #C9E7CE; color: #1F5C33; border-color: rgba(31,92,51,.2); }
.wm-tag.is-vegetarian { background: #C6DCF2; color: #1D4E80; border-color: rgba(29,78,128,.2); }
.wm-tag.is-warn { background: #FBE3C2; color: #8A4A0F; border-color: rgba(138,74,15,.3); }
.wm-pairing { display: flex; align-items: center; gap: .4rem; margin: .6rem 0 0; font-family: "Space Mono", ui-monospace, monospace; font-size: 10px; font-weight: 700; color: rgba(43,24,16,.65); }
.wm-pairing svg { width: 12px; height: 12px; }
.wm-pairing-name { text-decoration: underline dotted; text-underline-offset: 2px; color: #2B1810; }
.wm-info-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed rgba(43,24,16,.15); }
.wm-info-price { font-family: "Space Mono", ui-monospace, monospace; font-weight: 700; color: #C13A22; }
.wm-add { background: #C13A22; color: #fff; border: 0; border-radius: 999px; padding: .5rem 1rem; font-size: 12px; font-weight: 700; cursor: pointer; }
.wm-stepper { display: inline-flex; align-items: center; gap: .75rem; background: #C13A22; color: #fff; border-radius: 999px; padding: .4rem .75rem; font-size: 12px; font-weight: 700; }
.wm-stepper button { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: inherit; font: inherit; line-height: 1; cursor: pointer; }
.wm-stepper span { font-variant-numeric: tabular-nums; min-width: 1ch; text-align: center; }
.wm-legend { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.wm-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem .3rem .35rem; border-radius: 999px;
  background: #FBF3E7; border: 1px solid rgba(226,71,44,.3); color: #2B1810;
  font-family: "Space Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.wm-chip:hover { border-color: #C13A22; }
.wm-chip:focus-visible { outline: 2px solid #C13A22; outline-offset: 2px; }
.wm-chip[aria-pressed="true"] { background: #C13A22; border-color: #C13A22; color: #fff; }
.wm-chip-flag { width: 18px; height: 18px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 1.5px #FBF3E7; }
.wm-hint { font-family: "Space Mono", ui-monospace, monospace; font-size: 10.5px; color: rgba(43,24,16,.72); margin: .55rem 0 0; }
/* The map is its own stacking context (isolation above), so Leaflet's
   z-indexes stay inside it and the info overlay, a sibling, sits over all of it. */
.wm-map .leaflet-control-attribution a { text-decoration: underline; }

/* Every card in the feature carousel is stretched to the tallest of them, and
   this demo is by far the tallest — at its full size it made all fifteen too
   tall to read a whole card on a phone. The map and the chips give the height
   back: smaller type fits the five wines in three rows instead of four.
   Must stay last in the file — it overrides the rules above at equal weight. */
@media (max-width: 639px) {
  .wm-map { height: 150px; }
  .wm-legend { gap: .3rem; margin-top: .55rem; }
  .wm-chip { padding: .22rem .5rem .22rem .28rem; gap: .3rem; font-size: 9.5px; }
  .wm-chip-flag { width: 14px; height: 14px; }
  .wm-hint { font-size: 9.5px; margin-top: .45rem; }
}