/* Exact match to main app global styles (useGlobalStyles in RoastMyResume.jsx) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; }
body { background: #000; color: #EAEAEA; font-family: 'Inter', Helvetica, sans-serif; overflow-x: hidden; line-height: 1.7; }
a { color: inherit; text-decoration: none; }

/* Page wrapper — replicates main app outer <div style="padding:2rem"> */
.page-wrap { min-height: 100vh; padding: 2rem; }

/* Header — exact match to main app header inline styles */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  border-bottom: 1px solid #333;
  padding-bottom: 1rem;
}

/* Wordmark — exact match */
.wordmark {
  font-family: 'Space Grotesk', 'Arial Black', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  text-transform: uppercase;
  color: #EAEAEA;
}
.wordmark:hover { color: #FF0099; }

/* Nav — exact match to NavItem component (non-compact, desktop) */
nav { display: flex; flex-wrap: wrap; gap: .75rem; }
nav a {
  display: inline-block;
  color: #EAEAEA;
  text-decoration: none;
  font-size: .7rem;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  transition: all .2s;
  text-shadow: none;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
}
nav a:hover, nav a.active {
  color: #FF0099;
  text-shadow: 0 0 10px #FF0099;
  border-bottom: 1px solid #FF0099;
}

/* Mobile — match main app compact/isMobile behavior (< 760px) */
@media (max-width: 759px) {
  .page-wrap { padding: 1rem; }
  header { align-items: flex-start; }
  .wordmark { font-size: 1.25rem; }
  nav { gap: .35rem; }
  nav a { font-size: .64rem; letter-spacing: 1px; padding: 8px 8px; }
}

/* Tablet — match main app isTablet behavior (< 1100px) */
@media (max-width: 1099px) {
  header { flex-wrap: wrap; gap: .75rem; }
}

/* Footer — matches main app footer */
footer {
  border-top: 1px solid #333;
  padding-top: 1rem;
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .6rem;
  color: #555;
}

/* Shared CTA block */
.cta { margin: 3rem 0; background: #0d0d0d; border: 1px solid #1e1e1e; padding: 2rem 1.75rem; }
.cta h2 { font-family: 'Space Grotesk', 'Arial Black', sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; color: #EAEAEA; }
.cta p { font-size: .82rem; color: #666; margin-bottom: 1.25rem; }
.cta-btn { display: inline-block; background: #FF0099; color: #000; font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: .75rem 1.75rem; transition: opacity .15s; text-decoration: none; }
.cta-btn:hover { opacity: .85; }