/* Page-specific styles for the CV page */

/*
 * CV CONTAINER
 * Main container for all CV content.
 */
.cv-container {
    /* Sets a maximum width for readability. */
    max-width: 800px;
    /* Centers the container on the page. */
    margin: 2rem auto;
    /* Adds padding for smaller screens. */
    padding: 0 2rem;
    /* Sets the font to the body font family. */
    font-family: var(--body-font);
}

/*
 * CV HEADER
 * Styles the main header section with the artist's name.
 */
.cv-header {
    /* Centers the text in the header. */
    text-align: center;
    /* Adds space below the header. */
    margin-bottom: 3rem;
    /* Adds a border below the header. */
    border-bottom: 2px solid var(--primary-accent);
    /* Adds padding below the header text. */
    padding-bottom: 1rem;
}

.cv-header h1 {
    /* Removes the default margin from the h1 element. */
    margin-bottom: 0.25rem;
}

.pronunciation {
    /* Italicizes the pronunciation guide. */
    font-style: italic;
    /* Uses the secondary accent color. */
    color: var(--secondary-accent);
    /* Adds some space below. */
    margin-bottom: 1rem;
}

/*
 * CV SECTION
 * Styles for each major section of the CV (e.g., Education, Awards).
 */
.cv-section {
    /* Adds space below each section. */
    margin-bottom: 2.5rem;
}

.cv-section h2 {
    /* Sets the font to the heading font family. */
    font-family: var(--heading-font);
    /* Adds a border below the section title. */
    border-bottom: 1px solid var(--secondary-accent);
    /* Adds padding below the title. */
    padding-bottom: 0.5rem;
    /* Adds space below the border. */
    margin-bottom: 1rem;
    /* Uses the primary accent color for the text. */
    color: var(--primary-accent);
}

/*
 * CV ENTRY
 * Styles for individual items within a section, like a specific job or degree.
 */
.cv-entry {
    /* Adds space below each entry. */
    margin-bottom: 1rem;
}

.cv-entry h3 {
    /* Removes default margins for tighter spacing. */
    margin: 0;
}

.cv-entry p {
    /* Removes default margins for tighter spacing. */
    margin: 0.25rem 0;
}

/*
 * CV LISTS
 * General styling for unordered lists used throughout the CV.
 */
.cv-section ul {
    /* Removes the default left padding from the list. */
    padding-left: 20px;
    /* Removes the default top and bottom margin. */
    margin-top: 0;
}

.cv-section ul li {
    /* Adds space below each list item for readability. */
    margin-bottom: 0.75rem;
    /* Adjusts line height for better readability. */
    line-height: 1.5;
}

/*
 * CV SUBSECTION DESCRIPTION
 * Styles for the introductory paragraph in the Professional Development section.
 */
.cv-subsection-desc {
    /* Italicizes the text. */
    font-style: italic;
    /* Adds space below the description. */
    margin-bottom: 1rem;
    /* Uses a slightly smaller font size. */
    font-size: 0.9rem;
}

/*
 * RESPONSIVE ADJUSTMENTS
 * Styles for screens smaller than 480px.
 */
@media (max-width: 480px) {
    .cv-container {
        /* Reduces padding on very small screens. */
        padding: 0 1rem;
    }

    .cv-header h1 {
        /* Reduces heading size on small screens. */
        font-size: 2rem;
    }
}