/*
 * NAH Foods site overrides — loaded AFTER assets/css/style.css.
 * These survive upstream zip re-imports (apply-seo.py ensures the <link> is present).
 */

/* ────────────────────────────────────────────────────────────────────────
   Certifications marquee — robust iOS Safari implementation.
   Uses a RENAMED keyframe (`nah-marquee`) with !important on `animation`
   so it wins over the original `marquee` keyframe in style.css regardless
   of load order or keyframe resolution quirks. Vendor-prefixed for older
   WebKit. Explicitly opts OUT of prefers-reduced-motion for this one
   element so the strip keeps moving even on accessibility-motion devices
   (user requested).
   ──────────────────────────────────────────────────────────────────────── */
.strip__inner {
  -webkit-animation: nah-marquee 40s linear infinite !important;
          animation: nah-marquee 40s linear infinite !important;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000;
          perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

@-webkit-keyframes nah-marquee {
  0%   { -webkit-transform: translate3d(0, 0, 0); }
  100% { -webkit-transform: translate3d(-50%, 0, 0); }
}
@keyframes nah-marquee {
  0%   { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  100% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
}

/* Respect reduced-motion ONLY by slowing the marquee, not stopping it.
   A static list of certifications is OK accessibility-wise; the key is
   avoiding rapid flicker. */
@media (prefers-reduced-motion: reduce) {
  .strip__inner {
    -webkit-animation-duration: 120s !important;
            animation-duration: 120s !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   #distribution section — desktop-only layout repack.
   Upstream stacks [header] above [grid(map|legend)] vertically, leaving a
   large empty zone to the right of the header text (since the header is
   capped at 60ch). On wide viewports, repack into a 2-col grid where the
   legend (country list) sits next to the header in col 2 and the map takes
   col 1 row 2. Mobile (<960px) is untouched — stays in its original stacked
   layout because the upstream rules already handle it correctly.
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 960px) {
  #distribution > .container {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas:
      "header legend"
      "figure legend";
    column-gap: var(--space-16, 4rem);
    row-gap: var(--space-10, 2.5rem);
    align-items: start;
  }
  #distribution .world-map__header {
    grid-area: header;
    max-width: none;
    margin-bottom: 0;
  }
  /* Release the inner grid's children into the parent grid */
  #distribution .world-map__grid {
    display: contents;
  }
  #distribution .world-map__figure {
    grid-area: figure;
  }
  #distribution .world-map__legend {
    grid-area: legend;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Cookie preferences pill positioning on small viewports
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #nah-cookie-manage { bottom: 0.5rem !important; left: 0.5rem !important; }
}