/*
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, aside, figure, figcaption, table, caption, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

/*
Extra elements such as table, caption, th, and td were added so that
table layouts behave consistently across browsers. This prevents
unexpected spacing that could break the layout of sponsorship tables.
*/


/* Style rules for body and images */

body {
    background-color: #f6eee4;
}

/*
The body background color creates a warm, natural tone that
matches the wildlife theme of the site. It also helps content
sections stand out clearly against the page background.
*/

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

/*
Images are set to max-width 100% so they never overflow their
containers. This makes the layout responsive and prevents images
from breaking the page on smaller devices.
*/


/* Mobile Viewport Rules */

.mobile, .mobile-tablet {
    display: block;
}

/*
Mobile devices should show simplified content sections.
The mobile and mobile-tablet classes are displayed so smaller
screens see simplified layouts instead of complex tables.
*/

.tab-desk, .desktop {
    display: none;
}

/*
Desktop and tablet content is hidden on small screens.
This keeps the mobile layout simple and prevents clutter.
*/


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

/*
These heading styles create a clear visual identity for
the website on mobile devices. Center alignment and padding
improve readability on small screens.
*/


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

/*
The navigation uses block elements so each link stretches
across the screen on mobile devices. This increases the
touch area and makes navigation easier on phones.
*/


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

/*
These rules control the typography inside the main content area.
Larger paragraph text and spacing improve readability for visitors.
*/

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

/*
The link class emphasizes important hyperlinks within the
content. Bold and italic styling helps draw attention to
important information.
*/

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

/*
The action class highlights important messages such as
calls for volunteers or sponsors. Larger centered text
draws attention to key announcements.
*/

.round {
    border-radius: 6px;
}

/*
Rounded corners soften the appearance of images and
create a more modern design aesthetic.
*/


/* ----------- NEW GALLERY STYLES ----------- */

aside {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 4px 4px 10px #c5a687;
}

figure {
    border: 4px solid #2a1f14;
    box-shadow: 6px 6px 10px #c5a687;
    max-width: 400px;
    margin: 2% auto;
}

figcaption {
    padding: 2%;
    border-top: 4px solid #2a1f14;
}

/*
These styles create a structured layout for the gallery page.
Borders and shadows visually separate each animal profile card.
*/


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

#contact, #form h2 {
    text-align: center;
}

/*
Centering the contact and form headings makes them visually
balanced and easier for users to scan quickly.
*/


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

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

/*
The tel-link section makes the phone number appear like
a clickable button. This improves usability on smartphones
where users can tap the number to call.
*/


/* Style rules for table */

/*
Tables are used on the partnership page to organize sponsorship
information. These rules improve readability and give the table
a professional layout.
*/

table {
    border: 1px solid #2a1f14;
    border-collapse: collapse;
    margin: 0 auto;
}

caption {
    font-size: 1.5em;
    font-weight: bold;
    padding: 1%;
}

th, td {
    border: 1px solid #2a1f14;
    padding: 1%;
}

th {
    background-color: #2a1f14;
    color: #fff;
    font-size: 1.15em;
}

tr:nth-child(odd) {
    background-color: #deccba;
}

/*
Alternating row colors help readers track information
across columns. This improves readability for larger tables.
*/


/* Style rules for form elements */

fieldset, input, textarea {
    margin-bottom: 2%;
}

fieldset legend {
    font-weight: bold;
    font-size: 1.25em;
}

label {
    display: block;
    padding-top: 2%;
}

form #submit {
    margin: 0 auto;
    display: block;
    padding: 2%;
    background-color: #78593a;
    color: #f6eee4;
    font-size: 1.25em;
    border-radius: 10px;
}

/*
These rules create a clean layout for the contact form.
Spacing between fields improves usability and the styled
submit button makes the form easier to interact with.
*/


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


/* -------- TABLET MEDIA QUERY -------- */

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

/*
Tablet Viewport: Style rule for form element
The form width is limited so it remains readable
and centered on medium-sized screens.
*/

form {
    width: 70%;
    margin: 0 auto;
}

/*
Gallery layout switches to two columns on tablets.
CSS Grid makes it easy to organize images responsively.
*/

.grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 10px;
}

aside {
    grid-column: 1 / span 2;
}

}


/* -------- DESKTOP MEDIA QUERY -------- */

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

/*
Desktop Viewport: Show desktop class, hide mobile-tablet class
Larger screens display the detailed desktop content such as tables.
Simplified mobile layouts are hidden.
*/

.desktop {
    display: block;
}

.mobile-tablet {
    display: none;
}

/*
Hover effects help desktop users know which navigation
links are interactive.
*/

nav li a:hover {
    opacity: 0.5;
}

.grid {
    grid-template-columns: auto auto auto;
    grid-gap: 30px;
}

aside {
    grid-column: 1 / span 3;
    font-size: 2em;
}

/* Style rules for table */

tr:nth-child(odd) {
    background-color: #deccba;
}

/*
Desktop Viewport: Style rules for form elements
CSS Grid allows form fields to appear in two columns,
creating a cleaner layout on larger screens.
*/

form {
    width: auto;
}

.form-grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 20px;
}

.btn {
    grid-column: 1 / span 2;
}

}


/* -------- LARGE DESKTOP MEDIA QUERY -------- */

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

.grid {
    grid-template-columns: auto auto auto auto;
}

aside {
    grid-column: 1 / span 4;
    font-size: 3em;
}

}