/* General Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Aboreto&family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&display=swap');
/* General Styling */
body {
  margin: 0;
  font-family: "Nova Mono", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 30px; /* Slightly larger default font size */
  background-color: rgba(244, 247, 240, 1.0);
  color: black;
  cursor: url('img/cursor1.png') 24 24, auto;
}

nav {
  display: block;
  position: fixed;   /* instead of absolute */
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 1000;     /* make sure it sits above your content */
  background: rgba(244, 247, 240, 0.0); /* give it a background so text isn’t over images */
  cursor: url('img/cursor1.png') 24 24, auto;
}


nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  cursor: url('img/cursor1.png') 24 24, auto;
}

nav ul li {
  display: inline;
  margin: 0 15px;
  cursor: url('img/cursor1.png') 24 24, auto;
}

nav ul li a {
  text-decoration: none;
  font-size: 20px; /* Slightly bigger font for menu */
  text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
  cursor: url('img/cursor2.png') 24 24, pointer;
}

.splash nav ul li a {
  color: LightGoldenRodYellow !important; /* Bright yellow for the splash page menu text */
  cursor: url('img/cursor2.png') 24 24, pointer;
}

nav:not(.splash) ul li a {
  color: black; /* Black menu text for other pages */
  cursor: url('img/cursor2.png') 24 24, pointer;
}

nav ul li a:hover {
  text-decoration: underline;
  cursor: url('img/cursor2.png') 24 24, pointer;
}

/* Splash Page */
.splash {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.splash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.splash h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4em;
  color: PapayaWhip;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
  margin: 0;
  font-family: 'Aboreto', cursive; /* Applying Aboreto font */
}

.gallery-container {
  display: block;
  width: 80%; /* Adjust to control overall width */
  max-width: 1200px; /* Prevents excessive stretching */
  padding-top: 10vh; /* Centers the container */
  margin-left: auto;
  margin-right: auto;
  cursor: url('img/cursor1.png') 24 24, auto;
}

.gallery-text {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  white-space: pre-wrap;
  cursor: url('img/cursor1.png') 24 24, auto;
}

.gallery-text-rugs {
  position: fixed;
  top: 10vh;
  right: calc((100vw - min(80vw, 1200px)) / 2);
  width: calc(min(80vw, 1200px) * 0.3);
  box-sizing: border-box;
  padding: 2rem;
  overflow-y: auto;        /* 👈 enable scrolling inside */
  max-height: 80vh;        /* 👈 keep it within viewport */
  z-index: 1;
}


.gallery-description {
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
  margin-left: 1%;
  margin-bottom: 2%; 
  cursor: url('img/cursor1.png') 24 24, auto;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  margin-top: 2%; 
  cursor: url('img/cursor1.png') 24 24, auto;
}

.gallery-rugs {
  position: relative; 
  width: calc(min(80vw, 1200px) * 0.7);
  top: 0;  
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;     
}

.thumbnail {
  margin: 1%;
  text-align: center;
  height: 100%;
}

.thumbnail img {
  max-width: 200px;
  height: 20vh;
  object-fit: cover;
  cursor: pointer;
  border-radius: 7px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); 
  cursor: url('img/cursor2.png') 24 24, pointer;
}

.thumbnail-rugs {
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
  margin: 8px 0;
}

.thumbnail-rugs img {
  display: block;
  max-width: 600px;
  height: 40vh;
  object-fit: cover;
  cursor: pointer;
  cursor: url('img/cursor2.png') 24 24, pointer;
}

.thumbnail video {
  max-width: 200px;
  height: 20vh;
  object-fit: cover;
  cursor: pointer;
  border-radius: 7px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
  cursor: url('img/cursor2.png') 24 24, pointer;
}

.thumbnail p {
  font-size: 14px;
  margin-top: 5px;
  text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the modal vertically and horizontally */
  background-color: rgba(0, 0, 0, 0);
  justify-content: center;
  align-items: center;
  z-index: 200; /* Ensure it appears above the grey-out background */
}

.modal img {
  max-width: 80vw; /* Limits width to 80% of viewport width */
  max-height: 75vh; /* Ensures enough space above and below */
  display: block;
  margin: auto;
  object-fit: contain; /* Ensures full image is visible without cropping */
  cursor: url('img/cursor2.png') 24 24, pointer;
}


.modal-active {
  display: block; /* Shows the modal */
}

body.modal-open {
  overflow: hidden; /* Disable scrolling when the modal is open */
}

body.modal-open::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* Grey-out effect */
  z-index: 150; /* Sits behind the modal */
  cursor: url('img/cursor1.png') 24 24, pointer;
}

/* Contact Page */
.contact {
  margin: 0 auto;
  width: 33%;
  text-align: center;
  margin-top: 5%; /* Ensure it doesn’t overlap the menu */
}

.contact p {
  font-size: 16px;
  line-height: 1.6;
}

.contact a {
  text-decoration: none;
  color: purple;
}

.contact a:hover {
  text-decoration: underline;
  cursor: url('img/cursor2.png') 24 24, pointer;
}


/* Responsive Design */
@media screen and (max-width: 768px) {
  /* Adjust gallery description to take full width on smaller screens */
  .gallery-text {
    width: 95%; /* Expands to nearly full width */
  }

  .gallery-description {
    width: 95%;
    white-space: pre-wrap;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* Centers text for better readability */
  }

  .gallery-description p {
    white-space: pre-wrap;
  }

  /* Display thumbnails in a single column on narrow screens */
  .gallery {
    flex-direction: column;
    align-items: center;
  }

  .thumbnail {
    width: 90%; /* Adjusts width for better visibility */
    max-width: 300px; /* Prevents excessive stretching */
    margin-bottom: 10px; /* Adds spacing between images */
  }

  .thumbnail img,
  .thumbnail video {
    max-width: 100%;
    height: auto;
  }

  /* Ensure splash page text aligns center when wrapping */
  .splash h1 {
    width: 90%;
    text-align: center; /* Centers text */
    font-size: 2.5em; /* Adjusts font size for readability */
    word-wrap: break-word;
  }

  /* Adjust navigation for smaller screens */
  nav {
    position: absolute;
  }
  nav ul {
    text-align: center;
    padding: 0;
  }

  nav ul li {
    display: block;
    margin: 10px 0;
  }

  nav ul li a {
    font-size: 18px;
  }

  /* Adjust contact form width */
  .contact {
    width: 90%;
  }
}

@media screen and (max-width: 480px) {
  /* Further adjust splash page text for very small screens */
  .splash h1 {
    font-size: 2em;
  }

  /* Adjust gallery description for tiny screens */
  .gallery-description {
    font-size: 13px;
  }

  /* Make thumbnails take full width */
  .thumbnail {
    width: 100%;
    max-width: none;
  }

  .thumbnail img,
  .thumbnail video {
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  /* Add space below the nav to prevent overlap */
  .gallery-container,
  .contact {
    margin-top: 180px; /* Adjusts based on nav height */
  }


  /* Increase spacing for the gallery section */
  .gallery-container {
    margin-top: 200px; /* Adds more space below nav */
  }

  /* Adjust the splash page so content doesn't overlap */
  .splash h1 {
    margin-top: 100px; /* Moves title down */
  }

  /* Contact form spacing adjustment */
  .contact {
    margin-top: 220px !important; /* Adds extra spacing to prevent overlap */
  }
}

@media screen and (max-width: 480px) {
  /* Increase spacing even more on very small screens */
  .gallery-container,
  .contact {
    margin-top: 200px;
  }

  .gallery-container {
    margin-top: 250px;
  }

  .splash h1 {
    margin-top: 100px;
  }

  .contact {
    margin-top: 260px !important; 
  }
}

@media (max-width: 900px) {
  .gallery-text-rugs {
    position: static;  /* stop fixing on small screens */
    width: 100%;
    padding: 1rem;
  }
  .gallery-rugs {
    width: 100%;
  }
}