/* Print styles for /resume.html
 * Loaded via <link rel="stylesheet" media="print" href="./print.css" />
 *
 * Goals:
 *   - Always render as a clean light document, even when the page is in dark mode
 *   - Collapse the screen's two-column label-on-left layout into a single column
 *     so the section content uses the full page width
 *   - Tighten typography to a paper-friendly density
 *   - Keep job entries together; avoid orphaned headings
 */

@page {
  size: letter;
  margin: 0.5in 0.55in;
}

@media print {
  /* ----- Light reset ----- */

  html,
  html.dark,
  body {
    background: #ffffff !important;
    color: #18181b !important;
    color-scheme: light !important;
  }

  body {
    font-size: 10.5pt !important;
    line-height: 1.4 !important;
  }

  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Cancel dark mode variants if printing from dark */
  html.dark .dark\:text-white,
  html.dark .dark\:text-zinc-100,
  html.dark .dark\:text-zinc-200,
  html.dark .dark\:text-zinc-300,
  html.dark .dark\:text-zinc-400 {
    color: #18181b !important;
  }

  html.dark .dark\:bg-zinc-800,
  html.dark .dark\:bg-zinc-900,
  html.dark .dark\:bg-zinc-950 {
    background-color: transparent !important;
  }

  html.dark .dark\:border-zinc-800,
  html.dark .dark\:divide-zinc-800,
  html.dark .dark\:divide-zinc-800 > * + * {
    border-color: #d4d4d8 !important;
  }

  /* Accent labels: swap pastel dark-mode shades for the bolder light-mode ones
   * so the section headings read clearly on white paper */
  html.dark .dark\:text-rose-300 {
    color: #be123c !important;
  }
  html.dark .dark\:text-sky-300 {
    color: #0369a1 !important;
  }
  html.dark .dark\:text-amber-300 {
    color: #b45309 !important;
  }
  html.dark .dark\:text-lime-300 {
    color: #4d7c0f !important;
  }
  html.dark .dark\:text-fuchsia-300 {
    color: #a21caf !important;
  }
  html.dark .dark\:text-teal-300 {
    color: #0f766e !important;
  }

  /* Hide screen-only chrome */
  body > div > header,
  body > div > footer {
    display: none !important;
  }

  /* ----- Layout: full-width single column for body sections ----- */

  body > div {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Identity (first) section keeps horizontal name | address */
  main > section:first-child {
    padding-top: 0 !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid #d4d4d8 !important;
    margin-bottom: 0.4rem !important;
    align-items: end !important;
  }

  /* Every other section collapses to one column with the label as a heading row.
   * Use display: block instead of grid so gaps don't create page-break opportunities;
   * Firefox treats grid track gaps as legal break locations. */
  main > section:not(:first-child) {
    display: block !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.5rem !important;
    border: 0 !important;
  }

  /* Section labels (Summary, Skills, Experience, Education, Community)
   * become bold, mid-size, accent-colored heading rows above the content */
  main > section:not(:first-child) > p:first-child {
    font-size: 0.78rem !important;
    margin-bottom: 0.15rem !important;
    padding-bottom: 0.2rem !important;
    border-bottom: 1px solid currentColor !important;
    letter-spacing: 0.16em !important;
    /* Never let a label sit alone at the bottom of a page when its
     * content gets pushed to the next page (Experience was doing this) */
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  /* Belt-and-suspenders: keep the label glued to the first content row
   * within each section by avoiding breaks inside the section's first
   * 2-element grouping. The whole section can still split across pages
   * after the first entry. */
  main > section:not(:first-child) > p:first-child + * {
    break-before: avoid !important;
    page-break-before: avoid !important;
  }

  /* ----- Typography ----- */

  h1 {
    font-size: 2.5rem !important; /* ~35pt for an impact name header */
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
  }

  /* Tagline directly under the H1 */
  h1 + p {
    margin-top: 0.35rem !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.18em !important;
  }

  /* Summary thesis line */
  section p[class*="text-xl"] {
    font-size: 1.1rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.3rem !important;
  }

  /* Role and education titles */
  h3 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

  /* Date / location metadata under each role */
  h3 + p {
    font-size: 0.7rem !important;
    margin-top: 0.1rem !important;
    margin-bottom: 0.25rem !important;
    letter-spacing: 0.12em !important;
  }

  p {
    line-height: 1.4 !important;
  }

  /* Skills group sub-labels */
  dt {
    font-size: 0.7rem !important;
    margin-top: 0.5rem !important;
  }

  dt:first-child {
    margin-top: 0 !important;
  }

  dd {
    margin-top: 0.15rem !important;
    line-height: 1.4 !important;
  }

  /* ----- Bullets ----- */

  ul {
    margin-top: 0.35rem !important;
    padding-left: 1.1rem !important;
  }

  ul li {
    margin-top: 0.18rem !important;
    line-height: 1.4 !important;
  }

  ul li:first-child {
    margin-top: 0 !important;
  }

  /* ----- Page-break behavior ----- */

  ol > li,
  section dl > div {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  p,
  li,
  dd {
    widows: 3;
    orphans: 3;
  }

  /* ----- Address (contact column) compact ----- */

  address {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
  }

  /* ----- Links: plain text on paper ----- */

  .animated-link {
    color: inherit !important;
    text-decoration: none !important;
  }

  /* ----- Tighter experience role spacing ----- */

  ol > li {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
  }

  ol > li:first-child {
    padding-top: 0 !important;
  }

  ol > li:last-child {
    padding-bottom: 0 !important;
  }
}