/*
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 {
    margin: 0;
    padding: 0;
    border: 0;
}

/*
aside, figure, and figcaption were added to the CSS reset for the gallery page.
This ensures that browsers do not apply default margins or padding that could
interfere with the layout of the image gallery.
*/


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


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

/*
The aside element is used on the gallery page to display
an introductory message above the image grid.
Center alignment and larger text help emphasize the message.
*/

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


/*
The figure element wraps each gallery image and its caption.
Borders and box shadows visually separate each animal profile.
*/

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


/*
The figcaption element displays descriptive text for each image.
Padding adds spacing and the top border visually separates
the caption from the image.
*/

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


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

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

/*
These rules apply when the screen width is large enough
to display tablet layouts.
*/

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

/*
The grid class activates CSS Grid layout for the gallery page.
Images will display in two columns on tablet screens.
*/

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

/*
The aside element spans across both columns so the
introductory text appears above the gallery images.
*/

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

}


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

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

/*
This hover rule creates a visual effect when users move
their mouse over a navigation link. The reduced opacity
indicates the link is interactive.
*/

nav li a:hover {
    opacity: 0.5;
}

/*
On desktop screens the gallery layout expands to three columns.
The increased gap creates more spacing between images.
*/

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

/*
The aside element spans across all three columns
so the gallery introduction remains centered.
*/

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

}


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

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

/*
Large desktop monitors can support four image columns,
allowing more animals to be visible at once.
*/

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

/*
The aside element stretches across all four columns
and increases font size for better readability.
*/

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

}