/* HEADER BAR COLOUR AND TEXT STYLING */

:root {
  --md-primary-fg-color: #4a4bcd;
}

.md-header__topic {
  font-weight: 500 !important
}

/* BADGES FOR VERSIONS AND DEFAULT VARIABLES - UNUSED */

.mdx-badge {
  font-size: 0.85em;
}

/* Badge moved to the right */
.mdx-badge--right {
  float: right;
  margin-left: 0.35em;
}

/* Badge icon */
.mdx-badge__icon {
  padding: 0.25rem; /* px2rem(4px) */
  background: var(--md-accent-fg-color--transparent);
  border-start-start-radius: 0.125rem; /* px2rem(2px) */
  border-end-start-radius: 0.125rem; /* px2rem(2px) */
}

/* If icon is alone, round corners */
.mdx-badge__icon:last-child {
  border-radius: 0.125rem; /* px2rem(2px) */
}

/* Badge text */
.mdx-badge__text {
  padding: 0.25rem 0.375rem; /* px2rem(4px) px2rem(6px) */
  border-start-end-radius: 0.125rem; /* px2rem(2px) */
  border-end-end-radius: 0.125rem; /* px2rem(2px) */
  box-shadow: 0 0 0 1px inset var(--md-accent-fg-color--transparent);
}

/* UNDER CONSTRUCTION STATUS INDICATORS */

.md-status--locked::after {
  content: "beta";
  background: #ccffef;
  color: #00bf85;
  padding: 1px 0px;
  width: 40px;
  font-weight: 600;
  font-family: "Roboto Mono";
  height: 18px;
  border-radius: 3px;
  vertical-align: middle;
  font-size: small;
  text-align: center;  
  /* Remove mask properties since we're not using an icon anymore */
  mask-image: none;
  -webkit-mask-image: none;
}

.md-status--locked:hover:after {
  background-color: #b3ffe8; /* Darker shade on hover */
}

.md-status-title--locked {
  background-color: #ccffef !important;
  color: #00bf85 !important;
  font-weight: bold;
}


/* FEATURE FLAG BANNER */

.contact-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: white;
    padding: 16px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-container-text {
  margin: 0
}

/* VIDEO ALIGNMENT AND BREAKPOINTS */

.video-container video {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}


/* OTHER */

.header-content{
  display: flex;
  justify-content: space-between;
}

.header-logo-text {
  font-weight: 500;
  font-size: 15pt;
  opacity: 1;
}

.header-link {
  color: white !important;
  opacity: 0.7;
}

.header-link:hover {
  opacity: 1;
}

.header-content-text {
  display: flex;
  align-items: center;
}

.custom-banner {
  background-color: #4a4bcd;
}

.md-header__button-logo {
  font-size: 25pt;
  margin-left: 4px;
}