/**
 * TPO Logo Link Styles
 * Ensures logo is clearly clickable and functional
 * Adaptive color based on background context
 */

/* Make sure logo link is clickable */
.logo_anchor {
    cursor: pointer !important;
    pointer-events: auto !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: opacity 0.3s ease !important;
}

/* Logo text styling - "the procurement office" */
.logo_anchor span {
    font-family: 'Funnel Display', sans-serif !important;
    font-size: 26px !important; /* Increased from 24px to 26px */
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    padding: 4px 8px !important; /* Add padding for better centering */
    display: inline-block !important;
}

/* Hover effect to show it's clickable */
.logo_anchor:hover {
    opacity: 0.7 !important;
}

/* Ensure the span inside maintains styling */
.logo_anchor span {
    pointer-events: none !important;
    display: inline-block !important;
}

/* Remove any conflicting styles */
.logo_anchor:focus {
    outline: 2px solid #0433ff !important;
    outline-offset: 4px !important;
}

/* Ensure z-index is high enough */
.header_logo {
    z-index: 100 !important;
}

/* Fix logo container width to accommodate "the procurement office" text */
.c-header .header_inline .inline_logo {
    max-width: 300px !important; /* Increased to accommodate larger font + padding */
    display: flex !important;
    align-items: center !important;
}

/* Extend the white background box to cover full logo text on scroll */
@media (min-width: 1025px) {
    html.has-scrolled .c-header .header_inline .inline_logo:before {
        width: calc(100% + 52px) !important; /* Increased to fully cover larger text */
        padding-right: 24px !important; /* Extra padding on right */
        border-radius: 12px !important; /* Softer corners */
    }
}

/* Ensure logo text has proper z-index above the white box */
.c-header .header_inline .logo_anchor {
    position: relative !important;
    z-index: 10 !important;
}

/* ADAPTIVE LOGO COLORS */

/* Homepage (dark gradient background) - WHITE logo */
body.page-homepage .logo_anchor span {
    color: #ffffff !important;
}

/* IMPORTANT: When scrolled (white box appears) - Change to BLUE for contrast */
html.has-scrolled .c-header .logo_anchor span {
    color: #0433ff !important;
    transition: color 0.3s ease !important;
}

/* Sub-pages (light background) - BLUE logo */
body:not(.page-homepage) .logo_anchor span {
    color: #0433ff !important;
}

/* Footer logo on homepage should also be white */
body.page-homepage .footer_logo .logo_anchor span {
    color: #ffffff !important;
}

/* Focus outline color adjustment for dark backgrounds */
body.page-homepage .logo_anchor:focus {
    outline-color: #ffffff !important;
}