/*
  ----------------------------------------
  Application (Global styles)
  ----------------------------------------
*/

@layer styles {
    /* Desktop nav links */
    .desktop {
        display: flex;
        position: relative;
        align-items: center;
        gap: var(--space-md);
        height: 100%;
        min-height: var(--height-md);

        .nav-link {
            position: relative;
            display: flex;
            align-items: center;
            height: 100%;
            text-decoration: none;
            color: var(--darker);
            font-weight: 600;

            &.active::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 4px;
                background-color: var(--brand-1);
            }
        }
    }

    /* Mobile menu */
    .mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        padding-top: var(--space-md);
        gap: 1rem;

        .nav-link {
            padding: 1rem;
            font-size: var(--text-lg);
            font-weight: var(--font-semibold);
            text-decoration: none;
            color: var(--white);

            &:active {
                background-color: var(--brand-1);
            }
        }
    }

    /* Crud Header (for tables, forms – also used in custom scaffolds /erb/scaffold/*) */
    .crud-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--space-2xl);

        h3 {
            margin: 0;
        }
    }

    /* Public holding page */
    .holding-page {
        min-height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-md);
        background:
            radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--brand-1) 12%, transparent), transparent 32rem),
            radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--highlight) 24%, transparent), transparent 28rem),
            var(--lighter);
    }

    .holding-card {
        width: min(100%, 38rem);
        overflow: hidden;
        border: var(--border) solid color-mix(in srgb, var(--brand-1) 18%, var(--light));
        border-radius: var(--rounded-lg);
        background: var(--white);
        box-shadow: var(--shadow-lg);
    }

    .holding-card__brand {
        position: relative;
        isolation: isolate;
        display: flex;
        min-height: 13rem;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: var(--space-lg);
        background: linear-gradient(145deg, var(--brand-1-content), var(--sidebar));
    }

    .holding-card__brand::before,
    .holding-card__brand::after {
        position: absolute;
        z-index: -1;
        border: var(--border) solid color-mix(in srgb, var(--highlight) 24%, transparent);
        border-radius: 50%;
        content: "";
    }

    .holding-card__brand::before {
        width: 18rem;
        height: 18rem;
        top: -12rem;
        right: -4rem;
    }

    .holding-card__brand::after {
        width: 11rem;
        height: 11rem;
        bottom: -8rem;
        left: -2rem;
    }

    .holding-card__logo {
        width: min(72%, 18rem);
    }

    .holding-card__logo img {
        display: block;
        width: 100%;
        height: auto;
    }

    .holding-card__body {
        padding: var(--space-lg);
        text-align: center;
    }

    .holding-card h1 {
        max-width: 12ch;
        margin: 0 auto var(--space-sm);
        line-height: 0.98;
    }

    .holding-card__message {
        max-width: 36rem;
        margin: 0 auto var(--space-sm);
        color: var(--dark);
        font-size: var(--text-lg);
        line-height: 1.55;
    }

    .holding-card__access {
        margin: 0 auto var(--space-md);
        color: var(--midtone);
        font-size: var(--text-sm);
    }
}