/* Shared confirmed picture logo in the three role-page headings. */
#global-header h1 {
    display: flex;
    align-items: center;
    column-gap: var(--header-item-gap, 10px);
    line-height: 1.3;
}
#global-header h1 .header-picture-logo {
    display: block;
    height: 1.4em;
    width: auto;
    max-width: 2.6em;
    object-fit: contain;
    flex-shrink: 0;
}
#global-header h1 .header-title-text { min-width: 0; }

#logout_btn .header-logout-image {
    display: block;
    height: 36px;
    width: 54px;
    object-fit: contain;
    pointer-events: none;
}

body.login-page #loginForm .login-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.3;
}
body.login-page .login-picture-logo {
    display: block;
    height: 1.2em;
    width: auto;
    flex-shrink: 0;
}
body.login-page .login-title span { min-width: 0; }

body.login-page #loginForm .secondary-link {
    box-sizing: border-box;
    width: 100%;
    padding: 14px;
    border-radius: 6px;
    background-color: #079293;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
body.login-page #loginForm .secondary-link:hover { background-color: #067f80; }
body.login-page #loginForm .secondary-link:focus-visible {
    outline: 3px solid #77cccc;
    outline-offset: 3px;
}

@media(max-width:768px) {
  #global-header .header-title-text .header-service-name { display:none; }
  #global-header .header-title-text:has(.header-school-name) { display:flex; align-items:center; }
  #global-header .header-school-name { position:static; }
  #global-header:has(.header-school-name) #logout_btn .header-logout-image { transform:none; height:32.4px; width:48.6px; }
}

/* One visual gap on both sides, independent of the text size. */
#global-header { --header-item-gap: 10px; }
#global-header .user-actions,
#global-header .staff-header-actions { gap: var(--header-item-gap); }
#global-header #logout_btn { padding: 0; flex-shrink: 0; min-height: 44px; display:flex; align-items:center; justify-content:center; }
#global-header .household-student-trigger { padding-inline:0 !important; min-height:44px; }
@media(max-width:768px) {
 #global-header { --header-item-gap: 6px; }
 #global-header[data-member-page] h1 { font-size:22px; }
 #global-header[data-member-page] .header-title-text { font-size:inherit; line-height:1.2; }
 #global-header[data-member-page] #user-info-display { display:flex; align-items:center; line-height:24px; }
}