/*
  Global styles for Rest as Resistance — Japan 2025

  This stylesheet defines the rich gradient background, card styling,
  responsive grids and typography for the single‑page sales site. Colors and
  spacing were chosen to evoke deep relaxation and luxury while maintaining
  readability and contrast. The layout is fully responsive.
*/

/* CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  color: #ffffff;
  background: linear-gradient(180deg, #2c0430 0%, #401a51 33%, #183e35 66%, #5d3a00 100%);
  background-attachment: fixed;
}

a {
  color: #f4c15d;
  text-decoration: underline;
}

a:hover {
  opacity: 0.9;
}

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

.section {
  padding: 4rem 0;
}

.section-heading {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}

.section-subheading {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0.85;
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.primary-btn {
  background: #f4c15d;
  color: #2c0430;
}

.secondary-btn {
  background: transparent;
  color: #f4c15d;
  border: 2px solid #f4c15d;
}

.primary-btn:hover, .secondary-btn:hover {
  opacity: 0.9;
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;
  position: fixed;
  width: 100%;
  z-index: 1000;
  background: rgba(44, 4, 48, 0.8);
  backdrop-filter: blur(8px);
}

.logo {
  font-weight: 600;
  font-size: 1rem;
}

.reserve-btn {
  background: #f4c15d;
  color: #2c0430;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
}

/* Hero */
.hero-section {
  position: relative;
  background-image: url('images/hero.png');
  background-size: cover;
  background-position: center;
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6rem;
  text-align: left;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  /* Expand the width of the hero content on larger screens so the title can
     fit on one line. */
  max-width: 900px;
}

.hero-dates {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #f4c15d;
}

.hero-title {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.hero-title span {
  font-size: 1.5rem;
  font-weight: 500;
  opacity: 0.9;
}

.hero-subtitle {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  max-width: 550px;
  opacity: 0.9;
}

.cta-btn {
  background: #f4c15d;
  color: #2c0430;
  padding: 0.7rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}

/* Early‑Birds section */
.earlybird-section {
  background: rgba(255, 255, 255, 0.08);
  padding: 1rem 0;
}

.earlybird-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.earlybird-text {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.highlight {
  color: #f4c15d;
}

.countdown {
  display: flex;
  gap: 1rem;
}

.time-box {
  text-align: center;
}

.time-box span {
  /* Increase countdown digit size for better visibility */
  font-size: 2.4rem;
  font-weight: 600;
}

.time-box small {
  font-size: 0.85rem;
  display: block;
}

/* Smaller font for early‑bird disclaimer */
.earlybird-note {
  /* Reduce font size for the disclaimer beneath the early‑bird headline */
  font-size: 0.75rem;
  display: block;
  margin-top: 0.3rem;
  opacity: 0.9;
}

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

.tier-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tier-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #f4c15d;
}

.tier-price {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.tier-features {
  list-style-type: disc;
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}

.tier-features li {
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

.tier-actions {
  display: flex;
  gap: 0.5rem;
}

.tier-note {
  font-size: 0.75rem;
  margin-top: 0.5rem;
  opacity: 0.8;
}

/* Price note styling for the tier prices after the early‑bird period */
.price-note {
  font-size: 0.8rem;
  color: #d6af5c;
  margin-left: 0.25rem;
}

/* Pricing note under the Choose Your Rest Journey heading */
.pricing-note {
  font-size: 0.85rem;
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  opacity: 0.9;
  color: #f4c15d;
}

/* Itinerary */
.itinerary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.itinerary-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 350px;
}

.itinerary-img {
  height: 160px;
  background-size: cover;
  background-position: center;
}

.itinerary-text {
  padding: 1rem;
}

.days {
  font-size: 0.85rem;
  font-weight: 600;
  color: #f4c15d;
}

.place {
  font-size: 1.1rem;
  margin: 0.3rem 0;
  font-weight: 600;
}

.desc {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Experiences / Healing section */
.experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.experience-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.experience-img {
  height: 160px;
  background-size: cover;
  background-position: center;
}

.experience-card h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #f4c15d;
  margin: 0.8rem 1rem 0.4rem;
}

.experience-card p,
.experience-card ul {
  font-size: 0.85rem;
  padding: 0 1rem 1rem;
  line-height: 1.4;
  opacity: 0.9;
}

.experience-card ul {
  list-style: disc inside;
}

/* Senanu section */
.senanu-section {
  background: rgba(255, 255, 255, 0.05);
}

.senanu-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.senanu-text {
  flex: 1 1 300px;
}

.senanu-gallery {
  flex: 1 1 300px;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.senanu-gallery img {
  width: 100%;
  max-width: 220px;
  border-radius: 6px;
  object-fit: cover;
  height: auto;
}

/* Add-ons section */
.addons-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

.addons-image {
  flex: 1 1 40%;
}

.addons-image img {
  width: 100%;
  border-radius: 6px;
  height: auto;
  object-fit: cover;
}

.addons-text {
  flex: 1 1 50%;
}

.inclusion-card ul {
  list-style: disc inside;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Add‑ons section headers styling */
/* Category headings in the add‑ons list */
.addons-category {
  color: #f4c15d;
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Add a gap between successive categories */
.inclusion-card ul + .addons-category {
  margin-top: 1.25rem;
}

/* Value section */
.value-section {
  background: rgba(255, 255, 255, 0.05);
}

.value-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.value-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
}

.value-panel {
  flex: 1 1 300px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 1.5rem;
}

.value-panel ul {
  list-style: none;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.value-panel ul li {
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
}

.value-panel h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #f4c15d;
}

/* Highlight the total value */
.highlight-value {
  color: #f4c15d;
}

/* Image panel in value section */
.image-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.value-total {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* FAQ section */
.faq-item {
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.8rem 1rem;
}

.faq-item summary {
  font-weight: 600;
  cursor: pointer;
  color: #f4c15d;
  list-style: none;
}

/* Constrain FAQ width and left‑justify content */
/* Constrain FAQ width and center the FAQ container */
/*
 * FAQ list container
 * Center the entire FAQ list on the page and allow the body text to be left‑aligned within
 * the container. Using auto margins horizontally centers the box, while a max width
 * prevents lines from becoming too long. The list itself remains left‑aligned for
 * comfortable reading, but you can switch to `text-align: justify` if you prefer fully
 * justified paragraphs.
 */
.faq-list {
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.faq-item p {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.9;
}

/* Host section */
.host-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.host-text {
  flex: 1 1 300px;
  line-height: 1.5;
}

.host-gallery {
  flex: 1 1 300px;
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
}

.host-gallery img {
  width: 100%;
  max-width: 300px;
  border-radius: 6px;
  object-fit: cover;
  height: auto;
}

.credit {
  font-size: 0.75rem;
  margin-top: 1rem;
  opacity: 0.8;
}

/* Limit hero gratitude note width to match hero description */
/*
  The hero gratitude note should wrap at roughly the same width as the
  subtitle above it. Limit the max‑width so the line length matches
  the descriptive text and prevents overly long sentences from
  stretching across the entire hero area on large screens.
*/
.hero-credit {
  display: block;
  /* Match the subtitle width (550px) so both paragraphs align. */
  max-width: 550px;
  /* Add a small top margin to separate from subtitle */
  margin-top: 0.5rem;
}

/* Testimonials section */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Reserve card styling: wrap the reserve form in a gradient card similar to other
   sections. Provides padding, border, and centred layout */
.reserve-card {
  border: 1px solid rgba(212, 166, 64, 0.46);
  background-image: linear-gradient(
    160deg,
    rgba(44, 4, 48, 0.6) 0%,
    rgba(64, 26, 81, 0.6) 33%,
    rgba(24, 62, 53, 0.6) 66%,
    rgba(93, 58, 0, 0.6) 100%
  );
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  max-width: 800px;
  margin: 1.5rem auto 0 auto;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 1.5rem;
}

.testimonial-card p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.author {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Note heading in host section */
.note-heading {
  font-size: 1.2rem;
  font-weight: 600;
  color: #f4c15d;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Reserve section */
.reserve-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.reserve-form input,
.reserve-form select,
.reserve-form textarea {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border: none;
  font-size: 1rem;
  color: #2c0430;
}

.reserve-form textarea {
  resize: vertical;
}

.reserve-form button {
  align-self: center;
}

/* Center the explanatory note above the reservation form. When the
   reserve form card is centered on the page, this ensures the text
   aligns horizontally with it. */
.reserve-note {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

/* Smaller font for the early‑bird reminder in the reserve section */
.reserve-note-small {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }
  .hero-title span {
    font-size: 1.3rem;
  }
  .hero-subtitle {
    font-size: 0.9rem;
  }
  /* Keep the countdown aligned to the right on smaller screens by maintaining a row layout */
  .earlybird-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .value-container {
    flex-direction: column;
  }
  .host-gallery {
    justify-content: flex-start;
  }
}

/* === DFY: Gradient card + gold outline (Aug 2025) === */
/* Apply a rich multi‑stop gradient to all non‑image cards. This mirrors the
   plum‑to‑purple‑to‑forest‑green‑to‑gold colour scheme of the template.
   The gold outline remains for a luxurious feel. */
.tier-card, .itinerary-item, .experience-card, .inclusion-card, .value-panel, .faq-item, .testimonial-card {
  border: 1px solid rgba(212,166,64,.46);
  /* Four‑stop gradient: plum → purple → forest green → gold. Slight alpha
     values allow underlying images (where present) to shine through. */
  background-image: linear-gradient(
    160deg,
    rgba(44, 4, 48, 0.6) 0%,
    rgba(64, 26, 81, 0.6) 33%,
    rgba(24, 62, 53, 0.6) 66%,
    rgba(93, 58, 0, 0.6) 100%
  );
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  border-radius: 12px;
}

/* Hero title sizing: clamp to ensure it stays on one line on larger screens.
   The minimum has been reduced and the maximum lowered so the text wraps
   gracefully on mobile while remaining succinct on desktop. */
 .hero-title {
  /* Reduce maximum size so the title fits on one line on desktop. The clamp
     uses a smaller maximum (2.2rem) and a lower preferred size to keep text
     compact without sacrificing readability. */
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  line-height: 1.1;
}

/* Galleries: images constrained to card width; prevent overflow */
/* Fine‑tune gallery image sizing to prevent overflow on desktop and mobile.
   Each image has a maximum width and automatically scales down to fit.
   Heights remain auto so images maintain their aspect ratio and do not
   extend beyond the accompanying text. */
.senanu-gallery, .host-gallery {
  align-items: flex-start;
  flex-wrap: wrap;
}
/*
  Enlarge the Senanu Kimono and host gallery images slightly while
  maintaining aspect ratio. A larger max‑width allows the images to
  occupy more of their container without overflowing the page. They
  will still scale down responsively on smaller screens. */
.senanu-gallery img {
  width: 100%;
  /* Increase max width to 250px for equal‑sized, larger thumbnails */
  max-width: 250px;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}
/* Scale down the host gallery images so they better align with the
   accompanying text card. Smaller thumbnails prevent overflow and
   balance the composition. */
.host-gallery img {
  width: 100%;
  max-width: 280px;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

/* Add‑on section: arrange the image and details side by side. The first
   column has been widened to accommodate a larger photo, as requested. */
.addons-grid {
  display: grid;
  /* Give equal space to image and details so the photo matches the card height */
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items: start;
}
@media (max-width: 900px){ .addons-grid { grid-template-columns: 1fr; } }
.addons-image-placeholder {
  /* Updated to the ryokan view photo for the add‑ons section. */
  background: url('images/view-from-ryokan.png') center/cover no-repeat;
  border: 1px solid rgba(212,166,64,.35);
  border-radius: 12px;
  /* Increase height to better match the card's proportions */
  min-height: 350px;
  height: 100%;
}

/* Increase card padding in Journey Add‑ons for better readability */
.addons-section .inclusion-card {
  padding: 1.5rem;
}

/* Value section: center vertically and add spacing before CTA */
.value-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px){ .value-panels { grid-template-columns: 1fr; } }
.breakdown-panel { display:flex; flex-direction:column; justify-content:center; }
.value-total { margin-bottom: .95rem; }

/* Center‑align the Investment Value section heading */
.value-section .section-heading {
  text-align: center;
}

/* FAQ: add down arrows */
details.faq-item > summary { position: relative; padding-right: 1.5rem; list-style: none; }
details.faq-item > summary::after {
  content: '▾'; position: absolute; right: .25rem; top: 0; color:#f4c15d; font-weight:700;
}

/* Mobile hero responsiveness */
@media (max-width: 640px){
  /* Increase the hero height slightly on very small screens and decrease
     the top padding to ensure all lines remain visible. Smaller font
     sizes prevent wrapping and keep the retreat name and dates legible. */
  .hero-section { min-height: 65vh; padding-top: 4rem; }
  /* Reduce the hero title size further on narrow screens so it fits on one line without wrapping */
  .hero-title { font-size: 1.3rem !important; line-height: 1.15; }
  .hero-dates { font-size: 0.95rem !important; }
  .hero-subtitle { font-size: 0.85rem !important; }

  /* On small screens, ensure the host gallery images are full‑width and
     the gallery is centered. This creates a responsive, justified layout
     where each photo stacks and scales gracefully on mobile devices. */
  .host-gallery {
    justify-content: center;
  }
  .host-gallery img {
    max-width: 100%;
    width: 100%;
  }
}

/* Pricing list styling for the FAQ pricing breakdown */
.pricing-list,
.pricing-list ul {
  font-size: 0.85rem;
  margin-left: 1.2rem;
  line-height: 1.4;
  list-style-type: disc;
}

.pricing-list > li {
  margin-bottom: 0.7rem;
}

.pricing-list strong {
  font-weight: 600;
}

/* FAQ details list styling for arrival/departure breakdown */
.faq-details-list,
.faq-details-list ul {
  font-size: 0.85rem;
  margin-left: 1.2rem;
  line-height: 1.4;
  list-style-type: disc;
}

.faq-details-list > li {
  margin-bottom: 0.7rem;
}

.faq-details-list strong {
  font-weight: 600;
}