.container {
  width: 80%;
  margin: auto;
  background: #fff8dc;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  color: #ff4500;
  font-size: 28px;
}

h2 {
  color: #008000;
  font-size: 24px;
}

p {
color: #008000;
  content: ", ";
}

/*word-section, word-and-pronunciation -> frontend_scripts/script.js -> templates/english_vocabulary*/
.word-section {
  background: #f0e68c;
  padding: 5px;
  border-radius: 30px;
  margin-bottom: 5px;
  transition: transform 0.3s;
}

.word-section:hover {
  transform: scale(1.02);
}
.word-and-pronunciation{
  justify-content: flex-start; /* "left" isn't a valid value */
  align-items: center;       /* Vertical centering */
  display: block; /* Or inline-block if needed */
  flex-wrap: wrap; /* Allows child elements to wrap */
  word-break: break-word;     /* Breaks long words if needed */
  overflow-wrap: break-word;  /* Modern way to break long words */
  white-space: normal;        /* Allows text to wrap naturally */
  box-sizing: border-box;     /* Keeps padding/border inside */
  gap: 8px;                   /* Optional: space between wrapped elements */
  font-size: 1.1rem; /* Optional: make it clean and consistent */
  line-height: 1.5;
}
.word-and-pronunciation > * {
  display: inline;       /* Treats children like words */
  margin-right: 0.4em;   /* Small gap between items */
  vertical-align: middle; /* Keeps button aligned nicely */
}
.definition {
  font-size: 20px;
  color: #555;
}

.example {
  background: #f0e68c;
  font-size: 18px;
  font-style: italic;
  color: #00008b;
  border-style: solid;;
  max-width: 100%;
  word-wrap: break-word;     /* ✅ Allows long words or links to wrap */
  overflow-wrap: break-word; /* ✅ Modern equivalent for word-wrap */
  white-space: normal;       /* ✅ Allows multi-line wrapping */
  box-sizing: border-box;    /* ✅ Keeps padding/borders inside width */
}

.media {
  margin-top: 10px;
  height: auto;
  width: 50%;
  display: block;
  border-radius: 10px;
  float: right;
}

button {
  background-color: #ff4500;
  color: white;
  border: none;
  padding: 10px 15px;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
}
button:hover {
  background-color: #d63a00;
}
.pronunciation-button {
  font-size: 0.9rem;
  padding: 2px 6px;
  border: none;
  border-radius: 4px;
  background: #eee;
  cursor: pointer;
}
.pronunciation-button:hover {
  background-color: #ddd;
}
#result {
  font-size: 22px;
  font-weight: bold;
  margin-top: 20px;
}

.tab-container {
  width: 80%;
  margin: 0 auto;
}

.tabs {
  display: flex;
  cursor: pointer;
}

.tab-link {
  color: #555;
  background-color: #fff; 
  border: none;
  padding: 10px 20px;
  margin-right: 5px;
  transition: background-color 0.3s;
}

/* Hover effect for tab links */
.tab-link:hover {
  background-color: #f1f1f1;
}

/* Active tab link */
.tab-link.active {
  color: #ff4500;
  background-color: #ddd;
  border-bottom: 2px solid #fff;
}


.tab-content {
  display: none;
  padding: 20px;
  border-top: none;
}

.tab-content.active {
  display: block;
}

.details {
  margin-top: 1rem;
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 30px;
  display: none;
  /*flex-wrap: wrap;*/
  gap: 10px; /* optional spacing between children */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.details > * { /*For each child element */
  /*flex: 1 1 200px;*/ /* grow, shrink, base width */
  /*box-sizing: border-box;*/
}
.wrap{
  flex-wrap: wrap;
}
.word-properties {
  display: flex;
  gap: 40px; /* Space between related and opposites */
  flex-wrap: wrap; /* Wrap if the screen is small */
  margin-top: 10px;
}

.word-list {
  flex: 1 1 200px;
}

.inline-list {
  list-style-type: none;
  padding-left: 0;
  margin-top: 5px;
}

.inline-list li {
  display: inline-block;
  margin-right: 10px;
  background: #f0f0f0;
  padding: 5px 10px;
  border-radius: 20px;
}

.toggleDetails {
  background: none;
  border: none;
  color: #007BFF;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 1rem;
  font-size: 12px;
}
.toggleDetails:hover {
  background-color: #ddd;
}


 
/* === Navigation === */
.nav-links {
  display: flex; /* desktop */
  align-items: center;
  gap: 0.6rem;
}

.nav-links a,
.logout-btn {
  color: white;
  font-weight: 500;
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
}

.logout-btn:hover,
.nav-links a:hover {
  text-decoration: underline;
}

.nav-links {
  transition: all 0.3s ease-in-out;
}

/* === Mobile Toggle === */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
}

/* === Mobile View (under 768px) === */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    background: #0077b6;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    padding: 1rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .nav-links.show {
    display: flex; /*display: flex means show side by side; default: vertically */
    /* display: block gives the element a box-like container */
    /* display: none means do not display at all */
  }

  .nav-links a,
  .logout-btn {
    padding: 0.5rem 0;
    font-size: 1.05rem;
  }

  .nav-links form {
    display: block;
    width: 100%;
  }
}

  main { max-width:1000px; margin:2rem auto; padding:0 1rem; }
  h1,h2 { text-align:center; color:#0077b6; }
  .section { margin-bottom:3rem; }

.cards { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; }
  .card { background:white; padding:1rem 1.5rem; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.1); max-width:250px; text-align:center; transition:transform 0.2s; }
  .card:hover { transform:scale(1.03); }
  .card h2 { font-size:1.2rem; margin-bottom:0.5rem; }
  .card p { font-size:0.95rem; margin-bottom:0.8rem; }
  .card a { display:inline-block; background:#0077b6; color:white; padding:0.5rem 1rem; border-radius:6px; text-decoration:none; transition:0.3s; }
  .card a:hover { background:#005f86; }

    /* Banner / Ad Image */
    .banner {
      width: 100%;
      max-height: 250px;
      overflow: hidden;
    }

    .banner img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Section Titles */
    h2 {
      text-align: center;
      margin: 30px 0 15px;
      color: #0077b6;
    }

     /* Feedback Slider */
.testimonial-container {
    min-height: 140px; /* keeps height stable */
    padding: 1rem;
    font-size: 1.1rem;
    transition: opacity 0.6s ease-in-out;
  }
  .testimonial-text {
    font-style: italic;
    margin-bottom: 0.5rem;
  }
  .testimonial-author {
    font-weight: bold;
    color: #444;
  }
  .dots {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
.dot {
    height: 12px;
    width: 12px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .dot.active {
    background-color: #333;
  }
@keyframes fade {
  from {opacity: 0;}
  to {opacity: 1;}
}

.controls {
  margin-top: 10px;
}
    .active {
      opacity: 1 !important;
    }

    .controls button {
  background: #0077b6;
  color: #fff;
  border: none;
  padding: 6px 12px;
  margin: 0 5px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.controls button:hover {
  background: #005f86;
}

    /* Video Section */
    .video-section {
      max-width: 700px;
      margin: 0 auto 40px;
      text-align: center;
    }

    .video-section video {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    /* That ensures the video only plays inside the designated area. */
    video {
      max-width: 100%;
      max-height: 400px;   /* or whatever fits */
      width: auto;
      height: auto;
      display: block;
      margin: 0 auto;
      object-fit: contain; /* keeps aspect ratio */
    }
    @media (max-width: 768px) {
      .testimonial-container, .video-section {
        padding: 20px 15px;
      }
    }
    
  body { font-family: Arial, sans-serif;  
    margin: 0; background: #f8f9fa; color: #222; }
  
  section { text-align:center; }
  .hero { background:#caf0f8; /* height: 100vh; full screen height */  display: flex;  align-items: center;
  justify-content: center;  padding: 2rem;  box-sizing: border-box;}

.hero-content {  display: flex;  flex-direction: row;  align-items: center;  justify-content: space-between;
  max-width: 1200px;  width: 100%;  gap: 2rem;}

.hero-text {  flex: 1;  font-size: 1.2rem;}

.tagline {  font-style: italic;  color: #555;  margin: 0.5rem 0 1rem;  font-size: 1rem;}

.btn {  display: inline-block;  background: #0074cc;  color: white;  padding: 0.8rem 1.2rem;
  border-radius: 8px;  text-decoration: none;}

.hero-video {  flex: 1;  text-align: center;}

.hero-video video {  max-width: 100%;  max-height: 60vh;  border-radius: 12px;  box-shadow: 0 4px 10px rgba(0,0,0,0.2);}

.video-caption {  margin-bottom: 0.5rem;  font-weight: bold;}

/*For mobile: */
@media (max-width: 768px) {
  .hero-content {
    flex-direction: column;
  }
}
  .btn:hover { background:#005f86; }

  .features { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; margin-top:2rem; }
  .feature { background:#e0f7fa; padding:1.5rem; border-radius:12px; max-width:250px; }

.announcement-banner {
  display: block;
  background: #eef6ff;           /* light blue background */
  color: #005bb5;                /* readable blue text */
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom: 1px solid #d0e0f0;
  text-decoration: none;         /* remove link underline */
  transition: background 0.3s;
}

.announcement-banner:hover {
  background: #d9ebff;           /* slightly darker on hover */
}


/* Mobile optimization:
This is called a media query.
It tells the browser:

“Only apply the CSS inside these curly braces if the screen is 600 pixels wide or smaller.”

That means the styles inside will apply on mobiles or very small tablets, but not on laptops or desktops.
font-size: 0.85rem; → Makes the text a bit smaller so it fits nicely on phones.

display: block; → Makes the link take the full width of the container (instead of inline), so it’s easier to tap with a finger.
 */
@media (max-width: 600px) {
  .announcement-banner {
    font-size: 0.85rem;
    display: block;
  }
}

  footer { background: #0077b6; color: white; padding: 1.5rem 1rem; margin-top: 3rem; text-align: center; font-size: 0.9rem; }
  footer a { color: #cfe9ff; text-decoration: underline; }

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

      
/* === Base Header === */
header {
  background: #0077b6;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

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

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

    h1,h2 { 
      text-align:center; 
      color:#0077b6; 
    }

    .section { 
      margin-bottom:3rem; 
    }

    .cards { 
      display:flex; 
      flex-wrap:wrap; 
      gap:1.5rem; 
      justify-content:center; 
    }

    .card { 
      background:white; 
      padding:1rem 1.5rem; 
      border-radius:12px; 
      box-shadow:0 4px 12px rgba(0,0,0,0.1); 
      max-width:250px; 
      text-align:center; 
      transition:transform 0.2s; 
    }

    .card:hover { transform:scale(1.03); }

    .card h2 { font-size:1.2rem; margin-bottom:0.5rem; }
    .card p { font-size:0.95rem; margin-bottom:0.8rem; }

    .card a { 
      display:inline-block; 
      background:#0077b6; 
      color:white; 
      padding:0.5rem 1rem; 
      border-radius:6px; 
      text-decoration:none; 
      transition:0.3s; 
    }

    .card a:hover { background:#005f86; }