/* print.css */

@page {
  margin: 0.5in;
}

@media print {
  
  /* ========================================================== */
  /* STRATEGY: Hide what you DON'T want to print. */
  /* This is generally safer than hiding everything then un-hiding. */
  /* ========================================================== */

  /* Hide common elements you typically wouldn't print */
  #navigation, 
  #advertising, 
  #other, 
  #arrowhead,
  .print-button, /* Hides generic print buttons */
  .print-obit-button, /* Hides your specific obituary print button */
  .footer, /* Assuming you have a footer */
  .header, /* Assuming you have a header */
  .sidebar, /* If your sidebar is NOT the obituary-list and you want to hide it */
  .obituary-list /* <-- THIS IS YOUR INDEX. HIDE IT! */
  .obituary-index /* <-- THIS IS YOUR INDEX. HIDE IT! */

  {
    
    
    
    
    
    
    
    
    display: none !important;
  }

  /* Ensure the body and main content area are visible */
  body {
    background: #fff !important;
    color: #000 !important;
    font-family: "Times New Roman", Times, serif !important;
    font-size: 9pt !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Make sure your main content area is set up correctly for printing */
  /* Assuming your main page content (where obituaries or recipes live) is in a container */
  /* Replace `main-content-area` with the actual class/ID of your main content wrapper */
  .main-content-area { 
    display: block !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important; /* Important for consistent padding/width */
    padding: 0.5in !important; /* Adjust if your @page margin isn't enough */
  }

  /* === OBITUARY PRINT LOGIC === */
  /* This section looks good for making the obit content visible */
  .obit-to-print {
    display: block !important;
    visibility: visible !important; /* Redundant if display: block, but harmless */
    opacity: 1 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
    color: #000 !important;
  }
  /* Apply to children too if needed, but often `.obit-to-print` is enough if it wraps everything */
  .obit-to-print * {
      /* Re-enable display for all children of .obit-to-print */
      display: revert !important; /* revert to default display for children */
      visibility: visible !important;
      opacity: 1 !important;
      position: static !important;
      left: auto !important;
      top: auto !important;
      float: none !important;
      /* Only override specific styles if necessary for children */
      background-color: transparent !important;
      color: #000 !important;
  }

  /* Image handling within obituaries */
  .obit-to-print img { /* Apply to images inside the obit */
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid !important;
  }
  
  img:not(.obit-photo) { /* This rule is problematic. Reconsider if you need it. */
     /* If this hides images *within* .obit-to-print that are not .obit-photo, it's an issue. */
     /* Consider if you really want to hide *all* non-obit-photo images, or just global ones. */
     /* For now, let's keep it but be aware. */
     display: none !important;
  }

  .obit-photo {
    max-width: 4in !important; /* or try 300px */
    height: auto !important;
    display: block !important;
    margin: 0 auto 1em auto !important; /* Center and add bottom margin */
    margin-bottom: 10px !important; /* Redundant, but harmless */
    page-break-inside: avoid !important;
  }

    .obit-name,
  .photo-credit {
    text-align: center !important;
    margin-top: 0.5em !important;
    margin-bottom: 1em !important;
    font-style: italic; /* Optional: adds a gentle tone */
    page-break-inside: avoid !important;
  }

  /* === RECIPE PRINT LOGIC === */
  /* This section also looks good given the above changes */
  .recipe-to-print,
  .recipe-to-print * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
    color: #000 !important;
  }

  .recipe-columns {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .recipe-columns .ingredients,
  .recipe-columns .instructions {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Shared print typography (already good) */
  p, li, h1, h2, h3, h4 {
    font-size: 12pt !important;
    line-height: 1.2 !important;
  }

  a:link, a:visited {
    color: #520 !important;
    background: transparent !important;
    font-weight: bold !important;
    text-decoration: underline !important;
  }
}