/*
  Stuttering Freely (final version) – style sheet

  We use a clean, calm palette with teal and green accents to evoke growth and calm.
  The site is fully responsive and mobile‑friendly. Important words are emphasised with
  bold styling in the HTML content rather than CSS. Video placeholders are styled
  consistently. Navigation sticks to the top for easy access to other sections.
*/

/* Base styles */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #1e2d24;
  background-color: #f8fbfa;
}

header {
  background-color: #e6f2ef;
  color: #1e2d24;
  padding: 2rem 1rem;
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 2.4rem;
}

header p.lead {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  color: #3c5c49;
}

nav {
  background-color: #2f6f4e;
  color: #ffffff;
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

nav li {
  margin: 0;
}

nav a {
  display: block;
  padding: 1rem 1.2rem;
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
}

nav a:hover,
nav a:focus {
  background-color: #3a9679;
}

main {
  padding: 2rem 1rem;
  max-width: 900px;
  margin: 0 auto;
}

main h2 {
  margin-top: 2rem;
  color: #2f6f4e;
}

main h3 {
  margin-top: 1.5rem;
  color: #3c5c49;
}

main p,
main ul,
main ol {
  margin-bottom: 1rem;
  font-size: 1rem;
}

main ul {
  list-style: disc;
  padding-left: 2rem;
}

main li {
  margin-bottom: 0.5rem;
}

.video-placeholder {
  border: 2px dashed #2f6f4e;
  padding: 1rem;
  margin: 1rem 0;
  text-align: center;
  font-style: italic;
  color: #2f6f4e;
  background-color: #f0faf6;
}

.cta {
  display: inline-block;
  background-color: #3a9679;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 1rem;
}

.cta:hover {
  background-color: #2f6f4e;
}

footer {
  background-color: #e6f2ef;
  color: #3c5c49;
  text-align: center;
  padding: 1.5rem 1rem;
  margin-top: 3rem;
}

footer p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

/* Language switcher */
.lang-switcher {
  background-color: #e6f2ef;
  text-align: right;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.lang-switcher a {
  color: #2f6f4e;
  margin-left: 1rem;
  text-decoration: none;
  font-weight: bold;
}

.lang-switcher a:hover {
  text-decoration: underline;
}

/* Placeholder images for team profiles */
/* Larger profile images with subtle fade-in animation */
/* Enlarged profile placeholder and subtle fade in for a polished look */
/* Enlarged profile placeholders for an elegant, professional look */
.placeholder-img {
  display: inline-block;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: #e6f2ef;
  margin-right: 1rem;
  vertical-align: middle;
  animation: fadeIn 1s ease-in-out;
}

/* Profile images for team members */
.profile-img {
  display: inline-block;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 1rem;
  vertical-align: middle;
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Forms on participate page */
.participant-form input,
.participant-form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.participant-form button {
  background-color: #2f6f4e;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.participant-form button:hover {
  background-color: #3a9679;
}

/* Participant list */
.participant-list {
  margin-top: 2rem;
}

.participant-list table {
  width: 100%;
  border-collapse: collapse;
}

.participant-list th,
.participant-list td {
  border: 1px solid #ddd;
  padding: 0.5rem;
  text-align: left;
  font-size: 0.9rem;
}

.participant-list th {
  background-color: #f0faf6;
  color: #2f6f4e;
}

.participant-list button {
  background-color: #c62828;
  color: #fff;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.8rem;
}

.participant-list button:hover {
  background-color: #b71c1c;
}

/* Webinars table */
.webinar-table {
  margin-top: 1.5rem;
}

.webinar-table table {
  width: 100%;
  border-collapse: collapse;
}

.webinar-table th,
.webinar-table td {
  border: 1px solid #ddd;
  padding: 0.5rem;
  text-align: left;
  font-size: 0.9rem;
}

.webinar-table th {
  background-color: #f0faf6;
  color: #2f6f4e;
}