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

:root {
    /* Dark Theme - Removed purple, yellow hover */
    --bg-color: #161616; /* Dark background */
    --primary-color: #ffffff; /* White as primary accent (replaces purple) */
    --hover-color: #FACC15; /* Yellow for hover */
    --secondary-color: #3a3a3a; /* Darker gray */
    --text-color: #f7f7f7; /* Light text */
    --title-color: var(--hover-color); /* Yellow titles (Changed from #ffffff) */
    --description-color: #cccccc; /* Lighter gray for descriptions */
    --card-bg: #1e1e1e; /* Slightly lighter dark background for card */
    --card-border: transparent; /* No border */
    --card-shadow: rgba(0, 0, 0, 0.2); /* Subtle dark shadow */
    --glow-color: transparent; /* No glow */
    --button-bg: var(--primary-color); /* White button background */
    --button-border: transparent; /* No button border */
    --button-hover-bg: var(--hover-color); /* Yellow button hover background */
    --button-hover-border: transparent;
    --button-text-color: var(--bg-color); /* Dark text on light button */
    --button-hover-text-color: var(--bg-color); /* Dark text on yellow hover button */
    --nav-button-color: #888888; /* Medium gray navigation */
    --nav-button-hover-color: var(--hover-color); /* Yellow hover */
    --nav-button-disabled-color: #444444; /* Darker gray disabled */
    --social-icon-color: #ffffff; /* White icons */
    --social-icon-hover-color: var(--hover-color); /* Yellow hover */
    --fade-out-duration: 0.3s; /* Faster fades */
    --fade-in-duration: 0.4s;
    --fade-in-delay: 0.05s;
}

body {
    font-family: 'Inter', sans-serif; /* Updated font */
    line-height: 1.6;
    margin: 0;
    padding: 1rem;
    background-color: var(--bg-color); /* Dark background */
    color: var(--text-color); /* Light text */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden; /* Prevent body scroll */
}

.card-container {
    max-width: 380px; /* Standard Carrd width */
    width: 90%;
    padding: 2rem 1.5rem; /* More vertical padding */
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px; /* Standard border-radius */
    box-shadow: 0 5px 20px var(--card-shadow); /* Subtle shadow */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 500px; /* Ensure minimum height */
    justify-content: flex-start; /* Align content to top */
    position: relative;
    overflow: hidden;
}

/* Paged Content Area */
#paged-content {
    width: 100%;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    display: flex;
    align-items: stretch;
}

.page {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center vertically */
    gap: 1rem; /* Space between elements */
    width: 100%;
    min-width: 100%;
    opacity: 0;
    animation: fadeOut var(--fade-out-duration) ease-out forwards;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
}

.page.active {
    display: flex;
    position: relative;
    opacity: 0;
    animation: fadeIn var(--fade-in-duration) var(--fade-in-delay) ease-in forwards;
    z-index: 1;
}

/* Page Content Wrapper */
.page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content vertically */
    gap: 1.2rem; /* Slightly more gap */
    width: 100%;
    height: 100%;
    z-index: 2;
    position: relative;
    padding: 0.5rem; /* Less padding inside content area */
    box-sizing: border-box;
    text-align: center; /* Explicitly center text within this container */
}

/* Remove explicit page backgrounds - use card background */
.page-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background-color: transparent; /* Ensure transparency */
    opacity: 1;
}

/* Page Title and Description */
.page-title {
    font-size: 1.7em; /* Adjusted size */
    font-weight: 700; /* Bolder */
    color: var(--title-color); /* Use the title color variable (now yellow) */
    margin: 0 0 0.2rem 0;
}

.page-description {
    font-size: 1em;
    color: var(--description-color);
    margin: 0 0 1rem 0;
    max-width: 90%;
}

/* Style for the specific welcome title padding - color is now handled globally */
.welcome-title-padding {
    padding-top: 150px; /* Add specific top padding */
    padding-bottom: 0; /* Remove bottom padding */
    padding-left: 0; /* Ensure no horizontal padding */
    padding-right: 0; /* Ensure no horizontal padding */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); } /* Subtle slide-in */
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
     from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-5px); } /* Subtle slide-out */
}

.placeholder-text {
    color: var(--text-color);
    opacity: 0.6; /* Slightly less opaque */
    font-style: italic;
    margin: auto 0;
    padding: 1rem 0;
    z-index: 2;
}

/* Container for multiple buttons */
.link-buttons-container {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 0.8rem;
    align-items: center; /* Center buttons */
    width: 100%;
    max-width: 300px; /* Limit width */
}

.link-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem; /* Space between icon and text */
    background-color: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 999px; /* Pill shape */
    padding: 0.8rem 1.5rem; /* Adjusted padding */
    text-decoration: none;
    color: var(--button-text-color);
    font-weight: 600; /* Slightly bolder */
    font-size: 0.9em;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; /* Added color transition */
    text-align: center;
    width: 100%; /* Full width within container */
    box-sizing: border-box;
    z-index: 2;
}

/* Single button takes full width */
.page-content > .link-button {
     width: 100%;
     max-width: 300px;
     margin-left: auto;
     margin-right: auto;
}

.link-button i {
    font-size: 1em;
    width: 16px; /* Fixed width */
    text-align: center;
    margin-right: 0.1rem;
    /* Ensure icon color transitions smoothly too */
    transition: color 0.2s ease;
}

.link-button:hover {
    background-color: var(--button-hover-bg); /* Use updated hover bg (yellow) */
    border-color: var(--button-hover-border);
    color: var(--button-hover-text-color); /* Use updated hover text color (dark) */
    transform: scale(1.03); /* Slight scale on hover */
    box-shadow: none;
}

/* Social Icons */
.social-icons {
    display: flex;
    justify-content: center; 
    align-items: center; 
    gap: 1.8rem; 
    margin-top: 1.5rem; 
    width: 100%;
    z-index: 2;
}

.social-icons a {
    color: var(--social-icon-color);
    text-decoration: none;
    font-size: 1.5em; 
    transition: color 0.2s ease, transform 0.2s ease;
    line-height: 1;
    display: inline-flex; 
    justify-content: center;
    align-items: center;
}

.social-icons a:hover {
    color: var(--social-icon-hover-color); 
    transform: scale(1.15); 
}

.generated-perspectives-page .social-icons a {
    padding: 10px;
}

.generated-perspectives-page .social-icons a i.fa-x-twitter {
    color: var(--social-icon-color); /* Ensure it's white */
}

.generated-perspectives-page .social-icons a:hover i.fa-x-twitter {
    color: var(--social-icon-hover-color); /* Keep the standard hover effect */
}

/* Navigation Controls */
.navigation-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 1rem; 
    box-sizing: border-box;
    margin-top: auto; 
    margin-bottom: 0.5rem; 
    position: relative;
    z-index: 5;
}

.nav-button {
    background: none;
    border: none;
    color: var(--nav-button-color);
    font-size: 1.8em; 
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
    text-shadow: none;
}

.nav-button:hover {
    color: var(--nav-button-hover-color); 
    transform: scale(1.1);
}

.nav-button:disabled {
    color: var(--nav-button-disabled-color);
    cursor: not-allowed;
    transform: none;
    text-shadow: none;
}

/* Remove old/unused styles */
header, main, .booklet-container, .booklet, .navigation {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    body {
        padding: 0.5rem;
        align-items: flex-start;
        padding-top: 1rem; 
    }
    .card-container {
        padding: 1.5rem 1rem; 
        min-height: 450px;
        width: 95%;
    }
     .page-title {
        font-size: 1.5em;
    }
     .page-description {
        font-size: 0.95em;
        margin-bottom: 0.8rem;
    }
    .link-button {
        padding: 0.7rem 1.2rem;
        font-size: 0.85em;
    }
    .link-button i {
        font-size: 0.9em;
    }
     .link-buttons-container {
         gap: 0.6rem;
         max-width: 280px;
     }
    .social-icons {
        gap: 1.5rem;
        margin-top: 1.2rem;
    }
    .social-icons a {
        font-size: 1.4em;
    }
     .navigation-controls {
        padding: 0 0.5rem;
     }
    .nav-button {
        font-size: 1.7em;
    }
}

@media (max-width: 400px) {
     .card-container {
        padding: 1rem 0.8rem;
        min-height: 400px;
     }
      .page-content {
         padding: 0.2rem;
         gap: 1rem;
     }
     .page-title {
        font-size: 1.3em;
     }
     .page-description {
        font-size: 0.9em;
        margin-bottom: 0.6rem;
     }
     .link-button {
        padding: 0.6rem 1rem;
        font-size: 0.8em;
        gap: 0.4rem;
     }
     .link-buttons-container {
         max-width: 100%; 
     }
     /* If only one button on small screen */
    .page-content > .link-button {
        max-width: 250px; 
    }
     .social-icons {
        gap: 1.2rem;
        margin-top: 1rem;
     }
     .social-icons a {
        font-size: 1.3em;
     }
     .nav-button {
        font-size: 1.6em;
     }
}