/* ===========================================
   Mike Stafford Virtual Resume - Print Styles
   Executive Brief Format for PDF Export
   =========================================== */

@media print {
  /* ===================
     PAGE SETUP
     =================== */
  @page {
    size: letter;
    margin: 0.75in;
  }

  @page :first {
    margin-top: 0.5in;
  }

  /* ===================
     BASE RESET FOR PRINT
     =================== */
  /*
   * Safari Print Compatibility Notes:
   * - Safari doesn't support @page margins (users must adjust in print dialog)
   * - Safari has issues with page-break-inside on flex containers (use display: block)
   * - Safari needs explicit grid values (avoid auto/minmax with intrinsic sizing)
   */
  * {
    background-color: transparent !important;
    background-image: none !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Force animated elements to be visible (JS doesn't run in print) */
  .animate-fade-in,
  .animate-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  html, body {
    font-size: 11pt;
    line-height: 1.4;
    background: white !important;
  }

  /* Hide page texture and decorative elements for print */
  body::before,
  body::after,
  .section::after,
  .section .container::before,
  .section h2::after {
    display: none !important;
    content: none !important;
  }

  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  /* ===================
     TYPOGRAPHY FOR PRINT
     =================== */
  h1 {
    font-size: 24pt;
    margin-bottom: 8pt;
  }

  h2 {
    font-size: 16pt;
    margin-bottom: 12pt;
    margin-top: 24pt;
    padding-bottom: 4pt;
    border-bottom: 1px solid #ccc;
  }

  h3 {
    font-size: 13pt;
    margin-bottom: 6pt;
  }

  h4 {
    font-size: 12pt;
    margin-bottom: 4pt;
  }

  p {
    margin-bottom: 8pt;
    orphans: 3;
    widows: 3;
  }

  /* ===================
     LINKS - SHOW URLs
     =================== */
  a {
    color: #1a1a1a !important;
    text-decoration: underline;
  }

  a[href^="http"]::after,
  a[href^="https"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666 !important;
    word-break: break-all;
  }

  /* Don't show URLs for internal links or nav links */
  .nav__link::after,
  .skip-link::after,
  a[href^="#"]::after {
    content: none !important;
  }

  /* ===================
     HIDE ELEMENTS
     =================== */
  .header,
  .nav,
  .skip-link,
  #contact .contact__form,
  .contact__divider,
  .btn,
  .hero__links,
  .footer,
  .animate-fade-in,
  .animate-stagger {
    /* Make animations visible immediately */
  }

  .header,
  .nav,
  .skip-link,
  .section-nav {
    display: none !important;
  }

  /* Hide timeline images for print */
  .timeline__image {
    display: none !important;
  }

  /* Hide contact form for print */
  .contact__form {
    display: none !important;
  }

  .contact__divider {
    display: none !important;
  }

  /* ===================
     LAYOUT ADJUSTMENTS
     =================== */
  .container {
    max-width: 100%;
    padding: 0;
    margin: 0;
    position: static !important;
  }

  .section {
    position: static !important;
    padding: 16pt 0;
    /* Allow sections to break across pages - only protect individual cards */
  }

  /* First section - no top padding since header is hidden */
  #hero {
    min-height: auto;
    padding-top: 0;
  }

  /* Hide hero background image for print */
  #hero::before,
  #hero::after {
    display: none !important;
  }

  /* ===================
     HERO SECTION
     =================== */
  .hero__content {
    display: block;
    text-align: center;
  }

  .hero__image {
    width: 120px;
    height: 120px;
    border: 2px solid #333;
    margin: 0 auto 16pt;
    border-radius: 50%;
  }

  .hero__text {
    text-align: center;
  }

  .hero__name {
    font-size: 28pt;
    margin-bottom: 4pt;
  }

  .hero__title {
    font-size: 14pt;
    color: #333 !important;
    margin-bottom: 4pt;
  }

  .hero__subtitle,
  .hero__location {
    font-size: 11pt;
    color: #666 !important;
    margin-bottom: 4pt;
  }

  .hero__quote {
    margin: 16pt auto;
    padding: 12pt 16pt;
    border-left: 3px solid #333;
    background: #f8f8f8 !important;
    font-style: italic;
    max-width: 500pt;
  }

  /* ===================
     PROOF BAR
     =================== */
  .proof__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12pt;
  }

  .proof__item {
    display: block; /* Safari: avoid flex for print */
    text-align: center;
    padding: 8pt;
    border: none;
  }

  .proof__item .section-icon {
    display: none;
  }

  .proof__value {
    font-size: 14pt;
    font-weight: bold;
    color: #333 !important;
  }

  .proof__label {
    font-size: 10pt;
    font-weight: 600;
  }

  .proof__description {
    font-size: 8pt;
    color: #666 !important;
  }

  /* ===================
     COGNITIVE SECTION
     =================== */
  /* Keep web layout - scaled down for print */
  .cognitive__chart-wrapper {
    max-width: 380px;
    margin: 16pt auto;
    position: relative;
  }

  /* Preserve label positioning from web styles - adjusted for smaller size */
  .radar-label {
    position: absolute;
  }

  .radar-label--top {
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
  }

  .radar-label--right {
    right: -95px;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
    max-width: 160px;
  }

  .radar-label--bottom {
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
  }

  .radar-label--left {
    left: -95px;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    max-width: 160px;
  }

  .radar-label__name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 9pt;
    font-weight: 600;
  }

  .radar-label--right .radar-label__name {
    justify-content: flex-start;
  }

  .radar-label--left .radar-label__name {
    justify-content: flex-end;
  }

  .radar-label__icon {
    width: 14px;
    height: 14px;
  }

  .radar-label__score {
    display: block;
    font-size: 9pt;
    font-weight: 700;
    text-align: center;
  }

  /* Preserve color-coded labels for print */
  .radar-label--spatial .radar-label__icon { color: #0ea5e9 !important; }
  .radar-label--spatial .radar-label__score { color: #0ea5e9 !important; }

  .radar-label--wmi .radar-label__icon { color: #10b981 !important; }
  .radar-label--wmi .radar-label__score { color: #10b981 !important; }

  .radar-label--vci .radar-label__icon { color: #64748b !important; }
  .radar-label--vci .radar-label__score { color: #64748b !important; }

  .radar-label--psi .radar-label__icon { color: #8b5cf6 !important; }
  .radar-label--psi .radar-label__score { color: #8b5cf6 !important; }

  /* SVG chart styles for print */
  .radar-chart__profile {
    fill: none;
    stroke: #0ea5e9 !important;
    stroke-width: 2.5;
  }

  .radar-chart__baseline {
    stroke: #999 !important;
    stroke-dasharray: 4, 4;
  }

  .radar-chart__axes {
    stroke: #ccc !important;
  }

  /* Preserve gradient fill - use solid fallback for print */
  .radar-chart polygon[fill^="url"] {
    fill: rgba(148, 163, 184, 0.15) !important;
  }

  /* Keep colored dots */
  .radar-chart circle[fill="#0ea5e9"] { fill: #0ea5e9 !important; }
  .radar-chart circle[fill="#10b981"] { fill: #10b981 !important; }
  .radar-chart circle[fill="#64748b"] { fill: #64748b !important; }
  .radar-chart circle[fill="#8b5cf6"] { fill: #8b5cf6 !important; }

  .cognitive__details {
    /* Allow to break if needed */
  }

  .cognitive__detail::before {
    background-color: #333 !important;
  }

  /* ===================
     CAPABILITIES
     =================== */
  .capabilities__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12pt;
  }

  .capability-card {
    display: block;
    padding: 10pt;
    border: none;
    border-left: 2px solid #333;
    page-break-inside: avoid;
  }

  .capability-card .section-icon {
    display: none;
  }

  .capability-card__title {
    font-size: 11pt;
    color: #333 !important;
    margin-bottom: 4pt;
  }

  .capability-card__description {
    font-size: 9pt;
    color: #666 !important;
  }

  /* ===================
     ENGAGEMENTS
     =================== */
  .engagements__tier {
    margin-bottom: 16pt;
  }

  .engagements__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12pt;
  }

  .engagements__grid--tier1 {
    grid-template-columns: repeat(3, 1fr);
  }

  .engagement-card {
    display: block;
    padding: 10pt;
    border: none;
    border-left: 2px solid #333;
    page-break-inside: avoid;
  }

  .engagement-card .section-icon {
    display: none;
  }

  .engagement-card__title {
    font-size: 11pt;
    margin-bottom: 4pt;
  }

  .engagement-card__description {
    font-size: 9pt;
    color: #666 !important;
  }

  .engagements__models {
    border: none;
    padding: 12pt;
    margin-top: 16pt;
  }

  .engagements__model {
    border: 1px solid #ccc;
    padding: 4pt 8pt;
    font-size: 9pt;
  }

  /* ===================
     EXPERIENCE / TIMELINE
     =================== */
  .timeline {
    max-width: 100%;
  }

  .timeline::before {
    display: none;
  }

  .timeline__entry {
    display: block; /* Safari: page-break-inside requires block, not flex */
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 16pt;
    page-break-inside: avoid;
  }

  .timeline__entry:nth-child(even) {
    margin-left: 0;
    padding-left: 0;
  }

  .timeline__entry::before {
    display: none;
  }

  .timeline__card {
    border: none;
    border-left: 2px solid #333;
    padding: 12pt;
  }

  .timeline__role {
    font-size: 13pt;
  }

  .timeline__company {
    font-size: 12pt;
    color: #333 !important;
  }

  .timeline__meta {
    font-size: 10pt;
    color: #666 !important;
  }

  .timeline__scope {
    font-size: 10pt;
    color: #666 !important;
    border-bottom: 1px solid #ddd;
  }

  .timeline__list {
    font-size: 10pt;
  }

  .timeline__list li::before {
    background-color: #333 !important;
  }

  /* ===================
     CREDENTIALS
     =================== */
  .credentials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12pt;
  }

  .credential-card {
    padding: 10pt;
    border: none;
    text-align: center;
    page-break-inside: avoid;
  }

  .credential-card__badge {
    width: 50px;
    height: 50px;
    margin: 0 auto 8pt;
  }

  .credential-card__name {
    font-size: 10pt;
    margin-bottom: 2pt;
  }

  .credential-card__meta {
    font-size: 9pt;
    color: #666 !important;
    margin-bottom: 4pt;
  }

  .credential-card__verify {
    font-size: 8pt;
  }

  /* ===================
     FIT SECTION
     =================== */
  .fit__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16pt;
  }

  .fit__column {
    padding: 12pt;
    border: none;
    border-left: 2px solid #333;
  }

  .fit__column--good {
    border-left: 2px solid #333;
  }

  .fit__column-title {
    font-size: 12pt;
    margin-bottom: 8pt;
  }

  .fit__list li {
    font-size: 9pt;
    margin-bottom: 6pt;
  }

  .fit__list li::before {
    background-color: #333 !important;
  }

  .fit__column--not .fit__list li::before {
    background-color: #999 !important;
  }

  .fit__note {
    margin-top: 12pt;
    padding: 10pt;
    border: none;
    font-size: 9pt;
    text-align: center;
  }

  /* ===================
     HOW I WORK
     =================== */
  .how-i-work__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10pt;
  }

  .how-i-work__item {
    display: block;
    padding: 10pt;
    border-left: 2px solid #333;
  }

  .how-i-work__item .section-icon {
    display: none;
  }

  .how-i-work__item-title {
    font-size: 11pt;
    color: #333 !important;
    margin-bottom: 4pt;
  }

  .how-i-work__item-description {
    font-size: 9pt;
    color: #666 !important;
  }

  .how-i-work__engagement {
    border: none;
    padding: 12pt;
    margin-top: 16pt;
  }

  /* ===================
     FUTURE SECTION
     =================== */
  .future__roles {
    margin-bottom: 16pt;
  }

  .future__role {
    border: 1px solid #333;
    padding: 4pt 10pt;
    font-size: 10pt;
  }

  .future__vision {
    padding: 12pt;
    border: none;
  }

  .future__vision p {
    font-size: 11pt;
    color: #666 !important;
  }

  /* ===================
     CONTACT SECTION
     =================== */
  #contact {
    page-break-inside: avoid;
  }

  .contact__intro {
    font-size: 11pt;
    margin-bottom: 16pt;
  }

  .contact__ctas {
    display: none;
  }

  .contact__ecosystem {
    border-top: 1px solid #ddd;
    padding-top: 12pt;
  }

  .contact__ecosystem h3 {
    font-size: 10pt;
    margin-bottom: 8pt;
  }

  .contact__links {
    font-size: 10pt;
  }

  /* ===================
     PAGE BREAK CONTROLS
     =================== */
  /* Keep headings with following content */
  h2, h3, h4 {
    page-break-after: avoid;
    -webkit-column-break-after: avoid;
    break-after: avoid;
  }

  /* Cards that should not break across pages */
  .credential-card,
  .timeline__card,
  .capability-card,
  .engagement-card {
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
  }
}