@import "tailwindcss";
@plugin "@tailwindcss/typography";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

.prose {
  width: 100%;
  max-width: none;
  word-break: break-word;
}

@media print {
  @page {
    size: A4;
    margin: 0 !important; /* Use 0 here, and handle padding in the React component */
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
  }

  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  /* Force the body to be the exact width of A4 to prevent scaling */
  body {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 0;
    background: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide everything outside the CV content */
  #safari-extension-is-installed,
  main a[href="/"],
  main a[href*="back"],
  footer,
  .no-print {
    display: none !important;
  }

  /* Ensure the PageLayout wrapper doesn't add width or centering */
  main {
    display: block !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: white !important;
    color: black !important;
  }

  /* 3. Ensure the inner container doesn't push content down */
  main > div {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  /* 4. Fix the "page break" issue after the title */
  h1,
  header {
    break-after: avoid;
    break-inside: avoid;
  }
}