Need help with @media print CSS for Casper theme

Themes
1

I’m trying to add media print CSS for individual posts to hide unnecessary items (e.g., menu, announcement bar, etc.) when printing. I can’t seem to get the CSS to work. I am using the Casper theme.

When I use the following code outside of @media print, it works fine. That is, the menu/announcement display on the blog page and are hidden on individual post page.

/* Test code - hide menu on individual post pages */
:is(body.post-template) {
  .gh-head-menu, .gh-announcement-bar {
    display: none !important;
  }
}

But, when I put that code inside of the @media print, it hides the menu/announcement on both the main blog page and the individual post page when I print.

/* Hide menu when printing individual post pages */
@media print {
  :is(body.post-template) {
    .gh-head-menu, .gh-announcement-bar {
      display: none !important;
    }
  } 
}

Anyone know how to do what I’m trying to achieve?
Joan