/**
 * This file is for handling responsive design on embedded
 * content pages. An overview of the things this file does:
 *	- Sets the sizing of columns in the content of the page
 *	  - ID "content" must be set on a root div of a content
 *		page.
 *    - Class "content-1", "content-2", or "content-3" must
 *		be set in that same div element to determine how many
 *		columns each content view will contain.
 *	  - Landscape will display at most 2 pages at once.
 *	  - Portrait will only ever display 1 page.
 *	- Hides elements that will render an invalid column in
 *	  the view.
 *	- Provides keyframe animations for navigating columns.
 *	- See layout.js for details on how to change pages.
 * This file is designed to be extended if needed with ease.
 * For example, if four columns are required, only a few new
 * rules need to be introduced. Their locations will be
 * marked with comments throughout the file.
 */

@import url(./home.css);
@import url(./medications.css);
@import url(./calendar.css);
@import url(./account.css);
@import url(./login.css);
@import url(./404.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;

    --header-height: 8dvh;
    --footer-height: 8dvh;

    &.fade-in {
        animation: fade-in 1s ease-in forwards;
    }

    &.fade-out {
        animation: fade-out 1s ease-out forwards;
    }
}

body {
    width: 100dvw;
    height: 100dvh;
}

aside {
    display: flex;
    flex-direction: column;
    border-right: 1px solid black;
    background-color: whitesmoke;

    > * {
        width: 100%;
    }

    > img {
        flex-shrink: 2;
        padding: 20px;
        border: none;
    }

    > nav {
        flex-grow: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        > a {
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid black;
            border-radius: 20px;
            height: 100%;
            margin: 20px;
            text-decoration: none;
            color: black;
        }
    }
}

main {
    width: 100%;
    
    label {
        font-weight: bold;
    }

    input {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 100%; 
        /* ensure full width within form */
    }

    button {
        padding: 8px;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
}

/* Dynamic footer with a back button. */
footer {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    width: 75dvw;
    height: var(--footer-height);
    background-color: whitesmoke;
    border-top: 1px solid black;
    transform: translate(0, 100%);
    z-index: 1;

    a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 20px;
        text-decoration: none;
        color: dimgrey;
        font-weight: bold;
        font-size:x-large;

        &:hover {
            background-color: lightgrey;
        }
    }

    &.open {
        animation: footer-open 1s ease-in forwards;
    }

    &.closed {
        animation: footer-close 1s ease-in forwards;
    }
}

#content {
    --content-gap: 2dvw;

	display: grid;
    gap: var(--content-gap);
    padding: calc(var(--content-gap) / 2);
    
    /**
     * Properties for keeping track of the current column and
     * offsets for transformation keyframes.
     */
    --content-col-start: 0;
    --content-col-end: 0;
    --content-height-start: 100dvh;
    --content-height-end: 100dvh;
}

/* One subpage/column. */
.content-1 {
	grid-template-columns: 1fr;
	width: 100%;
}

/* Two subpages/columns. */
.content-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* Three subpages/columns. */
.content-3 {
	grid-template-columns: repeat(3, 1fr);
}

/**
 * Add more subpages/columns here. Example:
 * .content-n {
 *	   grid-template-columns: repeat(n, 1fr);
 * }
 */

/* Hide the invalid translations. */
.col {
    display: grid;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid black;

	&:first-of-type .shift-left,
	&:last-of-type .shift-right {
		display: none;
	}
}

.hidden {
    opacity: 0;
}

/* Landscape orientation. */
@media screen and (orientation: landscape) {
    body {
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-template-areas: "sidebar content";

        header {
            display: none;
        }

        aside {
            grid-area: sidebar;
            height: 100dvh;
        }

        main {
            grid-area: content;
        }
    }

    /* Column shifting animation. */
	#content {
        height: 100dvh;
        max-height: 100dvh;
		animation: content-shift-landscape 1s ease-in forwards;
	}
	
	.content-2 {
		width: 100%;
	}
	
	.content-3 {
		width: 150%;
	}
	
	/**
	 * Add more subpages/columns here. Example:
	 * .content-n {
	 *	   width: 50% * n;
	 * }
	 */
}

/* Portrait orientation. */
@media screen and (orientation: portrait) {
    aside {
        position: fixed;
        top: var(--header-height);
        width: 50%;
        height: calc(100dvh - var(--header-height));
        transform: translate(-100%, 0);
        z-index: 1;

        &.nav-open {
            animation: nav-open 1s ease-in forwards;
        }

        &.nav-close {
            animation: nav-close 1s ease-out forwards;
        }
    }

    header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: var(--header-height);
        border-bottom: 1px solid black;
        background-color: whitesmoke;

        #hamburger-icon {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: calc(var(--header-height) * 0.8);
            width: calc(var(--header-height) * 0.8);
            margin: calc(var(--header-height) / 10);
            padding: calc(var(--header-height) / 10);
            border: 1px solid black;
            border-radius: calc(var(--header-height) * 0.2);

            div {
                --hamburger-line-thickness: calc(var(--header-height) / 8);

                background-color: grey;
                height: var(--hamburger-line-thickness);
                border-radius: calc(var(--hamburger-line-thickness) / 2);
            }
        }
    }

    main {
        height: calc(100dvh - var(--header-height));
    }

	/* Column shifting animation. */
	#content {
        height: calc(100dvh - var(--header-height));
        max-height: calc(100dvh - var(--header-height));
		animation: content-shift-portrait 1s ease-in forwards;
	}

	.content-2 {
		width: 200%;
	}

	.content-3 {
		width: 300%;
	}

	/**
	 * Add more subpages/columns here. Example:
	 * .content-n {
	 *	   width: 100% * n;
	 * }
	 */

    footer {
        width: 100%;
    }    
}

/* Open navigation in portrait. */
@keyframes nav-open {
    0% {
        transform: translate(-100%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* Close navigation in portrait. */
@keyframes nav-close {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

/* Landscape page shift keyframe animation. */
@keyframes content-shift-landscape {
	0% {
		/* Accounts for sidebar and dynamic header. */
        transform: translate(calc(-37.5dvw * var(--content-col-start)), 0);
        max-height: var(--content-height-start);
	}
	
	100% {
        /* Accounts for sidebar and dynamic header. */
		transform: translate(calc(-37.5dvw * var(--content-col-end)), 0);
        max-height: var(--content-height-end);
	}
}

/* Portrait page shift keyframe animation. */
@keyframes content-shift-portrait {
	0% {
		/* Start - Current screen offset of the page. */
		transform: translate(calc(-100dvw * var(--content-col-start)), 0);
        max-height: var(--content-height-start);
	}
	
	100% {
		/* End - Desired screen offset of the page. */
		transform: translate(calc(-100dvw * var(--content-col-end)), 0);
        max-height: var(--content-height-end);
	}
}

@keyframes footer-open {
    0% {
        transform: translate(0, 100%);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes footer-close {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 100%);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 100%;
    }
}

@keyframes fade-out {
    0% {
        opacity: 100%;
    }

    100% {
        opacity: 0;
    }
}