/* Godfrey Labs Theme for TechDoc
 * Dark header/nav, light content area
 */

:root {
  /* Dark Colors (header, nav) */
  --gl-bg-dark: #1a1a2e;
  --gl-bg-dark-alt: #16213e;
  --gl-card-bg: #252545;
  --gl-accent: #4ecdc4;
  --gl-accent-hover: #3dbdb5;
  --gl-border-dark: #3a3a5a;

  /* Light Colors (content) */
  --gl-content-bg: #ffffff;
  --gl-content-bg-alt: #f8f9fa;
  --gl-text-dark: #1a1a2e;
  --gl-text-muted: #64748b;
  --gl-border-light: #e2e8f0;

  /* Sidebar - light shade */
  --gl-sidebar-bg: #f1f5f9;
  --gl-sidebar-text: #475569;
  --gl-sidebar-hover: #e2e8f0;

  /* Code */
  --gl-code-bg: #1e1e3f;
}

/* ==========================================
   Base - Light Background
   ========================================== */

body {
  background: var(--gl-content-bg-alt) !important;
  color: var(--gl-text-dark) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================
   Header - Dark
   ========================================== */

.global-menu,
.site-header,
header {
  background: var(--gl-bg-dark) !important;
  border-bottom: 1px solid var(--gl-border-dark) !important;
  color: #ffffff !important;
}

header h1 {
  color: #ffffff !important;
}

header p,
header p.description,
header .description {
  color: #e2e8f0 !important;
}

header span,
header span.version {
  color: #a0a0a0 !important;
}

.global-menu a,
.site-header a,
header a {
  color: var(--gl-accent) !important;
}

.global-menu a:hover,
.site-header a:hover,
header a:hover {
  color: var(--gl-accent-hover) !important;
}

/* ==========================================
   Sidebar - Light
   ========================================== */

.sidebar,
.sidebar-menu,
.menu {
  background: var(--gl-sidebar-bg) !important;
  border-right: 1px solid var(--gl-border-light) !important;
}

.sidebar .nav-link,
.sidebar a,
.menu a {
  color: var(--gl-sidebar-text) !important;
  transition: color 0.2s ease, background 0.2s ease;
}

.sidebar .nav-link:hover,
.sidebar a:hover,
.menu a:hover {
  color: #0d9488 !important;
  background: var(--gl-sidebar-hover) !important;
}

.sidebar .nav-link.active,
.sidebar a.active,
.menu a.active {
  color: #0d9488 !important;
  background: #e0f2f1 !important;
  border-left: 3px solid var(--gl-accent);
}

.menu-label {
  color: var(--gl-text-muted) !important;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

/* Slide menu - remove spacing between items */
.slide-menu ul {
  margin: 0 !important;
  padding: 0 !important;
}

.slide-menu li {
  margin: 0 !important;
}

/* Slide menu +/- toggle - larger click area */
.sidebar .slide-menu .has-sub-menu > a span.mark {
  background: transparent !important;
  border: none !important;
  width: 40px !important;
  cursor: pointer;
}

/* ==========================================
   Main Content - Light
   ========================================== */

.content,
.main-content,
main,
article {
  background: var(--gl-content-bg) !important;
  color: var(--gl-text-dark) !important;
}

.content-wrapper,
.documentation {
  background: var(--gl-content-bg);
  border-radius: 8px;
  padding: 2rem;
  margin: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ==========================================
   Typography - Dark on Light
   ========================================== */

h1, h2, h3, h4, h5, h6 {
  color: var(--gl-text-dark) !important;
  font-weight: 600;
}

h1 {
  border-bottom: 2px solid var(--gl-accent);
  padding-bottom: 0.5rem;
}

p, li {
  color: var(--gl-text-dark);
  line-height: 1.7;
}

a {
  color: #0d9488 !important; /* Darker teal for readability on light bg */
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--gl-accent-hover) !important;
  text-decoration: underline;
}

/* ==========================================
   Code Blocks - Dark
   ========================================== */

pre {
  background: var(--gl-code-bg) !important;
  border: 1px solid var(--gl-border-dark) !important;
  border-radius: 6px;
  padding: 1rem !important;
  overflow-x: auto;
}

pre code {
  color: #e2e8f0 !important;
  background: transparent !important;
  padding: 0;
  border: none !important;
}

code {
  background: #e2e8f0 !important;
  color: #0d9488 !important;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Copy button */
.copy-to-clipboard {
  background: #3a3a5a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px;
}

.copy-to-clipboard:hover {
  background: var(--gl-accent) !important;
}

/* ==========================================
   Tables - Light
   ========================================== */

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  background: var(--gl-content-bg);
}

th, td {
  border: 1px solid var(--gl-border-light) !important;
  padding: 0.75rem !important;
  color: var(--gl-text-dark);
}

th {
  background: var(--gl-content-bg-alt) !important;
  color: var(--gl-text-dark) !important;
  font-weight: 600;
}

tr:nth-child(even) {
  background: var(--gl-content-bg-alt);
}

tr:hover {
  background: #e0f2f1;
}

/* ==========================================
   Alerts / Shortcodes
   ========================================== */

.alert,
.notice,
.admonition {
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  border-left: 4px solid;
  background: var(--gl-content-bg);
}

.alert-info,
.notice-info {
  background: #e0f7fa;
  border-color: #0891b2;
}

.alert-warning,
.notice-warning {
  background: #fff8e1;
  border-color: #f59e0b;
}

.alert-success,
.notice-success {
  background: #e8f5e9;
  border-color: #10b981;
}

.alert-danger,
.alert-error,
.notice-danger {
  background: #ffebee;
  border-color: #ef4444;
}

/* ==========================================
   Buttons
   ========================================== */

.btn,
button {
  background: var(--gl-accent) !important;
  color: var(--gl-bg-dark) !important;
  border: none !important;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn:hover,
button:hover {
  background: var(--gl-accent-hover) !important;
}

/* ==========================================
   Table of Contents - Light
   ========================================== */

.toc,
.table-of-contents,
#TableOfContents {
  background: var(--gl-content-bg-alt);
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid var(--gl-border-light);
}

.toc a,
#TableOfContents a {
  color: var(--gl-text-muted) !important;
}

.toc a:hover,
#TableOfContents a:hover {
  color: #0d9488 !important;
}

/* ==========================================
   Search
   ========================================== */

.search-input,
input[type="search"],
input[type="text"] {
  background: var(--gl-content-bg) !important;
  border: 1px solid var(--gl-border-light) !important;
  color: var(--gl-text-dark) !important;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.search-input:focus,
input[type="search"]:focus,
input[type="text"]:focus {
  border-color: var(--gl-accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.2);
}

/* ==========================================
   Footer - Light
   ========================================== */

footer,
.footer {
  background: var(--gl-content-bg) !important;
  border-top: 1px solid var(--gl-border-light) !important;
  color: var(--gl-text-muted) !important;
}

footer a,
.footer a {
  color: #0d9488 !important;
}

footer p,
footer .powered {
  color: var(--gl-text-muted) !important;
}

/* ==========================================
   Edit Page Link
   ========================================== */

.edit-page-link a {
  color: var(--gl-text-muted) !important;
  font-size: 0.875rem;
}

.edit-page-link a:hover {
  color: #0d9488 !important;
}

/* ==========================================
   Blockquotes
   ========================================== */

blockquote {
  border-left: 4px solid var(--gl-accent);
  background: var(--gl-content-bg-alt);
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 0 8px 8px 0;
}

blockquote p {
  margin: 0;
  color: var(--gl-text-dark);
}

/* ==========================================
   Horizontal Rules
   ========================================== */

hr {
  border: none;
  border-top: 1px solid var(--gl-border-light);
  margin: 2rem 0;
}

/* ==========================================
   Lists
   ========================================== */

ul, ol {
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
}

li::marker {
  color: var(--gl-accent);
}

/* ==========================================
   Images
   ========================================== */

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ==========================================
   Scrollbar
   ========================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gl-content-bg-alt);
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gl-accent);
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 768px) {
  .sidebar {
    border-right: none !important;
    border-bottom: 1px solid var(--gl-border-dark) !important;
  }

  .content-wrapper {
    margin: 0.5rem;
    padding: 1rem;
  }
}