@charset "UTF-8";
/**
 * Set charset of stylesheet
 * Must be first line
 * with no comments or spaces
 */

/**
 * Mobile First CSS
 * Rules at top impact all sizes
 * Fully style mobile before adding media queries
 * Media queries are for larger screens
 * Then override property/value as needed
 * No new rules after lat media query
 */

/** 
 * Change Box Model to Border Box
 * subtract padding and border from the width of the element 
 */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit
}

/**
 * Body Reset
 * remove default margin
 * set font-family
 */

body {
    margin: 0;
    font-family: sans-serif;
}

/**
 * div.wrapper
 * grid container
 * one column on mobile
 * width 100% of viewport max width 1024px
 * gap between grid items 1rem (16px root element font size)
 * padding right and left (prevent content from touching edges)
 * padding top 48px (prevent content from being hidden by header)
 * margin 0 auto (center container)
 */
.wrapper {
    display: grid;
    width: min(100%, 1024px);
    gap: 1rem;
    padding: 48px 1rem 0;
    margin: 0 auto;
    background: whitesmoke;
}

/**
 * Header
 * Set height to 128px
 * Background image
 * Flexbox
 * Flow items top to bottom
 * Justify content to center
 * position fixed
 * top right left 0 - position at top of viewport
 * padding left 48px - prevent content from touching edges
 * Background color with opacity
 * Backdrop filter
 * Box shadow
 */
header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 48px;
    padding-left: 48px;
    background: hsl(212.45deg 50% 61.57% / 70%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px black;
}

/**
* Header h1
* Remove default margin
* Add padding
* Background color with opacity
* Backdrop filter
* Font size responsive using clamp function
* clamp() values created 
* - - based on existing/expected words per line 
* - - and trial/error
* - clamp(1rem,    5vw,     2rem)
* -       min      central  max
* -       20px     16-32px  32px
* - 320px viewport width central value is 320*.05 = 16px
* - 640px viewport width central value is 640*.05 = 32px
*/
header h1 {
    margin: 0;
    padding: 0 0 0 0;
    font-size: clamp(1rem, 5vw, 2rem);
}

/* START - .nav-main */
/**
* Nav Element
* position fixed
* top left 0
* line height 0 - remove space between inline elements (button)
*/
.nav-main {
    position: fixed;
    top: 0;
    left: 0;
    line-height: 0;
}

/**
 * Nav Main Menu Toggle
 * Button Element
 * no background
 * no border
 * cursor pointer - show pointer on hover
 */
.nav-main-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

/** 
 * SET SVG TRANSFORMS
 * based on individual elements not SVG box 
 */
.nav-main-menu-toggle svg * {
    transform-box: fill-box;
}

/** 
 * HAMBURGER MENU ICON 
 * 3 RECTANGLES
 * set transition properties
 * set transform origin x and y to center
 * - rotate and translate will be based on center
 */
.nav-main-menu-toggle rect:nth-child(1) {
    transition: all 2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transform-origin: center;
}

.nav-main-menu-toggle rect:nth-child(2) {
    transition: all 2.25s linear;
    transform-origin: center;
}

.nav-main-menu-toggle rect:nth-child(3) {
    transition: all 2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transform-origin: center;
}

/**
 * JAVASCRIPT WILL ADD 
 * - aria-expanded="true" 
 * - to .nav-main-menu-toggle 
 * turn hamburger menu into -
 * turn units are same as rotate in degrees
 * scale will make middle rectangle disappear
 */
 .nav-main-menu-toggle[aria-expanded="true"] rect:nth-child(1) {
    rotate: 1.125turn;
    translate: 0 10px;
}

.nav-main-menu-toggle[aria-expanded="true"] rect:nth-child(2) {
    scale: 0;
}

.nav-main-menu-toggle[aria-expanded="true"] rect:nth-child(3) {
    rotate: -1.125turn;
    translate: 0 -10px;
}

/* END - .nav-main-menu-toggle */

/**
 * Nav Main Menu - the UL
 * transform translateX -100%
 * - move off screen
 * - negative move away from element
 * - positive move toward element
 * - translate percentage based on width of element
 * - not the parent element
 * position absolute
 * width 100vw
 * height 100vh
 * remove default margin and padding
 * remove list style
 * display flex
 * flex direction column
 * visibility hidden
 * - hide menu
 * - will be shown by javascript
 * box shadow
 * clip path will hide shadow on top
 * - zero pixels will clip shadow at box edge
 * - negative pixels will extend shadow beyond box edge
 */
#nav-main-menu {
    transform: translateX(-100%);
    transition: all 1s ease-in-out;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: hsl(212.45deg 50% 100% / 70%);
    backdrop-filter: blur(5px);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    box-shadow: 0px 0px 10px black;
    clip-path: inset(0px 0px -10px 0px);
}

/**
 * Show Nav Main Menu - the UL
 * :not() selector
 * if hidden attribute is not present
 * - show menu
 * - translateX 0 
 * - move on screen
 * transition all properties that change
 * - duration 1.8 seconds
 * - ease-in-out timing function
 */
#nav-main-menu:not([hidden]) {
    visibility: visible;
    transform: translateX(0);
    transition: all 1.8s ease-in-out;
}

/**
 * Anchor Elements
 * color inherit
 * - inherit color from parent element
 * display flex
 * - can set width and height
 * - entire element is clickable
 * line height 3
 * - 3 times the font size
 * padding 0 2em left and right
 * - 2em is 2 times the font size
 * transition all properties that change
 * - duration .25 seconds
 * - ease-in-out timing function
 */
#nav-main-menu li a {
    color: inherit;
    display: flex;
    line-height: 3;
    padding: 0 2em;
    transition: all .25s ease-in-out;
}

#nav-main-menu li a:hover,
#nav-main-menu li a:focus {
    background: whitesmoke;
}

/* END - .nav-main */


/**
 * Main Images
 * Default styles
 * Then modifier classes as needed
 */
.main-img {
    width: 100%;
    background-color: lightgray;
    padding: 10px;
    border: 1px solid darkgray;
}

/**
 * Footer
 * Flexbox
 * Flow items left to right 
 * Wrap items to next line if needed
 */
footer {
    display: flex;
    flex-wrap: wrap;
}

/**
 * Footer Links
 * Line height twice the font size
 * - Height properties only work on block level elements or grid/flex items
 */
 footer a {
    color: darkblue;
    text-decoration: none;
    line-height: 2;
}

/**
 * :first-child first anchor in footer
 * auto margin right 
 * - push to right
 * - based on available space
 */
footer :first-child {
    margin-right: auto;
}

/**
 * Breakpoint @media rule
 * min-width 768px and larger
 * Override rules 
 * properties/values from above
 */
@media screen and (min-width: 768px) {

    /**
     * div.wrapper
     * 2 columns 70% and 30% based on fr unit
     */
    .wrapper {
        grid-template-columns: 7fr 3fr;
        padding-top: 0;
    }

    /**
     * Set header, nav, footer to span all columns
     * grid-column 1 / -1
     * 1 is first column
     * -1 is last column
     */
    header,
    nav,
    footer {
        grid-column: 1 / -1;
    }

    /**
     * Header
     * Set height to 40vh
     * 40% of viewport height
     */
    header {
        position: static;
        height: 40vh;
        padding-left: 0;
        background-image: url(images/dali-bai-1920.webp);
        justify-content: flex-end;
        align-items: stretch;
        box-shadow: none;
    }

    header h1 {
        padding: 1rem 0.5rem;
        background-color: rgba(255, 255, 255, 0.312);
        backdrop-filter: blur(5px);
    }

    .nav-main {
        position: static;
        top: auto;
        left: auto;
        z-index: auto;
    }

    #nav-main-menu {
        position: relative;
        visibility: visible;
        transform: translateX(0);
        transition: none;
        width: auto;
        height: auto;
        background: transparent;
        backdrop-filter: none;
        flex-direction: row;
        box-shadow: none;
        clip-path: none;
    }

    .nav-main-menu-toggle {
        display: none;
    }


    /**
     * Main Images
     * Override width to auto - actual image size
     * Create modifier classes for float left and right
     */
    .main-img {
        width: auto;
    }

    .main-img-left {
        float: left;
        margin: 0 10px 10px 0;
    }

    .main-img-right {
        float: right;
        margin: 0 0 10px 10px;
    }

    /**
     * Main Headings
     * Clear floating images if needed
     */
    main h2,
    main h3,
    main h4,
    main h5,
    main h6 {
        clear: both;
    }

    /**
     * Main Grid
     * Section elements are grid items
     * Will automatically contain floating images
     */
    main {
        display: grid;
        gap: 1rem;
    }

    main section {
        padding: 10px;
        border: 1px solid lightgray;
    }

}