/*
Nicholas Forsgren
CSIS410_B01
Professor: Mary Cecil
School Year: 2026
*/

/* Controls the basic appearance of the website */
body {
    margin: 0;
    padding: 0;
    background-color: #F7F2E8;
    color: #262626;
    font-family: Georgia, "Times New Roman", serif;
}

/* Creates the centered white area that holds the website */
.page {
    width: 90%;
    max-width: 1200px;
    min-height: 100vh;
    margin: 0 auto;
    background-color: #FFFFFF;
    box-shadow: 0 0 20px #B8AB96;
}

/* Styles the top section of the website */
.site-header {
    padding: 30px 20px;
    color: #F7F2E8;
    background-color: #17233C;
    text-align: center;
    border-bottom: 5px solid #C5A25D;
}

/* Styles the Dressiah Mode name */
.site-header h1 {
    margin: 0;
    color: #F7F2E8;
    font-size: 5em;
    font-weight: normal;
    letter-spacing: 0.05em;
}

/* Styles the French tagline */
.site-header h2 {
    margin: 10px 0 0;
    color: #C5A25D;
    font-size: 1.5em;
    font-style: italic;
    font-weight: normal;
    letter-spacing: 0.05em;
}

/* Styles the navigation area */
.site-menu {
    padding: 10px 15px 15px;
    background-color: #6E1F2A;
    text-align: center;
    border-bottom: 5px solid #C5A25D;
}

/* Styles the Site Menu heading */
.site-menu h2 {
    margin: 0 0 10px;
    color: #C5A25D;
    font-size: 1.10em;
    font-weight: normal;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* Removes the normal bullets and spacing from the menu */
.dressiah-menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* Places the menu items beside each other */
.dressiah-menu li {
    display: inline;
}

/* Styles each navigation link */
.dressiah-menu a {
    display: inline-block;
    padding: 10px 15px;
    color: #F7F2E8;
    letter-spacing: 0.05em;
}

/* Changes a link when selected with a mouse or keyboard */
.dressiah-menu a:hover,
.dressiah-menu a:focus {
    color: #17233C;
    background-color: #C5A25D;
}

/* Adds space around each page's main information */
.main-content {
    min-height: 300px;
    padding: 40px 50px;
    line-height: 1.5;
}

/* Styles the main heading on each page */
.main-content h2 {
    margin-top: 0;
    padding-bottom: 10px;
    color: #17233C;
    font-weight: normal;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #C5A25D;
}

/* Styles the footer shown on every page */
.site-footer {
    padding: 20px;
    color: #F7F2E8;
    background-color: #17233C;
    text-align: center;
    border-top: 5px solid #C5A25D;
}

/* Controls the spacing around footer paragraphs */
.site-footer p {
    margin: 10px 0;
}

/* Adds space around the validator images */
.site-footer img {
    margin: 5px;
    vertical-align: middle;
}

/* Centers the group of product cards */
.product-grid {
    text-align: center;
}

/* Styles each individual product card */
.product-card {
    display: inline-block;
    width: 30%;
    min-width: 250px;
    margin: 1%;
    padding: 15px;
    background-color: #F7F2E8;
    border: 1px solid #C5A25D;
    vertical-align: top;
    box-sizing: border-box;
}

/* Keeps product images inside their cards */
.product-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 15px;
    border: 1px solid #B8AB96;
}

/* Styles the product names */
.product-card h3 {
    margin: 10px 0;
    color: #6E1F2A;
    font-size: 1.25em;
    font-weight: normal;
}

/* Gives product descriptions a similar amount of space */
.product-description {
    min-height: 90px;
    line-height: 1.5;
    text-align: left;
}

/* Makes product prices stand out */
.product-price {
    color: #17233C;
    font-size: 1.5em;
    font-weight: bold;
}

/* Styles the quantity selection box */
.product-card select {
    padding: 5px;
    border: 1px solid #B8AB96;
}

/* Gives all website buttons the same colors */
.submit-button,
.small-button {
    color: #F7F2E8;
    background-color: #6E1F2A;
    border: 1px solid #C5A25D;
    cursor: pointer;
}

/* Controls the size of regular form buttons */
.submit-button {
    padding: 10px 20px;
}

/* Controls the size of cart buttons */
.small-button {
    margin: 5px;
    padding: 5px 10px;
}

/* Changes buttons when selected with a mouse or keyboard */
.submit-button:hover,
.submit-button:focus,
.small-button:hover,
.small-button:focus {
    color: #17233C;
    background-color: #C5A25D;
}

/* Gives all website messages the same spacing */
.cart-message,
.form-error,
.form-success {
    padding: 15px;
}

/* Styles messages shown above the shopping cart */
.cart-message {
    color: #17233C;
    background-color: #EFE2BD;
    border: 1px solid #C5A25D;
}

/* Styles error messages */
.form-error {
    color: #6E1F2A;
    background-color: #F7E1E4;
    border: 1px solid #6E1F2A;
}

/* Styles success messages */
.form-success {
    color: #234D32;
    background-color: #E2F0E5;
    border: 1px solid #477A57;
}

/* Controls shopping-cart and information tables */
.cart-table,
.information-table {
    width: 100%;
    margin: 25px 0;
    border-collapse: collapse;
}

/* Styles headings in both types of tables */
.cart-table th,
.information-table th {
    padding: 15px;
    color: #F7F2E8;
    background-color: #17233C;
    border: 1px solid #C5A25D;
}

/* Styles cells in both types of tables */
.cart-table td,
.information-table td {
    padding: 15px;
    background-color: #F7F2E8;
    border: 1px solid #B8AB96;
    text-align: center;
}

/* Removes extra space from forms inside the cart table */
.cart-table form,
.cart-table form p {
    margin: 0;
}

/* Styles the box containing the cart totals */
.cart-totals {
    width: 300px;
    margin-left: auto;
    padding: 15px;
    color: #17233C;
    background-color: #F7F2E8;
    border: 1px solid #C5A25D;
    text-align: right;
}

/* Makes the final cart total stand out */
.cart-totals p:last-child {
    padding-top: 10px;
    font-size: 1.5em;
    border-top: 1px solid #C5A25D;
}

/* Styles the boxes surrounding website forms */
.main-content fieldset {
    max-width: 600px;
    margin: 25px 0;
    padding: 20px;
    background-color: #F7F2E8;
    border: 1px solid #C5A25D;
}

/* Styles the title shown on a form box */
.main-content legend {
    padding: 0 10px;
    color: #6E1F2A;
    font-size: 1.0em;
    font-weight: bold;
}

/* Gives form labels the same width */
.main-content fieldset label {
    display: inline-block;
    width: 175px;
    margin-right: 10px;
    color: #17233C;
}

/* Styles text and password entry boxes */
.main-content fieldset input[type="text"],
.main-content fieldset input[type="password"] {
    width: 250px;
    padding: 10px;
    border: 1px solid #B8AB96;
    box-sizing: border-box;
}

/* Styles selection menus inside forms */
.main-content fieldset select {
    width: 250px;
    padding: 10px;
    background-color: #FFFFFF;
    border: 1px solid #B8AB96;
}

/* Styles larger message-entry boxes */
.main-content fieldset textarea {
    width: 400px;
    max-width: 95%;
    padding: 10px;
    font-family: Georgia, "Times New Roman", serif;
    border: 1px solid #B8AB96;
    vertical-align: top;
}


/* Holds the complete organizational chart */
.organization-chart {
    margin: 30px 0;
    text-align: center;
}

/* Styles the leadership position at the top */
.organization-leader {
    width: 50%;
    margin: 0 auto 25px;
    padding: 15px;
    color: #F7F2E8;
    background-color: #17233C;
    border: 2px solid #C5A25D;
    box-sizing: border-box;
}

/* Makes the leadership heading gold */
.organization-leader h3 {
    color: #C5A25D;
}

/* Holds the three departments below the leader */
.organization-departments {
    padding-top: 20px;
    border-top: 2px solid #C5A25D;
    text-align: center;
}

/* Styles each department as a separate box */
.organization-position {
    display: inline-block;
    width: 30%;
    min-width: 225px;
    margin: 1%;
    padding: 15px;
    background-color: #F7F2E8;
    border: 1px solid #C5A25D;
    vertical-align: top;
    box-sizing: border-box;
}

/* Styles the department headings */
.organization-position h3 {
    color: #6E1F2A;
}

/* Styles each organization comment returned by the database */
.organization-comment {
    margin: 20px 0;
    padding: 15px 20px;
    background-color: #F7F2E8;
    border: 1px solid #C5A25D;
    border-left: 5px solid #6E1F2A;
}

/* Styles the title of each organization comment */
.organization-comment h4 {
    margin: 0 0 10px;
    color: #6E1F2A;
    font-size: 1.15em;
}

/* Styles the name and date shown with each comment */
.comment-information {
    color: #17233C;
    font-style: italic;
}