/*
============================================================
RESUME PAGE STYLES
============================================================

File:
    resume.css

Purpose:
    Contains styles used specifically by the Resume page.

Shared styles such as the header, navigation menu, container,
footer, design variables, and accessibility rules remain in
global.css.
*/


/*
============================================================
RESUME SECTION
============================================================

Controls the spacing around the Resume page content.
*/

.resume-section {
    padding: 2rem 0 3rem;
}


/*
============================================================
RESUME HEADING
============================================================

Places the Resume title and primary download button on the
same row when enough horizontal space is available.
*/

.resume-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 1.5rem;
}


/*
============================================================
RESUME TITLE
============================================================

Controls the appearance of the main Resume page heading.
*/

.resume-heading h2 {
    font-size: clamp(2rem, 5vw, 3rem);

    line-height: 1.1;
    letter-spacing: -0.04em;

    color: var(--text-primary);
}


/*
============================================================
DOWNLOAD BUTTON
============================================================

Used above and below the embedded resume.

Both buttons use the same reusable class so changes only need
to be made once.
*/

.download-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 0.8rem 1.25rem;

    background-color: var(--resume-color);
    color: #ffffff;

    font-size: 0.95rem;
    font-weight: 600;

    border: 2px solid var(--resume-color);
    border-radius: 8px;

    cursor: pointer;

    transition:
        background-color var(--transition-speed) ease,
        color var(--transition-speed) ease,
        transform var(--transition-speed) ease;
}


/*
============================================================
DOWNLOAD BUTTON HOVER
============================================================

Provides visual feedback when the visitor moves the pointer
over a download button.
*/

.download-button:hover {
    background-color: transparent;

    color: var(--resume-color);

    transform: translateY(-2px);
}


/*
============================================================
RESUME VIEWER
============================================================

Creates the visual frame surrounding the embedded PDF.

The top border uses the Resume accent color to maintain the
same visual language as the Resume card on the homepage.
*/

.resume-viewer {
    width: 100%;

    overflow: hidden;

    background-color: var(--surface-color);

    border: 1px solid var(--border-color);
    border-top: 5px solid var(--resume-color);

    border-radius: var(--border-radius);

    box-shadow:
        0 4px 15px rgba(23, 32, 51, 0.06);
}


/*
============================================================
PDF IFRAME
============================================================

The iframe fills the available content width and provides
enough vertical space to comfortably review the resume.
*/

.resume-viewer iframe {
    display: block;

    width: 100%;
    height: 80vh;

    min-height: 700px;

    border: 0;
}


/*
============================================================
BOTTOM ACTIONS
============================================================

Positions the second download button underneath the embedded
resume.
*/

.resume-bottom-actions {
    display: flex;

    justify-content: flex-end;

    margin-top: 1.5rem;
}


/*
============================================================
RESPONSIVE DESIGN - MOBILE
============================================================

Contains only Resume-specific responsive behavior.

Shared header and navigation responsiveness is handled by
global.css.
*/

@media (max-width: 700px) {

    /*
    Slightly reduce Resume section spacing on smaller
    displays.
    */

    .resume-section {
        padding: 1.5rem 0 2.5rem;
    }


    /*
    Stack the Resume title and download button vertically.
    */

    .resume-heading {
        flex-direction: column;

        align-items: flex-start;

        gap: 1rem;

        margin-bottom: 1.25rem;
    }


    /*
    Allow download buttons to use the full available width
    on smaller displays.
    */

    .download-button {
        width: 100%;
    }


    /*
    Embedded PDF viewers can be difficult to use on narrow
    displays, so provide a reasonable viewing height.
    */

    .resume-viewer iframe {
        height: 75vh;

        min-height: 550px;
    }


    /*
    The bottom action no longer needs flex alignment because
    the download button occupies the full width.
    */

    .resume-bottom-actions {
        display: block;

        margin-top: 1.25rem;
    }

}


/*
============================================================
REDUCED MOTION ACCESSIBILITY
============================================================

Disables Resume-specific movement for visitors who request
reduced motion through their operating system.

Shared navigation motion preferences are handled separately
inside global.css.
*/

@media (prefers-reduced-motion: reduce) {

    .download-button {
        transition: none;
    }


    .download-button:hover {
        transform: none;
    }

}