/* =============================================================================
   SQLSpec Documentation Theme - Litestar Branded
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Litestar Brand Colors
   ----------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --litestar-navy: #202235;
  --litestar-gold: #EDB641;
  --litestar-gold-light: #FFD480;
  --litestar-gold-dark: #D4A438;
  --litestar-gold-rgb: 237, 182, 65;
  --litestar-navy-rgb: 32, 34, 53;

  /* Neutral grays */
  --litestar-gray-50: #f8fafc;
  --litestar-gray-100: #f1f5f9;
  --litestar-gray-200: #e2e8f0;
  --litestar-gray-300: #cbd5e1;
  --litestar-gray-400: #94a3b8;
  --litestar-gray-500: #64748b;
  --litestar-gray-600: #475569;
  --litestar-gray-700: #334155;
  --litestar-gray-800: #1e293b;
  --litestar-gray-900: #0f172a;

  /* Brand typography sizing */
  --brand-font-size-xl: 6rem;
  --brand-font-size-lg: 5rem;
  --brand-font-size-md: 4rem;
  --brand-font-size-sm: 2.5rem;
  --brand-font-size-xs: 2rem;
  --brand-font-size-xxs: 1.9rem;

  --brand-letter-spacing-xl: 0.25em;
  --brand-letter-spacing-lg: 0.2em;
  --brand-letter-spacing-md: 0.1em;
  --brand-letter-spacing-sm: 0.05em;
  --brand-letter-spacing-xs: 0.04em;
}

/* -----------------------------------------------------------------------------
   Shibuya Accent Color Overrides (Amber -> Litestar Gold)
   ----------------------------------------------------------------------------- */
html[data-accent-color='amber'] {
  --accent-9: var(--litestar-gold);
  --accent-10: var(--litestar-gold-dark);
  --accent-11: #8B6914;
}

html.dark[data-accent-color='amber'] {
  --accent-9: var(--litestar-gold);
  --accent-10: var(--litestar-gold-light);
  --accent-11: var(--litestar-gold-light);
}

/* -----------------------------------------------------------------------------
   Light Mode Theme
   ----------------------------------------------------------------------------- */
html.light {
  --sl-color-primary: var(--litestar-navy);
  --sl-color-secondary: var(--litestar-gray-600);
  --sl-color-accent: var(--litestar-gold);
  --sl-color-text-1: var(--litestar-navy);
  --sl-color-text-2: var(--litestar-gray-600);
  --sy-c-foot-background: var(--litestar-gray-50);
  --yue-c-text: var(--litestar-navy);
  --brand-text-glow:
    0 0 10px rgba(var(--litestar-navy-rgb), 0.3),
    0 0 20px rgba(var(--litestar-navy-rgb), 0.2);

  /* Code block colors - light mode */
  --sqlspec-code-bg: #f1f4f9;
  --sqlspec-code-border: #d0d7e2;
  --sqlspec-code-text: var(--litestar-navy);
}

/* -----------------------------------------------------------------------------
   Dark Mode Theme
   ----------------------------------------------------------------------------- */
html.dark,
html[data-theme="dark"] {
  --sl-color-text-1: var(--litestar-gray-100);
  /* Global background - Litestar Navy */
  --sy-c-background: var(--litestar-navy);
  --sy-c-foot-background: var(--litestar-navy);
  --sy-c-background-dropback: rgba(32, 34, 53, 0.8); /* Navy with opacity */
  --sy-c-surface: #2a2d40; /* Slightly lighter navy for cards/sidebars to distinguish from bg */

  --sy-c-foot-text: var(--litestar-gray-300);
  --sy-c-foot-divider: var(--litestar-gray-700);

  --yue-c-text: var(--litestar-gray-100);
  --brand-text-glow:
    0 0 10px rgba(var(--litestar-gold-rgb), 0.4),
    0 0 20px rgba(var(--litestar-gold-rgb), 0.2);

  /* Code block colors - dark mode */
  --sqlspec-code-bg: #1a1c2e; /* Slightly darker than navy */
  --sqlspec-code-border: #2d3148;
  --sqlspec-code-text: var(--litestar-gray-100);
}

/* -----------------------------------------------------------------------------
   Typography
   ----------------------------------------------------------------------------- */
body {
  font-size: 1rem;
  line-height: 1.7;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--litestar-navy);
  font-weight: 600;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: #e6edf3;
}

/* Links - neutral base, gold hover */
a {
  color: var(--litestar-gray-600);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--litestar-gold-dark);
}

html.dark a {
  color: var(--litestar-gray-300);
}

html.dark a:hover {
  color: var(--litestar-gold);
}

/* Paragraphs */
p {
  font-size: 1.05em;
}

/* -----------------------------------------------------------------------------
   Code Blocks
   ----------------------------------------------------------------------------- */
div.highlight {
  background: var(--sqlspec-code-bg);
  border: 1px solid var(--sqlspec-code-border);
  border-left: 3px solid rgba(237, 182, 65, 0.3);
  border-radius: 8px;
  overflow: hidden;
  margin: 1rem 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

html.dark div.highlight,
html[data-theme="dark"] div.highlight {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

div.highlight pre {
  background: transparent;
  color: var(--sqlspec-code-text);
  white-space: pre;
  overflow-x: auto;
  padding: 1rem 1.25rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  font-variant-ligatures: none;
}

div.highlight pre code {
  white-space: inherit;
}

/* Inline code - neutral styling */
html.light code.literal,
html.light code:not([class]) {
  background-color: var(--litestar-gray-100);
  border: 1px solid var(--litestar-gray-200);
  color: var(--litestar-navy);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
}

html.dark code.literal,
html.dark code:not([class]) {
  background-color: var(--litestar-gray-800);
  border: 1px solid var(--litestar-gray-700);
  color: var(--litestar-gray-100);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
}

  html.dark .sqlspec-playground .CodeMirror .cm-property {
    color: #f9e2af;
  }

  /* CodeMirror Selection - Dark Mode Highlighting Fix */
  html.dark .CodeMirror-selected {
    background-color: rgba(237, 182, 65, 0.2) !important;
  }
  html.dark .CodeMirror-focused .CodeMirror-selected {
    background-color: rgba(237, 182, 65, 0.3) !important;
  }
  html.dark .CodeMirror-line::selection,
  html.dark .CodeMirror-line > span::selection,
  html.dark .CodeMirror-line > span > span::selection {
    background-color: rgba(237, 182, 65, 0.3) !important;
  }

  /* CodeMirror - Active line */

/* -----------------------------------------------------------------------------
   Navigation / Header
   ----------------------------------------------------------------------------- */
.sy-head {
  border-bottom: 1px solid var(--litestar-gray-200);
}

html.dark .sy-head {
  background: var(--litestar-navy);
  border-bottom-color: var(--litestar-gray-700);
}

/* Navigation links - gold hover only */
.sy-head-nav a:hover,
.sy-sidebar a:hover {
  color: var(--litestar-gold-dark) !important;
}

html.dark .sy-head-nav a:hover,
html.dark .sy-sidebar a:hover {
  color: var(--litestar-gold) !important;
}

/* Hide logo text in header */
.sy-head-brand strong {
  display: none;
}

/* -----------------------------------------------------------------------------
   Cards (sphinx-design)
   ----------------------------------------------------------------------------- */
.sd-card {
  border: 1px solid var(--litestar-gray-200);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.sd-card:hover {
  border-color: var(--litestar-gold);
  box-shadow: 0 4px 12px rgba(var(--litestar-gold-rgb), 0.15);
}

html.dark .sd-card,
html[data-theme="dark"] .sd-card {
  background: var(--sy-c-surface);
  border-color: var(--litestar-gray-700);
}

html.dark .sd-card:hover,
html[data-theme="dark"] .sd-card:hover {
  border-color: var(--litestar-gold);
  box-shadow: 0 4px 12px rgba(var(--litestar-gold-rgb), 0.2);
}

.sd-card-title {
  color: var(--litestar-navy);
}

html.dark .sd-card-title {
  color: var(--litestar-gray-100);
}

/* -----------------------------------------------------------------------------
   Hero / Title Section
   ----------------------------------------------------------------------------- */
.title-with-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5rem auto 4rem;
  width: 100%;
  padding: 0 2rem;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

html[class] .title-with-logo .brand-text {
  font-family: var(--sl-font-sans);
  font-weight: 300;
  font-size: var(--brand-font-size-lg);
  letter-spacing: var(--brand-letter-spacing-xl);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  max-width: 100%;
  white-space: nowrap;
  overflow: visible;
  transition: color var(--sl-transition), text-shadow var(--sl-transition);
}

html.light .title-with-logo .brand-text {
  color: var(--litestar-navy);
  text-shadow:
    0 0 20px rgba(var(--litestar-gold-rgb), 0.15),
    0 0 40px rgba(var(--litestar-gold-rgb), 0.1);
}

html.dark .title-with-logo .brand-text {
  color: var(--litestar-gray-300);
  text-shadow:
    0 0 15px rgba(var(--litestar-gold-rgb), 0.3),
    0 0 30px rgba(var(--litestar-gold-rgb), 0.2),
    0 0 45px rgba(var(--litestar-gold-rgb), 0.1);
}

html[class] .title-with-logo h1.brand-text {
  margin: 0;
  padding: 0;
  border: none;
}

.title-with-logo + p {
  margin-top: 2rem;
}

/* Brand text animation */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.title-with-logo .brand-text {
  animation: fadeInScale 0.6s ease-out;
}

/* -----------------------------------------------------------------------------
   Light/Dark Mode Visibility Toggles
   ----------------------------------------------------------------------------- */
.only-dark {
  display: none;
}

html.dark .only-dark {
  display: block;
}

html.dark .only-light {
  display: none;
}

/* -----------------------------------------------------------------------------
   Playground
   ----------------------------------------------------------------------------- */
.playground-full {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.playground-full .sqlspec-playground {
  width: 100%;
}

/* -----------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------------- */
.buttons.wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.buttons.wrap .btn-no-wrap {
  flex: 0 0 auto;
}

/* -----------------------------------------------------------------------------
   Badges
   ----------------------------------------------------------------------------- */
#badges img {
  margin-top: 0;
  margin-bottom: 0;
}

#badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 3em;
}

/* -----------------------------------------------------------------------------
   Mermaid Diagrams (Dark Mode Fix)
   ----------------------------------------------------------------------------- */
html.dark .mermaid svg,
html[data-theme="dark"] .mermaid svg {
  background-color: white;
  padding: 1em;
  border-radius: 8px;
}

/* -----------------------------------------------------------------------------
   Responsive Breakpoints
   ----------------------------------------------------------------------------- */

/* Extra large screens */
@media (min-width: 1400px) {
  html[class] .title-with-logo .brand-text {
    font-size: var(--brand-font-size-xl);
  }
}

/* Large screens */
@media (min-width: 1200px) and (max-width: 1399px) {
  html[class] .title-with-logo .brand-text {
    font-size: var(--brand-font-size-lg);
    letter-spacing: var(--brand-letter-spacing-lg);
  }
}

/* Medium screens */
@media (min-width: 992px) and (max-width: 1199px) {
  html[class] .title-with-logo .brand-text {
    font-size: var(--brand-font-size-md);
    letter-spacing: var(--brand-letter-spacing-md);
  }
}

/* Medium-small screens */
@media (max-width: 991px) {
  html[class] .title-with-logo .brand-text {
    font-size: var(--brand-font-size-md);
    letter-spacing: var(--brand-letter-spacing-lg);
  }
}

/* Small screens */
@media (max-width: 767px) {
  html[class] .title-with-logo .brand-text {
    font-size: var(--brand-font-size-sm);
    letter-spacing: var(--brand-letter-spacing-md);
  }
  html[class] .title-with-logo {
    margin: 2rem auto 1.5rem;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  html[class] .title-with-logo .brand-text {
    font-size: var(--brand-font-size-xs);
    letter-spacing: var(--brand-letter-spacing-sm);
    line-height: 1.2;
  }
  html[class] .title-with-logo {
    margin: 1.5rem auto 1rem;
    padding: 0 1rem;
  }
}

/* Smallest screens */
@media (max-width: 360px) {
  html[class] .title-with-logo .brand-text {
    font-size: var(--brand-font-size-xxs);
    letter-spacing: var(--brand-letter-spacing-xs);
  }
}

/* -----------------------------------------------------------------------------
   Layout Overrides (Hide Right Sidebar & Expand Content)
   ----------------------------------------------------------------------------- */
/* Hide the secondary sidebar (TOC) globally */
.sy-rside {
  display: none !important;
}

/* Adjust the main container width to reclaim right sidebar space */
@media (min-width: 768px) {
  .sy-main {
    /* Default is calc(100% - 18rem) on medium screens, which is fine (no right sidebar there usually) */
    max-width: none !important; /* Remove 52rem cap to allow full expansion */
  }
}

@media (min-width: 1280px) {
  .sy-main {
    /* Override Shibuya's default of calc(100% - 34rem) which reserves space for right sidebar */
    width: calc(100% - 18rem) !important;
    padding-right: 2rem; /* Ensure right edge padding */
  }
}

/* Ensure content takes full available width */
.sy-content {
  max-width: none !important;
  width: 100% !important;
}

/* -----------------------------------------------------------------------------
   Component Spacing (Quick Navigation)
   ----------------------------------------------------------------------------- */
/* Add spacing to sphinx-design cards to prevent visual overlap */
.sd-card {
  margin-bottom: 1rem;
}

/* Ensure grid containers have gaps if they don't already */
.sd-container-fluid {
  gap: 1.5rem;
}

/* -----------------------------------------------------------------------------
   Navigation Bar (Next/Prev)
   ----------------------------------------------------------------------------- */
.navigation {
  position: relative;
  margin-top: 4rem !important;
  margin-bottom: 2rem !important;
  padding-top: 2rem;
  border-top: 1px solid var(--sy-c-divider);
}

/* Remove extra padding from content/footer since nav is no longer fixed */
.sy-content {
  padding-bottom: 2rem;
}

.sy-foot {
  padding-bottom: 2rem;
}