/* style.css */

body {
    font-family: 'Outfit', sans-serif;
    background-color: #F7FAFC;
    color: #2D3748;
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    height: 400px;
    max-height: 400px;
}

/* Base style for navigation links */
.nav-link {
    position: relative;
    /* Needed for ::after pseudo-element positioning */
    transition: all 0.3s ease-in-out;
    /* Smooth transitions for all properties */
    padding: 0.5rem 0.75rem;
    /* Add some padding for the bubble effect */
    white-space: nowrap;
    /* Prevent text wrapping */
    text-decoration: none;
    /* Remove default underline */
    color: #2D3748;
    /* Default text color */
    display: inline-flex;
    /* To properly center ::after if needed, or just for consistent spacing */
    align-items: center;
    /* For vertical centering of text within link */
}

/* Hover state for navigation links */
.nav-link:hover {
    color: #4299E1;
    /* Blue text on hover */
}

/* Style for the explicitly active/selected navigation link (the "bubble below" effect) */
.nav-link.active-bubble {
    color: #4299E1;
    /* Active text color is blue */
    font-weight: 600;
    /* Make it slightly bolder when active */
}

.nav-link.active-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    /* Position below the text */
    left: 50%;
    /* Start from center */
    transform: translateX(-50%);
    /* Center horizontally */
    width: 25px;
    /* Width of the bubble */
    height: 6px;
    /* Height of the bubble */
    background-color: #4299E1;
    /* Blue color */
    border-radius: 9999px;
    /* Rounded shape */
    opacity: 1;
    /* Fully visible */
    transition: all 0.3s ease-in-out;
}

/* Hide the bubble when not active or on hover if not active */
.nav-link:not(.active-bubble)::after {
    content: '';
    /* Still need content to make transition work */
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    /* Hidden width */
    height: 6px;
    background-color: #4299E1;
    border-radius: 9999px;
    opacity: 0;
    /* Fully transparent */
    transition: all 0.3s ease-in-out;
}

/* On hover, if not active, show a subtle version of the bubble below */
.nav-link:not(.active-bubble):hover::after {
    width: 15px;
    /* Smaller width on hover */
    opacity: 0.7;
    /* Slightly transparent */
}

/* Ensure the "Devenir Sponsor" button doesn't get the nav-link styles for active/hover bubble */
.nav-link.bg-blue-500 {
    padding: 0.5rem 1rem;
    /* Adjust padding for button */
    border-radius: 9999px;
    /* Ensure it's rounded */
    color: white;
    /* Text color for button */
    background-color: #3B82F6;
    /* Blue background for button */
    border-bottom: none;
    /* No underline for button */
}

.nav-link.bg-blue-500:hover {
    background-color: #2563EB;
    /* Darker blue on hover for button */
    color: white;
}

.tier-card {
    transition: all 0.3s ease-in-out;
    border: 2px solid #E2E8F0;
    cursor: pointer;
    /* Ensure the cursor indicates it's clickable */
}

.tier-card:hover {
    border-color: #4299E1;
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* The .selected class is now primarily for hover effect, and will be removed on mouseleave */
.tier-card.selected {
    border-color: #4299E1;
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.advantage-card {
    transition: all 0.3s ease-in-out;
}

.advantage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.google-form-container {
    position: relative;
    width: 100%;
    /* Take full width of its parent */
    height: 900px;
    max-height: 150vh;
    overflow: hidden;
}

.google-form-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Styling for markdown generated content */
#ideasContent h1,
#ideasContent h2,
#ideasContent h3,
#ideasContent h4,
#ideasContent h5,
#ideasContent h6 {
    font-weight: 600;
    /* semi-bold */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #2D3748;
}

#ideasContent h3 {
    font-size: 1.5rem;
}

/* text-2xl */
#ideasContent h4 {
    font-size: 1.25rem;
}

/* text-xl */

#ideasContent p {
    margin-bottom: 1em;
    line-height: 1.6;
}

#ideasContent ul {
    list-style: disc;
    padding-left: 1.5em;
    margin-bottom: 1em;
}

#ideasContent ol {
    list-style: decimal;
    padding-left: 1.5em;
    margin-bottom: 1em;
}

#ideasContent li {
    margin-bottom: 0.5em;
}

#ideasContent strong {
    font-weight: 700;
    /* bold */
}

#ideasContent em {
    font-style: italic;
}

/* Custom max-width for the main container on larger screens for comfortable padding */
.container {
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;
}