/* RewardClass School logo position correction — 19 October 2026.
   Coordinates mirror Bootstrap 5 Family "container-xl" gutters/breakpoints.
   Applies to School header only; leaves all navigation, labels and accounts intact.
   Old CSS had inconsistent 94vw/1220px and mobile paddings across roles. */

/* Keep header position independent of generic .topbar responsive rules. */
body .rc-main-header.topbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* Family app: 100% container with 12px gutters until 1200px. */
body .rc-main-header > .rc-header-inner {
    box-sizing: border-box;
    display: flex;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (min-width: 1200px) {
    body .rc-main-header > .rc-header-inner {
        width: 1140px !important;
        max-width: 1140px !important;
    }
}
@media (min-width: 1400px) {
    body .rc-main-header > .rc-header-inner {
        width: 1320px !important;
        max-width: 1320px !important;
    }
}

/* Family navbar-brand uses pt-2 mt-1 with a 35px image.
   Apply precise vertical offsets inside School's flex-aligned header. */
body .rc-main-header .rc-main-brand {
    box-sizing: border-box;
    padding: 8px 0 5px !important;
    margin: 4px 0 0 !important;
    min-width: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
body.teacher-app .rc-main-header .rc-main-brand,
body.platform-app .rc-main-header .rc-main-brand {
    padding-bottom: 3px !important;
}
body .rc-main-header .rc-main-brand > img.rc-brand-logo {
    box-sizing: border-box;
    display: block;
    height: 35px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
    flex-shrink: 0;
}

/* Maintain Family's 66px parent navbar reference for teacher and platform. */
body.teacher-app .rc-main-header > .rc-teacher-header-top,
body.platform-app .rc-main-header > .rc-teacher-header-top {
    min-height: 66px;
}

/* On narrow public/pupil headers the existing nav stacks below the brand.
   Adjust its vertical offset without changing the mobile navigation pattern. */
@media (max-width: 760px) {
    body:not(.teacher-app):not(.platform-app) .rc-main-header .rc-main-brand {
        padding-bottom: 4px !important;
        margin-top: 3px !important;
    }
}

/* v3 — public header: align the School logo with the *visible* Family header.
   Compared at ~1352px: Family artwork begins 64px from the left, around 15px
   from the top. The prior Bootstrap 1140px constraint placed School at ~118px.
   Limit these overrides to the guest header so teacher/admin nav is untouched. */
body.guest-app .rc-main-header {
    min-height: 62px !important;
}
@media (min-width: 951px) {
    body.guest-app .rc-main-header > .rc-header-inner {
        width: calc(100% - 24px) !important;
        max-width: 1248px !important;
        min-height: 62px !important;
        padding: 0 12px !important;
    }
}
body.guest-app .rc-main-header .rc-main-brand {
    padding: 0 !important;
    margin: 0 !important;
}
body.guest-app .rc-main-header .rc-main-brand > img.rc-brand-logo {
    height: 32px !important;
    width: auto !important;
}
/* Keep wrapped navigation intact on phones/tablets. */
@media (max-width: 950px) {
    body.guest-app .rc-main-header > .rc-header-inner {
        min-height: 62px;
    }
    body.guest-app .rc-main-header .rc-main-brand {
        margin-top: 0 !important;
    }
}


/* v4 — signed-in School headers (teachers, School Admins, pupils, Platform Admin).
   Public/guest header was already adjusted by v3.  The authenticated teacher
   two-row header still used a 1220px/94vw layout, leaving the logo noticeably
   farther right than RewardClass Family on desktop. Match Family's visible
   x/y alignment at 1352px without touching the second-row teacher navigation. */
body.teacher-app .rc-main-header > .rc-header-inner,
body.pupil-app .rc-main-header > .rc-header-inner,
body.platform-app .rc-main-header > .rc-header-inner {
    box-sizing: border-box;
    width: min(1248px, calc(100% - 24px)) !important;
    max-width: 1248px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    min-height: 62px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.teacher-app .rc-main-header .rc-main-brand,
body.pupil-app .rc-main-header .rc-main-brand,
body.platform-app .rc-main-header .rc-main-brand {
    padding: 0 !important;
    margin: 0 !important;
}
body.teacher-app .rc-main-header .rc-main-brand > img.rc-brand-logo,
body.pupil-app .rc-main-header .rc-main-brand > img.rc-brand-logo,
body.platform-app .rc-main-header .rc-main-brand > img.rc-brand-logo {
    height: 32px !important;
    width: auto !important;
    max-width: none !important;
}
/* Preserve the compact signed-in mobile toolbar without desktop offsets. */
@media (max-width: 760px) {
    body.teacher-app .rc-main-header > .rc-teacher-header-top,
    body.platform-app .rc-main-header > .rc-platform-header-top {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }
}

/* The pupil header inherits the taller general-purpose bar; align its 32px
   logo vertically with the Family reference on wide screens. */
@media (min-width: 761px) {
    body.pupil-app .rc-main-header {
        min-height: 62px !important;
    }
}
/* At phone widths there isn't room for both the full School wordmark and
   the signed-in account actions on one line. Keep both usable instead of
   compressing the actions into a tall narrow column. */
@media (max-width: 440px) {
    body.teacher-app .rc-main-header > .rc-teacher-header-top,
    body.platform-app .rc-main-header > .rc-platform-header-top {
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    body.teacher-app .rc-main-header .rc-header-tools,
    body.platform-app .rc-main-header .rc-header-tools {
        width: 100% !important;
        flex: 0 0 100% !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }
}