/* FreightAgent.io public site: the ONE definition of the header menu
   (hamburger), the language picker (flags) and the footer. Every public
   page -- landing, about, support, terms, privacy, login, signup -- links
   this file and site.js. The logo and the header row's height/edges stay
   in brand.css.

   Header (Raja, 2026-10-07):  logo ...... Log in [Sign up] [☰] [flag ▾]
   The menu items -- How it works, Pricing, Test drive, FAQ, About,
   Support -- live inside the ☰. Log in and Sign up sit in the bar (on
   phones Log in moves into the ☰ to make room). The language picker is
   always the far-right item. The header stays pinned to the top while
   the page scrolls. */

/* Pinned header -- pages with the full menu only (Log in / Sign up are
   forms: there the phone keyboard keeps the whole screen). On phones it
   tucks away while you scroll down and slides back when you scroll up
   (site.js adds .fa-tucked), so it never eats reading space. */
body>header.fa-bar:has(.site-menu){position:sticky;top:0;z-index:50;transition:transform .22s ease}
@media(max-width:760px){body>header.fa-bar.fa-tucked{transform:translateY(-100%)}}
@media(prefers-reduced-motion:reduce){body>header.fa-bar:has(.site-menu){transition:none}}
html{scroll-padding-top:84px}

.site-right{display:flex;align-items:center;gap:14px;font-family:"DM Sans",Arial,sans-serif}
.site-menu summary:focus-visible,.lang-btn:focus-visible,.lang-opt:focus-visible{outline:3px solid #155eef55;outline-offset:3px;border-radius:8px}
.site-login,.site-login:link,.site-login:visited{color:#151d2e;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.site-login:hover{color:#155eef}
.site-cta,.site-cta:link,.site-cta:visited{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:8px;background:#155eef;color:#fff!important;font-size:14px;font-weight:800;text-decoration:none;white-space:nowrap}
.site-cta:hover{background:#1048c6}

/* the hamburger: the whole menu, on every screen size */
.site-menu{position:relative;display:block}
.site-menu summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:42px;height:42px;border:1px solid #c6d2e1;border-radius:10px;background:#fff;color:#24334d}
.site-menu summary::-webkit-details-marker{display:none}
.site-menu summary svg{width:22px;height:22px}
.site-menu[open] summary{border-color:#155eef;color:#155eef}
.site-menu nav{position:absolute;z-index:40;top:50px;right:0;display:grid;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain;min-width:230px;padding:7px;border:1px solid #d7dfeb;border-radius:12px;background:#fff;box-shadow:0 16px 44px rgba(21,29,46,.16);font-size:15px;font-weight:700}
.site-menu nav a{padding:11px 12px;border-radius:7px;color:#151d2e;text-decoration:none}
.site-menu nav a:hover{background:#f0f4fb;color:#155eef}
.site-menu nav .menu-narrow-only{display:none}


/* language picker: flag + language name, always the far-right item */
.lang-menu{position:relative;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 11px;border:1.5px solid #b7caf1;border-radius:10px;background:#eff4ff;color:#14274e;font:800 14px "DM Sans",Arial,sans-serif;cursor:pointer;white-space:nowrap}
.lang-btn:hover{border-color:#155eef}
.lang-btn[aria-expanded="true"]{border-color:#155eef;background:#e3ecff}
.lang-btn .chev{width:10px;height:10px;flex:none}
[data-lang-face]{display:inline-flex;align-items:center;gap:8px}
.lang-code{display:none}
.lang-flag{display:inline-block;flex:none;width:24px;height:16px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(21,29,46,.18)}
.lang-flag svg{display:block;width:100%;height:100%}
.lang-list{position:absolute;z-index:45;top:calc(100% + 8px);right:0;display:grid;min-width:180px;padding:6px;border:1px solid #d7dfeb;border-radius:12px;background:#fff;box-shadow:0 16px 44px rgba(21,29,46,.16)}
.lang-list[hidden]{display:none}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;padding:10px 11px;border:0;border-radius:8px;background:none;color:#151d2e;font:700 15px "DM Sans",Arial,sans-serif;text-align:left;cursor:pointer}
.lang-opt:hover{background:#f0f4fb}
.lang-opt[aria-checked="true"]{background:#eff4ff;color:#14274e}
.lang-opt[aria-checked="true"]:after{content:"✓";margin-left:auto;color:#155eef;font-weight:800}

@media(max-width:560px){
  .site-right{gap:8px}
  html{scroll-padding-top:72px}
  .site-login{display:none}.site-menu nav .menu-narrow-only{display:block}
  .site-cta,.site-cta:link,.site-cta:visited{min-height:34px;padding:0 11px;font-size:13px}
  /* phones: Sign up stays in the bar, so the BETA badge steps aside (the page still says beta) */
  .fa-bar:has(.site-cta) .brand-beta,.fa-bar:has(.site-cta) .beta{display:none}
  .site-menu summary,.lang-btn{height:40px;min-height:40px}
  .site-menu summary{width:40px}
  .lang-btn{gap:6px;padding:0 8px}
  .lang-name{display:none}.lang-code{display:inline}
}
/* small phones: the short BETA pill, so the menu and picker stay on the logo's line */
.beta-short{display:none}
@media(max-width:400px){
  .lang-code{display:none}
  .site-right{gap:6px}
  .site-menu summary{width:35px}
  .fa-bar:has(.site-cta) .fa-bar-inner{column-gap:8px}
  .lang-btn{padding:0 6px}.lang-btn .chev{display:none}
  .site-cta,.site-cta:link,.site-cta:visited{padding:0 8px;font-size:12px}
  .beta-long{display:none}.beta-short{display:inline}
}

/* footer: the same links on every public page */
.site-foot{padding:20px 0;background:#121b2d;color:#d4dced;font:500 13px/1.6 "DM Sans",Arial,sans-serif}
.site-foot-inner{width:min(1120px,calc(100% - 48px));margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.site-foot a{color:#fff;text-decoration:none}
.site-foot a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.site-foot-inner{width:calc(100% - 36px);flex-direction:column;align-items:flex-start}}