/* SITE CHROME — nav + footer + buttons + brand tokens for ALL public pages
   (home, /start, /createcompany, /reset-password). This file is the single place
   to restyle the shared header/footer; the markup lives in public/partials/.
   Load order: on the home page this loads AFTER styles.css so these rules win. */
:root{
  --purple:#6523D0;
  --purple-600:#5c1fc4;
  --purple-700:#521bb2;
  --purple-800:#4a18a2;
  --purple-900:#3f1490;
  --purple-lt:#8248e6;
  --ink:#3f1490;
  --violet:#8b3bf0;
  --lilac:#b98bff;
  --pink:#ff5da2;
  --cyan:#22d3ee;
  --amber:#ffce4d;
  --mint:#3ee6a0;
  --white:#ffffff;
  --paper:#f6f2ff;
  --line:rgba(255,255,255,.14);
  --shadow:0 30px 80px -20px rgba(20,4,60,.6);
  --radius:22px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:"Outfit",system-ui,sans-serif;
}

/* base bits the chrome needs even on pages with their own styles.
   :where() = ZERO specificity, so .btn--solid etc. always beat these resets
   (a plain ".nav a" reset was out-ranking the button colour → white-on-white). */
:where(.nav, .foot) a{color:inherit;text-decoration:none;cursor:pointer}
:where(.nav, .foot) img{max-width:100%;display:block}

/* ---------- buttons ---------- */
.btn{
  --pad:.7em 1.15em;
  display:inline-flex;align-items:center;gap:.5em;
  font:inherit;font-weight:600;font-size:.95rem;
  padding:var(--pad);border-radius:100px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s;
  white-space:nowrap;
}
.btn em{font-style:normal;transition:transform .3s var(--ease)}
.btn:hover em{transform:translate(2px,-2px)}
.btn--lg{font-size:1.05rem;padding:.9em 1.5em}
.btn--solid{background:var(--white);color:var(--purple);box-shadow:0 10px 30px -10px rgba(255,255,255,.4)}
.btn--solid:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(255,255,255,.55)}
.btn--ghost{background:transparent;color:#fff;border-color:transparent}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.btn--line{background:rgba(255,255,255,.06);color:#fff;border-color:var(--line);backdrop-filter:blur(6px)}
.btn--line:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.5)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:1.5rem;
  padding:1rem clamp(1rem,4vw,3rem);
  font-family:var(--font);color:#fff;
  transition:background .4s,padding .4s,box-shadow .4s;
}
.nav.scrolled{background:rgba(101,35,208,.75);backdrop-filter:blur(14px);padding-top:.7rem;padding-bottom:.7rem;box-shadow:0 1px 0 var(--line)}
.nav__logo{height:40px;width:auto}
/* links + CTAs share ONE container so the mobile dropdown stacks cleanly */
.nav__menu{display:flex;align-items:center;gap:1.6rem;margin-left:auto}
.nav__links{display:flex;gap:1.6rem;font-weight:500;font-size:.98rem}
.nav__links a{position:relative;transition:opacity .25s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--lilac);transition:width .3s var(--ease)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{width:100%}
.nav__cta{display:flex;gap:.6rem}
/* width/margin set EXPLICITLY: auth pages style bare <button> (width:100%,margin-top)
   which was stretching the burger full-width and squishing the logo. */
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;margin:0 0 0 auto;width:auto;flex:0 0 auto}
.nav__burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s}

/* ---------- footer ---------- */
.foot{background:var(--purple); /* same as the page body so it feels part of it */text-align:center;padding:3.5rem 1.5rem 2.5rem;
  font-family:var(--font);color:#fff;position:relative;z-index:20;width:100%;box-sizing:border-box}
.foot__logo{height:26px;margin:0 auto 1rem;opacity:.9}
.foot p{margin:0 0 1.3rem}
.foot__links{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.6rem;font-weight:500}
.foot__links a{transition:.2s}
.foot__links a:hover{text-decoration:underline}
.foot__tag{font-weight:500;margin:0 0 .35rem} /* same size/weight as the footer links */
.foot small{font-size:.82rem;display:block}
.foot__solidco{margin:0 0 .5rem} /* directly under the tag, no special top padding */
.foot__solidco a{color:#fff}

/* ---------- mobile nav: ONE stacked, CENTRED dropdown panel ---------- */
@media(max-width:900px){
  .nav__menu{display:none}
  .nav__burger{display:flex}
  .nav.open .nav__menu{
    display:flex;flex-direction:column;align-items:center;gap:1.1rem;
    position:absolute;top:100%;left:0;right:0;margin:0;
    padding:1.4rem 1.5rem 1.6rem;background:rgba(101,35,208,.98);backdrop-filter:blur(14px);
    box-shadow:0 24px 40px -20px rgba(20,4,60,.5);
  }
  .nav.open .nav__links{display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center;margin:0}
  .nav.open .nav__cta{display:flex;flex-direction:column;gap:1.1rem;padding-top:0;width:100%;max-width:300px;margin:0 auto}
  .nav.open .nav__cta .btn{justify-content:center;width:100%}
  /* Login reads like the other menu links (plain white text, same rhythm) */
  .nav.open .nav__links a{opacity:1}
  .nav.open .nav__cta .btn--ghost{background:none;border:0;padding:0;width:auto;font-weight:500;font-size:.98rem;opacity:1}
  /* less dead air above the footer on phones */
  .foot{padding:2.2rem 1.5rem 2rem}
  .btn--lg{font-size:.98rem}
}