/* Reset some default styles for better consistency */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* Style the skip to main content link for accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
}

/* Style the visible focus indicator for accessibility */
:focus {
  outline: 2px solid #ff6600; /* Orange focus indicator */
}

/* Header styles */
header {
  background-color: #ff6600; /* Orange header background */
  color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
}

/* Logo styles */
.logo img {
  max-width: 100px; /* Adjust the logo size as needed */
  margin-right: 10px;
}

/* Menu styles */
.menu {
  background-color: #ff9933; /* Lighter orange menu background */
  color: #fff;
  padding: 10px;
}

.menu ul {
  list-style-type: none;
  padding: 0;
}

.menu li {
  margin-bottom: 10px;
}

.menu a {
  color: #fff;
  text-decoration: none;
}

/* Main content styles */
.content {
  padding: 20px;
}

/* Footer styles */
footer {
  background-color: #ff6600; /* Orange footer background */
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* Additional styles for content sections */
.content-section {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ff6600; /* Orange border for content sections */
  background-color: #fff;
}

/* Header actions (logout / add content) */
.site-title h1 {
  margin: 0;
}

.header-actions button {
  margin-right: 8px;
}

/* One rendered content item */
.content-item {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ffcc99;
}

.content-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
}

.admin-actions button {
  margin-right: 8px;
}

/* Add / edit forms */
.field {
  margin-bottom: 15px;
}

.field label {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
}

.field input[type="text"],
.field input[type="password"],
.field select,
.field textarea {
  width: 100%;
  max-width: 600px;
  padding: 6px;
  border: 1px solid #999;
  box-sizing: border-box;
}

/* Attachment rows on the add / edit forms */
.file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.file-row label {
  font-weight: normal;
}

.file-row input[type="text"] {
  flex: 1 1 240px;
  padding: 6px;
  border: 1px solid #999;
}

.file-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 1px solid #ccc;
}

/* Status and error messages */
.message {
  padding: 10px;
  margin: 10px 0;
  border-left: 4px solid #ff6600;
  background-color: #fff3e6;
}

.message-error {
  border-left-color: #c0392b;
  background-color: #fdecea;
  color: #7b241c;
}

/* Media queries for responsiveness */
@media screen and (max-width: 768px) {
  /* Adjust the layout for tablet and smaller screens */
  header, .menu, .content, footer {
    padding: 10px;
  }
}

@media screen and (max-width: 480px) {
  /* Adjust the layout for mobile devices */
  header, .menu, .content, footer {
    padding: 5px;
  }

  /* Reduce font size or other adjustments for smaller screens */
  header h1 {
    font-size: 24px;
  }
}