/* Root variables for colors and fonts */
:root {
  /*
   * Colour palette based off of the Pretty Paper branding.
   * Indigo (#23395B) is used as the primary accent colour for buttons and links.
   * Sumi Black (#0F0F0F) provides rich contrast for headings and foreground elements.
   * Bone (#F7F4EF) serves as the light background colour for most sections.
   * Warm Gray (#6B6B6B) is used for muted text and secondary information.
   */
  --primary-color: #23395B;
  --secondary-color: #0F0F0F;
  --background-light: #F7F4EF;
  --background-dark: #EDE8DD; /* slightly darker bone for alternating sections */
  --card-background: #ffffff;
  --text-color: #0F0F0F;
  --muted-text: #6B6B6B;
  --border-radius: 0.5rem;
  --transition-speed: 0.3s;
  --heading-font: 'Noto Serif JP', serif;
  --body-font: 'Noto Sans JP', sans-serif;
}

/* Ensure the footer stays at the bottom of the viewport on pages with little content */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

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

body {
  font-family: var(--body-font);
  background-color: var(--background-light);
  color: var(--text-color);
  line-height: 1.6;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-speed);
}

a:hover {
  color: var(--secondary-color);
}

/* Navigation */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Use a translucent bone colour for the navbar to subtly blend with the page background */
  background-color: #F7F4EFCC;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #E0DED8;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
}

/* Logo image sizing. Ensures that the brand svg scales nicely within the navigation bar. */
.logo {
  height: 40px;
  width: auto;
  display: block;
}

/* When the logo is placed inside the `.brand` element, increase its height slightly and prevent
   cropping by letting it scale proportionally. */
.brand .logo {
  /* Constrain the logo height and width so that the full artwork is visible
     within the navigation bar without cropping. The width is capped to avoid
     it spilling into the navigation links on smaller screens. */
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.brand {
  /* Display the logo neatly in the navigation bar. When using an image as the brand,
     override the default font styles and align the image properly. */
  display: flex;
  align-items: center;
  font-family: var(--heading-font);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secondary-color);
}

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

nav ul li {
  position: relative;
}

nav ul a {
  font-weight: 500;
  font-size: 1rem;
  color: var(--secondary-color);
  padding: 0.25rem 0;
  display: block;
}

nav ul a.active,
nav ul a:hover {
  border-bottom: 2px solid var(--primary-color);
  color: var(--primary-color);
}

/* Cart Icon */
.cart-wrapper {
  position: relative;
}

#cart-button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--secondary-color);
  position: relative;
  display: flex;
  align-items: center;
}

.cart-count {
  position: absolute;
  top: -0.4rem;
  right: -0.5rem;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  font-size: 0.7rem;
  width: 1.3rem;
  height: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Hero Section */
.hero {
  /*
   * The hero section introduces the Pretty Paper brand at the top of the page.
   * Use a generous vertical padding rather than a fixed viewport height so the
   * section always displays its contents, even on devices where viewport units
   * behave unpredictably. The marbled background scales to cover the area.
   */
  position: relative;
  /* Increase top and bottom padding to create breathing room above the headline
     and below the call‑to‑action buttons */
  padding: 8rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url('hero_custom.png');
  background-size: cover;
  background-position: center;
  color: white;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Use the primary indigo colour for the hero overlay so that text remains legible over the background image */
  background: rgba(35, 57, 91, 0.55);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 1rem;
}

.hero-content h1 {
  font-family: var(--heading-font);
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  border-radius: 0.3rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-speed), color var(--transition-speed);
  text-align: center;
}

.btn.primary {
  background-color: var(--primary-color);
  color: white;
  border: none;
}

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

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

.btn.secondary:hover {
  background-color: var(--primary-color);
  color: white;
}

/*
 * Customize the secondary button within the hero section. The hero section uses a dark, marbled
 * background overlay which can make transparent buttons with a teal border difficult to see.
 * To ensure the “Book a Class” call‑to‑action stands out on first load, we override the default
 * secondary button styles when it appears inside `.hero`. Here we set the text and border to
 * white for higher contrast, and revert to the primary colour on hover.
 */
.hero .hero-btn {
  color: #ffffff;
  border-color: #ffffff;
}

.hero .hero-btn:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
}

/* Sections */
.section-light {
  background-color: var(--background-light);
  padding: 4rem 1rem;
}

.section-dark {
  background-color: var(--background-dark);
  padding: 4rem 1rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Section Headings */
section h2 {
  font-family: var(--heading-font);
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--secondary-color);
}

/* Cards Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.card {
  background-color: var(--card-background);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card h3 {
  font-family: var(--heading-font);
  font-size: 1.3rem;
  margin: 1rem;
  color: var(--secondary-color);
}

.card p {
  flex-grow: 1;
  font-size: 0.95rem;
  margin: 0 1rem 1.5rem 1rem;
  color: var(--muted-text);
}

.card .btn {
  margin: 0 1rem 1.5rem;
  align-self: flex-start;
}

/* Upcoming Classes Preview */
.classes-preview {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.class-card {
  background-color: var(--card-background);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.class-card h4 {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}

.class-card p {
  font-size: 0.95rem;
  color: var(--muted-text);
  margin-bottom: 1rem;
}

.class-card .btn {
  align-self: flex-start;
}

/* Add spacing between the price and booking button in class cards */
/*
 * Increase spacing between the price and the booking button in class cards.  The additional
 * margin ensures the dollar amount doesn’t crowd the call‑to‑action, improving
 * readability and visual hierarchy.
 */
.class-card .price {
  display: block;
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--secondary-color);
}

/* Contact Section */
.contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.contact-details div {
  flex: 1;
  min-width: 200px;
}

.contact-details h4 {
  font-family: var(--heading-font);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}

.contact-details p, .contact-details a {
  color: var(--muted-text);
  font-size: 0.95rem;
}

/* Footer */
.footer {
  background-color: var(--secondary-color);
  /* Use the light bone colour for footer text to tie into the overall palette */
  color: var(--background-light);
  padding: 2rem 1rem;
  text-align: center;
}

.footer p {
  margin: 0.3rem 0;
  font-size: 0.85rem;
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5vh;
  z-index: 2000;
}

.modal-content {
  background-color: #ffffff;
  border-radius: var(--border-radius);
  width: 90%;
  max-width: 500px;
  padding: 2rem;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}

/* Booking modal specific styling */
#booking-modal .modal-content {
  max-width: 480px;
}

#booking-modal #selected-class {
  font-family: var(--heading-font);
  font-size: 1rem;
  color: var(--secondary-color);
  margin-bottom: 1rem;
}

#booking-modal form {
  display: flex;
  flex-direction: column;
}

#booking-modal label {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: var(--secondary-color);
  font-weight: 600;
}

#booking-modal input {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 0.3rem;
  font-size: 0.95rem;
  font-family: var(--body-font);
}

#booking-modal button[type="submit"] {
  margin-top: 1rem;
  align-self: flex-start;
}

#booking-modal #booking-success p {
  font-size: 1rem;
  color: var(--secondary-color);
  margin-top: 1rem;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--muted-text);
}

/* Cart items list */
.cart-items {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Use the secondary light bone tone for borders instead of a generic grey. */
  border-bottom: 1px solid var(--background-dark);
  padding-bottom: 0.75rem;
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item .item-info {
  flex-grow: 1;
  margin-left: 0.5rem;
}

.cart-item .item-info h5 {
  font-family: var(--heading-font);
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: var(--secondary-color);
}

.cart-item .item-info span {
  font-size: 0.85rem;
  color: var(--muted-text);
}

.cart-item .remove-item {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 1rem;
  cursor: pointer;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--heading-font);
  font-size: 1.1rem;
  margin: 1rem 0;
}

/* Utility classes */
.center-btn {
  text-align: center;
  margin-top: 2rem;
}

/* Adjust spacing between price and button in product cards */
.card .price {
  display: block;
  margin: 0 1rem 1rem;
}

.card .btn {
  margin: 0 1rem 1.6rem;
}

/* Contact form styles */
.contact-form-wrapper {
  margin-top: 2rem;
}

.contact-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  flex: 1;
  min-width: 200px;
  padding: 0.6rem 0.8rem;
  border-radius: 0.3rem;
  border: 1px solid #d1d5db;
  font-size: 0.95rem;
}

.contact-form textarea {
  flex-basis: 100%;
  min-height: 120px;
  resize: vertical;
}

.contact-form button {
  padding: 0.7rem 1.5rem;
}

/* Random pattern generator section */
.random-pattern-container {
  text-align: center;
}

.random-pattern-container img {
  width: 100%;
  /* Limit the height of the random pattern image so it doesn’t dominate the layout on desktop */
  max-height: 350px;
  height: auto;
  object-fit: cover;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Booking form note */
.booking-note {
  font-size: 0.8rem;
  color: var(--muted-text);
  margin-top: 0.5rem;
}

/* Admin login styles for footer */
.admin-login-footer {
  margin-top: 1.5rem;
}

.admin-login-footer form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-login-footer input[type="text"],
.admin-login-footer input[type="password"] {
  padding: 0.4rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  font-size: 0.9rem;
}

.admin-login-footer button {
  padding: 0.4rem 0.8rem;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  font-weight: 600;
}

.admin-login-footer button:hover {
  background-color: var(--secondary-color);
}

/* Responsive */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
  nav ul {
    gap: 1rem;
  }
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .classes-preview {
    grid-template-columns: 1fr;
  }
  .contact-details {
    flex-direction: column;
  }
}

/* Mobile Navigation */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background-color: var(--secondary-color);
  transition: transform var(--transition-speed);
}

@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }
  .navbar .nav-container {
    position: relative;
  }
  .navbar nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--secondary-color);
    display: none;
    text-align: center;
    padding: 1rem 0;
    z-index: 1000;
  }
  .navbar nav ul {
    flex-direction: column;
    gap: 1rem;
  }
  .navbar nav ul li a {
    color: #ffffff;
  }
  .navbar nav ul li a.active {
    color: var(--primary-color);
  }
  .navbar.nav-open nav {
    display: block;
  }
}