/* Import Google Fonts for consistency between web and PDF - Must be first for WeasyPrint */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Default Theme - TrainerD Profile Builder */
/* Semantic HTML-First CSS Architecture */
/* All styles scoped to #trainer-profile for isolation */

/* Ensure sections have proper spacing */
#trainer-profile section {
    padding-top: 10mm;
    break-inside: avoid;
}

#trainer-profile section#trainer-details
 {
    padding-top: 0mm !important;
}

#trainer-profile {
  /* === THEME VARIABLES FROM theme.json === */
  --primary-color: #4f46e5;
  --secondary-color: #6b7280;
  --accent-color: #f59e0b;
  --text-color: #111827;
  --background-color: #ffffff;
  --border-color: #e5e7eb;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-size: 11pt; /* Changed from 14pt to 11pt for better PDF sizing */
  --line-height: 1.5;
  --border-radius: 6pt; /* Changed from 8pt to 6pt */
  --spacing-unit: 1em;
  --shadow: 0 1mm 2mm rgba(0, 0, 0, 0.1); 
  --shadow-sm: 0 0.5mm 1mm rgba(0, 0, 0, 0.05); 
  
  /* === DERIVED VARIABLES === */
  --text-light: #4b5563; /* ~70% text-color mixed with background */
  --text-muted: #9ca3af; /* ~50% text-color mixed with background */
  --primary-light: #f0f0ff; /* ~10% primary-color mixed with background */
  --secondary-light: #f4f5f6; /* ~10% secondary-color mixed with background */
  --accent-light: #fef7e6; /* ~10% accent-color mixed with background */
  
  --font-size-xs: 8.25pt; /* 11pt * 0.75 */
  --font-size-sm: 9.625pt; /* 11pt * 0.875 */
  --font-size-base: var(--font-size);
  --font-size-lg: 12.375pt; /* 11pt * 1.125 */
  --font-size-xl: 13.75pt; /* 11pt * 1.25 */
  --font-size-2xl: 16.5pt; /* 11pt * 1.5 */
  
  --spacing-xs: 0.25em;
  --spacing-sm: 0.5em;
  --spacing-md: var(--spacing-unit);
  --spacing-lg: 1.5em;
  --spacing-xl: 2em;
  --spacing-2xl: 3em;
  
  --radius-sm: 3pt; /* 6pt * 0.5 */
  --radius-md: var(--border-radius);
  --radius-lg: 9pt; /* 6pt * 1.5 */
  --radius-xl: 12pt; /* 6pt * 2 */
  
  /* Layout Constants */
  --container-max-width: 210mm; /* A4 width */
  --container-padding: var(--spacing-lg);
  --section-spacing: var(--spacing-xl);
}

/* === WRAPPER AND PAGE LAYOUT === */
.a4-paper {
  max-width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 0;
  background-color: #fff;

  /* Company header logo layer — set these from the builder */
  --header-logo:          none;
  --header-logo-size:     auto 25mm;
  --header-logo-position: 5mm 5mm;
  --header-logo-repeat:   no-repeat;

  background-image:    var(--header-logo);
  background-size:     var(--header-logo-size);
  background-position: var(--header-logo-position);
  background-repeat:   var(--header-logo-repeat);
}

.paper-margin {
  padding: 30mm 20mm 20mm 20mm;
}

/* === BASE CONTAINER === */
#trainer-profile {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-color);
  box-sizing: border-box;
}

/* === SEMANTIC HTML ELEMENT STYLING === */

/* Global Heading Styles - Applied to all sections */
#trainer-profile h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 var(--spacing-md) 0;
}

#trainer-profile h2 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 var(--spacing-lg) 0;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1mm solid var(--primary-color);
}

#trainer-profile h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 var(--spacing-sm) 0;
}

#trainer-profile h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--primary-color);
  margin: 0 0 var(--spacing-xs) 0;
}

#trainer-profile p {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-light);
}

#trainer-profile ul,
#trainer-profile ol {
  margin: 0 0 var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
}

#trainer-profile li {
  margin-bottom: var(--spacing-xs);
  color: var(--text-light);
}

/* === SECTION-BASED LAYOUT === */

/* Main profile sections - each tab gets its own section */
#trainer-profile section {
  margin-bottom: var(--section-spacing);
}

#trainer-profile section:last-child {
  margin-bottom: 0;
}

/* === TRAINER DETAILS SECTION === */
#trainer-profile section#trainer-details header {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1mm solid var(--border-color);
  overflow: hidden; /* Clear floats */
}

#trainer-profile section#trainer-details img {
  width: 32mm;
  height: 32mm;
  border-radius: var(--radius-lg);
  object-fit: cover;
  border: 0.5mm solid var(--border-color);
  float: left;
  margin-right: var(--spacing-lg);
}

#trainer-profile section#trainer-details .trainer-info {
  overflow: hidden; /* Create new block formatting context to work with floated image */
  margin-left: 47.5mm; /* 32mm + 1.5em (approx 15.5mm) */
}

#trainer-profile section#trainer-details h1 {
  font-size: var(--font-size-2xl);
  color: var(--text-color);
  margin: 0 0 var(--spacing-sm) 0;
}

#trainer-profile section#trainer-details .specialty {
  font-size: var(--font-size-lg);
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

#trainer-profile section#trainer-details ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-md) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

#trainer-profile section#trainer-details ul li {
  background-color: var(--primary-light);
  color: var(--primary-color);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: 0;
}

#trainer-profile section#trainer-details .contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

#trainer-profile section#trainer-details .contact-info span {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-light);
}

/* === ACADEMIC/QUALIFICATIONS SECTION === */
#trainer-profile section#academic h2 {
  color: var(--primary-color);
  border-bottom-color: var(--accent-color);
}

#trainer-profile section#professional h2 {
  color: var(--primary-color);
  border-bottom-color: var(--accent-color);
}

/* === PUBLICATIONS SECTION === */
#trainer-profile section#publications h2 {
  border-bottom-color: var(--secondary-color);
}

/* === EXPERIENCE SECTIONS === */
#trainer-profile section#current-position h2,
#trainer-profile section#previous-companies h2,
#trainer-profile section#training-programmes h2 {
  border-bottom-color: var(--accent-color);
}

/* === SKILLS SECTION === */
#trainer-profile section#skills h2 {
  border-bottom-color: var(--primary-color);
}

#trainer-profile section#skills .skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
}

#trainer-profile section#skills .skill-category h3 {
  background-color: var(--primary-light);
  color: var(--primary-color);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
}

#trainer-profile section#skills .skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

#trainer-profile section#skills .skill-tag {
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--primary-light);
  color: var(--primary-color);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* === CERTIFICATIONS SECTION === */
#trainer-profile section#certificates h2 {
  border-bottom-color: var(--accent-color);
}

#trainer-profile section#certificates .certificates-container {
  text-align: center;
}

#trainer-profile section#certificates .certificate-block {
  background-color: var(--background-color);
  border: 0.3mm solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  display: inline-block;
  vertical-align: bottom;
  margin-bottom: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}

/* Portrait certificates - half width */
#trainer-profile section#certificates .certificate-block.orientation-portrait {
  width: 45%;
}

/* Landscape certificates - 2/3 width and centered */
#trainer-profile section#certificates .certificate-block.orientation-landscape {
  width: 80%;
}

#trainer-profile section#certificates .certificate-image {
  margin-bottom: var(--spacing-md);
}

#trainer-profile section#certificates .certificate-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 0.3mm solid var(--border-color);

}

#trainer-profile section#certificates .certificate-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

#trainer-profile section#certificates .certificate-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--primary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

#trainer-profile section#certificates .orientation-badge {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xl);
  flex-shrink: 0;
  margin-left: var(--spacing-sm);
}

#trainer-profile section#certificates .orientation-badge.badge-portrait {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

#trainer-profile section#certificates .orientation-badge.badge-landscape {
  background-color: var(--accent-light);
  color: var(--accent-color);
}

#trainer-profile section#certificates .certificate-filename {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}


/* === ACKNOWLEDGEMENT LETTERS SECTION === */
#trainer-profile section#acknowledgement-letters h2,
#trainer-profile .acknowledgement-letters-section h2,
#trainer-profile .acknowledgement-letters-section h3 {
  border-bottom-color: var(--secondary-color);
}

#trainer-profile .acknowledgement-letters-section .section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 var(--spacing-lg) 0;
  padding-bottom: var(--spacing-sm);
  border-bottom: 0.5mm solid var(--secondary-color);
}

#trainer-profile section#acknowledgement-letters .empty-state {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--spacing-lg);
}

#trainer-profile section#acknowledgement-letters .acknowledgement-letters-container {
  text-align: center;
}

#trainer-profile section#acknowledgement-letters .acknowledgement-letter-block {
  background-color: var(--background-color);
  border: 0.3mm solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  display: inline-block;
  margin-right: var(--spacing-sm); margin-bottom:var(--spacing-sm);
}

/* Portrait letters - 2 per row, fixed for A4 layout */
#trainer-profile section#acknowledgement-letters .acknowledgement-letter-block.orientation-portrait {
  width: 45%;
}

/* Landscape letters - full width, optimized for A4 */
#trainer-profile section#acknowledgement-letters .acknowledgement-letter-block.orientation-landscape {
  width: 90%;
}

#trainer-profile section#acknowledgement-letters .acknowledgement-letter-image {
  margin-bottom: var(--spacing-md);
}

#trainer-profile section#acknowledgement-letters .acknowledgement-letter-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 0.3mm solid var(--border-color);

}

#trainer-profile section#acknowledgement-letters .acknowledgement-letter-details {
  margin-top: var(--spacing-sm);
}

#trainer-profile section#acknowledgement-letters .letter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

#trainer-profile section#acknowledgement-letters .letter-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--secondary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin: 0;
}

#trainer-profile section#acknowledgement-letters .orientation-badge {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xl);
  flex-shrink: 0;
  margin-left: var(--spacing-sm);
}

#trainer-profile section#acknowledgement-letters .orientation-badge.orientation-portrait {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

#trainer-profile section#acknowledgement-letters .orientation-badge.orientation-landscape {
  background-color: var(--secondary-light);
  color: var(--secondary-color);
}

#trainer-profile section#acknowledgement-letters .filename {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

/* === GALLERY SECTION === */
#trainer-profile section#gallery h2 {
  border-bottom-color: var(--secondary-color);
}

#trainer-profile section#gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-xs);
  grid-auto-rows: min-content;
  margin-top: var(--spacing-lg);
}

#trainer-profile section#gallery .gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 0.3mm solid var(--border-color);

}

#trainer-profile section#gallery .gallery-item img {
  width: 100%;
  max-height: 50mm;
  object-fit: cover;
  display: block;
}

#trainer-profile section#gallery .gallery-item.orientation-landscape {
  grid-column: span 6;
}

#trainer-profile section#gallery .gallery-item.orientation-portrait {
  grid-column: span 3;
}

#trainer-profile section#gallery .gallery-item.orientation-square {
  grid-column: span 4;
}

#trainer-profile section#gallery .gallery-empty {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--spacing-xl);
  grid-column: 1 / -1;
}

/* === TABLE STYLING === */
#trainer-profile table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-md) 0;
}

#trainer-profile table th {
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-weight: 600;
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 0.5mm solid var(--primary-color);
}

#trainer-profile table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 0.3mm solid var(--border-color);
  color: var(--text-light);
}

#trainer-profile table tr {
  background-color: transparent;
}

#trainer-profile table tr:nth-child(even) {
  background-color: #fafaff; /* Very light primary color for striped rows */
}

/* Key-value tables (no thead) - Used for trainer details, current position */
#trainer-profile #trainer-details table,
#trainer-profile #current-position table {
  margin: var(--spacing-lg) 0;
}

#trainer-profile #trainer-details table td:first-child,
#trainer-profile #current-position table td:first-child {
  font-weight: 600;
  color: var(--primary-color);
  width: 30%;
  vertical-align: top;
}

#trainer-profile #trainer-details table td:last-child,
#trainer-profile #current-position table td:last-child {
  color: var(--text-color);
}

/* Publication tables - Special 3-column layout with cover image */
#trainer-profile #publications .publication-table,
#trainer-profile #publications table {
  margin-bottom: var(--spacing-xl);
}

#trainer-profile #publications .cover-cell {
  width: 26.5mm;
  vertical-align: top;
  text-align: center;
  padding: var(--spacing-md);
  background-color: var(--primary-light);
}

#trainer-profile #publications .cover-cell img {
  width: 21mm;
  height: auto;
  max-height: 32mm;
  object-fit: cover;
  border-radius: var(--radius-sm);

}

#trainer-profile #publications .no-cover {
  width: 21mm;
  height: 21mm;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 2rem;
  color: var(--text-muted);
}

#trainer-profile #publications .label-cell {
  font-weight: 600;
  color: var(--primary-color);
  width: 32mm;
  vertical-align: top;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--accent-light);
}

#trainer-profile #publications .data-cell {
  color: var(--text-color);
  padding: var(--spacing-sm) var(--spacing-md);
  vertical-align: top;
}

/* === UTILITY CLASSES === */
#trainer-profile .text-primary { color: var(--primary-color); }
#trainer-profile .text-secondary { color: var(--secondary-color); }
#trainer-profile .text-accent { color: var(--accent-color); }
#trainer-profile .text-light { color: var(--text-light); }
#trainer-profile .text-muted { color: var(--text-muted); }

#trainer-profile .bg-primary { background-color: var(--primary-color); }
#trainer-profile .bg-primary-light { background-color: var(--primary-light); }
#trainer-profile .bg-accent-light { background-color: var(--accent-light); }

#trainer-profile .border-primary { border-color: var(--primary-color); }
#trainer-profile .border-accent { border-color: var(--accent-color); }

#trainer-profile .meta-text {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

#trainer-profile .highlight {
  background-color: var(--accent-light);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}



/* === RESPONSIVE DESIGN === */
/* @media (max-width: 768px) {
  #trainer-profile section#trainer-details header {
    flex-direction: column;
    text-align: center;
  }
  
  #trainer-profile section#trainer-details .contact-info {
    justify-content: center;
  }
  
  #trainer-profile section#skills .skills-grid,
  #trainer-profile section#certifications .certs-grid {
    grid-template-columns: 1fr;
  }
} */

#trainer-profile .profile-photo-container {
  flex-shrink: 0;
}

#trainer-profile .profile-photo {
  width: 25.5mm;
  height: 25.5mm;
  object-fit: cover;
  border-radius: 50%;
  border: 0.5mm solid var(--border-color);

}

#trainer-profile .profile-info {
  flex: 1;
}

#trainer-profile .profile-name {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--primary-color);
  margin-bottom: var(--spacing-small);
}

#trainer-profile .profile-specialty {
  display: block;
  font-size: var(--font-size-small);
  color: var(--text-light);
  margin-bottom: var(--spacing-unit);
}

/* Contact Information */
#trainer-profile .contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

#trainer-profile .contact-item {
  font-size: var(--font-size-small);
  color: var(--text-color);
}

#trainer-profile .contact-label {
  font-weight: var(--font-weight-medium);
  margin-right: var(--spacing-small);
}

#trainer-profile .contact-value {
  color: var(--text-color);
}

/* Bio/About Section */
#trainer-profile .profile-bio {
  margin-top: var(--spacing-xl);
}

#trainer-profile .section-header {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-color);
  margin-bottom: var(--spacing-small);
  border-bottom: 1mm solid var(--border-color);
  padding-bottom: var(--spacing-small);
}

#trainer-profile .bio-content {
  color: var(--text-color);
  line-height: var(--line-height);
}

/* Section Containers */
#trainer-profile .profile-section {
  margin-top: var(--spacing-xl);
}

#trainer-profile .section-title {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  color: var(--primary-color);
  margin-bottom: var(--spacing-unit);
}

/* List Styles */
#trainer-profile .section-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

#trainer-profile .list-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  background-color: var(--accent-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-unit);
}

#trainer-profile .item-title {
  font-weight: var(--font-weight-semibold);
  color: var(--primary-color);
}

#trainer-profile .item-subtitle {
  color: var(--text-color);
}

#trainer-profile .item-meta {
  color: var(--text-light);
  font-size: var(--font-size-small);
}

/* Utility Classes */
#trainer-profile .text-muted {
  color: var(--text-muted);
  font-style: italic;
}

#trainer-profile .gallery-container .gallery-img {
  margin: 0.4mm;
}


@media print {

  @page {
      size: A4;
      padding: 30mm 0 20mm 0;
      margin: 0;
      background-color: #fff;

      /* Company header logo layer — injected by PDF job via --header-logo */
      --header-logo: none;

      background-repeat:   no-repeat;
      background-size:     auto 25mm;
      background-position: 5mm 5mm;
      background-image:    var(--header-logo);
  }

  @page :first {
      background-repeat:   no-repeat;
      background-size:     auto 25mm;
      background-position: 5mm 5mm;
      background-image:    var(--header-logo);
  }


    body {
      margin: 0px; padding: 0px;
    }

    #trainer-profile {
      margin: 0; padding: 0;
    }


    #trainer-profile section {
        page-break-inside: avoid;
        margin-bottom: 10mm;
    }

    #trainer-profile h2 {
      break-after: avoid;
    }


    .a4-paper {
      padding: 0mm; margin: 0mm;
      background: none;
    }

    .paper-margin {
      padding: 0 20mm 0 20mm; margin: 0;
    }

  }