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

/*
A CSS reset removes default browser styling such as margins,
padding, and borders. Different browsers apply their own default
styles, so resetting them ensures the webpage looks consistent
across all browsers.
*/

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


/* Style rules for body and images */

/*
The body selector controls the overall appearance of the webpage.
Setting the background color creates a consistent page background
that appears behind all content.
*/

body {
    background-color: #f6eee4;
}


/*
The img selector controls how images behave within the page layout.
Setting max-width to 100% prevents images from overflowing their
containers and keeps them responsive on smaller screens.
*/

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


/* Mobile Viewport Rules */

/*
These rules control what elements appear on small mobile screens.
The mobile class is shown while the tab-desk class is hidden so
the page layout is simplified for smaller devices.
*/

.mobile {
    display: block;
}

.tab-desk {
    display: none;
}


/* Style rules for header area */

/*
These selectors style headings inside the mobile header section.
Padding creates space around the text and center alignment keeps
the site title visually balanced on smaller screens.
*/

.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 */

/*
The nav selector styles the navigation bar that contains the site links.
The dark background color creates visual contrast and separates
the navigation menu from the rest of the page content.
*/

nav {
    background-color: #2a1f14;
}


/*
The nav ul selector removes default list bullets and centers the menu.
This creates a cleaner navigation bar and improves the overall layout.
*/

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


/*
The nav li selector styles each navigation item.
Displaying them as block elements stacks them vertically,
which works better for mobile screen layouts.
*/

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


/*
The nav li a selector styles the clickable navigation links.
Padding increases the clickable area, improving usability
especially on touchscreen devices.
*/

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


/* Style rules for main content */

/*
The main selector controls the primary content area of the webpage.
Padding creates space between the content and page edges,
making text easier to read.
*/

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


/*
Paragraph styling slightly increases the font size
to improve readability for visitors.
*/

main p {
    font-size: 1.25em;
}


/*
This rule adds spacing above subsection headings
so they do not appear crowded against other content.
*/

main h3 {
    padding-top: 2%;
}


/*
This rule modifies bullet style for lists inside the main content area.
Square bullets visually differentiate these lists from default styles.
*/

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


/*
The .link class is used for hyperlinks that need special emphasis.
Bold and italic styling helps these links stand out from surrounding text.
*/

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


/*
The .action class highlights important messages such as
requests for volunteers or donations.
Larger text and center alignment draw attention to the message.
*/

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


/*
The .round class applies rounded corners to images.
This softens the appearance of images and improves the overall design.
*/

.round {
    border-radius: 6px;
}


/*
The #info ul selector adds spacing to lists within the About page section.
Increasing the margin moves the list slightly inward to improve readability.
*/

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


/*
The #contact selector centers all text within the contact section.
Center alignment makes contact information easier to read and visually balanced.
*/

#contact {
    text-align: center;
}


/*
The .tel-link class styles the phone number section on the contact page.
The background color, padding, and width make the phone number appear
like a button that is easy for users to tap on mobile devices.
*/

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


/*
This rule styles the clickable phone number inside the tel-link section.
The light text color contrasts with the dark background and removing
the underline keeps the design consistent with the rest of the site.
*/

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


/* Style rules for footer content */

/*
The footer selector styles the bottom section of the webpage.
Using the same dark background as the navigation bar creates
a consistent design theme across the site.
*/

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


/*
The footer a selector styles links inside the footer area.
The light color keeps the link visible against the dark background.
*/

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