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

This stylesheet controls the appearance of the Wild Rescues website.
It includes layout rules, typography, navigation styling, and responsive design adjustments.
Bootstrap handles structure, while this file controls custom branding and colors.
*/

/* =========================
CSS RESET
========================= */
/*
A CSS reset removes default browser spacing and styling.
This ensures all browsers start with the same baseline appearance.
*/

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

/* =========================
GLOBAL STYLES
========================= */
/*
These styles apply across the entire website.
They define background color and image behavior.
*/

body {
    background-color: #f6eee4;
}

img, video {
    max-width: 100%;
    display: block;
    /*
    Makes images responsive so they shrink on smaller screens.
    Prevents overflow and keeps layout clean.
    */
}

/* =========================
BOOTSTRAP CUSTOM OVERRIDES
========================= */
/*
These classes are used alongside Bootstrap.
They help match instructor-required styling like bg-brown and hero sections.
*/

.bg-brown {
    background-color: #2a1f14 !important;
    /*
    Overrides Bootstrap colors.
    The !important ensures it takes priority over Bootstrap defaults.
    */
}

.hero {
    background-color: #c5a687;
    padding: 4rem 2rem;
    text-align: center;
    /*
    Creates a "hero section" at the top of the page.
    This is usually the first visual section users see.
    */
}

.welcome {
    padding: 2rem;
    /*
    Adds spacing inside hero content so text is not cramped.
    */
}

/* =========================
MOBILE-FIRST DESIGN
========================= */
/*
Mobile-first means we design for small screens first,
then adjust for larger screens using media queries.
*/

/* Default visibility rules */
.mobile, .mobile-tablet {
    display: block;
}

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

/* =========================
MOBILE NAVIGATION
========================= */
/*
This section styles the hamburger menu used on mobile devices.
It improves usability on small screens.
*/

.mobile-nav a {
    color: #fff;
    text-align: center;
    font-size: 2em;
    text-decoration: none;
    padding: 3%;
    display: block;
}

.mobile-nav a.nav-icon {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    color: #f6eee4;
    padding: 2%;
}

/*
Hamburger icon styling.
Represents the collapsible menu button.
*/

.nav-icon div {
    height: 40px;
    width: 40px;
    color: #2a1f14;
}

/* =========================
MAIN NAVIGATION (DESKTOP/TABLET)
========================= */

nav {
    background-color: #2a1f14;
}

nav li {
    font-family: Geneva, Arial, sans-serif;
    font-weight: bold;
}

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

/* =========================
MAIN CONTENT AREA
========================= */
/*
Main content holds text, images, and sections of the page.
Bootstrap grid handles layout; this adds spacing and typography.
*/

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

/* =========================
LAYOUT ELEMENTS
========================= */

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

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

/* =========================
CONTACT & FORM STYLES
========================= */

#contact, #form h2 {
    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;
}

/* =========================
FAQ INTERACTION
========================= */
/*
These styles support JavaScript-based interactions for FAQ sections.
*/

#questions p {
    cursor: pointer;
    /*
    Indicates clickable text for better user experience.
    */
}

#answer {
    text-align: center;
    font-weight: bold;
    width: 80%;
    margin: 0 auto;
}

#answer h2 {
    display: none;
}

/* =========================
FORM STYLES
========================= */

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

/* =========================
FOOTER
========================= */
/*
Footer contains copyright and contact information.
It appears at the bottom of every page.
*/

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

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

/* =========================
TABLET MEDIA QUERY
========================= */
/*
Adjusts layout for medium screens like tablets.
*/

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

    .tab-desk {
        display: block;
    }

    .mobile, .mobile-nav {
        display: none;
    }

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

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

    nav li a {
        padding: 0.5em;
    }
}

/* =========================
DESKTOP MEDIA QUERY
========================= */

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

    .desktop {
        display: block;
    }

    .mobile-tablet {
        display: none;
    }

    nav li {
        font-size: 1.5em;
    }

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

/* =========================
PRINT STYLES
========================= */

@media print {

    body {
        background-color: #fff;
        color: #000;
    }
}