/* ================================================================
   FPFX — public header

   A navigation bar, and a second tier the calling surface fills with
   its own strip. On small screens the menu is a bottom sheet instead
   of a full-screen overlay, so the primary action stays within thumb
   reach.

   THE PROOF TICKER RAIL THAT USED TO SIT ABOVE THIS BAR IS GONE, and
   its rules with it: .fh-rail, .fh-rail-track, .fh-rail-set, .fh-rail-i
   and @keyframes fhMarq. The marquee was a WCAG 2.2.2 (Pause, Stop,
   Hide) failure — an infinite 48s translateX(-50%) whose only pause was
   :hover, which no keyboard and no touch screen can reach — and the
   content fitted on one line at every viewport it was measured at, so
   the second pass existed purely to make the loop seamless. The proof
   now prints as a static band below the home page hero, where it is the
   argument being made. See the note in public-header.php.
   ================================================================ */

/* ---------- navigation bar ---------- */
.fh{position:sticky;top:0;z-index:60;background:rgba(5,5,5,.9);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(238,183,98,.12);
  transition:box-shadow .3s ease,background .3s ease}
.fh.stuck{background:rgba(5,5,5,.96);box-shadow:0 14px 40px -28px #000}
.fh-in{max-width:1240px;margin:0 auto;padding:0 26px;height:66px;display:flex;align-items:center;gap:26px}
.fh.stuck .fh-in{height:58px}
.fh-in,.fh.stuck .fh-in{transition:height .3s cubic-bezier(.22,.61,.36,1)}

.fh-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.fh-word{display:flex;flex-direction:column;line-height:1.06;font-weight:800;
  /* The wordmark is a logotype: it takes the DISPLAY face, not the inherited
     body face. line-height was .98, which left the box 2px shorter than the
     glyphs - with background-clip:text on the second line that risks shaving
     the gradient. 1.06 contains it. */
  font-family:var(--au-disp,"Outfit",system-ui,sans-serif);
  letter-spacing:-.035em;font-size:.9rem;color:#F8F8F8}
.fh-word em{font-style:normal;background:linear-gradient(100deg,#F3DBB2,#EEB762 46%,#8A6B3A);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.fh-nav{display:flex;gap:4px;margin-right:auto}
@media(max-width:1000px){.fh-nav{display:none}}
.fh-nav a{position:relative;padding:9px 12px;border-radius:8px;font-size:.87rem;color:var(--muted,#C4BCB1);
  text-decoration:none;transition:color .26s ease,background .26s ease}
.fh-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1.5px;
  background:linear-gradient(90deg,#EEB762,#F3DBB2);transform:scaleX(0);transform-origin:right;
  transition:transform .34s cubic-bezier(.16,1,.3,1)}
.fh-nav a:hover{color:#F8F8F8}
.fh-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.fh-nav a[aria-current=page]{color:#EEB762}
.fh-nav a[aria-current=page]::after{transform:scaleX(1)}

.fh-act{display:flex;align-items:center;gap:9px;margin-left:auto}
.fh-help{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;
  color:var(--muted,#C4BCB1);text-decoration:none;font-size:.85rem;
  border:1px solid transparent;transition:all .28s ease}
.fh-help:hover{color:#EEB762;border-color:rgba(238,183,98,.28);background:var(--surface,#171109)}
@media(max-width:1180px){.fh-help span{display:none}}
@media(max-width:1000px){.fh-help{display:none}}

.fh-login{padding:9px 15px;border-radius:9px;font-size:.86rem;color:var(--muted,#C4BCB1);text-decoration:none;
  border:1px solid rgba(238,183,98,.15);transition:all .28s ease}
.fh-login:hover{color:#F8F8F8;border-color:rgba(238,183,98,.42);background:var(--surface,#171109)}
@media(max-width:1000px){.fh-in > .fh-act > .fh-login{display:none}}

.fh-cta{position:relative;overflow:hidden;isolation:isolate;padding:10px 20px;border-radius:9px;
  font-size:.86rem;font-weight:700;text-decoration:none;color:#120E06;
  background:linear-gradient(100deg,#EEB762,#F3DBB2);
  box-shadow:0 10px 26px -12px rgba(238,183,98,.7);
  transition:transform .24s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.fh-cta span{position:relative;z-index:2}
.fh-cta::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,#F3DBB2,#fff3de);
  transform:translateX(-101%);transition:transform .42s cubic-bezier(.16,1,.3,1)}
.fh-cta:hover{transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(238,183,98,.85)}
.fh-cta:hover::before{transform:translateX(0)}

.fh-burger{display:none;width:40px;height:40px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(238,183,98,.18);background:var(--surface,#171109);
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
@media(max-width:1000px){.fh-burger{display:flex}}
.fh-burger i{display:block;width:16px;height:1.6px;border-radius:2px;background:#EEB762;
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.fh-burger[aria-expanded=true] i:first-child{transform:translateY(3.3px) rotate(45deg)}
.fh-burger[aria-expanded=true] i:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* ---------- bottom sheet ---------- */
.fh-scrim{position:fixed;inset:0;z-index:78;background:rgba(3,3,3,.72);
  backdrop-filter:blur(5px);opacity:0;transition:opacity .3s ease}
.fh-scrim.on{opacity:1}
.fh-sheet{position:fixed;left:0;right:0;bottom:0;z-index:79;
  border-top:1px solid rgba(238,183,98,.28);border-radius:20px 20px 0 0;
  background:linear-gradient(180deg,#211810,#0A0806);
  box-shadow:0 -30px 70px -30px #000;padding:10px 20px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .42s cubic-bezier(.16,1,.3,1);
  max-height:86vh;overflow-y:auto}
.fh-sheet.on{transform:translateY(0)}
.fh-sheet-grab{width:38px;height:4px;border-radius:3px;margin:0 auto 16px;
  background:rgba(238,183,98,.28)}
.fh-sheet-nav{display:flex;flex-direction:column;gap:2px}
.fh-sheet-nav a{display:flex;align-items:center;gap:13px;padding:14px 12px;border-radius:11px;
  color:#c9c4bb;text-decoration:none;font-size:1rem;font-weight:500;
  transition:background .24s ease,color .24s ease}
.fh-sheet-nav a i{font-style:normal;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9.5px;color:var(--muted-2,#AEA8A1);flex:none}
.fh-sheet-nav a span{margin-left:auto;color:var(--muted-2,#AEA8A1);transition:transform .26s ease,color .26s ease}
.fh-sheet-nav a:hover,.fh-sheet-nav a:focus-visible{background:var(--surface-3,#2E2116);color:#fff}
.fh-sheet-nav a:hover span{color:#EEB762;transform:translateX(3px)}
.fh-sheet-nav a[aria-current=page]{color:#EEB762;background:var(--surface-3,#2E2116)}
.fh-sheet-foot{margin-top:16px;padding-top:16px;border-top:1px solid rgba(238,183,98,.12)}
.fh-sheet-help{display:block;padding:12px;border-radius:10px;text-align:center;font-size:.88rem;
  color:var(--muted,#C4BCB1);text-decoration:none;border:1px dashed rgba(238,183,98,.28);margin-bottom:12px}
.fh-sheet-help:hover{color:#EEB762;border-color:#EEB762}
.fh-sheet-act{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fh-sheet-act .fh-login,.fh-sheet-act .fh-cta{display:block;text-align:center;padding:13px}
.fh-sheet-note{margin:14px 0 0;text-align:center;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2,#AEA8A1)}

body.fh-locked{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .fh-sheet,.fh-scrim,.fh-cta,.fh-burger i,
  .fh-site,.fh-site span{transition-duration:.001ms !important}
}

/* ================================================================
   MIRRORED FILE — edit assets/css/fpfx-header.css and copy to
   portal/assets/css/ and help/assets/css/. The cache-buster reads the
   root copy's mtime while the browser fetches the surface copy, so a
   surface-only edit ships behind a version string that disagrees with
   the file.

   VARIANTS
   ----------------------------------------------------------------
   One header, five compositions. `full` is the bar above and needs no
   class of its own — the hook only exists where the markup differs.
   These blocks add nothing but structure: no colour is introduced or
   changed here, every value below is one already used above.
   ================================================================ */

/* The help centre trades its marketing nav row for the one route to
   the affiliate programme it otherwise has nowhere. Styled as a quiet
   text link rather than a second bordered button, so the bar still has
   exactly one primary action. */
.fh-aff{padding:9px 12px;border-radius:9px;font-size:.86rem;color:var(--muted,#C4BCB1);text-decoration:none;
  border:1px solid transparent;transition:all .28s ease}
.fh-aff:hover{color:#EEB762;border-color:rgba(238,183,98,.28);background:var(--surface,#171109)}
@media(max-width:1000px){.fh-aff{display:none}}   /* the sheet carries it */

/* THE LABELLED ROUTE BACK TO THE MAIN SITE — 'desk' and 'auth'.
   ----------------------------------------------------------------
   Same quiet-text treatment as .fh-aff above, for the same reason:
   these are exits, and the bar keeps exactly one primary action. No
   new colour — #8E8A82 at .86rem is body-size text, well clear of the
   #948C82 floor, which is licensed for 10-11px meta only.

   The arrow is decorative and marked aria-hidden in the markup, so the
   accessible name is the words alone. Colour is never the only signal:
   the words say where it goes, and hover, focus and the arrow's nudge
   all fire together. */
.fh-site{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;
  padding:9px 12px;border-radius:9px;font-size:.86rem;color:var(--muted,#C4BCB1);text-decoration:none;
  border:1px solid transparent;transition:color .28s ease,border-color .28s ease,background .28s ease}
.fh-site span{color:var(--muted-2,#AEA8A1);transition:transform .26s cubic-bezier(.2,.8,.3,1),color .28s ease}
.fh-site:hover,.fh-site:focus-visible{color:#EEB762;border-color:rgba(238,183,98,.28);background:var(--surface,#171109)}
.fh-site:hover span,.fh-site:focus-visible span{color:#EEB762;transform:translate(2px,-2px)}
/* Focus must be visible on a surface that may not set one of its own.
   The portal auth pages have no global :focus-visible rule the way the
   help centre does, and this link is the first tab stop after the
   crest. */
.fh-site:focus-visible{outline:2px solid #EEB762;outline-offset:3px}
/* Below the burger breakpoint the sheet carries the whole marketing
   nav — every row of which is a main-site destination — and the crest
   still links there too, so the bar sheds this rather than crowding a
   360px viewport. Two independent routes remain at every width. */
@media(max-width:1000px){.fh-site{display:none}}

/* The payment page has no nav row and no sheet, so its bar is a crest
   and one link and can sit lower. 'auth' is NOT in this rule any more:
   it now carries the six-item nav and the bottom sheet, so it is the
   'full' bar minus the account actions and takes the same 66px. */
.fh-checkout .fh-in{height:60px}

/* Help is the ONLY link off the payment page. The rules above hide its
   label below 1180px and the link itself below 1000px, which is correct
   when it is one of three actions and wrong when it is the last one
   standing: on a phone it would leave a payment form with no way out at
   all. 'auth' is not in this rule either — it has the sheet, and the
   sheet has .fh-sheet-help. */
.fh-checkout .fh-help{display:inline-flex}
.fh-checkout .fh-help span{display:inline}

/* Tier two — the policy switcher on legal, the search band on the help
   centre — is emitted inside <header> after .fh-in and keeps its own
   stylesheet. It gets no box from here on purpose: this file owns the
   banner, not the strip inside it. What it does get is the sticky
   parent, so those strips must DROP their own `position:sticky` when
   they move in; a sticky child of a sticky parent only travels within
   the parent's box, which is not what either of them means. */