/* Hero page and content-hero page header text color - can be changed independently */
body.hero-page .header-inner h1 {
    color: var(--color-header-text-hero);
}

/* Hero page and content-hero page header text color - can be changed independently */
body.hero-page .header-inner p {
    color: var(--color-header-text-hero);
}

/* Hero page and content-hero page header navigation text color */
body.hero-page .navbarLinks a,
body.hero-page .navbarSocialMedia a,
body.hero-page .language-toggle {
    color: var(--color-header-text-hero);
}


/* Hero page and content-hero page hover text color */
body.hero-page .navbarLinks a:hover,
body.hero-page .navbarSocialMedia a:hover,
body.hero-page .language-toggle:hover {
    color: var(--color-header-text-hero);
}


/* Hero page and content-hero page header navigation hover color */
body.hero-page #site-header a:hover,
body.content-hero-page #site-header a:hover {
    color: var(--color-header-text-hero) !important;
}

/* Responsive design for header */
@media (max-width: 768px) {
    #site-header {
        height: auto;
        min-height: var(--spacing-header-height);
    }
    
    .header-inner {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }
    
    .outer {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .navbarLinks {
        width: 100%;
        justify-content: center;
    }
    
    .navbarSocialMedia {
        width: 100%;
        justify-content: center;
    }
    
    .header-inner h1 {
        font-size: calc(var(--font-size-2xl) * 1.5); /* 1.5x larger: 24px * 1.5 = 36px */
    }
    
    .header-inner p {
        font-size: calc(var(--font-size-base) * 1.5); /* 1.5x larger: 16px * 1.5 = 24px */
    }
}

@media (max-width: 480px) {
    .navbarSocialMedia svg {
        width: 18px;
        height: 18px;
    }
    
    .navbarSocialMedia a {
        width: auto;
        height: auto;
        padding: var(--spacing-xs);
    }
    
    .language-toggle {
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs);
    }
    
    .navbarLinks a {
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs);
    }
}