/* ============================================
   FONT OPTIMIZATION - FORCE FONT-DISPLAY SWAP
   ============================================ */

/* Note: Material's privacy plugin loads fonts without font-display: swap */
/* Unfortunately, we can't override this via CSS alone */
/* The font-display property must be set in the @font-face src declaration */
/* This is a known limitation of Material for MkDocs privacy plugin */

/* ============================================
   HIDE ALL TEXT - SHOW ONLY LOGO
   ============================================ */

/* 1. Hide the header title container (site name & page title in header) */
.md-header__title {
    display: none !important;
}

/* 2. Keep tabs structure but hide text (accessible method) */
.md-tabs__link {
    /* Visually hidden but accessible to screen readers */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Preserve tab spacing and structure */
.md-tabs__item {
    min-height: 48px !important;
}

/* 3. Ensure the logo remains visible */
.md-header__button.md-logo {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. Optimize logo sizing for your custom SVG - PHASE 4: Explicit dimensions */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 32px !important;
    width: 377px !important;  /* Calculated from SVG ratio: 267.15/22.634 * 32 = 377px */
    display: block !important;
}

/* 4a. Invert logo colors in dark mode */
[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-header__button.md-logo svg {
    filter: invert(1) !important;
}

/* 5. Additional specificity to ensure text stays hidden */
.md-header__title .md-header__ellipsis,
.md-header__title .md-header__topic {
    display: none !important;
}

/* ============================================
   PROFILE PHOTO ALIGNMENT
   ============================================ */

/* Ensure profile photos align with the top of bio text */
.md-typeset .grid img[align="left"] {
    margin-top: 0 !important;
    margin-right: 1em !important;
    margin-bottom: 0.5em !important;
    vertical-align: top !important;
}

/* Only remove top margin from first paragraph in grid cards (bio text) */
.md-typeset .grid > ul > li > p:first-of-type {
    margin-top: 0 !important;
}

/* Add half-line spacing after job titles in profile cards */
.md-typeset .grid > ul > li > p > strong:last-child {
    display: inline-block !important;
    margin-bottom: 0.5em !important;
}

/* ============================================
   ACCESSIBILITY: LINK UNDERLINES
   ============================================ */

/* Ensure links in content have underlines (fixes "Links rely on color" error) */
.md-typeset a {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
}

/* Exception: Don't underline links that are buttons or cards */
.md-button,
.md-typeset .grid a {
    text-decoration: none !important;
}

/* ============================================
   ACCESSIBILITY: FOOTER CONTRAST
   ============================================ */

/* Darken footer copyright text for better contrast */
.md-footer-copyright {
    opacity: 0.85 !important;
}

/* ============================================
   LIST SPACING OPTIMIZATION
   ============================================ */

/* Tighten bullet point spacing */
.md-typeset li {
    margin-bottom: 0.25em !important;
}

/* Ensure the list itself doesn't have excessive bottom padding */
.md-typeset ul, 
.md-typeset ol {
    margin-bottom: 1em !important;
}

/* ============================================
   DESKTOP SPACING & LUXURY LAYOUT
   ============================================ */

/* Desktop only (min-width: 76.25em = 1220px) */
@media screen and (min-width: 76.25em) {
    
    /* Increase header height for luxury feel */
    :root {
        --md-header-height: 6rem;
    }
    
    /* Ensure header elements are vertically centered */
    .md-header__inner {
        min-height: 6rem !important;
        align-items: center !important;
    }
    
    /* Add luxury breathing room to logo */
    .md-header__button.md-logo {
        margin-left: 3rem !important;
        padding-top: 1rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* Force logo to stay small and understated */
    .md-header__button.md-logo img,
    .md-header__button.md-logo svg {
        height: 24px !important;       /* Small and refined */
        width: auto !important;        /* Maintain aspect ratio */
        max-height: 24px !important;   /* Double safety */
    }
    
    /* Add generous left margin to content */
    .md-content {
        margin-left: 10% !important;
        padding-left: 2rem !important;
    }
    
    /* Ensure the content doesn't overflow on the right */
    .md-content__inner {
        max-width: 100%;
    }
}

/* ============================================
   MOBILE/TABLET FIX - PREVENT LOGO CUTOFF
   ============================================ */

/* Mobile and Tablet (max-width: 76.25em = below 1220px) */
@media screen and (max-width: 76.25em) {
    
    /* Prevent long logo text from being cut off on narrow screens */
    .md-header__button.md-logo img,
    .md-header__button.md-logo svg {
        height: auto !important;       /* Let height adjust automatically */
        max-height: 24px !important;   /* Cap the height */
        max-width: 65vw !important;    /* CRITICAL: Never exceed 65% of screen width */
    }
}