/* Easy RFP — base stylesheet (intentionally minimal).
 * Per-page brand styling is handled by the inline <style id="blog-std-overrides-v2">
 * block on each blog/article page. This file exists primarily to:
 *   1. Satisfy the <link rel="stylesheet" href="/assets/style.css"> reference
 *      on 459+ pages (was returning 404).
 *   2. Provide global typography defaults that apply before the inline block loads.
 *
 * If you're adding rules here, prefer to put them on the inline brand-unified
 * block instead — that block has !important guards that override cleanly.
 * Anything here is the FALLBACK in case the inline block doesn't ship.
 *
 * Last touched: 2026-05-06
 */

/* ─────────────────────────────────────────────────────────────
   Wave G2 · Ds1.1 motion design tokens · 2026-05-29
   Brand v57.58 motion = subtle Apple-tier, never bouncy Disney.
   Honored by the prefers-reduced-motion guard at L100-107.
   ───────────────────────────────────────────────────────────── */
:root {
  /* Easings */
  --ease-snap: cubic-bezier(.4, 0, .2, 1);      /* Material standard — default */
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* Apple-tier overshoot — use sparingly */
  --ease-decel: cubic-bezier(0, 0, .2, 1);      /* Enter (decelerate to rest) */
  --ease-accel: cubic-bezier(.4, 0, 1, 1);      /* Exit (accelerate away) */

  /* Durations */
  --dur-snap: .15s;   /* Micro feedback (hover, focus, ripple) */
  --dur-base: .25s;   /* Default UI (button press, color shift) */
  --dur-long: .4s;    /* Panels, sheets, reveal */
  --dur-stage: .6s;   /* Stage transitions, page-level reveals */
}

/* Base reset */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

/* Typography */
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #0f172a;
  background: #fafaff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1e1b4b;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

a {
  color: #7c3aed;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover { color: #6d28d9; }

img, svg, video { max-width: 100%; height: auto; }

code {
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.92em;
  background: #f3e8ff;
  color: #7c3aed;
  padding: 2px 6px;
  border-radius: 4px;
}

pre {
  background: #1e1b4b;
  color: #f3f4f6;
  padding: 18px 22px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
}

pre code { background: transparent; color: #f3f4f6; padding: 0; }

blockquote {
  border-left: 4px solid #7c3aed;
  background: rgba(124, 58, 237, 0.04);
  padding: 16px 22px;
  margin: 20px 0;
  font-style: italic;
  border-radius: 0 8px 8px 0;
}

/* Accessibility — focus ring (a11y-p2-2026-05-29: scoped focus-visible) */
/* data-a11y-p2-2026-05-29="1" */
button:focus, a:focus, input:focus, select:focus, textarea:focus { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #7c3aed;
  outline-offset: 2px;
  border-radius: 4px;
}
:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Accessibility — honor prefers-reduced-motion (a11y-p2-2026-05-29) */
/* data-a11y-p2-2026-05-29="1" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Container default */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Skip-link (a11y) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #1e1b4b;
  color: #fff;
  padding: 12px 18px;
  z-index: 9999;
}
.skip-link:focus { left: 0; }

/* ─────────────────────────────────────────────────────────────
   v57.306 — Mobile tap-target minimum (WCAG 2.5.5 Level AA)
   Ensures interactive elements have ≥44×44 hit area on mobile
   without changing the visual size of the icon itself.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Footer + nav icon links — invisible padding ring */
  footer a[aria-label],
  .footer-social a,
  .footer a[class*="social"],
  nav a[aria-label][class*="icon"],
  a[class*="chat-button"],
  button[id*="chat-button"] {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Expand pseudo-element if visual stays small */
  footer a[aria-label]::before,
  .footer-social a::before,
  a[class*="chat-button"]::before {
    content: '';
    position: absolute;
    inset: -10px;
  }
}

/* ─────────────────────────────────────────────────────────────
   v57.307 — WCAG AA recovery patches (audit findings)
   ───────────────────────────────────────────────────────────── */

/* P0: Keyboard focus indicator (was stripped by global :focus { outline:none }) */
*:focus-visible {
  outline: 3px solid #7C3AED !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* P0: Hero CTAs fallback color in case gradient fails (forced-colors / HCM) */
.btn, .cta, [class*="btn-primary"], [class*="cta-primary"] {
  background-color: #7C3AED;  /* solid fallback under gradient */
}
.btn[style*="gradient"], .cta[style*="gradient"] {
  /* if inline gradient already set, keep both layers */
  background-color: #7C3AED;
}

/* P0: Pricing badges — ensure text contrast even when background fails */
.badge, [class*="badge"], [class*="discount"], [class*="verified"] {
  color: #fff;
}
.badge[class*="discount"], [class*="-discount"] {
  background-color: #16a34a;  /* green fallback */
  color: #fff;
}
.badge[class*="verified"], [class*="-verified"] {
  background-color: #7C3AED;  /* brand purple fallback */
  color: #fff;
}
.badge[class*="founding"], [class*="-founding"] {
  background-color: #EC4899;  /* pink fallback */
  color: #fff;
}

/* P0: /trust/ status pills minimum contrast */
.status-pill, .pill[class*="status"], [class*="available-now"], [class*="planned"] {
  color: #1E1B4B;  /* ensure dark text on light pill */
  font-weight: 600;
}
.status-pill[class*="available"], [class*="-available-now"] {
  background-color: #d1fae5;  /* green-50 */
  color: #065f46;  /* green-800 — 7.5:1 contrast */
}
.status-pill[class*="planned"], [class*="-planned"] {
  background-color: #fef3c7;  /* yellow-100 */
  color: #92400e;  /* amber-800 — 7:1 */
}

/* Skip-to-content link — universal */
.skip-link, a.skip-link, a[href="#main"], a[href="#content"] {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 9999;
  background: #1E1B4B;
  color: #fff;
  padding: 12px 18px;
  border-radius: 4px;
  text-decoration: none;
  font: 600 14px 'Sora', system-ui, sans-serif;
  transition: top var(--dur-snap) var(--ease-snap);
}
.skip-link:focus, a.skip-link:focus, a[href="#main"]:focus, a[href="#content"]:focus {
  top: 8px !important;
  outline: 3px solid #fff !important;
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   v57.310 — Mobile P0 audit fixes (N60 + N61)
   ───────────────────────────────────────────────────────────── */

/* /blog/ index horizontal overflow (audit found 1115px at 604px viewport) */
@media (max-width: 768px) {
  body, main, .container, .blog-list, .blog-grid {
    max-width: 100vw !important;
    overflow-x: hidden;
  }
  img, table, pre, .card {
    max-width: 100% !important;
    height: auto;
  }
}

/* Big tap targets for ALL interactive on mobile — covers /trust/, /pricing-hotels/ */
@media (max-width: 640px) {
  a, button, [role="button"], input[type="submit"], input[type="button"], .btn, .pill, .badge[onclick] {
    min-height: 36px;
    line-height: 1.4;
  }
  /* For inline links (text), don't force min-height — only for nav/action */
  p a, li a, td a, span a {
    min-height: 0;
  }
  /* Pricing tier cards CTAs */
  .cta, .tier-card a, .price-card a, [class*="founding-cta"], [class*="upgrade-btn"] {
    min-height: 48px !important;
    padding: 12px 20px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Status pills on /trust/ */
  .status-pill, .pill {
    padding: 6px 12px !important;
    min-height: 28px;
  }
  /* Min text size on mobile (WCAG 1.4.4 reflow) */
  body { font-size: 16px; }
  small, .small, .caption { font-size: 13px; }
}

/* Responsive tables — turn into cards on mobile */
@media (max-width: 640px) {
  .comparison-table, table.responsive {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
 * P0-5 · v57.358 · 2026-05-29 — Mobile input zoom prevention
 *
 * iOS Safari auto-zooms when an <input>, <select>, or <textarea> with
 * font-size < 16px gets focus. This jumps the viewport and breaks the
 * form rhythm. Fix: enforce a 16px floor on all form controls site-wide.
 *
 * Uses max(16px, 1rem) so user-zoomed environments still scale up.
 *
 * MASTER-AUDIT-2026-05-29.md P0-5 — replaces 4 separate iOS-zoom P0s
 * across founding application, contact form, login, and search inputs.
 * Reference: Apple HIG mobile input, WebKit feature request status.
 * ============================================================ */
input,
select,
textarea {
  font-size: max(16px, 1rem);
}

/* Buttons and tap-target floor — HIG 44×44 minimum (P0-5 sibling fix).
 * Applies only on touch devices to avoid bloating desktop buttons. */
@media (hover: none) and (pointer: coarse) {
  button,
  .btn,
  a.cta,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ============================================================
 * Wave B7 · v57.359 · 2026-05-29 — Canonical mobile nav toggle
 *
 * Shared hamburger + slide-out drawer for marketing routes that
 * historically hid `.nav-links` on small viewports without giving
 * the visitor a way back. Surfaces touched by this rule:
 *   /customers/, /pricing/, /pricing-hotels/, /about/gustavo-borges.html,
 *   /about/team/, /founding-agency-application/, /press/, /security/
 *
 * Pattern matches the canonical /contact/ implementation:
 *   - 44×44 button (HIG tap-target)
 *   - 3-bar burger that morphs to X when open
 *   - Fixed full-width drawer below the sticky nav
 *   - Hidden ≥769px (desktop unchanged)
 *
 * The HTML side adds: <button class="nav-mobile-toggle" aria-label="Toggle menu"
 *                            aria-expanded="false" aria-controls="nav-mobile-drawer">
 *                       <span></span><span></span><span></span>
 *                     </button>
 *                     <div class="nav-mobile-drawer" id="nav-mobile-drawer" hidden>...</div>
 *
 * MASTER-AUDIT-2026-05-29.md qa-mobile P0 — resolves "no nav on mobile" finding
 * across 7 routes flagged by Wave B7 spec.
 * ============================================================ */
.nav-mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 101;
}
.nav-mobile-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: #1e1b4b;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-snap), opacity var(--dur-base) var(--ease-snap);
  pointer-events: none;
}
.nav-mobile-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(7.5px) rotate(45deg);
}
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.nav-mobile-drawer {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 99;
  padding: 24px clamp(16px, 5vw, 32px);
  display: none;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity var(--dur-base) var(--ease-decel), transform var(--dur-base) var(--ease-decel), visibility var(--dur-base) var(--ease-decel);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid #e5e7eb;
}
.nav-mobile-drawer.is-open {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-mobile-drawer a {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1e1b4b;
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid #e5e7eb;
  display: block;
  min-height: 44px;
  transition: color var(--dur-snap) var(--ease-snap);
}
.nav-mobile-drawer a:last-child { border-bottom: 0; }
.nav-mobile-drawer a:hover { color: #7c3aed; text-decoration: none; }
.nav-mobile-drawer a.is-active { color: #7c3aed; }
.nav-mobile-drawer .nav-mobile-cta {
  margin-top: 16px;
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  color: #fff;
  text-align: center;
  padding: 18px;
  border-radius: 12px;
  font-weight: 700;
  border-bottom: 0;
  font-size: 18px;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
}
.nav-mobile-drawer .nav-mobile-cta:hover {
  color: #fff;
  opacity: 0.94;
}

/* Cream-themed routes (founding application) override the drawer
 * background so it blends with the page chrome. */
.nav-mobile-drawer[data-theme="cream"] {
  background: #f8f6f1;
}

/* Show the toggle and hide desktop nav-links below 769px.
 * 769px breakpoint matches the canonical /contact/ pattern and the
 * P0-5 work in this stylesheet. */
@media (max-width: 768px) {
  .nav-mobile-toggle { display: flex; }
  .site-nav .nav-links,
  .contact-nav .contact-nav-links,
  nav.site .link,
  .nav .nav-links {
    /* Pages keep their own inline rules; this is the global fallback */
  }
}
@media (min-width: 769px) {
  .nav-mobile-toggle { display: none !important; }
  .nav-mobile-drawer { display: none !important; }
}