/* ==========================================================================
   Print Stylesheet - Light theme for PDF generation
   Usage: Ctrl+P (or Cmd+P) → Save as PDF

   IMPORTANT: This stylesheet is optimized to fit all content on a single A4 page.
   If content overflows, reduce font sizes or remove content from index.html.
   ========================================================================== */

@media print {

  /* --------------------------------------------------------------------------
     Page Setup - A4 with minimal margins for maximum content area
     -------------------------------------------------------------------------- */
  @page {
    size: A4;
    margin: 0.8cm 0.6cm;
  }

  /* --------------------------------------------------------------------------
     Reset to Light Theme
     -------------------------------------------------------------------------- */
  :root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;
    --bg-elevated: #f5f5f5;

    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #6a6a6a;

    --accent-orange: #b45309;
    --accent-teal: #0f766e;

    --border-color: #d0d0d0;
    --skill-bg: rgba(180, 83, 9, 0.08);
    --skill-border: rgba(180, 83, 9, 0.25);
  }

  /* --------------------------------------------------------------------------
     Base Print Styles - Compact sizing
     -------------------------------------------------------------------------- */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  }

  html {
    font-size: 9pt;
  }

  body {
    margin: 0;
    padding: 0;
    background: white !important;
    background-image: none !important;
    color: var(--text-primary);
  }

  /* --------------------------------------------------------------------------
     Show All Content & Hide Interactive Elements
     -------------------------------------------------------------------------- */
  .initially-hidden {
    display: flex !important;
    opacity: 1 !important;
  }

  .show-more-wrapper,
  #show-more-btn,
  .theme-toggle,
  #bg-canvas {
    display: none !important;
  }

  /* --------------------------------------------------------------------------
     Main Container - Remove decorative styling
     -------------------------------------------------------------------------- */
  .cv-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    border: none;
    background: white !important;
  }

  /* --------------------------------------------------------------------------
     Profile Header - Compact layout
     -------------------------------------------------------------------------- */
  .profile {
    padding: 0.5cm 0.4cm;
    background: var(--bg-secondary) !important;
    border-bottom: 2px solid var(--accent-orange);
  }

  .profile-inner {
    display: flex;
    flex-direction: row;
    gap: 0.8cm;
    align-items: flex-start;
  }

  .profile-photo {
    width: 2.2cm;
    height: 2.2cm;
    min-width: 2.2cm;
    border-radius: 50%;
    border: 2px solid var(--accent-orange);
    box-shadow: none;
  }

  .profile-info {
    flex: 1;
  }

  .name {
    font-size: 18pt;
    margin: 0 0 0.1cm;
    color: var(--text-primary);
  }

  .title {
    font-size: 10pt;
    margin: 0 0 0.3cm;
    color: var(--accent-orange);
  }

  .contact-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15cm 0.5cm;
    margin: 0 0 0.3cm;
    padding: 0;
    list-style: none;
  }

  .contact-item {
    display: flex;
    align-items: center;
    gap: 0.1cm;
    font-size: 8pt;
    color: var(--text-secondary);
  }

  .contact-icon {
    width: 10px;
    height: 10px;
    filter: none;
    opacity: 0.8;
  }

  .summary {
    font-size: 8pt;
    line-height: 1.35;
    margin: 0;
    color: var(--text-secondary);
  }

  /* --------------------------------------------------------------------------
     Links
     -------------------------------------------------------------------------- */
  a {
    color: var(--text-primary);
    text-decoration: none;
  }

  /* --------------------------------------------------------------------------
     CV Content - FORCE Two-Column Layout
     -------------------------------------------------------------------------- */
  .cv-content {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0;
    width: 100%;
  }

  .cv-column {
    padding: 0.4cm;
    box-sizing: border-box;
  }

  .cv-column.left {
    flex: 0 0 58% !important;
    width: 58% !important;
    max-width: 58% !important;
    border-right: 1px solid var(--border-color);
  }

  .cv-column.right {
    flex: 0 0 42% !important;
    width: 42% !important;
    max-width: 42% !important;
    background: var(--bg-secondary) !important;
  }

  /* --------------------------------------------------------------------------
     Sections - Compact spacing
     -------------------------------------------------------------------------- */
  .cv-section {
    margin-bottom: 0.3cm;
    break-inside: avoid;
  }

  .cv-section:last-child {
    margin-bottom: 0;
  }

  .section-title {
    font-size: 9pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.2cm;
    padding-bottom: 0.08cm;
    border-bottom: 1.5px solid var(--accent-orange);
    color: var(--text-primary);
  }

  /* --------------------------------------------------------------------------
     Entries (Jobs / Education) - Timeline style
     -------------------------------------------------------------------------- */
  .entry {
    position: relative;
    padding-left: 0.4cm;
    margin-bottom: 0.25cm;
    break-inside: avoid;
  }

  .entry:last-child {
    margin-bottom: 0;
  }

  /* Timeline line */
  .entry::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 6px;
    bottom: -0.35cm;
    width: 1px;
    background: var(--border-color);
  }

  .entry:last-child::before {
    bottom: 0;
  }

  /* Timeline circle */
  .entry::after {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: white;
    border: 1.5px solid var(--accent-teal);
    z-index: 1;
  }

  .entry-header {
    margin-bottom: 0.1cm;
  }

  .entry-title {
    font-size: 9pt;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
  }

  .entry-company {
    font-size: 8pt;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.05cm 0.3cm;
    font-size: 8pt;
    color: var(--accent-teal);
  }

  /* --------------------------------------------------------------------------
     Bracket Box - Using borders instead of pseudo-elements for print
     -------------------------------------------------------------------------- */
  .bracket-box {
    position: relative;
    margin-top: 0.15cm;
    padding: 0.2cm;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    break-inside: avoid;
  }

  /* Hide the pseudo-element brackets in print - use simple border instead */
  .bracket-box::before,
  .bracket-box::after,
  .bracket-box-inner::before,
  .bracket-box-inner::after {
    display: none !important;
  }

  /* Add accent border on left side */
  .bracket-box {
    border-left: 2px solid var(--accent-orange);
  }

  .bracket-box-inner {
    position: relative;
  }

  .details-intro {
    font-size: 8pt;
    font-weight: 600;
    color: var(--accent-teal);
    margin: 0 0 0.1cm;
  }

  .task-list {
    margin: 0;
    padding-left: 0.35cm;
    color: var(--text-secondary);
  }

  .task-list li {
    font-size: 8pt;
    line-height: 1.3;
    margin-bottom: 0.03cm;
  }

  .task-list li:last-child {
    margin-bottom: 0;
  }

  .task-list li::marker {
    color: var(--accent-orange);
  }

  /* --------------------------------------------------------------------------
     Skills - Compact tags
     -------------------------------------------------------------------------- */
  .skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1cm;
  }

  .skill {
    font-size: 7.5pt;
    font-weight: 600;
    padding: 0.04cm 0.12cm;
    background: var(--skill-bg) !important;
    border: 1px solid var(--skill-border);
    border-radius: 3px;
    color: var(--accent-orange);
  }

  /* --------------------------------------------------------------------------
     Languages - Inline layout to save space
     -------------------------------------------------------------------------- */
  .language-item {
    margin-bottom: 0.15cm;
  }

  .language-item:last-child {
    margin-bottom: 0;
  }

  .language-name {
    font-size: 9pt;
    font-weight: 600;
    color: var(--text-primary);
  }

  .language-level {
    font-size: 8pt;
    color: var(--text-muted);
  }

  /* --------------------------------------------------------------------------
     Interests
     -------------------------------------------------------------------------- */
  .interest-item {
    display: flex;
    align-items: flex-start;
    gap: 0.1cm;
  }

  .interest-icon {
    width: 10px;
    height: 10px;
    margin-top: 2px;
    filter: none;
    opacity: 0.6;
    flex-shrink: 0;
  }

  .interest-text {
    font-size: 8pt;
    line-height: 1.3;
    color: var(--text-secondary);
    margin: 0;
  }

  /* --------------------------------------------------------------------------
     Page Break Control - Keep everything on one page
     -------------------------------------------------------------------------- */
  .cv-container,
  .profile,
  .cv-content {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Avoid orphans and widows */
  p, li {
    orphans: 2;
    widows: 2;
  }

  /* Force no page breaks in critical areas */
  .cv-section {
    page-break-inside: avoid;
  }

  .entry {
    page-break-inside: avoid;
  }
}