/* ============================================================================
   FYSIOJAAP - OPTIMIZED PRINT STYLESHEET
   Professional A4 Document Printing for Healthcare Methods
   ============================================================================ */

/* Import brand design tokens for print, adapted from FysioJaap's system */
@media print {
  :root {
    /* Adapted color system for optimal print output */
    --print-color-background: #ffffff;
    --print-color-surface: #fafbfc; /* A light, neutral surface color */
    --print-color-text-primary: #000000;
    --print-color-text-secondary: #404040;
    --print-color-text-muted: #6b7280;
    --print-color-accent: #1E4635; /* FysioJaap Deep Forest Green */
    --print-color-accent-dark: #10261d; /* Darker version of accent */
    --print-color-accent-light: #e8edea; /* Light tint of accent green */
    --print-color-border: #d1d5da;
    --print-color-border-light: #e5e7eb;
    
    /* Typography - FysioJaap font system adapted for print */
    --print-font-family: Georgia, 'Times New Roman', serif; /* Serif for body readability */
    --print-font-family-headings: 'Playfair Display', Georgia, serif;
    --print-font-weight-normal: 400;
    --print-font-weight-medium: 500;
    --print-font-weight-semibold: 600;
    --print-font-weight-bold: 700;
    
    /* Print-optimized font sizes (points are standard for print) */
    --print-font-size-xs: 9pt;
    --print-font-size-sm: 10pt;
    --print-font-size-base: 11pt;
    --print-font-size-md: 12pt;
    --print-font-size-lg: 14pt;
    --print-font-size-xl: 16pt;
    --print-font-size-2xl: 20pt;
    --print-font-size-3xl: 24pt;
    
    /* Line height for print readability */
    --print-line-height-tight: 1.3;
    --print-line-height-base: 1.6;
    --print-line-height-relaxed: 1.8;
    
    /* Spacing adapted for print (millimeters are standard for print) */
    --print-space-xs: 2mm;
    --print-space-sm: 3mm;
    --print-space-md: 5mm;
    --print-space-lg: 8mm;
    --print-space-xl: 12mm;
    --print-space-2xl: 18mm;
  }
}

/* ============================================================================
   PAGE SETUP & CONFIGURATION
   ============================================================================ */

@page {
  size: A4;
  margin: 20mm 15mm 25mm 15mm;
  
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-family: var(--print-font-family);
    font-size: var(--print-font-size-xs);
    color: var(--print-color-text-muted);
  }
  
  @top-center {
    content: string(doctitle);
    font-family: var(--print-font-family-headings);
    font-size: var(--print-font-size-xs);
    font-weight: var(--print-font-weight-semibold);
    color: var(--print-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  @top-left {
    content: "FysioJaap";
    font-family: var(--print-font-family-headings);
    font-size: var(--print-font-size-xs);
    font-weight: var(--print-font-weight-bold);
    color: var(--print-color-accent);
  }
}

@page :first {
  margin-top: 30mm;
  @top-left { content: none; }
  @top-center { content: none; }
}

/* ============================================================================
   GLOBAL PRINT STYLES
   ============================================================================ */

@media print {
  
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  /* Remove animated backgrounds */
  body::before,
  body::after {
    display: none !important;
  }
  
  html {
    font-size: var(--print-font-size-base);
    line-height: var(--print-line-height-base);
  }
  
  body {
    font-family: var(--print-font-family);
    font-weight: var(--print-font-weight-normal);
    color: var(--print-color-text-primary);
    background: white !important;
    margin: 0;
    padding: 0;
    line-height: var(--print-line-height-base);
    text-rendering: optimizeLegibility;
  }
  
  /* ============================================================================
     APP-SPECIFIC ELEMENT HIDING
     ============================================================================ */
  
  /* Hide all navigation, interactive, and decorative elements */
  .skip-link,
  .sidebar-nav,
  .mobile-header,
  .sidebar-footer,
  .main-nav,
  .recommended-methods-nav,
  .nav-info-text,
  .reset-button,
  .hero-actions,
  .button-group,
  .quiz-navigation,
  .scroll-indicator-group,
  .scroll-progress-container,
  .loading-screen,
  .toast-container,
  .modal-backdrop,
  .accordion-summary::after,
  button,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .no-print {
    display: none !important;
  }
  
  /* ============================================================================
     TYPOGRAPHY - FYSIOJAAP BRANDED
     ============================================================================ */
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--print-font-family-headings);
    font-weight: var(--print-font-weight-bold);
    color: var(--print-color-text-primary);
    line-height: var(--print-line-height-tight);
    page-break-after: avoid;
    page-break-inside: avoid;
    orphans: 3;
    widows: 3;
    margin-top: var(--print-space-lg);
    margin-bottom: var(--print-space-md);
  }
  
  h1 {
    font-size: var(--print-font-size-3xl);
    string-set: doctitle content(); /* Captures h1 content for page header */
    border-bottom: 2pt solid var(--print-color-accent);
    padding-bottom: var(--print-space-sm);
    margin-bottom: var(--print-space-lg);
  }
  
  h2 {
    font-size: var(--print-font-size-2xl);
    color: var(--print-color-accent-dark);
    margin-top: var(--print-space-xl);
  }
  
  h3 {
    font-size: var(--print-font-size-xl);
    font-weight: var(--print-font-weight-semibold);
  }
  
  h4 {
    font-size: var(--print-font-size-lg);
    font-weight: var(--print-font-weight-semibold);
  }
  
  p {
    margin: 0 0 var(--print-space-md) 0;
    orphans: 3;
    widows: 3;
    text-align: justify;
    hyphens: auto;
  }
  
  .lead {
    font-size: var(--print-font-size-lg);
    line-height: var(--print-line-height-relaxed);
    color: var(--print-color-text-secondary);
    font-weight: var(--print-font-weight-normal);
    margin-bottom: var(--print-space-lg);
  }
  
  a {
    color: var(--print-color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  
  /* Show URLs only for external links */
  a[href^="http"]:not([href*="fysiojaap.app"]):not([href*="#"]):after {
    content: " (" attr(href) ")";
    font-size: var(--print-font-size-xs);
    color: var(--print-color-text-muted);
    word-break: break-all;
  }
  
  /* ============================================================================
     METHOD DETAILS & LAYOUT OVERRIDES
     ============================================================================ */
  
  /* Reset main layout containers for full-page printing */
  #app,
  .layout-container,
  .main-content,
  #app-root {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    overflow: visible !important;
    height: auto !important;
  }
  
  /* Linearize the method details grid */
  .method-details-grid {
    display: block !important;
    margin: 0 !important;
  }
  
  .method-main-content,
  .method-sidebar-content {
    width: 100% !important;
    position: static !important;
    margin-bottom: var(--print-space-lg);
  }
  
  /* Reorder for print: sidebar content first for quick reference */
  .method-sidebar-content {
    page-break-after: avoid;
    margin-bottom: var(--print-space-xl);
  }
  
  /* Sidebar cards become highlighted info boxes */
  .sidebar-card {
    background: var(--print-color-surface) !important;
    border: 2pt solid var(--print-color-accent) !important;
    border-radius: 8px;
    padding: var(--print-space-md);
    margin: var(--print-space-md) 0;
    page-break-inside: avoid;
  }
  
  .sidebar-card h3 {
    font-size: var(--print-font-size-lg);
    color: var(--print-color-accent-dark);
    margin-top: 0;
    margin-bottom: var(--print-space-sm);
  }
  
  .sidebar-card p,
  .sidebar-card li {
    font-size: var(--print-font-size-base);
    color: var(--print-color-text-primary);
  }
  
  /* Style sidebar card for a worksheet-like appearance */
  .sidebar-card:has(h3:contains("Experiment")) {
    background: var(--print-color-accent-light) !important;
    border-width: 3pt !important;
    padding: var(--print-space-lg);
    margin: var(--print-space-xl) 0;
    page-break-inside: avoid;
  }
  
  /* ============================================================================
     METHOD CONTENT SECTIONS
     ============================================================================ */
  
  .method-section {
    margin: var(--print-space-xl) 0;
    page-break-inside: avoid;
  }
  
  .method-section h2 {
    color: var(--print-color-accent-dark);
    border-bottom: 1pt solid var(--print-color-border-light);
    padding-bottom: var(--print-space-xs);
  }
  
  /* How-to steps */
  .steps-list,
  ol.steps-list {
    counter-reset: steps;
    list-style: none;
    padding-left: 0;
    margin: var(--print-space-md) 0;
  }
  
  .steps-list li {
    counter-increment: steps;
    position: relative;
    padding-left: var(--print-space-xl);
    margin-bottom: var(--print-space-md);
    page-break-inside: avoid;
  }
  
  .steps-list li::before {
    content: counter(steps);
    position: absolute;
    left: 0;
    top: 0;
    width: 24pt;
    height: 24pt;
    background: var(--print-color-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--print-font-weight-bold);
    font-size: var(--print-font-size-md);
  }
  
  /* Reflection prompts / bullet points */
  .bullet-list {
    list-style: none;
    padding-left: 0;
    margin: var(--print-space-md) 0;
  }
  
  .bullet-list li {
    position: relative;
    padding-left: var(--print-space-lg);
    margin-bottom: var(--print-space-md);
    page-break-inside: avoid;
  }
  
  .bullet-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--print-color-accent);
    font-weight: var(--print-font-weight-bold);
    font-size: var(--print-font-size-lg);
  }
  
  /* ============================================================================
     QUIZ & ASSESSMENT RESULTS
     ============================================================================ */
  
  .quiz-container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .style-result {
    background: var(--print-color-accent-light) !important;
    border: 3pt solid var(--print-color-accent) !important;
    border-radius: 12px;
    padding: var(--print-space-xl);
    margin: var(--print-space-xl) 0;
    text-align: center;
    page-break-inside: avoid;
  }
  
  .style-icon {
    font-size: 48pt !important;
    margin-bottom: var(--print-space-md);
    color: var(--print-color-accent-dark);
  }
  
  .style-name {
    font-size: var(--print-font-size-3xl);
    color: var(--print-color-accent) !important;
    margin-bottom: var(--print-space-md);
  }
  
  .style-description {
    font-size: var(--print-font-size-lg);
    color: var(--print-color-text-primary);
    max-width: none;
  }
  
  /* Represent chosen radio options clearly */
  .radio-option {
    border: 1pt solid var(--print-color-border);
    padding: var(--print-space-sm);
    margin: var(--print-space-xs) 0;
    page-break-inside: avoid;
  }
  
  .radio-option.is-checked {
    background: var(--print-color-accent-light) !important;
    border: 2pt solid var(--print-color-accent) !important;
    font-weight: var(--print-font-weight-semibold);
  }
  
  .radio-option input[type="radio"] {
    display: none; /* Hide the radio button itself, selection is shown by container style */
  }
  
  /* ============================================================================
     RECOMMENDED METHODS & CARDS
     ============================================================================ */
  
  .recommended-method {
    background: var(--print-color-accent-light) !important;
    border: 3pt solid var(--print-color-accent) !important;
    border-radius: 8px;
    padding: var(--print-space-lg);
    margin: var(--print-space-xl) 0;
    page-break-inside: avoid;
    position: relative;
  }
  
  .recommended-badge {
    position: static !important;
    transform: none !important;
    display: inline-block;
    background: var(--print-color-accent) !important;
    color: white !important;
    padding: var(--print-space-xs) var(--print-space-sm);
    border-radius: 4px;
    font-size: var(--print-font-size-sm);
    font-weight: var(--print-font-weight-bold);
    margin-bottom: var(--print-space-md);
  }
  
  .method-grid {
    display: block !important;
  }
  
  .card {
    background: var(--print-color-background);
    border: 1pt solid var(--print-color-border);
    border-radius: 8px;
    padding: var(--print-space-md);
    margin: var(--print-space-md) 0;
    page-break-inside: avoid;
    box-shadow: none !important;
    transform: none !important;
  }
  
  .method-name {
    font-size: var(--print-font-size-xl);
    color: var(--print-color-accent-dark);
  }
  
  .method-summary {
    color: var(--print-color-text-secondary);
    font-size: var(--print-font-size-base);
  }
  
  /* ============================================================================
     BADGES & SMALL COMPONENTS
     ============================================================================ */
  
  .badge,
  .method-badge {
    display: inline-block;
    padding: 1mm 3mm;
    background: var(--print-color-surface) !important;
    color: var(--print-color-text-secondary) !important;
    border: 1pt solid var(--print-color-border);
    border-radius: 3px;
    font-size: var(--print-font-size-xs);
    font-weight: var(--print-font-weight-semibold);
    margin-right: var(--print-space-xs);
  }
  
  .badge-primary {
    background: var(--print-color-accent-light) !important;
    color: var(--print-color-accent-dark) !important;
    border-color: var(--print-color-accent);
  }
  
  /* ============================================================================
     PAGE SECTIONS
     ============================================================================ */
  
  .hero-section {
    text-align: center;
    padding: var(--print-space-xl) 0;
    border-bottom: 2pt solid var(--print-color-accent);
    margin-bottom: var(--print-space-xl);
    page-break-after: avoid;
  }
  
  .hero-title {
    font-size: var(--print-font-size-3xl);
    color: var(--print-color-accent) !important;
  }
  
  .hero-subtitle {
    font-size: var(--print-font-size-lg);
    color: var(--print-color-text-secondary);
    max-width: none;
  }
  
  .process-steps {
    display: block !important;
  }
  
  .step {
    page-break-inside: avoid;
    margin-bottom: var(--print-space-lg);
    padding: var(--print-space-md);
    border-left: 3pt solid var(--print-color-accent);
    text-align: left;
  }
  
  .category-section {
    page-break-before: always;
    padding-top: 0 !important;
    border-top: none !important;
  }
  
  .category-section:first-of-type,
  .category-section:first-child {
    page-break-before: avoid;
  }
  
  /* ============================================================================
     PRINT-ONLY ELEMENTS
     ============================================================================ */
  
  /* Generic class to show elements only in print */
  .print-only {
    display: block !important;
  }
  
  /* Footer with branding */
  body::after {
    content: "© FysioJaap | Professional Healthcare | fysiojaap.app";
    display: block;
    margin-top: var(--print-space-2xl);
    padding-top: var(--print-space-md);
    border-top: 1pt solid var(--print-color-border);
    font-size: var(--print-font-size-xs);
    color: var(--print-color-text-muted);
    text-align: center;
  }
  
  /* ============================================================================
     ACCESSIBILITY IN PRINT
     ============================================================================ */
  
  @media print and (prefers-contrast: high) {
    * {
      color: #000000 !important;
      background: #ffffff !important;
    }
    
    .card,
    .sidebar-card,
    .recommended-method,
    .style-result {
      border-width: 3pt !important;
      border-color: #000000 !important;
    }
  }
  
  /* Make abbreviations readable */
  abbr[title]:after {
    content: " (" attr(title) ")";
    font-size: var(--print-font-size-xs);
    font-weight: var(--print-font-weight-normal);
  }
}