/*
 * Global styles and theme definitions.
 * The site is built using CSS variables for easy theme switching.
 * Dark theme values are defined on the :root selector. A light-theme
 * class on the body overrides these variables to achieve the light
 * appearance from the screenshots.
 */

:root {
  /* Primary colours for the dark theme */
  --body-bg: #0b0d10;
  --nav-bg: #0b0d10;
  --nav-text: #ffffff;
  --btn-bg: #e86619;
  --btn-text: #ffffff;
  --cta-bg: #003a6f;
  --cta-bar: #0080c0;
  --editor-bg: #0b0d10;
  --editor-header-bg: #101318;
  --editor-header-text: #ffffff;
  --line-numbers-bg: #05070a;
  --code-bg: #13171d;
  --code-text: #cccccc;
  --dropdown-bg: #08090c;
  --dropdown-item-bg-hover: #1e2734;
  --dropdown-item-selected: #0f3a5c;
  --copyright-text: #666666;
  /* Background colour for the pill‑shaped navigation container used on this
     page.  These values mirror those defined in the global style sheet. */
  --nav-container-bg: #101a2b;
}

/* Light theme overrides using a class on the body. */
body.light-theme {
  --body-bg: #8ba4b8;
  --nav-bg: #8ba4b8;
  --nav-text: #0e1e2e;
  --btn-bg: #e86619;
  --btn-text: #ffffff;
  --cta-bg: #003f7d;
  --cta-bar: #00a2ff;
  --editor-bg: #1a334c;
  --editor-header-bg: #1a334c;
  --editor-header-text: #ffffff;
  --line-numbers-bg: #14263a;
  --code-bg: #1e3a55;
  --code-text: #dfe7ef;
  --dropdown-bg: #102a46;
  --dropdown-item-bg-hover: #254a66;
  --dropdown-item-selected: #183c59;
  --copyright-text: #d9e3ec;
  /* Light theme colour for the pill navigation container */
  --nav-container-bg: #d3e0ea;
}

/* General resets */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--body-bg);
  color: var(--nav-text);
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Navigation bar styling */
.navbar {
  background-color: var(--nav-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.brand {
  display: flex;
  align-items: center;
  column-gap: 0.7rem;
}

/* Simple square used as logo – you could swap this for a graphic if desired */
.logo {
  width: 36px;
  height: 36px;
  background-color: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nav-text);
}

.brand-name .accent {
  color: var(--btn-bg);
}

.tagline {
  font-size: 0.75rem;
  color: var(--copyright-text);
  margin-top: 2px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--nav-text);
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--btn-bg);
}

/* Theme toggle button */
.theme-toggle {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.theme-toggle:hover {
  filter: brightness(1.1);
}

/* Call‑to‑action banner */
.cta {
  margin: 1rem auto;
  background-color: var(--cta-bg);
  color: #ffffff;
  /* Provide a wider maximum width to more closely match the screenshots */
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  position: relative;
  font-weight: 500;
}

.cta::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 6px;
  border-radius: 4px;
  background-color: var(--cta-bar);
}

.cta-icon {
  margin-left: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.cta-icon svg {
  width: 16px;
  height: 16px;
  color: #ffffff;
}

/* Editor container */
.editor-container {
  flex: 1;
  width: 90%;
  max-width: 1000px;
  margin: 0 auto 1rem;
  background-color: var(--editor-bg);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Header inside editor */
.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background-color: var(--editor-header-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Language selector */
.language-wrapper {
  position: relative;
}

.language-button {
  background-color: var(--editor-header-bg);
  color: var(--editor-header-text);
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.language-button:hover {
  background-color: var(--dropdown-item-bg-hover);
}

.language-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  background-color: var(--dropdown-bg);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  list-style: none;
  padding: 0.25rem 0;
  min-width: 180px;
  z-index: 100;
}

.language-dropdown.hidden {
  display: none;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  color: var(--nav-text);
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

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

.dropdown-item.selected {
  background-color: var(--dropdown-item-selected);
}

/* Row representing the currently selected language. It appears at the top of
   the dropdown with the label “Selected”. We disable hover styles on it
   to mirror the behaviour from the screenshots. */
.dropdown-item.selected-row {
  background-color: var(--dropdown-item-selected);
  font-weight: 600;
  cursor: default;
}

.dropdown-item.selected-row:hover {
  background-color: var(--dropdown-item-selected);
}

.lang-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: bold;
  color: #ffffff;
  flex-shrink: 0;
}

/* Colour coding for each language icon */
.html-icon {
  background: linear-gradient(45deg, #e34c26, #f16529);
}

.java-icon {
  background: linear-gradient(45deg, #5382a1, #e76f00);
}

.cpp-icon {
  background: linear-gradient(45deg, #00599c, #007bc1);
}

.python-icon {
  background: linear-gradient(45deg, #3776ab, #ffd43b);
}

/* Run button */
.run-button {
  background-color: var(--editor-header-bg);
  color: var(--editor-header-text);
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.run-button:hover {
  background-color: var(--dropdown-item-bg-hover);
}

.run-icon {
  font-size: 0.85rem;
  margin-top: 1px;
}

/* Editor main area with line numbers and code text area */
.editor-main {
  display: flex;
  flex: 1;
  min-height: 320px;
  max-height: 480px;
  overflow: hidden;
}

/* Hide the manual line number column – CodeMirror now handles line numbers */
.line-numbers {
  display: none;
}

.code-area {
  flex: 1;
  background-color: var(--code-bg);
  color: var(--code-text);
  border: none;
  outline: none;
  padding: 0.6rem;
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  line-height: 1.5rem;
  resize: none;
  overflow: auto;
}

/*
 * CodeMirror integration styling
 *
 * CodeMirror replaces the underlying <textarea> with its own elements to
 * provide syntax highlighting, line numbers and auto‑completion. These
 * styles align CodeMirror’s appearance with the existing StickToDev theme.
 */
.CodeMirror {
  flex: 1;
  min-height: 320px;
  max-height: 480px;
  background-color: var(--code-bg);
  color: var(--code-text);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  line-height: 1.5rem;
  border: none;
  height: auto;
}

.CodeMirror-gutters {
  background-color: var(--line-numbers-bg);
  color: #7a7f86;
  border-right: none;
}

.CodeMirror-cursor {
  border-left: 1px solid var(--btn-bg);
}

.code-area::selection {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Output area for displaying program output or error messages */
.output-area {
  background-color: var(--code-bg);
  color: var(--code-text);
  padding: 0.6rem;
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  line-height: 1.4rem;
  overflow: auto;
  max-height: 200px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.output-header {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.output-content {
  white-space: pre-wrap;
}

/* Footer inside the editor container */
.editor-footer {
  text-align: center;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: var(--copyright-text);
}

@media (max-width: 600px) {
  .nav-links {
    gap: 1rem;
  }
  .editor-container {
    width: 95%;
  }
  .cta {
    max-width: 90%;
  }
}