/* =========================================================================
   components.css — button primitives reproduced from the prototype's
   Button.jsx (primary + secondary). The design-system files
   (colors_and_type.css, landing.css) are kept verbatim; these are the only
   styles the React-inline Button carried that aren't in those files.
   ========================================================================= */

.btn-primary,
.btn-secondary {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.005em;
  cursor: pointer;
  border: 0;
  transition: background var(--dur-small) var(--ease-smooth),
              color var(--dur-small) var(--ease-smooth),
              border-color var(--dur-small) ease,
              transform var(--dur-micro) var(--ease-smooth);
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--bg-elevated);
  padding: 14px 32px;
  border-radius: 4px;
}
.btn-primary:hover {
  background: var(--accent-primary-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-bottom: 1px solid var(--text-primary);
  padding: 8px 0;
  border-radius: 0;
}
.btn-secondary:hover {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

/* The mock forms are display:flex, which would override the UA [hidden] rule
   (class beats attribute). Let [hidden] win so JS can swap form → success. */
.presell-form[hidden],
.final-form[hidden] { display: none; }

/* =========================================================================
   "Dla ciebie" nav dropdown — CSS-only (hover + focus-within, keyboard ok).
   Lives in the sticky nav on the landing page and every subpage.
   ========================================================================= */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-toggle {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color var(--dur-small) ease;
}
.nav-dd-toggle:hover,
.nav-dd:focus-within .nav-dd-toggle { color: var(--accent-primary); }
.nav-dd-caret {
  font-size: 10px;
  line-height: 1;
  transition: transform var(--dur-small) var(--ease-smooth);
}
.nav-dd:hover .nav-dd-caret,
.nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); }

.nav-dd-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 248px;
  background: var(--bg-elevated);
  border: 1px solid var(--bg-paper);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-small) ease,
              transform var(--dur-small) var(--ease-smooth),
              visibility var(--dur-small);
  z-index: 40;
}
/* invisible bridge across the 14px gap so the menu stays open on the way down */
.nav-dd-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px; height: 14px;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dd-menu a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background var(--dur-small) ease, color var(--dur-small) ease;
}
.nav-dd-menu a:hover { background: var(--bg-paper); color: var(--accent-primary); }
.nav-dd-soon {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-tertiary);
  padding: 10px 12px;
  margin-top: 4px;
  border-top: 1px solid var(--bg-paper);
  display: flex; align-items: baseline; gap: 8px;
  cursor: default;
}
.nav-dd-soon em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-secondary);
}

/* The dropdown follows the other nav links: hidden once the burger takes over. */
@media (max-width: 960px) {
  .nav-links .nav-dd { display: none; }
}

/* =========================================================================
   Home hero headline — trimmed a touch so it doesn't fill the whole header
   (overrides only the font-size from landing.css .hero-h1).
   ========================================================================= */
.hero-h1 { font-size: clamp(2.25rem, 4.6vw, 3.85rem); }

/* =========================================================================
   Mobile menu (hamburger) — built by main.js from the existing nav, so it
   works identically on the landing page and every static subpage.
   ========================================================================= */
.nav-burger {
  display: none;
  width: 42px; height: 42px;
  margin-left: 4px;
  padding: 10px;
  border: 0; background: transparent; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px;
}
.nav-burger span {
  display: block; width: 100%; height: 2px;
  background: var(--text-primary); border-radius: 2px;
  transition: transform var(--dur-small) var(--ease-smooth), opacity var(--dur-small) ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 50; visibility: hidden; pointer-events: none; }
.mobile-menu-backdrop {
  position: absolute; inset: 0;
  background: rgba(42, 39, 35, 0.42);
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease-smooth);
}
.mobile-menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(88vw, 380px);
  background: var(--bg-elevated);
  border-left: 1px solid var(--bg-paper);
  padding: 18px 24px calc(28px + env(safe-area-inset-bottom, 0));
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-medium) var(--ease-smooth);
  overflow-y: auto;
}
.mobile-menu.open { visibility: visible; pointer-events: auto; }
.mobile-menu.open .mobile-menu-backdrop { opacity: 1; }
.mobile-menu.open .mobile-menu-panel { transform: translateX(0); }
.mobile-menu-close {
  align-self: flex-end;
  width: 40px; height: 40px; margin-bottom: 6px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--text-secondary);
}
.mobile-menu-close:hover { color: var(--accent-primary); }
.mobile-menu a {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  color: var(--text-primary);
  text-decoration: none;
  padding: 13px 4px;
  border-bottom: 1px solid var(--bg-paper);
  transition: color var(--dur-small) ease;
}
.mobile-menu a:hover { color: var(--accent-primary); }
.mobile-menu-label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 22px 0 6px;
}
.mobile-menu-soon {
  font-family: var(--font-sans);
  font-size: 1.0625rem; color: var(--text-tertiary);
  padding: 13px 4px;
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid var(--bg-paper);
}
.mobile-menu-soon em {
  font-family: var(--font-mono); font-style: normal;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-secondary);
}
.mobile-menu-cta { margin-top: 24px; }
.mobile-menu-cta > * {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
}

/* Below ~960px the full nav (links + dropdown + CTA) no longer fits next to the
   wordmark, so it collapses into the hamburger / mobile menu. */
@media (max-width: 960px) {
  .nav-burger { display: flex; }
  .nav-links > a,
  .nav-links .nav-cta { display: none; }
}
@media (min-width: 961px) {
  .mobile-menu { display: none; }
}

/* =========================================================================
   Scroll-reveal — gentle fade-up as elements enter the viewport.
   The hidden state applies ONLY under html.anim, which main.js' inline head
   script sets when the user hasn't asked for reduced motion. So no-JS and
   reduced-motion visitors get the full page immediately, never blank.
   ========================================================================= */
html.anim .hero-eyebrow,
html.anim .hero-h1,
html.anim .hero-sub,
html.anim .hero-ctas,
html.anim .hero-proof,
html.anim .problem-header,
html.anim .problem-card,
html.anim .solution-header,
html.anim .solution-row,
html.anim .route-header,
html.anim .route-copy,
html.anim .route-graphic,
html.anim .showcase-header,
html.anim .phone-shot,
html.anim .presell-left,
html.anim .presell-right,
html.anim .about-header,
html.anim .about-card,
html.anim .faq-header,
html.anim .faq-item,
html.anim .final-inner,
html.anim .sub-crumb,
html.anim .sub-hero,
html.anim .sub-section,
html.anim .site-footer > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}
html.anim .is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* =========================================================================
   Form error (Stripe / waitlist failure messages)
   ========================================================================= */
.form-error { font-size: 13px; line-height: 1.5; margin: 6px 0 0; }
.presell-form .form-error { color: var(--accent-warm); }
.final-form .form-error { color: var(--error); }

/* =========================================================================
   Cookie notice (essential-only; analytics is cookieless)
   ========================================================================= */
.cookie-bar {
  position: fixed; left: 16px; bottom: 16px; z-index: 45;
  max-width: 400px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bg-deep); color: var(--text-on-deep);
  border: 1px solid rgba(245, 240, 230, 0.12);
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 8px 30px rgba(42, 39, 35, 0.18);
  transform: translateY(150%); opacity: 0;
  transition: transform var(--dur-medium) var(--ease-smooth), opacity var(--dur-medium) ease;
}
.cookie-bar-in { transform: translateY(0); opacity: 1; }
.cookie-bar-text { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(245, 240, 230, 0.82); }
.cookie-bar-text a { color: var(--accent-warm); }
.cookie-bar-actions { display: flex; gap: 10px; justify-content: flex-end; }
.cookie-bar-btn {
  flex: 0 0 auto;
  background: var(--accent-primary); color: var(--bg-elevated);
  border: 0; border-radius: 4px; padding: 10px 16px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background var(--dur-small) ease, color var(--dur-small) ease;
}
.cookie-bar-btn:hover { background: var(--accent-primary-hover); }
.cookie-bar-btn-ghost {
  background: transparent; color: rgba(245, 240, 230, 0.75);
  border: 1px solid rgba(245, 240, 230, 0.25);
}
.cookie-bar-btn-ghost:hover { background: rgba(245, 240, 230, 0.08); color: var(--text-on-deep); }
@media (max-width: 720px) {
  .cookie-bar { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}