/* 2weekAI Shared Design System
 * Single source of truth for tokens, base styles, navigation, and footer.
 * Sourced from consulting/index.html (cleanest reference) + complete dropdown/hamburger
 * patterns proven across standardized pages (tools, bootcamp, audience).
 *
 * Usage:
 *   <link rel="stylesheet" href="/2weekai-shared.css">
 *   (Place after Google Fonts, before page-specific <style>.)
 *
 * Then include the matching HTML nav structure (.tw-nav + dropdown + hamburger + .tw-mobile-nav)
 * and the <script src="/2weekai-nav.js"></script> before </body>.
 *
 * Per AGENTS.md §1 and §5: this is the mandatory design system.
 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
*:focus-visible{outline:2px solid var(--ai-red);outline-offset:3px;border-radius:4px}

:root{
  /* Core 2weekAI tokens (cream/red system) */
  --ai-cream:#FAFAF8;--ai-cream-2:#F4F1EB;--ai-white:#FFFFFF;
  --ai-dark:#1A1917;--ai-dark-2:#111009;--ai-mid:#57534E;
  --ai-muted:#A8A29E;--ai-border:#E6E3DE;
  --ai-red:#DC2626;--ai-red-2:#B91C1C;--ai-red-dim:rgba(220,38,38,0.06);
  --ai-teal:#0F766E;--ai-green:#15803D;--ai-green-dim:rgba(21,128,61,0.08);
  --ai-learn:#6D28D9;--ai-build:#0369A1;
  --rl-serif:'Fraunces',Georgia,serif;
  --rl-sans:'Inter',system-ui,sans-serif;
  --rl-mono:'DM Mono',monospace;
  --rl-px:clamp(22px,5vw,40px);--rl-max:680px;--rl-max-wide:1100px;
  --rl-r:12px;--rl-r-sm:8px;--rl-r-lg:16px;
  --rl-sh-sm:0 1px 3px rgba(0,0,0,0.04),0 4px 14px rgba(0,0,0,0.06);
  --rl-sh-lift:0 8px 36px rgba(0,0,0,0.11);

  /* Legacy aliases (transitional support for older page CSS) */
  --navy-deep: var(--ai-dark-2);
  --fh: var(--rl-serif);
  --font-head: var(--rl-serif);
  --font-body: var(--rl-sans);
  --border: var(--ai-border);
  --silver: var(--ai-muted);
  --lgray: var(--ai-cream-2);
  --dgray: var(--ai-dark);
  --white: var(--ai-white);
  --blue-light: var(--ai-teal);
  /* Older homepage aliases kept for zero-breakage during rollout */
  --navy:var(--ai-dark);--orange:var(--ai-red);--orange-h:var(--ai-red-2);
  --bg:var(--ai-cream);--bg-alt:var(--ai-cream-2);--text:var(--ai-dark);
  --mid:var(--ai-mid);--muted:var(--ai-muted);--green:var(--ai-green);

  /* Legacy chart / accent colors used by older audience pages (accounting, law-firms, real-estate, etc.) */
  --lblue:#60A5FA;
  --fb:#3B82F6;
  --lgreen:#86EFAC;
  --dgreen:#059669;
  --lamber:#FCD34D;
  --amber:#D97706;
  --black:#1A1917;
}

html{font-family:var(--rl-sans);background:var(--ai-cream);color:var(--ai-dark);-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-family:var(--rl-serif);line-height:1.1;letter-spacing:-0.025em;font-weight:700}
.label{font-family:var(--rl-mono);font-weight:600;font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ai-red)}
.container{max-width:1100px;margin:0 auto;padding:0 var(--rl-px)}
section{padding:clamp(72px,11vw,120px) 0}

/* STANDARDIZED NAV (full with dropdown + mobile) */
.tw-nav{position:sticky;top:0;z-index:50;background:rgba(253,253,253,0.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--ai-border);padding:0 var(--rl-px);display:flex;align-items:center;justify-content:space-between;height:80px}
.tw-brand{font-family:var(--rl-serif);font-size:1.25rem;font-weight:700;color:var(--ai-dark);text-decoration:none}
.tw-brand .brand{color:var(--ai-red)}
.tw-nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.tw-nav-links a{font-family:var(--rl-sans);font-weight:600;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ai-muted);transition:color 0.2s}
.tw-nav-links a:hover,.tw-nav-links a.current{color:var(--ai-red)}
.tw-cta{background:var(--ai-red);color:#fff;padding:10px 22px;border-radius:5px;font-family:var(--rl-sans);font-weight:700;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;transition:background 0.2s;white-space:nowrap}
.tw-cta:hover{background:var(--ai-red-2)}

.tw-dropdown{position:relative}
.tw-dropdown-btn{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:7px 11px;font-size:0.875rem;font-weight:500}
.tw-dropdown-menu{display:none;position:absolute;top:100%;left:0;background:var(--ai-white);border:1px solid var(--ai-border);box-shadow:0 4px 12px rgba(0,0,0,0.1);min-width:160px;z-index:100;padding:8px 0}
.tw-dropdown:hover .tw-dropdown-menu{display:block}
.tw-dropdown-menu a{display:block;padding:6px 16px;font-size:0.875rem;color:var(--ai-mid)}
.tw-dropdown-menu a:hover{background:var(--ai-cream-2);color:var(--ai-dark)}

.tw-hamburger{display:none;background:none;border:none;width:28px;height:28px;flex-direction:column;justify-content:center;gap:4px;cursor:pointer}
.tw-hamburger span{display:block;height:2px;width:22px;background:var(--ai-dark);transition:all .2s}

.tw-mobile-nav{display:none;position:fixed;top:80px;left:0;right:0;background:var(--ai-white);border-top:1px solid var(--ai-border);padding:24px var(--rl-px);flex-direction:column;gap:16px;z-index:60}
.tw-mobile-nav.open{display:flex}
.tw-mobile-group{display:flex;flex-direction:column;gap:8px;padding-left:12px}
.tw-mobile-label{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--ai-muted);margin-bottom:4px}
.tw-mobile-cta{background:var(--ai-red);color:#fff;padding:10px 22px;border-radius:5px;font-family:var(--rl-sans);font-weight:700;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;text-align:center}

@media(max-width:768px){
  .tw-nav-links{display:none}
  .tw-hamburger{display:flex}
  .tw-mobile-nav{display:none;position:fixed;top:80px;left:0;right:0;background:var(--ai-white);border-top:1px solid var(--ai-border);padding:24px var(--rl-px);flex-direction:column;gap:16px;z-index:60}
  .tw-mobile-nav.open{display:flex}
}

/* NEW NAV DROPDOWNS + SEARCH PLACEHOLDER (added for 2026 restructure) */
/* Note: Resources dropdown updated 2026-06: removed Process Guides (LeanStream is Product in Solutions), added Guides -> /blog */
.tw-dropdown-divider {
  padding: 8px 16px 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ai-muted);
  border-top: 1px solid var(--ai-border);
  margin-top: 6px;
  pointer-events: none;
}

.tw-search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: var(--ai-muted);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  font-size: 15px;
  margin-left: 4px;
}
.tw-search-trigger:hover {
  color: var(--ai-red);
  background: var(--ai-cream-2);
}
.tw-search-trigger span {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>') no-repeat center / contain;
}

.tw-search-container {
  position: fixed;
  top: 80px; /* after .tw-nav (80px) */
  left: 0;
  right: 0;
  background: var(--ai-cream);
  border-bottom: 1px solid var(--ai-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 45;
  padding: 16px var(--rl-px);
  /* future JS will populate and toggle display */
}

/* mobile adjustments for new groups */
@media(max-width:768px){
  .tw-mobile-nav details { border-bottom: 1px solid var(--ai-border); }
  .tw-mobile-nav details:last-child { border-bottom: none; }
  .tw-mobile-nav summary { list-style: none; cursor: pointer; }
  .tw-mobile-nav summary::-webkit-details-marker { display: none; }
  .tw-mobile-nav details[open] summary { color: var(--ai-red); }
}

/* FOOTER (standard 2weekAI / ReinvestLife variant) */
footer{background:var(--ai-dark-2);padding:36px var(--rl-px);margin-top:auto}
.footer-brand{font-family:var(--rl-mono);font-size:1rem;font-weight:500;color:rgba(255,255,255,0.5);letter-spacing:0.02em}
.footer-brand span{color:rgba(220,38,38,0.6)}
.footer-links{display:flex;flex-wrap:wrap;gap:16px}
.footer-links a{font-size:0.82rem;color:rgba(255,255,255,0.3);transition:color 0.15s}
.footer-links a:hover{color:rgba(255,255,255,0.65)}
.footer-copy{font-size:0.75rem;color:rgba(255,255,255,0.2);letter-spacing:0.02em}

@media(max-width:768px){
  footer{flex-direction:column;text-align:center}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}