/*
  Dark theme styles for Manhood Men’s Group
  Palette B: Charcoal & Stone
*/

:root {
  --color-primary: #111827;   /* main background */
  --color-secondary: #1F2937; /* card and header background */
  --color-text: #F3F4F6;      /* primary text color */
  --color-accent: #A7F3D0;    /* accent color for buttons and highlights */
  --color-muted: #9CA3AF;     /* muted text */
}

/* Accent card variant for membership and other highlighted sections
   Use the same dark background as the standard cards so the title
   colour aligns with the rest of the offerings.  The accent colour
   is applied on the border to subtly highlight this card without
   creating a separate colour scheme that clashes with the other
   options.  Headings, paragraphs and list items inherit the
   site-wide text colour for consistency. */
.card-accent {
  /* Match the dark card background used by the other offerings */
  background: var(--color-secondary);
  color: var(--color-text);
  /* Use a solid accent border to distinguish this card */
  border: 2px solid var(--color-accent);
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 2rem;
}
/* Ensure headings and text inside the accent card use the same
   colour as the other cards for a cohesive look */
.card-accent h2,
.card-accent h3,
.card-accent p,
.card-accent li {
  color: var(--color-text);
}

/*
 * Membership accent card adjustments
 *
 * The inspirational pull‑quote inside the accent card needs more contrast
 * against the dark background so that it stands out. Use the mint accent
 * colour for both the text and the border on the quote to improve
 * legibility while maintaining the overall colour palette.  This rule
 * applies only to pull quotes inside accent cards and will not affect
 * quotes elsewhere on the site.
 */
.card-accent .pull-quote {
  /* Use a lighter shade of the accent colour for better contrast on
     dark backgrounds. This improves legibility for the quote text
     without breaking the overall palette. */
  color: #d1fae5;
  border-left-color: #d1fae5;
}

/* Feature list spacing */
.feature-list {
  margin: 1rem 0 1.25rem;
  padding-left: 1.2rem;
}
.feature-list li {
  margin: 0.4rem 0;
}

/* Pull-quote styling for inspirational quotes */
.pull-quote {
  margin: 1rem 0 1.25rem;
  padding-left: 0.9rem;
  border-left: 3px solid #111827;
  font-style: italic;
  color: #111827;
}

/* Dark button variant for high contrast on light cards */
.btn-dark {
  background: #111827;
  color: var(--color-accent);
  border: 1px solid #0f172a;
}
.btn-dark:hover {
  background: #0b1220;
  color: var(--color-accent);
  transform: translateY(-1px);
}
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: var(--color-primary);
  color: var(--color-text);
  line-height: 1.6;
}

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

/* Navigation */
.nav {
  display: flex;
  gap: 1rem;
}

/* Mobile menu toggle and hamburger icon */
/* Hide the checkbox input used to toggle the menu */
.menu-toggle {
  display: none;
}

/* Style the hamburger icon */
.menu-icon {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 0.5rem;
}

.menu-icon span {
  width: 25px;
  height: 3px;
  background: var(--color-text);
  margin: 4px 0;
  transition: transform 0.3s, opacity 0.3s;
}

/* Transform the hamburger into an "X" when menu is open */
.menu-toggle:checked + .menu-icon span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle:checked + .menu-icon span:nth-child(2) {
  opacity: 0;
}

.menu-toggle:checked + .menu-icon span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Show or hide the navigation menu on mobile */
@media (max-width: 768px) {
  /* Hide the nav by default on mobile and show vertical when toggled */
  .nav {
    display: none;
    flex-direction: column;
    background: var(--color-secondary);
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    margin: 0;
    z-index: 99;
  }
  .nav a {
    padding: 1rem;
    margin: 0;
    border-top: 1px solid var(--color-primary);
  }
  /* Display the hamburger icon on mobile */
  .menu-icon {
    display: flex;
  }
  /* When the checkbox is checked, show the nav */
  .menu-toggle:checked + .menu-icon + .nav {
    display: flex;
  }
}

.nav a.active {
  border-bottom: 2px solid var(--color-accent);
}

/* Buttons */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-primary);
  border: none;
}

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

.btn-secondary {
  border-color: var(--color-muted);
  color: var(--color-text);
}

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

/* Prices */
.price {
  color: var(--color-accent);
  font-weight: bold;
  margin-top: 0.5rem;
}

/* Card Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

/* About layout */
.about-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}
.about-image img {
  border-radius: 50%;
  width: 180px;
  height: 180px;
  object-fit: cover;
}
.about-text {
  flex: 1;
}

/* Offerings */
.offering {
  margin-top: 2rem;
}
.offering ul {
  list-style: disc;
  margin-left: 1.5rem;
}

/* Testimonials */
.testimonials-preview blockquote {
  background: var(--color-secondary);
  padding: 1rem;
  border-left: 4px solid var(--color-accent);
  margin: 1rem 0;
}
.testimonials-preview .author {
  display: block;
  color: var(--color-muted);
  margin-top: 0.5rem;
}

/* FAQ */
.faq-item {
  margin-bottom: 1.5rem;
}
.faq-item h3 {
  margin-bottom: 0.5rem;
}

/* Contact form */
.contact-form label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-muted);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-secondary);
  border-radius: 4px;
  background: var(--color-primary);
  color: var(--color-text);
}
.hidden {
  display: none;
}

/* CTA section */
.cta {
  text-align: center;
  margin: 3rem 0;
}

/* Footer content */
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  background-color: var(--color-secondary);
  color: var(--color-text);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

nav a {
  color: var(--color-text);
  margin-left: 1.5rem;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

nav a:hover {
  color: var(--color-accent);
}

main {
  display: block;
}

.hero {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--color-secondary);
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.hero p {
  max-width: 700px;
  margin: 0 auto 2rem auto;
  color: var(--color-muted);
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.2s ease, color 0.2s ease;
}

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

/* Specific styles for primary buttons after generic .btn to ensure text remains dark on accent background */
.btn.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-primary);
  border: none;
}
.btn.btn-primary:hover {
  background-color: var(--color-text);
  color: var(--color-primary);
}

.section {
  padding: 3rem 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.section h2 {
  margin-top: 0;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.card {
  background: var(--color-secondary);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.card p {
  margin: 0.5rem 0;
  color: var(--color-muted);
}

.testimonials {
  background: var(--color-secondary);
  border-radius: 8px;
}

blockquote {
  margin: 0;
  font-style: italic;
  line-height: 1.4;
}

.about-content img {
  border-radius: 50%;
}

footer {
  background: var(--color-secondary);
  color: var(--color-muted);
  text-align: center;
  padding: 2rem 1rem;
}

footer p {
  margin: 0.5rem 0;
}

/* Links inside content */
a {
  color: var(--color-accent);
}

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

/*
  Responsive styles
  Adjust layout and typography for smaller screens to improve mobile friendliness.
*/
@media (max-width: 768px) {
  /* Stack nav links and reduce spacing on tablets/mobile */
  header {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
    gap: 0.5rem;
  }
  nav a {
    margin-left: 0;
    margin-right: 0.5rem;
    font-size: 0.9rem;
  }
  /* Compact hero section */
  .hero {
    padding: 2rem 1rem;
  }
  .hero h1 {
    font-size: 1.8rem;
  }
  .hero p {
    font-size: 1rem;
    max-width: 100%;
  }
  /* Stack cards one per row */
  .card-grid {
    grid-template-columns: 1fr;
  }
  /* Stack about section vertically */
  .about-grid {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .about-text {
    flex: none;
    width: 100%;
  }
  .about-image {
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  /* Further reduce nav font size and stack vertically on very small screens */
  nav {
    flex-direction: column;
    align-items: flex-start;
  }
  nav a {
    display: block;
    margin: 0.25rem 0;
    font-size: 0.8rem;
  }
  .logo {
    margin-bottom: 0.5rem;
  }
  .hero h1 {
    font-size: 1.5rem;
  }
  .hero p {
    font-size: 0.9rem;
  }
}

/* Override mobile navigation after other responsive rules to ensure hamburger menu works correctly */
@media (max-width: 768px) {
  /* Hide the nav by default and display vertically when toggled */
  .nav {
    display: none;
    flex-direction: column;
    background: var(--color-secondary);
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    margin: 0;
    z-index: 99;
  }
  .nav a {
    padding: 1rem;
    margin: 0;
    border-top: 1px solid var(--color-primary);
    font-size: 0.9rem;
  }
  .menu-icon {
    display: flex;
  }
  .menu-toggle:checked + .menu-icon + .nav {
    display: flex;
  }
}