/* This is the CSS, or the appearance of your website.
   You can change the look of your website without touching any of the HTML code
   by using CSS. You can learn more at https://www.w3schools.com/css/
   You can add more CSS rules to add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* CSS Variables for Clean, Easy-on-the-Eyes Theme */
:root {
  --bg-color: #f8f9fa;
  --text-color: #2c3e50;
  --light-text-color: #34495e;
  --border-color: #e9ecef;
  --nav-border-color: #dee2e6;
  --link-color: #3498db;
  --link-hover-color: #2980b9;
  --nav-link-hover-bg: #3498db;
  --nav-link-hover-color: white;
  --widget-border-color: #dee2e6;
  --widget-bg-color: #ffffff;
  --gallery-fallback-color: #adb5bd;
  --discord-border-color: #7289da;
  --button-bg-color: #17a2b8;
  --button-disabled-bg: #6c757d;
  --button-disabled-text: #adb5bd;
}

body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  font-family: Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-align: center;
  line-height: 1.6;
}

/* Force light theme globally */
html, 
html[data-theme="light"],
body[data-theme="light"] {
  background-color: #f8f9fa !important;
  color: #2c3e50 !important;
}

/* Header container that holds both logo and title */
.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
  min-height: 60px;
  text-align: center;
  width: 100%;
}

/* Logo positioned absolutely in top-left */
.corner-logo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* Main title styling */
h1 {
  color: var(--text-color);
  text-align: center;
  margin: 0;
  font-size: 2em;
  font-weight: bold;
}

h2, h3, h4, h5, h6 {
  color: var(--text-color);
  text-align: center;
  margin: 1em 0 0.5em 0;
}

p {
  color: var(--light-text-color);
  text-align: center;
  margin: 1em 0;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* Navigation styling */
nav {
  text-align: center;
  padding: 15px 0;
  margin: 20px 0;
}

nav a {
  color: var(--link-color);
  padding: 8px 15px;
  margin: 0 5px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

nav a:hover {
  background-color: var(--nav-link-hover-bg);
  color: var(--nav-link-hover-color);
}

/* Content container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Image styling - no borders for all images */
.center img, 
img.center {
  display: block;
  margin: 20px auto;
  max-width: 100%;
  height: auto;
  border: none;
}

/* Additional selector to ensure no borders on any images */
img {
  border: none;
}

/* Dictionary icons specific styling */
.center .icon-item img,
.center #dictionary-content img,
#dictionary-content img,
.icon-item img,
body img[src*="SVG_Icons"] {
  border: none !important;
  margin: 0 !important;
}

/* Example container styling */
.example-container {
  background-color: var(--widget-bg-color);
  border: 1px solid var(--widget-border-color);
  border-radius: 8px;
  padding: 20px;
  margin: 20px auto;
  max-width: 800px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Widget wrapper styling */
.widget-wrapper {
  background-color: var(--widget-bg-color);
  border: 1px solid var(--widget-border-color);
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Button styling */
button {
  background-color: var(--button-bg-color);
  color: white;
  border: 1px solid var(--button-bg-color);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  transition: all 0.3s ease;
}

button:hover {
  background-color: var(--link-hover-color);
  border-color: var(--link-hover-color);
}

button:disabled {
  background-color: var(--button-disabled-bg);
  color: var(--button-disabled-text);
  border-color: var(--button-disabled-bg);
  cursor: not-allowed;
}

#duplicate-selected-btn {
  background-color: var(--button-bg-color);
  color: white;
  border-color: var(--button-bg-color);
}

#duplicate-selected-btn:disabled {
  background-color: var(--button-disabled-bg);
  color: var(--button-disabled-text);
  border-color: var(--button-disabled-bg);
}

/* Tab styling for dictionary */
.tab-container {
  background-color: var(--widget-bg-color);
  border: 1px solid var(--widget-border-color);
  border-radius: 8px;
  overflow: hidden;
}

.tab-scroll-area {
  max-height: 120px;
  overflow-y: auto;
  border-bottom: 1px solid var(--widget-border-color);
}

.tab {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s ease;
}

.tab:hover {
  background-color: var(--bg-color);
}

.tab.active {
  background-color: var(--link-color);
  color: white;
}

/* Dictionary specific styling - maintain light theme */
.dictionary-page {
  background-color: white !important;
  color: #2c3e50 !important;
}

.dictionary-page h1,
.dictionary-page h2,
.dictionary-page h3,
.dictionary-page h4,
.dictionary-page h5,
.dictionary-page h6 {
  color: #2c3e50 !important;
}

.dictionary-page p {
  color: #34495e !important;
}

.dictionary-page a {
  color: #3498db !important;
}

.dictionary-page .widget-wrapper {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
}

/* Dictionary List Button Styling */
#show-dictionary-btn {
  padding: 18px 36px !important;
  background: #007acc !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 18px !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
  min-width: 250px !important;
  box-shadow: 0 2px 8px rgba(0,122,204,0.3) !important;
  transition: all 0.3s ease !important;
}

#show-dictionary-btn:hover {
  background: #0066aa !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,122,204,0.4) !important;
}

#show-dictionary-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(0,122,204,0.3) !important;
}

/* Mobile responsive for dictionary button */
@media (max-width: 480px) {
  #show-dictionary-btn {
    min-width: 200px !important;
    font-size: 16px !important;
    padding: 16px 30px !important;
  }
}

/* Size mode buttons styling */
#half-size-btn,
#three-quarters-btn {
  background: #d0d0d0 !important;
  border: 1px solid #999 !important;
  color: #333 !important;
  font-weight: 500 !important;
}

#half-size-btn:hover,
#three-quarters-btn:hover {
  background: #bbb !important;
  border-color: #888 !important;
}

/* Active state for size mode buttons */
#half-size-btn.active,
#three-quarters-btn.active {
  background: #007acc !important;
  color: white !important;
  border-color: #007acc !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    padding: 15px;
  }
  
  .corner-logo {
    position: static;
    margin-bottom: 10px;
  }
  
  nav a {
    display: block;
    margin: 5px 0;
  }
  
  .gallery-container {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
  
  .container {
    padding: 0 15px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.5em;
  }
  
  .gallery-container {
    grid-template-columns: 1fr 1fr;
  }
  
  .example-container,
  .widget-wrapper {
    margin: 15px 10px;
    padding: 15px;
  }
}

a {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Gallery styling */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px 0;
}

.gallery-item {
  background-color: var(--widget-bg-color);
  border: 1px solid var(--widget-border-color);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Discord widget styling */
.discord-widget {
  border-color: var(--discord-border-color);
}

/* Utility classes */
.text-center {
  text-align: center;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }

/* Accessibility improvements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus styles for better accessibility */
a:focus,
button:focus,
.tab:focus {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .corner-logo,
  nav {
    display: none;
  }
  
  body {
    background-color: white;
    color: black;
  }
  
  a {
    color: black;
    text-decoration: underline;
  }
}

/* Special handling for transparent PNGs - ensure they remain unchanged */
img[src$=".png"], img[src*=".png"], 
.center img[src$=".png"], .center img[src*=".png"],
img.center[src$=".png"], img.center[src*=".png"] {
  filter: none !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
}

/* Widget styling adjustments */
.chatango-container, #chatango-container {
  border-color: var(--widget-border-color) !important;
  background: var(--widget-bg-color) !important;
  position: relative !important;
}

/* Chatango widget compatibility fixes */
#chatango-container iframe,
#chatango-container embed,
#chatango-container object {
  width: 100% !important;
  height: 100% !important;
  min-height: 250px !important;
  border: none !important;
  display: block !important;
}

/* Mobile-specific Chatango adjustments */
@media (max-width: 768px) {
  #chatango-container {
    min-height: 300px !important;
  }
  
  #chatango-container > div {
    height: 300px !important;
    min-height: 250px !important;
  }
  
  #chatango-container iframe,
  #chatango-container embed,
  #chatango-container object {
    min-height: 250px !important;
    max-height: 300px !important;
  }
}

/* Fallback styling for when Chatango is blocked */
.chatango-fallback {
  display: none;
  padding: 30px 20px;
  text-align: center;
  background: var(--widget-bg-color);
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  margin: 20px 0;
}

.chatango-fallback.show {
  display: block !important;
}

.chatango-fallback h4 {
  margin: 0 0 15px 0;
  color: var(--text-color);
  font-size: 18px;
}

.chatango-fallback p {
  margin: 0 0 20px 0;
  color: var(--light-text-color);
  font-size: 14px;
}

.chatango-fallback a {
  display: inline-block;
  padding: 12px 24px;
  background: var(--button-bg-color);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.chatango-fallback a:hover {
  background: var(--link-hover-color);
}

/* Override any inline dark theme styles */
*[style*="background: #4a4a4a"] {
  background: var(--widget-bg-color) !important;
}

*[style*="background: #1a1a1a"] {
  background: var(--bg-color) !important;
}

*[style*="color: #f0f0f0"] {
  color: var(--text-color) !important;
}

*[style*="color: #e0e0e0"] {
  color: var(--text-color) !important;
}