/* Color Palette */
:root {
  --soft-brown: #A67C52;
  --gentle-beige: #D9C2A4;
  --warm-cream: #fff7e1;
  --dark-brown: #5C3B1E;
  --light-beige: #E5D2BC;
  --link-color: #A67C52; /* Soft brown for links */
  --link-hover-color: #5C3B1E; /* Dark brown for link hover */
  --background-gradient-start: #FFF7E1;  /* Light cream */
  --background-gradient-end: #EECC9B;  /* Light brown */
}

/* General Styles */
header {
  padding: 20px 0 20px;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000; /* Ensure the header stays on top */
  background: linear-gradient(135deg, var(--background-gradient-start), var(--background-gradient-end));
  background-size: 100% 100vh; /* Stretch the gradient */
  background-position: top; /* Align the gradient to start at the top */
}

.logo-svg {
  width: 60%; /* Adjust width as needed */
  max-width: 300px; /* Ensure it doesn’t get too large */
  height: auto; /* Keep the aspect ratio */
  display: block;
  margin: 20px auto; /* Adds 20px margin above and below the SVG, auto centers it horizontally */
}

body {
  font-family: 'Lato', 'Noto Color Emoji', sans-serif;
  line-height: 1.6;
  height: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, var(--background-gradient-start), var(--background-gradient-end)); /* Gradient background */
  background-attachment: fixed; /* Fix the background to prevent adjustment */
  color: var(--text-color);
  min-width: 300px; /* Minimum width for the entire site */
  overflow-x: hidden; /* Prevent horizontal scroll */
  position: relative;
}

header nav {
  margin-top: 10px;
  display: none; /* Hide the navigation row */
}

header nav ul {
  list-style: none;
  padding: 0;
}

header nav ul li {
  display: inline;
  margin-right: 10px;
}

header nav ul li a {
  color: var(--link-color);
  text-decoration: none;
  font-family: 'Boogaloo', 'Noto Color Emoji', sans-serif;
}

header nav ul li a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

.main-content {
  padding: 20px 40px 0;
  margin-top: 160px;
  min-height: 100vh; 
  position: relative;
}

footer {
  text-align: center;
  padding: 10px 0;
  color: var(--dark-brown);
}

/* Hide footer when a puzzle card is in detail view */
body.details-view footer {
  display: none;
}

.puzzle-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.puzzle-card {
  border: 2px solid var(--soft-brown);
  border-radius: 10px;
  padding: 5px 15px;
  margin: 10px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 90%; /* Responsive width */
  max-width: 350px; /* Maximum width */
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
  text-align: left; /* Align all text to the left */
}

.puzzle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.puzzle-emoji {
  font-size: 2em;  /* Adjust size as needed */
  margin-right: 10px; /* Space between emoji and text */
  font-family: 'Noto Color Emoji', sans-serif !important; /* Ensure the emoji uses Noto Color Emoji */
}

.puzzle-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.puzzle-theme {
  font-family: 'Boogaloo', 'Noto Color Emoji', sans-serif;
  font-size: 1.3em; /* Increase font size */
  color: var(--dark-brown);
}

.issue-info {
  display: flex;
  align-items: center;
}

.issue-number,
.release-date {
  font-family: 'Lato', 'Noto Color Emoji', sans-serif;
  font-size: 0.7em; /* Smaller font size */
  color: var(--soft-brown);
}

.issue-number {
  margin-right: 5px; /* Space between issue number and mid dot */
}

.mid-dot {
  font-size: 0.7em;
  color: var(--soft-brown);
  margin-right: 5px; /* Space between mid dot and release date */
}

.puzzle-details {
  /*margin-top: 10px;*/
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 10px 15px; /* Add padding for a balanced layout */
}

.puzzle-details.show {
  display: block;
  opacity: 1;
}

.puzzle-card.static {
  cursor: default;
}

.puzzle-card.static .close-button {
  display: inline;
}

.puzzle-card .button {
  display: inline-block;
  padding: 10px 20px;
  margin: 10px 0;
  color: var(--warm-cream);
  background-color: var(--soft-brown); /* Button background color */
  text-decoration: none;
  border: none; /* Remove border */
  border-radius: 5px;
  transition: box-shadow 0.3s ease; /* Add transition for box-shadow */
  margin-left: 2em; /* Align to the right edge of the puzzle emoji */}

.puzzle-card .button:hover {
  text-decoration: none; /* Remove underline */
  color: var(--warm-cream); /* Maintain text color */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add box-shadow on hover */
}

.close-button {
  background: none;
  border: none;
  font-size: 2em; /* Increase font size */
  font-weight: bold;
  color: var(--dark-brown);
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 15px;
  display: none; /* Hide by default */
}

/* Styling for the puzzle details links */
.puzzle-details a {
  text-decoration: none;
  color: var(--link-color);
  font-weight: normal; /* Lighten font weight */
  text-align: left; /* Align links to the left */
  margin: 5px 0; /* Add margin for spacing */
}

.puzzle-details a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
}

/* Styling for the extras paragraphs */
.puzzle-details .extras ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0; /* Remove margin to avoid indentation */
}

.puzzle-details .extras p,
.puzzle-details .extras li {
  margin: 0 0 10px;
  text-align: left; /* Left align extras */
  margin-left: 2em; /* Align to the right edge of the puzzle emoji */
}

/* New styles for better spacing and alignment */
.puzzle-details p {
  margin: 0 0 10px;
  text-align: left; /* Left align paragraphs */
}

.puzzle-details .button {
  margin-top: 15px; /* Add space above the button */
}

.puzzle-details .icon-text {
  display: flex;
  align-items: center;
  font-weight: normal; /* Lighten font weight */
  justify-content: flex-start; /* Left align icon text */
  margin-left: 2em; /* Align to the right edge of the puzzle emoji */
}
.puzzle-details .icon-text .icon {
  margin-left: -1.9em; /* Position the icon in the left margin */
  margin-right: 10px; /* Space between icon and text */
  font-size: 1em;
}


/* Contact info layout */
.contact-info {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center align everything */
  margin-top: 10px;
}

/* Add some spacing between the pairs of items */
.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center align both icon and text */
  margin-bottom: 5px; /* Tighter spacing between icon and text */
  font-size: 1em;
}
.contact-item a {
  text-decoration: none;
  color: var(--link-color);
}
  .contact-item a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
}

.contact-item .icon {
  height: 16px; /* Slightly smaller height for icons */
  width: auto;  /* Keep the width proportional */
  margin-bottom: 0px; /* Small gap between icon and text */
}

.sageheads-logo {
  height: 100px; 
  width: auto;  
  margin: 20px 0 0 ; 
}