/* InfraFabric Custom Branding - Clean & Bold */

/* Hide ALL Forgejo branding - ONLY on home page */
body.home .hero h1,
body.home .hero h2,
body.home .hero .octicon,
body.home .hero img,
body.home .ui.header img.logo,
body.home img[src*="forgejo"],
body.home img[src*="logo"],
body.home .logo,
body.home .hero svg,
body.home .ui.header .svg,
body.home .hero .ui.header,
body.home .hero-logo,
body.home .brand-logo,
body.home .app-logo {
    display: none !important;
}

/* Hide the default hero section content - ONLY on home page */
body.home .hero > *:not(.if-hero) {
    display: none !important;
}

/* Custom hero section - LARGE */
.if-hero {
    text-align: center;
    padding: 4rem 2rem;
    margin-bottom: 2rem;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.if-hero h1 {
    font-size: 4rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
    text-transform: none;
}

.if-typing-container {
    font-size: 3rem;
    font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
    color: #6c757d;
    min-height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
}

.if-typing-prefix {
    color: #3498db;
    font-weight: 700;
}

.if-typing-word {
    color: #1a1a2e;
    font-weight: 600;
    border-right: 3px solid #3498db;
    padding-right: 8px;
    animation: blink-caret 0.75s step-end infinite;
    min-width: 1ch;
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #3498db; }
}

/* Make sure hero shows on home page */
body.home .hero {
    display: block !important;
    background: transparent !important;
}

/* Hide navbar logo too */
.ui.secondary.menu .item img,
.ui.secondary.menu .header.item img,
#navbar .logo,
.navbar-brand img {
    display: none !important;
}

/* ============================================================ */
/* OAUTH / THIRD-PARTY LOGIN - ALWAYS VISIBLE */
/* ============================================================ */
.oauth2-login-image,
.oauth2-login-name,
.third-party-sign-in,
.oauth2-login,
.oauth2-login-navigator,
[class*="oauth"],
[class*="third-party"],
.user.signin .oauth2-login-image,
.user.signin .third-party,
.signin .oauth2-login-image,
.signin .third-party {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Make OAuth buttons prominent */
.oauth2-login-navigator {
    margin: 1.5rem 0 !important;
    padding: 1rem !important;
    border-top: 1px solid #e1e4e8 !important;
}

.oauth2-login-navigator a {
    display: inline-flex !important;
    align-items: center;
    padding: 10px 20px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #d0d7de;
    transition: background 0.2s;
}

.oauth2-login-navigator a:hover {
    background: #f6f8fa;
}

/* ============================================================ */

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .if-hero h1 {
        color: #ecf0f1;
    }
    .if-typing-prefix {
        color: #5dade2;
    }
    .if-typing-word {
        color: #ecf0f1;
        border-color: #5dade2;
    }
    @keyframes blink-caret {
        from, to { border-color: transparent; }
        50% { border-color: #5dade2; }
    }
}

/* Responsive - still big on mobile */
@media (max-width: 768px) {
    .if-hero h1 {
        font-size: 2.5rem;
    }
    .if-typing-container {
        font-size: 2rem;
    }
}

/* GitHub-style File Action Buttons */
.if-file-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 500;
    background: #f6f8fa !important;
    color: #24292f !important;
    border: 1px solid rgba(31, 35, 40, 0.15) !important;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    text-decoration: none !important;
    line-height: 20px;
    margin: 0 2px;
}

.if-file-btn:hover {
    background: #f3f4f6 !important;
    border-color: rgba(31, 35, 40, 0.25) !important;
    color: #24292f !important;
}

.if-file-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.if-file-btn span {
    white-space: nowrap;
}

/* Download button - green accent */
.if-download-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 500;
    background: #2da44e !important;
    color: white !important;
    border: 1px solid rgba(31, 35, 40, 0.15) !important;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none !important;
    line-height: 20px;
    margin: 0 2px;
}

.if-download-btn:hover {
    background: #2c974b !important;
    color: white !important;
}

.if-download-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Button group container */
.file-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Dark mode for file buttons */
@media (prefers-color-scheme: dark) {
    .if-file-btn {
        background: #21262d !important;
        color: #c9d1d9 !important;
        border-color: rgba(240, 246, 252, 0.1) !important;
    }
    .if-file-btn:hover {
        background: #30363d !important;
        border-color: rgba(240, 246, 252, 0.2) !important;
        color: #c9d1d9 !important;
    }
    .if-download-btn {
        background: #238636 !important;
        color: white !important;
    }
    .if-download-btn:hover {
        background: #2ea043 !important;
    }
}