/*
============================================================
GLOBAL DESIGN VARIABLES
============================================================

Centralized values make it easy to change the visual identity
of the entire portfolio without editing individual pages.
*/

:root {

    /* Main backgrounds */
    --background-color: #f3f4f5;
    --surface-color: #ffffff;


    /* Header */
    --header-background-color: #060b5a;
    --header-text-color: #ffffff;
    --header-secondary-text-color: rgba(255, 255, 255, 0.75);


    /* Text */
    --text-primary: #172033;
    --text-secondary: #1f232c;


    /* Brand colors */
    --primary-color: #2563eb;
    --primary-dark: #1e3a8a;
    --primary-light: #dbeafe;


    /* Navigation card accent colors */
    --resume-color: #041f59;
    --projects-color: #160ea5;
    --skills-color: #840505;
    --contact-color: #054b06;


    /* Borders */
    --border-color: #dce3ed;


    /* Layout */
    --max-content-width: 1100px;
    --border-radius: 14px;


    /* Animation */
    --transition-speed: 200ms;
}


/*
============================================================
CSS RESET
============================================================

Provides more predictable sizing and spacing across browsers.
*/

* {
    box-sizing: border-box;

    margin: 0;
    padding: 0;
}


/*
============================================================
BASE DOCUMENT
============================================================
*/

html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

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

    line-height: 1.6;
}


/*
============================================================
SHARED CONTAINER
============================================================

Keeps content centered and prevents it from becoming
excessively wide on large monitors.
*/

.container {
    width: min(90%, var(--max-content-width));

    margin-inline: auto;
}


/*
============================================================
LINKS
============================================================
*/

a {
    color: inherit;

    text-decoration: none;
}


/*
============================================================
SITE HEADER
============================================================

Shared header used throughout the entire portfolio.

The header remains visible at the top of the browser while
the visitor scrolls through a page.
*/

.site-header {
    position: sticky;

    top: 0;

    z-index: 1000;

    padding: 1.25rem 0;

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

    border-bottom: 1px solid var(--border-color);
}


/*
============================================================
HEADER CONTENT
============================================================

Positions the portfolio identity on the left and the menu
button on the right.
*/

.header-content {
    display: flex;

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

    gap: 2rem;
}


/*
============================================================
HEADER IDENTITY
============================================================

Contains the portfolio owner's name and professional title.
*/

.header-identity {
    min-width: 0;
}


/*
============================================================
PORTFOLIO NAME
============================================================

The portfolio owner's name is the primary identity element
inside the shared header.
*/

.site-name {
    font-size: clamp(2rem, 5vw, 3.5rem);

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

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


/*
============================================================
PROFESSIONAL TITLE
============================================================

Displays the primary technical areas directly underneath the
portfolio owner's name.
*/

.site-title {
    margin-top: 0.5rem;

    color: var(--header-secondary-text-color);

    font-size: 1.1rem;
    font-weight: 500;

    line-height: 1.5;
}


/*
============================================================
SITE NAVIGATION
============================================================

Provides the positioning context for the portfolio dropdown
menu.
*/

.site-navigation {
    position: relative;

    flex-shrink: 0;
}


/*
============================================================
MENU BUTTON
============================================================

Provides the clickable area surrounding menu.png.

The button remains transparent so the menu icon is the main
visual element.
*/

.menu-button {
    display: flex;

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

    width: 48px;
    height: 48px;

    padding: 8px;

    background-color: transparent;

    border: none;
    border-radius: 8px;

    cursor: pointer;

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


/*
Adds subtle visual feedback when the visitor moves the mouse
over the menu button.
*/

.menu-button:hover {
    background-color: rgba(255, 255, 255, 0.12);
}


/*
============================================================
MENU ICON
============================================================

Controls the appearance of menu.png.

The original image contains dark menu lines. Because the
portfolio header uses a dark navy background, the filter
converts the icon to white.
*/

.menu-icon {
    display: block;

    width: 30px;
    height: 30px;

    object-fit: contain;

    filter: brightness(0) invert(1);
}


/*
============================================================
NAVIGATION DROPDOWN
============================================================

The dropdown appears directly underneath the menu button.

The menu is hidden by default. JavaScript adds the "open"
class when the visitor clicks the menu icon.
*/

.navigation-menu {
    display: none;

    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    width: 190px;

    padding: 0.5rem;

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

    border: 1px solid var(--border-color);
    border-radius: 10px;

    box-shadow:
        0 12px 30px rgba(23, 32, 51, 0.18);

    z-index: 1100;
}


/*
============================================================
OPEN NAVIGATION MENU
============================================================

global.js adds this class when the menu button is clicked.
*/

.navigation-menu.open {
    display: block;
}


/*
============================================================
NAVIGATION LINKS
============================================================

Controls the appearance of each destination inside the
dropdown menu.
*/

.navigation-menu a {
    display: block;

    width: 100%;

    padding: 0.7rem 0.85rem;

    color: var(--text-primary);

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

    border-radius: 6px;

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


/*
Highlights normal menu items when the visitor moves the
mouse over them.
*/

.navigation-menu a:hover {
    background-color: var(--primary-light);

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


/*
============================================================
CURRENT PAGE
============================================================

The current page remains visible inside the navigation menu
but appears faded and cannot be clicked.

global.js automatically adds this class based on the
data-current-page attribute assigned to the body element.
*/

.navigation-menu .current-page {
    color: #9ca3af;

    background-color: #f3f4f5;

    cursor: default;

    pointer-events: none;
}


/*
Prevents normal hover styling from affecting the menu item
representing the current page.
*/

.navigation-menu .current-page:hover {
    color: #9ca3af;

    background-color: #f3f4f5;
}


/*
============================================================
SECTION LABELS
============================================================

Used for small headings such as ABOUT ME, EXPLORE, RESUME,
PROJECTS, SKILLS, and CONTACT.
*/

.section-label {
    margin-bottom: 1rem;

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.15rem;
    text-transform: uppercase;

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


/*
============================================================
PAGE NAVIGATION
============================================================

Shared sequential navigation used throughout the portfolio.

Normal content pages contain:

    Back                     Next

The Contact page contains:

    Back                     Home

The Home page contains only:

                             Next
*/

.page-navigation {
    display: flex;

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

    gap: 1rem;

    margin-bottom: 1.5rem;
}


/*
============================================================
HOME PAGE NAVIGATION
============================================================

The homepage is the beginning of the sequential portfolio
navigation and therefore does not need a Back button.

This modifier moves the single Next button to the right.
*/

.page-navigation-start {
    justify-content: flex-end;

    margin-top: 1.5rem;
}


/*
============================================================
PAGE NAVIGATION BUTTON
============================================================

Provides shared styling for Back, Next, and Home navigation
controls.
*/

.page-navigation-button {
    display: inline-flex;

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

    min-width: 100px;

    padding: 0.65rem 1rem;

    color: var(--primary-dark);

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

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

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

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


/*
============================================================
PAGE NAVIGATION BUTTON HOVER
============================================================

Provides shared hover feedback for all page navigation
controls.
*/

.page-navigation-button:hover {
    background-color: var(--primary-light);

    color: var(--primary-dark);

    border-color: var(--primary-dark);
}


/*
============================================================
BACK BUTTON HOVER
============================================================

Moves slightly toward the previous-page direction.
*/

.page-back-button:hover {
    transform: translateX(-3px);
}


/*
============================================================
NEXT BUTTON HOVER
============================================================

Moves slightly toward the next-page direction.
*/

.page-next-button:hover {
    transform: translateX(3px);
}


/*
============================================================
HOME BUTTON HOVER
============================================================

The Home button does not move left or right because it does
not represent sequential forward or backward navigation.
*/

.page-home-button:hover {
    transform: none;
}


/*
============================================================
FOOTER
============================================================

Shared footer used throughout the portfolio.
*/

.site-footer {
    padding: 2rem 0;

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

    color: var(--text-secondary);

    font-size: 0.9rem;
}


/*
============================================================
ACCESSIBILITY
============================================================

Provides a visible keyboard focus indicator for interactive
elements.
*/

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--primary-color);

    outline-offset: 4px;
}


/*
============================================================
RESPONSIVE HEADER AND MENU
============================================================

Adjusts the shared header and navigation for smaller screens.
*/

@media (max-width: 700px) {

    /*
    Reduce header spacing on smaller devices.
    */

    .site-header {
        padding: 1rem 0;
    }


    /*
    Reduce the spacing between the identity and menu button.
    */

    .header-content {
        gap: 1rem;
    }


    /*
    Reduce the portfolio name size.
    */

    .site-name {
        font-size: 2rem;
    }


    /*
    Reduce the professional title size and allow it to wrap
    naturally when horizontal space is limited.
    */

    .site-title {
        margin-top: 0.35rem;

        font-size: 0.85rem;
        line-height: 1.4;
    }


    /*
    Slightly reduce the clickable menu button.
    */

    .menu-button {
        width: 44px;
        height: 44px;

        padding: 7px;
    }


    /*
    Slightly reduce the menu icon.
    */

    .menu-icon {
        width: 26px;
        height: 26px;
    }


    /*
    Slightly reduce the dropdown width.
    */

    .navigation-menu {
        width: 175px;
    }


    /*
    Slightly reduce page navigation controls on mobile.
    */

    .page-navigation-button {
        min-width: 90px;

        padding: 0.55rem 0.8rem;

        font-size: 0.9rem;
    }

}


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

Removes shared animations and movement for visitors who have
requested reduced motion through their operating system.
*/

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

    .menu-button,
    .navigation-menu a,
    .page-navigation-button {
        transition: none;
    }


    /*
    Prevent directional movement on Back and Next buttons.
    */

    .page-back-button:hover,
    .page-next-button:hover {
        transform: none;
    }

}