/* style.css */

html {
  font-size: 87.5%; /* This effectively makes 1rem = 14px (from browser default 16px). */
                     /* You can try 93.75% for 15px, or 75% for 12px, etc. */
}
/* CSS Variables for theming */
:root {
  --background-color: #ecf0ef;
  --text-color: #333;
  --navbar-bg: #d8dcdb; /* Light grey accent */
  --navbar-link-hover: #c7cdcb;
  --card-bg: #ffffff;
  --card-border: #ddd;
  --card-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.5);
  --card-hover-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15); 
  --active-card-bg: #eee;
  --active-card-border: #bbb;
  --active-card-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1), 2px 2px 2px rgba(0, 0, 0, 0.5);
  --footer-bg: #e0e4e3;
  --dark-mode-button-bg: #888;
  --dark-mode-button-color: #fff;
  /* Specific for detailsb-category page */
  --dropdown-bg: #ffffff;
  --dropdown-border: #ddd;
  --dropdown-hover-bg: #e0e0e0;
  --table-header-bg: #f0f0f0;
  --table-row-even-bg: #f9f9f9;
  --note-bg: #fff8dc;
}

body.dark-mode {
  --background-color: #2c2c2c;
  --text-color: #f4f7f6;
  --navbar-bg: #4a4a4a; /* Darker grey accent */
  --navbar-link-hover: #666;
  --card-bg: #3a3a3a;
  --card-border: #555;
  --card-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.5);
  --card-hover-shadow: 0px 4px 4px rgba(255, 255, 255, 0.08);
  --active-card-bg: #555;
  --active-card-border: #888;
  --active-card-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.1), 2px 2px 2px rgba(255, 255, 255, 0.5);
  --footer-bg: #3a3a3a;
  --dark-mode-button-bg: #bbb;
  --dark-mode-button-color: #333;
  /* Specific for sub-category page */
  --dropdown-bg: #3a3a3a;
  --dropdown-border: #555;
  --dropdown-hover-bg: #555;
  --table-header-bg: #4a4a4a;
  --table-row-even-bg: #333333;
  --note-bg: #483000;
}

/* General styles */
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  padding-top: 55px; /* <--- Adjust for .navbar's actual height */
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.2; /* A unitless value is best here. 1.4 means 1.4 times the font-size. */
                    /* Default is often 'normal' which can be ~1.2 to 1.6, depending on font/browser. */
                    /* 1.4 makes it slightly tighter and works well with smaller fonts. */
}

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

/* Navbar styles */
.navbar {
  background-color: var(--navbar-bg);
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1000; /* Ensure it stays above other content */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.5em;
  color: var(--text-color);
  text-decoration: none;
}

.navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 25px;
}

.navbar-nav li {
  position: relative; /* Needed for sub-menu positioning */
}

@media (min-width: 769px) { /* Applies only to screens 769px wide and up */
  .navbar-nav {
    margin-right: 40px;
  }
}

.navbar-nav li a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.3s ease;
  display: block; /* Make links block for easier padding/hover */
  padding: 5px 0; /* Add some padding */
}

.navbar-nav li a:hover {
  /*color: var(--navbar-link-hover);*/
  font-weight: bold;
}

/* Sub-menu styles */
.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%; /* Position below the parent link */
  left: 0;
  background-color: var(--navbar-bg); /* Use navbar background for consistent look */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  min-width: 160px;
  z-index: 1001;
  display: none; /* Hidden by default */
  border-radius: 5px;
}

.sub-menu li a {
  padding: 10px 15px;
  white-space: nowrap; /* Prevent wrapping */
  color: var(--text-color); /* Ensure text color is inherited/visible */
  background-color: var(--navbar-bg); /* Explicitly set background for sub-menu items */
}

.sub-menu li a:hover {
  background-color: var(--navbar-link-hover);
  color: var(--text-color); /* Maintain text color on hover */
}

/* Show sub-menu on hover */
.navbar-nav li:hover > .sub-menu {
  display: block;
}

/* Second level sub-menu */
.sub-menu .sub-menu {
  top: 0; /* Position at the same level as parent item */
  left: 100%; /* Position to the right of parent item */
}

/* Dark mode toggle button */
.dark-mode-button {
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  background-color: var(--dark-mode-button-bg);
  color: var(--dark-mode-button-color);
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  margin-left: 10px;
}

.dark-mode-button:hover {
  opacity: 0.9;
}

body.dark-mode .dark-mode-button {
  background-color: var(--text-color);
  color: var(--background-color);
  border: 1px solid var(--card-border);
}

/* Mobile hamburger menu */
.menu-toggle {
  display: none; /* Hidden on desktop */
  flex-direction: column;
  cursor: pointer;
  gap: 4px; /* Space between the lines */
}

.menu-toggle .bar {
  width: 25px;
  height: 3px;
  background-color: var(--text-color);
  transition: all 0.3s ease-in-out;
  border-radius: 2px;
}

/* When menu is active, transform bars into X */
.menu-toggle.active .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active .bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* Main content area for sub-category page */
.main-content {
  flex: 1;
  padding: 40px 20px;
  margin: 0 auto; /* This will center the .main-content block on wide screens */
  max-width: 900px; /* <--- Constrains the width of the main content area on desktop */
  min-width: 768px; /* <--- ADD THIS LINE: Sets a minimum width for desktop */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Mobile-Specific Styles (applies to screens 768px wide or less) --- */
@media (max-width: 768px) {
  .navbar-nav {
      display: none; /* Hide desktop nav by default on mobile */
      flex-direction: column;
      width: 100%;
      background-color: var(--navbar-bg);
      position: absolute;
      top: 55px; /* Below the fixed navbar */
      left: 0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 10px 0;
      gap: 0; /* Remove gap for vertical stacking */
  }

  .navbar-nav.active {
      display: flex; /* Show mobile nav when active */
  }

  .navbar-nav li {
      width: 100%;
      text-align: center;
      border-bottom: 1px solid var(--card-border); /* Separator for mobile links */
  }

  .navbar-nav li:last-child {
      border-bottom: none;
  }

  .navbar-nav li a {
      padding: 15px 20px; /* Larger tap area for mobile */
  }

  /* Hide dark mode button within main nav on mobile, move it outside if desired */
  .navbar-nav li .dark-mode-button {
      width: calc(100% - 40px); /* Adjust width to fit padding */
      margin: 10px 20px; /* Center button and add vertical spacing */
  }
  
  .menu-toggle {
      display: flex; /* Show hamburger on mobile */
  }

  /* Sub-menu on mobile */
  .sub-menu {
      position: static; /* Stack vertically on mobile */
      display: none; /* Hidden by default */
      box-shadow: none;
      border-radius: 0;
      background-color: var(--dropdown-bg); /* Use dropdown bg for consistency */
      width: 100%;
  }

  .sub-menu li a {
      padding-left: 30px; /* Indent sub-menu items */
      background-color: var(--dropdown-bg); /* Ensure background is set for mobile sub-menu items */
  }
  
  /* Show sub-menus when parent is clicked (or toggled by JS) */
  .navbar-nav li.active > .sub-menu {
      display: block;
  }

  .main-content {
      max-width: 100%; /* <--- Overrides max-width to make it fill the screen on mobile */
      min-width: unset; /* <--- IMPORTANT: Unset min-width for mobile, so it can shrink */
      margin: 0;        /* <--- Removes the auto margins on mobile, allowing it to go edge-to-edge */
      padding: 20px 10px; /* Optional: Adjust padding for mobile screens if desired */
      align-items: stretch; /* <--- NEW! Makes content items stretch to fill the mobile screen's width */
  }
}

.category-header {
  width: 100%;
  display: flex;
  flex-direction: row; /* Default: Arrange items horizontally for desktop */
  justify-content: space-between;
  align-items: center;
  gap: 30px; /* Space between the heading and dropdown on mobile */
  margin-bottom: 8px;
  padding-bottom: 12px;
  /*border-bottom: 1px solid var(--card-border);*/
}

.category-header h1 {
  margin: 0;
  font-size: 1.8em;
  color: var(--text-color);
  white-space: nowrap; /* Prevent heading from wrapping on desktop */
  text-align: left;    /* Default text alignment for h1 on desktop */
}

/* Dropdown menu styles */
.main-category-dropdown {
  position: relative;
  flex-shrink: 0; /* Prevents the dropdown from shrinking if space is tight */
}

.main-category-dropdown select {
  padding: 8px;
  border-radius: 5px;
  border: 1px solid var(--dropdown-border);
  background-color: var(--dropdown-bg);
  color: var(--text-color);
  font-size: 1em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
	box-sizing: border-box; /* Ensures padding and border are included in the width calculation */
}

body.dark-mode .main-category-dropdown select {
 background-image: url('data:image/svg+xml;utf8,<svg fill="%23f4f7f6" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
}

.main-category-dropdown select option {
  background-color: var(--dropdown-bg);
  color: var(--text-color);
}

/* Media Query for Mobile screens (max-width: 767px) */
@media (max-width: 768px) {
  .category-header {
      flex-direction: column; /* Stack items vertically on mobile */
      justify-content: center; /* Center items vertically when stacked */
      align-items: center;    /* Center items horizontally when stacked */
      gap: 15px;              /* Adjust space between heading and dropdown for mobile */
  }

  .category-header h1 {
      white-space: normal; /* Allow heading to wrap on mobile */
      text-align: center;  /* Center the heading text on mobile */
  }

  .main-category-dropdown {
  		flex-direction: row; /* keep text and dropdown together */
      /*width: 100%;*/ /* Make the dropdown container take full width on mobile */
      text-align: center; /* Center the select element if it's smaller than its container */
  }

  .main-category-dropdown select {
      /*width: 100%;*/ /* Make the select element itself take full width of its parent on mobile */
  }
}



/* Big Collapsible Panel */
.section-panel summary {
  font-weight: bold;
  font-size: 1.2em;
  margin: 4px;
  padding: 4px 8px 4px 0px;
  color: var(--text-color);
  cursor: pointer;
}

.section-panel summary span {
  margin-left: 0.5em; /* creates space between triangle and text */
  display: inline-block;
}

.visually-hidden { /*for accessiblity */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* Table styles */
.vocabulary-table-container {
  width: 100%;
  overflow-x: auto;
  margin-top: 0px;
  margin-bottom: 32px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
}

th {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-color);
  background-color: var(--table-header-bg);
  font-weight: bold;
}

td {
  padding: 8px 8px;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-color);
  position: relative;
  padding-left: 36px; /* Adjust as needed for padding + button width */
}


tr:last-child td {
  border-bottom: none;
}

tbody tr:nth-child(even) {
  background-color: var(--table-row-even-bg);
}

/* Speaker button styles */
.speaker-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1em; /* Slightly larger emoji */
  color: var(--text-color); /* Inherit text color */
  padding: 5px; /* Increase clickable area */
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
  
  position: absolute;
  left: 6px; /* Adjust as needed for desired spacing from left edge */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for button's own height to perfectly center */
  z-index: 1; /* Ensure the button is on top */
}

.speaker-button:hover {
  background-color: rgba(0, 0, 0, 0.1); /* Light hover effect */
}

body.dark-mode .speaker-button:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Dark mode hover effect */
}

/* Example Sentences Section Styles */
.example-sentences-section {
  width: 100%; /* Take full width of main content */
  overflow-x: auto;
  /* max-width: 900px; Limit width for readability, similar to table */
  margin-top: 0px; /* original: 40px */ 
  margin-bottom: 12px;
  padding: 0px; /* original: 25px */
  /*background-color: var(--card-bg);*/
  /*border: 1px solid var(--card-border);*/
  /*border-radius: 8px;*/
  /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);*/
}

/* Styles for the view options (radio buttons) */
.example-view-options {
  margin-bottom: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.example-view-options label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-color);
  font-weight: 500;
}

/* RADIO BUTTON BASE STYLES */
.example-view-options input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  
  /* Unselected State - Light Mode */
  border: 2px solid var(--card-border); /* Consistent border */
  background-color: var(--card-bg); /* White background in light mode */
  box-shadow: var(--card-shadow);
}

/* RADIO BUTTON SELECTED STATE - LIGHT MODE */
.example-view-options input[type="radio"]:checked {
  border: 4px solid var(--active-card-border); /* Accent border */
  background-color: var(--active-card-bg); /* Accent fill */
  box-shadow: var(--active-card-shadow);
}

.example-view-options input[type="radio"]:checked::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: var(--card-bg); /* Inner dot color (white) */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* RADIO BUTTON UNSELECTED STATE - DARK MODE */
body.dark-mode .example-view-options input[type="radio"] {
  border-color: var(--card-border); /* Ensure visible border in dark mode */
  background-color: var(--card-bg); /* Dark card background */
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.1); /* Dark mode shadows */
}

/* RADIO BUTTON SELECTED STATE - DARK MODE */
body.dark-mode .example-view-options input[type="radio"]:checked {
  border-color: var(--text-color); /* Lightest color for border in dark mode for strong contrast */
  background-color: var(--text-color); /* Lightest color for fill in dark mode for strong contrast */
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2); /* Dark mode selected shadows */
}

body.dark-mode .example-view-options input[type="radio"]:checked::before {
  background: var(--background-color); /* Uses the darkest background color for the inner dot in dark mode, ensuring contrast */
}


/* Styles for the two layout containers */
.example-sentences-container {
  padding: 8px;
}

/* New styles for example groups */
.example-group {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px;
  background-color: var(--table-row-even-bg); /* Use table row background for outer container */
  padding-bottom: 16px;
  margin-bottom: 8px; /* Space between the two content areas if both were visible */
}

.example-group:last-child {
  margin-bottom: 20px; /* Space between example sentence sets */
  padding-bottom: 15px;
  /*border-bottom: 1px dashed var(--card-border);*/ /* Subtle separator */
}

.example-group .lang {
  font-weight: bold;
  margin-top: 0.4em;
  margin-bottom: 0.8em;
}

.example-group p {
  position: relative; /* For speaker button positioning */
  padding: 4px 15px 4px 36px; /* Adjust padding for speaker button on left - top right bottom left */
  margin: 0; /* Remove default paragraph margins */
  margin-bottom: 5px; /* Space between lines within a group */
  background-color: var(--table-row-even-bg); /* Subtle background */
  /*border-radius: 5px;*/
  /*border: 1px solid var(--card-border);*/
  color: var(--text-color);
  display: flex; /* To align button and text nicely */
  align-items: center;
}

.example-group p:last-child {
  margin-bottom: 0; /* No margin after the last paragraph in a group */
}


/* Special notes */
.note {
  background-color: var(--note-bg);
  color: var(--text-color);
}


/* Specific rule for speaker buttons within example groups */
.example-group p .speaker-button {
  left: 0px; /* Align to the left inside the p */
}

/* Utility class to hide elements */
.hidden {
  display: none !important;
}


/* Footer styles */
.footer {
  background-color: var(--footer-bg);
  color: var(--text-color);
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.footer a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: bold;
}