/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
* {
  box-sizing: border-box;
}

body {
  font-family: Helvetica;
}

/* Style the header */
header {
  background-color: navy;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 20%;
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 80%;
  background-color: #f1f1f1;
  
}

/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
#side-menu a {
  white-space: nowrap; /* Stops text from wrapping to the next line */
  display: inline-block; /* Helps ensure padding and margins behave */
}
/* --- NEW GALLERY SUBSECTION CSS --- */

/* This container holds your gallery categories */
.gallery-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

/* This styles an individual category "card" */
.category-card {
  width: 250px; /* Adjust this to change how wide you want each box */
  text-align: center;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Removes standard link underlines and colors from the text */
.category-card a {
  text-decoration: none;
  color: #333;
}

/* Ensures the preview images fit perfectly inside their boxes */
.category-card img {
  width: 100%;
  height: 180px;
  object-fit: contain; /* Crops the image uniformly so they match in size */
  border-radius: 4px;
  margin-bottom: 8px; /* Spaces the text nicely below the image */
}

/* Adds a subtle hover effect to make it feel interactive */
.category-card:hover {
  border-color: navy;
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
  
  /* Center the categories on mobile */
  .gallery-categories {
    justify-content: center;
  }
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
/* Form Styles */
.comment-form {
  margin-bottom: 30px;
}
fieldset {
  border: 1px solid #ccc;
  padding: 15px;
  background-color: #fff;
}
label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}
input[type="text"], input[type="email"], textarea {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
}
.btn-grad {
  margin-top: 15px;
  padding: 10px 20px;
  background: navy;
  color: white;
  border: none;
  cursor: pointer;
}
.btn-grad:hover {
  background: #000050;
}

/* --- NEW GUESTBOOK COMMENT STYLES --- */
#commentsContainer {
  margin-top: 30px;
  font-weight: bold;
  font-size: 1.2em;
}

.comment-card {
  background: white;
  border-left: 5px solid navy; /* Adds a nice accent bar on the left */
  padding: 15px;
  margin-top: 15px;
  border-top: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Soft shadow */
}

.comment-meta {
  font-size: 0.9em;
  font-weight: bold;
  color: navy;
  margin-bottom: 8px;
}

.comment-text {
  font-size: 1em;
  color: #333;
  line-height: 1.4;
  font-weight: normal; /* Keeps the comment text itself from being bold */
}

/* Responsive layout */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
/* --- NEW INDIVIDUAL ARTWORK CSS --- */

.breadcrumb-nav {
  margin-bottom: 20px;
  font-size: 14px;
}

.breadcrumb-nav a {
  color: navy;
  text-decoration: none;
}

.breadcrumb-nav a:hover {
  text-decoration: underline;
}

.artwork-display {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
  max-width: 1920px; /* Limits the display width so it doesn't get stretch too wide on huge monitors */
  margin: 0 auto; /* Centers the artwork container in the article space */
}

/* Ensures the artwork scales beautifully and doesn't burst out of the layout */
.main-artwork {
  width: 100%;
  height: auto;
  max-height: 70vh;
  display: block;
  margin: 0 auto 20px auto;
  object-fit: contain;
}

.artwork-meta {
  color: #666;
  font-size: 14px;
  margin-top: -5px;
  margin-bottom: 15px;
}

.artwork-description {
  line-height: 1.6;
  color: #333;
  font-size: 16px;
}

/* Responsive layout */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}