.main-header {
    background: #fff; padding: 1.5rem 5%; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.branding { display: flex; align-items: center; gap: 15px; }
.title-group h1 { font-size: 1.4rem; margin: 0; color: var(--primary); }
.tagline { font-size: 0.9rem; color: #666; font-style: italic; }

.logo-container { 
    width: 120px; 
    flex-shrink: 0; /* Prevents the logo from getting squished */
}

.brand-logo {
    width: 100%;  /* THIS IS THE MISSING PIECE */
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }

.nav-link { 
    color: var(--accent); 
    text-decoration: none; 
    font-weight: bold; 
    padding: 10px 20px; 
    border: 2px solid var(--accent); 
    border-radius: 5px; 
    transition: 0.3s; 
    cursor: pointer; /* THE FIX: Adds the hand icon */
}

.nav-link:hover { background: var(--accent); color: white; }



@media (min-width: 900px) {
    .main-header { flex-direction: row; justify-content: space-between; }
    .title-group h1 { font-size: 1.8rem; }
}