/* --- TEMPLATE SELECTOR --- */
.template-selector-container {
  transition: all 0.3s ease-in-out;
}
.template-option {
  border: 2px solid transparent;
  border-radius: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.template-option:hover {
  border-color: #a5b4fc; /* indigo-300 */
  background-color: #f0f3ff;
}
.template-option.active {
  border-color: #6366f1; /* indigo-500 */
  background-color: #e0e7ff; /* indigo-100 */
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}
.template-thumbnail {
  width: 100px;
  height: 141px;
  border: 1px solid #e5e7eb;
  background-color: #fff;
  border-radius: 0.25rem;
  padding: 8px;
  overflow: hidden;
}
.template-thumbnail .thumb-header { height: 15%; background: #d1d5db; margin-bottom: 8px; border-radius: 2px;}
.template-thumbnail .thumb-body .thumb-line { height: 8px; background: #e5e7eb; margin-bottom: 6px; border-radius: 2px; }
.template-thumbnail .thumb-body .thumb-line.short { width: 60%; }
.template-name { font-size: 0.875rem; font-weight: 500; color: #374151; }

/* Creative Thumbnail */
.template-thumbnail-creative { display: flex; gap: 4px; padding: 0; }
.template-thumbnail-creative .thumb-header { width: 35%; height: 100%; margin: 0; background: #f3f4f6;}
.template-thumbnail-creative .thumb-body { width: 65%; padding: 8px;}

/* Modern Thumbnail */
.template-thumbnail-modern .thumb-header { background: #000; }

/* Minimalist Thumbnail */
.template-thumbnail-minimalist .thumb-header { background: transparent; border: none; }

/* Technical Thumbnail */
.template-thumbnail-technical .thumb-header { background: #4a5568; } /* gray-700 */
.template-thumbnail-technical .thumb-body .thumb-line { background: #a0aec0; } /* gray-400 */

/* Academic Thumbnail */
.template-thumbnail-academic .thumb-header { margin: 0 auto 8px auto; width: 70%; height: 12%; background: #d1d5db; border-radius: 2px; }
.template-thumbnail-academic .thumb-body { text-align: left; }

/* Elegant Thumbnail */
.template-thumbnail-elegant .thumb-header { height: 20%; background: #fff; border-bottom: 1px solid #4b5563; margin-bottom: 12px; }
.template-thumbnail-elegant .thumb-body .thumb-line { height: 6px; }


/* --- BASE RESUME STYLES --- */
#resume-preview {
  transition: all 0.3s ease;
  color: #000;
}
#resume-preview h2 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #d1d5db;
}
#resume-preview .experience-item,
#resume-preview .education-item {
  margin-bottom: 1rem;
}
#resume-preview a {
  color: #000;
}

/* --- TEMPLATE: CLASSIC --- */
.template-classic { font-family: Georgia, 'Times New Roman', Times, serif; }
.template-classic .resume-header { text-align: center; border-bottom: 2px solid #d1d5db; }
.template-classic h2 { border-color: #d1d5db; color: #000; }

/* --- TEMPLATE: MODERN --- */
.template-modern { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
.template-modern .resume-header { text-align: left; border-bottom: 2px solid #000; display: flex; justify-content: space-between; align-items: center; }
.template-modern .resume-name { font-size: 2.5rem; font-weight: 800; color: #000; }
.template-modern .contact-info { text-align: right; font-size: 0.875rem; }
.template-modern h2 { color: #000; border: none; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.1em; }

/* --- TEMPLATE: MINIMALIST --- */
.template-minimalist { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
.template-minimalist .resume-header { text-align: center; border: none; margin-bottom: 2.5rem; }
.template-minimalist .resume-name { font-size: 1.75rem; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; }
.template-minimalist .contact-info { font-size: 0.875rem; color: #000; }
.template-minimalist h2 { color: #000; border: none; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 1.5rem; }

/* --- TEMPLATE: CREATIVE --- */
.template-creative { font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; padding: 0 !important; }
.template-creative .resume-content-wrapper { display: flex; height: 100%; }
.template-creative .side-column { width: 35%; background: #f3f4f6; color: #000; padding: 2rem; }
.template-creative .main-column { width: 65%; padding: 2rem; }
.template-creative .resume-header, .template-creative h2 { border: none; padding: 0; margin: 0; }
.template-creative .side-column .resume-header { text-align: left; margin-bottom: 1.5rem; }
.template-creative .side-column .resume-name { color: #000; font-size: 2.25rem; font-weight: 700; line-height: 1.1; }
.template-creative .side-column .contact-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.9rem; }
.template-creative .side-column h2 { color: #000; border-bottom: 1px solid #d1d5db; font-size: 1.125rem; margin-top: 1.5rem; margin-bottom: 0.75rem; padding-bottom: 0.25rem; }
.template-creative .main-column h2 { color: #000; font-size: 1.25rem; margin-bottom: 0.75rem; }

/* --- TEMPLATE: TECHNICAL --- */
.template-technical { font-family: 'Courier New', Courier, monospace; }
.template-technical .resume-header { text-align: left; border-bottom: 1px dashed #000; padding-bottom: 1rem; }
.template-technical .resume-name { font-size: 2rem; font-weight: 700; }
.template-technical .contact-info { font-size: 0.9rem; margin-top: 0.5rem; }
.template-technical .contact-info > *:not(.hidden) { margin-right: 0.75rem; }
.template-technical .contact-info > *:last-child { margin-right: 0; }
.template-technical .contact-info .sm\\:inline { display: none; } /* Hide the pipe separators */
.template-technical h2 { 
  font-size: 1.1rem; 
  font-weight: 700;
  color: #000;
  border: none;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.template-technical h2::before {
  content: "// ";
  color: #6b7280; /* gray-500 */
}
.template-technical .skills-section p {
  background-color: #f3f4f6;
  padding: 0.75rem;
  border-radius: 4px;
  line-height: 1.6;
}

/* --- TEMPLATE: ACADEMIC --- */
.template-academic { font-family: 'Garamond', 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif; }
.template-academic .resume-header { text-align: center; margin-bottom: 2rem; }
.template-academic .resume-name { font-size: 2.25rem; font-weight: 600; }
.template-academic .contact-info { margin-top: 0.25rem; font-size: 1rem; }
.template-academic h2 {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  border-bottom: 1px solid #000;
  padding-bottom: 0.5rem;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}
.template-academic .experience-item,
.template-academic .education-item {
  font-size: 1.1rem; /* Slightly larger base font for academic */
}

/* --- TEMPLATE: ELEGANT --- */
.template-elegant { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.template-elegant .resume-header { text-align: left; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 2px solid #000; }
.template-elegant .resume-name { font-size: 2.75rem; font-weight: 200; letter-spacing: 0.05em; }
.template-elegant .contact-info { margin-top: 0.75rem; font-size: 0.9rem; font-weight: 300; }
.template-elegant h2 {
  border: none;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.template-elegant h2::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background-color: #000;
  vertical-align: middle;
}
.template-elegant .experience-item h3 {
    font-weight: 600; /* Bolder job titles */
}

@media print {
  @page {
    margin: 0.75in;
  }

  body, html {
    background: white !important;
  }

  /* Hide everything on the page by default */
  body * {
    visibility: hidden;
  }

  /* Then, make the resume preview container and all its children visible */
  #resume-preview-container, #resume-preview-container * {
    visibility: visible;
  }
  
  /* The creative template's flex layout needs to be visible */
  .template-creative .resume-content-wrapper {
    display: flex !important;
  }

  /* Position the resume container to fill the whole page */
  #resume-preview-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: none !important;
    box-shadow: none !important;
  }

  /* General styling for the resume content itself */
  #resume-preview {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    font-size: 10pt;
    line-height: 1.4;
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border: none !important;
    box-shadow: none !important;
  }

  #resume-preview *,
  #resume-preview *:before,
  #resume-preview *:after {
    color: #000 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  #resume-preview .resume-header,
  #resume-preview h2 {
    border-color: #000 !important;
  }

  #resume-preview a {
    text-decoration: none !important;
  }
  
  /* Ensure template-specific background colors are printed */
  .template-creative .side-column {
    background-color: #f3f4f6 !important;
  }

  .template-technical .skills-section p {
    background-color: #f3f4f6 !important;
  }
  
  /* Page break control */
  #resume-preview section,
  #resume-preview .experience-item,
  #resume-preview .education-item {
    break-inside: avoid;
  }

  #resume-preview h2,
  #resume-preview h3 {
    break-after: avoid;
  }
  
  #resume-preview p {
    orphans: 3;
    widows: 3;
  }
}