/* ==========================================================================
   PUBLIC SHARED UTILITIES
   Contains shared custom utility classes used across multiple public components.
   ========================================================================== */

/* --- Readability - Max Widths --- */
:focus,
:focus-visible {
    outline: none;
}
.max-w-700 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.max-w-800 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.max-w-900 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Icon Circles --- */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.icon-circle-sm {
    width: var(--icon-circle-sm);
    height: var(--icon-circle-sm);
}

.icon-circle-md {
    width: var(--icon-circle-md);
    height: var(--icon-circle-md);
}

.icon-circle-lg {
    width: var(--icon-circle-lg);
    height: var(--icon-circle-lg);
}

.icon-circle-xl {
    width: var(--icon-circle-xl);
    height: var(--icon-circle-xl);
}

/* --- Card Hover Effects --- */
.hover-card-primary {
    transition: all 0.3s ease !important;
    cursor: pointer;
}

.hover-card-primary:hover {
    transform: translateY(-10px) scale(1.03) !important;
    box-shadow: 0 15px 30px rgba(var(--color-primary-mid-rgb), 0.2) !important;
}



/* --- Layout Utilities --- */
.public-page-layout {
    margin-top: 72px;
    min-height: calc(100vh - 72px);
}

.rotate-180 {
    transform: rotate(180deg);
}

/* --- Brand Links & Containers --- */
.brand-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-mid);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.brand-link {
    color: var(--color-primary-mid);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-fast);
}

.brand-link:hover {
    color: var(--app-primary-mid);
}

.turquoise-link {
    color: var(--color-secondary-turquoise);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-fast);
}

.turquoise-link:hover {
    opacity: 0.8;
}

/* --- Entrance Animations --- */
.animate-fade-in,
.animate-fade-in-left,
.animate-fade-in-right {
    opacity: 0;
    animation-duration: 1.5s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.animate-fade-in {
    animation-name: slowFade;
}

.animate-fade-in-left {
    animation-name: slowFadeLeft;
}

.animate-fade-in-right {
    animation-name: slowFadeRight;
}

@keyframes slowFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slowFadeLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slowFadeRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}