/**
 * Hero Navigation Links
 * Simple, elegant links with prominence toggle
 * Uses transform-only scale to prevent layout shifts
 */

@import url(https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&display=swap);

.hero-nav {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
    width: 100%;
    max-width: 100vw;
    padding: 0 1.5rem;
    /* Prevent any horizontal scroll */
    overflow: hidden;
}

.hero-link {
    display: block;
    font-family: 'Cinzel', 'Cormorant Garamond', serif;
    /* Use clamp for responsive sizing that won't exceed viewport */
    font-size: clamp(1rem, 5vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        text-shadow 0.8s ease-in-out,
        color 2s ease-in-out;
    text-align: center;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0.95);
    /* Vital for mobile wrapping */
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}

/* Keep white color for greeting cards state */
.hero-nav.cards-active .hero-link {
    color: rgba(255, 255, 255, 0.95);
}

.hero-nav.cards-active .hero-link.prominent {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.3));
}

.hero-link:hover {
    transform: scale(1.02);
    text-shadow: 0 0 8px rgba(255, 255, 255, 1);
}

/* 
 * Prominent state for alternating hero 
 * Uses SCALE rather than font-size to prevent layout shift 
 */
.hero-link.prominent {
    transform: scale(1.08);
    /* Minimal scale change to avoid jitter */
    opacity: 1;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    font-weight: 500;
    /* Subtle weight change instead of font size */
}

.hero-link:not(.prominent) {
    opacity: 0.7;
    transform: scale(0.96);
}

.hero-link:not(.prominent):hover {
    opacity: 1;
    transform: scale(0.98);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-nav {
        gap: 1.5rem;
    }

    .hero-link {
        /* More aggressive downsizing for typical mobile */
        font-size: clamp(0.9rem, 4.5vw, 1.25rem);
    }

    .hero-link.prominent {
        transform: scale(1.05);
        /* Even smaller scale on mobile */
    }
}

/* Target small phones (iPhone SE, narrow browsers) */
@media (max-width: 360px) {
    .hero-nav {
        gap: 1.25rem;
        padding: 0 0.75rem;
    }

    .hero-link {
        font-size: 0.875rem;
        letter-spacing: 0.05em;
        /* Tighter letter spacing to save space */
    }
}