@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)
 * margin 0 auto (center container)
 */
.wrapper {
    display: grid;
    width: min(100%, 1024px);
    gap: 1rem;
    padding: 0 1rem;
    margin: 0 auto;
    background: whitesmoke;
}

/**
 * Header
 * Set height to 128px
 * Background image
 * Flexbox
 * Flow items top to bottom
 * Justify content to bottom
 */
header {
    height: 128px;
    background: url(images/dali-bai-1920.webp) no-repeat center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/**
 * 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(1.25rem, 2vw,     3rem)
 * -       min      central  max
 * -       20px     20-48px  48px
 * - 1100px viewport width central value is 1100*.02 = 22px
 * - 2200px viewport width central value is 2200*.02 = 44px
 */
header h1 {
    margin: 0;
    padding: 1rem .5rem;
    background-color: rgba(255, 255, 255, 0.312);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    font-size: clamp(1.25rem, 7.2vw, 3rem);
}

/**
 * Navigation
 * Override default list styles
 * Override default margins
 * Override default padding-left
 * Flexbox
 * Flow items left to right
 * Wrap items to next line if needed
 */
nav ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
}

nav a {
    color: darkblue;
    padding: 0 .5rem;
}

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

/**
 * Call To Action (CTA)
 * CTA - More (Read More)
 * Container Styles
 * Button Styles
 * Clear floating images if needed
 */
.cta-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    clear: both;
    margin: 1rem 0;
    padding: 1rem 0;
}

.cta-more-center {
    justify-content: center;
}

.cta-more-right {
    justify-content: flex-end;
}

.cta-more-link {
    font-size: 1.2em;
    line-height: 2;
    margin: 10px;
    padding: 0 1em;
    text-decoration: none;
    border-radius: .5em;
    border: 1px solid hsl(0, 0%, 0%);
    font-weight: bold;
    transition: all .5s ease-in-out;
}

/**
 * Hover and Active States
 * Link state is set in .cta-more-link
 * Focus is based on browser default
 */
.cta-more-link:hover {
    box-shadow: none;
}

.cta-more-link:active {
    box-shadow: inset 0 2px 4px hsla(0, 0%, 0%, 1);
}

.cta-more-link-small {
    font-size: 1em;
}

.cta-more-link-large {
    font-size: 1.8em;
}

.cta-more-link-primary {
    color: hsl(0, 0%, 100%);
    box-shadow: 0px 2px 6px hsla(0, 0%, 0%, 0.8);
    background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.8) 0px, hsl(204, 97%, 49%) 2px, hsl(218, 82%, 47%));
}

.cta-more-link-secondary {
    color: black;
    background: hsl(0, 79%, 72%);
    background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.8) 0px, hsl(0, 79%, 72%) 2px, hsl(9, 79%, 42%));
    box-shadow: 0 0em 1em currentColor;
}

.cta-more-link-success {
    color: black;
    background: lightgreen;
    box-shadow: 0 0em 1em currentColor;
}

/**
 * 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;
}

footer :last-child {
    margin-left: 1rem;
}

/**
 * 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;
    }

    /**
     * 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 {
        height: 40vh;
    }

    /**
     * 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;
    }

}