/* @import must always be at the top of your publish.css file */
@import url('https://fonts.googleapis.com/css2?family=Andada+Pro:ital,wght@0,400..840;1,400..840&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

body {
  --font-text-size: 18px;
  --font-text-theme: 'Andada Pro';
  --font-interface-theme: 'Comfortaa';
  --background-primary: #f8f5f3;
  --text-normal: #3e3f4d;
  --link-color: #661fff;
  --link-color-hover: #661fff;
  --link-external-color: #661fff;
}

.list-cards {
    --list-cards-template: repeat(2, minmax(0, 1fr));
}

.list-cards div > ul {
    --link-color: var(--text-normal);
    --link-unresolved-color: var(--text-muted);
    --link-decoration: none;
    --link-decoration-hover: none;
    --link-external-color: var(--text-normal);
    --link-external-decoration: none;
    --link-external-decoration-hover: none;
    display: grid;
    gap: 8px;
    grid-template-columns: var(--list-cards-template);
    padding: 0;
}

.list-cards div > ul > li {
    display: flex;
    border-radius: var(--radius-s);
    border: 1px solid var(--color-base-25);
    flex-wrap: wrap;
}

.list-cards div > ul > li a {
    flex-grow: 0;
}

.list-cards div > ul > li a:after {
    content: "";
    flex-basis: 100%;
    height: 0;
}

.list-cards div ul > li a {
    flex-grow: 1;
    padding: 16px;
    font-weight: var(--font-semibold);
    background: none;
}

/* Increase padding for hacker theme list cards */
.hacker-theme.list-cards div ul > li {
    padding: 24px;
}

.hacker-theme.list-cards div ul > li a {
    padding: 0;
}

.hacker-theme.list-cards div ul ul {
    padding: 0;
    margin-top: 8px;
}

.hacker-theme.list-cards div ul ul > li {
    margin-inline-start: 10px;
}

.list-cards div ul > li:hover {
    border-color: var(--color-base-35);
}

.theme-dark .list-cards div ul > li {
    background-color: var(--background-secondary);
}

.list-cards div ul ul {
    display: block;
    width: 100%;
    color: var(--text-muted);
    font-size: var(--font-smaller);
    margin-top: -8px;
    padding: 0 16px 16px;
}

.list-cards div ul ul > li {
    display: block;
}

@media screen and (max-width: 750px) {
    .list-cards.list-cards-mobile-full {
        --list-cards-template: repeat(1, minmax(0, 1fr));
    }
}

.site-body-left-column-site-name {
    text-align: center;
}

/* ============================================
   HACKER THEME SECTION
   ============================================ */

.hacker-theme {
  --font-text-theme: 'Fira Code', 'Courier New', monospace;
  --font-interface-theme: 'Share Tech Mono', monospace;
  --background-primary: #fdf6e3;
  --background-secondary: #eee8d5;
  --text-normal: #586e75;
  --text-muted: #93a1a1;
  --link-color: #268bd2;
  --link-color-hover: #2aa198;
  --link-external-color: #268bd2;
  font-family: 'Fira Code', monospace;
  background-color: #fdf6e3;
  color: #586e75;
}

/* Hacker-style headers */
.hacker-theme h1,
.hacker-theme h2,
.hacker-theme h3,
.hacker-theme h4,
.hacker-theme h5,
.hacker-theme h6,
.hacker-theme .page-header {
  font-family: 'Fira Code', monospace;
  color: #073642 !important;
  letter-spacing: 0.05em;
}

.hacker-theme h1::before,
.hacker-theme .page-header::before {
  content: "# ";
  color: #93a1a1;
}

.hacker-theme h2::before {
  content: "## ";
  color: #93a1a1;
}

.hacker-theme h3::before {
  content: "### ";
  color: #93a1a1;
}

/* Terminal-style code blocks */
.hacker-theme code {
  background-color: #eee8d5;
  border: 1px solid #93a1a1;
  color: #586e75;
  font-family: 'Fira Code', monospace;
}

.hacker-theme pre {
  background-color: #eee8d5;
  border: 1px solid #93a1a1;
}

/* Terminal prompt styling */
.hacker-theme blockquote {
  border-left: none;
  padding-left: 1em;
  margin: 0.5em 0;
  color: #586e75;
  font-family: 'Fira Code', monospace;
  background-color: transparent;
}

/* Hacker-themed list cards */
.hacker-theme.list-cards div > ul > li {
    border: 1px solid #d3cbb8;
    background-color: #f5f0e5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Exclude lists with blockquotes (intro bullets) from card styling and grid layout */
.hacker-theme.list-cards div > ul:has(li > blockquote) {
    display: block !important;
    grid-template-columns: none !important;
    gap: 4px !important;
}

.hacker-theme.list-cards div > ul > li:has(blockquote) {
    border: none;
    background-color: transparent;
    box-shadow: none;
    flex-wrap: nowrap;
    display: list-item;
    padding: 0;
    margin: 4px 0;
}

.hacker-theme.list-cards div ul > li a {
    color: #268bd2;
    font-family: 'Fira Code', monospace;
    letter-spacing: 0.02em;
    font-weight: 600;
    text-decoration: none;
}

.hacker-theme.list-cards div ul > li a:hover {
    color: #2aa198;
    text-decoration: underline;
}

.hacker-theme.list-cards div ul ul {
    color: #002b36;
    background-color: transparent;
}

.hacker-theme.list-cards div ul ul > li {
    color: #002b36;
    background-color: transparent;
}

.hacker-theme.list-cards div ul ul:hover,
.hacker-theme.list-cards div ul ul > li:hover {
    background-color: transparent;
}

.hacker-theme.list-cards div ul > li:hover {
    border-color: #93a1a1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    background-color: #faf6ed;
}

/* Don't apply hover effects to blockquote items */
.hacker-theme.list-cards div ul > li:has(blockquote):hover {
    border-color: transparent;
    box-shadow: none;
    transform: none;
    background-color: transparent;
}

/* Hacker-style links */
.hacker-theme a {
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    color: #268bd2;
}

.hacker-theme a:hover {
    color: #2aa198;
}

/* Scrollbar styling for hacker theme */
.hacker-theme ::-webkit-scrollbar {
    width: 10px;
    background-color: #fdf6e3;
}

.hacker-theme ::-webkit-scrollbar-thumb {
    background-color: #93a1a1;
    border-radius: 4px;
}

.hacker-theme ::-webkit-scrollbar-thumb:hover {
    background-color: #586e75;
}

/* Selection styling */
.hacker-theme ::selection {
    background-color: #268bd2;
    color: #fdf6e3;
}

/* ============================================
   EXPLORABLE BASE - Applied to all Explorable pages
   ============================================ */

/* Left sidebar styling for explorable base */
/* Use :has() to target sidebar when explorable-base exists in the page */
.site-body:has(.explorable-base) .site-body-left-column {
    background-color: #eee8d5;
    border-right: 1px solid #93a1a1;
    max-width: 280px !important;
}

.site-body:has(.explorable-base) .site-body-left-column-site-name {
    font-family: 'Fira Code', monospace;
    color: #073642 !important;
    letter-spacing: 0.05em;
    font-size: 1.2em;
}

.site-body:has(.explorable-base) .site-body-left-column-site-name::before {
    content: "# ";
    color: #93a1a1;
}

/* Hide right column (graph) and expand center column */
.site-body:has(.explorable-base) .site-body-right-column {
    display: none !important;
}

.site-body:has(.explorable-base) .site-body-center-column {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 !important;
}

.site-body:has(.explorable-base) .render-container {
    max-width: 100% !important;
}

.site-body:has(.explorable-base) .render-container-inner {
    max-width: 100% !important;
    width: 100% !important;
}

/* Ensure full-width layout */
.site-body:has(.explorable-base) .render-container-inner {
    width: 100% !important;
}

.site-body:has(.explorable-base) .render-container {
    width: 100% !important;
}

/* Ensure navigation links work properly */
.site-body:has(.explorable-base) .tree-item-inner a {
    pointer-events: auto !important;
    z-index: 1;
}

.site-body:has(.explorable-base) .publish-renderer {
    max-width: none !important;
    min-width: 100% !important;
    width: auto !important;
}

.site-body:has(.explorable-base) .markdown-preview-sizer {
    max-width: 100% !important;
    width: 100% !important;
}

.site-body:has(.explorable-base) .tree-item-self {
    color: #586e75;
    font-family: 'Fira Code', monospace;
}

.site-body:has(.explorable-base) .tree-item-self:hover {
    background-color: rgba(88, 110, 117, 0.1);
    color: #073642;
}

.site-body:has(.explorable-base) .tree-item-inner {
    color: #586e75;
}

.site-body:has(.explorable-base) .tree-item-inner a {
    color: #586e75;
}

.site-body:has(.explorable-base) .tree-item-inner:hover a {
    color: #268bd2;
}

.site-body:has(.explorable-base) .nav-folder-title,
.site-body:has(.explorable-base) .nav-file-title {
    color: #586e75;
    font-family: 'Fira Code', monospace;
}

.site-body:has(.explorable-base) .nav-folder-title:hover,
.site-body:has(.explorable-base) .nav-file-title:hover {
    background-color: rgba(88, 110, 117, 0.1);
    color: #268bd2;
}

.site-body:has(.explorable-base) .tree-item-icon {
    color: #93a1a1;
}

.site-body:has(.explorable-base) .search-bar {
    background-color: #fdf6e3;
    border: 1px solid #93a1a1;
    color: #586e75;
    font-family: 'Fira Code', monospace;
}

.site-body:has(.explorable-base) .search-bar::placeholder {
    color: #93a1a1;
}

/* ============================================
   HACKER THEME: MOBILE RESPONSIVE STYLES
   ============================================ */

@media screen and (max-width: 750px) {
    /* Reduce body text font size on mobile */
    .hacker-theme {
        --font-text-size: 14px;
    }

    .hacker-theme p,
    .hacker-theme li {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Reduce list card padding on mobile */
    .hacker-theme.list-cards div ul > li {
        padding: 16px;
    }

    .hacker-theme.list-cards div ul ul {
        margin-top: 6px;
    }

    .hacker-theme.list-cards div ul ul > li {
        margin-inline-start: 10px;
    }
}