/*
    Site        : The Zip Feed
    Document    : style.css
    Created     : February, 16, 2014, January 19, 2025
    Author      : Chase Adkins
    Description : Default, mobile-first styles.
*/

header {
    background-color: rgb(0, 0, 0);
    color: white;
    padding: 5px 0px;
    float: left;
    clear: both;
    width: 100%;
}

footer {
    color: black;
    padding: 0px 0px;
    float: left;
    clear: both;
    width: 100%;
}

.h1, h1 {
    font-size: 2.0rem;
    margin-bottom: 0px;
    line-height: 1.0;
    padding: 0.5%;
}

.article-description h1 {
    font-size: 1.0rem;
}

.h2, h2 {
    font-size: 1.5rem;
}

#newsNav {
    background-color:  wheat;
    color: black;
    padding: 5px 0px;
    float: left;
    clear: both;
    width: 100%;
}

#footerMsg {
    width: 100%;
    color: white;
    float: left;
    clear: both;
    background-color: black;
    padding: 5px;
    margin-bottom: 0rem;
    text-align: center;
}

.disclaimer {
    font-size: 0.75rem;
}

.article {
    width: 100%;
    margin-bottom: 1%;
    float: left;
}

.article-description {
    margin-bottom: 2%;
}

.article-description img {
    float: left;
    padding: 5px 5px;
}

p.article-date {
    margin-top: 5px;
    font-style: italic;
}

.article-title {
    margin-bottom: 0;
    display: block;
    clear: both;
}

img {
    max-width:100%; 
    height:auto;
}

#bottomNav {
    background-color: white;
    color: white;
    text-align: center;
    padding: 2px 10%;
}

#bottomNav a {
    text-decoration: none;
}

#scrollableNav {
    background-color:  wheat;
    color: black;    
    padding: 1% 1%;
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 1%;
}


#legend {
    width: 100%;
    display: block;
}

.color-box {
    width: 20%;
    display: inline-block;
    color: white;
    text-align: center;
    margin-bottom: 1%;
    font-size: .8rem;
    padding: 0.5% 0%;
}
    
.scrollable-item {
    padding: 2% 1%;
}

/*
[1]: All items a forced onto a single line, causing the overflow when necessary.
[2]: Automatic overflow means a scroll bar won’t be present if it isn’t needed
[3]: Make it smooth scrolling on iOS devices before 
[4]: Hide the ugly scrollbars in Edge until the scrollable area is hovered
[5]: Hide the scroll bar in WebKit browsers
*/
.scroll {
    white-space: nowrap; /* [1] */
    overflow-x: auto; /* [2] */
    -webkit-overflow-scrolling: touch; /* [3] */
    -ms-overflow-style: -ms-autohiding-scrollbar; /* [4] */ 
}
  
/* [5] */
.scroll::-webkit-scrollbar {
    display: none; 
}



/* Media Queries - breakpoints follow the defaults in Bootstrap. */

/* Phone (smaller screen) Styles */
@media screen and (max-width: 640px) {

    HEADER h1 {
        font-size: 1.5rem;
        padding: 1%;
    }

    #scrollableNav {  
        padding: 2% 1%;
        margin-bottom: 0.5%;
    }      
} 

/* Tablet Styles */
@media screen and (min-width: 768px) {

    #scrollableNav {
        padding: 0.5% 0.5%;
    }
    

    .scrollable-item {
        padding: .35% 1%;
        margin-bottom: 0.5%;
    }

    .scroll {
        white-space: normal; /* [1] */
        overflow-x: auto; /* [2] */
    }
      
    /* [5] */
    .scroll::-webkit-scrollbar {
        display: flex; 
    }    
   
}  

/* Tablet Styles */
@media screen and (min-width: 992px) {   

}  

/* Desktop Styles */
@media screen and (min-width: 1200px) { 
    
}