@page {
  size: A4;
  margin: 12mm;
}

/* Apply these styles for actual printing */
@media print {
  body {
    background: white;
  }

  .page {
    max-width: none;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
  }

  .header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name social"
      "details details";
  }

  .profile-image {
    display: none;
  }

  .section,
  .experience-item {
    break-inside: avoid;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .social-links a {
    background: white;
  }

  .social-image {
    filter: grayscale(100%);
    opacity: 1;
  }
}

/* Apply the exact same styles on screen for the /print/ route */
body.is-print {
  background: white;
}

body.is-print .page {
  max-width: none;
  border: none;
  box-shadow: none;
  margin: 2rem auto;
  max-width: 980px; /* Optional: cap the width on screen so it looks like an A4 paper */
  padding: 0;
}

body.is-print .header {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name social"
    "details details";
}

body.is-print .profile-image {
  display: none;
}

body.is-print a {
  color: inherit;
  text-decoration: none;
}

body.is-print .social-links a {
  background: white;
}

body.is-print .social-image {
  filter: grayscale(100%);
  opacity: 1;
}