/*
 * Page-Specific Styles for the CV Page (cv/index.html)
 *
 * This file contains styles unique to the Curriculum Vitae page,
 * focusing on clear, readable, and professional typography and layout.
 */

/* ------------------- */
/* CV Section Styling  */
/* ------------------- */
/*
 * General styling for the main content area of the CV.
 */
.cv-section {
    /* Sets a maximum width for the content to improve readability on large screens. */
    max-width: 800px;
    /* Centers the content block within the main container. */
    margin: 0 auto;
}

/*
 * Styles for the main title of the CV page.
 */
.cv-section h1 {
    /* Centers the title. */
    text-align: center;
    /* Adds significant space below the title. */
    margin-bottom: 3rem;
    /* Uses a prominent accent color. */
    color: var(--color-secondary-accent);
}

/* ------------------- */
/* Category Styling    */
/* ------------------- */
/*
 * Styles for each category block within the CV (e.g., Education, Exhibitions).
 */
.cv-category {
    /* Adds space below each category block. */
    margin-bottom: 2.5rem;
    /* Adds a border at the bottom to visually separate categories. */
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(44, 39, 42, 0.2); /* A subtle border using text color with alpha */
}

/*
 * Removes the border from the last category to avoid a double border with the footer.
 */
.cv-category:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/*
 * Styles for the heading of each category.
 */
.cv-category h2 {
    /* Uses the primary accent color for category titles. */
    color: var(--color-primary-accent);
    /* Specifies the font size for the category headings. */
    font-size: 1.8rem;
    /* Adds a border below the heading to make it stand out. */
    border-bottom: 2px solid var(--color-text);
    /* Inline-block display allows the border to span only the width of the text. */
    display: inline-block;
    /* Adds padding below the heading text, inside the border. */
    padding-bottom: 0.25rem;
    /* Adds space below the heading and its border. */
    margin-bottom: 1rem;
}

/*
 * Styles for the content within each category.
 * In a real CV, this would likely be a <ul> or a series of <p> tags with more specific styling.
 * For this placeholder, we just style the paragraph.
 */
.cv-category p {
    /* Sets the line height for readability. */
    line-height: 1.7;
    /* Sets the font size for the main content. */
    font-size: 1rem;
}

/*
 * In a real implementation, you might have list items for exhibitions.
 * This is an example of how you might style them.
 *
 * .cv-entry {
 *   display: flex;
 *   justify-content: space-between;
 *   margin-bottom: 0.5rem;
 * }
 *
 * .cv-entry .year {
 *   font-weight: bold;
 *   flex-shrink: 0;
 *   margin-right: 2rem;
 * }
 *
 * .cv-entry .details {
 *   flex-grow: 1;
 * }
 */