/*
 * The UK Wine Map -- one stylesheet, used by both the hosted page and the
 * paste-in embed.
 *
 * EVERY rule is scoped under .vnsm-uk-map and every class carries a vnsm-
 * prefix. That is not tidiness: this file gets injected into someone else's
 * website, so a bare `.card` or `h1` rule here would silently restyle their
 * page. Nothing in this file may match an element outside the container.
 *
 * Scoped on a CLASS, not an id, and that is load-bearing: the host chooses the
 * container's id (<div id="wine-map">), so an id selector silently matched
 * nothing and the first embed test rendered perfect markup with zero styling.
 * The renderer adds .vnsm-uk-map to whatever element it is handed. A class also
 * lets a page carry more than one map.
 *
 * The heading rules carry !important on purpose. A host page with
 * `h1,h2,h3 { font-size: 11px !important }` -- which is a real thing sites do
 * -- otherwise collapses the panel title to 11px, and an embed has no way to
 * out-specify !important except with its own. Limited to typography on our own
 * scoped selectors; it never reaches outside the container.
 *
 * Equally, the container sets its own font, colour and box-sizing rather than
 * inheriting, so a host page with an aggressive reset cannot deform the map.
 *
 * THE LOOK is the customer pages' (templates/customer_pages/_base.html, the round-up): DM Serif
 * Display headings, Instrument Sans text, black ink, the shop yellow, pill buttons and chips.
 * Same values, kept here as scoped variables because this file must not rely on the host's.
 */

  .vnsm-uk-map, .vnsm-uk-map * { box-sizing: border-box; margin: 0; padding: 0; }

  .vnsm-uk-map {
    --vnsm-serif: 'DM Serif Display', Georgia, serif;
    --vnsm-sans: 'Instrument Sans', Arial, sans-serif;
    --vnsm-ink: #000000;
    --vnsm-paper: #ffffff;
    --vnsm-yellow: #FFD100;
    --vnsm-muted: rgba(0, 0, 0, .7);
    --vnsm-line: rgba(0, 0, 0, .12);
    --vnsm-soft: #f5f5f5;

    font-family: var(--vnsm-sans);
    font-size: 17px;
    color: var(--vnsm-ink);
    background: var(--vnsm-paper);
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 20px 72px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  .vnsm-uk-map h1, .vnsm-uk-map h2, .vnsm-uk-map h3 {
    font-family: var(--vnsm-serif) !important;
    font-weight: 400 !important;
    /* Declared, not inherited. A host rule like `h1,h2,h3 { color: hotpink }`
       is a DIRECT match on our heading elements and beats anything the
       container merely passes down -- the first embed test rendered every
       heading in the host's pink. */
    color: var(--vnsm-ink) !important;
    letter-spacing: 0;
  }

  /* Small spaced capitals: the section labels of the customer pages (STYLES, BY GRAPE). */
  .vnsm-uk-map .vnsm-eyebrow, .vnsm-uk-map .vnsm-panel-eyebrow, .vnsm-uk-map .vnsm-method summary {
    font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--vnsm-muted);
  }

  .vnsm-uk-map .vnsm-eyebrow { display: block; margin-bottom: 10px; }
  /* Heading + "this week" tile: one band. Stacked on a phone; on a wide screen the tile
     sits beside the heading, its foot on the postcode box's baseline. */
  .vnsm-uk-map .vnsm-top { margin-bottom: 48px; }
  .vnsm-uk-map .vnsm-top > * + * { margin-top: 28px; }
  @media (min-width: 781px) {
    .vnsm-uk-map .vnsm-top.vnsm-has-pulse {
      display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: end;
    }
    .vnsm-uk-map .vnsm-top > * + * { margin-top: 0; }
  }
  /* On a phone the tile comes straight after the intro, before the postcode box. */
  @media (max-width: 780px) {
    .vnsm-uk-map .vnsm-top.vnsm-has-pulse { display: flex; flex-direction: column; }
    .vnsm-uk-map .vnsm-top.vnsm-has-pulse .vnsm-header { display: contents; }
    .vnsm-uk-map .vnsm-top.vnsm-has-pulse .vnsm-pulse { order: 1; margin-top: 20px; }
    .vnsm-uk-map .vnsm-top.vnsm-has-pulse .vnsm-where { order: 2; }
  }
  .vnsm-uk-map .vnsm-header h1 {
    font-size: clamp(40px, 7vw, 64px) !important; line-height: 1 !important; margin-bottom: 14px;
  }
  .vnsm-uk-map .vnsm-header p { color: var(--vnsm-muted); font-size: 18px; max-width: 34em; }

  /* "Where are you?": a postcode and one button. */
  .vnsm-uk-map .vnsm-where { margin-top: 22px; }
  .vnsm-uk-map .vnsm-where-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
  .vnsm-uk-map .vnsm-where-row { display: flex; gap: 8px; max-width: 380px; }
  .vnsm-uk-map .vnsm-where-input {
    flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 18px;
    border: 2px solid var(--vnsm-ink); border-radius: 999px; background: var(--vnsm-paper);
    font: 600 16px var(--vnsm-sans); color: var(--vnsm-ink);
  }
  .vnsm-uk-map .vnsm-where-input::placeholder { color: var(--vnsm-muted); font-weight: 400; }
  .vnsm-uk-map .vnsm-where-go {
    height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
    background: var(--vnsm-ink); color: var(--vnsm-yellow); font: 600 16px var(--vnsm-sans);
  }
  .vnsm-uk-map .vnsm-where-input:focus-visible, .vnsm-uk-map .vnsm-where-go:focus-visible {
    outline: 3px solid var(--vnsm-yellow); outline-offset: 2px;
  }
  .vnsm-uk-map .vnsm-where-miss { margin-top: 8px; font-size: 14px; color: var(--vnsm-muted); }

  /* ---------- This week: one yellow tile at a time ---------- */
  .vnsm-uk-map .vnsm-pulse { max-width: 520px; }
  /* Every tile in the same grid cell: the stage is as tall as the tallest, so the page
     below never jumps as they turn over. */
  /* pan-y: a sideways swipe turns the tile, an upward one still scrolls the page. */
  .vnsm-uk-map .vnsm-pulse-stage { display: grid; touch-action: pan-y; }
  .vnsm-uk-map .vnsm-pulse-tile {
    grid-area: 1 / 1; background: var(--vnsm-yellow); border-radius: 16px; padding: 18px 22px;
    opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s;
  }
  .vnsm-uk-map .vnsm-pulse-tile.vnsm-active { opacity: 1; visibility: visible; }
  .vnsm-uk-map .vnsm-pulse-eyebrow {
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  }
  .vnsm-uk-map .vnsm-pulse-value {
    font-family: var(--vnsm-serif); font-size: 32px; line-height: 1.05; margin-bottom: 6px;
  }
  .vnsm-uk-map .vnsm-pulse-caption { font-size: 15px; line-height: 1.4; }
  .vnsm-uk-map .vnsm-pulse-action {
    display: inline-block; margin-top: 12px; padding: 7px 16px; border: 0; border-radius: 999px;
    background: var(--vnsm-ink); color: var(--vnsm-yellow); font: 600 14px var(--vnsm-sans);
    text-decoration: none; cursor: pointer;
  }
  .vnsm-uk-map .vnsm-pulse-action:focus-visible { outline: 3px solid var(--vnsm-ink); outline-offset: 2px; }
  .vnsm-uk-map .vnsm-pulse-dots { display: flex; gap: 8px; margin-top: 12px; padding-left: 4px; }
  .vnsm-uk-map .vnsm-pulse-dot {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
    background: var(--vnsm-line); cursor: pointer;
  }
  .vnsm-uk-map .vnsm-pulse-dot.vnsm-active { background: var(--vnsm-ink); }
  @media (prefers-reduced-motion: reduce) { .vnsm-uk-map .vnsm-pulse-tile { transition: none; } }

  /* ---------- Map + panel ---------- */
  .vnsm-uk-map .vnsm-layout {
    display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 56px; align-items: start;
    scroll-margin-top: 16px;
  }
  /* minmax(0, ...): a plain 1fr grows to its widest child's min-content and the page scrolls sideways. */
  @media (max-width: 780px) { .vnsm-uk-map .vnsm-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
  .vnsm-uk-map .vnsm-map-col, .vnsm-uk-map .vnsm-panel-col { min-width: 0; }

  .vnsm-uk-map .vnsm-map-col { position: sticky; top: 24px; }
  @media (max-width: 780px) { .vnsm-uk-map .vnsm-map-col { position: static; } }
  .vnsm-uk-map .vnsm-map-svg { display: block; width: 100%; height: auto; overflow: visible; }

  /* The shades: regions ranked against each other right now (payload._rank_leans), never a figure. */
  .vnsm-uk-map .vnsm-lean-strongest { fill: var(--vnsm-yellow); background: var(--vnsm-yellow); }
  .vnsm-uk-map .vnsm-lean-strong { fill: #FFE26B; background: #FFE26B; }
  .vnsm-uk-map .vnsm-lean-light { fill: #FFF2B8; background: #FFF2B8; }
  .vnsm-uk-map .vnsm-lean-none { fill: #ECECEC; background: #ECECEC; }

  .vnsm-uk-map .vnsm-region {
    stroke: var(--vnsm-paper); stroke-width: 2; stroke-linejoin: round;
    cursor: pointer; transition: fill .2s ease;
  }
  .vnsm-uk-map .vnsm-region:hover { stroke: var(--vnsm-ink); }
  .vnsm-uk-map .vnsm-region.vnsm-active { fill: var(--vnsm-ink); stroke: var(--vnsm-ink); }
  .vnsm-uk-map .vnsm-region:focus { outline: none; stroke: var(--vnsm-ink); stroke-width: 3; }
  /* The Crown Dependencies are drawn enlarged (geometry.ISLANDS_INSET): a darker
     edge so three small shapes in the sea still read as land. */
  .vnsm-uk-map .vnsm-region.vnsm-inset { stroke: rgba(0, 0, 0, .35); stroke-width: 1.5; }

  .vnsm-uk-map .vnsm-region-label {
    font: 600 17px var(--vnsm-sans); fill: var(--vnsm-ink);
    text-anchor: middle; dominant-baseline: middle; pointer-events: none;
  }
  .vnsm-uk-map .vnsm-region-label.vnsm-callout-label { text-anchor: start; }
  .vnsm-uk-map .vnsm-region-label.vnsm-active { fill: var(--vnsm-yellow); }
  .vnsm-uk-map .vnsm-region-label.vnsm-callout-label.vnsm-active { fill: var(--vnsm-ink); }
  .vnsm-uk-map .vnsm-callout { stroke: var(--vnsm-ink); stroke-width: 1.5; }

  /* The wines view: plain regions, each carrying its best-seller's name (smaller --
     wine names run longer than appellations). The chosen region turns yellow. */
  .vnsm-uk-map .vnsm-plain .vnsm-region.vnsm-active { fill: var(--vnsm-yellow); stroke: var(--vnsm-ink); }
  .vnsm-uk-map .vnsm-plain .vnsm-region-label { font-size: 14px; }
  .vnsm-uk-map .vnsm-plain .vnsm-region-label.vnsm-active { fill: var(--vnsm-ink); }

  /* The opening: regions fill in one after another, then their labels. */
  @keyframes vnsm-fade-in { from { opacity: 0; } to { opacity: 1; } }
  .vnsm-uk-map .vnsm-reveal .vnsm-region,
  .vnsm-uk-map .vnsm-reveal .vnsm-label-group { animation: vnsm-fade-in .5s ease both; }

  .vnsm-uk-map .vnsm-legend {
    display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px;
    font-size: 13px; color: var(--vnsm-muted);
  }
  .vnsm-uk-map .vnsm-legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .vnsm-uk-map .vnsm-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

  /* One control: what to compare by. A grey track, the chosen one black with yellow words. */
  /* Never wraps: a pill broken over two lines reads as two controls. Where the four
     do not fit (a phone with large text) the track scrolls sideways instead. */
  /* The track runs the full width and the choices share it evenly. */
  .vnsm-uk-map .vnsm-toggle {
    display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; margin-bottom: 28px;
    max-width: 100%; overflow-x: auto; scrollbar-width: none;
    background: var(--vnsm-soft); border-radius: 999px;
  }
  .vnsm-uk-map .vnsm-toggle::-webkit-scrollbar { display: none; }
  .vnsm-uk-map .vnsm-toggle-btn {
    flex: 1 0 auto; white-space: nowrap;
    font: 600 15px var(--vnsm-sans); text-transform: capitalize;
    background: transparent; color: var(--vnsm-ink);
    border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer;
    transition: background .14s, color .14s;
  }
  .vnsm-uk-map .vnsm-toggle-btn.vnsm-active { background: var(--vnsm-ink); color: var(--vnsm-yellow); }
  .vnsm-uk-map .vnsm-toggle-btn:focus-visible { outline: 3px solid var(--vnsm-ink); outline-offset: 2px; }
  /* Four choices on one line at phone width, not a pill broken over two. */
  @media (max-width: 420px) { .vnsm-uk-map .vnsm-toggle-btn { font-size: 14px; padding: 10px 12px; } }

  /* `hidden` must beat the layout rules. Without this a node set to hidden
     stays on screen, because `display: flex` overrides the attribute's default. */
  .vnsm-uk-map [hidden] { display: none !important; }

  /* ---------- Panel: one statement, its evidence, the bottles ---------- */
  .vnsm-uk-map .vnsm-panel-eyebrow { margin-bottom: 10px; color: var(--vnsm-ink); }
  .vnsm-uk-map .vnsm-panel h2 {
    font-size: clamp(44px, 7vw, 80px) !important; line-height: .98 !important; margin-bottom: 16px;
  }
  .vnsm-uk-map .vnsm-panel-support { font-size: 18px; color: var(--vnsm-muted); max-width: 32em; }

  .vnsm-uk-map .vnsm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
  /* On a phone the bottles scroll sideways rather than stack three screens tall. */
  @media (max-width: 620px) {
    .vnsm-uk-map .vnsm-cards {
      display: flex; overflow-x: auto; gap: 14px; scroll-snap-type: x mandatory;
      margin-left: -20px; margin-right: -20px; padding: 0 20px 6px;
      /* Without it the snap pulls the first card flush to the screen edge. */
      scroll-padding: 0 20px;
    }
    .vnsm-uk-map .vnsm-card { flex: 0 0 200px; scroll-snap-align: start; }
    /* On a phone each bottle sits in a soft grey box (the mock-up's look). `multiply`
       lets a product photo's white ground take the grey rather than show as a white block. */
    .vnsm-uk-map .vnsm-card-img {
      height: 220px; background: var(--vnsm-soft); border-radius: 16px; padding: 14px 0;
      justify-content: center;
    }
    .vnsm-uk-map .vnsm-card-img img { mix-blend-mode: multiply; }
  }
  .vnsm-uk-map .vnsm-card { display: flex; flex-direction: column; gap: 6px; }
  .vnsm-uk-map .vnsm-card-img { height: 220px; display: flex; align-items: flex-end; margin-bottom: 8px; }
  .vnsm-uk-map .vnsm-card-img img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
  .vnsm-uk-map .vnsm-card-tag {
    font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1.3;
  }
  .vnsm-uk-map .vnsm-card h3 { font-size: 20px !important; line-height: 1.15 !important; }
  .vnsm-uk-map .vnsm-card-foot {
    margin-top: auto; padding-top: 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  }
  .vnsm-uk-map .vnsm-card-price { font-family: var(--vnsm-serif); font-size: 22px; }
  .vnsm-uk-map .vnsm-card-link {
    font: 600 15px var(--vnsm-sans); color: var(--vnsm-ink); text-decoration: underline;
    text-underline-offset: 3px; padding: 10px 0;
  }
  .vnsm-uk-map .vnsm-card-link:hover { text-decoration-thickness: 2px; }

  .vnsm-uk-map .vnsm-share {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--vnsm-line);
  }
  .vnsm-uk-map .vnsm-share:empty { display: none; }
  .vnsm-uk-map .vnsm-share-btn {
    height: 46px; padding: 0 22px; border: 2px solid var(--vnsm-ink); border-radius: 999px;
    background: var(--vnsm-paper); color: var(--vnsm-ink); font: 600 15px var(--vnsm-sans); cursor: pointer;
  }
  .vnsm-uk-map .vnsm-share-btn:hover { background: var(--vnsm-ink); color: var(--vnsm-yellow); }
  .vnsm-uk-map .vnsm-share-btn:focus-visible { outline: 3px solid var(--vnsm-ink); outline-offset: 2px; }
  .vnsm-uk-map .vnsm-share-url { font-size: 14px; color: var(--vnsm-muted); overflow-wrap: anywhere; }

  /* ---------- Method + footer ---------- */
  .vnsm-uk-map .vnsm-method {
    margin-top: 64px; border-top: 1px solid var(--vnsm-line); padding-top: 22px;
  }
  .vnsm-uk-map .vnsm-method summary { cursor: pointer; }
  .vnsm-uk-map .vnsm-method p {
    font-size: 15px; color: var(--vnsm-muted); margin-top: 14px; max-width: 760px;
  }
  .vnsm-uk-map .vnsm-footer {
    margin-top: 26px; font-size: 14px; color: var(--vnsm-muted); max-width: 760px;
  }