/* Homepage header/footer on service pages — palette aligned with services/css/variables.css */
@import './home-chrome-layout.css';

body.service-page {
    padding-top: 100px;
}

#home-chrome,
#home-chrome-footer {
    --default-font: var(--font-family-base, 'Inter', sans-serif);
    --heading-font: var(--font-family-heading, 'Outfit', sans-serif);
    --nav-font: var(--font-family-base, 'Inter', sans-serif);
    --accent-color: var(--primary, #9858FC);
    --default-color: var(--text-main, #2D2D2D);
    --heading-color: var(--text-heading, #1a1a1a);
    --contrast-color: #ffffff;
    --nav-color: var(--text-main, #2D2D2D);
    --nav-hover-color: var(--primary, #9858FC);
    --nav-dropdown-color: var(--text-main, #2D2D2D);
    --nav-dropdown-hover-color: var(--primary, #9858FC);
    --nav-dropdown-background-color: rgba(255, 255, 255, 0.98);
    --nav-mobile-background-color: #ffffff;
}

#home-chrome .header {
    --background-color: rgba(255, 255, 255, 0.92);
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(152, 88, 252, 0.12);
    box-shadow: 0 4px 24px rgba(162, 128, 255, 0.1);
}

#home-chrome .header .topbar {
    background: var(--primary-gradient, linear-gradient(135deg, #FF9AE8 0%, #A280FF 100%));
}

#home-chrome .header .logo img {
    max-height: 40px;
    filter: brightness(0) saturate(100%) invert(36%) sepia(49%) saturate(6382%) hue-rotate(254deg) brightness(95%) contrast(101%);
}

#home-chrome .navmenu a,
#home-chrome .navmenu a:focus,
#home-chrome .navmenu > ul > li > span {
    color: var(--nav-color);
}

#home-chrome .navmenu > ul > li > a:before,
#home-chrome .navmenu > ul > li > span:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--nav-hover-color);
    visibility: hidden;
    width: 0;
    transition: all 0.3s ease-in-out 0s;
}

#home-chrome .navmenu .dropdown ul.scrollable-dropdown {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--primary, #9858FC) rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, #ffffff 0%, #f8f6ff 100%);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(152, 88, 252, 0.15);
}

#home-chrome .navmenu .dropdown ul.scrollable-dropdown::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #A280FF 0%, #9858FC 100%);
}

#home-chrome .navmenu .dropdown ul.scrollable-dropdown li a:hover {
    color: var(--primary, #9858FC);
}

#home-chrome .navmenu .support-dropdown ul {
    max-height: 220px;
    overflow-y: auto;
}

#home-chrome-footer .footer.accent-background {
    --background-color: transparent;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --accent-color: #ffffff;
    background: linear-gradient(135deg, #FF9AE8 0%, #A280FF 45%, #9858FC 100%);
}

#home-chrome-footer .footer .footer-about p,
#home-chrome-footer .footer h4,
#home-chrome-footer .footer .footer-links ul a {
    color: rgba(255, 255, 255, 0.88);
}

#home-chrome-footer .footer .footer-links ul a:hover {
    color: #ffffff;
}

body.service-page .scroll-top {
    background: var(--primary-gradient, linear-gradient(135deg, #FF9AE8 0%, #A280FF 100%));
}

@media (max-width: 1199px) {
    body.service-page {
        padding-top: 60px;
    }

    #home-chrome .navmenu a,
    #home-chrome .navmenu a:focus,
    #home-chrome .navmenu > ul > li > span {
        color: var(--nav-dropdown-color);
    }
}