/* ==========================================================================
   MREMBO NATURALS — INTERACTION STATES
   ==========================================================================

   One consistent hover, focus and press language for everything clickable on
   the site. Loaded LAST so it wins over the button rules in index.html's
   inline <style> without needing specificity tricks.

   --------------------------------------------------------------------------
   THE LANGUAGE
   --------------------------------------------------------------------------
   Solid buttons   background deepens · shadow grows and softens · lifts 2px
   Outline buttons fill with their own colour · text inverts · lifts 2px
   Chips & pills   border warms · background tints
   Nav & text      background tints
   Icon buttons    background tints · nudges up

   Press (:active) always returns the element to the page — the lift drops to
   0 and the shadow tightens. That is what makes a button feel physical.

   --------------------------------------------------------------------------
   THREE RULES THAT KEEP IT ACCESSIBLE
   --------------------------------------------------------------------------
   1. MOVEMENT IS GATED BEHIND A REAL POINTER.
      @media (hover:hover) and (pointer:fine). On a touchscreen :hover sticks
      after a tap, so an unguarded lift leaves the button hovering until you
      tap something else. Colour feedback still applies everywhere; only the
      movement is desktop-only.

   2. EVERY HOVER HAS A MATCHING :focus-visible.
      A keyboard user gets the same affordance plus a turmeric ring. Never
      remove an outline without replacing it.

   3. COLOUR CARRIES THE MESSAGE, MOVEMENT ONLY DECORATES.
      Under prefers-reduced-motion the transforms are dropped and the colour
      change stays, so the feedback survives with no movement at all.

   --------------------------------------------------------------------------
   CONTRAST
   --------------------------------------------------------------------------
   Every hover colour below was measured against its text colour. All pass
   WCAG AA (4.5:1), and each is an improvement on the state it replaces:

     terracotta  4.49 -> 5.69      green     9.74 -> 8.03
     mango       2.91 -> 5.21      turmeric  6.41 -> 5.40 (dark ink text)

   ⚠ KNOWN ISSUE, NOT INTRODUCED HERE: .btn-mango's *base* state is white on
   #D88F04 at 2.91:1, below the 4.5:1 minimum. The hover state now passes,
   but the resting state still does not. Fixing it means either darkening the
   mango or switching that button's text to ink — a brand decision, so it has
   been left alone and flagged instead.
   ========================================================================== */

/* Every colour that only appears in an interaction state lives here, so a
   brand tweak is a one-line change rather than a search across five files. */
:root{
  --green-hi:      #000000;   /* green button, hovered      */
  --terracotta-hi: #000000;   /* terracotta button, hovered */
  --mango-hi:      #D88F04;   /* mango button, hovered      */
  --turmeric-hi:   #D88F04;   /* turmeric button, hovered   */
  --focus-ring:    var(--turmeric);
  --ease-out:      cubic-bezier(.22,.9,.28,1);
}

/* ==========================================================================
   1. THE PRIMARY BUTTON SYSTEM
   ========================================================================== */

.btn{
  /* Colour and shadow transition everywhere; transform is added back below
     only where a real pointer exists. */
  transition:
    background-color .2s ease,
    border-color     .2s ease,
    color            .2s ease,
    box-shadow       .25s ease,
    transform        .2s var(--ease-out);
}

/* ---- solid variants: deepen, and let the shadow bloom ---- */
.btn.btn-green:hover,
.btn.btn-green:focus-visible{
  background:var(--green-hi);
  box-shadow:0 16px 30px -12px rgba(0,0,0,0.75);
}
.btn.btn-terracotta:hover,
.btn.btn-terracotta:focus-visible{
  background:var(--terracotta-hi);
  box-shadow:0 16px 30px -12px rgba(216,143,4,0.75);
}
.btn.btn-mango:hover,
.btn.btn-mango:focus-visible{
  /* Was var(--coral), which lightened the button and dropped white text to
     3.36:1. Deepening instead reaches 5.21:1. */
  background:var(--mango-hi);
  box-shadow:0 16px 30px -12px rgba(216,143,4,0.7);
}
.btn.btn-turmeric:hover,
.btn.btn-turmeric:focus-visible{
  background:var(--turmeric-hi);
  box-shadow:0 16px 30px -12px rgba(216,143,4,0.7);
}

/* ---- outline variants: fill with their own colour ---- */
.btn.btn-outline:hover,
.btn.btn-outline:focus-visible{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--cream);
  box-shadow:0 14px 26px -14px rgba(97,64,2,0.6);
}
.btn.btn-outline-cream:hover,
.btn.btn-outline-cream:focus-visible{
  background:var(--cream);
  border-color:var(--cream);
  color:var(--ink);
  box-shadow:0 14px 26px -14px rgba(0,0,0,0.45);
}

/* ---- press ---- */
.btn:active{
  transform:translateY(0) scale(0.985);
  box-shadow:0 5px 12px -8px rgba(97,64,2,0.5);
  transition-duration:.06s;
}

/* ---- keyboard ring ---- */
.btn:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
}
/* The turmeric button would lose its own ring against a turmeric outline. */
.btn.btn-turmeric:focus-visible{ outline-color:var(--ink); }

/* ==========================================================================
   2. CHIPS, PILLS AND FILTERS
   ========================================================================== */

.filter-chip,
.b2b-fopt,
.b2b-filter-btn,
.mn-chip,
.mn-act,
.loc-list button,
.inv-toggle,
.menu-btn{
  transition:
    background-color .18s ease,
    border-color     .18s ease,
    color            .18s ease,
    box-shadow       .2s ease,
    transform        .18s var(--ease-out);
}

/* Unselected chips warm up. Selected ones already carry the green fill, so
   they are left alone — a hover must never look like a selection. */
.filter-chip:not(.active):hover,
.filter-chip:not(.active):focus-visible,
.b2b-fopt[aria-pressed="false"]:hover,
.b2b-fopt[aria-pressed="false"]:focus-visible,
.loc-list button[aria-pressed="false"]:hover,
.loc-list button[aria-pressed="false"]:focus-visible{
  background:var(--cream-2);
  border-color:#F5E3C0;
  box-shadow:0 6px 14px -8px rgba(97,64,2,0.3);
}

.b2b-filter-btn:hover,
.b2b-filter-btn:focus-visible,
.menu-btn:hover,
.menu-btn:focus-visible{
  background:var(--cream-2);
  border-color:#F5E3C0;
  box-shadow:0 6px 14px -8px rgba(97,64,2,0.3);
}

.inv-toggle:hover,
.inv-toggle:focus-visible{
  background:rgba(245,227,192,0.12);
  border-color:var(--turmeric);
  color:var(--turmeric-soft);
}
.inv-toggle[aria-expanded="true"]:hover{
  background:#000000;
}

.mn-chip:hover,
.mn-chip:focus-visible{
  box-shadow:0 6px 14px -8px rgba(97,64,2,0.3);
}

.filter-chip:active,
.b2b-fopt:active,
.b2b-filter-btn:active,
.mn-chip:active,
.mn-act:active,
.loc-list button:active,
.inv-toggle:active,
.menu-btn:active{
  transform:scale(0.97);
  transition-duration:.06s;
}

/* ==========================================================================
   3. NAVIGATION
   ========================================================================== */

.navlink,
.dropdown a,
.md-link,
.md-toggle,
.md-panel a,
.mini-nav a,
.split-toggle span,
.cur-switch button,
.lang-switch button,
.why-link,
.why-inline{
  transition:
    background-color .16s ease,
    color            .16s ease,
    box-shadow       .18s ease;
}

.navlink:hover,
.dropdown a:hover,
.mini-nav a:hover{
  background:var(--cream-2);
}

/* The split toggle is the site's B2C/B2B fork — its hover should read as a
   deliberate deepening of each side, not a generic tint. */
.split-toggle .st-shop:hover{ background:var(--mango-hi); }
.split-toggle .st-biz:hover{ background:var(--green-soft); color:var(--green); }

.why-link:hover,
.why-inline:hover{ text-decoration:underline; }

/* ==========================================================================
   4. ICON BUTTONS
   ========================================================================== */

.mn-close,
.mn-send,
.modal-close,
.req-item .rx,
.req-close,
.md-close,
.b2b-search .sx{
  transition:
    background-color .18s ease,
    border-color     .18s ease,
    color            .18s ease,
    transform        .18s var(--ease-out);
}
.mn-close:active,
.mn-send:active,
.modal-close:active,
.req-item .rx:active,
.req-close:active,
.md-close:active,
.b2b-search .sx:active{
  transform:scale(0.92);
  transition-duration:.06s;
}

/* ==========================================================================
   5. FLOATING ACTIONS
   ========================================================================== */

.mn-launch:active,
.req-fab:active{
  transform:translateY(-1px) scale(0.97);
  transition-duration:.06s;
}

/* ==========================================================================
   6. CARDS THAT ARE THEMSELVES CLICKABLE
   A card people can click should say so on focus, not only on hover.
   ========================================================================== */

.pcard,
.ing-card,
.crop-card,
.job-head,
.sup{
  transition:
    transform  .25s var(--ease-out),
    box-shadow .25s ease,
    border-color .25s ease;
}
.pcard:focus-visible,
.ing-card:focus-visible,
.crop-card:focus-visible,
.job-head:focus-visible,
a.ing-card:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
}

/* ==========================================================================
   7. A VISIBLE KEYBOARD RING ON EVERYTHING ELSE CLICKABLE
   Anything interactive that has not already been given one above.
   ========================================================================== */

.filter-chip:focus-visible,
.b2b-fopt:focus-visible,
.b2b-filter-btn:focus-visible,
.loc-list button:focus-visible,
.inv-toggle:focus-visible,
.menu-btn:focus-visible,
.navlink:focus-visible,
.dropdown a:focus-visible,
.mini-nav a:focus-visible,
.split-toggle span:focus-visible,
.why-link:focus-visible,
.why-inline:focus-visible,
.j-step:focus-visible,
.modal-close:focus-visible,
.req-item .rx:focus-visible,
.req-close:focus-visible,
.b2b-search .sx:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
}

/* Keyboard focus needs to be reachable on elements the markup made clickable
   without making them focusable. */
.navlink[tabindex],
.split-toggle span{ cursor:pointer; }

/* ==========================================================================
   8. MOVEMENT — DESKTOP POINTERS ONLY
   --------------------------------------------------------------------------
   On a touchscreen :hover latches after a tap, so a lift would leave the
   button raised until the user taps elsewhere. Everything above still gives
   colour feedback on touch; only the movement is scoped here.
   ========================================================================== */

@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform:translateY(-2px); }

  .filter-chip:not(.active):hover,
  .b2b-fopt[aria-pressed="false"]:hover,
  .b2b-filter-btn:hover,
  .mn-chip:hover,
  .loc-list button[aria-pressed="false"]:hover,
  .menu-btn:hover{ transform:translateY(-1px); }

  .mn-close:hover,
  .mn-send:hover,
  .modal-close:hover,
  .req-item .rx:hover,
  .req-close:hover,
  .md-close:hover,
  .b2b-search .sx:hover{ transform:scale(1.08); }
}

/* On touch, cancel the site's existing unguarded lift so a tapped button does
   not stay raised. */
@media (hover:none){
  .btn:hover,
  .mn-launch:hover,
  .req-fab:hover,
  .pcard:hover,
  .ing-card:hover,
  .crop-card:hover,
  .sup:hover{ transform:none; }
}

/* ==========================================================================
   9. REDUCED MOTION
   The site already disables transitions globally under this setting. This
   also removes the displacement, so hover and press still change colour but
   nothing jumps.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .btn:hover, .btn:active,
  .filter-chip:hover, .filter-chip:active,
  .b2b-fopt:hover, .b2b-fopt:active,
  .b2b-filter-btn:hover, .b2b-filter-btn:active,
  .mn-chip:hover, .mn-chip:active,
  .mn-act:hover, .mn-act:active,
  .loc-list button:hover, .loc-list button:active,
  .inv-toggle:active, .menu-btn:hover, .menu-btn:active,
  .mn-close:hover, .mn-close:active,
  .mn-send:hover, .mn-send:active,
  .modal-close:hover, .modal-close:active,
  .req-item .rx:hover, .req-item .rx:active,
  .req-close:hover, .req-close:active,
  .md-close:hover, .md-close:active,
  .b2b-search .sx:hover, .b2b-search .sx:active,
  .mn-launch:hover, .mn-launch:active,
  .req-fab:hover, .req-fab:active,
  .pcard:hover, .ing-card:hover, .crop-card:hover, .sup:hover{
    transform:none;
  }
}

/* ==========================================================================
   9. GAPS FOUND IN THE POLISH AUDIT
   Both of these are focusable and were reachable by keyboard with no visible
   focus state at all, which is the one accessibility failure a keyboard user
   cannot work around.
   ========================================================================== */

/* Footer social icons. */
.soc:focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:3px;
  border-radius:8px;
}

/* The "see the full sourcing detail" control on a hub card. It is a <span>
   acting as a link so it can use the site's own [data-nav] router, which
   means it gets none of the browser's default focus treatment for free. */
.sm-more:focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:3px;
}

/* ==========================================================================
   10. SIZE CONSISTENCY
   Two small fixes found by measuring the rendered page rather than reading
   the stylesheet.
   ========================================================================== */

/* THE BUTTON HEIGHT FIX.
   Every .btn shares one padding and one font size, yet they rendered at 44px
   and 46px across the site (and .btn-sm at 33, 35 and 37px). Two causes,
   measured rather than guessed:

   1. `line-height: normal` resolves against whichever font actually painted
      the label, so a button that fell back to a system font came out a
      couple of pixels taller than its neighbour.

   2. Outline buttons carry a 1.5px border and solid ones carry none, so an
      outline button is inherently ~3px taller. Put the two side by side in a
      flex row and the solid one STRETCHES to match, which is why the same
      .btn-mango measured 43.5px in one row and 45.5px in another.

   Pinning the line-height fixes the first. A min-height fixes the second and
   the stretching at once: border-box means the outline button's border is
   already inside the number, so both variants land on exactly the same
   height and a flex row has nothing left to stretch. */
.btn{ line-height:1.2; min-height:46px; }
.btn.btn-sm{ min-height:35px; }

/* TOUCH TARGETS.
   Gated on a coarse pointer, so a mouse still gets the compact controls the
   design intends and only touch devices get the larger hit area. Measured on
   a 375px render: the menu button was 34px tall, .btn-sm 35px, and the card
   links 15px, all below the 44px minimum. */
@media (pointer: coarse){
  /* .btn.btn-sm, not .btn-sm: the 35px rule above is a two-class selector,
     so a single-class override here would silently lose the cascade and do
     nothing at all. */
  .btn.btn-sm{ min-height:44px; }
  .menu-btn{ min-height:44px; }

  /* Card call-to-action links measured 15px tall. Padding got them to 37px
     and pushed the card layout around; this instead lays an invisible 44px
     strip over the link, so the tap target is compliant and nothing on the
     page moves by a pixel. */
  .why-link,
  .why-inline{ position:relative; }

  .why-link::after,
  .why-inline::after{
    content:"";
    position:absolute;
    left:0; right:0; top:50%;
    height:44px;
    transform:translateY(-50%);
  }
}