/*
  style.css for JSON Converter Site
  ---------------------------------
  This stylesheet defines the look and feel of the JSON Converter site.  It uses
  modern CSS features like flexbox and variables to create a clean, responsive
  layout.  The colours and typography were chosen to be easy on the eyes while
  providing enough contrast for code snippets and controls.  No external fonts
  are loaded to keep the site fast and private.
*/

/* Root variables for easy theming */
:root {
  --primary: #007acc;
  --secondary: #005a9c;
  --background: #f7f8fa;
  --surface: #ffffff;
  --text: #333333;
  --muted: #666666;
  --border: #e0e0e0;
  --code-bg: #f0f0f0;
  --code-border: #dcdcdc;
  --success: #008000;
  --error: #c00;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  color: var(--text);
  background-color: var(--background);
  line-height: 1.5;
}

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

header {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
}

.logo {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 1.25rem;
}
.brace {
  font-family: monospace;
  font-weight: bold;
  color: var(--primary);
  margin-right: 0.25rem;
}

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

nav li {
  margin-left: 1rem;
}

nav a {
  color: var(--text);
  font-weight: 500;
  padding: 0.25rem 0;
}
nav a:hover {
  color: var(--primary);
}

.hero {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 2rem 1rem;
}

.hero h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
}
.hero p {
  margin: 0;
  color: var(--muted);
  max-width: 700px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* Tool Section */
.tool {
  background-color: var(--background);
  padding: 2rem 1rem;
}
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: center;
}
.controls label {
  margin-right: 0.25rem;
}
.controls select,
.controls button,
.controls input[type="file"] {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.9rem;
  background-color: var(--surface);
  cursor: pointer;
}
.controls button {
  background-color: var(--primary);
  color: #fff;
  border: none;
}
.controls button:hover {
  background-color: var(--secondary);
}
.controls input[type="file"] {
  background-color: var(--surface);
  color: var(--text);
}

.textarea-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
#inputArea {
  width: 100%;
  height: 200px;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9rem;
  resize: vertical;
}

#outputArea {
  width: 100%;
  min-height: 200px;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9rem;
  background-color: var(--code-bg);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Syntax highlighting */
#outputArea .string { color: #a31515; }
#outputArea .number { color: #098658; }
#outputArea .boolean { color: #0000ff; }
#outputArea .null { color: #008080; }
#outputArea .key { color: #0451a5; }

/* Convert section */
.convert-section {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 2rem;
}
.convert-section h2 {
  margin-top: 0;
}
.convert-section button {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  background-color: var(--primary);
  color: #fff;
  cursor: pointer;
}
.convert-section button:hover {
  background-color: var(--secondary);
}
.convert-section pre {
  margin-top: 1rem;
  background-color: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.75rem;
  overflow-x: auto;
  font-family: monospace;
}

/* Tree view */
.tree-view-section {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 2rem;
}
.tree-view-section ul {
  list-style: none;
  margin: 0;
  padding-left: 1rem;
}
.tree-view-section li {
  margin: 0.25rem 0;
  position: relative;
  cursor: default;
}
.tree-view-section .caret {
  cursor: pointer;
  user-select: none;
  margin-right: 0.25rem;
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid var(--primary);
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}
.tree-view-section .caret.open {
  transform: rotate(90deg);
}
.tree-view-section .value {
  margin-left: 0.25rem;
  font-family: monospace;
  color: var(--muted);
}
.tree-view-section ul.nested {
  display: none;
}
.tree-view-section ul.nested.open {
  display: block;
}

/* Info section */
.info {
  background-color: var(--surface);
  border-top: 1px solid var(--border);
  padding: 2rem 1rem;
}
.info h2 {
  margin-top: 1.5rem;
}
.info h2:first-child {
  margin-top: 0;
}
.info p,
.info li {
  color: var(--muted);
}

/* Footer */
footer {
  background-color: var(--surface);
  border-top: 1px solid var(--border);
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Message styles for validation feedback */
.message {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-weight: 500;
  display: none;
}
.message.success {
  display: block;
  background-color: #e6ffed;
  color: var(--success);
  border: 1px solid var(--success);
}
.message.error {
  display: block;
  background-color: #ffecec;
  color: var(--error);
  border: 1px solid var(--error);
}

@media (min-width: 768px) {
  .textarea-wrapper {
    flex-direction: row;
  }
  #inputArea,
  #outputArea {
    width: 50%;
  }
}