/* The Beef Advocate — static replica overrides (loaded after the captured Wix styles). */

/* ---- one scaling rule for the whole site ----
   Everything (layout and text) scales with the viewport width up to --site-max-width, then the content stops
   growing and is centred (section backgrounds stay full-bleed). Change this one value to tune the cap;
   e.g. 1280px reproduces the original design size on every screen, 99999px scales forever. */
:root {
  --site-max-width: 1920px;   /* content stops growing and is centred above this */
  --min-font-size: 11px;      /* no text is ever rendered smaller than this */
  /* The scale everything follows (text, spacing, boxes; Wix's own spacing unit is pointed at it too).
     Desktop (>1000px): the 1280px design, never below 90% (floor 1150px), capped at --site-max-width.
     Tablet (751-1000px): designed at 820px (iPad size); shrinks below 820, holds above it.
     Phone (<=750px): the 390px design, growing up to 480px and holding beyond. */
  --fluid-scale: clamp(1150px, 100vw, var(--site-max-width));
  --fluid-ratio: calc(var(--fluid-scale) / 1280);
}
@media (min-width: 751px) and (max-width: 1000px) { :root { --fluid-scale: min(calc(100vw * 1000 / 820), 1000px); } }
@media (max-width: 750px) { :root { --fluid-scale: min(100vw, 480px); } }

/* Sections that had no "max width" set in Wix (hero, purpose, header, footer) have no cap at all, so above the
   design width they kept growing while the capped sections stopped. Every section gets the same cap and centring:
   build.js marks each section that has a content container ("fluid-host") and the cap is applied as side padding on
   the SECTION, so its background stays full-bleed while its content box is never wider than --site-max-width.
   (It has to be the section, not a max-width on the container: Wix gives several containers a side padding in %,
   e.g. 4.4% in the header, and a percentage is measured against the parent. With the cap on the container that padding
   kept growing with the window above the cap and squeezed the logo and nav links together.) */
/* build.js wraps the two sections that were their own grid container; the wrapper must fill the section's minimum
   height exactly like the section used to, so its grid rows stretch the same way */
[data-fluid-wrapped] { min-height: inherit; box-sizing: border-box; }

@media (min-width: 1001px) {
  section.fluid-host {
    padding-left: max(0px, (100% - var(--site-max-width)) / 2);
    padding-right: max(0px, (100% - var(--site-max-width)) / 2);
  }
}

/* ---- header: one scale for logo, links and button over the whole desktop range ----
   The 1150px floor above stops body text from getting too small, but in the header it froze the link text and the
   button while the logo and the gaps (which Wix sizes in % of the width) kept shrinking, so between 1001 and 1150px
   the links were squeezed against the button. The header has no body text, so it follows the real width instead and
   stays an exact scaled copy of the 1280px design (link text still never goes below --min-font-size). */
@media (min-width: 1001px) {
  header {
    --fluid-scale: min(100vw, var(--site-max-width));
    --fluid-ratio: calc(var(--fluid-scale) / 1280);
    --scaling-factor: var(--fluid-scale);
  }
}

/* ---- home hero: the headline block and the seal stay in line at every window height ----
   Wix made the hero 73% of the window HEIGHT, pinned the headline block to its bottom edge and the seal to its top
   edge, so the two slid apart whenever the window got taller (everything else on the site follows the WIDTH).
   Both now hang off the same anchor, the hero's centre line, each at a fixed distance from it, so they move as one
   piece. The distances reproduce the original look in a 3:2 window (1280 x 854, where the hero is 625 design px
   tall: seal centre level with the "Integrity in Beef." line), which is the reference the owner picked:
     headline margin-top 71.6  = (625 - 481.8) / 2, 481.8 being the hero's content-minimum height in design px;
                                 top + bottom margin = Wix's old bottom margin, so that minimum height is unchanged
     seal margin 77.08         = (625 - 470.84) / 2 in the seal column's own px (Wix draws that column at 80%,
                                 so it shows as 61.7 design px); top + bottom = 0
   The hero also stops growing at that 625 design-px height, so a taller window shows exactly the reference picture
   instead of the pair floating in an ever taller empty hero; shorter windows still shrink the hero to fit.
   Redo the three numbers if the hero is re-captured with different content. */
@media (min-width: 1001px) {
  section#comp-kbgaghri { min-height: min(73.2177vh, calc(625 * var(--fluid-ratio))); }
  #comp-kbgaghri #comp-mjwk21gn {   /* headline block (Wix: align-self end, 64.27 design px under it) */
    align-self: center;
    margin-top: calc(71.6 * var(--fluid-ratio));
    margin-bottom: calc(0.0502144 * var(--fluid-scale) - 71.6 * var(--fluid-ratio));
  }
  #comp-kbgaghri #comp-mjr57tsm {   /* seal (Wix: align-self start, 20.42 design px over it) */
    align-self: center;
    margin-top: calc(-77.08 * var(--fluid-ratio));
    margin-bottom: calc(77.08 * var(--fluid-ratio));
  }
}

/* ---- /application: the fee text stays with the rest of the section ----
   Same cause: this section was 171% of the window HEIGHT with its rows split by percentage, so on a tall window the
   "CERTIFICATION FEE" block slid hundreds of px away from the intro text and the form. The section is now as tall as
   its content (which is what it already was in a short window). */
@media (min-width: 1001px) {
  section#comp-mjh73ezv { min-height: 0; }
}

/* ---- /application: the form sits in the middle of its column ----
   Wix pinned the form widget to the top of the right-hand column (32 design px below the section's top edge), so it
   looked crammed against the top while the column is as tall as the fee text on the left. Centre it vertically. */
@media (min-width: 1001px) {
  #comp-mjh73ezv #comp-mjn0ttke { align-self: center; margin-top: 0; margin-bottom: 0; }
}

/* ---- /application: the hairline under the header never disappears ----
   The line is the section's dark background showing through a 0.64 design-px slit above the content. A slit thinner
   than one screen pixel is only drawn when it happens to land on a pixel boundary, so the line came and went while
   the window was resized (it was missing at 1366 and 1536px wide, for example). It is now at least one pixel. */
@media (min-width: 1001px) {
  #comp-mjh73ewf .comp-mjh73ewf-container.fluid-cap { padding-top: max(1px, calc(0.64 * var(--fluid-ratio))); }
}

/* Component-library CSS (not per-site) keeps a fixed 16px vertical padding on accordion headers; scale it like
   everything else so the FAQ rows keep their proportions. */
@media (min-width: 1001px) { .wixui-accordion__item button.wixui-accordion__header, .wixui-accordion__item > div > button { padding-top: calc(16 * var(--fluid-ratio)); padding-bottom: calc(16 * var(--fluid-ratio)); } }
@media (min-width: 751px) and (max-width: 1000px) { .wixui-accordion__item > div > button { padding-top: calc(16 / 1000 * var(--fluid-scale)); padding-bottom: calc(16 / 1000 * var(--fluid-scale)); } }
@media (max-width: 750px) { .wixui-accordion__item > div > button { padding-top: calc(16 / 390 * var(--fluid-scale)); padding-bottom: calc(16 / 390 * var(--fluid-scale)); } }

/* Inherited Wix bug: in the tablet range (751-1000px) the header showed the 4-link horizontal menu AND the
   hamburger (which holds all 8 links) on top of each other. Keep the hamburger, hide the overlapping menu. */
@media (min-width: 751px) and (max-width: 1000px) {
  header nav.wixui-horizontal-menu { display: none !important; }
}

/* entrance animations: hidden until the element scrolls into view (site.js flips to "done") */
[data-motion-enter="pending"] { opacity: 0; }
html:not([data-static-ready]) [data-motion-enter="pending"] { opacity: 0; }

/* form feedback (the Wix runtime used to render these) */
.static-form-error { color: rgb(var(--wix-forms-formInputErrorColor, 223, 49, 49)); font: inherit; font-size: 13px; line-height: 1.4; margin-top: 6px; }
/* success panel shown in place of the form (typeface, colour and base size are copied from the form by site.js) */
.static-form-success { padding: 0.4em 0 1em; text-align: left; line-height: 1.6; }
.static-form-success__title { font: inherit; font-size: 1.55em; line-height: 1.3; margin: 0 0 0.8em; }
.static-form-success p { font: inherit; margin: 0 0 0.9em; max-width: 36em; }
.static-form-success p:last-child { margin-bottom: 0; }
form[data-static-form] [data-hook^="field-error"]:empty { display: none; }
.static-form-failure { color: rgb(var(--wix-forms-formInputErrorColor, 223, 49, 49)); font: inherit; font-size: 14px; line-height: 1.5; margin-top: 12px; text-align: center; }
.static-form-failure[hidden] { display: none; }
/* honeypot field: off-screen for people and assistive tech, still present in the DOM for bots */
.static-form-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* keep native scrollbar behaviour identical to the original while the hamburger overlay is open */
html.menu-open, html.menu-open body { overscroll-behavior: contain; }

/* privacy line above the form's submit button (added by site.js) */
.static-form-privacy { font: inherit; font-size: 12px; line-height: 1.5; color: inherit; margin: 0 0 14px; text-align: center; }
.static-form-privacy a { color: inherit; text-decoration: underline; }