@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
@import 'https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css';

:root {
    --bulma-family-primary: 'Open Sans', sans-serif;
    --checkbox-size: 18px;
    --bulma-primary-h: 25deg;
    --bulma-primary-s: 66%;
    --bulma-primary-l: 83%;
    --bulma-link-h: 189deg;
    --bulma-link-s: 79%;
    --bulma-link-l: 50%;
    --bulma-info-h: 174deg;
    --bulma-info-s: 20%;
    --bulma-info-l: 68%;
    --bulma-success-h: 171deg;
    --bulma-success-s: 48%;
    --bulma-success-l: 69%;
    --bulma-warning-h: 43deg;
    --bulma-warning-s: 72%;
    --bulma-warning-l: 79%;
    --bulma-danger-h: 16deg;
    --bulma-danger-l: 67%;
    --bulma-radius: 0.25em;
}

.title {
    font-weight: 500 !important;
}

/* Overrides */
.select,
select {
    width: 100%;
}

.is-dark-bordered.table td,
.is-dark-bordered.table th {
    border-color: black;
}

.h-full {
    height: 100%;
}

.mt-auto {
    margin-top: auto;
}

/* Landing Page Helpers */
.is-min-height-screen {
    min-height: 100vh;
}

.is-family-serif {
    font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
}

.text-balance {
    text-wrap: balance;
}

.step-number {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    border: 2px solid var(--bulma-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    background-color: var(--bulma-background);
}

.hero-background {
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Custom spacing not in default Bulma */
.py-12-custom {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.py-24-custom {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* Auth pages */
.login-card {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

/* Projects List Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.project-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
}

.project-card .card-content {
    flex-grow: 1;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile Sticky Create Button */
@media screen and (max-width: 768px) {
    .create-button-wrapper {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        z-index: 100;
    }

    .create-button-wrapper .button {
        border-radius: 50%;
        width: 3.5rem;
        height: 3.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Custom Bulma checkbox size override */
input[type='checkbox'],
.checkbox input[type='checkbox'] {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    min-width: var(--checkbox-size);
    min-height: var(--checkbox-size);
    max-width: var(--checkbox-size);
    max-height: var(--checkbox-size);
}

.checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.button {
    --bulma-button-padding-horizontal: 0.7em;
}

.title {
    --bulma-title-weight: 600;
}

.input {
    --bulma-input-radius: 0.25rem;
}

.is-hidden-print {
    @media print {
        display: none !important;
    }
}