/* CSS variables */
:root {
    --z-header-footer: 50;
    --z-dev-ruler: 9999;
    --gap-default: 1rem;
    --padding-small: 0.5rem;
    --padding-default: 1rem;
}

/* sensible defaults for more predictable layout */
*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--z-header-footer);

    display: flex;
    align-items: center;
    padding: var(--padding-small) var(--padding-default);
}

.header-left,
.header-right {
    flex: 1;
}

.header-center {
    flex: 0;
    text-align: center;
}

.header-right {
    text-align: right;
}

/* header link spacing */
.header-center a,
.header-right a {
    padding: 0 calc(var(--padding-default) / 2);
}

/* main layout */
.main {
    width: 100%;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* page-specific layouts */
/* home and about pages use similar layouts */
.home-content,
.about-content {
    width: 100%;
    height: 60%;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly; /* distribute items evenly */
    align-items: center;
}

/* contact page: centered column layout */
.contact-content {
    width: 100%;
    height: 60%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* collection page: centered with slight downward offset */
.collection-content {
    width: 100%;
    height: 60%;

    display: flex;
    flex-direction: column;
    align-items: center;

    transform: translateY(10%); /* offset for visual balance */
}

/* footer */
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: var(--z-header-footer);

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

    padding: var(--padding-small) var(--padding-default);
}

.footer-center-right {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.footer-center-left {
    width: 6ch;
    text-align: center;
    flex-shrink: 0;
}

.footer-right {
    text-align: right;
}

/* ---------------- hidden mobile navigation ---------------- */
.hamburger {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    appearance: none;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 100%;
    min-height: 18px;
    padding: 0;
}

.mobile-menu {
    display: none;
}

/*-------------- desktop lock-in (≥1025px) --------------*/
@media screen and (min-width: 1025px) {
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

/*-------------- tablet styles (≤1024px) --------------*/
@media screen and (max-width: 1024px) {
    /* switch to flexible column layout for narrower screens */

    html,
    body {
        height: 100%;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    .main {
        flex: 1;
        height: auto;
        padding-top: 3rem;
        padding-bottom: 3.5rem;
    }

    .header {
        position: relative;
        padding: var(--padding-default);
        background-color: white;
    }

    .home-content,
    .about-content {
        width: 100%;
        height: auto;

        flex-direction: column;
        align-items: center;
    }

    .home-content {
        justify-content: flex-start;
        gap: var(--gap-default);
        padding: var(--gap-default) 0;
    }

    .about-content {
        justify-content: space-evenly;
    }

    .contact-content {
        height: auto;
    }

    .collection-content {
        width: 100%;
        height: auto;
        transform: translateY(0);
    }

    .footer {
        position: relative;
        background-color: white;
    }
}

/*-------------- mobile styles (≤767px) --------------*/
@media screen and (max-width: 767px) {
    /* stack everything vertically and optimize spacing for small screens */

    .main {
        padding-top: 0.75rem;
    }
    
    /* hide desktop navigation */
    .header-center,
    .header-right {
        display: none;
    }

    /* restructure header layout for mobile */
    .header {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 45;
        background-color: white;
    }

    /* show hamburger */
    .hamburger {
        display: flex;
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }

    /* hamburger menu lines */
    .hamburger span {
        display: block;
        width: 24px;
        height: 1px;
        background-color: black;
        transition: background-color 120ms ease, transform 160ms ease;
    }

    /* center the brand */
    .header-left {
        text-align: center;
    }

    /* mobile dropdown menu */
    .mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;

        display: flex;
        flex-direction: column;
        gap: 1rem;

        padding: 1rem;
        background-color: white;
        border-bottom: solid 1px black;

        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;

        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .mobile-menu.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .home-content {
        gap: calc(var(--gap-default) / 2);
        padding: calc(var(--gap-default) / 2) 0;
    }

    .footer {
        overflow: visible;

        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto;
        align-items: center;

        gap: 0.25rem;
        padding: 1.5rem 1rem;
    }

    /* top footer row */
    .footer-center-right {
        grid-column: 1 / -1;
        grid-row: 1;

        display: flex;
        flex-direction: column;
        text-align: left;

        margin-bottom: 1rem;
    }

    /* bottom footer row */
    .footer-left {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        align-self: end;
    }

    .footer-center-left {
        grid-column: 2;
        grid-row: 2;
        justify-self: center;
        align-self: end;
    }

    .footer-right {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        align-self: end;
        text-align: right;
    }
}