/* Custom Admonition for Deprecated Content */
.md-typeset .admonition.deprecated {
  border-left-color: var(--md-default-fg-color--light);
}

.md-typeset .admonition.deprecated > .admonition-title {
  background-color: var(--md-default-fg-color--lightest);
}

.md-typeset .admonition.deprecated > .admonition-title::before {
  background-color: var(--md-default-fg-color--light);
}

.md-typeset .admonition.deprecated .admonition-title {
  color: var(--md-default-fg-color--dark);
}

.screenshot {
  padding: 0.1rem;
  background-color: var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* -----------------------------
   調整代碼區塊
------------------------------*/
.md-typeset code {
    font-family: "Fira Code", monospace;
    font-weight: 500; 
    padding: 0.1em 0.3em;
    border-radius: 3px;
} 

/* Make table headers visually distinct */
.md-typeset table thead th {
    background-color: #f5f5f5;  /* light gray */
    color: #222;                /* text color */
    font-weight: 600;           /* bold */
}

/* Optional: add padding for clarity */
.md-typeset table th,
.md-typeset table td {
    padding: 0.5em 0.75em;
}


/* Inline code styling similar to Notion */
code {
    background-color: #f5f5f5;  /* soft gray background */
    color: #c7254e;             /* slightly muted red text, can adjust */
    font-family: 'Source Code Pro', 'Courier New', monospace; /* monospaced font */
    font-size: 0.9em;           /* slightly smaller than normal text */
    padding: 0.2em 0.4em;       /* subtle padding */
    border-radius: 6px;         /* rounded corners */
    border: 1px solid #e0e0e0; /* subtle border for separation */
    white-space: nowrap;        /* prevents line breaks inside inline code */
}

/* Optional: Add subtle shadow on hover for interactivity */
code:hover {
    background-color: #f0f0f0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.md-download-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25em 0.75em;
  border: 1px solid var(--md-accent-fg-color);
  border-radius: 999px;
  background-color: transparent;
  color: var(--md-accent-fg-color);
  font-size: 0.7rem;
  font-weight: 500;
  text-decoration: none;
}

.md-download-button::before {
  content: "";
  display: inline-block;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 20h14v-2H5m14-9h-4V3H9v8H5l7 7 7-7z"/></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: 1rem;
  height: 1rem;
  background-color: var(--md-accent-fg-color);
}

/* Adjust heading font-weights for better CJK rendering */

/* H1 */
.md-typeset h1 {
  font-weight: 600; /* slightly lighter than default 700 */
}

/* H2 */
.md-typeset h2 {
  font-weight: 500;
}

/* H3 */
.md-typeset h3 {
  font-weight: 500; /* match with H2 to avoid thicker look */
}

/* Optional: fine-tune line height for CJK readability */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  line-height: 1.4;
}


/* Make all grid cards have visible rounded corners */
.grid.cards li {
    border-radius: 8px !important;      /* always rounded */
    /* border: 1px solid var(--md-surface-card);         subtle border */
    /* padding: 1em;                         spacing inside */
    /* box-shadow: 0 2px 6px rgba(0,0,0,0.05); */
    /*box-shadow: 0 0 0 rgba(0,0,0,0.05); */
    /* overflow: hidden;                     important: clip inner content to corners */
    /* margin-bottom: 1em; */
    /* transition: all 0.2s ease; */
}

/* Hover effect */
.grid.cards li:hover {
    /* box-shadow: 0 0 25px 7px rgba(255, 125, 0, 0.5) !important; orange glow around box */
    /* box-shadow: 0 0 50px 0 rgba(255, 125, 0, 0.4) !important; */
    /* box-shadow: 0 0 24px 6px rgba(3, 50, 142, 0.4) !important; blue glow around box */
    border: 1px solid rgba(0, 0, 0, 0.12) !important; /* subtle gray border */
    box-shadow: 0 6px 12px rgba(0,0,0,0.1) !important;
    /* box-shadow: 24px 24px 24px rgba(0,0,0,1.1); */
    /* transform: translateY(-2px); */
    /* border: 3px solid var(--md-primary-fg);         distinct border on hover */
    /* border: 1px solid #ff7d00 !important; */
}

/* Dark mode - override inactive border to white */
body.md-slate .grid.cards li {
    border: 2px solid white !important;
}

/* Keep Material default button spacing, only override width and alignment */
.custom-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* small gap between buttons */
  justify-content: flex-start; /* align left with text above */
  margin-top: 1rem;
}

.custom-button-group .md-button {
  width: auto; /* auto-adjust width to text */
  border-radius: 8px; /* rounded corners */
}

/* 
  Make the entire 3-column layout (sidebars + content) span almost full width.
  Adjust max-width (e.g., 95%) to control how much space the layout takes.
  Use 100% for truly full-width, or lower (90–95%) to leave some margin.
*/
.md-grid {
  max-width: 95%;
  width: 95%;
}

/* 
  Allow the main content area to grow freely without a max-width constraint.
  Add padding or margin if you want some breathing space on left/right sides.
*/
.md-content {
  max-width: none;
  padding-left: 3rem;   /* increase left margin */
  padding-right: 3rem;  /* increase right margin */
}

/* 
  Remove max-width limits on both sidebars so they can scale with the grid.
  You can optionally set a fixed width if you want narrower sidebars.
*/
.md-sidebar--primary,
.md-sidebar--secondary {
  max-width: none;
}

/* Global override for primary color to a CYBERZBIZ blue */
:root  > * {
  --md-primary-fg-color:        #03328e;
}

/* Style all default buttons */
.md-button {
    border-radius: 8px !important;       /* rounded corners */
}


/* Full-width section background for product listing */
.full-width-bg {
  background-color: #f8fafc; /* light gray-blue */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 2rem 1rem;
  border-radius: 0; /* ensures full bleed */
}


/* Apply to all code blocks */
pre code {
    white-space: pre;      /* ✅ Preserve all spaces exactly (prevents collapse of indentation) */
    font-family: monospace; /* ✅ Use monospace font so each space aligns properly like in VS Code */

    /* Optional enhancements you might want: */
    overflow-x: auto;      /* ➡️ Adds horizontal scroll if code is wider than container */
    display: block;        /* ➡️ Ensures block formatting (not inline) */
    line-height: 1.5;      /* ➡️ Improves readability by spacing lines nicely */
    padding: 1em;          /* ➡️ Adds padding inside the code block for visual clarity */
    background-color: #f5f5f5; /* ➡️ Optional: light background to distinguish code block */
}

/* Reduce the default space beneath h1 */
.md-typeset h1 {
    margin: auto !important;
}

/* One-Liner Summary Style for H1 */
.md-typeset h1 small {
    font-weight: 425;       /* normal weight, thinner than H1 */
    font-size: 0.75em;       /* smaller than H1 */
    color: var(--md-typeset-secondary-text, #666); /* optional muted color */
    line-height: 1.2;
}