/* Jo Cor Hero — logo overrides.
 *
 * Default NC rings logo at /core/img/logo/logo.svg is 175x130.
 * We replace it with the Jo Cor logo on login (bigger card, more
 * breathing room). Header bar mini-logo (62x50) is sized in the main
 * stylesheet to match NC's default and inverted in dark mode.      */

#body-login .logo {
    background-image: url('../img/logo-hero-900.webp') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 200px !important;
    height: 156px !important;
    margin: 0 auto 44px auto !important;
    display: block !important;
    /* invert() FIRST: the artwork ships dark-on-light and the guest page is
       near-black, so without this the mark is a black silhouette on black.
       This used to live in jocor_hero.css (see the note below the header
       rule) and was lost when that file was rewritten on 2026-07-27.
       Order matters — the drop-shadows run after the invert, so the glow
       stays teal instead of being inverted into its complement. */
    filter: invert(1)
            drop-shadow(0 0 8px rgba(19, 194, 192, 0.45))
            drop-shadow(0 0 28px rgba(19, 194, 192, 0.18))
            drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) !important;
    transition: filter 240ms ease;
}

#body-login .logo:hover {
    filter: invert(1)
            drop-shadow(0 0 12px rgba(19, 194, 192, 0.7))
            drop-shadow(0 0 36px rgba(19, 194, 192, 0.3))
            drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7)) !important;
}

/* Header bar mini logo (62x50) — Jo Cor mark, white in dark mode.
 * The actual invert-filter is applied in jocor_hero.css to handle
 * data-themes toggling.
 *
 * FIXED 2026-07-27: this used to lead with `#body-login .header-guest .logo`.
 * On the login page the hero logo IS inside #header.header-guest, so that
 * selector (1,2,0) outranked the `#body-login .logo` rule above (1,1,0) and
 * swapped the 200x156 hero logo for the 64px header mark — the login page
 * lost its large logo. The guest header is excluded now; this rule is only
 * for the authenticated top bar.                                    */
#header:not(.header-guest) .header-app .app-image,
.app-logo {
    background-image: url('../img/logo-mark-64.webp') !important;
}

/* Jo Cor Hero — login page mobile spacing override (Aug 2026).
 *
 * Symptom: on screens ≤1024px, Nextcloud's stock guest stylesheet sets
 * `.wrapper { margin-top: 0 }`, so the Jo Cor logo sits flush against
 * the top edge of the viewport on phones. On desktop it gets 10vh which
 * is fine. The header guest itself has no padding either way.
 *
 * Fix: give .wrapper a small padding-top on phones only, so the logo
 * has the same breathing room regardless of viewport. The desktop rule
 * stays untouched. Inlined here (not @import) so it stays inside one
 * already-loaded file — Nextcloud would not auto-link a new CSS file
 * without editing appinfo/info.xml, and editing that risks app-update
 * surprises.
 *
 * Picked 6vh on phones (4rem cap below 360px wide) to keep the form
 * comfortably above the fold on 360x780 / 390x844 / 412x915 viewports
 * without pushing the form off the bottom on the smallest handsets.
 * The desktop 10vh from Nextcloud stock is unchanged.                */
#body-login .wrapper {
    padding-top: 6vh;
}

@media (max-width: 1024px) {
    #body-login .wrapper {
        margin-top: 0 !important;
        padding-top: 6vh;
    }
}

@media (max-width: 360px) {
    #body-login .wrapper {
        padding-top: 4rem;
    }
}