/* ============================================================================
   RESUME PAGE STYLES
   ============================================================================

   Professional resume page with print-optimized layout.
   Features contact info, work experience, education, and skills.

   Includes @media print styles for PDF generation.
   All styles (except print) are scoped to 'main' to prevent affecting header/footer.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Main Layout
   ---------------------------------------------------------------------------- */

main {
    max-width: 900px;
    width: 100%;
    margin: var(--spacing-xl) auto;  /* 2rem top/bottom from common.css */
    padding: 0 var(--spacing-md);    /* 1rem left/right from common.css */
    box-sizing: border-box;          /* Include padding in width calculation */

    /* Override base monospace font with more professional typeface */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;

    /* Ensure long words and URLs wrap properly */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ----------------------------------------------------------------------------
   Typography
   ---------------------------------------------------------------------------- */

main h1,
main h2,
main h3 {
    color: var(--color-nav-bg);  /* Match nav color (#2c3e50) */
}

main ul {
    margin: 0;
    padding-left: 1.5rem;
}

main section {
    margin-bottom: var(--spacing-xl);  /* 2rem from common.css */
}

/* ----------------------------------------------------------------------------
   Contact Section
   ---------------------------------------------------------------------------- */

.contact {
    margin-bottom: var(--spacing-xl);
}

.contact h1 {
    margin-bottom: 0.5rem;
}

/* Contact links - flex wrap for responsive layout */
.contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);  /* 1rem from common.css */
    margin: var(--spacing-md) 0;
}

.contact-links a {
    white-space: nowrap;  /* Prevent email/links from breaking mid-word */
}

/* ----------------------------------------------------------------------------
   Work Experience
   ---------------------------------------------------------------------------- */

.job-title {
    font-weight: bold;
}

.date-range {
    font-style: italic;
    color: var(--color-text-secondary);  /* #555 from common.css */
}

/* ----------------------------------------------------------------------------
   Download PDF Button
   ---------------------------------------------------------------------------- */

.download-pdf-btn {
    background-color: var(--color-primary);       /* #007acc from common.css */
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);              /* 4px from common.css */
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    margin-top: var(--spacing-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);  /* 0.2s from common.css */
}

.download-pdf-btn:hover {
    background-color: var(--color-primary-hover);  /* #005a99 from common.css */
    text-decoration: none;
}

/* ----------------------------------------------------------------------------
   Print Styles - Optimized for PDF generation
   ---------------------------------------------------------------------------- */

@media print {
    /* Hide navigation and footer when printing */
    nav, footer {
        display: none !important;
    }

    /* Hide download button in printed version */
    .download-pdf-btn {
        display: none !important;
    }

    /* Use traditional serif font for print */
    body {
        font-family: 'Times New Roman', Times, serif;
    }

    /* Remove margins for better page utilization */
    main {
        margin: 0;
        padding: 0;
    }
}
