/*
Author: Gerald Pender
Date: March 8, 2026
File Name: styles.css

This stylesheet controls the visual appearance of the Wild Rescues website.
Separating styling rules from HTML keeps the structure clean and allows
multiple webpages to share the same design settings.
*/


/* CSS Reset */

body, header, nav, main, footer, img, h1, h3, ul {
    margin: 0;
    padding: 0;
    border: 0;
}


/* Style rules for body and images */

body {
    background-color: #f6eee4;
}

/*
Images are set to a maximum width of 100% so they remain responsive.
This prevents images from overflowing their containers on smaller screens
and allows them to resize automatically as the screen size changes.
*/

img {
    max-width: 100%;
    display: block;
}


/* Mobile Viewport Rules */

.mobile {
    display: block;
}

.tab-desk {
    display: none;
}


/* Style rules for header area */

.mobile h1 {
    padding: 2%;
    text-align: center;
    font-family: 'Emblema One', cursive;
}

.mobile h3 {
    padding: 2%;
    text-align: center;
    font-family: 'Lora', serif;
}


/* Style rules for navigation area */

nav {
    background-color: #2a1f14;
}

nav ul {
    list-style-type: none;
    text-align: center;
}

nav li {
    display: block;
    font-size: 1.5em;
    font-family: Geneva, Arial, sans-serif;
    font-weight: bold;
    border-top: 0.5px solid #f6eee4;
}

nav li a {
    display: block;
    color: #f6eee4;
    padding: 0.5em 2em;
    text-decoration: none;
}


/* Style rules for main content */

main {
    padding: 2%;
    font-family: 'Lora', serif;
}

main p {
    font-size: 1.25em;
}

main h3 {
    padding-top: 2%;
}

main ul {
    list-style-type: square;
}

.link {
    color: #4d3319;
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
}

.action {
    font-size: 1.75em;
    font-weight: bold;
    text-align: center;
}

.round {
    border-radius: 6px;
}

#info ul {
    margin-left: 10%;
}

#contact {
    text-align: center;
}

.tel-link {
    background-color: #2a1f14;
    padding: 2%;
    width: 80%;
    margin: 0 auto;
}

.tel-link a {
    color: #f6eee4;
    text-decoration: none;
    font-weight: bold;
}


/* Style rules for footer content */

footer {
    text-align: center;
    font-size: 0.85em;
    background-color: #2a1f14;
    color: #f6eee4;
    padding: 1% 0%;
}

footer a {
    color: #f3e6d8;
    text-decoration: none;
}


/* Media Query for Tablet Viewport */

/*
Media queries allow the layout to change depending on screen size.
This query activates when the screen width is at least 620px
or when the page is printed.
*/

@media screen and (min-width: 620px), print {


/* Tablet Viewport: Show tab-desk class, hide mobile class */

/*
These rules reverse the mobile display behavior.
The tab-desk class becomes visible while the mobile
layout is hidden for larger screens.
*/

.tab-desk {
    display: block;
}

.mobile {
    display: none;
}


/* Tablet Viewport: Style rules for nav area */

/*
Navigation items are displayed horizontally on tablet screens.
Removing the border and changing to inline-block creates a
more traditional horizontal navigation menu.
*/

nav li {
    border-top: none;
    display: inline-block;
    font-size: 1.25em;
}

nav li a {
    padding: 0.5em;
}

}


/* Media Query for Desktop Viewport */

/*
This media query targets larger desktop screens that are
1000px wide or greater. It adjusts spacing and navigation
behavior to better utilize the larger screen area.
*/

@media screen and (min-width: 1000px), print {


/* Desktop Viewport: Style rules for nav area */

nav li {
    font-size: 1.5em;
}

nav li a {
    padding: 0.5em 1.5em;
}

/*
The hover pseudo-class adds an interactive effect when users
move their mouse over navigation links. This provides visual
feedback and improves the user experience on desktop devices.
*/

nav li a:hover {
    color: #2a1f14;
    background-color: #f6eee4;
}


/* Desktop Viewport: Style rules for main content */

#info ul {
    margin-left: 5%;
}

}


/* Media Query for Large Desktop Viewports */

/*
This query targets very large monitors wider than 1920px.
It centers the website content while allowing the page
background to expand across the full screen width.
*/

@media screen and (min-width: 1921px) {

body {
    background: linear-gradient(#f6eee4, #78593a);
}

#wrapper {
    width: 1920px;
    margin: 0 auto;
}

main {
    background-color: #f6eee4;
}

}


/* Media Query for Print */

/*
Print media queries adjust the layout for printed pages.
Background colors are removed and text becomes black
to ensure the page prints clearly on paper.
*/

@media print {

body {
    background-color: #ffffff;
    color: #000000;
}

}