/* Lux Physio custom stylesheet
   This file defines the visual appearance for the simple static site.
   Colours and fonts are chosen to evoke the same calm, premium feel
   as the original Lux Physio website. */

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

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #e2dbd3;
  color: #262626;
  line-height: 1.6;
}

header {
  background-color: #111111;
  color: #ffffff;
  /* Increase vertical padding to give the logo breathing room above and
     below, so it doesn't feel squished against the navigation bar */
  padding: 30px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  /* Use flexbox for horizontal layout */
  display: flex;
  align-items: center;
  /* Distribute space evenly; we'll make the logo occupy its own flex
     slot so that it remains centered regardless of the number of
     navigation links on either side. */
  justify-content: space-between;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
}

/* Align links on the left group flush to the start of their container,
   and align the right group flush to the end. This creates a balanced
   layout when the logo occupies the centre slot. */
.nav-left {
  justify-content: flex-start;
}
.nav-right {
  justify-content: flex-end;
}

.nav-left a,
.nav-right a {
  color: #ffffff;
  margin: 0 15px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}

.nav-left a:hover,
.nav-right a:hover {
  color: #bfa576;
}

.logo img {
  height: 80px;
  width: auto;
}

/* Give each nav group and the logo equal flex-basis. This allows the
   central logo to remain centered in the header while the left and
   right navigation links take up the remaining space evenly. */
.nav-left,
.logo,
.nav-right {
  flex: 1;
}

/* Centre the logo image within its flex slot */
.logo {
  display: flex;
  justify-content: center;
}

main {
  width: 90%;
  max-width: 1200px;
  margin: 40px auto;
}

/* Hero section styling */
.hero {
  text-align: center;
  padding: 80px 0;
}

/* Hero heading retains the default Cinzel font and displays as written. */
.hero h1 {
  font-family: 'Cinzel', serif;
  font-size: 48px;
  margin-bottom: 20px;
  /* Do not force lowercase; allow the HTML to specify casing */
}

.hero p {
  font-size: 18px;
  max-width: 600px;
  margin: 10px auto;
}

.button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #111111;
  color: #ffffff;
  border: none;
  text-decoration: none;
  margin-top: 25px;
  font-weight: 600;
}

.button:hover {
  background-color: #333333;
}

/* Section titles */
/* Section titles use the default Cinzel font. Casing is controlled by the HTML content. */
.section-title {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 36px;
  margin-bottom: 40px;
  /* No explicit text-transform here; uppercase/lowercase comes from the HTML */
}

/* Remove font override for primary headings. They will inherit Cinzel or other fonts defined elsewhere. */

/* Services layout */
.service {
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.service-content {
  flex: 1 1 auto;
}

.service-title {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  margin-bottom: 5px;
}

.service-meta {
  /* Use normal font style so timings and prices are not italicised */
  font-style: normal;
  margin-bottom: 10px;
}

.service-desc {
  margin-bottom: 10px;
}

.request-btn {
  background-color: #111111;
  color: #ffffff;
  padding: 10px 18px;
  text-decoration: none;
  white-space: nowrap;
}

.request-btn:hover {
  background-color: #333333;
}

/* About page sections */
.about-section {
  margin-bottom: 40px;
}

.about-section h2 {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  margin-bottom: 10px;
  text-align: center;
}

.about-section p,
.about-section ul {
  max-width: 800px;
  margin: 10px auto;
}

.about-section ul {
  list-style-type: disc;
  padding-left: 20px;
}

.profile-section {
  max-width: 800px;
  margin: 0 auto 40px auto;
  text-align: center;
}

.profile-section h2 {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  margin-bottom: 20px;
}

.profile-section p {
  margin-bottom: 10px;
}

.accolades-section {
  max-width: 800px;
  margin: 0 auto 40px auto;
}

.accolades-section h2 {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  margin-bottom: 20px;
  text-align: center;
}

.accolades-section h3 {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.accolades-section ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 20px;
}

/* FAQ styles */
.faq-section h2 {
  font-family: 'Cinzel', serif;
  font-size: 32px;
  margin-bottom: 20px;
  text-align: center;
}

/* Remove forced lowercase on headings; casing now comes from the HTML text. */

.faq-item {
  margin-bottom: 15px;
}

.faq-question {
  font-weight: bold;
  cursor: pointer;
}

.faq-answer {
  /* Show FAQ answers by default so users don’t need to click anything to
     see the information. We remove the previous display:none setting. */
  display: block;
  margin-left: 20px;
  margin-top: 5px;
}

/* Hidden honeypot class used in the Netlify form */
.hidden {
  display: none;
}

/*
 * ======================================================================
 * Layout adjustments to keep the footer at the bottom of the viewport
 *
 * When the page’s content does not fill the viewport height, the footer
 * would ordinarily appear right after the last element. By using flexbox
 * on the body element and allowing the main content to grow, the footer
 * naturally moves to the bottom of the page. These rules supplement the
 * existing typography and color styles without altering other layout
 * properties.
 */
html,
body {
  /* Ensure the document takes up the full viewport height */
  min-height: 100vh;
}

body {
  /* Use flexbox to arrange header, main and footer vertically */
  display: flex;
  flex-direction: column;
}

main {
  /* Allow the main element to expand and push the footer to the bottom */
  flex: 1 0 auto;
}

footer {
  /* Push the footer to the end of the flex container */
  margin-top: auto;
}

/*
 * Service description toggle styling
 *
 * Hide descriptions by default. When the `.show` class is applied via
 * JavaScript, the content becomes visible. The More/Less button is styled
 * subtly to match the site's aesthetic.
 */
.service-desc {
  display: none;
  margin-top: 10px;
}

.service-desc.show {
  display: block;
}

.more-btn {
  background-color: transparent;
  border: 1px solid #000000;
  color: #000000;
  padding: 6px 12px;
  font-size: 0.875rem;
  cursor: pointer;
  margin-top: 10px;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
}

.more-btn:hover {
  background-color: #000000;
  color: #ffffff;
}

/* =============================
   Contact Form Enhancements
   These rules improve the appearance of the contact form by
   centering it on the page, limiting its maximum width for
   readability, and styling the input fields and button.
============================= */
.contact-form {
  /* Center the form and give it a pleasing max width */
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 1rem;
  background-color: #f5f0e7;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #fffdf8;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
  /* Match the font styling of the input fields so the placeholder
     text for "Message" appears consistent with "Name" and "Email" */
  font-size: 1rem;
  font-family: inherit;
}

.contact-form button {
  background-color: #111111;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease-in-out;
}

.contact-form button:hover {
  background-color: #333333;
}

/* =============================
   Footer Styling
   Give the footer a dark background like the header and adjust
   text/link colors so it stands out at the bottom of the page.
============================= */
footer {
  background-color: #111111;
  color: #ffffff;
  text-align: center;
  padding: 1rem 0;
}

/* Style footer links to match the dark background */
footer a {
  color: #ffffff;
  margin: 0 5px;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/*
 * Mobile navigation styles
 *
 * On small screens the traditional navigation links are hidden and a
 * hamburger icon appears instead. When tapped, it reveals a slide‑in
 * sidebar containing the same navigation links. The sidebar covers
 * part of the viewport and can be toggled open or closed by
 * interacting with the hamburger. The overlay effect and animated
 * transform provide a smooth mobile experience without affecting
 * desktop layouts.
 */

/* Hide the hamburger icon by default – it appears only on small screens */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 3px;
  background-color: #ffffff;
  border-radius: 2px;
}

/* Sidebar container is hidden off‑canvas by default */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 70%;
  max-width: 280px;
  height: 100vh;
  background-color: #111111;
  color: #ffffff;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 1500;
  padding-top: 120px; /* leave space for header */
}

.sidebar a {
  display: block;
  padding: 1rem 1.5rem;
  color: #ffffff;
  text-decoration: none;
  font-size: 1rem;
  text-transform: uppercase;
}

.sidebar a:hover {
  background-color: #333333;
}

.sidebar.show {
  transform: translateX(0);
}

/*
 * Responsive rules for small screens
 *
 * On viewports 768px wide and below we hide the traditional navigation
 * groups and instead show a hamburger menu. We also apply a few layout
 * tweaks to improve readability and flow on narrow devices — headings
 * and paragraphs scale down slightly, and service sections stack
 * vertically to avoid cramped side‑by‑side layouts. These rules are
 * consolidated into a single media query so they don’t conflict with
 * one another and to ensure the hamburger navigation is consistently
 * displayed across all pages.
 */
@media (max-width: 768px) {
  /* Show the hamburger icon */
  .hamburger {
    display: flex;
  }

  /* Hide the standard nav groups on mobile */
  .nav-left,
  .nav-right {
    display: none;
  }

  /* Reduce header padding to accommodate the hamburger */
  header {
    padding: 20px 0;
  }

  /* Adjust hero section for mobile readability */
  .hero {
    padding: 60px 0;
  }
  .hero h1 {
    font-size: 32px;
  }
  .hero p {
    font-size: 16px;
  }

  /* Stack service items vertically on mobile */
  .service {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .service-content {
    width: 100%;
  }
}

/* =============================
   Thank You Page Styling
   Style the thank you message so it is centred on the page, with
   constrained width and pleasant typography. This ensures that
   visitors see a balanced layout when they reach the confirmation page.
============================= */
.thank-you-message {
  text-align: center;
  max-width: 600px;
  margin: 1.5rem auto;
  font-size: 1.1rem;
  line-height: 1.6;
}