.container.buttons a:first-child {
    color: var(--sy-c-bold);
    font-family: Sora, Sora Fallback;
}

html.dark .container.buttons a:first-child {
    color: #1f130e;
}

.container.buttons > p {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;   /* default on desktop */
}

@media (max-width: 600px) {
    .container.buttons > p {
        flex-wrap: wrap; /* mobile: wrap to next line */
    }
}

.container.buttons a {
    border: 2px solid var(--sy-c-border);
    background-color: var(--sy-c-surface);
    border-radius: 10px;        /* final radius you want */
    padding: 0 2rem;
    font-weight: 600;
    font-size: 18px;
    line-height: 2.6rem;
    transition: all .2s;

    /* --- Scaling Fixes --- */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.6rem;             /* same as line-height for perfect alignment */
    white-space: nowrap;        /* prevents wrapping on small screens */
    box-sizing: border-box;     /* consistent padding */
}

html.dark {
  color-scheme: dark;

  /* ---- Main page background ---- */
  --sy-c-background: #1e293c;               /* deep modern navy */

  /* ---- Text colors ---- */
  --sy-c-text: #f1f5f9;                     /* bright, readable text */
  --sy-c-light: #cbd5e1;                    /* secondary text */
  --sy-c-bold: #ffffff;                     /* strong emphasis */
  --sy-c-heading: #f8fafc;                  /* headers look crisp */

  /* ---- Overlays, backdrop, contrast ---- */
  --sy-c-overlay: rgba(255, 255, 255, 0.04);
  --sy-c-background-contrast: rgba(255, 255, 255, 0.10);
  --sy-c-background-dropback: rgba(15, 23, 42, 0.75); /* soft backdrop blur */

  /* ---- Card / surface elements ---- */
  --sy-c-surface: #273449;                  /* lighter panel for cards */
  --sy-c-border: #334155;                   /* subtle borders */

  /* ---- Footer ---- */
  --sy-c-foot-background: #1e293c;          /* match main bg */
  --sy-c-foot-text: #cbd5e1;
  --sy-c-foot-divider: #0f172a;

  /* ---- Header ---- */
  --sy-c-header-background: #1e293c;
  --sy-c-header-text: #f1f5f9;
  --sy-c-header-border: #0f172a;


  /* ---- Links ---- */
  /*   --sy-c-link: inherit; */
   /*  --sy-c-link-hover: inherit;*/

/* Fix top table th block */
    --yue-c-th-background: var(--yue-c-row-background);

  /* Fix issue with code highlight when using ``text`` */
    --yue-c-code-text: var(--sy-c-text);
}

  /* remove GRID SD CARDS block shadow in dark mode */
html.dark .sd-shadow-sm {
    box-shadow: none !important;
}

  /* fix the issue with tab set with code blocks wrong background colour */
html.light .sd-tab-content {
    --code-block-background: var(--black-a12);
    --code-block-caption-background: var(--accent-3);
}

html.light {
  color-scheme: light;

  /* ==== Base background & text ==== */
  --sy-c-background: #ffffff;        /* warm cream */
  --yue-c-text: #2b1a16;             /* warm deep brown-navy */

  --sy-c-text: #2b1a16;              /* primary UI text (warm dark) */
  --sy-c-light: #6a4e3f;             /* secondary text (warm taupe) */
  --sy-c-bold: #1f130e;              /* stronger warm dark text */
  --sy-c-heading: #1f130e;           /* headings in warm dark */

  /* ==== Surfaces & borders ==== */
  --sy-c-surface: #ffeedb;           /* warm lifted surface */
  --sy-c-surface-alt: #ffe8cd;       /* section background, warm beige */

  /* warm borders instead of grey */
  --sy-c-border: #e8d8c7;            /* warm neutral border */
  --sy-c-divider: #ecdcc9;           /* warm subtle separator */

  /* ==== Header (sy-head) ==== */
  --sy-c-header-background: #fff4e5; /* warm off-white (no cold white) */
  --sy-c-header-text: #2b1a16;       /* warm dark text */
  --sy-c-header-border: #e8d8c7;     /* warm border */

  /* ==== Footer (sy-foot) ==== */
  --sy-c-foot-background: #fff4e5;   /* same as page */
  --sy-c-foot-text: #6b1a16;         /* warm secondary text */
  --sy-c-foot-divider: #e8d8c7;

  /* ==== Links ==== */
  --sy-c-link: #e88500;              /* warm orange accent */
  --sy-c-link-hover: #f68e00;

  /* ==== Overlays / subtle backgrounds ==== */
  /* 100% warm toned overlays */
--sy-c-overlay: rgba(255, 200, 150, 0.06);
--sy-c-background-contrast: rgba(255, 200, 150, 0.10);
--sy-c-background-dropback: rgba(255, 200, 150, 0.16);

  /* ==== Code blocks ==== */
  --sy-c-code-background: #ffe8cd;   /* warm beige, not grey */

  /* Fix top table th block */
  /*    --yue-c-th-background: var(--yue-c-row-background); */
    --yue-c-th-background: var(--color-surface-accent);
    --yue-c-row-background: var(--color-surface-accent);

  /* Fix issue with code highlight when using ``text`` */
    --yue-c-code-text: var(--sy-c-text);

}
}

/* Override the theme's light-mode code block variables */
html.light,
html.light .sd-tab-content,
html.light .sd-tab-content .highlight,
html.light .sd-tab-content .highlight pre,
html.light .dark-code {
    --code-block-background: var(--black-a12) !important;
    --code-block-caption-background: #1c2024 !important;
    --code-block-highlight: var(--white-a2) !important;
    --code-block-linenos-divider: var(--white-a4) !important;
}

html.light .yue .surface {
    --sd-color-card-background: var(--sy-c-header-background);
}

html.dark .yue .surface {
    --sd-color-card-background: var(--sy-c-header-background);
}

html.dark .sd-card {
       background-color: var(--yue-c-th-background);

}

/* remove the button from search */
.searchbox kbd {
    display: none !important;
}