/* style.css - Minimal styling for Sonja Heinze's placeholder page */

body {
    font-family: 'Inter', sans-serif;
    /* Updated background to a subtle gradient from the main site's palette */
    background: linear-gradient(270deg, rgba(247, 82, 116, 0.5), rgba(79, 70, 229, 0.5), rgba(178, 84, 234, 0.5), rgba(15, 100, 227, 0.5));  /* Light Violet to Lighter Indigo */
    color: #1f2937; /* Dark gray text (Tailwind's gray-800) */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Ensure footer is at the bottom */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Full viewport height */
    text-align: center;
    line-height: 1.6;
}

.container {
    background-color: rgb(255, 255, 255); /*White
    */
    padding: 2rem 2.5rem; /* Padding around the content */
    border-radius: 0.75rem; /* Rounded corners (Tailwind's rounded-xl) */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Shadow (Tailwind's shadow-lg) */
    max-width: 600px; /* Max width of the content card */
    width: 90%; /* Responsive width */
    margin: 1rem; /* Margin for smaller screens */
}

header {
    margin-bottom: 1.5rem; /* Add some space below the header content */
}

header h1 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.5rem; /* Large font size for the name */
    color: #4f46e5; /* Indigo color (Tailwind's indigo-600) */
    margin-bottom: 0.5rem;
    letter-spacing: 0.025em;
}


/* Styling for the new thesis subtitle */
.thesis-subtitle {
    font-size: 1rem; /* Slightly smaller than contact info header */
    color: #4b5563; /* Gray text (Tailwind's gray-600) */
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.5;
    font-weight: 400; /* Normal font weight */
}

.thesis-subtitle em {
    font-style: italic;
    color: #374151; /* Slightly darker for emphasis (Tailwind's gray-700) */
}

/* Hide line breaks on larger screens, show on mobile for better readability */
.mobile-break {
    display: none;
}


@media (min-width: 640px) { /* sm breakpoint */
    header h1 {
        font-size: 3rem; /* Slightly larger on bigger screens */
    }
    .thesis-subtitle {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) { /* Smaller mobile screens */
    .mobile-break {
        display: block; /* Show line breaks */
    }
    .thesis-subtitle {
        font-size: 0.95rem; /* Slightly smaller font on very small screens */
    }
    header h1 {
        font-size: 2.25rem;
    }
}


#welcome-to-landing-page h2 {
    font-size: 1.5rem;
    color: #ec4899; /* Pink color on hover (Tailwind's pink-500) */
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600; /* font-semibold */
}

#contact-info h2 {
    font-size: 1.5rem;
    color: #ec4899; /* Pink color on hover (Tailwind's pink-500) */
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600; /* font-semibold */
}

.contact-links {
    display: flex;
    flex-direction: column; /* Stack links vertically */
    align-items: center; /* Center links if they have different widths */
    gap: 1rem; /* Space between contact links */
}

.contact-links a {
    display: inline-flex; /* Align icon and text */
    align-items: center;
    text-decoration: none;
    color: #4b5563; /* Gray text (Tailwind's gray-600) */
    font-size: 1.1rem;
    padding: 0.5rem 1rem; /* Padding for better touch targets */
    border-radius: 0.375rem; /* rounded-md */
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.contact-links a:hover {
    color: #ec4899; /* Pink color on hover (Tailwind's pink-500) */
    background-color: #fdf2f8; /* Very light pink background (Tailwind's pink-50) */
}

.contact-links a i {
    margin-right: 0.75rem; /* Space between icon and text */
    font-size: 1.25rem; /* Slightly larger icon */
    width: 20px; /* Fixed width for icon alignment */
    text-align: center;
}

footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb; /* Light gray border (Tailwind's gray-200) */
    font-size: 0.875rem; /* Smaller text for footer */
    color: #6b7280; /* Lighter gray text (Tailwind's gray-500) */
    width: 100%; /* Ensure footer takes full width of container if needed */
}