/* Glazed Analytics Custom Theme */
:root {
  --glazed-primary: #e943a3;
  --glazed-primary-light: #f06bb8;
  --glazed-primary-dark: #d63a93;
  --glazed-accent: #f8bbd9;
}

/* Override docsify default green with Glazed pink/purple */
.app-name-link,
.sidebar-nav a:hover,
.sidebar-nav li.active > a {
  color: var(--glazed-primary) !important;
}

/* Active sidebar link */
.sidebar-nav li.active > a {
  border-right: 2px solid var(--glazed-primary);
}

/* Links in content */
.markdown-section a {
  color: var(--glazed-primary);
  font-weight: normal;
}

.markdown-section a:hover {
  color: var(--glazed-primary-dark);
}

/* Code blocks and inline code accent */
.markdown-section code,
.markdown-section pre {
  background: #f8f8f8;
}

/* Buttons and interactive elements */
.docsify-copy-code-button {
  background: var(--glazed-primary) !important;
}

.docsify-copy-code-button:hover {
  background: var(--glazed-primary-dark) !important;
}

/* Search results styling */
.search .results-panel {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.search .matching-post {
  border-bottom: 1px solid var(--glazed-accent);
  padding: 12px 16px;
}

.search .matching-post:hover {
  background-color: rgba(233, 67, 163, 0.05);
}

.search .matching-post a {
  color: #333 !important;
  text-decoration: none;
  display: block;
}

.search .matching-post a:hover {
  color: #333 !important;
}

/* Style the search result title */
.search .matching-post h2,
.search .matching-post a h2,
.search .matching-post .section-link {
  color: #333 !important;
  font-size: 1.1em;
  margin: 0 0 4px 0;
  font-weight: 200 !important;
}

/* Style the search result content/excerpt */
.search .matching-post p {
  color: #666 !important;
  margin: 0;
  font-size: 0.9em;
  line-height: 1.4;
}

/* Highlight matched keywords in pink */
.search .matching-post mark,
.search .matching-post em {
  background: var(--glazed-primary) !important;
  color: white !important;
  padding: 2px 4px;
  border-radius: 3px;
  font-style: normal;
}

/* Style the search input field */
.search input[type="search"] {
  border: 1px solid #ddd !important;
  border-radius: 6px;
  outline: none;
}

.search input[type="search"]:focus {
  border-color: var(--glazed-primary) !important;
  box-shadow: 0 0 0 2px rgba(233, 67, 163, 0.2) !important;
}

/* Logo styling */
.app-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.app-logo {
  width: 50px;
  height: auto;
}

/* Sidebar toggle styling */
.sidebar-toggle-button span {
  background: var(--glazed-primary) !important;
}

.sidebar-toggle:hover .sidebar-toggle-button span {
  background: var(--glazed-primary-dark) !important;
}

/* Make headings bold - use bold keyword and multiple approaches */
h1,
h2,
h3,
h4,
h5,
h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6,
section.content h1,
section.content h2,
section.content h3,
section.content h4,
section.content h5,
section.content h6,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
  font-weight: bold !important;
  font-weight: 700 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Alternative approach: use text-shadow to simulate bold if font-weight fails */
h1,
h2,
h3,
h4,
h5,
h6,
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4,
.markdown-section h5,
.markdown-section h6 {
  text-shadow: 0.5px 0 0 currentColor, -0.5px 0 0 currentColor,
    0 0.5px 0 currentColor, 0 -0.5px 0 currentColor !important;
}

/* Custom header styling */
.sidebar > h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  padding-left: 15px; /* Align with sidebar navigation */
}

.sidebar > h1 img {
  width: 100px;
  height: auto;
}

/* Blockquote styling to match brand */
.markdown-section blockquote {
  border-left: 4px solid var(--glazed-primary);
  background: rgba(233, 67, 163, 0.05);
  font-weight: normal !important;
  color: #333 !important;
  padding-top: 1px;
  padding-bottom: 1px;
  border-radius: 6px;
}

.markdown-section blockquote p {
  font-weight: normal !important;
  color: #333 !important;
}

/* Table styling */
.markdown-section table th {
  background: var(--glazed-accent);
}

/* Progress indicator if using pagination */
.docsify-pagination-container .pagination-item a {
  color: var(--glazed-primary);
}

.docsify-pagination-container .pagination-item a:hover {
  color: var(--glazed-primary-dark);
}

/* Video container styling for better integration */
.video-container {
  margin: 1.5rem 0;
  border: 1px solid var(--glazed-accent);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(233, 67, 163, 0.1);
}

/* Make images smaller for better readability */
.markdown-section img {
  max-width: 80%;
  height: auto;
}

/* Constrain content width for better readability */
.markdown-section {
  max-width: 800px !important;
  margin: 0;
  padding: 0 2rem 3rem 2rem;
}

/* Simple COMMENT alert styling - clean box with pink background */
.alert.callout.glazed-comment,
.alert.flat.glazed-comment {
  background-color: rgba(233, 67, 163, 0.1) !important;
  border: none !important;
  border-radius: 6px;
  padding: 16px;
  margin: 16px 0;
  display: flex !important;
  flex-direction: column !important;
}

.alert.callout.glazed-comment .alert-title,
.alert.flat.glazed-comment .alert-title {
  display: none !important;
}

.alert.callout.glazed-comment .alert-icon,
.alert.flat.glazed-comment .alert-icon {
  display: none !important;
}

.alert.callout.glazed-comment .alert-body,
.alert.flat.glazed-comment .alert-body {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
}

.alert.callout.glazed-comment .alert-header,
.alert.flat.glazed-comment .alert-header {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.alert.callout.glazed-comment p,
.alert.flat.glazed-comment p {
  margin: 0 !important;
}

.alert.callout.glazed-comment > *:first-child,
.alert.flat.glazed-comment > *:first-child {
  margin-top: 0 !important;
}