/* ══════════════════════════════════════════════════════════════════════
   public.css — v222.  The public front door: landing, sign-in, coming-soon.

   Loaded AFTER matrix.css / matrix-dark.css on the three anonymous
   surfaces only.  Authed workspace pages never see it, so nothing here
   can disturb the CRM shell.

   WHAT IT FIXES, all four found by looking at the rendered pages:

   1. NAV BUTTONS WERE ORANGE-ON-GREY.  matrix.css declares .mx-btn-ghost
      transparent at line 185 and then re-declares .mx-btn with an orange
      background 1000 lines later, so every ghost button in a navbar came
      out filled orange - while `.mx-navbar a { color: var(--text-muted) }`
      (higher specificity than .mx-btn's colour) kept the LABEL grey.
      Orange #f97316 behind grey #a1a1aa is about 1.9:1, well under the
      4.5:1 WCAG AA floor for body text.
   2. THE PUBLIC NAV ATE THE PHONE.  matrix.css's mobile block sets
      `.mx-btn, .mx-btn-ghost { width: 100% }`, which is right for forms
      and wrong for a navbar: five links became five stacked full-width
      buttons occupying ~40% of a 390x844 screen before any content.
   3. THE HERO STARTED 28px DOWN.  The landing hero lives inside
      main.mx-container, whose 1.75rem top padding printed a black band
      between the navbar and the image.
   4. 100vw OVERFLOWS.  The full-bleed pull uses 100vw, which INCLUDES
      the classic scrollbar - hence the horizontal scrollbar on desktop.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. contrast ──────────────────────────────────────────────────────
   The ghost-button fault was PLATFORM-WIDE, not a public-page one, so
   it now lives in matrix.css where every authenticated surface sees it
   too.  Only the public-nav specific bit remains here. */
/* the one solid call-to-action keeps its fill and gets readable ink */
.mx-navbar a.mx-btn:not(.mx-btn-ghost),
.wf-pubnav a.mx-btn:not(.mx-btn-ghost) { color: #fff; }

/* ── 2. the public navigation bar ─────────────────────────────────── */
.wf-pubnav {
  position: sticky; top: 0; z-index: 120;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem clamp(1rem, 4vw, 2rem);
  background: var(--bg-topbar, rgb(12 10 9 / .82));
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border-color);
}
.wf-pubnav .wf-pubnav-brand { display: flex; align-items: center; }
/* THE LOGO IS THE WORDMARK.  The lockup already contains the words
   "Workforce345", so printing the name beside it said it twice. */
.wf-pubnav .wf-pubnav-logo {
  height: 42px; width: auto; display: block; object-fit: contain;
}
@media (max-width: 560px) { .wf-pubnav .wf-pubnav-logo { height: 34px; } }
/* THE MARK HAS TO BE LEGIBLE ON THE BAR IT SITS ON.  The lockup's
   wordmark is a dark navy that all but disappeared against the dark
   topbar - the same fault login.html fixed for its own logo in v42.
   Full colour on the light skin, white silhouette on the dark one. */
.wf-pubnav .wf-pubnav-logo { filter: none; }
html.theme-dark .wf-pubnav .wf-pubnav-logo { filter: brightness(0) invert(1); }
/* the accompanying <a> must not underline or tint the image */
.wf-pubnav .wf-pubnav-brand:hover { text-decoration: none; }

.wf-pubnav-links { display: flex; align-items: center; gap: .5rem; }
.wf-pubnav-links .mx-btn { width: auto; min-height: 40px; }

.wf-pubnav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 10px;
  background: transparent; color: var(--text-strong, var(--text-main));
  border: 1px solid var(--border-color); cursor: pointer;
}
.wf-pubnav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .wf-pubnav-toggle { display: inline-flex; }
  .wf-pubnav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .4rem;
    padding: .85rem clamp(1rem, 4vw, 2rem) 1.1rem;
    /* OPAQUE, deliberately.  --bg-topbar is semi-transparent (it is
       designed to sit over page content with a blur), and the drawer
       opens over a full-bleed photograph - the links were legible only
       where the picture happened to be dark. */
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 18px 40px rgb(0 0 0 / .28);
    /* closed by default; `hidden` is unusable here because matrix.css
       declares `.hidden { display:none !important }` platform-wide. */
    display: none;
  }
  html.theme-dark .wf-pubnav-links { background: #0c0a09; }
  .wf-pubnav-links.is-open { display: flex; }
  .wf-pubnav-links .mx-btn { width: 100%; justify-content: center; }
  /* the bar itself is opaque too, so the drawer reads as one surface */
  .wf-pubnav { background: #ffffff; }
  html.theme-dark .wf-pubnav { background: #0c0a09; }
}

/* ── 3 + 4. full-bleed sections that actually reach the edges ─────── */
.wf-flush {
  /* `100vw` includes the scrollbar; `100%` of the viewport-sized wrapper
     does not, which is why the page scrolled sideways. */
  position: relative; width: 100%; max-width: none;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: 0; padding-right: 0;
}
@supports (width: 100dvw) {
  .wf-flush { margin-left: calc(50% - 50dvw); margin-right: calc(50% - 50dvw); }
}
/* the hero is the first thing on the page: no gap above it */
.wf-flush-top { margin-top: calc(var(--wf-container-pad, 1.75rem) * -1); }
html, body { overflow-x: clip; }

/* ── 5. type that stays readable on a photograph ──────────────────── */
.wf-on-photo { color: #fff; }
.wf-on-photo-sub {
  color: rgb(255 255 255 / .94);
  text-shadow: 0 1px 2px rgb(0 0 0 / .55), 0 2px 18px rgb(0 0 0 / .45);
}

/* ── 6. the coming-soon stage ─────────────────────────────────────── */
.wf-stage { position: relative; min-height: 100vh; min-height: 100dvh;
            display: flex; flex-direction: column; overflow: hidden; }
.wf-stage-bg { position: fixed; inset: 0; z-index: -2; }
.wf-stage-bg .wf-stage-slide {
  position: absolute; inset: 0; background-size: cover;
  background-position: center; opacity: 0;
  animation: wfStageFade 32s ease-in-out infinite;
}
.wf-stage-bg .wf-stage-slide:nth-child(1) { animation-delay:  0s; }
.wf-stage-bg .wf-stage-slide:nth-child(2) { animation-delay:  8s; }
.wf-stage-bg .wf-stage-slide:nth-child(3) { animation-delay: 16s; }
.wf-stage-bg .wf-stage-slide:nth-child(4) { animation-delay: 24s; }
@keyframes wfStageFade {
  0%, 3%   { opacity: 0; }
  9%, 25%  { opacity: 1; }
  31%,100% { opacity: 0; }
}
/* THE SCRIM IS THEME-AWARE.  A single dark wash made the light theme
   unreadable-by-design; the light palette gets a bright veil instead so
   its dark type keeps its contrast. */
.wf-stage-scrim { position: fixed; inset: 0; z-index: -1; }
.wf-stage-scrim {
  /* The CARD carries the contrast for the copy, so the veil only has to
     calm the photograph - not erase it.  At .82+ the imagery was washed
     to near-white and the "fullscreen slideshow" was invisible. */
  background:
    linear-gradient(180deg, rgb(255 255 255 / .58) 0%, rgb(255 255 255 / .68) 55%, rgb(255 255 255 / .80) 100%),
    linear-gradient(120deg, rgb(249 115 22 / .12), transparent 62%);
}
html.theme-dark .wf-stage-scrim {
  background:
    linear-gradient(180deg, rgb(12 10 9 / .62) 0%, rgb(12 10 9 / .74) 55%, rgb(12 10 9 / .88) 100%),
    linear-gradient(120deg, rgb(249 115 22 / .24), transparent 62%);
}
@media (prefers-reduced-motion: reduce) {
  .wf-stage-bg .wf-stage-slide { animation: none; }
  .wf-stage-bg .wf-stage-slide:nth-child(1) { opacity: 1; }
}

/* the glass card the message sits on — legible over any frame */
.wf-glass {
  background: rgb(255 255 255 / .86);
  border: 1px solid rgb(0 0 0 / .08);
  box-shadow: 0 30px 80px rgb(0 0 0 / .18);
  backdrop-filter: blur(16px) saturate(130%);
  border-radius: 22px;
}
html.theme-dark .wf-glass {
  background: rgb(18 16 15 / .80);
  border-color: rgb(255 255 255 / .12);
  box-shadow: 0 30px 80px rgb(0 0 0 / .55);
}

/* a theme switch the anonymous visitor can actually reach */
.wf-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--text-strong, var(--text-main));
  border: 1px solid var(--border-color);
}
.wf-theme-toggle svg { width: 20px; height: 20px; }
.wf-theme-toggle .wf-icon-sun { display: none; }
html.theme-dark .wf-theme-toggle .wf-icon-sun { display: block; }
html.theme-dark .wf-theme-toggle .wf-icon-moon { display: none; }