/*
 * SMOKNHOPS theme for the Authelia portal (auth.smoknhops.com).
 * Injected by NPM host #41 (sub_filter adds a <link> before </head>); served from
 * /smoknhops-theme/ on the same origin, as Authelia's CSP only allows 'self' styles/fonts.
 * Targets Authelia 4.39.x: shadcn-style theme variables + the Login layout structure.
 * If an Authelia upgrade changes those, login keeps working - only styling falls back.
 */

@font-face {
    font-family: 'SmoknLogo';
    src: url('shrikhand-logo.woff2') format('woff2'); /* Shrikhand (OFL), subset to the logo letters */
    font-display: block;
}

/* ---------- Palette (same as smoknhops.com) ---------- */

:root,
[data-theme],
[data-theme=light],
[data-theme=dark],
[data-theme=grey] {
    --background: #1f0f06;
    --foreground: #f6e7c8;
    --card: #4a2511;
    --card-foreground: #f6e7c8;
    --popover: #3a1c0b;
    --popover-foreground: #f6e7c8;
    --primary: #dc6428;
    --primary-foreground: #fff4d6;
    --secondary: #eba83a;
    --secondary-foreground: #1f0f06;
    --muted: #3a1c0b;
    --muted-foreground: rgba(246, 231, 200, 0.7);
    --accent: #5a2d14;
    --accent-foreground: #f6e7c8;
    --border: rgba(235, 168, 58, 0.35);
    --input: rgba(235, 168, 58, 0.5);
    --ring: #eba83a;
    --custom-icon: #eba83a;
    color-scheme: dark;
}

/* ---------- Background: brown sunburst + vignette ---------- */

/* Only html gets the colour: a painted body background would sit on top of the rays below */
html {
    background: #1f0f06 !important;
}

body {
    background: transparent !important;
}

#root,
#root > div {
    background: transparent !important;
}

body::before {
    content: '';
    position: fixed;
    inset: -50vmax;
    background: repeating-conic-gradient(from 0deg at 50% 50%, #2e1709 0deg 7.5deg, #241106 7.5deg 15deg);
    animation: smok-spin 240s linear infinite;
    z-index: -1;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 35%, transparent 30%, rgba(10, 4, 1, 0.85) 100%);
    pointer-events: none;
    z-index: -1;
}

/* ---------- Logo: replace Authelia's icon with the SMOKNHOPS wordmark ---------- */

.min-h-\[90vh\] .items-stretch > .p-2:first-child > svg,
.min-h-\[90vh\] .items-stretch > .p-2:first-child > img {
    display: none;
}

.min-h-\[90vh\] .items-stretch > .p-2:first-child::after {
    content: 'SMOKNHOPS';
    display: block;
    margin: 6px 0 26px;
    font-family: 'SmoknLogo', 'Cooper Black', Georgia, serif;
    font-size: clamp(2.2rem, 10vw, 3.1rem);
    line-height: 1;
    white-space: nowrap;
    color: #f6e7c8;
    transform: rotate(-4deg);
    text-shadow:
        2px 2px 0 #eba83a,
        4px 4px 0 #dc6428,
        6px 6px 0 #a8401d,
        8px 8px 0 #4a2511,
        10px 13px 18px rgba(0, 0, 0, 0.6);
}

/* ---------- Login box ---------- */

.min-h-\[90vh\] .items-stretch > .mt-2.py-2 {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 30px 22px 22px;
    border: 2px solid rgba(235, 168, 58, 0.55);
    border-radius: 18px;
    background: linear-gradient(#5a2d14, #4a2511);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* The 70s stripe across the top of the box */
.min-h-\[90vh\] .items-stretch > .mt-2.py-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 9px;
    background: linear-gradient(#eba83a 0 33.3%, #dc6428 33.3% 66.6%, #a8401d 66.6%);
}

.min-h-\[90vh\] .items-stretch input:not([type=checkbox]) {
    background: rgba(31, 15, 6, 0.55);
    color: #f6e7c8;
    caret-color: #eba83a;
}

.min-h-\[90vh\] .items-stretch input:not([type=checkbox]):focus {
    border-color: #eba83a;
}

.min-h-\[90vh\] .items-stretch button[type=submit],
#sign-in-button {
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 4px 0 #a8401d, 0 8px 18px rgba(0, 0, 0, 0.4);
    transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}

.min-h-\[90vh\] .items-stretch button[type=submit]:hover,
#sign-in-button:hover {
    filter: brightness(1.08);
}

.min-h-\[90vh\] .items-stretch button[type=submit]:active,
#sign-in-button:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #a8401d, 0 4px 10px rgba(0, 0, 0, 0.4);
}

@keyframes smok-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}