/*Styles*/
:root {
  --md-text-font: "Noto Sans", sans-serif;
  --md-text-fontsize: "2em"
}

/* Heading levels */
/* 1. Define colors for Light Mode (Default) */
:root [data-md-color-scheme="default"] {
  --heading-h1-color: #007bff; /* Dark Blue */
}

/* 2. Define colors for Dark Mode */
:root [data-md-color-scheme="slate"] {
  --heading-h1-color: #ffffff; /* White */
}

/* 3. Apply the variable to your H1 */
.md-typeset h1 {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--heading-h1-color); /* This switches the color */
}
/* Targets h2 and headings in snippets */
.md-typeset h2 {
  font-weight: 700;
}

/* This hides the paragraph link icon globally */
.md-typeset .headerlink {
    display: none !important;
} 
body, input {
  font-family: "Noto Sans", sans-serif !important;
}

.myBlockQuoteC {
  cursor: pointer;
  left: 0;
  background-color: #F0F0F0;
  color: black;
  padding: 5px 10px;
  border: 1px solid lightgrey; 
  border-radius: 5px;
  position: relative; 
}

.myBlockQuoteC code {
  font-size: 14px; 
  display: block;
  white-space: pre-wrap;
}

/* Tier Badge Base Styles */
.badge {
    font-size: 0.3em;
    vertical-align: middle;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Pro - Blue/Teal (Standard for Growth) */
.pro::after {
    content: "PRO";
    display: inline-block;
    position: relative;
    top: -1em;              /* Moves it up like a superscript */
    background-color: #007bff;
    color: white;
    vertical-align: middle;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
}

/* Enterprise - Standard */
.enterprise::after {
    content: "ENTERPRISE";
    position: relative;
    top: -0.5em;              /* Moves it up like a superscript */
    background-color: #7e56c2;
    color: white;
    vertical-align: middle;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
}


/* New - Animated Star Badge */
.new::after {
    content: "NEW";
    display: inline-block;
    position: relative;
    top: -1em;              /* Moves it up like a superscript */
    background-color: #ff4500; /* Orange-Red */
    color: white;
    vertical-align: middle;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* 1. Common Tooltip Styling tier badge */
.pro:hover::before, 
.enterprise:hover::before, 
.new:hover::before {
    position: absolute;
    z-index: 10;
    bottom: 150%; /* Position it above the badge */
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background-color: #333; /* Dark tooltip background */
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap; /* Keeps text on one line */
    font-weight: normal;
    text-transform: none; /* Prevents tooltip from being all caps */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 2. Set the Tooltip Text for each class */
.pro:hover::before {
    content: "Available on the Pro plan";
}

.enterprise:hover::before {
    content: "Contact sales for Enterprise Plan";
}

.new:hover::before {
    content: "Newly released!";
}

/* 3. Ensure the parent element is the "anchor" */
.pro, .enterprise, .new {
    position: relative; /* This allows the tooltip to sit relative to the badge */
    display: inline-block;
    cursor: help;
}


/*Adjusting Logo Size*/
.md-header__button.md-logo img {
    height: 1.5rem; /* Adjust this value to scale the logo  - increase value to increase logo size*/
    width: auto;
    margin-top: 0.0rem; /* Nudges it to line up with the text - reduce value to align site name down*/
}

/* 1. Hide the dynamic section title that appears on scroll */
.md-header__topic[data-md-component="header-topic"] {
    display: none !important;
}

/* 2. Ensure the Site Name (the first topic) is always displayed */
.md-header__topic:first-child {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ==========================================
   1. LIGHT MODE COLORS (default)
   ========================================== */
[data-md-color-scheme="default"] {
  /* Top Title Bar (Header) */
  --md-primary-fg-color:        #1289c9; /* Bright Blue Header */
  --md-primary-fg-color--dark:  white; /* Header Hover/Accent */

  /* Button Colors */
  --custom-button-bg:           #1289c9; /* Bright Blue Button */
  --custom-button-hover:        #0355a4; /* Dark Blue Hover */
}


/* ==========================================
   2. DARK MODE COLORS (slate)
   ========================================== */
[data-md-color-scheme="slate"] {
  /* Top Title Bar (Header) */
  --md-primary-fg-color:        #0355a4; /* Dark Blue Header */
  --md-primary-fg-color--dark:  white; 

 /* --- Hyperlink Colors --- */
  --md-typeset-a-color:         #96c1f2; /* Your bright link blue */
  --link-hover-glow:            white; 

  /* Button Colors */
  --custom-button-bg:           #1289c9; /* Light Button */
  --custom-button-hover:        #0355a4; /* Darker Blue Hover */

}


/* ==========================================
   3. APPLYING THE COLORS TO BUTTONS
   ========================================== */

/* Standard Buttons */
.md-button {
  background-color: var(--custom-button-bg) !important;
  color: white !important;
  border-color: var(--custom-button-bg) !important;
  transition: background-color 0.3s ease;
}

/* Button Hover State */
.md-button:hover {
  background-color: var(--custom-button-hover) !important;
  border-color: var(--custom-button-hover) !important;
}

/* Primary Style Buttons (if you use .md-button--primary) */
.md-button--primary {
  background-color: var(--custom-button-bg);
  border-color: var(--custom-button-bg);
}

/* video */
video::-webkit-media-controls-picture-in-picture-button {
    display: block !important;
}