@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;600&display=swap');

/* ==========================================================================
   KKUH - Klub kultury Uherské Hradiště

   The intranet at intranet.kkuh.cz already runs navbar-dark bg-dark, which is
   what this app uses by default - so the bar is deliberately left untouched and
   only the accent, the loader and the login screen are dressed.

   Type and colour come from kkuh.cz: Playfair Display headlines over Source Sans
   body copy, near black surfaces, and the brick red that the logo mark is built
   from (#B02811 in the artwork, #B23425 on the web - the artwork wins).
   ========================================================================== */

.theme-kkuh {
    --kk-red: #B02811; /* the square in KKUHLogo.png */
    --kk-red-deep: #8E200D;
    --kk-ink: #181818; /* the site's dominant surface */
    --kk-ink-2: #232323;
    --kk-line: #3A3A3A;
    --kk-muted: rgba(255, 255, 255, 0.62);
    --loader-accent: var(--kk-red); /* consumed by Loader.razor */
    --navbar-accent: var(--kk-red); /* consumed by NavMenu.razor (E-Learning label) */
}

/* The wordmark is white artwork, so it needs the dark bar it was drawn for */
.theme-kkuh .navbar .navbar-brand-logo {
    height: 26px !important;
}

.theme-kkuh .navbar .navbar-app-label {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ---------- Backdrop ----------
   Painted whenever a boot or login surface is on show:
   1. the login screen is rendered (prerendered or interactive - same DOM)
   2. authenticated boot: the loader is the first element in <body> */
body.theme-kkuh:has(.login-page),
body.theme-kkuh:has(> #blazor-loader:first-child) {
    background: var(--kk-ink);
    background-attachment: fixed;
}

/* ---------- Boot loader ---------- */
body.theme-kkuh:has(> #blazor-loader:first-child) #blazor-loader {
    color: #fff;
    font-family: 'Source Sans 3', sans-serif;
}

.theme-kkuh #blazor-loader .progress {
    background-color: var(--kk-ink-2);
    border: 1px solid var(--kk-line);
}

/* ---------- Login card ---------- */
.theme-kkuh .login-page {
    padding-top: 6vh;
}

.theme-kkuh .login-card {
    background: var(--kk-ink-2);
    border: 1px solid var(--kk-line);
    padding: 1.75rem 1.75rem 2rem;
    color: #fff;
    font-family: 'Source Sans 3', sans-serif;
}

/* The mark is a red square with a white chevron cut out of it - shown as itself
   rather than flattened into a rule, since it is the whole of the identity */
.theme-kkuh .login-accent {
    height: 46px;
    width: 53px;
    margin-bottom: 1.2rem;
    background: url('/brandings/kkuh/kkuh_mark.png') left center / contain no-repeat;
}

/* Playfair is the one thing that says "kultura" rather than "software" */
.theme-kkuh .login-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.2rem;
}

.theme-kkuh .login-card .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--kk-muted);
}

.theme-kkuh .login-card .form-control {
    background-color: var(--kk-ink);
    border: 1px solid var(--kk-line);
    color: #fff;
}

.theme-kkuh .login-card .form-control:focus {
    background-color: var(--kk-ink);
    color: #fff;
    border-color: var(--kk-red);
    box-shadow: 0 0 0 0.2rem rgba(176, 40, 17, 0.25);
}

.theme-kkuh .login-card .form-control:disabled {
    background-color: var(--kk-ink);
    opacity: 0.65;
}

.theme-kkuh .login-card .btn-primary,
.theme-kkuh .login-card .btn-primary:disabled {
    background-color: var(--kk-red);
    border-color: var(--kk-red);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.theme-kkuh .login-card .btn-primary:hover,
.theme-kkuh .login-card .btn-primary:focus,
.theme-kkuh .login-card .btn-primary:active {
    background-color: var(--kk-red-deep);
    border-color: var(--kk-red-deep);
    color: #fff;
}

.theme-kkuh .login-card .btn-outline-secondary {
    border-color: var(--kk-line);
    color: #fff;
}

.theme-kkuh .login-card .btn-outline-secondary:hover {
    background-color: var(--kk-line);
    border-color: var(--kk-line);
    color: #fff;
}

.theme-kkuh .login-card hr,
.theme-kkuh .login-card .text-muted {
    color: var(--kk-muted) !important;
    border-color: var(--kk-line);
}