/* ==========================================================================
   Search3PL — site chrome (header + footer + base tokens)
   --------------------------------------------------------------------------
   Loaded by EVERY main-site page. New pages link it in <head>; legacy pages
   that only include header.php get it inlined by header.php itself, so the
   header and footer look identical everywhere.

   The /list marketplace mirrors these tokens in list/assets/app.css. If you
   change a colour here, change it there too.

   Design by Zaweba — https://zaweba.com
   ========================================================================== */

@font-face{
  font-family:"Outfit";
  src:url("/fonts/Outfit.woff2") format("woff2-variations"),
      url("/fonts/Outfit.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --s3-ink:#0f1222;          /* body text, headings */
  --s3-ink-2:#3b4258;        /* secondary text */
  --s3-muted:#6a7189;        /* captions */
  --s3-line:#e5e7f0;         /* hairlines */
  --s3-surface:#f6f7fb;      /* section tint */
  --s3-white:#ffffff;
  --s3-night:#120f26;        /* dark bands */
  --s3-night-2:#1c1838;
  --s3-brand:#5f54a4;        /* logo purple */
  --s3-brand-d:#4b4187;
  --s3-brand-soft:#eeecf8;
  --s3-teal:#23b7ae;         /* logo teal — primary action */
  --s3-teal-d:#179088;
  --s3-teal-soft:#e3f6f4;
  --s3-radius:14px;
  --s3-radius-sm:9px;
  --s3-shadow:0 1px 2px rgba(15,18,34,.05),0 8px 28px -12px rgba(15,18,34,.18);
  --s3-font:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --s3-wrap:1200px;
}

/* ---------- Header ---------------------------------------------------- */
.s3c-header{position:sticky;top:0;z-index:1000;background:rgba(18,15,38,.96);
  -webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--s3-font)}
.s3c-header *{box-sizing:border-box}
.s3c-bar{max-width:var(--s3-wrap);margin:0 auto;padding:0 24px;height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.s3c-logo{display:inline-flex;align-items:center;line-height:0;flex-shrink:0}
.s3c-header .s3c-logo img{display:block;height:34px;width:auto;max-width:none}
.s3c-nav{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.s3c-nav li{margin:0;padding:0}
.s3c-header .s3c-nav a{display:inline-block;color:#d9d7ea;text-decoration:none;font-size:15px;font-weight:500;
  padding:9px 13px;border-radius:8px;transition:color .15s,background .15s}
.s3c-header .s3c-nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.s3c-header .s3c-nav a[aria-current="page"]{color:#fff}
.s3c-nav .s3c-sep{width:1px;height:22px;background:rgba(255,255,255,.14);margin:0 8px}
.s3c-header .s3c-nav .s3c-cta{background:var(--s3-teal);color:#062523;font-weight:700;padding:10px 18px;margin-left:6px}
.s3c-header .s3c-nav .s3c-cta:hover{background:#3fcdc4;color:#062523}
.s3c-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px}
.s3c-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px;
  transition:transform .25s,opacity .2s}
.s3c-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.s3c-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.s3c-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:960px){
  .s3c-bar{height:64px;padding:0 16px}
  .s3c-header .s3c-logo img{height:28px}
  .s3c-toggle{display:block}
  .s3c-nav{position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--s3-night);
    flex-direction:column;align-items:stretch;gap:0;padding:12px 16px 32px;overflow-y:auto;display:none}
  .s3c-nav.is-open{display:flex;animation:s3cIn .22s ease}
  @keyframes s3cIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .s3c-header .s3c-nav a{display:block;padding:15px 8px;font-size:17px;border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.07)}
  .s3c-nav .s3c-sep{display:none}
  .s3c-header .s3c-nav .s3c-cta{margin:18px 0 0;text-align:center;border-radius:10px;border:0}
}

/* ---------- Footer ---------------------------------------------------- */
.s3c-footer{background:var(--s3-night);color:#b9b6d0;font-family:var(--s3-font);
  font-size:15px;line-height:1.6;margin-top:0}
.s3c-footer *{box-sizing:border-box}
.s3c-footer a, .s3 .s3c-footer a{color:#e4e2f2;text-decoration:none}
.s3c-footer a:hover, .s3 .s3c-footer a:hover{color:var(--s3-teal)}
.s3c-foot-cta{max-width:var(--s3-wrap);margin:0 auto;padding:56px 24px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(255,255,255,.08)}
.s3c-footer .s3c-foot-cta h2{margin:0;color:#fff;font-size:clamp(24px,3vw,32px);line-height:1.2;font-weight:700;
  letter-spacing:-.01em;max-width:22ch}
.s3c-foot-cta p{margin:8px 0 0;color:#a9a6c4;max-width:52ch}
.s3c-footer .s3c-foot-cta .s3c-btn{display:inline-block;background:var(--s3-teal);color:#062523;font-weight:700;
  padding:15px 26px;border-radius:10px;font-size:16px}
.s3c-footer .s3c-foot-cta .s3c-btn:hover{background:#3fcdc4;color:#062523}
.s3c-foot-grid{max-width:var(--s3-wrap);margin:0 auto;padding:48px 24px 32px;display:grid;gap:36px;
  grid-template-columns:1.6fr 1fr 1fr 1fr}
.s3c-footer .s3c-foot-brand img{max-width:none;height:32px;width:auto;display:block;margin:0 0 16px}
.s3c-foot-brand p{margin:0 0 18px;max-width:34ch}
.s3c-footer .s3c-foot-col h3{margin:0 0 14px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase}
.s3c-foot-col ul{list-style:none;margin:0;padding:0}
.s3c-foot-col li{margin:0 0 9px}
.s3c-foot-legal{max-width:var(--s3-wrap);margin:0 auto;padding:22px 24px 28px;display:flex;flex-wrap:wrap;
  gap:10px 24px;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);
  font-size:13.5px;color:#8e8aa9}
.s3c-foot-legal p{margin:0}
.s3c-footer .s3c-foot-legal .s3c-credit a{color:#e4e2f2;font-weight:600}
.s3c-foot-note{max-width:var(--s3-wrap);margin:0 auto;padding:0 24px 26px;font-size:12.5px;color:#7f7b9b}
.s3c-badge{display:inline-block;background:#26223f;padding:9px 13px;border-radius:8px;line-height:0}
.s3c-badge img{display:block;border:0}
@media (max-width:900px){.s3c-foot-grid{grid-template-columns:1fr 1fr}.s3c-foot-brand{grid-column:1/-1}}
@media (max-width:520px){
  .s3c-foot-cta,.s3c-foot-grid,.s3c-foot-legal,.s3c-foot-note{padding-left:16px;padding-right:16px}
  .s3c-foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}

/* Zaweba design credit — the official icon + wordmark (#3468ad) on a white
   badge, so the brand colour stays true and legible on the dark footer. */
.s3c-credit{display:flex;align-items:center;gap:10px}
.s3-zaweba{display:inline-flex;align-items:center;background:#fff;border-radius:7px;padding:5px 9px;line-height:0;
  transition:transform .15s,box-shadow .15s}
.s3-zaweba:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.s3c-footer .s3-zaweba img,.lm-footer .s3-zaweba img{display:block;height:21px;width:auto;max-width:none}