/* ==========================================================================
   Print stylesheet for wp-course-plan

   Two layouts:
   - Portrait  → plan grid full-width, requirements compact horizontal block below
   - Landscape → plan grid takes ~80% of width, narrow requirements column right
   ========================================================================== */

@page { margin: 0.4in; }

@media print {
  /* JS marks non-ancestor elements with data-cp-print-hidden on beforeprint.
     This drops them out of page flow entirely so we don't get blank pages
     above/below the planner from WP theme headers/nav/sidebars/footers. */
  [data-cp-print-hidden] { display: none !important; }

  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }

  /* Override WP block theme content-width CSS variables so the planner
     isn't capped at the theme's content-size (~700px). */
  :root {
    --wp--style--global--content-size: 100% !important;
    --wp--style--global--wide-size: 100% !important;
    --wp--preset--spacing--20: 0 !important;
    --wp--preset--spacing--30: 0 !important;
    --wp--preset--spacing--40: 0 !important;
    --wp--preset--spacing--50: 0 !important;
    --wp--preset--spacing--60: 0 !important;
    --wp--preset--spacing--70: 0 !important;
    --wp--preset--spacing--80: 0 !important;
  }

  /* Neutralize WP theme ancestor wrappers (header bar, content max-width,
     section padding, etc.) so the planner spans the page edge-to-edge. JS
     marks each ancestor of #cp-app on beforeprint. */
  [data-cp-print-ancestor] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    float: none !important;
    position: static !important;
    transform: none !important;
  }

  /* Pull the planner out of any theme container so it fills the page area. */
  #cp-app {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }
  .cp-planner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    page-break-inside: auto;
  }

  /* Hide non-print UI inside the planner */
  .cp-toolbar,
  .cp-add-course,
  .cp-add-summer,
  .cp-summer-hide,
  .cp-add-elective-btn,
  .cp-modal,
  .cp-banner,
  .cp-toast,
  .cp-sidebar h4 small,
  .cp-sidebar > h4:nth-of-type(2),
  .cp-sidebar > button                  { display: none !important; }

  /* Collapsed Summer cells: hidden entirely. With cell-border separators
     (rather than gap-as-line), empty grid areas show as plain white — no
     gray bleed-through. */
  .cp-summer-collapsed { display: none !important; }

  /* Plan title (student name + class of) at the top — compact */
  #cp-app::before {
    content: attr(data-print-title);
    display: block;
    font-size: 11pt;
    font-weight: bold;
    margin: 0 0 4pt;
    text-align: center;
    color: #000;
  }

  /* Tiles: very compact, never split mid-tile */
  .cp-tile {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    box-shadow: none !important;
    border: 0.5pt solid #888 !important;
    background: #fff !important;
    transform: none !important;
    opacity: 1 !important;
    padding: 2pt 4pt !important;
    margin-bottom: 1.5pt !important;
  }
  .cp-tile-year-long { background: #fff !important; padding-right: 4pt !important; }
  .cp-tile-year-long::after { display: none !important; }
  .cp-tile-just-added,
  .cp-tile-highlighted,
  .cp-tile-dimmed { box-shadow: none !important; transform: none !important; opacity: 1 !important; animation: none !important; }

  /* Grid: cell-borders for separators (not gap-as-bg-line) so empty grid
     areas — like row 3 columns where a year has no Summer — show as white
     instead of leaking the gray gap color through.
     allow row-level page breaks if the grid is too tall for one page. */
  .cp-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    background: #fff !important;
    border: 0.5pt solid #888 !important;
    break-inside: auto;
    page-break-inside: auto;
  }
  .cp-year-header,
  .cp-year-header[data-year] {
    background: #f0f0f0 !important;
    color: #000 !important;
    padding: 3pt 5pt !important;
    font-size: 9pt !important;
    border-right: 0.5pt solid #888 !important;
    border-bottom: 0.5pt solid #888 !important;
    break-inside: avoid;
  }
  .cp-year-header small { font-size: 6.5pt !important; color: #444 !important; margin-top: 1pt !important; }

  .cp-semester,
  .cp-semester[data-year] {
    padding: 3pt !important;
    min-height: 0 !important;
    background: #fff !important;
    border-right: 0.5pt solid #888 !important;
    border-bottom: 0.5pt solid #888 !important;
    break-inside: avoid;
  }
  .cp-semester-label { font-size: 5.5pt !important; margin-bottom: 2pt !important; color: #666 !important; letter-spacing: 0.4pt !important; }
  .cp-tile-name { font-size: 7.5pt !important; line-height: 1.15 !important; color: #000 !important; font-weight: 600 !important; }
  .cp-tile-meta { font-size: 6pt !important; margin-top: 0pt !important; color: #555 !important; gap: 3pt !important; }
  .cp-summer .cp-semester-label { color: #b45309 !important; }

  /* Requirements section: very compact strip */
  .cp-sidebar {
    border-left: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 6pt !important;
    page-break-inside: avoid;
    break-inside: avoid;
    color: #000 !important;
  }
  .cp-sidebar h4 {
    font-size: 8pt !important;
    margin: 0 0 2pt !important;
    border-bottom: 0.5pt solid #888;
    padding-bottom: 1pt;
    color: #000 !important;
    text-transform: none;
    letter-spacing: 0;
  }
  .cp-req-row {
    padding: 1pt 0 !important;
    border-bottom: 0.25pt dotted #ccc !important;
    cursor: default !important;
    background: transparent !important;
    font-size: 7.5pt !important;
  }
  .cp-req-row, .cp-req-row .cp-req-name, .cp-req-row .cp-req-progress { color: #000 !important; }
  .cp-req-progress.complete { color: #000 !important; }
  .cp-req-progress.short    { color: #000 !important; font-weight: bold !important; }
  .cp-req-progress.short::after { content: " *"; }
  .cp-req-total {
    font-size: 8pt !important;
    border-top: 0.75pt solid #000 !important;
    padding-top: 2pt !important;
    margin-top: 2pt !important;
  }
}

/* ============== Color print mode (toolbar's Print → Color) ============== */
@media print {
  html.cp-print-color { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html.cp-print-color body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Year tints — restore the on-screen pastel washes */
  html.cp-print-color .cp-year-header[data-year="1"]    { background: #dbeafe !important; color: #1e3a8a !important; }
  html.cp-print-color .cp-year-header[data-year="2"]    { background: #dcfce7 !important; color: #14532d !important; }
  html.cp-print-color .cp-year-header[data-year="3"]    { background: #fef3c7 !important; color: #78350f !important; }
  html.cp-print-color .cp-year-header[data-year="4"]    { background: #fce7f3 !important; color: #831843 !important; }
  html.cp-print-color .cp-semester[data-year="1"]       { background: #f5f9ff !important; }
  html.cp-print-color .cp-semester[data-year="2"]       { background: #f5fbf6 !important; }
  html.cp-print-color .cp-semester[data-year="3"]       { background: #fffbf0 !important; }
  html.cp-print-color .cp-semester[data-year="4"]       { background: #fdf4f8 !important; }

  /* Subject color border on tiles */
  html.cp-print-color .cp-tile { border: 0.5pt solid #ccc !important; }
  html.cp-print-color .cp-subject-english         { border-left: 2pt solid #2563eb !important; }
  html.cp-print-color .cp-subject-math            { border-left: 2pt solid #dc2626 !important; }
  html.cp-print-color .cp-subject-science         { border-left: 2pt solid #059669 !important; }
  html.cp-print-color .cp-subject-social_studies  { border-left: 2pt solid #d97706 !important; }
  html.cp-print-color .cp-subject-world_languages { border-left: 2pt solid #7c3aed !important; }
  html.cp-print-color .cp-subject-fine_arts       { border-left: 2pt solid #db2777 !important; }
  html.cp-print-color .cp-subject-pe_health       { border-left: 2pt solid #0891b2 !important; }
  html.cp-print-color .cp-subject-electives       { border-left: 2pt solid #6b7280 !important; }

  /* Year-long tile gets the gradient back */
  html.cp-print-color .cp-tile-year-long { background: linear-gradient(180deg, #fff 70%, #f3f4f6 100%) !important; }

  /* Summer label keeps its sun-tinted accent */
  html.cp-print-color .cp-summer .cp-semester-label { color: #b45309 !important; }

  /* Requirements progress colors (green complete, red short) */
  html.cp-print-color .cp-req-progress.complete { color: #059669 !important; font-weight: 600 !important; }
  html.cp-print-color .cp-req-progress.short    { color: #dc2626 !important; }
  html.cp-print-color .cp-req-progress.short::after { content: "" !important; }
}

/* ============== Both orientations: plan on top, requirements as 4-col block ============== */
@media print {
  .cp-body { display: block !important; }
  .cp-sidebar {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 16pt;
    row-gap: 0;
  }
  .cp-sidebar h4 { grid-column: 1 / -1; }
  .cp-req-total {
    grid-column: 1 / -1;
    display: flex !important;
    justify-content: space-between !important;
  }
}

/* ============== Landscape: 8-column layout (Fall+Spring side-by-side per year) ============== */
@media print and (orientation: landscape) {
  /* Tighter page margins on landscape so the plan can claim more width */
  @page { margin: 0.25in; }

  /* Plan = first page (full sheet); requirements moved to page 2. */
  .cp-sidebar {
    page-break-before: always;
    break-before: page;
    margin-top: 0 !important;
  }

  /* Restructure the flat grid into 8 columns: each year claims 2 columns
     (Fall on the left, Spring on the right). Year headers span both columns
     above their pair. Summer spans both columns below in row 3. */
  .cp-grid {
    grid-template-columns: repeat(8, 1fr) !important;
    grid-template-rows: auto auto auto !important;
  }
  .cp-year-header[data-year="1"] { grid-column: 1 / span 2; grid-row: 1; }
  .cp-year-header[data-year="2"] { grid-column: 3 / span 2; grid-row: 1; }
  .cp-year-header[data-year="3"] { grid-column: 5 / span 2; grid-row: 1; }
  .cp-year-header[data-year="4"] { grid-column: 7 / span 2; grid-row: 1; }

  .cp-fall[data-year="1"]   { grid-column: 1; grid-row: 2; }
  .cp-spring[data-year="1"] { grid-column: 2; grid-row: 2; }
  .cp-fall[data-year="2"]   { grid-column: 3; grid-row: 2; }
  .cp-spring[data-year="2"] { grid-column: 4; grid-row: 2; }
  .cp-fall[data-year="3"]   { grid-column: 5; grid-row: 2; }
  .cp-spring[data-year="3"] { grid-column: 6; grid-row: 2; }
  .cp-fall[data-year="4"]   { grid-column: 7; grid-row: 2; }
  .cp-spring[data-year="4"] { grid-column: 8; grid-row: 2; }

  /* Row 3: Summer per year (each spans the year's two columns).
     Years without summer (cp-summer-collapsed) are already hidden by the
     base print CSS, so they don't claim a row slot. */
  .cp-summer[data-year="1"] { grid-column: 1 / span 2; grid-row: 3; }
  .cp-summer[data-year="2"] { grid-column: 3 / span 2; grid-row: 3; }
  .cp-summer[data-year="3"] { grid-column: 5 / span 2; grid-row: 3; }
  .cp-summer[data-year="4"] { grid-column: 7 / span 2; grid-row: 3; }

  /* With the wider page area + larger tile padding/fonts, tiles fill their
     cells better and feel less cramped. */
  .cp-year-header,
  .cp-year-header[data-year] {
    padding: 6pt 8pt !important;
    font-size: 10pt !important;
  }
  .cp-year-header small { font-size: 7.5pt !important; margin-top: 2pt !important; }

  .cp-semester,
  .cp-semester[data-year] {
    padding: 5pt !important;
  }
  .cp-semester-label { font-size: 7pt !important; margin-bottom: 4pt !important; }

  .cp-tile { padding: 5pt 7pt !important; margin-bottom: 3pt !important; }
  .cp-tile-name { font-size: 9pt !important; line-height: 1.25 !important; }
  .cp-tile-meta { font-size: 7pt !important; margin-top: 2pt !important; gap: 6pt !important; }

  /* Title at the top of the landscape page */
  #cp-app::before {
    font-size: 13pt;
    margin-bottom: 8pt;
  }
}