/* --- Header (Normal Flow, Not Fixed) --- */
.site-header {
    background-color: var(--primary-orange);
    padding: 0.5rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;

    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* --- Logo / Left Side (Dual Line) --- */
.logo-link {
    display: flex;
    flex-direction: column; /* stack text above image */
    align-items: flex-start;
    color: white;
	text-decoration: none;
}

.logo-text {
    margin-bottom: 4px; /* small space between title and image */
}

.header-logo {
    height: 24px;   /* fixed height */
    width: auto;
    display: block;
}


/* --- Social Icons (Right Side) --- */
.social-list {
    display: flex;
    gap: 1.5rem; /* slightly bigger gap for larger icons */
    align-items: center;
	list-style: none;
}

.social-list a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-list img {
    width: 24px;   /* updated from 24px */
    height: 24px;  /* updated from 24px */
    filter: brightness(0) invert(1); /* keeps icons white */
}


/* --- Responsive Styles --- */

/* Mobile (default / <768px) */
@media (max-width: 767px) {
	.header-left {
		padding-left: 24px;
	}

    .logo-text {
        font-size: 1rem;
    }

    .header-logo {
        height: 20px;
    }

    .social-list {
        gap: 1rem;
    }

    .social-list img {
        width: 24px;
        height: 24px;
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
	.header-left {
		padding-left: 32px;
	}
    .logo-text {
        font-size: 1.1rem;
    }

    .header-logo {
        height: 24px;
    }

    .social-list img {
        width: 28px;
        height: 28px;
    }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
	.header-left {
		padding-left: 48px;
	}
	
    .logo-text {
        font-size: 1.2rem;
    }

    .header-logo {
        height: 24px; /* keep logo small and consistent */
    }

    .social-list img {
        width: 32px;
        height: 32px;
    }
}