@charset "utf-8";
/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 5
   Review Assignment
   
   Author: Lillian Walker
   Date:   10/31/2025     
      
   Filename: tf_styles4.css

   This file contains the screen styles used with the Trusted
   Friends blog tips
*/

/* Import Basic Design Styles Used on All Screens */
@import url("tf_designs.css");

/* ===============================
   General Flex Styles
   =============================== */

/* Make page body a flex container */
body {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem; /* spacing between main sections */
}

/* Left and Right sections */
#left {
    flex: 1 8 130px;
    min-width: 130px;
}
#right {
    flex: 8 1 351px;
    min-width: 300px;
}

/* Tips sections: article + aside side-by-side */
.tips {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem; /* space between article and aside */
}

/* Article inside tips */
.tips > article {
    flex: 2 1 65%;
    min-width: 300px;
}

/* Aside inside tips */
.tips > aside {
    flex: 1 1 30%;
    min-width: 250px;
}

/* Horizontal nav ul as flex column for mobile */
nav.horizontal ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

/* Responsive images */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ===============================
   Mobile Devices: 0 to 480px
   =============================== */
@media only screen and (max-width: 480px) {
    nav.horizontal a {
        font-size: 1.5em;
        line-height: 2.2em;
    }

    aside {
        display: none; /* hide asides on very small screens */
    }

    /* Archive links in multiple columns */
    nav.vertical ul {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 240px;
    }

    /* Left section near bottom */
    #left {
        order: 99;
    }

    /* Footer at bottom */
    body > footer {
        order: 100;
    }

    /* Show navicon */
    a#navicon {
        display: block;
    }

    /* Hide nav list by default */
    nav.horizontal ul {
        display: none;
    }

    /* Reveal nav on hover/tap */
    a#navicon:hover + ul,
    nav.horizontal ul:hover {
        display: block;
    }

    /* Stack article + aside */
    .tips {
        flex-direction: column;
    }

    .tips > aside {
        flex-basis: auto;
        display: block;
    }
}

/* ===============================
   Tablet Styles: 481px and greater
   =============================== */
@media screen and (min-width: 481px) {
    nav.horizontal ul {
        height: 160px;
    }

    ul.mainmenu > li {
        float: left;
        position: relative;
        width: 20%;
    }

    ul.submenu {
        box-shadow: rgb(51, 51, 51) 5px 5px 15px;
        position: absolute;
        width: 200%;
    }
}

/* ===============================
   Desktop Styles: 769px and greater
   =============================== */
@media only screen and (min-width: 769px) {
    ul.submenu {
        background: transparent;
        box-shadow: none;
        display: block;
        position: relative;
        width: 100%;
    }

    nav.horizontal a.submenuTitle {
        display: none;
    }
}