/*
   Filename:    styles.css
   Author:      Noah Trejo
   Date:        3/8/2026
   Description: External stylesheet for Obscure Fruits homepage.
                Controls layout, colors, fonts, and grid structure.
*/


/* --- Base page styles --- */
html {
   box-sizing: border-box;
}

body {
   font-family: Georgia, serif;
   background-color: #f5f0e8;
   color: #2a2a2a;
   margin: 0;
   padding: 0;
}


/* --- Grid wrapper --- */
.grid-wrapper {
   display: grid;
   grid-template-columns: 2fr 1.5fr 1fr;
   grid-template-rows: auto auto 1fr auto;
   gap: 4px;
   border: 2px solid #2e7d32;
   max-width: 1100px;
   margin: 20px auto;
}


/* --- Header --- */
.site-header {
   grid-column: 1 / 4;
   background-color: #e8f5e0;
   padding: 20px;
   text-align: center;
   border-bottom: 2px solid #2e7d32;
}

/* --- Navigation --- */
.main-nav {
   grid-column: 1 / 4;
   background-color: #d4ebc8;
   padding: 10px 20px;
   text-align: center;
   border-bottom: 2px solid #2e7d32;
}

/* --- Footer --- */
.site-footer {
   grid-column: 1 / 4;
   background-color: #d4ebc8;
   padding: 15px;
   text-align: center;
   border-top: 2px solid #2e7d32;
}


/* --- Navigation links --- */
nav a {
   display: inline-block;
   margin: 0 15px;
   padding: 6px 14px;
   color: #2a2a2a;
   text-decoration: none;
   border: 1px solid #3a6b20;
}

nav a:hover {
   background-color: #3a6b20;
   color: white;
}

/* --- Main content area --- */
.content-area {
   grid-column: 1 / 4;
   display: grid;
   grid-template-columns: 2fr 1.5fr 1fr;
   gap: 4px;
}

.featured-fruit {
   background-color: #fffdf5;
   padding: 20px;
   border-right: 1px dashed #a0c890;
}

.fruit-list {
   background-color: #fffdf5;
   padding: 15px;
   border-right: 1px dashed #a0c890;
}

/* --- Sidebar / Aside styling --- */
.sidebar {
   background-color: #f0ffe8;
   padding: 15px;
   border: 2px solid #a0c890;
   border-radius: 10px;
   box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
}

/* --- Fruit card styling --- */
.fruit-card {
   background-color: #eef7e6;
   padding: 10px;
   margin-bottom: 10px;
   border-radius: 6px;
   border: 1px solid #c8e6c9;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
}

.fruit-card:hover {
   background-color: #e0f0d8;
   box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
}

img {
   max-width: 100%;
   height: auto;
   display: block;
   margin: 10px 0;
   border: 1px solid #c8e6c9;
}


.featured-fruit img {
   width: 80%;
}

.fruit-card img {
   width: 60px;
   height: 60px;
}

/* --- List styling --- */
ul {
   list-style-type: square;
   padding-left: 20px;
   margin: 10px 0;
}

li {
   padding: 4px 0;
   line-height: 1.4;
}

/* --- Sub-page content area --- */
.sub-content {
   grid-column: 1 / 4;
   background-color: #fffdf5;
   padding: 30px 40px;
   min-height: 300px;
}

/* --- Heading styles --- */
h1 {
   font-size: 2em;
   color: #2e7d32;
   letter-spacing: 1px;
}

h2 {
   font-size: 1.3em;
   color: #3a6b20;
   border-bottom: 1px solid #c8e6c9;
   padding-bottom: 4px;
}

h3 {
   font-size: 1.1em;
   color: #4a7c30;
}

/* --- Link styles --- */
a {
   color: #2e7d32;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
   color: #1b5e20;
}

/* --- Footer link styles --- */
footer a {
   color: #2a2a2a;
   margin: 0 5px;
}

footer a:hover {
   color: #2e7d32;
}

/* --- Search form styles --- */
input[type="text"] {
   padding: 6px 10px;
   border: 1px solid #a0c890;
   border-radius: 4px;
   width: 70%;
   font-family: Georgia, serif;
}

button {
   padding: 6px 14px;
   background-color: #3a6b20;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

button:hover {
   background-color: #2e7d32;
}

/* --- Paragraph spacing --- */
p {
   line-height: 1.6;
   margin: 8px 0;
}

/* --- Ordered list styling --- */
ol {
   padding-left: 25px;
   margin: 10px 0;
}

ol li {
   padding: 6px 0;
   line-height: 1.5;
   border-bottom: 1px dotted #c8e6c9;
}

/* --- Sub-page headings --- */
.sub-content h3 {
   margin-top: 20px;
   padding-top: 10px;
   border-top: 1px solid #c8e6c9;
}

/* --- Sub-page fruit cards --- */
.sub-content .fruit-card {
   margin-bottom: 15px;
}

/* --- Navigation hover transition --- */
nav a {
   transition: background-color 0.3s ease;
}

/* --- Image rounded corners --- */
img {
   border-radius: 4px;
}

/* --- Header subtitle styling --- */
.site-header p {
   font-style: italic;
   color: #4a7c30;
   margin-top: 4px;
}

/* --- Footer styling --- */
.site-footer p {
   font-size: 0.9em;
   color: #555555;
}

/* --- Button transition --- */
button {
   transition: background-color 0.3s ease;
}

/* --- Featured fruit link styling --- */
.featured-fruit a {
   display: inline-block;
   margin-top: 10px;
   padding: 6px 16px;
   background-color: #3a6b20;
   color: white;
   border-radius: 4px;
}

.featured-fruit a:hover {
   background-color: #2e7d32;
   text-decoration: none;
   color: white;
}

/* --- Form styling --- */
fieldset {
   border: 2px solid #a0c890;
   border-radius: 8px;
   padding: 20px;
   margin: 15px 0;
}

legend {
   font-weight: bold;
   color: #2e7d32;
   font-size: 1.1em;
   padding: 0 8px;
}

label {
   font-weight: bold;
   color: #3a6b20;
   display: inline-block;
   width: 160px;
   margin-bottom: 4px;
}

input[type="text"],
input[type="number"] {
   padding: 6px 10px;
   border: 1px solid #a0c890;
   border-radius: 4px;
   font-family: Georgia, serif;
   font-size: 1em;
}

textarea {
   padding: 6px 10px;
   border: 1px solid #a0c890;
   border-radius: 4px;
   font-family: Georgia, serif;
   font-size: 1em;
   resize: vertical;
}

input[type="submit"] {
   padding: 8px 24px;
   background-color: #3a6b20;
   color: white;
   border: none;
   border-radius: 4px;
   font-size: 1em;
   cursor: pointer;
}

input[type="submit"]:hover {
   background-color: #2e7d32;
}

.optGroup {
   border: none;
   display: inline;
   padding: 0;
}

.optGroup label {
   width: auto;
   font-weight: normal;
   margin-right: 10px;
}