/*
author: Zowie Beha
license: Copyright © 2024 Zowie Beha
*/


/* ===========
About-us content
============== */

main > section p br {
    margin-bottom: 1em;
}
main > section a {
    color: #5b86f1;
    transition-property: color;
    transition-duration: 0.1s;
}
main > section a:hover {
    color: #4c71d1;
}

main > section > h1 {
    font-size: xx-large;
    margin-bottom: 0.5em;
    border-bottom: 2px solid #FFD711;
}

main > section img {
    border-radius: 3em;
    height: 20em;
    /* max-height: 500%; not respected. use media query with flexbox instead */
    max-width: 100%;
}

main > section img.sunshine {
    border-top: 2px solid #f1ebcc;
    filter: drop-shadow(#FFD711 0 0 0.2em);
}

main > section img.bird {
    border-radius: 3em;
    border: 2px solid #bd5d80;
    filter: drop-shadow(#da7a9d 0 0 0.3em);
}

main > section > div {
    width: 80%;
    
    display: flex;
    gap: 2em;
}

main > section > div h2 {
    font-size: 2em;
}

main > section > div p {
    padding-left: 0.7em;
}

main > section > div p.border-left {
    border-left: 2px dashed #FFD711;
}

main > section > div h2 span {
    /* Fit box to content */
    display: inline;
    /* Make absolute children (:after) be relative to parent container (span) */
    position: relative;
}

main > section > div h2 span.underline::after {
    content: '';
    /* Exit the flow of the doc so we can place the psuedo element
       without affecting other elements */
    position: absolute;
    
    /* Stay at correct position */
    bottom: 0.05em;
    right: 0;
    
    width: 2em;
    border-bottom: 2px dashed #f3cf1b;
}


main > section > div:nth-child(1n+3) {
    margin-top: 2.5em;
}

main > section img.left-img {
    margin-right: 2em;
}

main > section > div.text-center {
    text-align: center;
    justify-content: center;
}

/* why does `main > section > div:nth-child(1)` not select
the first div?? */
main > section > div:nth-child(3) {
    width: 70%;
}

main > section img.right-img {
    margin-left: 1em;
}


main > section > div h2.truck-icon::before {
    content: "🚚";
    display: block;
    margin-top: -0.4em;
    font-size: xx-large;
}

main > section > div h2.family-icon::before {
    content: "🙋‍♂️";
    display: block;
    margin-top: -0.2em;
    font-size: xx-large;
}

/* ===========
Responsive about-us content
============== */

/* center flex boxes on bigger screen */
@media screen and (min-width: 93.125em) {
    main > section > div {
        width: 100%;
        justify-content: center;
    }
}


@media screen and (max-width: 80.125em) {
    /* extra specificity to override width */
    main > section > div:nth-child(1n+1) {
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
    }
    
    main > section > div > div {
        order: 2;
    }
    
    main > section > div p.border-left {
        border-left: none;
    }
    
}

/* Prevent img squish */
@media screen and (max-width: 32.625em) {
    main > section > div img {
        object-fit:cover;
    }
}


@media screen and (max-width: 44em) {
    main > section > div {
        padding: 0 1em;
    }
}