/*
 * House of Sapphires Website Stylesheet
 *
 * This stylesheet defines the core colours, typography and layout for
 * the House of Sapphires website. The design draws inspiration from the
 * brand's logo with deep sapphire blues and golden accents, paired with
 * classic serif and modern sans‑serif fonts. Smooth animations are
 * achieved via the `.fade-in` and `.appear` classes in conjunction with
 * a small JavaScript intersection observer.
 */

/* Colour palette */
:root {
  /* Updated colour palette to reflect the new branding */
  --dark: #173d4a;        /* primary background (navy teal) */
  --mid:  #112f41;        /* secondary dark tone */
  --accent: #d9af75;      /* golden accent matching the logo */
  --light: #f8f5f1;       /* off‑white for highlights */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--dark);
  color: var(--light);
  line-height: 1.6;
}

/* Header & Navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(10, 48, 72, 0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2rem;
}

/* Increase the size of the logo in the navigation to make it more prominent */
/* Increase the size of the logo in the navigation to make it more prominent */
.logo img {
  /* Make the navigation logo taller so it stands out at the top of the page */
  height: 100px;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

/* Navigation toggle button for mobile */
#nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
}

#nav-toggle .bar {
  width: 25px;
  height: 3px;
  background: var(--accent);
  border-radius: 3px;
}

/* Mobile navigation */
@media (max-width: 768px) {
  header nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dark);
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
    display: none;
    z-index: 999;
  }
  header nav ul.open {
    display: flex;
  }
  #nav-toggle {
    display: flex;
  }
  /* Reset list item margin in mobile nav */
  header nav li {
    margin: 0;
  }
  .nav-container {
    justify-content: space-between;
  }
}

nav ul li a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

nav ul li a:hover,
nav ul li a.active {
  color: var(--light);
}

/* Hero Section */
.hero {
  /* The hero now acts as an opening section rather than a background image.
     It uses the primary dark colour as its background and centres the
     contents vertically and horizontally. */
  height: 90vh;
  width: 100%;
  background-color: var(--dark);
  background-size: cover;
  background-position: center;
  display: flex;
  /* Position the hero contents towards the top of the section so the logo sits
     near the top centre of the viewport. The items will still be centred
     horizontally but aligned to the start vertically. */
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  position: relative;
  margin-top: 75px; /* offset for fixed header */
}

.hero::after {
  /* Remove heavy dark overlay since the hero has a plain background. */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.0);
}

.hero-overlay {
  position: relative;
  z-index: 1;
  color: var(--light);
  max-width: 800px;
  /* Add top padding so the content doesn't start flush against the header */
  padding: 3rem 1rem 0;
}

.hero-overlay h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.hero-overlay p {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: #e8e6e1;
}

/* Large logo in the hero section */
/* Large logo in the hero section */
/* Large logo in the hero section */
.hero-logo {
  /* Further enlarge the hero logo so it dominates the opening section */
  width: 600px;
  max-width: 90%;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  /* Start hidden and shifted for a smooth entrance */
  opacity: 0;
  transform: translateY(-20px) scale(0.8);
  transition: transform 1s ease, opacity 1s ease;
}

/* Show the hero logo once the page loads */
.hero-logo.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.btn,
.btn-secondary {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn {
  background-color: var(--accent);
  color: var(--dark);
}

.btn:hover {
  background-color: #e7c785;
}

.btn-secondary {
  background-color: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}

.btn-secondary:hover {
  background-color: var(--accent);
  color: var(--dark);
}

/* Section Defaults */
section {
  padding: 4rem 0;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--accent);
  text-align: center;
}

/* About Preview */
.about-preview p {
  max-width: 800px;
  margin: 0 auto 2rem auto;
  color: #d1d1d1;
  font-size: 1rem;
  text-align: center;
}

/* Collections Preview */
.collections-preview .collection-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

.collection-item {
  flex: 1 1 280px;
  background-color: var(--mid);
  border-radius: 8px;
  overflow: hidden;
  padding-bottom: 1rem;
  text-align: center;
  transition: transform 0.3s ease;
}

.collection-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.collection-item h3 {
  font-family: 'Playfair Display', serif;
  color: var(--accent);
  margin-top: 1rem;
  font-size: 1.3rem;
}

.collection-item p {
  color: #c8c8c8;
  font-size: 0.9rem;
  margin: 0.5rem 1rem;
}

.collection-item:hover {
  transform: translateY(-5px);
}

/* Newsletter */
.newsletter {
  background-color: var(--mid);
  text-align: center;
  padding: 3rem 0;
}

.newsletter p {
  margin-bottom: 1rem;
  color: #d0d0d0;
}

.newsletter-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.newsletter-form input[type="email"] {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  outline: none;
  min-width: 220px;
}

.newsletter-form button {
  background-color: var(--accent);
  border: none;
  border-radius: 20px;
  padding: 0.5rem 1.2rem;
  color: var(--dark);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.newsletter-form button:hover {
  background-color: #e7c785;
}

.social-links img,
.contact-social img {
  width: 26px;
  margin: 0 0.4rem;
  filter: invert(75%) sepia(15%) saturate(300%) hue-rotate(5deg) brightness(90%);
  transition: transform 0.3s ease;
}

.social-links img:hover,
.contact-social img:hover {
  transform: translateY(-3px);
}

/* Page Hero for inner pages */
.page-hero {
  /* Inner pages hero uses a solid background colour instead of an image. */
  height: 40vh;
  width: 100%;
  background-color: var(--dark);
  background-size: cover;
  background-position: center;
  position: relative;
  margin-top: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.0);
}

.page-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
}

.page-overlay h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.7rem;
  color: var(--light);
}

/* Collections detail page */
.collections-section h2 {
  text-align: left;
  font-size: 2rem;
  margin-top: 2.5rem;
}

/* Center the collections section content */
.collections-section {
  text-align: center;
}

.collections-section .fb-page {
  margin: 0 auto;
}

/* Center content and social icons in the contact page */
.contact-container {
  display: flex;
  justify-content: center;
}

.contact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* Wrap the directions button and social icons together and centre them */
.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
}

.contact-actions .contact-social {
  margin-top: 1rem;
}

/* Position the 'View Directions' button centrally within the contact methods */
.contact-info a.btn-secondary {
  margin-top: 1.5rem;
  align-self: center;
  display: inline-block;
}

/* Ensure the contact social icons sit below the button and remain centred */
.contact-info .contact-social {
  margin-top: 1.5rem;
}

.collection-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
  align-items: center;
}

.collection-detail img {
  flex: 1 1 300px;
  max-width: 400px;
  border-radius: 8px;
}

.collection-detail .collection-text {
  flex: 2 1 400px;
  color: #d0d0d0;
  font-size: 1rem;
}

.center-text {
  text-align: center;
  margin-top: 2rem;
  color: #d0d0d0;
}

/* Lookbook gallery */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

.gallery-grid img {
  flex: 1 1 350px;
  max-width: 100%;
  border-radius: 8px;
  height: 300px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Contact page */
.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  margin-top: 2rem;
}

.contact-form, .contact-info {
  flex: 1 1 350px;
  background-color: var(--mid);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Photo grid for the collections page to display images from our latest collections */
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

.photo-grid img {
  flex: 1 1 300px;
  max-width: 350px;
  border-radius: 8px;
  height: 250px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.contact-form h2,
.contact-info h2 {
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.contact-form p {
  margin-bottom: 1rem;
  color: #d0d0d0;
}

.contact-form label {
  display: block;
  margin-top: 1rem;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  color: var(--accent);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 6px;
  outline: none;
  margin-bottom: 0.5rem;
  color: var(--dark);
}

.contact-form button {
  margin-top: 1rem;
}

.contact-info p {
  margin-bottom: 0.8rem;
  color: #d0d0d0;
  font-size: 0.95rem;
}

.contact-info a {
  color: var(--accent);
  text-decoration: underline;
}

.contact-social {
  margin-top: 1.5rem;
}

/* Contact methods list (used on contact page) */
.contact-methods {
  list-style: none;
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding-left: 0;
}
.contact-methods li {
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
}
.contact-methods a {
  color: var(--accent);
  text-decoration: none;
}
.contact-methods a:hover {
  text-decoration: underline;
}

/* Footer */
footer {
  background-color: var(--mid);
  text-align: center;
  padding: 1rem 0;
  color: #a5a5a5;
  font-size: 0.8rem;
}

/* Fade-in animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.appear {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .collection-detail {
    flex-direction: column;
    text-align: center;
  }
  .collection-detail img {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  nav ul {
    gap: 1rem;
  }
  .hero-overlay h1 {
    font-size: 2.2rem;
  }
  .hero-overlay p {
    font-size: 1rem;
  }
  .page-overlay h1 {
    font-size: 2rem;
  }
  .contact-container {
    flex-direction: column;
  }
}