/* print1.css */

@media print {

  /* --- General Print Resets & Defaults --- */
  body {
    font-size: 12pt !important; /* Ensure a base font size */
    color: #000000 !important;  /* Ensure text is black */
    background-color: #ffffff !important; /* Ensure background is white */
  }

  /* Remove default Bootstrap backgrounds/shadows that aren't print-friendly */
  .banner-section,
  .navbar,
  .bg-light { /* Target Bootstrap's light background class too */
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* Add subtle borders to define sections if backgrounds are gone */
  .banner-section,
  .navbar {
    border: 1px solid #666 !important; /* A slightly darker border for visibility */
    margin-bottom: 10px !important; /* Add some space between printed sections */
  }


  /* --- Problem 1: Banner Table Fixes --- */
  /* Assuming the table has class "banner-section" */
  table.banner-section {
    width: 100% !important;         /* Adapt to print page width */
    table-layout: fixed !important;  /* Helps with consistent column behavior */
    overflow: hidden !important;     /* Prevent extremely wide content from breaking layout */
    border-collapse: collapse !important; /* Standard for tables */
    margin: 10px 0 !important;        /* Spacing around the banner */
    padding: 0 !important;           /* Reset padding if any from inline styles */
  }

  table.banner-section td,
  table.banner-section th {
    white-space: nowrap !important;     /* CRITICAL: Prevents content wrapping in cells */
    overflow: hidden !important;        /* Hide overflow within cells */
    text-overflow: ellipsis !important; /* Optional: '...' if content still overflows */
    vertical-align: middle !important;  /* Align cell content vertically */
    padding: 2px 5px !important;        /* Minimal padding for print */
    border: 1px solid #eee !important;  /* Light border for cells if needed */
  }

  table.banner-section img {
    max-width: 100% !important;        /* Ensure images scale to fit cell */
    display: inline-block !important;  /* Better behavior with nowrap */
    vertical-align: middle !important; /* Align images */
    height: auto !important;           /* Maintain aspect ratio */
  }


  /* --- Problem 2: Navigation Bar Fixes --- */
  /* Ensure the main navbar container is visible */
  nav.navbar {
    display: block !important;
    width: 100% !important;
    padding: 5px 0 !important; /* Minimal padding for print */
  }

  /* The container inside navbar */
  nav.navbar .container-fluid {
    display: block !important; /* Override Bootstrap flex if it causes issues here for print */
    width: 100% !important;
    padding: 0 !important;
  }

  /* The UL holding the navigation items */
  nav.navbar ul.navbar-nav {
    display: flex !important;             /* FORCE flex display */
    flex-direction: row !important;       /* Align items in a row */
    flex-wrap: wrap !important;           /* Allow items to wrap (for the "two lines" effect) */
    justify-content: center !important;   /* Center items (as per your screen 'justify-content-center' class) */
    width: 100% !important;               /* Use full width */
    list-style: none !important;          /* Remove bullets */
    padding-left: 0 !important;           /* Remove default UL padding */
    margin: 0 !important;                 /* Reset UL margins */
  }

  /* Each navigation list item */
  nav.navbar ul.navbar-nav li.nav-item {
    display: list-item !important;      /* Should be 'list-item' or let flex handle it. As a flex child, its display is effectively managed. */
                                        /* Do NOT set to inline-block if parent is flex, usually. */
    flex-grow: 0 !important;            /* Don't grow */
    flex-shrink: 0 !important;          /* Don't shrink disproportionately */
    /* Replicating Bootstrap's 'gap-4' (typically 1.5rem) using margins for better print compatibility */
    margin: 2px 5px !important;         /* Minimal margins for spacing. 'gap' property has less support in print. */
                                        /* Bootstrap's `gap-4` utility would be 1.5rem. Adjust if 5px is too small/large. */
                                        /* E.g., margin: 0.25rem 0.75rem !important; */
  }

  /* The actual links */
  nav.navbar ul.navbar-nav li.nav-item a.nav-link {
    display: inline-block !important;   /* Links themselves as inline-blocks */
    padding: 3px 6px !important;        /* Minimal padding for print */
    text-decoration: none !important;
    color: #000000 !important;          /* Ensure link text is black */
  }

  nav.navbar ul.navbar-nav li.nav-item a.nav-link span {
    color: #000000 !important; /* Ensure text within span is also black */
  }

  /* Hide dropdown menus and toggler */
  nav.navbar .dropdown-menu,
  nav.navbar .navbar-toggler {
    display: none !important;
  }
}