/* General Body and Container Styling */
body {
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f0f2f5; /* Light grey background for a modern look */
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the editor horizontally */
  min-height: 100vh; /* Full viewport height */
}

h2 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 2em; /* Slightly larger heading */
  text-align: center;
}

#myEditor {
  width: 100%;
  max-width: 800px; /* Max width for readability on large screens */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  overflow: hidden; /* Ensures rounded corners are applied */
}

/* Toolbar Styling */
.toolbar-container {
  display: flex;
  flex-wrap: wrap; /* Allow buttons to wrap to next line on small screens */
  align-items: center;
  gap: 8px; /* Increased gap for better spacing */
  background-color: #e9ecef; /* Slightly darker background than editor */
  padding: 10px 15px; /* More padding */
  border-bottom: 1px solid #dee2e6; /* Separator from content */
  /* No border-radius here, as it's handled by #myEditor */
}

.editor-toolbar button {
  padding: 8px 12px; /* More comfortable padding */
  border: 1px solid #ced4da; /* Subtle border for definition */
  background: #f8f9fa; /* Lighter background for buttons */
  color: #495057; /* Darker text for better contrast */
  cursor: pointer;
  font-size: 1rem; /* Relative font size */
  border-radius: 5px; /* Slightly rounded corners for buttons */
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease; /* Smooth transitions */
  min-width: 38px; /* Ensure buttons have a minimum width */
}

.editor-toolbar button:hover {
  background-color: #e2e6ea; /* Darker hover state */
  border-color: #b8c2cc;
  transform: translateY(-1px); /* Slight lift effect */
}

.editor-toolbar button:active {
  background-color: #d1d6db; /* Even darker on active */
  border-color: #a7b0b9;
  transform: translateY(0); /* Press effect */
}

/* Styling for Active Toolbar Buttons */
.editor-toolbar button.active {
  background-color: #007bff; /* Blue background to indicate active state */
  color: white; /* White text for contrast */
  border-color: #007bff;
  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3); /* Subtle blue shadow */
  transform: translateY(-1px); /* Keep the subtle lift */
}

.editor-toolbar button.active:hover {
  background-color: #0056b3; /* Darker blue on hover for active state */
  border-color: #0056b3;
}

/* Specific button icons/text for better alignment */
.editor-toolbar button b,
.editor-toolbar button i,
.editor-toolbar button u {
  display: inline-block; /* Helps with vertical alignment if needed */
  vertical-align: middle;
}

/* Styling for Select dropdowns (Font Family, Font Size) */
.editor-toolbar select {
  padding: 7px 10px; /* Slightly less padding than buttons */
  border: 1px solid #ced4da;
  background-color: #f8f9fa;
  color: #495057;
  border-radius: 5px;
  font-size: 0.95rem; /* Slightly smaller font for dropdowns */
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 120px; /* Minimum width for dropdowns */
  /* Remove default arrow in some browsers for more custom look, then add custom */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  padding-right: 28px; /* Make space for the custom arrow */
}

.editor-toolbar select:hover {
  border-color: #b8c2cc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle shadow on hover */
}

.editor-toolbar select:focus {
  outline: none;
  border-color: #007bff; /* Highlight on focus */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Focus ring effect */
}

/* Ensure options are readable */
.editor-toolbar select option {
  padding: 5px;
}

/* Editor Content Styling */
.editor-content {
  border: none; /* Border is now on #myEditor */
  padding: 15px 20px; /* More internal padding */
  min-height: 250px; /* Increased min-height for better editing experience */
  outline: none; /* Remove default focus outline */
  resize: vertical; /* Allow vertical resizing by user */
  overflow-y: auto; /* Enable scroll if content overflows vertically */
  tab-size: 4; /* Standard tab size */
}

/* Styles for elements created by the editor */
.editor-content strong {
  font-weight: bold;
  color: #212529; /* Ensure strong is clearly visible */
}

.editor-content em {
  font-style: italic;
  color: #212529; /* Ensure emphasis is clearly visible */
}

.editor-content u { /* Add basic style for <u> tag if you use it */
  text-decoration: underline;
}

.editor-content a {
  color: #007bff; /* Standard link blue */
  text-decoration: none;
}

.editor-content a:hover {
  text-decoration: underline;
}

.editor-content img {
  max-width: 100%;
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove extra space below image */
  margin: 10px 0; /* Add some margin around images */
  border-radius: 4px; /* Slightly rounded corners for images */
}

.editor-content ul,
.editor-content ol {
  padding-left: 25px; /* Indent lists */
  margin-top: 10px;
  margin-bottom: 10px;
}

.editor-content li {
  margin-bottom: 5px;
}

.editor-content h1 {
  font-size: 1.8em; /* Slightly smaller H1 to fit content better, but still prominent */
  margin: 15px 0 10px; /* Adjusted margins */
  color: #2c3e50;
  border-bottom: 1px solid #eee; /* Subtle bottom border for headings */
  padding-bottom: 5px;
}

.editor-content blockquote {
  border-left: 4px solid #007bff; /* Blue border for quote */
  margin: 15px 0;
  padding: 10px 15px;
  background-color: #eaf6ff; /* Light blue background for quote */
  font-style: italic;
  color: #555;
  border-radius: 4px;
}

/* Get HTML Button Styling */
body > button { /* Target the button directly under body */
  background-color: #28a745; /* Green button */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 20px;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body > button:hover {
  background-color: #218838;
  transform: translateY(-1px);
}

body > button:active {
  background-color: #1e7e34;
  transform: translateY(0);
}


/* Responsive Design - Media Queries */

/* For smaller screens (e.g., mobile phones) */
@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
  }

  #myEditor {
    border-radius: 4px; /* Slightly less rounded for smaller screens */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .toolbar-container {
    padding: 8px 10px;
    gap: 6px;
    justify-content: center; /* Center buttons when they wrap */
  }

  .editor-toolbar button {
    padding: 6px 10px;
    font-size: 0.9rem;
    min-width: 32px;
  }

  .editor-toolbar select {
    min-width: unset; /* Allow select to shrink on small screens */
    width: auto; /* Adjust width dynamically */
    font-size: 0.9rem;
    padding: 6px 24px 6px 10px; /* Adjust padding for smaller font and arrow */
    background-position: right 6px center; /* Adjust arrow position */
  }

  .editor-content {
    padding: 10px 15px;
    min-height: 200px;
  }

  .editor-content h1 {
    font-size: 1.5em;
  }
}

/* For even smaller screens (e.g., very small phones) */
@media (max-width: 480px) {
  body {
    padding: 5px;
  }

  h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
  }

  .toolbar-container {
    padding: 6px 8px;
    gap: 4px;
  }

  .editor-toolbar button {
    padding: 5px 8px;
    font-size: 0.85rem;
  }

  .editor-toolbar select {
    font-size: 0.85rem;
    padding: 5px 22px 5px 8px;
    background-size: 10px;
    background-position: right 5px center;
  }

  .editor-content {
    padding: 8px 10px;
    min-height: 180px;
  }
}