/* Plain Chalk — Print Stylesheet (css/print.css)
 *
 * Designed for teachers printing pay information to compare away from the screen.
 * Defines page purpose per page type:
 *   1. Programme pay page: A one-page record to hold next to another one.
 *   2. Comparison page: Prints as the head-to-head comparison table.
 *   3. The board: Prints as the job listings, not the search filters.
 *   4. Guide/editorial: Prints as clean readable text.
 */

@media print {
  /* ==========================================================================
     4. Respect the Paper: Palette, Margins & Page-Breaks (Step 4)
     ========================================================================== */

  @page {
    margin: 1.5cm;
    size: auto;
  }

  /* Black text on white, no background fills that drink ink */
  *,
  *::before,
  *::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #000 !important;
  }

  html,
  body {
    background: #fff !important;
    background-color: #fff !important;
    color: #000 !important;
    font-size: 10.5pt !important;
    line-height: 1.45 !important;
  }

  /* No orphaned headings */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  dt {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  /* Tables: never split a row across two pages, repeat header on subsequent pages */
  table {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  thead {
    display: table-header-group !important;
  }

  tfoot {
    display: table-footer-group !important;
  }

  /* Paragraphs and list items avoid orphans and widows */
  p,
  li,
  dl,
  dd {
    orphans: 3 !important;
    widows: 3 !important;
  }

  /* Figures, blockquotes and code blocks do not break internally */
  figure,
  blockquote,
  pre {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* ==========================================================================
     1. Page Type Layouts (Step 1)
     ========================================================================== */

  /* --- Page Type A: Programme Pay Page (one-page record) --- */
  .pay-hero {
    display: block !important;
    border: 1pt solid #000 !important;
    border-radius: 0 !important;
    padding: 12pt !important;
    margin: 10pt 0 !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    background: #fff !important;
  }

  .pay-hero__figure {
    margin-bottom: 8pt !important;
  }

  .pay-hero__figure .figure {
    font-size: 22pt !important;
    font-weight: 700 !important;
    color: #000 !important;
    line-height: 1.1 !important;
  }

  .pay-hero__figure .unit {
    display: inline-block !important;
    font-size: 10pt !important;
    color: #222 !important;
    margin-left: 6pt !important;
  }

  .pay-hero__facts {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6pt 12pt !important;
    margin: 8pt 0 0 0 !important;
    padding-top: 8pt !important;
    border-top: 0.75pt solid #333 !important;
  }

  .pay-hero__facts dt {
    font-size: 8.5pt !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #111 !important;
  }

  .pay-hero__facts dd {
    font-size: 9.5pt !important;
    margin: 2pt 0 6pt 0 !important;
    color: #000 !important;
  }

  .page-hero {
    padding: 0 0 10pt 0 !important;
  }

  .page-hero h1 {
    font-size: 20pt !important;
    margin: 4pt 0 8pt 0 !important;
    line-height: 1.2 !important;
    color: #000 !important;
  }

  .page-hero .lede {
    font-size: 10pt !important;
    line-height: 1.4 !important;
    color: #222 !important;
    margin: 6pt 0 10pt 0 !important;
  }

  /* --- Page Type B: Comparison (print as the table) --- */
  .table-wrap {
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    margin: 10pt 0 !important;
    padding: 0 !important;
  }

  .compare-table,
  table.compact {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 8pt 0 !important;
    font-size: 9pt !important;
  }

  .compare-table th,
  .compare-table td {
    border: 0.75pt solid #000 !important;
    padding: 5pt 7pt !important;
    text-align: left !important;
    color: #000 !important;
    vertical-align: top !important;
  }

  .compare-table thead th {
    background: #f4f4f4 !important;
    font-weight: 700 !important;
  }

  /* --- Page Type C: The Board (print as listings, not filters) --- */
  .job-grid {
    display: block !important;
    margin: 10pt 0 !important;
  }

  .job-card {
    display: block !important;
    border: 0.75pt solid #222 !important;
    border-radius: 0 !important;
    padding: 8pt 10pt !important;
    margin-bottom: 8pt !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  .job-card .job-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 4pt !important;
  }

  .job-card .pay-th {
    font-size: 14pt !important;
    font-weight: 700 !important;
    color: #000 !important;
  }

  .job-card .job-id h3 {
    font-size: 11pt !important;
    margin: 0 0 2pt 0 !important;
    color: #000 !important;
  }

  .job-card .eligibility-line {
    font-size: 8.5pt !important;
    margin: 4pt 0 !important;
    color: #111 !important;
  }

  .job-card .reqs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4pt !important;
    margin: 3pt 0 !important;
  }

  .job-card .req {
    font-size: 7.5pt !important;
    padding: 1pt 4pt !important;
    border: 0.5pt solid #444 !important;
    border-radius: 0 !important;
  }

  /* ==========================================================================
     2. Remove Chrome & Interactive Controls (Step 2)
     ========================================================================== */

  /* Keep the header container visible for the wordmark */
  header.nav,
  header.nav.nav,
  body header.nav {
    display: block !important;
    position: static !important;
    width: 100% !important;
    padding: 0 0 8pt 0 !important;
    margin: 0 0 12pt 0 !important;
    background: transparent !important;
    border-bottom: 1pt solid #000 !important;
  }

  .nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Wordmark: small at the top so a printed sheet is identifiably ours */
  .nav .logo,
  header.nav .logo {
    display: inline-block !important;
  }

  .logo-lockup {
    display: block !important;
    max-height: 22px !important;
    height: 22px !important;
    width: auto !important;
    filter: grayscale(100%) contrast(150%) !important;
  }

  /* Remove all interactive navigation, actions, and skip links */
  .nav-links,
  .nav-actions,
  .skip-link,
  header.nav nav {
    display: none !important;
  }

  /* Remove all interactive buttons, inputs, selects, forms */
  button,
  input,
  select,
  textarea,
  form,
  .chip,
  .hero-chips,
  .hero-tools,
  .page-cta,
  .cta-note,
  .foot-actions,
  .board-tools-row,
  #resetFilters {
    display: none !important;
  }

  /* Remove buttons generally, except the application route link on job cards */
  .btn:not(.cta-block a) {
    display: none !important;
  }

  /* Keep the application route link on the job card visible as a text link */
  .cta-block {
    display: block !important;
    margin-top: 4pt !important;
  }

  .cta-block a.btn {
    display: inline !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: 8.5pt !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    color: #000 !important;
  }

  /* Remove filter controls and search */
  .board-search-row,
  .board-search-wrap,
  #boardSearchInput,
  #boardSearchClear,
  .filters,
  .filters-mirror,
  #minPay,
  #minPayLabel,
  #sortSelect,
  #fxCur,
  .hero-form,
  #minPaySelect {
    display: none !important;
  }

  /* Remove saved-jobs tracker and related controls */
  #trackerOpenBtn,
  .toolbar-right,
  .toolbar-more,
  .toolbar-more-panel,
  #savedToggle,
  #exportBtn,
  .saved-search-controls,
  #saveSearchBtn,
  #copySearchLinkBtn,
  #savedSearchList,
  .saved-search-privacy,
  .freshness-strip,
  #freshnessStrip,
  .job-save,
  .job-applied,
  .job-compare,
  .report,
  .result-count {
    display: none !important;
  }

  /* Remove footers and website chrome */
  .page-footer,
  footer,
  .footer-legal,
  .sticky-alert,
  .alert-band,
  .share-row,
  #loadMore,
  .tefl,
  #match,
  .compare,
  .schools,
  .steps,
  #alerts,
  .faq,
  .hero-search,
  .hero-artifact,
  .trust-row,
  .takehome-chip {
    display: none !important;
  }

  /* Remove decorative icons and non-content images */
  .board-search-icon,
  .dot,
  svg.board-search-icon {
    display: none !important;
  }

  /* Ensure check date is visible on the printed sheet */
  .pay-hero__facts,
  .verified,
  .hiring-badge,
  .hero-badge,
  .hero-badge-text {
    display: inline !important;
    visibility: visible !important;
    color: #000 !important;
  }

  .pay-hero__facts div {
    display: block !important;
  }

  /* ==========================================================================
     3. Meaningful Links on Paper (Step 3)
     ========================================================================== */

  /* Default: do NOT append URLs to general links, navigation, anchors, or relative paths */
  a::after {
    content: none !important;
  }

  .nav a::after,
  .nav-links a::after,
  .nav-actions a::after,
  .logo::after,
  .page-footer a::after,
  footer a::after,
  a.skip-link::after,
  a.co-link::after,
  a.chip::after,
  a.btn:not(.cta-block a)::after,
  a[href^="#"]::after,
  a[href^="../"]::after,
  a[href^="/"]::after,
  a[href^="mailto:"]::after,
  a[href^="javascript:"]::after {
    content: none !important;
  }

  /* Expose URLs only for links that matter: source check and application route */
  .pay-hero a[href^="http"]::after,
  dd a[href^="http"]::after,
  .cta-block a[href^="http"]::after,
  .page-section a[href^="http"]:not(.btn)::after {
    content: " (" attr(href) ")" !important;
    font-size: 8.5pt !important;
    font-weight: normal !important;
    word-break: break-all !important;
    color: #222 !important;
  }

  /* ==========================================================================
     5. The Honest Print Line (Step 5)
     ========================================================================== */

  /* A printed sheet outlives the page it came from. State that figures were
     checked on the date printed above, that pay changes, and where to re-check. */
  body::after {
    content: "Pay figures change. We checked these on the date shown above. Check current rates at plainchalk.com before you apply." !important;
    display: block !important;
    margin-top: 14pt !important;
    padding-top: 6pt !important;
    border-top: 0.75pt solid #000 !important;
    font-family: var(--font-ui), system-ui, sans-serif !important;
    font-size: 8pt !important;
    line-height: 1.35 !important;
    color: #222 !important;
    text-align: left !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}