/*
  style.css

  This stylesheet defines the look and feel for the Subtle Energy Mechanics website.  
  The design is inspired by Seth Godin’s site with a dark left‑hand navigation, vibrant accent
  colors and clear typography.  The layout is responsive for both desktop and mobile use.
*/

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: #ffffff;
  color: #333333;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Left navigation bar */
.nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 260px;
  height: 100%;
  background: #041e42; /* dark navy inspired by Seth Godin’s site */
  color: #ffffff;
  overflow-y: auto;
  padding: 20px;
}

.nav .profile {
  text-align: center;
  margin-bottom: 20px;
}

.nav .profile img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 3px solid #fabf2a; /* golden accent rim */
}

.nav .site-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 10px;
  text-align: center;
}

.nav ul {
  ist-style: none;
  margin-top: 30px;
}

.nav ul li {
  margin-bottom: 15px;
}

.nav ul li a {
  color: #ffffff;
  font-size: 1rem;
  transition: color .3s ease;
}

.nav ul li a:hover {
  color: #fabf2a;
}

.nav .cta-button {
  display: block;
  margin-top: 30px;
  padding: 12px 20px;
  background: #fabf2a;
  color: #041e42;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
}

/* Main content area */
.main-content {
  margin-left: 280px; /* nav width + spacing */
  padding: 40px;
}

/* Hero section */
.hero {
  background: #041e42;
  color: #ffffff;
  padding: 100px 40px;
  text-align: center;
}

.hero h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: 700;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Buttons */
.button {
  display: inline-block;
  padding: 12px 30px;
  background: #fabf2a;
  color: #041e42;
  border-radius: 4px;
  font-weight: bold;
  transition: background 0.3s ease;
  cursor: pointer;
}

.button:hover {
  background: #f2b313;
}

/* Generic section styling */
.section {
  margin-bottom: 60px;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #041e42;
  font-weight: 600;
}

.section p {
  margin-bottom: 15px;
}

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

/* Testimonials styling */
.testimonial {
  margin-bottom: 30px;
  padding: 20px;
  border-left: 4px solid #fabf2a;
  background: #f9f9f9;
}

.testimonial .name {
  font-weight: bold;
  margin-top: 10px;
  color: #041e42;
}

/* Legal disclaimer */
.legal {
  font-size: 0.85rem;
  color: #666666;
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

/* Video grid layout */
/*
  To display multiple video embeds side by side on larger screens, we define a
  flexible grid.  Each video wrapper takes up roughly half the available
  width, and the grid wraps onto new lines as needed.  On smaller
  viewports (768px and below) the videos stack vertically for better
  readability.  Gap spacing provides consistent separation between videos.
*/
.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.video-grid .video-wrapper {
  flex: 1 1 calc(50% - 10px);
}

@media screen and (max-width: 768px) {
  .video-grid .video-wrapper {
    flex: 1 1 100%;
  }
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .nav {
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nav .profile {
    margin-bottom: 10px;
  }
  .nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .nav ul li {
    margin: 10px 15px;
  }
  .main-content {
    margin-left: 0;
    padding: 20px;
  }
  .hero {
    padding: 60px 20px;
  }
}

/* Increase font sizes for navigation links and main content paragraphs */
.nav ul li a {
  font-size: 1.3rem;
}

.main-content p {
  font-size: 1.2rem;
}