/*
Theme Name: Freightton Theme v4
Description: Thin presentation layer over Freightton Core v3. No business logic lives here — every dynamic screen is a shortcode mount point that talks to the freightton/v3 REST API. Built to be discarded/replaced independently of the plugin when Freightton exits WordPress.
Version: 6.21.0
Author: Freightton
Requires Plugins: freightton-core-v3
*/

/* ===== Design tokens =====
   Palette drawn from an aviation instrument panel rather than generic
   SaaS blue: a near-black control-tower ink, a cobalt primary, and an
   amber "beacon" signal color used sparingly for status. Type pairs
   Space Grotesk (display — geometric, technical) with Inter (body/UI)
   and JetBrains Mono for reference numbers, weights and money, in
   keeping with the manifest/ledger character of freight documents. */
:root{
  --ft-ink:#0A0F1C;
  --ft-ink-2:#131C30;
  --ft-line:#E4E7EE;
  --ft-line-soft:rgba(255,255,255,.08);
  --ft-bg:#F4F6FA;
  --ft-surface:#FFFFFF;
  /* Neutral ramp. Every background in the product picks from these
     four steps instead of inventing a one-off grey, so the contrast
     between page, card, inset panel and hover state stays even and
     gentle rather than jumping around per component. */
  --ft-surface-2:#FAFBFD;   /* inset panels inside a card */
  --ft-hover:#F0F3F9;       /* row / item hover */
  --ft-chip:#EAEEF6;        /* neutral chips and code badges */
  --ft-line-2:#EDF0F5;      /* dividers inside a card, softer than the border */
  --ft-primary-soft:#EDF1FC;/* tinted hover on primary-coloured controls */
  --ft-text:#10131C;
  --ft-muted:#69707D;

  --ft-primary:#2E4BD1;
  --ft-primary-hover:#2540B0;
  --ft-signal:#F2A93B;
  --ft-signal-bg:#FDF1DD;
  --ft-success:#1FAE7A;
  --ft-success-bg:#E4F7EF;
  --ft-danger:#D8483A;
  --ft-danger-bg:#FBEAE8;

  /* Legacy aliases so the plugin's CSS (freightton-core-v3.css) keeps
     working without touching every var() reference there. */
  --ft-navy:var(--ft-ink);
  --ft-navy-2:var(--ft-primary-hover);
  --ft-blue:var(--ft-primary);
  --ft-emerald:var(--ft-success);

  --ft-radius:10px;
  --ft-font-display:'Space Grotesk', system-ui, sans-serif;
  --ft-font-body:'Inter', system-ui, sans-serif;
  --ft-font-mono:'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ft-font-body);background:var(--ft-bg);color:var(--ft-text);font-size:15px;line-height:1.5}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:var(--ft-font-display);letter-spacing:-.01em;margin:0}
:focus-visible{outline:2px solid var(--ft-primary);outline-offset:2px}
.ft-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.ft-mono{font-family:var(--ft-font-mono)}
.ft-icon{display:inline-block;vertical-align:middle;flex:none}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} }

/* ===== Logo mark (shared) ===== */
.ft-logo-mark{
  display:inline-block;width:20px;height:20px;border-radius:5px;
  background:linear-gradient(135deg,var(--ft-primary),var(--ft-signal));
  position:relative;top:3px;
}

/* ===== Marketing header ===== */
.ft-header{background:rgba(10,15,28,.97);position:sticky;top:0;z-index:20;backdrop-filter:blur(6px)}
/* The header is chrome, not content: it spans the full viewport so the
   logo sits hard left and the nav hard right, rather than being boxed
   into the 1120px content measure. */
.ft-header .ft-wrap{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:none;padding:0 28px}
@media (max-width:600px){ .ft-header .ft-wrap{padding:0 16px} }
.ft-logo{color:#fff;font-family:var(--ft-font-display);font-weight:700;font-size:19px;display:flex;align-items:center;gap:10px}
.ft-nav{display:flex;align-items:center;gap:24px}
.ft-nav a{color:#9AA4B8;font-size:14px;font-weight:500;transition:color .15s ease}
.ft-nav a:hover{color:#fff}
.ft-cta{background:var(--ft-primary);color:#fff!important;padding:9px 18px;border-radius:8px;font-size:14px;font-weight:600;transition:background .15s ease}
.ft-cta:hover{background:var(--ft-primary-hover)}
.ft-nav-toggle{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:4px}

@media (max-width: 780px){
  .ft-nav-toggle{display:block}
  .ft-nav{
    position:absolute;top:64px;left:0;right:0;background:var(--ft-ink);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px 16px;display:none;
  }
  .ft-nav.is-open{display:flex}
  .ft-nav a{padding:11px 0;width:100%;border-bottom:1px solid var(--ft-line-soft)}
  .ft-nav .ft-cta{margin-top:10px;text-align:center}
}

/* ===== Search-first hero (Blueprint Ch4: the search panel IS the page) =====
   Dark control-tower field so the white search panel reads as the only
   thing to do here. Everything below the fold is support. */
.ft-search-hero{
  background:var(--ft-ink);color:#fff;position:relative;overflow:hidden;
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:40px 0;
}
.ft-search-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 900px 460px at 50% -20%, rgba(46,75,209,.4), transparent),
             radial-gradient(ellipse 500px 260px at 88% 108%, rgba(242,169,59,.16), transparent);
  pointer-events:none;
}
.ft-search-hero .ft-wrap{position:relative;max-width:760px;text-align:center;width:100%}

.ft-search-hero h1{font-size:42px;line-height:1.12;margin:0 0 8px;color:#fff;letter-spacing:-.02em}

/* The panel: primary row (origin/destination) reads as one unit joined
   by the routing line; optional fields sit quieter beneath it. */
.ft-hero-eyebrow{
  font-family:var(--ft-font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ft-signal);margin-bottom:18px;
}
.ft-hero-sub{color:#B7C0D4;font-size:15px;margin:0 0 34px}

/* ===== Search box (Google/ChatGPT-style minimal pill) =====
   One rounded container, no boxed segments, no stacked uppercase
   labels. Placeholders carry the meaning; the only chrome is a
   hairline border that gives way to a soft lift on focus. Submit is a
   single circular icon button, so the bar reads as one control rather
   than a form. */
.ft-searchbox{
  display:flex;align-items:center;gap:2px;
  background:#fff;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  padding:8px 8px 8px 24px;max-width:820px;margin:0 auto;
  transition:box-shadow .18s ease;
}
.ft-searchbox:hover{box-shadow:0 4px 16px rgba(0,0,0,.24)}
.ft-searchbox:focus-within{box-shadow:0 8px 30px rgba(0,0,0,.32)}

.ft-searchbox input{
  border:none;outline:none;background:none;min-width:0;
  font-family:var(--ft-font-body);color:var(--ft-text);
  padding:12px 0;
}
.ft-searchbox input::placeholder{color:#9AA1AD;font-weight:400}

/* Airport codes: the only typographic emphasis in the bar. */
.ft-searchbox input,
.ft-searchbox input::placeholder{
  font-family:var(--ft-font-body);font-size:13.5px;font-weight:400;
  text-transform:none;letter-spacing:0;
}
.ft-sb-code{flex:1 1 0;width:0;text-align:left;text-overflow:ellipsis;color:var(--ft-text)}
.ft-sb-code::placeholder{color:#9AA1AD}

/* A quiet arrow, not a decorated route graphic - this bar is about
   restraint; the routing motif still carries the brand elsewhere. */
.ft-sb-arrow{display:flex;align-items:center;color:#C2C8D2;flex:none}
.ft-sb-arrow svg{width:20px;height:20px}

.ft-sb-divider{width:1px;height:24px;background:var(--ft-line);flex:none;margin:0 12px}

.ft-sb-date{
  flex:0 0 auto;color:var(--ft-muted);
}
.ft-sb-date::-webkit-datetime-edit{text-transform:none}
.ft-sb-date::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}
.ft-sb-date:focus{color:var(--ft-text)}

.ft-sb-go{
  flex:none;width:44px;height:44px;margin-left:6px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ft-primary);color:#fff;border:none;border-radius:50%;cursor:pointer;
  transition:background .15s ease,transform .1s ease;
}
.ft-sb-go:hover{background:var(--ft-primary-hover)}
.ft-sb-go:active{transform:scale(.94)}
.ft-sb-go .ft-icon{width:19px;height:19px}
.ft-sb-go:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media (max-width:640px){
  .ft-searchbox{
    flex-wrap:wrap;border-radius:26px;padding:14px 14px 14px 18px;gap:8px;
  }
  .ft-sb-code{flex:1 1 100%;text-align:left}
  .ft-sb-divider{display:none}
  .ft-sb-date{flex:1 1 100%;order:3;padding-top:10px;border-top:1px solid var(--ft-line)}
  .ft-sb-go{order:4;margin-left:auto}
}

/* ===== Sections ===== */
.ft-section{padding:64px 0}
.ft-section-alt{background:var(--ft-surface);border-top:1px solid var(--ft-line);border-bottom:1px solid var(--ft-line)}
.ft-section h2{font-size:26px;margin:0 0 8px}
.ft-section .ft-sub{color:var(--ft-muted);margin:0 0 32px;font-size:15px}
.ft-page-sub{color:var(--ft-muted);margin:-4px 0 20px;font-size:14px}

.ft-panel{background:var(--ft-surface);border:1px solid var(--ft-line);border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(16,32,51,.04)}

/* ===== Four-step flow (real sequence, not decorative numbering) ===== */
.ft-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:none}
.ft-flow li{position:relative;padding:22px 18px 20px;background:var(--ft-surface);border:1px solid var(--ft-line);border-radius:12px}
.ft-flow-icon{width:38px;height:38px;border-radius:9px;background:var(--ft-signal-bg);color:var(--ft-signal);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ft-flow-index{position:absolute;top:20px;right:18px;font-family:var(--ft-font-mono);font-size:12px;color:var(--ft-muted)}
.ft-flow h3{font-size:16px;margin:0 0 6px}
.ft-flow p{margin:0;font-size:13.5px;color:var(--ft-muted);line-height:1.5}
.ft-flow li:not(:last-child)::after{
  content:'';position:absolute;top:38px;right:-20px;width:20px;height:1px;
  background:repeating-linear-gradient(90deg,var(--ft-line) 0 4px,transparent 4px 8px);
  display:none;
}
@media (min-width:900px){ .ft-flow li:not(:last-child)::after{display:block} }
@media (max-width:900px){ .ft-flow{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .ft-flow{grid-template-columns:1fr} .ft-hero h1{font-size:32px} }

/* ===== Footer (marketing) ===== */
.ft-footer{background:var(--ft-ink);color:#8B94A7;padding:48px 0 0;font-size:13.5px}
.ft-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:36px}
.ft-footer-brand p{margin:12px 0 0;max-width:280px;line-height:1.6;color:#8B94A7}
.ft-footer .ft-logo{color:#fff;font-family:var(--ft-font-display);font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.ft-footer-col h4{color:#fff;font-size:13px;margin:0 0 12px;font-weight:600}
.ft-footer-col{display:flex;flex-direction:column;gap:9px}
.ft-footer-col a,.ft-footer-col span{color:#8B94A7;transition:color .15s ease}
.ft-footer-col a:hover{color:#fff}
.ft-footer-bottom{border-top:1px solid var(--ft-line-soft);padding:16px 0}
@media (max-width:700px){ .ft-footer-grid{grid-template-columns:1fr;gap:24px} }

/* ===== Hero trust strip ===== */
.ft-trust-strip{display:flex;flex-wrap:wrap;gap:20px;margin-top:8px}
.ft-trust-strip span{display:flex;align-items:center;gap:7px;font-size:13px;color:#B7C0D4}
.ft-trust-strip .ft-icon{width:16px;height:16px;color:var(--ft-signal)}

/* ===== Coverage grid ===== */
.ft-coverage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ft-coverage-card{background:var(--ft-surface);border:1px solid var(--ft-line);border-radius:12px;padding:20px}
.ft-coverage-origin{display:flex;align-items:center;gap:9px;font-family:var(--ft-font-display);font-weight:600;font-size:15px;margin-bottom:8px}
.ft-coverage-origin .ft-icon{color:var(--ft-primary)}
.ft-coverage-dests{font-family:var(--ft-font-mono);font-size:13px;color:var(--ft-muted);letter-spacing:.02em}
@media (max-width:640px){ .ft-coverage-grid{grid-template-columns:1fr} }

/* =========================================================
   APP SHELL — sidebar layout for authenticated pages
   ========================================================= */
.ft-app-shell{background:var(--ft-bg)}
.ft-shell{display:flex;min-height:100vh}

.ft-sidebar{
  width:232px;flex:none;background:var(--ft-ink);color:#C4CBDA;
  display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;
}
.ft-sidebar-logo{color:#fff;font-family:var(--ft-font-display);font-weight:700;font-size:16px;display:flex;align-items:center;gap:9px;padding:6px 10px 22px}
.ft-sidebar-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.ft-sidebar-link{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px;font-size:13.5px;font-weight:500;
  color:#AAB3C5;transition:background .12s ease,color .12s ease;border:none;background:none;cursor:pointer;
  font-family:inherit;width:100%;text-align:left;
}
.ft-sidebar-link:hover{background:var(--ft-ink-2);color:#fff}
.ft-sidebar-link.is-active{background:var(--ft-ink-2);color:#fff}
.ft-sidebar-link.is-active .ft-icon{color:var(--ft-signal)}
.ft-sidebar-link .ft-icon{flex:none;width:18px;height:18px}
.ft-sidebar-footer{border-top:1px solid var(--ft-line-soft);padding-top:10px;margin-top:10px;display:flex;flex-direction:column;gap:2px}
.ft-sidebar-logout{color:#AAB3C5}
.ft-sidebar-logout:hover{color:#fff;background:var(--ft-danger)}
.ft-sidebar-toggle{display:none;background:none;border:none;color:var(--ft-text);cursor:pointer;padding:6px}

.ft-shell-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ft-topbar{
  height:60px;flex:none;
  background:var(--ft-surface);border-bottom:1px solid var(--ft-line);position:sticky;top:0;z-index:10;
  padding:0;
}
.ft-topbar-inner{
  width:100%;max-width:1160px;height:100%;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;gap:14px;
}
.ft-topbar-title{font-size:17px;flex:1}
.ft-topbar-account{
  font-size:13px;color:var(--ft-muted);background:var(--ft-bg);border:1px solid var(--ft-line);
  border-radius:999px;padding:6px 14px;font-weight:500;
}
.ft-shell-content{flex:1;padding:28px}
/* On wide monitors the workspace shouldn't stretch edge to edge -
   cap the content column and centre it, and align the topbar's inner
   row to the same measure so title and account chip sit above it. */
.ft-shell-content > *{max-width:1160px;margin-left:auto;margin-right:auto}

@media (max-width:900px){
  .ft-sidebar-toggle{display:block}
  .ft-sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:30;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:20px 0 40px rgba(0,0,0,.2);
  }
  .ft-sidebar.is-open{transform:translateX(0)}
  .ft-shell-content{padding:20px}
  .ft-topbar-inner{padding:0 16px}
}

/* ===== Quotation document page (standalone) ===== */
.ft-doc-page{background:var(--ft-bg)}
.ft-doc-wrap{max-width:880px;margin:0 auto;padding:32px 20px}
@media print{ .ft-doc-page{background:#fff} .ft-doc-wrap{padding:0;max-width:none} }

/* ===== Focused auth pages (login / reset / verify) ===== */
.ft-wrap-narrow{max-width:460px}
.ft-wrap-narrow h2{text-align:center}
.ft-wrap-narrow .ft-sub{text-align:center}
.ft-wrap-narrow .ft-panel{box-shadow:0 6px 24px rgba(10,15,28,.06)}

/* ===== Fullscreen homepage: header/footer follow the hero =====
   The hero fills the viewport; on the homepage the header floats over
   it (transparent, no band) and the footer is hidden, so the search
   bar is the only thing on screen. The hero pads its content down by
   the header height so the bar stays optically centred below the nav,
   never under it.

   All the admin-bar math lives here in ONE place, ordered so the
   homepage rules are never clobbered by a later generic rule: we key
   every offset on whether the page is the home page AND whether WP is
   rendering its admin bar, at each breakpoint. */

/* -- App-shell chrome offsets (every logged-in page) -- */
.admin-bar .ft-header  { top: 32px; }
.admin-bar .ft-sidebar { top: 32px; height: calc(100vh - 32px); }
.admin-bar .ft-topbar  { top: 32px; }

/* -- Non-home hero fills viewport minus the admin bar -- */
.admin-bar:not(.home) .ft-search-hero {
  min-height: calc(100vh - 32px); min-height: calc(100svh - 32px);
}

/* -- Homepage: floating header, hidden footer -- */
.home .ft-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; z-index: 21; }
.home .ft-header .ft-nav a { color: #B7C0D4; }
.home .ft-header .ft-nav a:hover { color: #fff; }
.home .ft-footer { display: none; }
.home .ft-search-hero { padding-top: 64px; }

/* -- Homepage + admin bar: header drops below the bar, hero height and
      top padding both account for it -- */
.admin-bar.home .ft-header { top: 32px; }
.admin-bar.home .ft-search-hero {
  min-height: calc(100vh - 32px); min-height: calc(100svh - 32px);
  padding-top: 96px;
}

/* -- Tablet (<=782px): admin bar is 46px -- */
@media screen and (max-width: 782px) {
  .admin-bar .ft-header  { top: 46px; }
  .admin-bar .ft-sidebar { top: 46px; height: calc(100vh - 46px); }
  .admin-bar .ft-topbar  { top: 46px; }
  .admin-bar:not(.home) .ft-search-hero { min-height: calc(100vh - 46px); min-height: calc(100svh - 46px); }
  .admin-bar.home .ft-header { top: 46px; }
  .admin-bar.home .ft-search-hero { min-height: calc(100vh - 46px); min-height: calc(100svh - 46px); padding-top: 110px; }
  .home .ft-nav.is-open { background: var(--ft-ink); }
}

/* -- Mobile (<=600px): WP stops fixing the admin bar, so no offset -- */
@media screen and (max-width: 600px) {
  .admin-bar .ft-header,
  .admin-bar .ft-sidebar,
  .admin-bar .ft-topbar,
  .admin-bar.home .ft-header { top: 0; }
  .admin-bar .ft-sidebar { height: 100vh; }
  .admin-bar.home .ft-search-hero { padding-top: 64px; }
}

/* -- Short viewports: release fullscreen rather than clip -- */
@media (max-height: 560px) {
  .ft-search-hero { min-height: auto; padding: 80px 0 40px; }
  .ft-search-hero h1 { font-size: 30px; margin-bottom: 6px; }
}

/* ===== WP-driven brand mark ===== */
.ft-brand-img{height:30px;width:auto;max-width:200px;display:block;object-fit:contain}
.ft-brand-img-icon{height:28px;width:28px;border-radius:7px}
.ft-sidebar-logo .ft-brand-img{height:22px}
.ft-footer .ft-brand-img{height:22px}
/* The site title sits beside the mark, whether that mark is an
   uploaded logo or the built-in one. With a wide logo image the title
   needs a little separation to read as a second element. */
.ft-logo-has-img .ft-logo-text{padding-left:2px}


/* Ready date joins the lane on one row; it is narrower than the codes. */
.ft-field-date{flex:0 0 150px}
.ft-field-date input{font-family:var(--ft-font-body);font-size:14px}
@media (max-width:640px){ .ft-field-date{flex:1 1 100%} }

/* ===== Header tracking box (Freightera pattern) =====
   Tracking is the second thing people arrive to do, so it sits in the
   header itself rather than behind a nav link. Compact pill so it
   reads as a tool inside the chrome, not a form competing with it. */
.ft-track-mini{
  display:flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:3px 3px 3px 14px;margin-left:6px;
  transition:border-color .15s ease,background .15s ease;
}
.ft-track-mini:focus-within{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34)}
.ft-track-mini input{
  border:none;outline:none;background:none;color:#fff;
  font-family:var(--ft-font-body);font-size:13px;width:150px;padding:7px 0;
}
.ft-track-mini input::placeholder{color:#8D97AC}
.ft-track-mini button{
  flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:var(--ft-primary);color:#fff;border:none;border-radius:50%;cursor:pointer;
  transition:background .15s ease,transform .1s ease;
}
.ft-track-mini button:hover{background:var(--ft-primary-hover)}
.ft-track-mini button:active{transform:scale(.93)}
.ft-track-mini button .ft-icon{width:16px;height:16px}
.ft-nav-member{font-weight:600}

@media (max-width:900px){ .ft-track-mini input{width:118px} }
@media (max-width:780px){
  .ft-track-mini{width:100%;margin:6px 0 0;justify-content:space-between}
  .ft-track-mini input{width:auto;flex:1}
}