/*
 * Print Styles for studio-enrique-pardo
 * Preserves site's typographic identity for print media
 * Based on Fira Sans typography and established design system
 */

@media print {
  /* Page setup */
  @page {
    margin: 1.5cm 2cm;
    size: A4;
  }

  /* Reset to print-friendly colors */
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Specifically override tag backgrounds */
  .bg-stone-100,
  .bg-stone-200,
  .bg-stone-300 {
    background: white !important;
    border: 1pt solid #ccc !important;
  }

  /* Body maintains site's typography */
  body {
    font-family: "Fira Sans", sans-serif;
    font-size: 11pt;
    line-height: 1.5;
    color: black;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Preserve content width for legibility */
  .prose, 
  main {
    max-width: 85ch;
    margin: 0 auto;
  }

  /* Hide web-only elements */
  nav,
  button,
  input,
  textarea,
  select,
  .no-print {
    display: none !important;
  }

  /* Site heading hierarchy adapted for print */
  h1 {
    font-weight: 300;
    font-size: 18pt;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    page-break-after: avoid;
  }

  h2 {
    font-weight: 500;
    font-size: 16pt;
    margin-top: 1em;
    margin-bottom: 0.5em;
    page-break-after: avoid;
  }

  h3 {
    font-weight: 500;
    font-size: 14pt;
    margin-top: 0.75em;
    margin-bottom: 0.25em;
    page-break-after: avoid;
  }

  h4 {
    font-weight: 500;
    font-size: 12pt;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 1em;
    margin-bottom: 0;
    page-break-after: avoid;
  }

  /* Typography spacing matches site */
  p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    orphans: 3;
    widows: 3;
  }

  /* Prevent awkward page breaks */
  blockquote,
  ul,
  ol,
  img,
  table {
    page-break-inside: avoid;
  }

  /* Muted elements in gray */
  figcaption {
    color: #666;
    font-style: italic;
    font-size: 10pt;
    margin-top: 0.5em;
  }

  /* Footnotes styling */
  .footnotes {
    color: #666;
    font-size: 9pt;
    margin-top: 4em;
    line-height: 1.4;
  }

  .footnotes li {
    margin-bottom: 0.75em;
  }

  /* Header shows site title gracefully - tighter for print */
  header {
    margin-bottom: 1em;
    margin-top: 0 !important;
    padding-bottom: 0;
    padding-top: 0 !important;
    border-bottom: none;
  }

  /* Reduce main top padding for print */
  main {
    padding-top: 1em !important;
  }

  /* Fix mix-blend-mode for print */
  .mix-blend-difference {
    mix-blend-mode: normal !important;
  }

  /* Fix logo spacing and alignment */
  header .shrink-0 {
    margin-left: 2em;
    align-self: flex-start;
  }

  /* Align header content properly */
  header .flex {
    align-items: flex-start !important;
  }

  /* Footer shows copyright gracefully */
  footer {
    border-top: 1pt solid #ccc;
    padding-top: 1em;
    margin-top: 2em;
    font-size: 10pt;
    color: #666;
  }

  /* Hide footer links, keep copyright and phone */
  footer a:not([href="/copyright"]) {
    display: none !important;
  }

  footer a[href="/copyright"] {
    text-decoration: none;
    border: none;
    color: inherit;
  }

  /* Hide the call-to-action button */
  footer div:has(a[href*="ecriture"]) {
    display: none !important;
  }

  /* Images optimized for print */
  img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    page-break-inside: avoid;
    border-radius: 0.375rem;
  }

  /* Override notes template background for print */
  body {
    background-color: white !important;
  }

  /* Fix full-width images for print */
  figure[data-ratio] {
    position: static !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Hide videos, they don't print anyway */
  iframe,
  video {
    display: none !important;
  }

  /* Tables */
  table {
    border-collapse: collapse;
    width: 100%;
    font-size: 10pt;
  }

  th,
  td {
    border: 1pt solid #ccc;
    padding: 6pt;
    text-align: left;
  }

  th {
    background: #f5f5f5 !important;
    font-weight: 500;
  }
}