/*
Name: Ashton Roxas
Date: 09/29/2025
File: pacific.css

HW2 - Pacific Trails Resort
This stylesheet applies custom styling to the Pacific Trails Resort website. 
The purpose of this assignment is to practice CSS layout and design without 
modifying the HTML structure. It uses grid layout for the page structure, 
custom colors, and some responsive adjustments.

Ashton Roxas, UMass Lowell Computer Science
*/

/* Setup*/
body {
    background: #00569f url("ptrbackground.jpg") repeat-x top;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #757575;
}

html, body {
    min-height: 100%;
}

/* Main Grid */
#wrapper {
    background-color: white;
    width: 80%;
    min-width: 600px;
    margin: 20px auto 0 auto;

    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "nav content"
        "nav footer";
}

/* Header */
header {
    grid-area: header;
    background-color: #001133;
    background-image: url("sunset.jpg");
    background-repeat: no-repeat;
    background-position: right center;
    padding: 0;
}

header h1 {
    margin: 0;
    padding: 15px 20px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2em;
    color: white;
}

/* Navigation */
nav {
    grid-area: nav;
    background-color: #8dc6e4;
    padding-top: 5px; /* less top padding */
}

nav ul {
    list-style: none;
    margin: 0;
    padding-left: 15px; /* pushes the menu items to the right */
    font-size: 1em;
}

nav li {
    margin: 2px 0; /* spacing between items */
}

nav a {
    display: inline; /* text-only hover effect */
    text-decoration: none;
    font-weight: bold;
    font-family: 'Verdana', sans-serif;
    color: black;
    padding: 6px 0; 
}

nav a:hover {
    color: #ffffff; /* hover changes text color only */
    background-color: transparent;
}

/* content */
#content {
    grid-area: content;
    padding: 20px;
    overflow: auto;
}

#content h2 {
    font-family: Georgia, "Times New Roman", serif;
    color: #3399CC;
    margin-top: 0;
}

#content li {
    list-style-image: url("marker.gif");
}

#content img {
    float: left;
    height: auto;
    margin: 20px 20px 20px 20px;
}

.resort {
    color: #0070a8;
    font-weight: bold;
}

#contact {
    font-size: 90%;
}

/* Footer */
footer {
    grid-area: footer;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.75em;
    font-style: italic;
    padding: 15px 20px;
    color: #333;
}

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

footer a:hover {
    text-decoration: underline;
}

/* Styling */
dt {
    color: #000033;
}