/* --- In Personal Portfolio/component_stylings/about.css --- */

/* 1. UPDATE this rule for #about */
#about {
    position: relative; /* Establishes a positioning context for children */
    height: 100vh; /* Use height for a true full-screen section */
    
    /* Override the default padding from style.css */
    padding: 0; 
    /* Override the default max-width from style.css */
    max-width: none; 

    /* --- NEW: Use Flexbox for centering --- */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    text-align: center;      /* Center text for the content block */
}

/* 2. UPDATE this rule for #about-content */
#about-content {
    position: relative; /* Use relative so z-index works */
    width: 90%; /* Prevent overflow on smaller screens */
    z-index: 2; /* Ensure it's on top of the canvas */
    max-width: 50rem;
    color: white; /* Make text readable on a dynamic background */

    /* --- NEW: Shift the block up --- */
    transform: translateY(0vh); 
}

#about-content h1 {
    font-size: 4.5rem;
}

#about-content-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* --- Common Button Style --- */
#about-content-buttons .about-button {
    /* Sizing and Shape */
    display: inline-block; /* Added for <a> tags */
    text-decoration: none; /* Added for <a> tags */
    padding: 0.75rem 1.75rem;
    border-radius: 99em; /* Matches header pill shape */
    font-size: 0.9rem;

    /* Font */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Effects */
    cursor: pointer;
    transform: translateY(0); /* Set initial transform for animation */
    transition: background-color 0.3s ease, color 0.3s ease, 
                border-color 0.3s ease, box-shadow 0.3s ease, 
                transform 0.3s ease;
}

/* --- Primary Button (Solid) --- */
#btn-primary {
    background-color: var(--c-action); /* Uses --c-action blue from style.css */
    color: var(--c-bg); /* Uses dark background color for high-contrast text */
    border: 2px solid var(--c-action);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--c-action), transparent 70%);
}

#btn-primary:hover {
    background-color: color-mix(in srgb, var(--c-action), var(--c-light) 20%); /* Lighter blue */
    border-color: color-mix(in srgb, var(--c-action), var(--c-light) 20%);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--c-action), transparent 60%);
    transform: translateY(-3px); /* Add lift */
}

/* --- Secondary Button (Glass/Outline) --- */
#btn-secondary {
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent); /* Matches header bg */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--c-light); /* Uses light text color */
    border: 2px solid color-mix(in srgb, var(--c-light) 40%, transparent); /* Subtle glass border */
}

#btn-secondary:hover {
    background-color: color-mix(in srgb, var(--c-glass) 30%, transparent);
    border-color: var(--c-light); /* Solid white border on hover */
    transform: translateY(-3px); /* Add lift */
    box-shadow: 0 4px 15px color-mix(in srgb, var(--c-light), transparent 85%);
}




/* --- Add to end of about.css --- */

@media (max-width: 820px) {
    #about-content h1 {
        font-size: 3rem; /* Down from 4.5rem */
    }

    /* Stack the buttons */
    #about-content-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    /* Make buttons wider for easier tapping */
    #about-content-buttons .about-button {
        width: 90%;
        max-width: 350px;
    }
}

@media (max-width: 480px) {
    #about-content h1 {
        font-size: 2.25rem; /* Even smaller */
    }
}