\/* --- 1. OFFICIAL & ALTERNATIVE WEB FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,500&family=Poppins:wght@400;500&display=swap');

/* Apply Avenir (or Nunito fallback) to the body text */
body, .md-typeset, .md-nav__link, .md-tabs__link, .md-search__input { 
    font-family: 'Avenir', 'Avenir LT Pro', 'Nunito Sans', sans-serif !important; 
}

/* Apply Poppins to the headers */
h1, h2, h3, h4, h5, h6, .md-header__title { 
    font-family: 'Poppins', sans-serif !important; 
}

/* --- 2. GLOBAL STYLES --- */
body {
    background-color: #FCFCFC !important; /* PayRange Off White */
}

.md-typeset {
    color: #000000; /* PayRange Black accent for readability */
    font-size: 16px;
}

/* --- 3. THE GRADIENT HEADER --- */
.md-header {
    background: linear-gradient(to right, #00BDF4, #00CFA7) !important; /* Approved Cyan/Green Gradient */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; 
}

/* Make header text white so it pops on the gradient */
.md-header__button, .md-header__title, .md-header__topic {
    color: #FCFCFC !important; 
}

/* Clean search bar inside the gradient */
.md-search__input {
    background-color: #FCFCFC !important;
    border-radius: 6px !important; 
    color: #00436B !important; /* PayRange Denim text */
}

.md-search__icon {
    color: #00436B !important;
}

/* --- 4. CONTENT HEADERS & LINKS --- */
h1, h2, h3, h4, h5, h6 { 
    font-weight: 500 !important; /* Set to Poppins Medium per brand mandate */
    color: #00436B !important; /* PayRange Denim */
}

.md-typeset a {
    color: #00BDF4; /* PayRange Cyan */
    text-decoration: none;
    font-weight: 500;
}

.md-typeset a:hover {
    color: #00CFA7; /* PayRange Green */
}

/* --- 5. BUTTON STYLING --- */
.md-typeset .md-button {
    background-color: #00CFA7 !important; /* PayRange Green */
    color: #FCFCFC !important;
    border-radius: 50px !important; 
    font-family: 'Poppins', sans-serif !important; 
    font-weight: 500; /* Adjusted to Poppins Medium */
    border: none;
    padding: 10px 24px;
    transition: all 0.2s ease;
}

.md-typeset .md-button:hover {
    background-color: #00B9BE !important; /* PayRange Teal */
    transform: translateY(-2px);
}

/* --- 6. NAVIGATION TABS --- */
.md-tabs {
    background-color: #FCFCFC !important; 
    color: #00436B !important;
    border-bottom: 1px solid #E4F7FE; /* PayRange Light Sky Accent */
}

.md-tabs__link {
    color: #00436B !important;
    font-weight: 500;
}

.md-tabs__link--active, .md-tabs__link:hover {
    color: #00CFA7 !important; 
}

/* --- 7. LAYOUT EXPANSION & CLEANUP --- */
.md-sidebar--secondary {
    display: none !important;
    width: 0 !important;
    visibility: hidden !important;
}

/* Expand the entire grid to use the freed-up space */
.md-grid {
    max-width: 1400px !important; 
}

/* Expand the central text area for wider manuals */
.md-content {
    max-width: 1000px;
    margin: 0 auto; /* Centers the content block perfectly */
}

/* --- 8. PAYRANGE LOGO NAVIGATION --- */

/* Make navigation bar slightly taller */
.md-tabs {
    background-color: #FCFCFC !important;
    border-bottom: 1px solid #E4F7FE;
    min-height: 60px !important;
}

/* Hide Home text */
.md-tabs__item:first-child .md-tabs__link {
    font-size: 0 !important;
    width: 190px;
}

/* Insert PayRange logo */
.md-tabs__item:first-child .md-tabs__link::before {
    content: "";
    display: block;
    width: 170px;
    height: 40px;
    margin: 0 auto;

    background-image: url("../images/payrange-logo.png");
    background-repeat: no-repeat;
    background-position: center 0px;
    background-size: contain;
}

/* Remove Material logo from blue header */
.md-header__button.md-logo {
    display: none !important;
}

/* Center navigation items vertically */
.md-tabs__list {
    align-items: center;
}

/* Vertically center all navigation tabs */

.md-tabs__list {
    display: flex !important;
    align-items: center !important;
}

.md-tabs__item {
    display: flex !important;
    align-items: center !important;
}

.md-tabs__link {
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
}

/* Manage Training PDF Links */
.md-typeset h3 a {
    font-size: 1rem !important;
    font-weight: 500 !important;
}

.md-typeset h3 {
    margin-bottom: 0.25rem !important;
}