/* ============================================================
   meatindustry.css
   This site's layer over the copied design system, loaded LAST.
   1. Brand: the copied tokens are re-pointed at the Meat Industry red.
   2. Two small rule sets the site needs but whose source files were
      not copied (buttons from forms.css, section head from panel.css).
   3. Site additions: logo lockup, category chips, pagination,
      small archived images, footer brand column.
   The copied files stay unchanged apart from comment wording, so they
   can still be compared with their source.
   ============================================================ */

/* ---- 1. brand ------------------------------------------------
   Logo red #ED1C24, measured from the archived logomi.png (the
   colour of 19.5% of its pixels; every other red pixel is edge
   anti-aliasing). On white it is 4.38:1, under WCAG AA 4.5:1 for
   body-size text, so text, links and button grounds use the darker
   step (5.86:1 on white, 5.33:1 on the page grey). The logo red
   itself is for the logo, rules and fills.

   Token names are the source's. --rfi-navy was "brand, selected
   state" and --rfi-teal "every hover, every primary button"; here
   both jobs go to the reds, so the site has one accent, not three. */
:root {
  --mi-red:          #ED1C24;   /* logo red: logo, rules, fills */
  --mi-red-text:     #C8151D;   /* the same red at AA contrast: links, active state, buttons */
  --mi-red-deep:     #A30F17;   /* hover on red text and buttons */
  --mi-red-tint:     #FDF1F1;   /* a pale red ground */

  --rfi-navy:        var(--mi-red-text);
  --rfi-navy-dark:   var(--mi-red-deep);
  --rfi-navy-tint:   var(--mi-red-tint);
  --rfi-teal:        var(--mi-red-text);
  --rfi-teal-dark:   var(--mi-red-deep);
  --rfi-orange:      var(--mi-red);
  --rfi-orange-text: var(--mi-red-text);

  --rfi-footer:      #26282D;   /* neutral charcoal: the source's navy-grey reads blue next to red */

  --rfi-brandfill-bg:   var(--mi-red-tint);
  --rfi-brandfill-mark: var(--mi-red);
  --rfi-brandfill-ink:  .22;
}

/* Hover is the deeper red on anything that was teal-on-hover in the source. */
.rfi-card:hover .rfi-card__title,
.rfi-hero__big:hover .rfi-hero__title,
.rfi-stack__row:hover .rfi-stack__tt,
.rfi-crumbs a:hover,
.rfi-masthead__nav > a:hover,
.rfi-article__body a:hover,
.rfi-tag:hover { color: var(--mi-red-deep); }
.rfi-tag:hover { border-color: var(--mi-red-deep); }

/* ---- 2a. buttons (copied from the source components/forms.css) ---- */
.rfi-btn {
  height: 42px; padding: 0 24px; background: var(--rfi-teal); color: var(--rfi-inverse); border: 0;
  border-radius: var(--rfi-radius); font-family: var(--rfi-font-ui); font-size: 14px; font-weight: 500;
  white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
}
.rfi-btn:hover { background: var(--rfi-teal-dark); }
.rfi-btn--secondary { background: var(--rfi-surface); border: 1px solid var(--rfi-border); color: var(--rfi-navy); padding: 0 22px; }
.rfi-btn--secondary:hover { background: var(--rfi-surface); border-color: var(--rfi-teal); color: var(--rfi-teal-dark); }

/* ---- 2b. section head (copied from the source components/panel.css) ---- */
.rfi-section-head { display: flex; align-items: baseline; gap: 12px; }
.rfi-section-head__hint { font-size: var(--rfi-meta); color: var(--rfi-text-3); }
.rfi-section-head__arrow { margin-left: auto; font-family: var(--rfi-font-ui); font-size: 13px; font-weight: 500; color: var(--rfi-teal); }
.rfi-section-head__arrow:hover { text-decoration: underline; color: var(--mi-red-deep); }

/* ---- 3a. masthead: logo lockup and a two-section bar ---------
   The traced logo is 2.825:1. 46px tall in the 74px bar keeps the
   lockup legible ("industry" is the small line) without crowding. */
.mi-masthead .rfi-masthead__mark { height: 46px; width: 130px; color: var(--mi-red); } /* 46 x 2.825 */
.rfi-masthead__burger { -webkit-tap-highlight-color: transparent; }
.mi-masthead .rfi-masthead__navcb:checked ~ .rfi-masthead__plate .rfi-masthead__burger { background: var(--mi-red-tint); border-radius: var(--rfi-radius-sm); }
.mi-masthead .rfi-masthead__home { display: block; }
.mi-masthead .rfi-masthead__burger span { background: var(--rfi-text); }
.rfi-masthead__burger:focus-visible { outline: 2px solid var(--mi-red-text); outline-offset: 2px; }

/* Desktop and tablet (above 768px): News and Insights sit directly after the logo, on the left
   (decision 24). The gap from the logo to the first item is the bar's own 24px flex gap, the
   same as the 24px between the items; the bar centres both on the logo. The copied masthead.css
   folds the nav behind a burger from 769 to 1180px (its "case 2"); two short items fit easily at
   769px, so this cancels that panel and hides the burger there. Mobile (<= 768px) is untouched. */
@media (min-width: 768.02px) {
  .mi-masthead .rfi-masthead__nav,
  .mi-masthead .rfi-masthead__navcb:checked ~ .rfi-masthead__nav {
    display: flex; flex-direction: row; align-items: center; gap: 24px; margin: 0;
    position: static; width: auto; padding: 0; background: none; box-shadow: none; border-radius: 0;
  }
  .mi-masthead .rfi-masthead__nav > a { padding: 0; border-radius: 0; white-space: nowrap; }
  .mi-masthead .rfi-masthead__nav > a:hover,
  .mi-masthead .rfi-masthead__nav > a.is-active { background: none; }
  .mi-masthead .rfi-masthead__burger { display: none; }
}

@media (max-width: 768px) {
  .mi-masthead .rfi-masthead__mark { height: 40px; width: 113px; }
  .mi-masthead .rfi-masthead__plate { padding: 8px 8px 8px 14px; }
  .mi-masthead .rfi-masthead__burger { cursor: pointer; }
  .mi-masthead .rfi-masthead__strip a.is-active { background: var(--mi-red-text); border-color: var(--mi-red-text); }
}

/* ---- 3b. category chips (listing pages and home) ------------- */
.mi-catnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.mi-catnav .rfi-tag { background: var(--rfi-surface); font-family: var(--rfi-font-ui); font-size: 13.5px; font-weight: 500; padding: 6px 13px; }
.mi-catnav .rfi-tag.is-active { background: var(--mi-red-text); border-color: var(--mi-red-text); color: var(--rfi-inverse); }
.mi-catnav__n { color: var(--rfi-text-3); font-weight: 400; margin-left: 2px; }
.mi-catnav .rfi-tag.is-active .mi-catnav__n { color: rgba(255,255,255,.8); }
.rfi-section .mi-catnav { margin-bottom: 0; }

/* ---- 3c. pagination (inside the copied .rfi-loadmore block) ---- */
.mi-pagination > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mi-pagination .page-numbers { margin: 0; min-width: 40px; text-align: center; }
.mi-pagination .page-numbers.dots { background: none; box-shadow: none; }
.mi-pagination a.page-numbers:hover { color: var(--mi-red-deep); box-shadow: var(--rfi-shadow-up); }

/* ---- 3d. single article --------------------------------------
   Archived posts often have only a small surviving image (322 to
   1024 px). A small lead image is shown at its own size, centred,
   never stretched to the 720px column. */
.rfi-article__type:hover { color: var(--mi-red-deep); }
.mi-figure--small { text-align: center; }
.mi-figure--small img { width: auto; max-width: 100%; margin: 0 auto; }
.rfi-article__body img { height: auto; }
.rfi-article__body h4,
.rfi-article__body h5,
.rfi-article__body h6 { font-family: var(--rfi-font-ui); font-size: 17px; font-weight: 600; margin: 22px 0 8px; }
.rfi-article__body table { border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.rfi-article__body td,
.rfi-article__body th { border: 1px solid var(--rfi-border); padding: 6px 10px; }
.rfi-article__byline { padding-bottom: 0; border-bottom: 0; }
.mi-related { margin-top: var(--rfi-block-gap); }

/* ---- 3e. footer brand column --------------------------------- */
/* .rfi-footer__col a is display:block in footer.css; the logo plate must hug the logo. */
.rfi-footer__col .mi-footer__home { display: inline-block; background: var(--rfi-surface); border-radius: var(--rfi-radius-sm); padding: 8px 12px; }
.mi-footer__mark { height: 40px; width: 113px; color: var(--mi-red); } /* 40 x 2.825: an inline SVG needs both sides */
.rfi-footer__col.mi-footer__social a { display: flex; align-items: center; gap: 9px; }
.mi-footer__icon { width: 16px; height: 16px; flex: none; display: block; }
.mi-footer__tagline { font-size: 13px; line-height: 1.55; color: var(--rfi-inverse-soft); margin-top: 12px; max-width: 260px; }

/* ---- 3f. skip link ------------------------------------------- */
.mi-skip:focus {
  position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto;
  background: var(--rfi-surface); color: var(--rfi-text); padding: 10px 14px; border-radius: var(--rfi-radius-sm);
  box-shadow: var(--rfi-shadow-up);
}

@media (max-width: 768px) {
  .mi-catnav { gap: 6px; }
  .mi-catnav .rfi-tag { min-height: 40px; display: inline-flex; align-items: center; }
  .mi-footer__brand { grid-column: 1 / -1; }
}