/* 1. Import a Modern Google Font (Inter) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

/* --- General Reset & Body Styles --- */

:root {
    /* Define modern colors */
    --color-primary-blue: #007AFF; /* Vibrant Accent Blue */
    --color-text-dark: #333333; /* Soft Dark Gray */
    --color-background-light: #F5F5F5; /* Off-White Background */
    --color-border-gray: #CCCCCC; /* Light Border */
    --spacing-unit: 1rem;
}

body {
    /* Apply the new font, spacing, and background */
    font-family: 'Inter', sans-serif;
    background-color: #FFFFFF; /* Clean white background */
    color: var(--color-text-dark);
    line-height: 1.6;
    margin: 0;
    padding: 2rem; /* Add overall padding */
}

/* Center the main content for a polished look */
.container {
    max-width: 700px;
    margin: 0 auto; /* Centers the content */
    padding-top: 50px;
}

/* --- Headings and Text --- */

h1 {
    font-size: 2.5rem; /* Larger heading */
    font-weight: 800; /* Extra bold for impact */
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}

p {
    margin-top: 0;
    color: #666666; /* Slightly lighter body text */
}


/* --- Search Bar Container --- */

.search-container {
    display: flex; /* Aligns the input and button side-by-side */
    margin-top: 2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
    border-radius: 8px; /* Rounded corners for the entire bar */
    overflow: hidden; /* Ensures the inner elements respect the border-radius */
}

/* Search Input Field */
.search-container input[type="text"] {
    flex-grow: 1; /* Takes up most of the space */
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    border: none; /* Remove default border */
    outline: none; /* Remove focus outline */
}

/* Search Button */
.search-container button {
    background-color: var(--color-primary-blue);
    color: white;
    border: none;
    padding: 0 1.5rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-container button:hover {
    background-color: #0056b3; /* Darken on hover */
}


/* --- Bottom Links --- */

.link-group {
    margin-top: 2rem;
}

.link-group a {
    color: var(--color-primary-blue);
    text-decoration: none; /* Remove the default underline */
    margin-right: 1.5rem; /* Space between links */
    font-weight: 600; /* Semi-bold links */
    transition: color 0.2s ease;
}

.link-group a:hover {
    color: #0056b3; /* Darker blue on hover */
    text-decoration: underline; /* Add underline only on hover */
}
/* ... (Keep the rest of the style.css as is) ... */

/* Search Input Field */
.search-container input[type="text"] {
    flex-grow: 1; 
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    border: none; 
    outline: none; 
    /* Crucially, the placeholder text color is often different. */
    /* Use a standard selector to style the placeholder/injected text. */
}

/* Add this to your style.css to change the placeholder/API-injected text color */
.search-container input::placeholder,
.search-container input::-webkit-input-placeholder {
    color: #999999; /* Use a light gray for the prompt text */
    font-style: italic; /* Optional: Make it slightly italic to look like a prompt */
}

/* ... (Keep the rest of the style.css as is) ... *//* --- Background Image Styles (Add this section to style.css) --- */

body {
    /* (Keep existing styles like font-family, color, etc.) */
    
    background-image: url('waves.png');
    
    /* 1. FIX: Prevent Tiling/Repeating */
    background-repeat: no-repeat;
    
    /* 2. FIX: Scale the image to cover the entire screen */
    background-size: cover;
    
    /* Optional: Fix the background so it doesn't scroll with the content */
    background-attachment: fixed;
    
    /* Set a fallback color just in case the image doesn't load */
    background-color: #3f6e80; /* A dark blue/teal color to match the waves */
}