:root {
  /* Wardyati Branding Colors */
  --md-primary-fg-color:        #1e60a1;
  --md-primary-fg-color--light: #5289bc;
  --md-primary-fg-color--dark:  #003a6d;
}

/* Lighten primary color for better contrast in dark mode */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--md-primary-fg-color--light);
}

/* Question Admonition customization */
.md-typeset .admonition.question,
.md-typeset details.question {
  border-color: var(--md-primary-fg-color);
}

.md-typeset .question > .admonition-title,
.md-typeset .question > summary {
  background-color: rgba(30, 96, 161, 0.1);
}

.md-typeset .question > .admonition-title::before,
.md-typeset .question > summary::before {
  background-color: var(--md-primary-fg-color);
  -webkit-mask-image: var(--md-admonition-icon--question);
          mask-image: var(--md-admonition-icon--question);
}

.md-typeset details.question[open] > summary {
  border-bottom: 0.05rem solid rgba(30, 96, 161, 0.2);
}

.md-typeset details.question > summary::after {
  background-color: var(--md-primary-fg-color);
}

.md-typeset details.question > summary:hover {
  background-color: rgba(30, 96, 161, 0.15);
}

.md-typeset .admonition.question:focus-within,
.md-typeset details.question:focus-within {
  box-shadow: none;
}

/* Fix icon and inline img alignment when using IBM Plex Sans Arabic */
.md-typeset .twemoji,
.md-typeset img {
  top: 0.25em;
  position: relative;
}

/* Fix breadcrumb arrow direction and alignment for RTL */
.md-path__item:not(:first-child):before {
  transform: scaleX(-1);
  top: 0.25em;
  position: relative;
}

/* Adjust the logo size */
.md-header__button.md-logo img, 
.md-header__button.md-logo svg {
    height: 2rem;
    width: auto;    /* Keeps aspect ratio intact */
}

/* Button hover primary color should match brand */
.md-typeset .md-button:hover,
.md-typeset .md-button--primary:hover {
  background-color: var(--md-primary-fg-color--light);
  border-color: var(--md-primary-fg-color--light);
}

/* Increase heading weights for better visibility */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
  font-weight: 700;
}

/* Ensure tabler icons with fill="none" are displayed correctly */
.icon-tabler[fill="none"], .icon-tabler [fill="none"] {
  fill: none !important;
}