/*
Theme Name: Feed Bridge Global
Theme URI: https://feedbridgeglobal.com
Author: Feed Bridge Global
Description: Bespoke theme for Feed Bridge Global, a feed ingredient sourcing company. Built on the Specification Sheet design direction.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: feedbridge
*/

/* ---------- fonts ---------- */
@font-face{font-family:"Newsreader";src:url("assets/fonts/newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("assets/fonts/newsreader-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("assets/fonts/plexsans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("assets/fonts/plexsans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("assets/fonts/plexmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("assets/fonts/plexmono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --bg:#FBFAF7;
  --surface:#E8E2D5;
  --surface-deep:#D6CDBA;
  --ink:#10221B;
  --ink-soft:#1B3329;
  --accent:#C8871B;
  --accent-deep:#A66D0F;
  --moss:#3D6B4F;
  --slate:#5A6560;
  --line:rgba(16,34,27,.14);
  --line-strong:rgba(16,34,27,.28);

  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-body:"Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-data:"Plex Mono",ui-monospace,Menlo,monospace;

  --radius-sm:2px;
  --radius-md:3px;

  --sp-sm:9px;
  --sp-md:22px;
  --sp-lg:48px;
  --sp-xl:96px;

  --wrap:1180px;
  --gut:clamp(20px,5vw,64px);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

:where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol){margin:0;padding:0}
:where(ul,ol){list-style:none}
:where(img,svg,video){max-width:100%;display:block}
:where(button,input,select,textarea){font:inherit;color:inherit}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--ink);text-decoration:none}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.12;letter-spacing:-.014em}
h1{font-size:clamp(2.35rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.7rem)}
h3{font-size:clamp(1.18rem,2vw,1.48rem)}

p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.lede{font-size:clamp(1.04rem,1.65vw,1.22rem);line-height:1.58;color:var(--slate);max-width:60ch}
.measure{max-width:66ch}
.measure p{font-size:16.5px;line-height:1.68}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:12px;z-index:200;background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:var(--radius-sm)}

/* ---------- masthead ---------- */
.masthead{position:sticky;top:0;z-index:100;background:rgba(251,250,247,.94);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
.admin-bar .masthead{top:32px}
@media(max-width:782px){.admin-bar .masthead{top:46px}}
.masthead-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}

.mark{display:flex;align-items:center;gap:11px;flex-shrink:0}
.mark svg{width:30px;height:30px;flex-shrink:0}
.mark-txt{display:flex;flex-direction:column;line-height:1}
.mark-a{font-family:var(--font-display);font-size:20px;letter-spacing:-.02em}
.mark-b{font-size:9.5px;letter-spacing:.24em;color:var(--slate);margin-top:3px;font-weight:500}

.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:14.5px;color:var(--slate);font-weight:400;padding:4px 0;border-bottom:1.5px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"],.nav li.current-menu-item>a{color:var(--ink);border-bottom-color:var(--accent)}
.nav-cta{background:var(--ink);color:var(--bg)!important;padding:10px 20px!important;border-radius:var(--radius-sm);font-weight:500;border:none!important}
.nav-cta:hover{background:var(--ink-soft)}

.burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:8px 11px;cursor:pointer;color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:15px;font-weight:500;padding:14px 28px;border-radius:var(--radius-sm);border:1.5px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer;transition:background .15s ease,color .15s ease}
.btn:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-line{background:transparent;border-color:rgba(251,250,247,.4);color:var(--bg)}
.btn-line:hover{background:rgba(251,250,247,.12);border-color:var(--bg)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,7vw,92px) 0 clamp(46px,6vw,80px);border-bottom:1px solid var(--line)}
.hero-grid{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,6vw,80px);align-items:center}
.hero h1{margin-bottom:var(--sp-md)}
.hero .lede{margin-bottom:30px}
.hero-trust{margin-top:34px;padding-top:var(--sp-md);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:9px 22px;font-size:13px;color:var(--slate)}
.hero-trust span{display:flex;align-items:center;gap:8px}
.hero-trust svg{width:15px;height:15px;color:var(--moss);flex-shrink:0}

/* ---------- spec panel ---------- */
.spec-panel{background:var(--ink);color:var(--bg);border-radius:var(--radius-md);padding:clamp(24px,3vw,34px);box-shadow:0 26px 60px -32px rgba(16,34,27,.6)}
.spec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid rgba(251,250,247,.2)}
.spec-doc{font-family:var(--font-data);font-size:10.5px;letter-spacing:.13em;color:rgba(251,250,247,.5)}
.spec-name{font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,1.62rem);margin:14px 0 2px;line-height:1.15}
.spec-cat{font-size:12.5px;color:rgba(251,250,247,.58);margin-bottom:20px}
.spec-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px solid rgba(251,250,247,.1);font-size:14px}
.spec-rows li:last-child{border-bottom:none}
.spec-rows .k{color:rgba(251,250,247,.66)}
.spec-rows .v{font-family:var(--font-data);font-size:14.5px;color:var(--accent);font-variant-numeric:tabular-nums}
.spec-body{transition:opacity .34s ease}
.spec-body.fading{opacity:0}
.spec-dots{display:flex;gap:7px;margin-top:var(--sp-md);padding-top:18px;border-top:1px solid rgba(251,250,247,.2)}
.spec-dots button{width:26px;height:3px;padding:0;border:none;border-radius:var(--radius-sm);cursor:pointer;background:rgba(251,250,247,.24);transition:background .2s ease}
.spec-dots button[aria-selected="true"]{background:var(--accent)}
.spec-dots button:hover{background:rgba(251,250,247,.5)}

/* ---------- sections ---------- */
.sec{padding:clamp(54px,7.5vw,var(--sp-xl)) 0}
.sec-dark{background:var(--ink);color:var(--bg)}
.sec-dark h2,.sec-dark h3{color:var(--bg)}
.sec-dark .lede{color:rgba(251,250,247,.7)}
.sec-surface{background:var(--surface)}
.sec-line{border-top:1px solid var(--line)}
.sec-head{max-width:64ch;margin-bottom:clamp(32px,4.5vw,54px)}
.sec-head h2{margin-bottom:16px}
.sec-head h1{margin-bottom:18px}

/* ---------- protein ladder ---------- */
.rung{display:grid;grid-template-columns:minmax(170px,280px) 1fr auto;gap:clamp(14px,2.5vw,28px);align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.rung:first-child{border-top:1px solid var(--line)}
.rung-name{font-size:15px}
.rung-name a:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.rung-name small{display:block;font-size:12.5px;color:var(--slate);margin-top:2px}
.rung-track{height:9px;background:var(--surface);border-radius:1px;overflow:hidden;min-width:60px}
.rung-fill{height:100%;background:var(--moss);border-radius:1px}
.rung-fill.hi{background:var(--accent)}
.rung-val{font-family:var(--font-data);font-size:15px;font-variant-numeric:tabular-nums;min-width:58px;text-align:right}

/* ---------- bordered grids ---------- */
.gridset{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cell{padding:26px 24px 28px;display:flex;flex-direction:column;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cell-wide{grid-column:1/-1}
.cell-wide p{max-width:56ch}
.cell-wide ul{columns:3;column-gap:36px}
.cell-n{font-family:var(--font-data);font-size:12px;color:var(--accent-deep);font-variant-numeric:tabular-nums;margin-bottom:14px}
.cell h3{font-size:1.13rem;margin-bottom:9px}
.cell p{font-size:14px;color:var(--slate);line-height:1.55;margin-bottom:16px}
.cell ul{font-size:13.5px;color:var(--slate)}
.cell li{padding:3px 0}
.sec-dark .cell{border-color:rgba(251,250,247,.18)}
.sec-dark .gridset{border-color:rgba(251,250,247,.18)}
.sec-dark .cell p,.sec-dark .cell ul{color:rgba(251,250,247,.72)}
@media(max-width:700px){.cell-wide ul{columns:1}}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(24px,3.5vw,44px)}
.step{padding-top:var(--sp-md);border-top:2px solid var(--accent)}
.step h3{font-size:1.08rem;margin-bottom:9px}
.step p{font-size:14.5px;line-height:1.56;color:rgba(251,250,247,.72)}

/* ---------- terms ---------- */
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.term{padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.term dt{font-size:12.5px;color:var(--slate);margin-bottom:7px}
.term dd{font-family:var(--font-display);font-size:1.28rem}

/* ---------- tables ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:14.5px}
table.data caption{text-align:left;font-size:13.5px;color:var(--slate);padding-bottom:12px}
table.data th{text-align:left;font-weight:500;font-size:12.5px;color:var(--slate);padding:10px 16px 10px 0;border-bottom:1.5px solid var(--line-strong);white-space:nowrap}
table.data td{padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.data tbody tr:hover{background:rgba(232,226,213,.42)}
table.data .num{font-family:var(--font-data);font-variant-numeric:tabular-nums;white-space:nowrap}
table.data .measured{color:var(--accent-deep)}
.tag{display:inline-block;font-size:11.5px;padding:3px 9px;border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-soft);white-space:nowrap}
.muted{color:var(--slate);font-size:13px}
.no-hits{padding:30px 0;color:var(--slate);font-size:15px}
.no-hits a,.inline-link{border-bottom:1px solid var(--line-strong)}
.inline-link:hover{color:var(--accent-deep);border-bottom-color:var(--accent)}

/* ---------- filters ---------- */
.cat-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{font-size:13.5px;padding:8px 16px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:transparent;color:var(--slate);cursor:pointer}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ---------- product cards ---------- */
.prodcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.prodcard{padding:22px;display:block;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.prodcard:hover{background:var(--surface)}
.sec-surface .prodcard:hover{background:var(--surface-deep)}
.prodcard .np-cp{font-family:var(--font-data);font-size:12px;color:var(--accent-deep);margin-bottom:9px}
.prodcard h3{font-size:1.04rem;margin-bottom:6px}
.prodcard p{font-size:13.5px;color:var(--slate);line-height:1.5}

/* ---------- product page ---------- */
.crumbs{font-size:13px;color:var(--slate);padding:var(--sp-md) 0 0}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.prod-head{padding:26px 0 clamp(38px,5vw,58px);border-bottom:1px solid var(--line)}
.prod-head h1{font-size:clamp(1.95rem,4.2vw,3.05rem);margin:10px 0 20px}
.prod-kicker{font-size:13px;color:var(--accent-deep);letter-spacing:.06em}
.prod-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(34px,5vw,66px);align-items:start;padding-top:clamp(36px,5vw,56px)}
.prod-body h2{font-size:clamp(1.38rem,2.3vw,1.8rem);margin:44px 0 16px}
.prod-body h2:first-child{margin-top:0}
.prod-body p,.prod-body li{font-size:16px;line-height:1.68}
.prod-body ul{padding-left:20px;margin:0 0 1.05em;list-style:disc}
.prod-body li{margin-bottom:7px}
.aside{position:sticky;top:100px}
.aside-card{border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:24px;background:var(--bg)}
.aside-card h3{font-size:1.1rem;margin-bottom:14px}
.aside-card>p{font-size:14px;color:var(--slate);margin-bottom:18px}
.aside dl div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.aside dl{margin-bottom:20px}
.aside dt{color:var(--slate)}
.aside dd{font-family:var(--font-data);font-size:13.5px;text-align:right}
.aside .btn{width:100%}

/* ---------- form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:500}
.field label .opt{color:var(--slate);font-weight:400}
.field input,.field select,.field textarea{font-size:15px;color:var(--ink);padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg);width:100%}
.field textarea{min-height:130px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field ::placeholder{color:var(--slate);opacity:1}
.form-note{font-size:13px;color:var(--slate);margin-top:16px}
.form-note.is-error{color:var(--accent-deep)}
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,70px);align-items:start}
.contact-card{background:var(--surface);padding:clamp(24px,3vw,34px);border-radius:var(--radius-md)}
.contact-card h3{margin-bottom:16px}
.contact-card dl div{padding:12px 0;border-bottom:1px solid var(--surface-deep)}
.contact-card dl div:last-child{border-bottom:none}
.contact-card dt{font-size:12.5px;color:var(--slate);margin-bottom:3px}
.contact-card dd{font-size:15px}
.contact-card a{border-bottom:1px solid var(--line-strong)}
.contact-card a:hover{border-bottom-color:var(--accent);color:var(--accent-deep)}

/* ---------- cta ---------- */
.cta-band{background:var(--ink);color:var(--bg);padding:clamp(50px,6.5vw,84px) 0;text-align:center}
.cta-band h2{color:var(--bg);margin-bottom:16px}
.cta-band p{color:rgba(251,250,247,.7);max-width:54ch;margin:0 auto 28px}
.cta-band .btn-row{justify-content:center}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;padding:18px 0;font-size:16.5px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-data);font-size:20px;color:var(--accent-deep);flex-shrink:0}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 0 20px;color:var(--slate);font-size:15.5px;max-width:72ch}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:rgba(251,250,247,.62);padding:clamp(42px,5.5vw,68px) 0 34px;font-size:14px}
.foot a{color:rgba(251,250,247,.62)}
.foot a:hover{color:var(--accent)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:clamp(24px,4vw,48px)}
.foot .mark-a{color:var(--bg)}
.foot .mark-b{color:rgba(251,250,247,.5)}
.foot h4{font-family:var(--font-body);font-size:12.5px;font-weight:500;color:var(--bg);margin:0 0 14px}
.foot li{padding:5px 0}
.foot-blurb{margin-top:18px;max-width:34ch;line-height:1.6;font-size:13.5px}
.foot-base{margin-top:clamp(32px,4.5vw,52px);padding-top:var(--sp-md);border-top:1px solid rgba(251,250,247,.16);display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:13px}

/* ---------- editor content ---------- */
.entry p{font-size:16.5px;line-height:1.68;margin-bottom:1.05em}
.entry h2{margin:40px 0 14px}
.entry h3{margin:32px 0 12px}
.entry ul{list-style:disc;padding-left:20px;margin-bottom:1.05em}
.entry li{margin-bottom:6px}
.entry a{border-bottom:1px solid var(--line-strong)}

/* ---------- responsive ---------- */
@media(max-width:940px){
  .hero-grid,.prod-grid,.contact-grid,.foot-grid{grid-template-columns:1fr}
  .foot-grid{gap:34px}
  .aside{position:static}
  .prod-grid{gap:44px}
}
@media(max-width:760px){
  body{font-size:16.5px}
  .nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 20px}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{border-bottom-color:var(--line)}
  .nav-cta{text-align:center;margin-top:14px;padding:13px 20px!important}
  .burger{display:block}
  .form-grid{grid-template-columns:1fr}
  .rung{grid-template-columns:1fr auto;row-gap:9px}
  .rung-track{grid-column:1/-1;order:3}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

@media print{
  .masthead,.foot,.cta-band,.burger,.aside{display:none}
  body{background:#fff}
}

/* ---------- hero band ---------- */
.hero-band{position:relative;width:100%;background:var(--ink);overflow:hidden;border-bottom:1px solid var(--line)}
.hero-band img{width:100%;height:clamp(170px,26vw,300px);object-fit:cover;object-position:center 58%;display:block}
.hero-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(16,34,27,.42) 0%,rgba(16,34,27,.10) 38%,rgba(16,34,27,.30) 100%)}
@media(max-width:760px){.hero-band img{height:150px}}

/* ---------- floating WhatsApp ---------- */
.wa-float{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:120;display:inline-flex;align-items:center;gap:0;overflow:hidden;height:56px;padding:0 16px;border-radius:28px;background:var(--ink);color:var(--bg);border:1.5px solid var(--ink);box-shadow:0 12px 30px -12px rgba(16,34,27,.55);transition:background .15s ease,gap .2s ease,padding .2s ease}
.wa-float svg{width:26px;height:26px;flex-shrink:0}
.wa-label{max-width:0;opacity:0;white-space:nowrap;font-size:14.5px;font-weight:500;transition:max-width .22s ease,opacity .18s ease,margin-left .22s ease}
.wa-float:hover,.wa-float:focus-visible{background:var(--ink-soft)}
.wa-float:hover .wa-label,.wa-float:focus-visible .wa-label{max-width:110px;opacity:1;margin-left:10px}
@media(max-width:760px){.wa-float{height:52px;padding:0 13px}.wa-float svg{width:24px;height:24px}.wa-float:hover .wa-label{max-width:0;opacity:0;margin-left:0}}
@media print{.wa-float{display:none}}
@media(prefers-reduced-motion:reduce){.wa-float,.wa-label{transition:none}}